NBA live stats dashboard + AI predictions + media takes feed. Stack: Next.js 14 · FastAPI · Gemini 1.5 Flash · Supabase · Upstash Redis · XGBoost · balldontlie
Follow these steps to spin up the entire Full Stack application, complete with Live Data ingestion and the Machine Learning prediction pipeline.
- Create a free project at supabase.com.
- Go to SQL Editor and run the full SQL block from
prompt.mdto create the tables (games,predictions,player_cards,media_takes, etc.). - Copy your Project URL and service_role key from Settings → API.
- Create a free Redis database at upstash.com.
- Copy the UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN.
Navigate to the backend directory and set up your environment:
cd backend
cp .env.example .envFill in the following values in your new .env file:
GEMINI_API_KEY: Your Google Gemini API Key.SUPABASE_URL: Your Supabase Project URL.SUPABASE_SERVICE_KEY: Your Supabase Service Role Key.UPSTASH_REDIS_REST_URL: Your Upstash REST URL.UPSTASH_REDIS_REST_TOKEN: Your Upstash REST Token.
Navigate to the frontend directory:
cd frontend
cp .env.local.example .env.localFill in the following values:
NEXT_PUBLIC_API_URL:http://localhost:8000(for local development)NEXT_PUBLIC_SUPABASE_URL: Your Supabase Project URL.NEXT_PUBLIC_SUPABASE_ANON_KEY: Your Supabase Anon Key.
To power the AI and ML models, you need to install the dependencies, fetch the real historical data, and train the XGBoost models. 1. Install Python Dependencies
cd backend
pip install -r requirements.txt2. Bootstrap Database Tables Fetch all current NBA players and the last 3 seasons of historical game data necessary to train the AI:
python -m app.scripts.bootstrap_players
python -m app.scripts.bootstrap_historical3. Train the ML Pipeline
Run the XGBoost training script. This will extract the 15 requested feature sets from the historical database and generate the model artifacts (saved in app/ml/artifacts/):
python -m app.ml.train4. Run the API Server Start the FastAPI background scheduler and live endpoints:
uvicorn app.main:app --host 0.0.0.0 --port 8000 --reloadYou can verify it's running cleanly by checking: http://localhost:8000/health
Now that the backend is streaming live predictions, spin up the React interface:
cd frontend
npm install
npm run devFrontend runs at: http://localhost:3000
| Method | Route | Description |
|---|---|---|
| GET | /health |
API and ML Model loaded status |
| GET | /api/games |
Today's live NBA games (Hit balldontlie → Cache → DB) |
| GET | /api/predictions/{game_id} |
XGBoost AI prediction for a specific game |
| POST | /api/player-card |
Gemini-powered AI scouting report for a player |
| GET | /api/takes |
Live feed of all media takes |
| POST | /api/takes/vote |
Vote agree/disagree on a media take |
| POST | /api/admin/trigger-ingest |
Manually run the APScheduler live ingest job |
| POST | /api/admin/trigger-retrain |
Manually run the XGBoost retraining job |
- Push your repository to GitHub.
- Create a new Railway project → connect repo → set root to
backend/. - Load all backend environment variables (
GEMINI_API_KEY, etc.) into Railway. - Railway will auto-detect the provided
railway.tomland runuvicorn.
- Create a Vercel project → connect repo → set root to
frontend/. - Load all frontend environment variables. Ensure
NEXT_PUBLIC_API_URLpoints to your active Railway domain. - Deploy!