Akademiacademy / vibe-102 / state-add-item

State and Add Item

Apa ini

State ialah memori app semasa app sedang buka.

Dalam checkpoint ini, user taip item, klik Add, dan item muncul dalam list.

Kenapa penting

Ini moment project jadi app.

Screen bukan lagi content sahaja. Ia react kepada input user.

Apa nak buat

Guna prompt ini:

Copy prompt

CONTEXT:
I am building my Vibe 102 mini app.
The static layout is done.
Read project-brief.md in the project root.
Use project-brief.md as the source of truth.
If project-brief.md is missing, stop and ask me to create it before editing.

TASK:
Add the ability to create one item and show it in the list.

Requirements:
- user types into the input
- user clicks Add
- item appears in the list
- input clears after adding
- empty input is blocked or ignored safely
- do not use localStorage yet

Rules:
- use the data shape from the brief
- explain what state is
- keep the code beginner-friendly
- explain which files changed
- do not add update, delete, filters, charts, dashboard cards, routing, APIs, login, or localStorage yet
- give me one click test

Kalau AI sudah bina add-item behavior, test dulu sebelum prompt semula:

Taip satu item.
Klik Add.
Confirm item muncul.
Confirm input kosong semula.
Cuba empty input.

Kalau berfungsi, stamp checkpoint ini dan teruskan. Kalau separuh jalan, guna Prompt Rescue untuk fix bahagian yang missing sahaja.

Mistake biasa

Tambah localStorage sebelum state berfungsi.
Simpan empty item.
Minta AI tambah filter pada masa yang sama.
Rebuild whole app bila Add sahaja perlukan small fix.

Vibe 102 / Checkpoint sekarang

State dan Add Item

Sedia untuk stamp - Disimpan dalam browser ini sahaja.

0 daripada 16 checkpoints complete.