WNBA Reference

A modern WNBA stat tracker and reference site built as a portfolio project. Dark glassmorphism UI with team-colored accents, player headshots, and full 2025 season data.

Tech Stack

• Frontend: React 18 + Vite + Tailwind CSS v4
• Backend: Express.js serving static JSON data
• Fonts: Bebas Neue (headings) + Inter (body)
• Data Sources: ESPN (player stats, headshots, team logos), Basketball Reference (expanded stats)

Features

• Home Page — Full-screen hero, quick stats bar, top 3 scorers with headshots, league standings with team logos
• Players Page — Searchable/filterable table of 180+ players, sortable columns (click headers), position and team filters, pagination
• Player Detail — Per-game stats, shooting splits (FG/3P/FT with progress bars), 2-point breakdown, rebounding splits (ORB/DRB), team logo link
• Teams Page — All 13 teams in a colored card grid, playoff vs lottery separation, team logos
• Team Detail — Team hero card with glassy team color, team stats (PPG, OPP PPG, diff, FG%, 3P%), full roster with headshots linked to player pages
• Standings — League-wide table, playoff teams highlighted, non-playoff teams dimmed

Data

All data is from the 2025 WNBA season:

• server/data/playerStats.json — 182 players with full per-game stats, ESPN IDs, and headshot URLs
• server/data/standings.json — 13 teams ranked by record

Player Stats Include

PPG, RPG, APG, SPG, BPG, FGM, FGA, FG%, 3PM, 3PA, 3P%, 2PM, 2PA, 2P%, FTM, FTA, FT%, ORB, TOV, PF, GP, GS, MIN

Setup

Prerequisites

• Node.js 18+
• npm

Install & Run

# Clone the repo
git clone https://github.com/yourusername/wnba-reference.git
cd wnba-reference

# Install frontend dependencies
npm install

# Start the Express server (serves JSON data)
cd server
node index.js
# Server runs on http://localhost:3001

# In a new terminal, start the Vite dev server
cd ..
npm run dev
# App runs on http://localhost:5173

Project Structure

wnba-reference/
├── public/
│   └── images/
│       └── WNBARefHero.png
├── server/
│   ├── data/
│   │   ├── playerStats.json
│   │   └── standings.json
│   └── index.js
├── src/
│   ├── components/
│   │   └── Navbar.jsx
│   ├── hooks/
│   │   └── useAPI.js
│   ├── pages/
│   │   ├── HomePage.jsx
│   │   ├── PlayersPage.jsx
│   │   ├── PlayerDetailPage.jsx
│   │   ├── TeamsPage.jsx
│   │   ├── TeamDetailPage.jsx
│   │   └── StandingsPage.jsx
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── vite.config.js
├── tailwind.config.js
└── package.json

Design

• Theme: Dark glassmorphism (bg-slate-950 base)
• Accent: oklch(64.6% 0.222 41.116) (orange)
• Cards: bg-white/[0.04] border border-white/[0.08] for content, team-colored glass for hero cards
• Headshots: ESPN CDN with initials fallback on error
• Team Logos: ESPN CDN (https://espn.com/i/teamlogos/wnba/500/{abbr}.png)
• Team Colors: Per-team accent colors used for card backgrounds, borders, avatar rings, and stat highlights

Notes

• Player headshot URLs use ESPN player IDs: https://espn.com/i/headshots/wnba/players/full/{espn_id}.png
• Players without ESPN IDs (deep bench, short stints) show initials as avatar fallback
• Players who played for multiple teams use their TOT (total) stats assigned to their most recent team
• The 2025 WNBA season had 13 teams (Golden State Valkyries expansion) playing 44 games each
• Las Vegas Aces won the 2025 championship

Built By

Ryan — Northeastern University CS Student