CourtIQ

CourtIQ: Deep-dive NBA analytics, live game tracking, and interactive visualizations.

Comment

Inspiration

As passionate basketball fans and data enthusiasts, we noticed a gap in how NBA statistics are presented to the public. While front offices use incredibly advanced expected-points models and interactive shot charts, the average fan is often stuck staring at plain, cluttered spreadsheets. We wanted to build CourtIQ to bridge that gap—bringing a premium, sleek, and highly interactive analytics dashboard to everyday fans, fantasy players, and analysts alike. We drew inspiration from modern, high-tech UI design to make exploring basketball data not just informative, but visually stunning.

What it does

CourtIQ is a next-generation, full-stack NBA analytics platform. It provides users with:

  • Live Game Tracking & Standings: Real-time updates on daily matchups, scores, and conference standings.
  • Deep Player Profiles: In-depth stats including 2024-25 game logs, career averages, hustle stats, and advanced splits.
  • Advanced Metrics: Automatic calculations for True Shooting Percentage (TS%), Player Efficiency Rating (PER), and Value Over Replacement Player (VORP).
  • Interactive Shot Charts: A visual mapping of a player's shot distribution, calculating Expected FG% (xFG%) and Points Per Shot (PPS) for different zones on the court.
  • Team Dashboards: Roster breakdowns and advanced "Four Factors" team metrics.

How we built it

We built CourtIQ using a modern, decoupled full-stack architecture:

  • Frontend: Built with React and Vite for lightning-fast performance. We focused heavily on the UI/UX, utilizing a dark theme with vibrant neon accents, custom CSS, and responsive layouts to give it a premium feel.
  • Backend: Powered by Python and FastAPI, which handles asynchronous requests and serves data incredibly fast. We used SQLAlchemy for our database ORM to store and manage seeded player data.
  • Data Pipeline & ML: We integrated the nba_api package to fetch real-time data directly from the league. For our shot charts, we built an underlying data pipeline using pandas and numpy to map shot coordinates and apply heuristic models to calculate expected points (xPTS) based on shot distance and court zones.

Challenges we ran into

One of the biggest hurdles was managing the sheer volume and complexity of the NBA's statistical data. Mapping raw coordinate data from the API onto a responsive, visually accurate SVG basketball court required complex math and state management.

Additionally, we ran into edge cases calculating advanced metrics. For example, deriving True Shooting Percentage (TS%) and PER required fetching multiple disparate datasets (general splits, season totals, game logs) and running custom calculations on the backend while fighting against floating-point precision issues to ensure the UI displayed perfectly formatted numbers.

Accomplishments that we're proud of

We are incredibly proud of the Shot Chart and Expected Points (xPTS) model. Taking raw API coordinates, processing them through a backend heuristic model to evaluate shot quality, and rendering them beautifully on the frontend was a massive milestone. We are also proud of the overall aesthetic—we successfully built an interface that handles massive data tables (like Game Logs and Career Splits) without ever feeling cluttered or overwhelming to the user.

What we learned

We gained profound experience in building robust data pipelines. We learned the intricacies of the nba_api, how to efficiently use pandas for backend data manipulation, and how to structure a FastAPI backend to serve heavily nested JSON objects to a React frontend. We also leveled up our UI design skills, learning how micro-animations and color theory (dark mode + neon accents) can dictate user engagement.

What's next for CourtIQ

The future for CourtIQ is bright. We plan to:

  1. Upgrade the xPTS Model: Transition our heuristic shot-quality model into a fully trained Machine Learning model (using XGBoost) to predict shot outcomes based on defender distance and shot clock time.
  2. Predictive Matchups: Implement a feature that predicts game outcomes and player prop lines based on historical team matchups.
  3. WNBA Integration: Expand our data pipelines to include full coverage of the WNBA.
  4. User Customization: Add authentication so users can save their favorite players, track fantasy rosters, and build custom dashboard views.

Built With

Share this project:

Updates