Build · Ship · Own it
Vibe Codingfrom idea to live app
A teen's guide to building real software with AI. Plan it, code it, and put it on the internet.
The deck shows the buttons. This shows the discipline. · AI Studio 101 →
The big idea
It is a loop, not a launch
Not one giant prompt that spits out a finished app — a short cycle you run again and again. You bring the idea and the final call; the AI turns words into code; you react and ask for the next change.
You
Describe
Say what you want, plainly.
The AI
Build
It writes the code.
You
React
Test it, ask for one change.
Then go around again. Replit calls this the vibe coding loop.
The trap to avoid
The doom loop
What goes wrong
Retry, retry, retry
A bug shows up. The AI says it fixed it. It did not. Every retry buries more bugs under the last, and you spin without ever finding the real cause.
The way out
Diagnose, then fix
Stop. Open a fresh chat. Ask the AI to find the real cause first — not to fix anything yet. Then fix once, and keep git checkpoints so you can roll back.
Diagnose first. Fix once.
Part 1 · Preflight
Plan in words
before you write code
It is cheaper to change words than to change code. Write a short plan in plain language, keep each request small enough to test, and lock your tools before you prompt.
A short plan covers
- Who it is for
- What it should do
- What to leave alone
- A sketch or example to copy
Then build it in slices
- One testable piece at a time
- Check it like a real user would
- Save it before the next change
- Improve with clear feedback
Stay in control
Five habits of good vibe coders
1
Start with the goal
Say who it is for and what it does before anything else.
2
Build in small slices
One testable piece at a time, never one big leap.
3
Manage context
Give the right info, and start fresh when it gets noisy.
4
Review and test
Use the app like a real user would, every time.
5
Improve with feedback
Say plainly what to keep and what to change.
Part 2 · When you graduate from the studio
A real full stack
AI Studio hands you a managed setup. Click Get Code, move into a real project, and you wire these layers yourself.
Next.js + React
The frontend — everything you see and tap.
Tailwind
Quick, clean styling without fighting CSS.
Supabase
The database and login, hosted for you.
Prisma
The code that talks to the database safely.
Clerk / Auth.js
Sign in and sign up, handled properly.
Vercel
Hosting — your live link on the internet.
Stay safe from day one
Own the stack, own its security
Do
- Keep secret keys in env vars
- Keep your database private
- Check what users type before trusting it
- Ask before going public
Avoid
- Pasting API keys straight into code
- Making storage public to fix an error
- Trusting user input blindly
- Shipping with no check at all
Part 3 · Publish
Put it on the internet
Five steps from your laptop to a live link you can share with real people.
01
Build it
Get your slices working locally.
02
Commit
Save your work in git.
03
Push to GitHub
Send the code to your repo.
04
Connect Vercel
Point Vercel at the repo once.
05
Get your link
A live URL anyone can open.
Every push to GitHub makes Vercel rebuild and update your live app automatically.
Your move
Pick one idea.
Write the plan.
Ship the link.
First challenge
A one-page site that shows your name, three things you like, and a button that says hi.
Sources: Replit Vibe Coding 101 · AWS Full Stack · Product Talk · Thoughtworks VibeSec · Vercel docs