PROJECT 1: 50+ TRAINING & HEALTH APP — REACT MVP

📊 Status: Ready for Fable Build 👤 Owner: Christo Ball ⏱️ Build Time: 3-4 hours ✅ QC Time: 45 minutes

🚀 FABLE BUILD PROMPT

Copy this entire prompt and paste into Fable:

You are building the MVP for a 50+ training and health app. This is a consumer health platform combining workout programming, recovery tracking, glucose monitoring, and biomarker visualization. DESIGN SYSTEM (non-negotiable): - Colors: Primary #1e3a5f (deep calm blue), Accent #7a9d6b (warm sage green), Alert #e87c63 (warm coral), Neutral #8b8680 - Typography: 16px minimum body, 28-32px headlines, bold metrics (18-20px) - Spacing: Generous (24px card padding, 32px section margins) - Components: Cards, modular buttons, bottom navigation, charts CORE FEATURES (MVP Scope): 1. ONBOARDING (4 pages, fully functional) - Page 1: Christo's authority (photo + headline "I'm 48, I race triathlons") - Page 2: Health goal selection (3 large cards: Longevity / Performance / Wellness) - Page 3: Fitness baseline (4 fields: pushups, squats, walk speed, balance time) with Save button - Page 4: Blood test + CGM setup (two cards side-by-side, linking to ordering services) - All pages fully interactive, navigate with CTA buttons 2. MAIN DASHBOARD (5 bottom navigation tabs) Tab 1 — HOME: - Recovery meter (large circular progress, 72%, color-coded: green >70%, yellow 50-70%, red <50%) - 24-hour glucose graph (line chart, Chart.js, last 24 hours) - 3 biomarker tiles (horizontal scroll): metric + value + status (color-coded) + action text Example: "Ferritin: 45 (Low) | Add red meat this week" - Upcoming workout card (day + date + name + duration + CTA "Start Workout") Tab 2 — TRAINING: - Program selector: 4 large cards (Fall Prevention, Longevity Strength, Mobility & Flow, Endurance) - Weekly plan: calendar-style layout (Mon-Sun) with color-coded status (completed/today/future) - Clickable day → expanded workout details (name + duration + difficulty + video placeholder + exercise breakdown) Tab 3 — NUTRITION: - Quick meal logger: "Breakfast / Lunch / Snack / Dinner" buttons + freeform meal name field - Meal history: timeline showing logged meals + glucose correlation tags Tab 4 — RECOVERY: - Sleep chart (7-day bar chart, hours) - HRV trend (7-day line chart) - Manual logging: soreness (1-10 scale), energy (1-10), mood (emoji select) - Weekly recovery summary card Tab 5 — INSIGHTS: - Weekly AI summary card (placeholder text for now, generic insights) - Settings button (account, notifications, text size, dark mode toggle) 3. INTERACTIVE CHARTS (Chart.js) - Glucose: 24-hour line chart with soft fill - Sleep: 7-day bar chart - HRV: 7-day line chart All animate on load, responsive, dark mode compatible 4. DARK MODE - Full dark mode toggle (moon icon, top-right) - All components adapt (background #1a1a1a, text #f5f3f0) - Persistent (localStorage) 5. RESPONSIVE DESIGN - Mobile-first layout (tested at 375px, 768px, 1024px) - Touch-friendly buttons (48px+ tap targets) - Bottom nav works on all screen sizes TECH STACK: - React (functional components, hooks) - Tailwind CSS with custom design tokens - Chart.js for graphs - localStorage for persistence + dark mode preference - Sample data hardcoded (no backend required for MVP) SAMPLE DATA (to populate charts): - Glucose readings: 24 hourly samples (80-110 mg/dL range, some variation) - Sleep: 7 days (6.5-8 hours, varying quality) - HRV: 7 days (50-70 ms, some days lower to show trend) - Biomarkers: 3 samples (ferritin low, cortisol high, hs-CRP optimal) DELIVERABLE: - Single-page React app (App.jsx imports all components) - No external dependencies except React, Tailwind, Chart.js - Fully functional onboarding → dashboard flow - All 5 tabs clickable + functional - Dark mode working - Charts rendering real sample data ACCEPTANCE CRITERIA: ✓ Onboarding completes (all 4 pages) ✓ Dashboard loads after onboarding ✓ All 5 tabs visible + clickable ✓ Recovery meter displays with correct color logic ✓ Charts render with sample data ✓ Dark mode toggle works ✓ Mobile responsive (test at 375px width) ✓ Smooth transitions between pages ✓ No console errors Start with the component structure. Build onboarding first, then dashboard. Keep component hierarchy clean and shallow.

✅ QUALITY CHECK LOOP

PHASE 1: FUNCTIONAL CHECK (15 min)

  • Open app in browser (Chrome + Safari)
  • Complete all 4 onboarding pages without errors
  • Click "Start App" → lands on dashboard
  • All 5 bottom tabs are clickable + change content
  • Recovery meter shows (should be 72%, green)
  • Glucose chart renders with data
  • Biomarker tiles display (3 of them, scrollable)
  • Dark mode toggle works (moon icon top-right)
  • Toggle dark mode on/off → UI adapts correctly

PHASE 2: RESPONSIVE CHECK (10 min)

  • Open DevTools, toggle device toolbar
  • Test at 375px (iPhone width) — all elements stack correctly
  • Test at 768px (iPad) — layout still readable
  • Test at 1024px (desktop) — no overflow
  • Bottom nav works on all widths
  • Buttons are at least 48px tall (tap-friendly on mobile)
  • Charts are readable on small screens

PHASE 3: DATA & DESIGN CHECK (10 min)

  • Glucose chart shows 24 data points (last 24 hours)
  • Sleep chart shows 7 days
  • HRV chart shows 7 days (line chart, not bar)
  • Biomarker tiles show: Ferritin (Low), Cortisol (High), hs-CRP (Optimal) with color coding
  • Colors match design system: Primary blue (#1e3a5f), Sage green (#7a9d6b), Coral (#e87c63)
  • Typography: Headlines are large (28-32px), body is at least 16px
  • Spacing: Cards have breathing room (24px padding minimum)

PHASE 4: INTERACTION CHECK (10 min)

  • Click Tab 2 (Training) → shows program selector + weekly plan
  • Click a day in the weekly plan → shows workout details
  • Click Tab 3 (Nutrition) → meal logger appears with quick buttons
  • Click Tab 4 (Recovery) → sleep + HRV charts visible
  • Click Tab 5 (Insights) → settings button works, dark mode toggle accessible
  • No page jumps or janky transitions between tabs
  • All CTAs are obvious (buttons stand out)

PHASE 5: POLISH CHECK (10 min)

  • Open DevTools Console — no red errors, no warnings
  • Hover over buttons → visual feedback (color shift, shadow)
  • Page loads in <2 seconds (no lag)
  • Transitions between pages are smooth (not instant/jarring)
  • Dark mode is applied to all components (not just some)
  • Font sizes are consistent across similar elements
  • No typos in visible text

🐛 IF ISSUES FOUND

Use this template to report issues to Fable:

Location: [Tab name / Component name] Issue: [What's broken or looks wrong] Expected: [What should happen] Actual: [What's happening instead] Screenshot: [Attach if helpful]

Example issues to catch:

🏁 COMPLETION CHECKLIST

  • All 20 acceptance criteria pass (see PHASE 1-5 above)
  • No console errors
  • Tested on Chrome + Safari (desktop)
  • Tested on mobile width (375px)
  • Tested on tablet width (768px)
  • Dark mode works top-to-bottom
  • All charts render with data
  • Onboarding flow is smooth
  • All 5 tabs work
  • Design system is applied (colors, spacing, typography)

📋 NEXT STEPS AFTER BUILD

  1. Christo reviews & QC passes: Mark as "READY FOR DEPLOY"
  2. Deploy to Vercel: git push → auto-deploys. Share link.
  3. Share with beta users: Send link to 10-15 early users. Collect feedback.
  4. Iterate (if needed): Fix critical bugs in 24h. Polish nice-to-haves in Week 2.
Deliverable Location:
/Users/atlas/.openclaw/workspace-harold/50plus-app-production/

Project Owner: Christo Ball
Estimated Build Time: 3-4 hours
Estimated QC Time: 45 minutes

Next Action: Paste the Fable prompt into Fable. Monitor for completion. QC against checklist above.