An AI-powered Formula 1 race strategy simulator
Pick your track, tyres, weather, and strategy mode. The engine calculates your optimal pit window, tyre sequence, and projected race time — lap by lap.
GrandPrix81 lets you think like an F1 strategy engineer. Configure your race parameters and the rule-based engine instantly returns your optimal strategy — complete with a live lap time degradation chart, pit stop breakdown, and full risk analysis.
Built from scratch with zero prior coding experience as a guided project.
| Feature | Description | |
|---|---|---|
| 🗺 | 24-Circuit Library | All current F1 venues with track-specific lap time multipliers |
| 🧠 | Rule-Based Strategy Engine | Cliff modelling, safety car windows, compound sequencing |
| 📊 | Live Degradation Chart | Lap-by-lap tyre wear visualised with pit stop markers |
| ☀ | Weather Scenarios | Dry, Mixed, Wet — affects compounds and lap times |
| 🚨 | Safety Car Risk | SC probability shifts pit windows by up to 16 seconds |
| 🎯 | 3 Strategy Modes | Aggressive, Balanced, or Conservative |
| 🏆 | Risk Assessment | Low / Medium / High rating for every strategy |
| Compound | Base Lap | Degradation / Lap | Cliff Lap |
|---|---|---|---|
| 🔴 Soft | 88s | +0.18s | Lap 18 |
| 🟡 Medium | 90s | +0.10s | Lap 28 |
| ⚪ Hard | 92s | +0.06s | Lap 38 |
| 🟢 Intermediate | 98s | +0.14s | Lap 22 |
| 🔵 Wet | 105s | +0.09s | Lap 30 |
Past the cliff lap, degradation accelerates — just like in a real Grand Prix.
| Technology | Purpose |
|---|---|
| React framework, App Router | |
| Styling and dark F1 theme | |
| Lap time degradation chart | |
| Icons | |
| Deployment |
grandprix81/
├── app/
│ ├── layout.tsx ← Root layout and metadata
│ ├── globals.css ← F1 dark theme and animations
│ ├── page.tsx ← Homepage
│ ├── simulator/
│ │ └── page.tsx ← Simulator page
│ └── components/
│ ├── Navbar.tsx ← Top navigation
│ ├── TrackSelect.tsx ← Custom circuit dropdown
│ ├── TyreBadge.tsx ← Tyre compound pill
│ ├── LapTimeChart.tsx ← Degradation chart
│ └── ResultCard.tsx ← Strategy result card
├── lib/
│ └── strategyEngine.ts ← Race strategy brain
├── tailwind.config.ts ← F1 colour palette
└── package.json
# 1. Clone the repo
git clone https://github.com/yourusername/grandprix81.git
cd grandprix81
# 2. Install dependencies
npm install
# 3. Start the dev server
npm run devThen open http://localhost:3000 🏁
#E8002D ██ f1red — Primary accent, buttons
#000000 ██ f1dark — Page background
#0D0D0D ██ f1panel — Cards and panels
#FFD700 ██ f1yellow — Medium tyre, highlights
#00D2BE ██ f1teal — Pit stop markers
#888888 ██ f1muted — Subtext and labels
- Push this repo to GitHub
- Go to vercel.com and import the repo
- Vercel auto-detects Next.js — click Deploy
- Live in under a minute