🤖 AI-Powered Project — This is a proof of concept built entirely with AI assistance in just 2-3 hours as a learning exercise and technology demonstration.
A real-time Formula 1 race viewer with 2D circuit visualization, telemetry data, and comprehensive race statistics powered by the OpenF1 API.
preview.mov
- Interactive 2D circuit map with real GPS coordinates
- Live car positions rendered on the track
- Zoom and pan capabilities for detailed viewing
- Circuit layout dynamically generated from race data
- Real-time speed, throttle, brake and gear information
- Speed graphs with historical data
- DRS status indicator
- Driver-specific telemetry selection
- Live position table with all drivers
- Lap times and best lap tracking
- Interval times between drivers
- Team color-coded display
- Relive Mode: Watch the race unfold with real-time playback, circuit visualization and telemetry
- Results Mode: View final standings, lap times and race statistics
- Timeline scrubber for race navigation
- Play/pause functionality
- Variable playback speed (1x, 2x, 5x, 10x)
- Jump to specific race moments
- Browse historical races and sessions
- Filter by season, circuit, and session type
- Support for Practice, Qualifying, and Race sessions
- Frontend Framework: React 18 + TypeScript 5
- Build Tool: Vite 5
- Styling: TailwindCSS 3
- State Management: Zustand 4
- Data Fetching: Axios + TanStack Query 5
- Charts: Recharts 2
- Date Utilities: date-fns 3
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/yourusername/f1-visor.git
cd f1-visor
# Install dependencies
npm install
# Start development server
npm run devThe application will be available at http://localhost:5173
npm run build
npm run previewf1-visor/
├── src/
│ ├── components/ # React components
│ │ ├── circuit/ # Circuit map and driver visualization
│ │ ├── layout/ # Layout components (Header, etc.)
│ │ ├── playback/ # Playback controls and timeline
│ │ ├── positions/ # Position table
│ │ ├── session/ # Session selector and view mode
│ │ ├── telemetry/ # Telemetry panel
│ │ └── ui/ # Reusable UI components
│ ├── services/ # API services
│ │ └── openf1/ # OpenF1 API integration
│ ├── hooks/ # Custom React hooks
│ ├── stores/ # Zustand stores
│ ├── types/ # TypeScript definitions
│ └── utils/ # Utility functions
├── docs/ # Documentation
└── public/ # Static assets
This project uses the OpenF1 API for all Formula 1 data:
- Historical Data: Free access to past races and sessions
- Real-time Data: Requires paid account (not yet implemented)
/v1/sessions- Session metadata/v1/location- GPS coordinates/v1/position- Race positions/v1/laps- Lap times/v1/intervals- Time gaps/v1/pit- Pit stops/v1/car_data- Telemetry/v1/stints- Tire strategy
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
All code follows strict TypeScript standards. See AGENTS.md for detailed coding conventions and AI agent instructions.
- AGENTS.md - AI coding conventions and standards
- docs/ - Detailed implementation documentation
- ARCHITECTURE.md - System architecture
- IMPLEMENTATION_PLAN.md - Development roadmap
- API_INTEGRATION.md - OpenF1 API guide
- Project setup and configuration
- OpenF1 API integration
- Session selector component
- 2D circuit visualization with car positions
- Playback system with timeline controls
- Telemetry dashboard
- Position table with timing data
- View mode selection (Relive / Results)
- Pit stop indicators on timeline
- Performance optimization
- Real-time data support (future)
Contributions are welcome! Please read AGENTS.md for coding standards before submitting PRs.
MIT License - see LICENSE file for details
- Data provided by OpenF1
- Inspired by the Formula 1 community
For questions or suggestions, please open an issue on GitHub.