pal-e-docs
Project not found.

Phase 6: Frontend Playground

phase-mcd-tracker-6-playground Phase

phase
Project
Goal: HTML/CSS prototypes of all screens, served at playground.tail5b443a.ts.net/mcd-tracker/, verified on phone, approved by Lucas.
Owner: Dev agent (scaffold + infra) → Lucas (design iteration)
Repo: forgejo_admin/mcd-tracker-playground
Depends on: Phase 5 (COMPLETED — API response schemas define the fake data structure)

Scope

Follow sop-frontend-experiment repo experiment procedure exactly:
  • Create Forgejo repo forgejo_admin/mcd-tracker-playground ✓
  • Clone locally to ~/mcd-tracker-playground ✓
  • Initial scaffold: 6 pages with hardcoded data ✓ (index, home, scan, codes, locations, history)
  • CSS following convention-frontend-css: Atkinson Hyperlegible, design tokens, mobile-first ✓
  • Add nginx subpath + hostPath mount ✓
  • Verify at playground.tail5b443a.ts.net/mcd-tracker/ ✓
  • Design iteration (in progress): Lucas reviewing on phone. Key changes identified:
  • Lucas approves final design on phone → design lock
  • Register repo in project-frontend-playground Repos table
  • Push final state to Forgejo
After scaffold: Lucas iterates on design personally. Agents don't ship frontend without visual approval.

Architecture Touch

arch-dataflow-mcd-tracker — all 4 flows (log code, check availability, redeem, rejection) visualized as UI screens. No diagram update needed.

Verification

  • playground.tail5b443a.ts.net/mcd-tracker/ loads on phone
  • All 4 screens render with hardcoded fake data
  • Mobile-first: no horizontal scroll on phone
  • CSS uses design tokens only (no hardcoded hex)
  • Lucas approves the design

Deliverables

  • 12 playground pages with complete end-to-end user flow:
  • Landing page (public): hero, How It Works, value props, FAQ, dual CTA (sign in + register)
  • Auth flow: sign-in + register mockups (Keycloak themed, web vs iOS notes)
  • Home: location-centric dashboard with XP banner, 5-day expiry warnings, floating scan FAB
  • Location detail: slot progress, active codes with expiry countdown, cashier overlay with receipt photo
  • Scan wizard: 4-step flow → save-success celebration (+1 XP, Use Now → cashier overlay)
  • Redeem celebration: +2 XP, 'What did you get?' chip picker, lifetime count
  • History: date-grouped timeline, color-coded events, lifetime stats bar
  • Event detail: full context + state-aware cashier overlay (active vs redeemed)
  • CSS: page-header scoping fix, 3-tab bottom nav (Home/Scan/History)
  • Pushed to Forgejo: mcd-tracker-playground PR #3
  • plan-mcd-tracker — parent plan
  • sop-frontend-experiment — repo experiment procedure
  • convention-frontend-css — CSS rules
  • project-frontend-playground — playground project