Tech Demo

NHL Standings

Aktuelle NHL-Tabelle mit Team-Rosters. Entwickelt mit React und TypeScript — Daten von der öffentlichen NHL API über einen Symfony-Proxy.

Unter der Haube

React + TypeScript

Die gesamte App ist in TypeScript geschrieben. Typisierte Interfaces für API-Daten sorgen dafür, dass Fehler schon bei der Entwicklung auffallen.

Custom Hooks

useStandings() und useRoster() kapseln die Fetch-Logik inklusive Loading- und Error-State. AbortController verhindert Race Conditions bei schnellem Team-Wechsel. Daten werden client-seitig gefiltert — kein Re-Fetch bei Filter-Wechsel.

Vite Build Pipeline

Eigene Build-Pipeline getrennt vom AssetMapper. Vite kompiliert TSX zu JavaScript und bündelt React in eine einzige Datei.

NHL API + Symfony-Proxy

Symfony leitet API-Requests an die öffentliche NHL API weiter — React bleibt von CORS-Einschränkungen entkoppelt.