🏎️ Paddock Times
A full-stack Formula 1 statistics web app: championship standings, race calendar,
driver & team profiles, head-to-head comparisons, past-race telemetry, and a
session replay player that plays back completed races lap-by-lap.
Live: https://paddocktimes.com
Overview
Paddock Times is a monorepo with a React SPA and an Express API. The client
only ever talks to our own backend; the backend fetches data from free public F1
sources, normalizes their verbose shapes into flat types, and caches everything in
memory. One deployed web service serves both the API (/api/*) and the built SPA.
The project covers 1950 → present for historical stats, and 2023 → present for
telemetry and replays.
✨ Features
Core stats
- Standings — drivers' and constructors' championships for any season (1950–now),
plus a title-race progression chart.
- Race calendar & results — every round of a season, with winners; sprint
weekends are flagged, and each race-weekend page shows the full result,
qualifying, sprint results, grid → finish deltas, fastest lap and Driver of
the Day.
- Driver & team profiles — full career totals (championships, wins, podiums,
points, races) plus a season-by-season breakdown, with a data-driven prose summary.
- Driver & team search — filter every driver/constructor since 1950 by name,
nationality and era.
- Head-to-head comparison — compare two drivers across their careers, including
their race-by-race record in events they both contested.
Live & replay
- Session replay player — load any completed race or sprint (2023+) and play
it back on a live-timing-style board: play/pause, speed control (5×–60×), and a
scrubbable timeline.
- Sector-by-sector reveal with baked timing colours (purple/green/yellow).
- Position-change arrows (🟢 gained / 🔴 lost) with a fading row highlight.
- Track-status banner (green / yellow / SC / VSC / red / chequered) and an IN
PIT badge.
- Click any driver — or several at once — to expand per-lap sector detail,
mini-sectors, speeds and tyre stints for side-by-side comparison.
- Live timing — a real-time board during sessions. OpenF1 locks its entire API
(401) during live sessions on the free tier, so the app degrades gracefully to a
"locked" banner instead of hanging.
Media (copyright-aware)
- Driver photos from Wikimedia Commons, matched by name via the MediaWiki
pageimages API (CC-BY-SA / public domain).
- Team logos & photos resolved through Wikidata (logo
P154, image P18) and
licence-checked on Commons — a free PD/CC logo is used when available,
otherwise a free car photo, otherwise a team-coloured tile. Trademarked / non-free
emblems are deliberately skipped.
Platform
- SEO — per-route titles/meta/Open Graph/canonical, JSON-LD structured data,
breadcrumbs, cross-links, season-in-URL routes, a 147-URL sitemap and
robots.txt.
- Home page — dynamic weekend highlights (winner, podium, notable retirement,
championship leader, next race) derived from our own data, plus live news headlines
from an RSS feed.
- Feedback form for user suggestions and bug reports.
- Google Analytics 4, a toggleable cookie-consent banner, and a full footer with
data attributions and disclaimers.
🧱 Tech stack
| Layer | Stack |
|---|
| Frontend | React 18, TypeScript, Vite 6, React Router 7, Recharts |
| Backend | Node 20, Express 4, TypeScript, Helmet, node-cache |
| Data | f1db (CC-BY 4.0), OpenF1, Wikimedia Commons / Wikidata |
| Hosting | Render (single web service) |
🗂️ Data sources
- f1db (CC-BY 4.0) — standings, results, schedule,
drivers, constructors; 1950 → present. Distributed as downloadable release
artifacts, not a live API, so there is nothing to rate-limit or time out. The
server downloads the latest
f1db-json-splitted.zip once, unzips it in memory
(adm-zip), and joins the normalized tables into our flat types. The dataset is
held in a single in-flight promise for the process lifetime.
- OpenF1 — telemetry, laps, sectors, stints, race control;
2023 → present. Used for live timing and session replays.
- Wikimedia Commons / Wikidata — driver photos and (licence-checked) team imagery.
🏛️ Architecture
┌────────────┐ /api/* ┌──────────────┐ HTTP ┌──────────────────┐
│ React SPA │ ──────────────▶ │ Express API │ ────────▶ │ f1db · OpenF1 · │
│ (Vite) │ ◀────────────── │ normalize + │ ◀──────── │ Wikimedia · RSS │
└────────────┘ flat JSON │ cache (TTL) │ └──────────────────┘
└──────────────┘
- The client only talks to our backend (
/api/*). In dev, Vite proxies /api
to the server; in production, Express serves both the API and the built SPA.
- Every upstream call is wrapped in
cached(key, ttlSeconds, producer) (in-memory
TTL cache) to stay well within rate limits.
- A single error handler turns thrown errors into
502 { error }.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
