Build the localStorage App
Station 6 / 7
ENFeedback

Mula Di Sini · 06 / 07

Build the localStorage App

Build mini app satu Work Card pada satu masa — input, item list, update, delete, dan localStorage — dan buktikan data kekal selepas refresh.

Vibe 102 / Checkpoint sekarang

Build App

Sedia untuk stamp - Disimpan dalam browser ini sahaja.

0 daripada 7 checkpoints complete

0 daripada 7 checkpoints complete.

Build the localStorage App

Anda lulus stage ini bila add, update, delete, dan save semua berfungsi, dan item anda kekal selepas page refresh.

Apa ini

Ini stage implementation. Antigravity build mini app anda satu Work Card pada satu masa dari plan yang disimpan. Anda sedang build satu pattern ini sahaja dan tiada apa-apa lagi:

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

Tiada backend, login, database, API, charts, image upload, atau multi-page routing.

Kenapa penting

Work Cards yang kecil buat build kekal difahami dan boleh dipulihkan. Kalau chat atau credit limit habis, build-status.md beritahu session seterusnya di mana tepatnya nak sambung. Build keseluruhan app dalam satu prompt menyembunyikan pembelajaran dan susah nak baiki.

Apa nak buat

Pecahkan build kepada Work Cards yang kecil

Blueprint anda patut pecahkan pattern kepada cards lebih kurang macam ini:

Work CardResult you can see
1. Layout + add inputSatu input dan butang "Add" render
2. Item listItem yang ditambah muncul dalam satu list
3. Update / markAnda boleh mark atau tukar satu item
4. DeleteAnda boleh buang satu item
5. Save with localStorageItem load dari dan save ke localStorage

Build satu Work Card pada satu masa

Guna shared implementation loop dari Build One Work Card. Paste ini untuk setiap card:

Jika design.md tidak menerangkan item card, input form, update state, delete style, empty state, dan mobile list, berhenti dan kembali ke 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.

Selepas setiap card, buka preview dan semak result yang nampak sebelum mula card seterusnya. Juga semak design masih kekal:

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?

Jangan biar agent jalankan beberapa card secara automatik.

Buktikan data kekal selepas refresh

localStorage hanya terbukti bila data kembali:

  1. Add dua atau tiga item.
  2. Update atau mark satu.
  3. Delete satu.
  4. Refresh page.
  5. Sahkan item yang tinggal masih ada.

Kalau list kosong selepas refresh, save atau load localStorage tidak wired dengan betul. Baiki satu Work Card itu sebelum teruskan.

Common mistakes

  • Build keseluruhan app dalam satu prompt yang tidak terkawal.
  • Tambah second list, login, atau database.
  • Dakwa localStorage berfungsi tanpa refresh test.
  • Terima code tanpa buka preview.
  • Update code tetapi bukan build-status.md.