A full-stack sports analytics dashboard designed to visualize, compare, and export WNBA player statistics. Built with a modern "Bento Grid" UI, this application allows scouts and fans to search for players, view career totals, compare head-to-head metrics, and generate downloadable PDF reports.
- Advanced Player Search: Real-time search functionality connecting a React frontend to a SQL Server database via a Python/Flask REST API.
- Dynamic Bento Grid UI: A fully responsive, modern glassmorphism interface built with pure CSS (No Bootstrap or Tailwind).
- Head-to-Head Comparison: Select any two players to unlock a dynamic "Tug-of-War" comparison chart, complete with color-coded data visualization.
- Live Efficiency Leaderboard: A dedicated view that runs complex SQL aggregations to calculate and rank the top 10 players in the league based on their current season's performance.
- Exportable Scout Reports: Integrated
html2canvasandjsPDFto allow users to capture the dashboard state and instantly download a formatted PDF for sharing.
Frontend:
- React 18 (TypeScript)
- HTML5 / Custom CSS3 (CSS Grid, Flexbox, Media Queries)
- html2canvas & jsPDF (Client-side report generation)
Backend:
- Python 3
- Flask & Flask-CORS (REST API generation)
- PyODBC (Database connection pooling)
Database:
- Microsoft SQL Server
- Complex multi-table joins (
Fact_Player_Stats,Dim_Players,Dim_Teams,Dim_Dates)
Instead of relying on pre-calculated data, this application computes the standard basketball Efficiency (EFF) rating dynamically on the server side using the formula:
(PTS + REB + AST + STL + BLK) - ((FGA - FGM) + TOV)
By aggregating this math across multiple tables using SQL MAX() and AVG() functions, the app guarantees that the Top 10 Leaderboard is always perfectly in sync with the individual player cards.
Initially prototyped with third-party charting libraries, the application was refactored to use a custom-built, DOM-based comparison chart. This eliminated "White Screen of Death" rendering crashes and dramatically reduced the project's dependency footprint, ensuring 100% reliability.
- Clone the repository:
git clone [https://github.com/yourusername/wnba-scout-dashboard.git](https://github.com/yourusername/wnba-scout-dashboard.git)