Example App

Apa ini

Example App tunjuk rupa project Vibe 102 yang baik sebelum coding bermula.

Default example ialah Mission Task Tracker.

Kenapa penting

Data shape, state, dan localStorage lebih senang faham bila pelajar boleh bayangkan app akhir.

Example ini beri satu target yang sama untuk kelas, walaupun pelajar lama pilih tema app lain.

Apa nak buat

Guna ini sebagai 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

Layout satu screen patut jadi:

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

Satu task boleh nampak begini:

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

Expected behavior:

1. User type task.
2. User klik Add.
3. Task muncul dalam list.
4. User mark complete atau incomplete.
5. User delete jika perlu.
6. Browser refresh masih simpan task.

Guna analogy mudah ini:

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.

Mistake biasa

• Copy example tetapi tambah dashboard tambahan.
• Tambah date, category, filter, dan chart sebelum core behavior berfungsi.
• Lupa app pilihan lain masih perlu ikut pattern one-list yang sama.