State and Add Item

What this is

State is the app memory while the app is open.

In this checkpoint, the user types an item, clicks Add, and the item appears in the list.

Why it matters

This is the moment the project becomes an app.

The screen is no longer just content. It reacts to user input.

What to do

Use this 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

If AI already built add-item behavior, test it before prompting again:

1. Type an item.
2. Click Add.
3. Confirm it appears.
4. Confirm the input clears.
5. Try an empty input.

If it works, stamp this checkpoint and continue. If it partly works, use Prompt Rescue to fix only the missing part.

Common mistakes

• Adding localStorage before state works.
• Saving empty items.
• Asking AI to add filters at the same time.
• Rebuilding the whole app when only Add needs a small fix.