What did you make? I built Pitwall Pro, an advanced, real-time Formula 1 telemetry and race strategy visualization dashboard. It’s designed to bring the complex, data-heavy environment of an F1 pitwall directly to your browser. It features a fully interactive 3D track visualization, live telemetry parsing (speed, gear, RPM, delta), head-to-head driver comparisons, and dynamic tire strategy simulators.
What was challenging? Handling heavy streams of telemetry data while keeping the UI buttery smooth was a massive challenge. When rendering the 3D scene concurrently with dozens of live-updating Recharts components, the DOM initially struggled. I had to heavily optimize the application using requestAnimationFrame for a custom 60fps playback loop, aggressively memoize React components to prevent wasteful re-renders, and lazy-load the Three.js canvas. Syncing the 3D car positions perfectly with the 2D telemetry timeline took hours of complex math and state management.
What are you proud of? I am incredibly proud of the UI/UX architecture. Achieving that "glassmorphism" dark-mode aesthetic while maintaining readability for dense datasets isn't easy. The integration of keyboard shortcuts (Space to play, arrows to scrub, 1-4 for speed) makes the app feel like a native professional tool, not just a standard web page. Watching the 3D scene react instantly to the scrubbed telemetry timeline still feels magical every time I do it.
What should people know so they can test your project? Hit Space to start the live telemetry playback! Use your keyboard to navigate like an engineer: 1-4 changes playback speed, L toggles lap times, and the Arrow keys let you scrub through the race data. Make sure to zoom into the telemetry charts to see the exact braking points, and click on the "Advanced Panels" to experiment with different tire strategy simulations. It’s fully responsive, but best experienced on a desktop monitor!
- 3 devlogs
- 2h
