The roadmap

From first prompt to an app that stays up

Five stages. Open any stage for the full guide, then tick off its checklist. Your progress is saved in this browser only.

Your progress0 of 20 done
  1. STEP 1

    Before you build

    Set things up so mistakes are cheap.

    0 / 3 checked
  2. STEP 2

    While you build

    Habits that stop small changes from turning into big messes.

    0 / 3 checked
  3. STEP 3

    Before you launch

    A ship-ready checklist. Ask your AI tool to check each item, then verify it yourself.

    0 / 8 checked
  4. STEP 4

    When something breaks

    It will happen, and it is fixable. Use the same calm method every time, whatever tool you use.

    0 / 3 checked
  5. STEP 5

    After launch

    Keeping a live app healthy.

    0 / 3 checked

Stuck on a stage?

Get a second pair of eyes on your vibe-coded app. The first call is free.

STEP 1 OF 5

Before you build

Set things up so mistakes are cheap.

Checklist

Guide

  • Use git from day one. Git saves a snapshot of your project every time you commit, so you can always go back. Connect your builder to GitHub, or use GitHub Desktop if the terminal feels unfamiliar. Learn more in Pro Git: About version control.
  • Give the AI a rules file. A short file that describes your app, your stack and your rules ("never change the database schema without asking", "use the existing components") stops the AI from guessing each session. Each tool has its own version: Cursor rules, Claude Code memory, Kiro steering, and the cross-tool AGENTS.md format.
  • Choose a common, well-documented stack. AI tools write better code for popular tools such as React, Next.js, Supabase and Stripe, because they have seen far more examples. Avoid niche libraries in your first app.
  • Keep secrets out of your code. API keys and passwords belong in environment variables, not in files the AI writes. See Next.js environment variables or Vite env variables.

STEP 2 OF 5

While you build

Habits that stop small changes from turning into big messes.

Checklist

Guide

  • One change per prompt. "Add a settings page" works better than "add settings, fix the header and change the colors". Smaller changes are easier to check and to undo. Anthropic's Claude Code best practices recommend asking the agent to plan first, then implement.
  • Commit after every step that works. If the next prompt breaks something, you lose minutes, not days.
  • Protect code that already works. Tell the AI which files or features not to touch. If it starts rewriting large parts of the app to fix a small problem, stop and undo.
  • Ask the AI to explain before you accept. "What did you change and why?" catches surprises like deleted features, new packages or database changes.
  • Never let an agent work directly on your live data. Use a separate development database. In July 2025 an AI agent deleted a live production database during a code freeze. Replit later restored the data and added safeguards.

STEP 3 OF 5

Before you launch

A ship-ready checklist. Ask your AI tool to check each item, then verify it yourself.

Checklist

Guide

  • Database access rules are on for every table. Each user should only read and change their own data. Supabase calls this Row Level Security; Firebase uses Security Rules. Run the Supabase Security Advisor before you launch.
  • No secret keys in browser code. Search your code for sk_, service_role and secret. Turn on GitHub secret scanning or run Gitleaks.
  • Login works end to end on the live domain. Sign up, confirm email, log out, log in and reset a password on the real URL, not just the preview.
  • Payments are confirmed by webhooks, not by the browser. Your server should mark an order as paid only after Stripe tells it so. See Stripe webhooks and verify the signature.
  • Error and 404 pages exist. Users should never see a blank screen or a stack trace.
  • Backups are on, and you know how to restore one. See Supabase backups.
  • A staging or preview environment exists. Try changes there first. Most hosts create a preview link for every branch.
  • Basic security review. Skim the OWASP Top 10 and ask your AI tool to check the app against it.

STEP 4 OF 5

When something breaks

It will happen, and it is fixable. Use the same calm method every time, whatever tool you use.

Checklist

Guide

  1. Reproduce it. Write down the exact steps, what you expected and what happened. If you cannot make it happen again, you cannot confirm a fix.
  2. Read the real error. Open your browser's developer console and network tab, and check your host's logs. The error message is usually more useful than the symptom.
  3. Find the change that caused it. Ask "what changed since it last worked?" Compare commits, or use git bisect to find the exact commit.
  4. Roll back if you are stuck. Restoring the last working version is a valid fix while you investigate. Use your host's rollback (for example Vercel instant rollback) or git revert.
  5. Give the AI the right context. Paste the exact error, the steps to reproduce and the relevant file. Ask it to explain the cause before it changes anything.
  6. Stop the loop. If three attempts have not fixed it, stop prompting. Each new attempt can add more changes on top of the problem. Roll back, then try a fresh conversation with a clear summary.

Copy-paste prompts:

Here is an error from my app: [paste error]. Steps to reproduce: [steps].
Before changing any code, explain what is causing this and which files are involved.
This worked at commit [hash or description] and broke after [change].
Compare the two and tell me which change caused the problem. Do not edit anything yet.
Fix only this issue. Do not change unrelated files, rename things or add new packages.
After the fix, list every file you changed and why.

STEP 5 OF 5

After launch

Keeping a live app healthy.

Checklist

Guide

  • Track errors and uptime. Add Sentry or a similar tool so you learn about errors from alerts, not angry emails. Add an uptime monitor such as UptimeRobot.
  • Keep packages updated. Turn on Dependabot so GitHub opens a pull request when a package has a security fix. Update one thing at a time and test.
  • Add features on a branch. Work on a separate branch, test on its preview link, then merge.
  • Add a few tests for what matters most. Sign-up, login and checkout are worth protecting. Playwright codegen records a test while you click through the app, and your AI tool can help turn it into a repeatable check.
  • Plan for real data. Apps that feel fast with ten records can slow down with ten thousand. Load data in pages instead of all at once, and add database indexes on columns you filter by. See Supabase query optimization and PostgreSQL indexes.
  • Know when to bring in a developer. Consider it when you are handling payments or sensitive data at scale, when the same bug keeps coming back, or when every new feature breaks an old one.