LiveTrack Cockpit
A full-stack system for tracking multi-day bikepacking tours — on the bike, on the server, and for the friends watching from home.
Tech Stack
Flutter for the on-bike cockpit because it runs on Android with a single binary. FastAPI + SQLite backend because it's fast to iterate and light enough for a Raspberry Pi. Vue 3 for the public viewer because I wanted reactive live updates without a heavy framework.
Garmin’s LiveTrack feature is great for sharing your location during rides — but it gives spectators almost nothing beyond a blinking dot on a map. I wanted more: event logging from the bike, real-time data for family following along, and a proper dashboard for multi-day tours.
So I built a three-part system.
The cockpit app (Flutter/Android)
An on-bike interface with a 2×4 button grid for quick event logging while cycling. Tap to log a drink, snack, mechanical issue, photo, or voice note — without taking your eyes off the road for more than a second. Each event captures GPS position automatically.
Designed for one-handed use on a handlebar mount, dark theme, large touch targets.
The backend (FastAPI + SQLite)
Scrapes Garmin LiveTrack every 30 seconds, extracts track points from the HTML, and merges them into a complete journey without data loss. Distributes live updates to all connected viewers via WebSocket.
Also handles event storage, media uploads (photos, voice notes), and the public API for the viewer frontend.
The public viewer (Vue 3)
What friends and family see during a tour:
- Live hero card with current position, speed, and last update time
- Interactive map with the full track and event pins
- Elevation profile with performance metrics overlay (speed, heart rate, power, cadence)
- Chronological event timeline
- Multi-day stage switcher
Built for mobile first — most people following a tour are on their phones.