All Modules The Loop Small Slices Take the Wheel Debugging عربي

Vibe-Coding the App

The real build loop — and knowing exactly when to take the wheel from the AI.

Module 5 · Turn milestones into working features, one slice at a time.

Intermediate Building Includes Lab ~55 min

What You'll Learn

  • Run the core build loop: prompt → review → run → commit, repeat
  • Why small slices beat one giant "build the app" prompt
  • The signals that tell you to take the wheel and drive by hand
  • Debug with the assistant — root cause, not just a patch
  • How to get unstuck when the AI spins
  • Hands-on lab: build milestones M2 (search) and M3 (delete) with the loop, end to end on localhost

Prerequisites: Module 4 — snippet-vault with M1 (create + list) merged to main.

The Build Loop

Vibe coding isn't one big prompt — it's a tight loop you spin many times an hour. Each turn adds one small, reviewed, committed piece:

┌──────────────────────────────────────────────┐ │ 1. PROMPT → ask for ONE small slice │ │ 2. REVIEW → read the diff (like a PR) │ │ 3. RUN → does it actually work? │ │ 4. COMMIT → checkpoint the good state │ └──────────────────────────────────────────────┘ ↺ repeat

The loop is your rhythm for the rest of the build. Every milestone in SPEC.md becomes a handful of these turns. Because you commit each good state, a bad turn is always one git restore away from gone.

Fast and safe

People think review and commits slow you down. The opposite: small reviewed steps mean you almost never debug a mystery, because the thing that broke is in the last tiny diff. Speed comes from not getting stuck.

Work in Small Slices

The single biggest skill in vibe coding is cutting work small. "Build the whole app" gives you a pile you can't review. "Add a search box that filters the list by title" gives you a diff you can read in a minute.

Too bigRight-sized slice
"Build the snippet vault.""Add the create-snippet form and POST it to the API."
"Add search and filters and sorting and tags.""Add a search box that filters the list by title."
"Make it look nice.""Style the snippet list as cards with spacing."

Let the spec drive

You already sliced the work in Module 3. Build one milestone (or one story within it) per branch, in order. When a story's acceptance criteria all pass, it's done — move to the next.

When to Take the Wheel

The assistant is a fast driver on the highway and a liability in a tight parking spot. A pro knows when to stop delegating and edit the code themselves. Watch for these signals:

SignalWhat to do
It failed the same fix twiceStop looping. Read the code yourself and fix or pinpoint the exact line.
Security- or money-sensitive logicAuth, payments, permissions — write or verify these by hand.
Subtle logic it keeps getting slightly wrongHand-write the tricky core, let the AI do the boilerplate around it.
You don't understand its outputDon't ship what you can't maintain. Simplify it yourself or ask it to explain.
The diff is ballooningTake over, shrink the scope, and resume the loop smaller.

You're the driver, always

Taking the wheel isn't failure — it's the whole skill. The best vibe coders fluidly hand small, well-defined pieces to the AI and grab the wheel the instant it starts to wander. The car is yours.

Debugging With the Assistant

When something breaks, the assistant is great — if you brief it like a good bug report instead of "it's broken, fix it."

A good debug prompt

  • Paste the exact error and the stack trace.
  • Say what you expected vs what happened.
  • Give the relevant file(s) as context.
  • Ask for the root cause first, then the fix — not a blind patch.
This request throws the error below. I expected the new snippet to appear in the list; instead the list is empty after reload. Error: [paste exact error + stack trace] Explain the root cause, then propose the smallest fix.

Reproduce before you fix

Make sure you can trigger the bug reliably first. A fix you can't verify against a reproduction is just a guess — and the AI will happily generate confident guesses.

Getting Unstuck

When the assistant loops or keeps missing it, don't just re-prompt harder. Change the situation:

MoveWhen
Reset the contextIt's contradicting itself — start the task fresh (Module 2's context rot).
Shrink the askBreak the slice into an even smaller one.
Give an exampleShow the exact input/output or a similar file to mirror.
Hand-write the coreDo the tricky 5 lines yourself, then let the AI continue around them.

Practical Lab: Build M2 & M3 with the Loop

You'll take the snippet vault from "create + list" to a real working app — adding search and delete via the build loop, taking the wheel at least once, and wiring the UI to the API end to end.

What you need

Your snippet-vault repo from Module 4 (M1 merged), your assistant, and both apps running (api/ and web/).

1

Branch for M2 (search)

git checkout -b feature/m2-search
2

Run the loop for search

Prompt one slice, review the diff, run it, commit — against M2's acceptance criteria from SPEC.md:

Add M2 search from SPEC.md: GET /snippets?q= filters the list by title (case-insensitive) in the API, and a search box in the web UI that filters the list live. Small diff. Don't touch create or delete.

Verify each acceptance criterion by hand: live filtering, case-insensitive, friendly empty state. Commit when green.

3

Take the wheel once — on purpose

Find one spot where the AI's output isn't quite right (an edge case, a name, a clumsy bit) and fix it yourself by hand instead of re-prompting. Note what and why. Then merge M2:

git checkout main git merge feature/m2-search
4

Branch and build M3 (delete)

git checkout -b feature/m3-delete

Loop again: DELETE /snippets/:id in the API and a delete button (with a confirm) in the UI. Review, run, verify, commit, then merge to main.

5

Confirm it works end to end

With both apps running, in the browser: create a snippet, see it listed, search for it, and delete it. That's a real working app — M1 through M3, live on localhost.

6

Reflect

In REFLECTION.md: where did you take the wheel, and why? Which acceptance criteria did you verify by hand? Commit it.

What to hand in

Your snippet-vault repo with a working app. Self-check before submitting:

  • M2 (search) and M3 (delete) each built on a branch and merged to main
  • Create, list, search, and delete all work in the browser
  • At least one commit where you hand-edited the AI's output
  • REFLECTION.md notes where you took the wheel and what you verified

Mini Glossary

TermPlain meaning
Build loopPrompt → review → run → commit, repeated in small turns.
SliceOne small, self-contained piece of work you can build and verify at once.
Take the wheelStop delegating and edit the code by hand when the AI is the wrong tool.
Root causeThe underlying reason for a bug, not just the symptom.
ReproduceReliably trigger a bug so you can confirm a fix actually works.
End to endThe whole path works together — here, UI → API → back.

Recap & What's Next

You now have

The build loop as second nature, the judgment to take the wheel when needed, a debugging method that finds root causes — and a snippet vault that actually works end to end: create, list, search, and delete, all merged to a working main.

Next up: Module 6 — Testing AI-Generated Code. Your app works when you click through it by hand — but how do you know it still works after the next AI change? We add automated tests, the first real safety net for "works once."

Vibe-Coding the App

Objectives The Loop Small Slices Take the Wheel Debugging Getting Unstuck Practical Lab Glossary Recap