Example App

What this is

Example App shows what a good Vibe 102 project looks like before coding starts.

The default example is Mission Task Tracker.

Why it matters

Data shape, state, and localStorage are easier when learners can picture the final app.

The example gives the room one shared target, even if returning students choose different app themes.

What to do

Use this as the default app target:

App name: Mission Task Tracker
Goal: Help a learner track small missions during class.
Data item: one task
Main behavior: add, complete, delete, save after refresh

The one-screen layout should be:

Title
Short subtitle
Input field
Add button
Task list
Empty state message
Small saved/refresh note

One task can look like this:

{
  id: 1,
  text: "Finish Vibe 102 setup",
  completed: false,
  createdAt: "2026-05-10"
}

Expected behavior:

1. User types a task.
2. User clicks Add.
3. Task appears in the list.
4. User marks it complete or incomplete.
5. User deletes it if needed.
6. Browser refresh keeps the task.

Use this simple analogy:

Each task is a card.
The app keeps a stack of cards.
Add makes a new card.
Update changes a card.
Delete throws a card away.
localStorage keeps the stack in the browser notebook.

Demo line:

My app is Mission Task Tracker.
It helps learners track small class missions.
Users can add, complete, delete, and save tasks after refresh.

Common mistakes

• Copying the example but adding extra dashboards.
• Adding dates, categories, filters, and charts before the core behavior works.
• Forgetting that other app choices must still follow the same one-list pattern.