I built a real-time F1 race replay and live timing app — here's how

#data #showdev #sideprojects #webdev

I'm a massive F1 fan. And like most F1 fans, I've always been frustrated by the TV coverage — you only ever see what the director wants you to see. What's happening with the midfield battle? Where exactly is everyone on track right now?

So I built Race Telemetry.

It's a web app that lets you replay any F1 race — all 20 cars, moving around the actual circuit in real time, exactly as it happened. Think of it like one of those scale electric race sets, but for real F1 data. You can also follow live car positions during a Grand Prix as it's happening.

What it does

Race replay — pick any race from 2024 or 2025, hit play, and watch every car move around the real circuit layout
Live timing — during a live race, track where every car actually is on track (not just the standings)
Analytics — dig into lap data, position changes, and strategy

The tech stack

Frontend

Next.js 15 (App Router) + React 19 + TypeScript
Tailwind CSS v4 + Framer Motion for animations
Canvas for the track map (much better than SVG for 20 moving dots with GPS data)

Backend

FastAPI (Python) with async httpx
File-based JSON cache to avoid hammering the API
OpenF1 API for all race data (real GPS coordinates, lap times, positions)

Data

The hardest part was figuring out car positions. The OpenF1 API gives you GPS coordinates for each car, but interpolating that into smooth, accurate replay required some work. I ended up using cumulative lap time to compute positions rather than relying on the position endpoint alone, with a fallback for edge cases.

Another tricky bit — OAuth2 token handling with OpenF1. It returns expires_in as a string, not an integer. Took me longer than I'd like to admit to figure that out.

The track map

One of the things I'm most happy with is the track map. It uses actual GPS circuit outlines from the OpenF1 Location API — not a simplified oval or SVG approximation. Every circuit is rendered from real coordinate data, which means the Monaco hairpin looks like the Monaco hairpin.

Rendering is done on Canvas rather than SVG or DOM elements. With 20 cars updating every fraction of a second, Canvas is significantly faster and the animation stays smooth.

What's next