🏎️ PitWall Pro

Advanced Formula 1 Telemetry, Strategy & 3D Visualization Dashboard

🚀 Live Demo · 📦 Source Code · 📝 Changelog

---

📸 Overview

PitWall Pro is a professional-grade F1 telemetry dashboard that brings the pit wall experience to your browser. Featuring real-time 3D car visualization, live telemetry streaming, head-to-head driver comparisons, and race strategy simulation — all in a single, performant React application.

🏁 Live at: amertos.github.io/PitwallPro

---

🏗️ Architecture

┌─────────────────────────────────────────────────────────────────┐
│                        PitWall Pro                              │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌──────────┐    ┌──────────────────────────────────────────┐  │
│  │          │    │           Visualization Layer             │  │
│  │  Header  │    │  ┌─────────┐  ┌──────────┐  ┌─────────┐ │  │
│  │  + Theme │    │  │ 3D Scene│  │ TrackMap │  │ Charts  │ │  │
│  │ Controls │    │  │ (R3F)   │  │          │  │(Recharts│ │  │
│  │          │    │  └────┬────┘  └────┬─────┘  └────┬────┘ │  │
│  └──────────┘    │       │           │              │       │  │
│                  │       └───────────┼──────────────┘       │  │
│  ┌──────────┐    │                   │                      │  │
│  │ Driver   │    │  ┌────────────────┴──────────────────┐  │  │
│  │ Cards    │◄───┤  │         Playback Controls          │  │  │
│  │ + Weather│    │  │    Play · Pause · Speed · Seek     │  │  │
│  └──────────┘    │  └────────────────┬──────────────────┘  │  │
│                  │                   │                      │  │
│  ┌──────────┐    │  ┌────────────────▼──────────────────┐  │  │
│  │ Strategy │    │  │       Telemetry Data Layer         │  │  │
│  │ Sim      │◄───┤  │  ┌──────────┐  ┌──────────────┐  │  │  │
│  │          │    │  │  │telemetry │  │   metadata    │  │  │  │
│  └──────────┘    │  │  │  .json   │  │    .json      │  │  │  │
│                  │  │  └──────────┘  └──────────────┘  │  │  │
│  ┌──────────┐    │  └──────────────────────────────────┘  │  │
│  │ Advanced │    └──────────────────────────────────────────┘  │
│  │ Panels   │                                                   │
│  │(Head2Head│    ┌──────────────────────────────────────────┐  │
│  │ Timeline │    │              State Management             │  │
│  │ Tires    │    │  ┌───────────┐  ┌───────────┐            │  │
│  │ Export)  │    │  │useState   │  │useMemo    │            │  │
│  └──────────┘    │  │useCallback│  │useRef     │            │  │
│                  │  │useContext  │  │lazy()     │            │  │
│                  │  └───────────┘  └───────────┘            │  │
│                  └──────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

---

✨ Features

Feature	Description
🏎️ 3D F1 Visualization	Ultra-detailed F1 car models with DRS animation, exhaust glow, and speed particles
📡 Live Telemetry	Real-time speed, gear, RPM, and delta time between drivers
📊 Interactive Charts	Zoomable telemetry and gear charts with hover sync
🏁 Race Positions	Live position tracking and lap-by-lap analysis
⚔️ Head-to-Head	Direct driver comparison across all metrics
🎯 Strategy Simulation	Experiment with tire strategies and pit stops
🗺️ Track Map	Circuit visualization with driver positions
⌨️ Keyboard Shortcuts	Full keyboard navigation for power users
🌓 Dark/Light Themes	Toggle between beautiful dark and light modes
📱 Responsive Design	Works on desktop and mobile
🔌 Performance Optimized	Lazy-loaded 3D, RAF-based playback, memoized components

---

🛠️ Tech Stack

┌─────────────────────────────────────────────┐
│              Frontend Stack                  │
├─────────────────────────────────────────────┤
│                                             │
│  ⚛️  React 19          │  Component UI      │
│  🎨  Three.js + R3F   │  3D Rendering      │
│  📊  Recharts          │  Data Charts       │
│  🖌️  Lucide React      │  Icons             │
│  ⚡  Vite 8            │  Build Tool        │
│  🔍  OxLint            │  Code Quality      │
│  🚀  gh-pages          │  Deployment        │
│                                             │
└─────────────────────────────────────────────┘

---

🚀 Getting Started

Prerequisites

• Node.js 18+ (recommended: 20+)
• npm or yarn or pnpm

Installation

# Clone the repository
git clone https://github.com/Amertos/PitwallPro.git

# Navigate to the project
cd PitwallPro

# Install dependencies
npm install

# Start development server
npm run dev

Build for Production

# Build optimized production bundle
npm run build

# Preview the build locally
npm run preview

Deploy to GitHub Pages

npm run deploy

---

⌨️ Keyboard Shortcuts

Key	Action
Space	Play / Pause
← →	Seek backward/forward ±10 frames
Home	Reset to start
End	Jump to end
1 2 3 4	Playback speed: 0.5x, 1x, 2x, 5x
L	Toggle lap times table
F	Toggle fullscreen
T	Toggle dark/light theme
P	Toggle advanced panels

---

📂 Project Structure

PitwallPro/
├── public/
├── src/
│   ├── components/
│   │   ├── F13DScene.jsx          # 3D visualization (lazy-loaded)
│   │   ├── Header.jsx             # App header with controls
│   │   ├── DriverCard.jsx         # Driver info cards
│   │   ├── TelemetryChart.jsx     # Speed/RPM telemetry charts
│   │   ├── GearChart.jsx          # Gear shift visualization
│   │   ├── DeltaTime.jsx          # Time delta display
│   │   ├── TrackMap.jsx           # Circuit map
│   │   ├── PlaybackControls.jsx   # Play/pause/speed controls
│   │   ├── StrategySimulation.jsx # Pit strategy simulator
│   │   ├── DriverSpeedComparison.jsx # Side-by-side speed
│   │   ├── DriverHeadToHead.jsx   # Head-to-head stats
│   │   ├── RacePositions.jsx      # Race position tracker
│   │   ├── LapTimesTable.jsx      # Lap time analysis
│   │   ├── RaceSituation.jsx      # Race state display
│   │   ├── RaceTimeline.jsx       # Race event timeline
│   │   ├── TireStrategyVisualizer.jsx # Tire strategy view
│   │   ├── SessionComparison.jsx  # Session comparison
│   │   ├── WeatherWidget.jsx      # Weather info
│   │   ├── ExportData.jsx         # Data export
│   │   └── ErrorBoundary.jsx      # Error handling
│   ├── context/
│   │   └── ThemeContext.jsx        # Theme state management
│   ├── hooks/
│   │   └── useFullscreen.js       # Fullscreen API hook
│   ├── data/
│   │   ├── telemetry.json         # Telemetry data
│   │   ├── metadata.json          # Driver/session metadata
│   │   └── f1database.js          # F1 database utilities
│   ├── App.jsx                    # Main application
│   ├── App.css                    # Application styles
│   ├── index.css                  # Global styles
│   └── main.jsx                   # Entry point
├── .github/
│   └── ISSUE_TEMPLATE/
│       ├── bug_report.md          # Bug report template
│       └── feature_request.md     # Feature request template
├── LICENSE                        # MIT License
├── CONTRIBUTING.md                # Contribution guidelines
├── CODE_OF_CONDUCT.md             # Code of conduct
├── CHANGELOG.md                   # Version history
├── SECURITY.md                    # Security policy
├── package.json
├── vite.config.js
└── README.md

---

🔧 Configuration

The project uses Vite with the following configuration:

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/PitwallPro/',  // GitHub Pages base path
})

---

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details on:

• How to submit issues
• How to submit pull requests
• Development setup
• Code style guidelines

---

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

👨‍💻 Author

Amertos — GitHub

---

🙏 Acknowledgments

• Formula 1 — The greatest racing series on Earth
• React — A JavaScript library for building user interfaces
• Three.js — 3D graphics library for the web
• Recharts — Redefined chart library for React
• Vite — Next generation frontend tooling

---

Built with ❤️ for Formula 1 enthusiasts

🏎️ Live Demo · ⭐ Star this repo if you like it!