ApexGrid
Formula 1 analytics dashboard with live standings and race telemetry.
Write-up in progress: some sections are still draft copy.
- Role
- Frontend Engineer
- Duration
- 2 Months
- Team
- Solo Project
- Status
- Archived
- Platform
- Web Dashboard
- Completed
- March 2024
01
Overview
ApexGrid is a high-performance analytics dashboard that ingests live Formula 1 data. This study covers how we managed high-frequency data streams and complex data visualizations without blocking the main thread.
02
Problem
F1 fans lack accessible, real-time telemetry dashboards.
03
Objectives
- Ingest and display OpenF1 data in real-time.
04
Solution
- Live race leaderboards
- Driver telemetry comparisons
05
Technology
ReactOpenF1 APIViteTailwind
06
Architecture
Client-side SPA with Web Workers
React SPA utilizing aggressive memoization and web workers.
Data. Purely client-side consuming a third-party API.
API. OpenF1 REST API with intelligent client-side polling.
Auth. N/A
07
Key engineering decisions
Performance. Maintained a strict 1.2s LCP.
Accessibility. Complex charts are accompanied by visually hidden, screen-reader accessible data tables.
Security. Standard CORS and CSP headers enforced.
Trade-offs. Sacrificed support for older mobile browsers to utilize modern Web Worker APIs.
08
Challenges
Managing React render cycles when receiving telemetry updates.
Mastered decoupling expensive data transformations.
11
Gallery
12