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.
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:
input -> item list -> update item -> delete item -> save locally -> refresh proofTiada 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 Card | Result you can see |
|---|---|
| 1. Layout + add input | Satu input dan butang "Add" render |
| 2. Item list | Item yang ditambah muncul dalam satu list |
| 3. Update / mark | Anda boleh mark atau tukar satu item |
| 4. Delete | Anda boleh buang satu item |
| 5. Save with localStorage | Item 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.
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:
- 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:
- Add dua atau tiga item.
- Update atau mark satu.
- Delete satu.
- Refresh page.
- 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.