Replit: The Developer Version - Replit Tutorial

If you're a developer and you've been watching the course from the beginning, you have a lot of questions about a lot of things because I have not touched on any of the things that a developer would care about. What framework is being used? What does the backend look like? How is security handled? How is this actually wired together? What does the code itself look like? What integrations can I bolt on myself? Can I choose frameworks? There are so many questions deserving answers that I should probably make an entire course about this focused on developers, but that's out of scope for this course. So instead, I'll give you a speed run of the developer-centric features so you can go explore on your own. From the top, instead of going to create app and then prompt to create an app, you can click on import code or design and import any repository from GitHub, Bitbucket, Figma, Lovable, or pretty much anywhere else. You can even upload a zip folder with content in it. Second, in the create app panel, you may have noticed when I opened up this dropdown that there's a start from scratch option. The start from scratch option directly relates to developer frameworks. On this page, you can see all the available frameworks that Repl.it has built in that you can pull from. Now, if you're using the Repl.it agent, it'll automatically pick a framework based on your project, but you can also pick any one of these frameworks and a lot more yourself as you start building your apps. Now that puts constraints on the agents on what it can do, but it also gives you way more control. And you can create and publish your own frameworks here as well. On the topic of integrating things, if you go look at the integrations page, you'll quickly see that in addition to all the built-in integrations, all the connectors that are there, there's also support for MCP servers for the Repl.it agent. And while currently the only MCP server that is built in is the Figma MCP server, you can add your own MCP servers. And Repl.it is also actively looking for feedback on what MCP servers to bring in. So if you're already working with MCP servers, or you have a preferred MCP server that you want to bolt into your process, you can right here. And while you're at it, you can also bolt in GitHub, Bitbucket, and GitLab, so that you can push and pull your repos to and from external sources. In fact, I know people who are using Repl.it to build things and then pushing the content to GitHub and publishing it there or publishing it somewhere else. They're just using Repl.it and the Repl.it agent as the work environment. Now, as you do so, keep in mind, once you start syncing with these external services, those services have no access to the Repl.it agent and what you do externally may also interfere with the agent, so think about how your work process works and where you are leveraging different tools as you do so. But what about the code and the backend? Because we haven't seen any of that yet. Let me show you. From the app view, you can switch over to the code view by simply toggling this button up here. This opens the file tree for the project, and from here, you can open any of the files and work with it, and this is just a regular code editor. Here you can write code. You have an AI agent down here that does auto-complete and other things. You have git diffing, syntax highlighting, all the features you want. And this is just a standard code editor that works exactly like any standard code editor. You just have the file list on the right side instead of the left side. And when you open this, you quickly see how the project I built was built. This is a TypeScript project with Vite at the bottom. There's Pulse CSS, Tailwind, Nothing surprising. But this is where you would do your actual coding. Now, keep in mind, if you change the code here, the agent doesn't know that you did that. So you need to then update the agent to let it know, hey, I made changes to the code, otherwise things can get a little messy. Looking at the top toolbar, you'll also see there is a console, standard console, run regular console commands, or let the agent do it. When you use the agent, the agent is using this console, but you can also go in and mess around with it yourself. There's a database tab, if you have a database. And from here, you can go in and look at both the dev database and the production database. If I go into the dev database, you can see here, standard database with entries and diving into the materials, you start seeing how everything is working. Now, as for keys, if I go over to my other project, Dash Display, where I added in my own custom keys, I can click on this plus button here. Here you see all the different tabs you can open. And one of those tabs is secrets. Here are all the secrets that are stored for the project. So here we have the session secret, we have the ambient weather API key and the ambient weather application key, all stored within a secrets store inside Repl.it. And as you dig through all the different options in this menu, you'll see everything that you expect to see as a developer is sitting right here. You have Git version control, you have the playground, You have the key value store. You have a shell and VMC and workflows and preview. All of the things for developers sit inside the Repl.it environment. You just have to go and open it. Bottom line, even though I didn't talk about it, Repl.it has all the features you need as a developer to collaborate with someone who's not a developer to build an app. And because everything is unified within this one environment, you can both work on the same project in modalities that work for you and collaborate rather than conflict in that work, which is pretty cool.