Skip to content

Repository files navigation

🏎 GrandPrix81

An AI-powered Formula 1 race strategy simulator

Live Site Next.js Tailwind CSS Vercel


Pick your track, tyres, weather, and strategy mode. The engine calculates your optimal pit window, tyre sequence, and projected race time — lap by lap.



🏁 What is GrandPrix81?

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.


⚡ Features

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

🛞 Tyre Degradation Model

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.


🧱 Tech Stack

Technology Purpose
Next.js React framework, App Router
Tailwind Styling and dark F1 theme
Recharts Lap time degradation chart
Lucide Icons
Vercel Deployment

📁 Project Structure

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

🚀 Running Locally

# 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 dev

Then open http://localhost:3000 🏁


🎨 Colour Palette

#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

☁️ Deploy Your Own

  1. Push this repo to GitHub
  2. Go to vercel.com and import the repo
  3. Vercel auto-detects Next.js — click Deploy
  4. Live in under a minute

Live


GrandPrix81 is a fan-made project. Not affiliated with Formula 1, FOM, or FIA.

About

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages