# shreyasjb112007-stack/f1-vr-3d-straming architecture

> Architecture diagram of the GitHub repository shreyasjb112007-stack/f1-vr-3d-straming, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/shreyasjb112007-stack/f1-vr-3d-straming
- Repository: https://github.com/shreyasjb112007-stack/f1-vr-3d-straming

## Overview

This is an F1 race telemetry visualization application: users choose a Grand Prix, then view race frames, laps, driver information, and track/telemetry visualizations. The backend exposes race discovery and race-data endpoints, delegating race loading to a FastF1 service; the frontend provides selection, shared telemetry state, and visualization components. The route-to-service and selector-to-discovery links are visible in excerpts. App internals and the service implementation were not sampled, so their component links are shown as unverified rather than asserted.

Main entry points: [`f1/frontend/src/App.jsx`](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/App.jsx) (Application Shell), [`f1/backend/routes/telemetry.py`](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/backend/routes/telemetry.py) (Telemetry Routes), [`f1/frontend/src/components/SessionSelector.jsx`](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/SessionSelector.jsx) (Session Selector), [`f1/frontend/src/components/TrackView.jsx`](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/TrackView.jsx) (Track View)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend"]
  node_app["Application Shell<br/>[App.jsx]"]
  node_session_selector["Session Selector"]
  node_telemetry_store["Telemetry State<br/>[telemetryStore.js]"]
  node_track_view["Track View<br/>[TrackView.jsx]"]
  node_track_viewer["Track Viewer<br/>[TrackViewer.jsx]"]
  node_car_marker["Car Marker<br/>[CarMarker.jsx]"]
  node_timeline["Timeline Scrubber"]
  node_position_table["Position Table<br/>[PositionTable.jsx]"]
  node_lap_table["Lap Table<br/>[LapTable.jsx]"]
  node_driver_comparison["Driver Comparison"]
  node_telemetry_panel["Telemetry Panel<br/>[TelemetryPanel.jsx]"]
end

subgraph group_backend_api["Backend API"]
  node_api_app["FastAPI App<br/>[main.py]"]
  node_telemetry_routes["Telemetry Routes<br/>[telemetry.py]"]
end

subgraph group_race_data["Race Data"]
  node_session_cache["Session Cache<br/>[telemetry.py]"]
  node_fastf1_service["Race Loader<br/>[fastf1_service.py]"]
end

node_user(("Race Viewer"))
node_fastf1["FastF1"]

node_user -.->|"uses"| node_app
node_app -.->|"presents"| node_session_selector
node_app -.->|"uses"| node_telemetry_store
node_app -.->|"presents"| node_track_view
node_app -.->|"presents"| node_track_viewer
node_app -.->|"presents"| node_timeline
node_app -.->|"presents"| node_position_table
node_app -.->|"presents"| node_lap_table
node_app -.->|"presents"| node_driver_comparison
node_app -.->|"presents"| node_telemetry_panel
node_track_view -.->|"renders"| node_car_marker
node_session_selector -->|"requests race list"| node_telemetry_routes
node_api_app -->|"registers routes"| node_telemetry_routes
node_telemetry_routes -->|"reads or fills"| node_session_cache
node_telemetry_routes -->|"loads session"| node_fastf1_service
node_telemetry_routes -->|"queries schedules"| node_fastf1
node_fastf1_service -.->|"loads race data"| node_fastf1

click node_app "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/App.jsx"
click node_session_selector "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/SessionSelector.jsx"
click node_telemetry_store "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/store/telemetryStore.js"
click node_track_view "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/TrackView.jsx"
click node_track_viewer "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/TrackViewer.jsx"
click node_car_marker "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/CarMarker.jsx"
click node_timeline "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/TimelineScrubber.jsx"
click node_position_table "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/PositionTable.jsx"
click node_lap_table "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/LapTable.jsx"
click node_driver_comparison "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/DriverComparison.jsx"
click node_telemetry_panel "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/TelemetryPanel.jsx"
click node_api_app "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/backend/main.py"
click node_telemetry_routes "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/backend/routes/telemetry.py"
click node_session_cache "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/backend/routes/telemetry.py"
click node_fastf1_service "https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/backend/services/fastf1_service.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_session_selector,node_telemetry_store,node_track_view,node_track_viewer,node_car_marker,node_timeline,node_position_table,node_lap_table,node_driver_comparison,node_telemetry_panel,node_user toneBlue
class node_api_app,node_telemetry_routes toneAmber
class node_session_cache,node_fastf1_service toneMint
class node_fastf1 toneIndigo
```

## Components

### Frontend

- [Application Shell](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/App.jsx): `f1/frontend/src/App.jsx`
- [Session Selector](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/SessionSelector.jsx): `f1/frontend/src/components/SessionSelector.jsx`
- [Telemetry State](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/store/telemetryStore.js): `f1/frontend/src/store/telemetryStore.js`
- [Track View](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/TrackView.jsx): `f1/frontend/src/components/TrackView.jsx`
- [Track Viewer](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/TrackViewer.jsx): `f1/frontend/src/components/TrackViewer.jsx`
- [Car Marker](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/CarMarker.jsx): `f1/frontend/src/components/CarMarker.jsx`
- [Timeline Scrubber](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/TimelineScrubber.jsx): `f1/frontend/src/components/TimelineScrubber.jsx`
- [Position Table](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/PositionTable.jsx): `f1/frontend/src/components/PositionTable.jsx`
- [Lap Table](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/LapTable.jsx): `f1/frontend/src/components/LapTable.jsx`
- [Driver Comparison](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/DriverComparison.jsx): `f1/frontend/src/components/DriverComparison.jsx`
- [Telemetry Panel](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/frontend/src/components/TelemetryPanel.jsx): `f1/frontend/src/components/TelemetryPanel.jsx`

### Backend API

- [FastAPI App](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/backend/main.py): `f1/backend/main.py`
- [Telemetry Routes](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/backend/routes/telemetry.py): `f1/backend/routes/telemetry.py`

### Race Data

- [Session Cache](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/backend/routes/telemetry.py): `f1/backend/routes/telemetry.py`
- [Race Loader](https://github.com/shreyasjb112007-stack/f1-vr-3d-straming/blob/main/f1/backend/services/fastf1_service.py): `f1/backend/services/fastf1_service.py`

### Other components

- **Race Viewer**
- **FastF1**

## Connections

- Race Viewer → Application Shell: uses
- Application Shell → Session Selector: presents
- Application Shell → Telemetry State: uses
- Application Shell → Track View: presents
- Application Shell → Track Viewer: presents
- Application Shell → Timeline Scrubber: presents
- Application Shell → Position Table: presents
- Application Shell → Lap Table: presents
- Application Shell → Driver Comparison: presents
- Application Shell → Telemetry Panel: presents
- Track View → Car Marker: renders
- Session Selector → Telemetry Routes: requests race list (evidence: `f1/frontend/src/components/SessionSelector.jsx`)
- FastAPI App → Telemetry Routes: registers routes (evidence: `f1/backend/main.py`)
- Telemetry Routes → Session Cache: reads or fills (evidence: `f1/backend/routes/telemetry.py`)
- Telemetry Routes → Race Loader: loads session (evidence: `f1/backend/routes/telemetry.py`)
- Telemetry Routes → FastF1: queries schedules (evidence: `f1/backend/routes/telemetry.py`)
- Race Loader → FastF1: loads race data