Test and Showcase

What this is

This is the final Vibe 102 checkpoint.

The class success gate is localhost plus working app behavior. Deployment can happen after class.

Why it matters

A mini app is not done because it looks nice.

It is done when the user can add, update, delete, refresh, and still understand what changed.

What to do

Run this checklist:

1. Add an item.
2. Try an empty item.
3. Update or mark an item.
4. Delete an item.
5. Refresh the browser.
6. Check mobile width.
7. Compare the result with the project brief.
8. Ask AI to explain the changed files.

Use this explanation prompt:

CONTEXT:
I finished my Vibe 102 mini app.
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 explaining.

CURRENT STATE:
The app can add, update, delete, and save items with localStorage.

TASK:
Explain the final app like I am a beginner.

OUTPUT:
- where the items are stored while the app is open
- where the items are stored after refresh
- which files changed
- how add, update, delete, and localStorage work
- how the design/theme matches the brief
- what I should deploy after class

Rules:
- do not add new code
- keep the explanation simple
- tell me one thing to test before I demo
- do not exaggerate what the app can do

Demo script:

My app is [name].
It helps [user] [goal].
Users can add, update, delete, and save [item].
I tested empty input, refresh, and mobile width.

For extra demo, README, or showcase prompts, open Prompt Lab and choose I want to ship or demo.

After class, save the project to GitHub, deploy it with Vercel, and upload it to the KrackedDevs project or showcase page.

Common mistakes

• Deploying before refresh works.
• Forgetting to test on mobile.
• Not understanding which files changed.
• Claiming the app has login, database, or shared data when it only uses localStorage.
• Keeping the project private after shipping.