Skip to main content
Back to Work

F1 Data Dashboard

Multi-season Formula 1 data visualization with live API integration

Live
React 19 TypeScript TanStack Router Tailwind v4 Recharts Vite

Overview

A comprehensive F1 data visualization dashboard built to explore React 19 and modern routing patterns. Features real-time data integration with the Jolpica API (the community-backed successor to the deprecated Ergast API) and complete coverage of the 2020–2025 seasons.

The Problem

The original Ergast F1 API was deprecated after the 2024 season and shut down in early 2025. I wanted a playground for React 19 features and modern data fetching patterns, and F1 data provided a rich, real-world dataset to work with. The challenge was building something that stayed functional even when external APIs were unavailable.

What I Built

  • Multi-season data platform with year selector for browsing 2020–2025 F1 data
  • Real-time integration with Jolpica F1 API, with graceful fallback to demo data when unavailable
  • Main dashboard with key stats, recent race results, and championship leaders
  • Driver and constructor championship pages with sortable standings and detailed profiles
  • Race calendar with detailed results and lap-by-lap data
  • Advanced analytics page with lap time analysis and telemetry simulation
  • React Context API for global state management across season switching
  • Dark racing-inspired UI with glassmorphism effects and team colors

Key Decisions

TanStack Router over React Router for type-safe routing and a more modern API. React Context for global state since the data sharing patterns were simple enough not to need Redux or Zustand. Jolpica API as the primary data source with a complete fallback system, the portfolio always works, even if the API is down. Bundle optimized with route-based code splitting and chunked builds (~234KB gzipped).

Back to all projects