Build a Fitness App with AI Coding — From Zero to Installable in 5 Prompts
Build a fully functional Cardio Interval Trainer as a Progressive Web App using Django and Claude Code — without spending a dime. This 5-prompt package walks you through the entire process: planning the project, building a real-time interval timer, adding workout presets, tracking session history, and shipping it as an installable PWA that works offline. Each prompt teaches a core principle — planning before coding, building modular features, and choosing the right foundation so you can scale later. Start with a simple idea, end with a real app on your phone.
Plan & Scaffold the Django Project
Create a detailed plan file and set up the Django project structure with a runnable base template.
Create a plan for building a Cardio Interval Trainer PWA app served by Django. Save the plan as plan.md with: - App overview: a mobile-first interval timer for cardio workouts (run/walk cycles) - Feature list broken into milestones - Tech decisions: Django backend, single-page template, vanilla JS, localStorage for data, PWA with service worker - UI specs: dark theme, mobile-first (420px max), colors (bg #0a0a1a, primary #6C63FF, run #FF4D4D, walk #4DFFB5, warmup #FFB84D, cooldown #4DB8FF), fonts (DM Sans + JetBrains Mono from Google Fonts) Then scaffold the Django project: - Project: "cardioflow", app: "trainer" - Single view serving one template at "/" - Static files structure ready - Empty base template with proper HTML head (viewport, theme-color, PWA meta tags, fonts loaded) - Runnable with python manage.py runserver
Build the Interval Timer Engine & UI
Create the core timer logic with phase management, countdown, controls, and a circular progress ring UI.
Read plan.md. Build milestone: Timer Screen. Build the interval timer in our trainer template: Timer logic: - Phases: IDLE → WARMUP → [RUN → WALK] × rounds → COOLDOWN → DONE - Default: 20s run, 40s walk, 8 rounds, no warmup/cooldown - Countdown ticks every second, auto-advances phases - Pause/resume and stop controls Timer UI: - SVG circular progress ring (260px), ring color matches phase - Glow shadow on ring during active workout - Large monospace time display centered in ring - Phase badge (colored pill showing RUN / WALK / WARM UP etc) - Round counter: "Round 3 / 10" with dot progress bar - "Up next" preview bar - Start button (purple gradient) when idle - Pause + stop buttons when active - Celebration screen with emoji when workout completes
Add Workout Presets & Custom Mode
Add selectable preset workout cards and a custom mode with adjustable settings.
Read plan.md. Build milestone: Workout Presets. Add preset selection above the timer (visible only when timer is idle): - 4 preset cards in horizontal scroll row: - Beginner: 20s run / 40s walk, 8 rounds, 60s warmup/cooldown 🌱 - Fat Burn: 30s run / 30s walk, 12 rounds, 60s warmup/cooldown 🔥 - HIIT Beast: 40s run / 20s walk, 15 rounds, 30s warmup/cooldown ⚡ - Custom: user-defined ⚙️ - Selected preset has highlighted border (#6C63FF) - Selecting Custom shows +/- stepper controls for: run time, walk time, rounds, warmup, cooldown - Show workout summary card below presets: total duration, colored tags for each phase - Timer uses selected preset values when started
Build the History & Stats Screen
Add localStorage-based workout tracking with a history tab showing heatmap, stats, charts, and session list.
Read plan.md. Build milestone: Workout History.
Saving:
- On workout complete → save to localStorage: {id, date, preset, rounds, totalTime, completed: true}
- On stop early → save with completed: false
Add tab navigation in header: ⏱ Timer | 📊 History
History screen:
- Weekly heatmap: 7 boxes (Mon-Sun), green=completed day, orange=partial, purple border=today
- Stats row: 3 cards — streak (days), total sessions, total minutes
- Bar chart: weekly minutes for last 7 weeks
- Session list: cards with date, preset name, rounds, duration, done/partial badge
- Fade-in animation on tab switch