MLB Player Stats Dashboard

A lightweight player stats dashboard built with vanilla JavaScript and the Highlightly Baseball API. Search any MLB or NCAA player, view their batting and pitching stats, chart career trends, inspect game-day box scores, and compare two players side by side.

Features

• Player search - debounced search across all MLB and NCAA players
• Profile card - photo, position, team badge, height, weight, jersey, active status
• Season stats - batting and pitching tables with season/breakdown selector
• Career chart - Chart.js bar chart for any stat across seasons (home runs, ERA, hits, etc.)
• Box scores - pick from the team's last five finished games and see the player's individual batting/pitching line alongside match context (score, venue, date)
• Player comparison - side-by-side stat grid with green highlighting on the leading value per row, directional awareness for stats where lower is better (ERA, walks allowed, etc.)
• Rate limit indicator - displays remaining daily API requests from response headers
• In-memory cache - avoids redundant API calls when switching between tabs

Prerequisites

• Node.js v18 or newer
• A Highlightly API key - sign up at highlightly.net or via RapidAPI

Getting started

git clone <repo-url>
cd mlb-dashboard
npm install
npm start

Open http://localhost:3000 in your browser and enter your API key when prompted. The key is stored in localStorage so you only need to enter it once per browser.

Project structure

mlb-dashboard/
├── server.js             # Express static file server
├── package.json
├── index.html            # Single-page app shell
├── styles.css            # All styles (dark theme, responsive)
├── js/
│   ├── api.js            # Fetch functions, caching, rate limit events
│   ├── playerCard.js     # Player profile card renderer
│   ├── statsTable.js     # Season stats tables (batting & pitching)
│   ├── careerChart.js    # Chart.js career trend visualisation
│   ├── boxScore.js       # Match-day box score with game picker
│   ├── comparison.js     # Side-by-side player comparison
│   └── app.js            # Main controller, routing, tab management
└── assets/
    └── placeholder.png   # Fallback player silhouette

API endpoints used

Endpoint	Purpose
GET /players	Search players by name
GET /players/{id}	Full player profile
GET /players/{id}/statistics	Per-season batting and pitching stats
GET /box-scores/{matchId}	Per-player game-day statistics
GET /matches/{matchId}	Match context (score, venue, weather)
GET /last-five-games	Recent finished games for a team

All requests go to https://baseball.highlightly.net with an x-rapidapi-key header. Full documentation at highlightly.net/documentation/baseball.

Configuration

Variable	Default	Description
PORT	3000	Server port (set via environment variable)

The API key is entered through the browser UI and stored client-side. No server-side environment variables are required.

License

MIT