Inspiration
The inspiration for 4Point Hoops came from our love for sports and the growing demand for advanced sports analytics and personalized insights, particularly in the NBA. Traditional sports statistics websites often present raw data without deeper context or comparative analysis. We wanted to create a platform that not only provides comprehensive data but also leverages AI to offer intelligent explanations, projections, and comparisons — making complex basketball analytics accessible and actionable for fans, analysts, and fantasy players alike. The goal was to move beyond just showing numbers to truly understanding the "why" and "what's next" in player and team performance.
What it does
4Point Hoops is an NBA analytics hub that offers a suite of tools for in-depth basketball analysis. It allows users to:
Player Analytics: Retrieve and visualize per-game and playoff statistics for individual players across multiple seasons.
Player Comparison: Compare two players' statistics side-by-side, either in the same season or across different historical seasons (e.g., Michael Jordan's 1997 season vs. Stephen Curry's 2022 season).
Team Analytics: View and compare team standings and key performance indicators for selected teams in a given season.
AI-Powered Explanations: Get AI-generated explanations and insights for any displayed data or comparison, providing context and deeper understanding.
AI Chat: Engage in a conversational chat with an NBA expert AI to ask questions about players, teams, historical events, and more.
User & Credit Management: A robust system for user authentication (email/password, Google Sign-In), credit management (initial credits, credit deduction for AI features, credit requests), and an admin dashboard for managing users and requests.
Analysis History: Users can view and manage their past AI-generated analyses and play back narration of an analysis via Pollinations AI + OpenAI Audio API.
How we built it
4Point is built as a full-stack application with a React frontend and a Flask backend, leveraging Google Firebase for user management and data storage.
Frontend: Developed with React(with significant help from lovable.dev), utilizing Shadcn UI for a modern and responsive user interface. Recharts library is used for dynamic and interactive data visualizations (bar charts, radar charts, composed charts).
Backend: A Python Flask API serves as the core logic.
Data Scraping: BRScraper is used to efficiently pull up-to-date NBA statistics and historical data from Basketball-Reference.com.
AI Integration: Perplexity AI’s API (sonar-pro model) is integrated to provide intelligent explanations, chat responses, and advanced analytical insights.
TTS: Pollinations AI + OpenAI Audio API
Database: Google Firebase Realtime Database is used for:
- Storing user profiles (credits, admin status, suspension status).
- Caching scraped NBA data to reduce redundant external API calls and improve performance.
- Storing user-specific AI analysis history and chat logs.
- Managing credit requests and feedback.
Authentication: Firebase Authentication handles user registration, login, and token verification. Firebase Admin SDK is used on the backend to verify user tokens and manage custom claims for admin roles.
Deployment: The backend Flask API is deployed on Hugging Face Spaces, providing a scalable and accessible environment. React frontend on Netlify.
Challenges we ran into
BRScraper Data Consistency: Basketball-Reference.com's HTML structure and data presentation can vary slightly across different tables or seasons (e.g., team names with playoff seeds, different column headers for similar stats). This required extensive data cleaning and standardization on the backend to ensure consistent data for the frontend and Firebase storage.
Firebase Key Restrictions: Firebase Realtime Database has strict rules for valid JSON keys (no ., $, #, [, ], /, or empty strings). Many column names from scraped DataFrames contained these characters (e.g., W/L%, PS/G). Implementing a robust clean_firebase_keys function was crucial.
BRScraper API Changes/Limitations: Discovering that nba.get_standings() did not support the rename=False argument, and that nba.get_stats() would report "not a valid season" for current/incomplete seasons or due to network issues, required careful debugging and adaptation of the scraping logic.
Frontend-Backend Data Synchronization: Ensuring the frontend correctly interpreted the backend's JSON structure, especially after data cleaning and renaming, was an iterative process. Debugging empty charts or "Unknown" labels often came down to a mismatch in expected vs. actual JSON keys.
Authentication and Authorization Flow: Implementing secure user authentication with Firebase ID tokens and then correctly verifying these tokens and custom claims (is_admin) on the backend for credit deduction and admin access required careful attention to detail.
Managing Asynchronous Operations: Handling loading states, errors, and partial data gracefully across multiple asynchronous API calls in React was a continuous challenge.
Accomplishments that we're proud of
Seamless AI Integration: Successfully integrating Perplexity AI to provide meaningful, context-aware insights and conversational capabilities, transforming raw data into actionable intelligence.
Robust Data Pipeline: Building a reliable data pipeline using BRScraper and Firebase caching that efficiently fetches, cleans, and stores large volumes of NBA statistics.
Cross-Season Player Comparison: Implementing the ability to compare players across different historical seasons, a highly requested and complex analytical feature.
Comprehensive User Management: Developing a full-fledged user and credit management system, including admin controls, which is essential for a sustainable SaaS-like application.
Clean and Intuitive UI: Creating a user-friendly and visually appealing React frontend that makes complex analytics accessible to a broad audience.
Overcoming Data Cleaning Hurdles: Successfully tackling the challenges of inconsistent data formats and invalid Firebase keys from external scraping sources.
What we learned
Importance of Defensive Programming: Always anticipate edge cases, invalid inputs, and external API inconsistencies. Robust error handling and data validation are paramount.
Debugging Full-Stack Applications: The value of systematic debugging, using browser developer tools (network tab), detailed backend logging, and isolating components/functions to pinpoint issues.
API Design Best Practices: How to design API endpoints that are intuitive for the frontend to consume, and how to handle optional parameters and partial data gracefully.
Firebase Ecosystem: Deeper understanding of Firebase Authentication, Realtime Database, and Admin SDK for building scalable backend services.
Data Scraping Nuances: The dynamic nature of web scraping and the need for flexible parsing and cleaning strategies to adapt to website changes.
What's next for 4Point
Advanced Player Metrics: Incorporate more advanced statistical metrics (e.g., PER, Win Shares, Box Plus/Minus) from Basketball-Reference.com.
Game-Level Analysis: Add functionality to analyze individual game performances, shot charts, and play-by-play data.
Historical Team Trends: Allow users to visualize team performance trends over multiple seasons.
User-Defined Dashboards: Enable users to customize their dashboards with their preferred charts and data points.
Subscription Tiers: Implement different credit packages and subscription models.
Notifications System: Expand the notification system to include personalized alerts for users (e.g., player milestones, team performance alerts).
Improved AI Context: Enhance the AI's ability to pull specific, real-time data into its explanations and chat responses directly from the scraped data and personalize to user preferences ie favorite players and teams
Other sports, probably 4Goal football.
Log in or sign up for Devpost to join the conversation.