[OC] Visualisierung des Weges zum Super Bowl: Eine interaktive NFL-Zeitleiste, erstellt mit React und SVG

**Source:**

·         Game data and scores: **API-Sports (api-football)**.

·         Historical data: **TheSportsDB**.

**Tools:**

·         **Frontend:** React 19 (TypeScript) & Vite.

·         **Visualization:** Custom SVG rendering. No charting libraries were used; I calculate the Bezier curves and node positions manually using React components.

·         **Backend:** Python (FastAPI) with PostgreSQL and TortoiseORM.

·         **Data Processing:** Real-time updates handled via WebSockets to sync the timeline with live game events.

**About the Project:** I wanted to see the „momentum“ of the NFL season rather than just a static list of wins and losses. I built this Chrome Extension to visualize every team’s path through the season.

**Key features:**

·         **Time Machine:** You can drag the slider to any point in the season, and the Standings table recalculates instantly to show you the rank of the teams *at that exact moment in time*.

·         **Live Tracking:** The timeline pulses and updates as games are played (Live scores).

·         **Deep history:** data from 1960 to present.

·         **100% free** (no ads/sign-up)

**Link:** [https://chromewebstore.google.com/detail/live-nfl-football-scores/mcnefepdggbiebcfdnelphbhpeccmdpj](https://chromewebstore.google.com/detail/live-nfl-football-scores/mcnefepdggbiebcfdnelphbhpeccmdpj)