top of page

AI Run Partner — Powered by Strava and Garmin

Try the demo: ai-run-partner.onrender.com

INTRO
 

Unlike my other portfolio projects, AI Run Partner isn't a demo — it's a product I actually use every day. Built in a day and continuously improved through real daily usage, it integrates live fitness data from multiple sources and uses Claude's API as an AI coaching assistant that adapts to my weekly goals, weather conditions, and training history. I built a public demo with realistic mock data so anyone can explore it, and a private live version connected to my real Strava and Garmin accounts. This is what I believe the future looks like — individuals building their own custom tools with AI, tailored to exactly how they want to use them.
 

  • Frontend: React (JSX with Babel)

  • Backend: Python (Flask)

  • AI: Claude API (Anthropic) with custom system prompt

  • Data Sources: Strava API, Garmin (via Strava), WeatherAPI

  • Design: Figma Make for UI exploration and review

  • Code: Warp + Claude Code + Cursor

  • Deployment: Render

WHY I BUILT THIS

I use Strava and Garmin daily but my running workflow was spread across multiple apps — Strava for activity data, the Garmin app for VO2 max and fitness metrics, a weather app to decide when to run, a notes app for fitness reminders, and Runna (a paid app) for structured training plans with custom run types. None of them talked to each other. I built AI Run Partner to bring all of that into one dashboard — with an AI coach that ties it all together and adapts to my week in real time. Built in a day, for free, exactly the way I want it.

​

HOW I BUILT THIS

The Setup

Same structured workflow as my other projects — a CLAUDE.md system prompt and reusable /commands for each phase. New for this project: a two-layer AI workflow where Claude chat handles product thinking and brainstorming while Claude Code handles implementation. Commands are refined collaboratively before execution, reducing back-and-forth. Also introduced feature branching, Warp as a dedicated Claude Code terminal, and Figma Make for UX review checkpoints throughout development — not just initial design.

​

The Build

Core dashboard built and deployed in one day. Strava OAuth, activity cards, weekly goal tracker, weather widget, and AI assistant all wired up in the first session.
 

The Iteration

This is where the project diverges from my others. Real daily usage uncovered issues no amount of planning would catch — the AI referencing last week's run as "this week" due to week boundary logic, suggesting double runs, guilt-tripping about missed mileage, writing off entire rainy days when mornings were clear. Each bug became a prompt engineering exercise, leading to a comprehensive rule system with 15+ behavioral rules for the AI coaching assistant.
 

Design with Figma Make
 

Used for initial design exploration including hover animations, card layouts, and theme concepts. Handed designs back to Claude Code as reference screenshots to implement. Later used for settings panel design and UX review checkpoints throughout development.

​

UX Polish
 

Referenced Linear's design system for visual improvements — soft borders, layered backgrounds, subtle card gradients, staggered page load animations, and a two-stage hover pattern (immediate lighten + delayed shift). Every theme was refined to match this level of polish.

Process Improvements

This project exposed gaps in my workflow. Claude Code accidentally pushed untested changes to production — I added a branch protection rule and adopted feature branching as a result. Manually testing AI messages one at a time proved unsustainable, leading me to design an eval framework for batch scenario testing with automated rule checking. I also formalized a habit of flagging deployment risks before building any new feature, and introduced UX review checkpoints using multiple AI tools throughout development — not just at kickoff.

​

WHAT MAKES THIS DIFFERENT
 

  • Dual-mode architecture: live personal app with real API data + public demo with curated mock data, same codebase

  • Multi-source data integration: Strava API (activities, shoes, avatar), Garmin (VO2 max), WeatherAPI (48-hour hourly forecast for multiple locations)

  • AI assistant with 15+ behavioral rules — not just a chatbot, a system-prompted coach that understands weekly context, weather windows, and training patterns

  • Iterative prompt engineering through real-world usage — every bug in the AI's reasoning became a new rule

  • 12 custom themes with Linear-inspired visual polish and two-stage hover animations

 

KEY FEATURES
 

  • AI coaching assistant with weather-aware, context-driven suggestions

  • 12 themes (dark, light, medium) with instant preview and settings panel

  • Weekly mileage goal with animated day-by-day progress tracker

  • Weekly run plan with customizable run types and pace targets

  • Activity cards with splits, route map, heart rate, and cadence data

  • Compact/expanded activity display mode

  • Personal notes/reminders scratchpad

  • Shoe tracker with mileage progress bars

  • VO2 max display from Garmin

  • Strava avatar integration

  • Page load animations and Linear-inspired hover interactions
     

LINKS
 

Try the demo: ai-run-partner.onrender.com
View the code: github.com/raoulkahn/running-dashboard

​

​

bottom of page