Objective
Your mission
Sign up for a browser app builder, build a real app from a description, iterate with corrections, and deploy to a live URL. Output: browser_build.md + live URL.
You need: A browser app builder (Lovable, v0, Bolt.new, or Replit Agent).
Time: 30-45 minutes.
Step 1: sign up (2 min)
Pick one:
- Lovable (lovable.dev) — all-in-one with built-in Supabase integration
- v0 (v0.dev) — by Vercel, great for Next.js and UI
- Bolt.new (bolt.new) — fastest from prompt to live URL
- Replit Agent (replit.com) — full apps with backends, runs in browser
Sign up with Google or email. Free tiers let you build your first app without paying.
Step 2: start a project (2 min)
Click "New Project" or "Create." You'll see a chat-like interface — a text box where you describe what you want to build.
Name it something specific: "Reading List" not "My App."
Build something different from your first build in Phase 0. If that was the tip calculator, use the reading list below.
Step 3: write your first prompt (5 min)
Use the build description framework from Phase 00:
Build a single-page reading list. Clean, modern UI, mobile-first, light mode with a blue accent (#2563eb).
Features:
- Add a book with a title and an author
- Show the books as a list, newest first
- A "Read" toggle on each book; read books move to the bottom and are greyed out
- A delete button on each book
- A count at the top: "3 to read · 5 read"
No backend, no database, no user accounts. Save the list in the browser so it is still there after a refresh.
Paste it. Hit enter. Watch it build.
Write in your file:
## Tool Used
[Which tool you chose]
## Build Description
[Your prompt]
Step 4: review the preview (10 min)
All browser builders show a live preview. This is your review tool:
- Does it look right? Layout, colors, spacing
- Does it work? Click buttons, enter values, test interactions
- Check mobile view — most tools let you switch screen sizes
- Compare against your spec — is each feature there?
Write in your file:
## Review
What works: [list]
What's wrong: [list]
What's missing: [list]
Step 5: iterate with corrections (10 min)
Use the chat to give specific corrections. Pattern: state what's wrong, what you want instead, what to keep.
"Read books stay at the top — move them to the bottom when I tick Read. The list is empty after I refresh the page — save it in the browser. Keep everything else the same."
Write in your file:
## Corrections Applied
1. [Specific change 1]
2. [Specific change 2]
Apply. Check the result.
Step 6: deploy (5 min)
Click "Deploy," "Publish," or "Go Live." You'll get a URL.
Write in your file:
## Live URL
[Your deployed URL]
The free tier trap
Free tiers are for trying, not for shipping. Most browser builders limit free tier projects to a certain number of messages, deploys, or visitors. When you're ready to ship something real, expect to pay $20-25/month. Budget for one tool subscription — you don't need multiple.
Your reading list forgets every book when you refresh the page. Which correction follows the lesson's pattern?
"The list is empty after I refresh; save it in the browser. Keep everything else the same." Naming what to keep stops the AI rewriting things that already work.