Interactive Formula 1, F2 & F1 Academy race analytics — powered by real telemetry data.
📖 Project Wiki · 🌐 Live Site · ✨ Features · 🛠 Tech Stack · 🚀 Getting Started · 📄 License
Explore the intensive project wiki for in-depth documentation, technical architecture, and developer insights.
⚠️ Important Note regarding Live Data: The primary OpenF1 proxy authentication used in the Live Dashboard is restricted to the Cloudflare Worker deployed for the live site. If you clone and run this app locally, it will automatically fall back to the publicapi.openf1.orgendpoint — you can still use the dashboard seamlessly, though some high-bandwidth or live telemetry features may be restricted or rate-limited due to public API limits.
F1-Telemetry is a fork of the original f1nsight project, refactored to React 19 and Vite 8 with additional features and enhancements. It's an interactive web application built for motorsport fans who want to go deeper than the broadcast — providing detailed race analytics, real-time telemetry visualisation, driver comparisons, and a 3D race viewer across Formula 1, Formula 2, and F1 Academy. It now also fully integrates the Formula1-Live dashboard for real-time live timing, track limits, and race control monitoring.
Attribution — This project builds upon the work of the original f1nsight developers. Data is now powered by the official OpenF1 API and Jolpica API.
| Feature | Description |
|---|---|
| Race Leaderboards | Comprehensive race results with position changes, intervals and gap analysis |
| Lap-Time Analysis | Lap-by-lap performance metrics for studying consistency and strategy |
| Tire Strategies | Visual breakdown of compound choices and stint lengths across the grid |
| Fastest Laps | Highlights of the quickest laps set during each session |
| Pit Stop Analytics | Scatter-chart visualisation of pit-stop durations per driver |
| Driver Comparisons | Head-to-head telemetry overlays for any two drivers in a session |
| 3D Telemetry Viewer | Follow drivers around the circuit in a synchronised 3D scene with multiple broadcast-style camera angles |
| AR Car Viewer | High-fidelity 3D car models with Draco / Meshopt compression (90 MB → 23 MB) |
| 2026 Race Calendar | Up-to-date schedule covering F1 |
| Live Dashboard | A fully integrated, real-time live telemetry dashboard (formerly Formula1-Live) with race control feeds |
- Admin Dashboard Improvements: We are continually refining the new internal developer dashboard (
/admin) for seamlessly updating all telemetry data (F1, F2, F1 Academy) via a UI. Future updates will add automated validation and deeper scraping controls.
| Layer | Technologies |
|---|---|
| Framework | React 19 · Vite 8 · React Router 7 |
| Styling | Tailwind CSS 4 · Flowbite React |
| 3D / Graphics | Three.js · @google/model-viewer · Tween.js |
| Data Viz | Recharts · D3.js |
| Animation | Framer Motion · Lottie |
| Backend / API | Local PHP Gateway (api.php) · Node.js Proxy |
| Tooling | PWA (vite-plugin-pwa) · Sitemap generation · SVGR |
- Node.js ≥ 18
- npm ≥ 9
# Clone the repo
git clone https://github.com/your-username/F1-Telemetry.git
cd F1-Telemetry
# Install dependencies
npm install
# Install dependencies
cd backend
npm install
cd..
# Start the dev server
npm run devThe app will be available at http://localhost:3006 (or the port shown in your terminal).
npm run build
npm run preview # preview the production build locallyAR Model Compression
Optimize .glb files added to public/ArFiles/glbs/ for web delivery:
npm run compress-modelsScript: scripts/robust-compress-glbs.ps1 (requires PowerShell & Node.js).
Transparent Video System (Luma Key)
Videos use a custom Luma Key pipeline for cross-browser transparency:
- Videos are encoded in a side-by-side layout — left half = RGB, right half = alpha mask.
- The
LumaKeyVideocomponent composites both halves onto a<canvas>at runtime.
Generate a side-by-side asset from a PNG sequence:
& "node_modules/ffmpeg-static/ffmpeg.exe" -y -i "input_%05d.png" `
-filter_complex "[0:v]pad=w=iw:h=ceil(ih/2)*2,split[v1][v2]; [v2]alphaextract[alpha]; [v1][alpha]hstack" `
-c:v libx264 -crf 18 -pix_fmt yuv420p "output.mp4"The
padfilter ensures the height is divisible by 2 for H.264 compatibility.
Driver Image Background Removal
Remove backgrounds from F2 driver headshots for a consistent look:
npm run remove-f2-bgTo process a different directory, edit the dirs array in scripts/remove-backgrounds.mjs.
Uses @imgly/background-removal-node for automatic detection.
Local Decoders
Draco and Meshopt decoders are bundled locally in public/decoders/ to bypass browser Tracking Prevention and ensure 100 % reliability.
API Data Update Scripts (F1, F2 & F1 Academy)
Self-Contained Data Architecture
All generated JSON configuration and data files are stored directly inside this repository under src/config/. The production API seamlessly serves these files directly from this repository, meaning the project is entirely self-contained and no longer requires separate external data repositories (such as f1-telemetry-api, f1aapi, or f2api).
The project includes Python scripts that fetch the latest season data and format it into the local JSON config files:
- F1:
src/config/f1/api_update.py— Fetches data from the Jolpica API and OpenF1 API. - F2:
src/config/f2/api_update.py— Scrapes F2 results directly from the official FIA Formula 2 website. - F1 Academy:
src/config/f1a/api_update.py— Scrapes F1 Academy results directly from the official F1 Academy website.
Prerequisites
- Python ≥ 3.8 — on Windows use the
pylauncher (avoids Microsoft Store alias issues) - Install the required Python packages (this uses
pip, Python's own package manager — separate from npm):
py -m pip install requests numpyUpdating Data via Admin Dashboard
All Python data-fetching scripts can now be executed seamlessly through the local Admin Dashboard, eliminating the need to manually run them in the terminal.
- Ensure your local dev server is running (
npm run dev). - Navigate to the
/adminroute in your browser (e.g.,http://localhost:3006/admin). - From the dashboard, you can easily execute the F1 updates with a single click.
- For F2 and F1 Academy, simply paste the official race URL into the input field and click update. The dashboard handles the argument passing and working directories for you!
Data Formatting
All results.json files are strictly formatted to maintain a highly compact, readable structure with exactly one line per driver.
- F1: Handled natively using a custom
write_compact_race_json()function. - F2 & F1 Academy: Requires a secondary
format.pyscript. The Admin Dashboard chains this automatically, but you can also manually run it by navigating tosrc/config/f2orsrc/config/f1aand runningpy format.pyin your terminal.
What it updates
| File | Description |
|---|---|
results.json |
Race results for every completed round |
qualifying.json |
Qualifying session results (Q1 / Q2 / Q3 times) |
sprint.json |
Sprint race results (sprint weekends only) |
races/races.json |
Race calendar with meeting keys |
races/{year}/driverStandings.json |
Cumulative driver standings after each round |
races/{year}/constructorStandings.json |
Cumulative constructor standings after each round |
drivers/ |
Per-driver career statistics and analytics |
constructors/ |
Constructor and driver rosters |
Note: The script includes automatic retry logic with exponential back-off for rate-limited (429) API responses. A full update run may take a few minutes depending on how many rounds have been completed.
OpenF1 API Rate Limiting (429) Mitigation
To ensure uninterrupted telemetry viewing during periods of high OpenF1 API traffic, several client-side strategies have been implemented to reduce and handle 429 Too Many Requests errors:
- Exponential Backoff Retries: Core API calls utilize an automatic retry queue starting with a 1500ms delay, doubling on each subsequent 429 response (up to 7 retries).
- Stale Cache Fallback: The persistent
localStoragecache handles API outages gracefully. If a network request fails (including terminal 429s), the application will fall back to expired cache data instead of breaking the UI. - Paced Pagination: Bulk data fetches bypass standard 500-record limits by paginating via timestamps, explicitly injecting a 300ms delay between batch requests to prevent rate limit spikes on the OpenF1 servers.
Hybrid API Proxy Environment
F1-Telemetry features a fully decoupled, hybrid API backend to ensure permanent stability even if external bespoke APIs are taken offline:
- Local Development: Running
npm run devstarts both the Vite frontend and a local Node.js Express server (backend/server.js) connected to a SQLite caching database.backend/database.sqlite: The primary development and administrative cache. It stores JSON responses from external APIs (Jolpica, OpenF1) to facilitate local testing and the data export workflow. While not used at runtime in production, it is essential for rebuilding the static datasets that the live site relies on.database.sqlite(root): A legacy or baseline cache file. It is not used in the current production runtime and primarily serves as a historical reference or remains from earlier project structures.
- Production Server: When built for production, the Vite code automatically switches routing to a native
api.phpfile, which seamlessly caches and routes data directly on IONOS Shared Web Hosting via file-based storage.public/api_cache/: The production caching directory. It stores API responses as static files to ensure the live site remains fast and stable even if external data sources are unavailable. This directory is excluded from version control.
Content Security Policy (CSP)
To enhance application security and mitigate Cross-Site Scripting (XSS) attacks, a strict Content Security Policy (CSP) is implemented.
Key aspects of our CSP configuration:
- API Endpoints: Explicitly whitelists connections to authorized data sources including the OpenF1 API (
api.openf1.org), Jolpica API (api.jolpi.ca), OpenWeather API, and GitHub Raw Content. - Assets & Media: Restricts image and media loading to the application origin and verified third-party providers (e.g., Flagpedia for driver flags).
- Scripts: Restricts script execution to the application origin, preventing unauthorized external scripts from running while allowing trusted analytics providers.
- Enforcement: Depending on the hosting environment (e.g., IONOS or Cloudflare), the CSP headers are actively enforced at the proxy/edge layer to ensure all browsers securely enforce the policy without manual intervention.
F1-Telemetry is deployed as a static site on IONOS. Key deployment notes:
- The
.htaccessinpublic/must be deployed at the web root to enable Gzip compression for.glbfiles. - The
public/decoders/folder must be included in the build output to avoid cross-domain script blocking. - Ensures that the
public/api.phpendpoint transfers cleanly to your root build directory structure. This PHP file functions as the dedicated caching layer and API proxy when hosted on IONOS Web Hosting Plus.
This project pulls data from four sources:
- OpenF1 API — Real-time and historical telemetry, track positioning, and stint data.
- Jolpica API — Custom local backend parser fetches F1 historical Race results, Driver Standings, and Constructor Standings directly from the reliable Jolpica API framework.
- OpenWeather API — Weather data.
- Internal Gateway (
api.php) — A custom auto-caching proxy that seamlessly fetches all configuration and data files for F1, F2, and F1 Academy directly from this self-containedF1-Telemetryrepository, fully eliminating the need for external data repositories.
Contributions are welcome! Whether it's improving the codebase, adding features, or fixing bugs — feel free to fork the repo and open a pull request.
- Thanks to all the Formula 1 fans and community contributors who keep this project running!
- Special thanks to data providers and API service OpenF1 that enable access to current and historical F1 data.
- Flagpedia — High-quality country flag WebP images used for race locations and driver nationalities.
- This work is based on "basic Lowpoly F1 Car V1" by arthihalder, available under a Creative Commons Attribution 4.0 International license. View the model on Sketchfab. License details can be found at CC-BY-4.0.
This project is available under a custom open-source license — free for non-commercial use with attribution.
F1-Telemetry is an unofficial fan project and is not associated with Formula One companies. F1, FORMULA ONE, FORMULA 1, F2, FORMULA 2, FIA, FIA FORMULA 2 CHAMPIONSHIP, F1 ACADEMY, FIA FORMULA ONE WORLD CHAMPIONSHIP, GRAND PRIX, and related marks are trademarks of Formula One Licensing B.V.