Build the First Working Version of Your App
The trap in this stage is asking for the whole app in one message. You will get something that looks finished and falls over the first time you use it for real. Build the main screen first, make it work, save, then add the next.
The first prompt
Fresh folder, fresh chat. Paste your plan, then:
Build only the Today screen of this app as a simple web app I can run on my computer. Keep the habits in the browser's local storage so they survive a page reload. No accounts, no server. Show each habit with a tick box for today and its current streak in days. Add a small form to add a habit. Explain how to run it.
Build only the list screen of this app as a simple web app I can run on my computer. For now keep the items in the browser's local storage; we will make it shared in a later step, so keep the code that saves and loads items in one place I can swap out. Show items with a tick for bought and a box to add one. Explain how to run it.
Build only the Request a time screen of this app as a simple web app I can run on my computer. For now, when the form is sent, just show the request on screen; we will add a real database later, so keep the saving code in one place I can swap out. Check that name, contact and time are filled in before sending, and say clearly which field is missing. Explain how to run it.
Build this quiz as a simple web app I can run on my computer. Put the questions and answers in one separate file so I can edit them without touching the code. Show one question at a time, then a result screen with the score and each missed question with its right answer. No accounts and no server. Explain how to run it.
Run it the way the AI says. If it will not start, paste the exact error back, word for word, as Your First Fix showed.
Use it like you mean it
Add three habits. Tick one. Reload the page. Is the tick still there? Close the browser and open it again. Still there? If not, the app does not remember anything yet, and that is the first bug to fix.
Add a few items, tick one, reload. Everything should still be there. Now open the app in a second browser. It will be empty, because local storage belongs to one browser. That is expected for now, and it is exactly what the next stage fixes.
Send the form empty. Send it with only a name. Send it with a date in the past. Each one should give a clear, polite message saying what to fix. A form that accepts nonsense will collect nonsense.
Take the quiz and get every answer right. Then take it and get every answer wrong. Then change a question in the questions file and check the change shows up. If the score is wrong in either run, fix it now, while the app is small.
Save, then add the next screen
When the first screen works, take a save point. Then ask for the next screen from your plan, and only that one. Run it, use it, save. This rhythm feels slow and is the fastest way to finish, because when something breaks you know it was the last change. Structuring an App explains why keeping each part in its own place pays off here.
Video deep dives for this stage
Official showcase
Community picks
No videos for this stage yet.