Roadmap Execution

Step 3: Create Task Plan

Use manage_todo_list to break the phase into specific tasks:

1. [Backend] Create/update model
2. [Backend] Add serializer + viewset
3. [Frontend] Create component(s)
4. [Frontend] Wire up API adapter
5. [Frontend] Add page/route
6. [Verify] Type check + build
7. [Commit] Conventional commit + push

Step 4: Implement

Execute each task following conventions:

• Backend: Org-scoped, select_related, safe migrations
• Frontend: TypeScript strict, CSS Modules + tokens, a11y
• Mark tasks in-progress → completed as you go

Step 5: Verify

# Frontend
cd demo
npx tsc --noEmit    # Zero type errors
npx vite build      # Build succeeds

# Backend
cd src
python manage.py check       # System check
python manage.py migrate     # Migrations apply
pytest                       # Tests pass

Step 6: Commit

# Conventional commit format
git add -A
git commit -m "feat(<scope>): <description>

- Detail 1
- Detail 2

Roadmap #XX Phase HY"

git push origin main

Step 7: Update Spec & Move to Done

After each phase, update the spec:

1. Check off completed "To do" items (- [x])
2. Check off satisfied "Done criteria" (- [x])

After ALL phases of a roadmap are complete:

# Update spec status to ✅ Afgerond
# Move folder to done/
git mv documents/02-roadmap/{number}_{name}/ documents/02-roadmap/done/
# Update index.md: move entry from Active to Done
git commit -m "docs: move roadmap #XX to done"
git push

Phase Naming Convention

Quality Gates (must pass before commit)

• npx tsc --noEmit — zero errors
• npx vite build — builds successfully
• No any types introduced
• All new interactive elements are keyboard accessible
• Design tokens only (no hardcoded values)
• Mobile layout works (no overflow)
• Dark mode tokens used (no hardcoded colors)