-- : -- : --
Home
Back to Projects
2026/ 03Live

F1 Analytics Dashboard

Slipstreams

View Live Project

Overview

A broadcast-style Formula 1 analysis dashboard — lap-by-lap position traces, tyre strategy Gantt charts, and race analytics. Select any season, Grand Prix, and session to load real telemetry data instantly.

The F1 Analytics Dashboard is a comprehensive data visualization platform that brings Formula 1 race analytics to life. Built with a Python backend using FastAPI and FastF1 for telemetry data processing, and a modern Next.js frontend for interactive visualizations.

Key Features

Lap Position Chart

Interactive per-lap trace in official team colours with live standings

Tyre Strategy

Gantt-style stint visualisation with compound-coded colour bars

Race Results

Classified results with grid-vs-finish delta and points scored

Race Selector

Any season, Grand Prix, and session type — Race, Qualifying, Sprint, FP1–3

Technology Stack

FastAPIFastF1PandasUvicornNext.js 14TypeScriptTailwind CSSRecharts

Challenges

  • Processing large volumes of telemetry data efficiently

  • Creating real-time visualizations that match broadcast quality

  • Handling multiple seasons and race formats

  • Optimizing API response times for smooth user experience

Solutions

  • Implemented caching strategy with FastF1's built-in cache system

  • Used Recharts for performant, responsive data visualizations

  • Built a flexible API that handles all F1 session types

  • Optimized data structures for quick filtering and rendering

Project Architecture

// Project Structure

f1-dashboard/
├── backend/
│   ├── models/
│   │   └── schemas.py
│   ├── routes/
│   │   ├── health.py
│   │   ├── positions.py
│   │   ├── results.py
│   │   ├── seasons.py
│   │   ├── sessions.py
│   │   └── tyres.py
│   ├── services/
│   │   ├── fastf1_service.py
│   │   ├── lap_loader.py
│   │   └── session_service.py
│   ├── utils/
│   │   ├── colors.py
│   │   ├── driver_lookup.py
│   │   └── helpers.py
│   ├── f1_cache/
│   ├── main.py
│   └── requirements.txt
└── frontend/
    ├── app/
    │   ├── api/
    │   ├── sign-in/
    │   ├── sign-up/
    │   ├── layout.tsx
    │   └── page.tsx
    ├── components/
    ├── lib/
    ├── state/
    │   └── raceStore.ts
    ├── types/
    │   └── f1.ts
    ├── utils/
    │   └── keepAlive.ts
    ├── public/
    └── package.json

Key Learnings

  • Deep understanding of F1 telemetry data structures

  • Advanced React patterns for complex state management

  • API design for data-intensive applications

  • Performance optimization techniques for large datasets

Future Enhancements

Live timing & telemetry via WebSocket, animated race map, Redis pub/sub layer, and deep analytics with telemetry overlays.