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.

CURRENT STATE:
The static layout is done.

TASK:
Add the ability to create one item.

Requirements:
- user types into the input
- user clicks Add
- item appears in the list
- input clears after adding
- do not use localStorage yet

Rules:
- explain what state is
- keep the code beginner-friendly
- explain which files changed
- do not add extra features

Test:

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

Common mistakes

• Adding localStorage before state works.
• Saving empty items.
• Asking AI to add filters at the same time.