Why practice Vibe Coding on a Todo App instead of jumping straight to a large project?

A Todo App has two virtues: small enough to finish in 1–2 hours, complete enough to cover state, interaction, storage, and validation. The MVP includes add/complete/delete, status filter, `localStorage` persistence, empty state, and basic a11y. Skipping straight to full-stack before the workflow is muscle memory just buries you in complexity.

What should AI do as step 1 of the Todo App?

Plan first, don't code. The chapter's prompt asks for an implementation plan with three constraints: MVP scope only, which files to touch, and how to verify after each step. This turns vague intent into an executable task list so you don't discover gaps mid-build.

Should data model or UI come first?

Data model and state first. The chapter pins the type: `Todo = { id, title, completed, createdAt }`, then has AI do exactly two things — define the type and implement CRUD state update logic. Generating UI, animation, persistence, and tests simultaneously means you can't locate which layer broke when something fails.

When adding `localStorage` persistence, how do I stop AI from touching other logic?

The chapter's exact wording: “without changing existing interaction logic, add localStorage persistence to Todo state”. Add three specs: read on initial load, write on state change, fallback on parse failure. Constraints in the prompt beat “just make it feature-complete” — the latter often has AI “optimize” your working add/delete as a bonus.

When the Todo App has a bug, how do I ask AI without triggering random edits?

Don't say “there's a bug, fix it”. The template: state what's done, state the current issue, paste the key snippet, paste the log or symptom, then ask AI to analyze root cause first and propose the minimum fix. The “root cause first, minimal patch second” pair stops AI from drive-by edits to unrelated code — it has to understand before acting.

Project: Todo App

⏱️ 45 min

Full exercise: plan, code, and ship a Todo App with AI as your partner

💎

Members Only

Upgrade to membership to unlock all learning resources

✓Full chapter content
✓Video tutorials
✓Code examples
✓Learning community