Build the localStorage App
Station 6 / 7
BMFeedback

Start Here · 06 / 07

Build the localStorage App

Build the mini app one Work Card at a time — input, item list, update, delete, and localStorage — and prove the data survives a refresh.

Vibe 102 / Current checkpoint

Build App

Ready to stamp - Saved in this browser only.

0 of 7 checkpoints complete

0 of 7 checkpoints complete.

Build the localStorage App

You pass this stage when add, update, delete, and save all work, and your items survive a page refresh.

What this is

This is the implementation stage. Antigravity builds your mini app one Work Card at a time from the saved plan. You are building this one pattern and nothing more:

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

No backend, login, database, API, charts, image upload, or multi-page routing.

Why it matters

Small Work Cards keep the build understandable and recoverable. If a chat or credit limit ends, build-status.md tells the next session exactly where to continue. Building the whole app in one prompt hides the learning and is hard to fix.

What to do

Split the build into small Work Cards

Your blueprint should break the pattern into cards roughly like this:

Work CardResult you can see
1. Layout + add inputAn input and an "Add" button render
2. Item listAdded items appear in one list
3. Update / markYou can mark or change one item
4. DeleteYou can remove one item
5. Save with localStorageItems load from and save to localStorage

Build one Work Card at a time

Use the shared implementation loop from Build One Work Card. Paste this for each card:

If design.md does not explain the item card, input form, update state, delete style, empty state, and mobile list, stop and return to Data Shape + Design.

Copy prompt
Read build-status.md, build-blueprint.md, design.md, and the current work card listed in build-status.md.

Implement only the current work card.

Rules:
- one list of items only
- no backend, login, database, API, or extra pages
- follow the visual rules in design.md
- do not copy external brand identity, logos, testimonials, stats, or images
- keep it readable on mobile

After finishing:
1. run the verification steps,
2. summarize what changed,
3. update build-status.md,
4. stop.

After each card, open the preview and check the visible result before starting the next card. Also check the design still holds:

Copy
- Does the UI still match design.md?
- Is the item list readable on mobile?
- Are update/delete controls obvious and safe?
- Is the empty state useful?

Do not let the agent run several cards automatically.

Prove the data survives a refresh

localStorage is only proven when the data comes back:

  1. Add two or three items.
  2. Update or mark one.
  3. Delete one.
  4. Refresh the page.
  5. Confirm the remaining items are still there.

If the list is empty after refresh, the localStorage save or load is not wired correctly. Fix that one Work Card before moving on.

Common mistakes

  • Building the whole app in one uncontrolled prompt.
  • Adding a second list, login, or a database.
  • Claiming localStorage works without a refresh test.
  • Accepting code without opening the preview.
  • Updating the code but not build-status.md.