$ open nfl-live
NFL Live
Sept. 2026 — Sept. 2026
NFL-Dashboard mit Live-Spielen, Spieltagen, Tabelle, Team-Seiten und animierten Highlights.
## Überblick
NFL Live ist ein inoffizielles Fan-Dashboard für die NFL. Die Startseite zeigt laufende Spiele mit, den aktuellen Spieltag, kommende Spiele und die Tabelle aller 32 Teams nach Divisions.
Dazu kommen eine Detailseite pro Spiel mit Live-Score und Quarter-Tabelle, eine eigene Seite pro Team sowie eine Einsteiger-Seite, die die Football-Regeln mit Animationen erklärt.
## Kernfunktionen
### Team-Seiten
- ▸Hintergrund in Teamfarben, Kopfbereich mit Parallax-Ebenen, Bilanz und Head Coach
- ▸Aufstellung beim Scrollen: Eine Sticky-Bühne zeigt ein 3D-Spielfeld, das von Offense über Defense (3-4 bzw. 4-3) zu Special Teams wechselt
- ▸Starter stehen mit Foto an ihrer Position aus der Depth Chart, per Tipp gibt es Details und Backups
- ▸Kader als Karten nach Offense, Defense, Special Teams, Verletzt und Practice Squad
### Highlights auf der Spielseite
Für abgeschlossene Spiele laufen alle Scoring-Plays nacheinander auf einem 3D-Feld ab: Pass- und Lauf-Touchdowns, Field Goals und Return-Touchdowns. Grundlage ist die Play-by-Play der ESPN-API mit Yardlinie, Raumgewinn, Richtung und beteiligten Spielern. Startpunkt, Richtung, Weite und Spieler stimmen, die Laufwege dazwischen sind stilisiert.
### Regeln einfach erklärt
Ziel, Spielfeld, Positionen, Downs, Punkte, Strafen und Spielzeit werden als animiertes Taktikbrett erklärt. Jede Szene besteht aus Keyframes mit Spielerpositionen, Ballflug, Line of Scrimmage und Erklärtext und startet automatisch, sobald sie ins Bild scrollt. Im Hochformat wird das Feld gedreht.
## Request-Budget
Die Spieldaten-API erlaubt nur ein begrenztes Kontingent von 100 Requests pro Tag. Alle Besucher teilen sich deshalb dieselben gecachten Antworten im Next.js Data Cache, und jeder API-Aufruf hat einen zeitbasierten Cache-Key, der höchstens einmal ausgeführt wird.
- ▸Spielplan alle 12 h, Tabelle alle 6 h, der Rest des Budgets steht für Live-Daten bereit
- ▸Aus den Anstoßzeiten berechnet der Server einen festen Abrufplan pro Tag: Abgefragt wird nur, während mindestens ein Spiel läuft
- ▸Die Crunch-Time (4. Quarter und Overtime) wird doppelt gewichtet und bekommt kürzere Intervalle
- ▸Da die Zahl der Keys pro Tag begrenzt ist, kann das Tageslimit auch bei Spielplanänderungen nicht überschritten werden
## Technik
### Tech Stack
- ▸Framework: Next.js 16 (App Router, Server Components)
- ▸Sprache: TypeScript
- ▸Styling: Tailwind CSS 4
- ▸Daten: Big Balls Sports Data SDK und öffentliche ESPN-API
- ▸Hosting: Vercel inkl. Analytics
### Architektur
Ein eigenes Backend ist nicht nötig: Die API wird ausschließlich aus Server Components aufgerufen, die auf Vercel als Functions laufen. Der API-Key bleibt so serverseitig geheim. Während Live-Spielen aktualisieren sich die Seiten alle 30 Sekunden, lesen dabei aber nur aus dem Cache.
## Einblicke
