Plan and build the first prototype - Replit Tutorial

Time to go hands-on with Repl.it to build an app. When you log into Repl.it, you see this view where you can build an app right away, or you can start with a design. If you have a basic app or you want to iterate on the design before you start wiring everything together, start in the design panel. If on the other hand, you have a fairly good idea of what you want to build, and it involves a lot of moving parts, start in the app panel instead. That's what I'm gonna do. The reason I start here is because here, I get a lot more control over how Repl.it is going to approach this problem. Now, before you paste in the prompt and hit start, let's do some quick configuration. In Repl.it, you can build different types of apps. The default is the web app, and that's probably what you need because web apps work everywhere, on your computer, on your tablet, on your phone, and you can even install them on your phone or tablet. But in some cases, you may need to build a mobile app, or a data app, or a 3D game, or agents and automations, and you can do all these things in Repl.it as well. but in this course, we'll focus on the web app. Next, I'll choose the theme. So here, if you don't make a choice, a choice will be made for you by Repl.it. If you want to use one of the default themes, you can open up the panel here and select the default theme, or you can go to manage theme and build your own, like I've done, and that's what I'll choose. Now comes the crucial part. Instead of using the builder right away, I'm gonna switch the mode to plan. In plan mode, Repl.it builds a plan with step-by-step instructions for itself on how it's going to build out your app. And you get to have input on that plan before any of it is executed. This ensures that the app is built in a logical way and that you're not wasting a lot of tokens on figuring out how to build everything together. So this step is essential for not burning tons of tokens and for actually getting to the final results quicker. Oh, and if you have designs or data or files or sketches or anything else you want either incorporated into the app or referenced by Repl.it as it's building out the app, you can attach them by clicking the attach button. But I don't have any of that, so I'm just gonna paste in my prompt. In ChatGPT, I copy the new prompt and paste it in. And what you see right away is, instead of the prompt being pasted in, it gets added as a text file. That's because my prompt is still too long. Now, I can either run the app like this by saying, build the app according to the specs in the text file, or I can go back to ChatGPT and say, too long, reduce this to about half the length while keeping all the information intact. Language models are language transformers, and they do a really good job at tasks like reducing text while keeping all the important information. So this is a perfect use case for ChatGPT. Let's see if this is any better. I'll copy that, paste it in, and now we have a full prompt. Now, the reason I did this is because I want to use one more feature in Repl.it. See the button here that says Improve Prompt? I'll click on it. Repl.it will now read through the prompt and transform it again to make it fit with Repl.it's requirements before I run it. All right, my prompt is improved. The planning agent is activated. Time to click Start. Repl.it now opens your app in a new view where you have the chat on the left side and the preview and other information on the right. And in the chat, you can now follow along as Repl.it does its work. It has these little icons showing you what it's doing. So you have one showing you the actual process or when it's running things. You have an icon showing you it is thinking through things. So this is the actual planning stage where it's spelling out to itself how to do the things it's going to do and what tools it's going to use. This is the LLM prompting itself and then re-ingesting its own prompt in the planning stage. Then below, we have the actual work being done. files are created, a database is created, more thinking happens, edits are done. And as all of this rolls forward, you can see things start taking shape in the preview panel. There's an enormous amount of stuff happening on the backend as the system builds out the app. And all of that work would normally take me hours to do, just to get started, but Repl.it is doing it for me and bringing the app up to a point where it actually works. Take a look. In less than five minutes, Repl.it has built out a complete prototype of my app so that I can start testing it to see if it works the way I want to and to iterate on it so I can get it to work better. In the chat, I get a breakdown of exactly what was done and how the app works, including things like how to log into the admin dashboard. It spells out next steps for me to do, like log in, try adding questions and talks. And because the app technically is now done, as in it's working, I can even choose to deploy it, publish it onto the web for other people to test, experiment, or use.