Live demo ↗ · the only scores, standings and stats that matter — yours.
Most sports apps drown you in every game on earth. Frontrow does the opposite:
pick your teams and players once, and get a single, broadcast-grade dashboard that
shows only what you follow — live scores, recent form, next fixtures, standings,
and season stats.
Real accounts keep it in sync across devices, and the whole thing is yours to
re-skin. No noise. No clutter. Front-row seats.
Mood: a floodlit night game from the press box. Midnight slate,
broadcast overlays, cobalt as the brand voice, a single live-red pulse,
amber for the leaders.
✨ Highlights
| |
|---|
| 🎟️ A dashboard that's only yours | No firehose — just live & upcoming, your teams, your players, and the standings around them. |
| 🔴 Live, but quiet | Auto-refresh polls only while a game is actually live. The rest of the time it's still and fast. |
| 🎨 Make it yours | 7 accent themes, corner roundness, density, motion & glow toggles, a custom greeting, default league, and per-section visibility. |
| 🔐 Real accounts | Supabase email + password auth with confirmation, Row-Level Security, and cross-device sync. |
| 📊 Stats with shape | Season-trend charts, output sparklines, recent form, and league-ranked player numbers. |
| 🌒 Considered everywhere | Loading, empty & error states on every surface; mobile-first; honors prefers-reduced-motion. |
🚀 Quick start
git clone https://github.com/germanndarian/frontrow.git
cd frontrow
npm install
cp .env.example .env.local # add the two public Supabase values (below)
npm run dev # → http://localhost:3000
npm run build && npm run start # production build · Node 18.18+ (built on 24)
🔑 Environment
ESPN needs no API key — it's read through keyless public endpoints, server-side.
Accounts need Supabase: in production the Vercel integration injects everything;
for local dev, add the two browser-safe values to .env.local.
| Variable | Purpose | Required |
|---|
NEXT_PUBLIC_SUPABASE_URL | Supabase project URL | ✅ |
NEXT_PUBLIC_SUPABASE_ANON_KEY | Public anon key (RLS-guarded) | ✅ |
SUPABASE_SERVICE_ROLE_KEY | Server-only — account deletion | — |
NEXT_PUBLIC_LIVE_POLL_MS | Live-game refresh cadence | 30000 |
NEXT_PUBLIC_USE_MOCK | Run fully offline on the demo dataset | false |
Apply the schema once from supabase/migrations/0001_init.sql
(Supabase → SQL Editor) — it creates profiles / preferences / settings,
Row-Level Security so a user only ever touches their own rows, and a trigger that
seeds defaults on signup.
🧱 How it works
┌───────────────┐ ┌─────────────────────┐ ┌──────────────┐
Browser ──▶│ /api/* handlers│ ──▶ │ ESPN (cached · 8s │ ──▶ │ normalizer │ ──▶ UI
│ (server) │ │ timeout · retry-once)│ │ (defensive) │
└───────────────┘ └─────────────────────┘ └──────────────┘
Accounts ─▶ Supabase Auth (cookies · @supabase/ssr) ─▶ Postgres + RLS ◀─ follows & settings
The browser never calls ESPN directly. Each surface is cached server-side
(scoreboard 20s · team/standings/player 5m · teams/rosters 24h) and the client polls
only while a game is live. Every normalizer is defensive, so an upstream field
change degrades to a placeholder instead of a crash.
| Route | Source |
|---|
GET /api/scoreboard?leagues= | {sport}/{league}/scoreboard |
GET /api/team/[id]?league= | team detail + teams/{id}/schedule |
GET /api/standings/[league] | v2/.../standings?level=3 |
GET /api/player/[id]?league= | athletes/{id} + athletes/{id}/gamelog |
GET /api/teams · /api/roster | onboarding selectors |
GET /auth/confirm · DELETE /api/account | email confirm · account deletion |
🛠️ Built with
Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 (OKLCH tokens)
Supabase (Auth · Postgres · RLS) · TanStack Query · Zustand · Motion · Recharts
Vitest · Playwright · GitHub Actions · Vercel (Analytics · Speed Insights)
🗂️ Structure
src/
app/
layout.tsx Fonts + providers + Analytics / Speed Insights
page.tsx Dashboard (auth-gated)
login/ · setup/ Email auth · four-step onboarding
settings/ Profile · appearance · dashboard · follows
auth/confirm/route.ts Email-confirmation handler
api/ ESPN route handlers + /api/account
globals.css OKLCH design tokens, base styles, keyframes
lib/
supabase/ Browser + server clients (@supabase/ssr)
auth.ts · sync.ts Supabase Auth store · follows & settings ⇄ Postgres
store.ts · settings.ts In-memory working state (DB-backed)
espn/ Server-only ESPN integration
leagues.ts · types.ts League config + normalized domain models
components/ dashboard · setup · ui · system · brand
supabase/migrations/ SQL schema + Row-Level Security
✅ Quality
main is protected — nothing merges red. Every PR runs:
npm run lint # ESLint
npx tsc --noEmit # type-check
npm test # Vitest · pure functions in src/lib
npm run e2e # Playwright · every screen, Chromium + WebKit
npm run build # production build
Both suites are hermetic — the browser tests drive the real app against the bundled
demo dataset, so no ESPN and no Supabase. A separate npm run e2e:upstream calls
ESPN for real and stays out of the merge gate, so a third party can't block a
release. Its twice-a-day schedule is paused for now; run it by hand from
Actions → Upstream watch → Run workflow.
Frontrow · unofficial data via ESPN's public endpoints, refreshed as games unfold.
Built for the only seats worth having — front row. 🏟️
