Unify 4Point Hoops showcase page structure to match standard format

Author: kesku

docs/showcase/4point-Hoops.mdx

@@ -1,78 +1,94 @@
 ---
-title: 4Point Hoops | AI Basketball Analytics & Insights  
-description: Advanced NBA analytics platform that combines live Basketball-Reference data with Perplexity Sonar to deliver deep-dive player stats, cross-season comparisons and expert-grade AI explanations.  
-sidebar_position: 2  
-keywords: [nba, basketball, analytics, ai, perplexity, sonar, sports-data, comparisons]  
+title: 4Point Hoops | AI Basketball Analytics Platform
+description: Advanced NBA analytics platform that combines live Basketball-Reference data with Perplexity Sonar to deliver deep-dive player stats, cross-season comparisons and expert-grade AI explanations
+sidebar_position: 14
+keywords: [4point hoops, nba, basketball, analytics, ai, perplexity, sonar, sports-data, comparisons]
 ---
 
-# 4Point Hoops – AI-Powered NBA Analytics
-
 ![4Point Hoops Dashboard](https://d112y698adiu2z.cloudfront.net/photos/production/software_photos/003/442/047/datas/original.png)
 
-4Point Hoops turns raw NBA statistics into **actionable, narrative-driven insights**. By scraping Basketball-Reference in real time, cleansing the data and routing context-rich prompts to Perplexity’s *sonar-pro* model, it lets fans, analysts and fantasy players *understand the “why” and “what’s next” – not just the numbers*.
-
-[![Demo Video](https://img.youtube.com/vi/lThCWq0ij7k/hqdefault.jpg)](https://youtu.be/lThCWq0ij7k)
-
-## What 4Point Hoops Does
-
-- **Player analytics** – season & playoff splits, shot-type breakdowns and performance radar for any NBA player  
-- **Cross-era comparisons** – e.g. *Michael Jordan ’97 vs. Stephen Curry ’22* side-by-side, stat-for-stat  
-- **Team dashboards** – standings, playoff-probability Sankey flows and KPI tiles that auto-refresh daily  
-- **AI Explain & Similar Players** – one-click Sonar explanations of a stat line or AI-picked comparable athletes  
-- **Basketball AI Chat** – ask an expert LLM anything about NBA history, rosters or projections  
-- **Credit-based SaaS plumbing** – Firebase Auth + Realtime DB manage sign-up, Google login, credit wallets, admin tooling and feedback inbox  
-
-![AI Explain Modal](https://d112y698adiu2z.cloudfront.net/photos/production/software_photos/003/442/042/datas/original.png)
-
-## How It Uses Perplexity Sonar
-
-```python
-# Inline “AI Explain” for a selected player/season
-payload = {
-    "model": "sonar-pro",
-    "messages": [
-        {
-            "role": "user",
-            "content": (
-                "Explain Giannis Antetokounmpo's 2021 playoff stats in plain English. "
-                "Highlight shooting efficiency and defensive impact."
-            )
-        }
-    ],
-    "response_format": {"type": "text"}
-}
-explanation = client.chat.completions.create(**payload)
-
-# Free-form chat endpoint
-chat = client.chat.completions.create(
-    model="sonar-pro",
-    messages=[
-        {"role": "system", "content": "You are an NBA analytics expert."},
-        {"role": "user", "content": "Who were the top 5 players in PER last season and why?"}
-    ]
-)
+**4Point Hoops** is an advanced NBA analytics platform that turns raw basketball statistics into actionable, narrative-driven insights. By scraping Basketball-Reference in real time and routing context-rich prompts to Perplexity's Sonar Pro model, it helps fans, analysts, and fantasy players understand the "why" and "what's next" – not just the numbers.
+
+<iframe
+  className="w-full aspect-video rounded-xl"
+  src="https://www.youtube.com/embed/lThCWq0ij7k"
+  title="YouTube video player"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
+
+## Features
+
+* **Player Analytics** with season & playoff splits, shot-type breakdowns, and performance radar for any NBA player
+* **Cross-Era Comparisons** enabling side-by-side stat comparisons (e.g., Michael Jordan '97 vs. Stephen Curry '22)
+* **Team Dashboards** with standings, playoff-probability Sankey flows, and auto-refreshing KPI tiles
+* **AI Explain & Similar Players** providing one-click Sonar explanations of stat lines and AI-picked comparable athletes
+* **Basketball AI Chat** allowing users to ask an expert LLM about NBA history, rosters, or projections
+* **Credit-Based SaaS System** with Firebase Auth, Google login, credit wallets, and admin tooling
+
+## Prerequisites
+
+* Node.js 16+ and npm
+* Python 3.8+ and pip
+* Firebase project setup
+* Perplexity API key (Sonar Pro)
+* Basketball-Reference access
+
+## Installation
+
+```bash
+# Clone the frontend repository
+git clone https://github.com/rapha18th/hoop-ai-frontend-44.git
+cd hoop-ai-frontend-44
+npm install
+
+# Clone the backend repository
+git clone https://github.com/rapha18th/4Point-Hoops-Server.git
+cd 4Point-Hoops-Server
+pip install -r requirements.txt
 ```
 
-- **Context packing** – the backend injects cleaned, season-filtered DataFrames into the prompt so Sonar reasons over *actual* numbers.  
-- **Credit guard** – every AI call passes through `credit_required()` middleware that checks Firebase balance before deducting a point and logging the query.  
+## Configuration
 
-## Tech Stack
+Create `.env` file in the backend directory:
+```ini
+PERPLEXITY_API_KEY=your_sonar_pro_api_key
+FIREBASE_PROJECT_ID=your_firebase_project_id
+FIREBASE_PRIVATE_KEY=your_firebase_private_key
+FIREBASE_CLIENT_EMAIL=your_firebase_client_email
+```
 
-| Layer            | Tech                                         |
-|------------------|----------------------------------------------|
-| Frontend         | React + shadcn/ui, Recharts (Netlify deploy) |
-| Backend/API      | Python Flask (Hugging Face Spaces)           |
-| Data Pipeline    | BRScraper → cleanse → Firebase cache         |
-| Auth & Storage   | Firebase Auth + Realtime Database            |
-| AI Integration   | Perplexity Sonar-Pro, Pollinations TTS       |
-| DevOps           | Docker, GitHub Actions                       |
+## Usage
 
-## Links
+1. **Start Backend**:
+   ```bash
+   cd 4Point-Hoops-Server
+   python app.py
+   ```
+
+2. **Start Frontend**:
+   ```bash
+   cd hoop-ai-frontend-44
+   npm run dev
+   ```
+
+3. **Access Application**: Open the frontend URL and explore NBA analytics with AI-powered insights
 
-- **Frontend Repo** – <https://github.com/rapha18th/hoop-ai-frontend-44>  
-- **Backend Repo** – <https://github.com/rapha18th/4Point-Hoops-Server>  
-- **Live Demo** – <https://4pointhoops.netlify.app/>  
-- **Devpost Story** – <https://devpost.com/software/4point-hoops>  
-- **Video Walk-through** – <https://youtu.be/lThCWq0ij7k?si=TcLA6oP7nkhjHmjq>
+4. **Use AI Features**: Click "AI Explain" on any player or stat to get intelligent analysis powered by Perplexity Sonar
+
+## Code Explanation
+
+* **Frontend**: React with shadcn/ui components and Recharts for data visualization
+* **Backend**: Python Flask API serving Basketball-Reference data and managing Perplexity API calls
+* **Data Pipeline**: BRScraper for real-time data collection with Firebase caching
+* **AI Integration**: Perplexity Sonar Pro for intelligent basketball analysis and explanations
+* **Authentication**: Firebase Auth with Google login and credit-based access control
+* **Deployment**: Frontend on Netlify, backend on Hugging Face Spaces with Docker
+
+## Links
 
-*Built with ❤️ by Rairo Mukamuri.*
+- [Frontend Repository](https://github.com/rapha18th/hoop-ai-frontend-44)
+- [Backend Repository](https://github.com/rapha18th/4Point-Hoops-Server)
+- [Live Demo](https://4pointhoops.netlify.app/)
+- [Devpost Submission](https://devpost.com/software/4point-hoops)