Vibe Coding 102
Station 1 / 7
BMFeedback

Vibe Coding 102

Vibe Coding 102

Use the Vibe SDD Starter Pack in localStorage App mode to build a mini app that remembers browser-local data.

Setup Tools

Vibe 102 / Current checkpoint

Overview

Ready to stamp - Saved in this browser only.

0 of 7 checkpoints complete

0 of 7 checkpoints complete.

Vibe Coding 102

Vibe 102 is the SDD localStorage App Build Lab for learners ready for the next build challenge after AI basics or Vibe 101.

What this is

Vibe 102 uses the same Vibe SDD Starter Pack as Vibe 101. Choose localStorage App mode when the Blueprint Coach asks for the build mode.

The build target is one responsive mini app that follows this pattern:

Flow
input -> item list -> update item -> delete item -> save locally -> refresh proof

The pack saves the brief, architecture, design, blueprint, build-status.md, and Work Cards phase by phase. After planning, you may switch from a strong planning model to a cheaper or faster implementation model.

Why it matters

Useful apps do more than show content. They let people add, change, remove, and save information.

Vibe 102 teaches that pattern without backend, login, database, payments, dashboards, or multi-page routing. The saved SDD files keep the build understandable across model switches, tutor handoffs, and new chat sessions.

What to do

  1. Open the Vibe SDD Starter Pack.
  2. Complete the shared Setup Gate.
  3. Choose localStorage App mode.
  4. Let the Blueprint Coach save the planning files and Work Cards.
  5. Implement only the current Work Card, verify it, update build-status.md, and stop.
  6. Prove that add, update, delete, save, and refresh all work.

Keep the app to one clear list of items. Build the localStorage pattern before adding any optional advanced work.

Common mistakes

  • Choosing Website mode instead of localStorage App mode.
  • Adding login, a database, or several data types too early.
  • Starting implementation before the planning files exist.
  • Implementing several Work Cards in one pass.
  • Claiming localStorage works without a refresh test.

Optional advanced lab: API Tool Builder

API Tool Builder is an optional advanced live lab after the localStorage pattern is understood. It uses a public API and a coding-agent build loop; it is not the default Vibe 102 path.