MLB Predictions Dashboard

A real-time MLB predictions dashboard powered by the Highlightly Baseball API.

Quick Start

npm install
npm start

Then open http://localhost:3000 in your browser, enter your API key, and pick a date during MLB season.

That's it. Three commands, zero config.

Getting an API Key

• Go to highlightly.net
• Create a free account
• Copy your API key from the dashboard

Project Structure

mlb-predictions/
├── server.js                       Express server
├── package.json                    Dependencies
├── README.md                       This file
│
└── public/                         Static files (served by Express)
    ├── index.html                  Shell - loads CDN scripts + all modules
    │
    ├── css/
    │   └── styles.css              CSS variables, keyframes, base styles
    │
    └── js/
        ├── app.jsx                 Root <App/> - routing, date state, filters
        │
        ├── api/
        │   ├── client.js           apiFetch() wrapper, base URL, key validation
        │   ├── matches.js          fetchMatches(), fetchDetail()
        │   ├── odds.js             fetchOdds()
        │   └── teams.js            fetchLastFive(), fetchH2H()
        │
        ├── parsers/
        │   ├── predictions.js      parseProbStr(), parseSinglePred(), parseAllPreds()
        │   ├── matches.js          parseTeam(), parseScore(), parseStatus()
        │   ├── odds.js             parseOdds()
        │   ├── form.js             parseFormArr()
        │   └── h2h.js              parseH2HData()
        │
        ├── components/
        │   ├── GameCard.jsx        Main card - collapsed + expanded + polling
        │   ├── PredictionChart.jsx Chart.js probability timeline
        │   ├── PredBar.jsx         Home vs away probability bar
        │   ├── OddsTable.jsx       Bookmaker odds grid
        │   ├── FormBadge.jsx       W/L/D last-5 badges
        │   ├── H2HBar.jsx          Head-to-head split bar
        │   ├── TypeBadge.jsx       PREMATCH / LIVE pill
        │   ├── TeamLogo.jsx        Logo image with fallback
        │   └── KeyScreen.jsx       API key entry + validation
        │
        └── utils/
            ├── formatting.js       timeAgo(), fmtTime(), fmtShort(), fmtOdd()
            ├── dates.js            todayStr(), shiftDate()
            └── confidence.js       confTier()

API Endpoints Used

Endpoint	Purpose
GET /matches?date=YYYY-MM-DD	Fetch all games for a given date
GET /matches/{matchId}	Detailed match info with predictions, venue, forecast, plays
GET /odds?matchId={id}	Bookmaker odds - Home/Away, Over/Under, Asian Handicap (paid plans)
GET /last-five-games?teamId={id}	Last 5 finished games for a team
GET /head-2-head?teamIdOne=&teamIdTwo=	Last 10 head-to-head meetings
GET /standings?leagueType=MLB&year=2026	League standings
GET /teams?league=MLB	Team lookup (used for API key validation)

Base URL: https://baseball.highlightly.net

Auth header: x-rapidapi-key: YOUR_API_KEY

Supported leagues: MLB and NCAA only

Features

• Live-first predictions - Shows live prediction probability when available, falls back to prematch
• Probability timeline chart - Chart.js line graph plotting both prematch (dashed) and live (solid) prediction probabilities over time
• Live polling - Automatically re-fetches predictions every 60s for in-progress games, adding new data points to the chart
• Side-by-side comparison - When both prematch and live predictions exist, displays them in a dual-panel layout with a probability shift indicator
• Live Scores - Games in progress show real-time scores with a live indicator
• Odds Comparison - Side-by-side bookmaker odds
• Team Form - Last 5 game results (W/L badges) for both teams
• Head-to-Head - Historical matchup record from the last 10 meetings
• Date Navigation - Date picker, today button, and prev/next day navigation
• Filters - All Games, Live, Upcoming, Final

Tech Stack

• Express.js server (serves static public/ directory)
• React 18 + Babel standalone (loaded from CDN, no build step)
• Chart.js 4.x for probability timeline charts (loaded from CDN)
• Single npm dependency (express), zero build tools
• All modules share state via the window.MLB namespace

Architecture Notes

• No build step - Babel standalone transpiles .jsx files in the browser. This means zero config but slightly slower initial load. For production, consider migrating to Vite or esbuild.
• window.MLB namespace - Since we don't use ES modules (Babel standalone doesn't support import/export for external files), all code registers on the global MLB object. Utils go on MLB.*, API functions on MLB.api.*, parsers on MLB.parsers.*, and components on MLB.components.*.
• Script load order matters - index.html loads scripts in dependency order: utils → API → parsers → components → app → mount.

Documentation

• Baseball API Docs
• Highlightly Blog & Tutorials
• Top Sports APIs Comparison