F1 Studio Garage

Inspiration

We wanted to build something that felt like actual race engineering, not just another leaderboard. In Formula racing, everything is a tradeoff between strategy and risk. We wanted to see if we could build a tool where you tune a car package and immediately see how those tweaks play out for a specific driver in a full-blown simulation.

What it does

The result is a closed-loop engineering experience: Configure: Dial in the car package. Select: Choose a driver profile. Simulate: Execute the backend-generated race events. Analyze: Monitor lap-by-lap playback and review performance metrics.

How we built it

The project is architected to separate heavy computation from the user experience, ensuring a deterministic and type-safe environment.

Backend (FastAPI + Python) Simulation Engine: Ingests lap datasets and converts setup sliders (Aero, Engine, Suspension) into mathematical modifiers. Deterministic Logic: Centralizes all race math (lap timelines, pit incidents) to ensure consistency between the simulation and the report. Outcome Prediction: Calculates finish positions, risk estimates, and ranking impacts.

Frontend (React + TypeScript + Vite) Design Studio UI: A sleek interface for driver selection and car package configuration.Real-time Visualization: An animated race tracker with a dynamic pit-event log. Data Dashboard: Visualizes top speed, $0\text{--}60$ times, total race duration, and risk-adjusted placement. framed the simulation as an optimization problem, balancing raw speed against the probability of mechanical failure:$$T_{pred} = T_{baseline} + \Delta T_{setup} + \Delta T_{pit\text{-}risk}$$

Challenges we ran into

Bridging the Clarity Gap: One of the hardest parts was translating abstract ideas into a digital space. When the vision for a feature wasn't 100% clear yet, trying to code the logic felt like hitting a moving target. I had to iterate on the "feel" of the sim before the code finally clicked.

State Persistence: Solved "refresh-to-break" issues in route-state flows by implementing more robust navigation handling.

The "Top 10" Edge Case: Engineered the logic to ensure the user’s selected driver is always tracked and visible, even if they fall outside the lead pack.

Dynamic Risk Calibration: Moved away from flat probability displays to create a risk model that feels reactive to the chosen car setup.

Schema Evolution: Managed synchronized updates across API models and frontend types to support increasingly complex race telemetry.

The Integration Headache: I ran into constant merge conflicts between the backend and frontend. Even with typed contracts, keeping the simulation math in Python aligned with the React state management required a lot of manual syncing and careful versioning.

What we learned

Centralizing simulation math in one layer (backend) reduces drift, duplication, and debugging time. Type-safe contracts between backend and frontend dramatically improve iteration speed. UI realism comes from timing behavior and event pacing, not just visual polish. Small modeling choices (caps, scaling curves, confidence effects) have large downstream impact on user perception.