An interactive Formula 1 standings simulator built with Next.js. It shows current driver standings, lets you simulate upcoming race weekends, and recalculates points instantly.
- Displays live driver standings on the home page.
- Pulls the active race calendar and starts simulation from the next available race.
- Lets you drag and drop drivers into a top-10 result order.
- Applies the standard F1 top-10 points system:
25, 18, 15, 12, 10, 8, 6, 4, 2, 1. - Updates standings after each simulated round and continues weekend by weekend until the season ends.
Note: Current implementation focuses on drivers standings simulation (not constructors standings).
- Standings and schedule data are fetched from the Ergast-compatible Jolpica endpoint:
https://api.jolpi.ca/ergast/f1/{year}/driverstandings/?format=jsonhttps://api.jolpi.ca/ergast/f1/{year}/races/?format=json
- If the current season is not available yet, the app falls back to the previous season.
- Driver/team images are resolved from Formula1 media asset URLs.
- Next.js 15 (App Router)
- React 19
- TypeScript
- Tailwind CSS v4 +
tw-animate-css - Shadcn-style UI primitives (table/modal components)
- Vercel Analytics
/→ Dashboard with current driver standings/simulate→ Season simulation screen
.
├── src/
│ ├── app/
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ ├── globals.css
│ │ └── simulate/
│ │ └── page.tsx
│ ├── components/
│ │ ├── dashboard/
│ │ │ ├── Dashboard.tsx
│ │ │ └── standings/
│ │ │ ├── List.tsx
│ │ │ ├── StandingsList.tsx
│ │ │ └── SimulateList/
│ │ │ ├── SimulateList.tsx
│ │ │ └── SimulateListModal.tsx
│ │ └── ui/
│ │ ├── modal.tsx
│ │ └── table.tsx
│ ├── lib/
│ │ └── utils.ts
│ └── types/
│ └── index.ts
├── public/
├── package.json
└── README.md
yarn install
yarn devOpen http://localhost:3000.
The project is ready for deployment on Vercel. Sitemap generation runs automatically on build via next-sitemap.