A modern Formula 1 dashboard built with React and TypeScript.
Track live standings, explore race calendars, compare drivers, and dive into career statistics, all in a sleek, dark-themed interface.
- Live championship standings overview
- Current season highlights
- Quick navigation to detailed views
- Drivers Championship — Full driver standings with points, wins, and team info
- Constructors Championship — Team rankings with detailed statistics
- Teammate Battles — Head-to-head comparisons within each team
- Driver Comparison — Select up to 5 drivers to compare performance across the season
- Historical data from 1950 to present
- Complete race schedule with dates and circuits
- Race results and session times
- Circuit information with country flags
- Year selector to browse historical seasons
- Team Lineups — Current season driver/team pairings
- Driver Stats — Career statistics including wins, poles, and world titles
- Team Stats — Constructor career achievements
- Race Analysis — Deep dive into race results, final positions, and points
- Race Pace — Lap time analysis with fastest and average lap times
- Tyre Strategy — Pit stop data with timing and duration
- Season selector to analyze historical races
- On-demand data loading with elegant loading states
- Frontend: React 19, TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS
- Icons: Font Awesome
- API: Ergast F1 API (via jolpi.ca mirror)
delta-f1/
├── index.tsx # App entry point
├── index.html # HTML template
├── src/
│ ├── components/
│ │ ├── shared/ # Navbar, TeamLogo, Flag
│ │ └── views/ # Dashboard, Standings, Season, Grid, Telemetry
│ ├── services/ # API functions
│ ├── types/ # TypeScript interfaces
│ └── utils/ # Helper functions (team colors, country codes, etc.)
├── package.json
├── tsconfig.json
└── vite.config.ts
Prerequisites: Node.js 18+
-
Clone the repository
git clone https://github.com/ohhmkar/delta-f1.git cd delta-f1 -
Install dependencies
npm install
-
Start the development server
npm run dev
Made with <3 by @ohhmkar