A modern Formula 1 dashboard for the 2026 season: live timing, standings, driver analytics, telemetry, and more.
Live Site • Features • Tech Stack • Getting Started
- Live Timing: Real-time session timing straight from Formula 1's official live feed, with positions, gaps, intervals, tyre data, and race control messages.
- Race Review: Replay the timing tower and full classification of any completed session, powered by OpenF1.
- Driver Standings: Full championship standings with points breakdowns and position-history charts.
- Constructor Standings: Team rankings with per-driver contribution breakdowns.
- Race Results: Detailed results for every Grand Prix, including lap charts, tyre strategies, and fastest laps.
- Driver Profiles: Career stats, recent form, and season performance for all 22 drivers.
- Team Profiles: Constructor details with driver lineups and historical performance.
- Circuit Guide: Every 2026 circuit with an interactive 3D globe, track maps, lap records, and key stats.
- Session Schedule: FP1, FP2, FP3, qualifying, sprint, and race times shown in the visitor's local time, switchable to any timezone.
- Race Calendar: An interactive timeline of the full 2026 season with a countdown to the next event (sprint-aware).
- Head-to-Head Compare: Compare any two drivers across stats, qualifying pace, points progression, and recent form.
- F1 News: Aggregated headlines from BBC Sport, Motorsport.com, Autosport, The Race, and PlanetF1.
- Responsive Design: Fully optimized for desktop, tablet, and mobile, with smooth GSAP scroll animations.
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router, ISR) |
| Language | TypeScript 5 (strict mode) |
| Styling | Tailwind CSS 4 |
| Animations | GSAP 3 + ScrollTrigger, Framer Motion |
| Charts | Recharts 3 |
| 3D | Three.js + React Three Fiber |
| Data | Jolpica-F1 API, OpenF1 API, F1 live timing |
| UI Components | Radix UI, Lucide Icons |
| Analytics | Vercel Analytics, Vercel Speed Insights |
| Deployment | Vercel |
# Clone the repo
git clone https://github.com/shvmmshr/f1lytics.git
cd f1lytics
# Install dependencies
pnpm install
# Start the dev server
pnpm devOpen http://localhost:3000 to view it.
No environment variables are required. All data comes from free, public APIs.
src/
├── app/
│ ├── (marketing)/ # Landing page
│ ├── (season)/ # Standings, calendar, drivers, teams, circuits, races, news
│ ├── (live)/ # Live timing and race review
│ ├── (tools)/ # Head-to-head compare tool
│ └── api/ # Route handlers: live data, SSE relay, news, revalidation
├── components/
│ ├── charts/ # Recharts visualizations (position, lap times, tyre strategy)
│ ├── home/ # Landing page sections (hero, countdown, calendar, news)
│ ├── layout/ # Navbar, footer, page transitions
│ ├── live/ # Live timing UI (replay banner and more)
│ ├── shared/ # Reusable UI (badges, cards, headers, session schedule)
│ └── ui/ # Base UI primitives (shadcn/ui)
├── hooks/ # Live session polling and live-stream SSE hooks
└── lib/
├── api/ # API clients (Jolpica, OpenF1, news)
└── constants/ # Season data (circuits, drivers, teams, schedules)
| Source | Usage |
|---|---|
| Jolpica-F1 API | Historical data: standings, race results, qualifying, lap times |
| OpenF1 API | Session data: positions, intervals, tyres, telemetry, weather |
| F1 live timing | Real-time timing during sessions, relayed as Server-Sent Events |
| RSS feeds | Aggregated F1 news from major motorsport outlets |
All data sources are free and require no authentication. Responses are cached with Next.js ISR (Incremental Static Regeneration) using per-route revalidation intervals.
Deploy your own instance with one click:
Contributions are welcome. Here is how:
- Fork the repository
- Create a feature branch (
git checkout -b feat/amazing-feature) - Commit your changes (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feat/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License. See the LICENSE file for details.
If you found this useful, consider supporting the project!
