A landing-style, fully client-side UFC fight tracker. Live event cards, results, countdowns and per-bout detail — no backend, no database, no API keys.

• Astro 4 (static output) — shell + landing sections
• React islands + Framer Motion — interactive, animated tracker
• Tailwind CSS — design system

All data is fetched directly from the browser against ESPN's public, unofficial MMA API (it sends access-control-allow-origin: *, so no proxy is needed):

• …/sports/mma/ufc/scoreboard?dates=<year> → the whole season in one request (events, fight cards, fighters, records, results).
• Fighter headshots: a.espncdn.com/i/headshots/mma/players/full/<id>.png (falls back to a monogram avatar when a fighter has no photo).
• Betting odds are attempted from ESPN's core API per bout, but the free feed usually returns nothing — the odds panel hides itself when there's no data (no fake numbers).

The season is normalized into clean types (src/types.ts) and cached in localStorage (10 min TTL) with a stale-fallback: if the network is down, the last good cache is shown instead of an error. Bump the cache key version in src/lib/espn.ts whenever the normalized shape changes.

• Hero with the next event, headline bout (photos + flags) and a live countdown.
• Animated schedule and results boards: event rail + full fight card.
• Click any bout → detail modal: photos, tale of the tape, result/method, venue & location, broadcast, odds (when available).
• Responsive, reduced-motion aware, dark UFC-styled theme.

pnpm install
pnpm dev       # http://localhost:4321
pnpm build     # static site -> dist/
pnpm preview

Demo project. Not affiliated with the UFC or ESPN.