A modern web dashboard for tracking and analyzing Marvel Rivals player statistics. This application allows you to search for players, view their ranked and unranked hero statistics, analyze hero roles, and track match history.

• 🎮 Player Search: Look up any Marvel Rivals player by username
• 📊 Hero Statistics: View detailed stats for each hero played (ranked and unranked)
• 🎯 Role Analysis: Visualize hero distribution by role (Vanguard, Duelist, Strategist)
• 📈 Hero Popularity: See which heroes you play most with interactive charts
• 🔄 Live Updates: Refresh player statistics with rate limiting (30-minute cooldown)
• ⚡ Smart Caching: Session-based caching for faster subsequent loads
• 🎨 Modern UI: Built with Tailwind CSS and React with smooth animations

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• API: marvelrivalsapi npm package

Before you begin, ensure you have:

• Node.js 18.17 or later
• npm or yarn package manager
• An API key from https://marvelrivalsapi.com/

1. Clone the repository (or extract the project files):

   cd marvel-rivals-dashboard

2. Install dependencies:

   npm install

3. Set up environment variables:

   • Copy .env.example to .env:

     cp .env.example .env

   • Open .env and replace the placeholder with your actual API key:

     MARVEL_RIVALS_API_KEY=your_actual_api_key_here

Start the development server with:

npm run dev

The application will be available at http://localhost:3000

To access the dev server from other machines on your network, the dev script already binds to 0.0.0.0. Access it using your machine's IP address or hostname (e.g., http://<your-ip>:3000).

For local-only development:

npm run dev:local

HMR is enabled by default for fast development refresh. WSL/Docker users are covered by polling-based file watching.

1. Search for a player on the home page
2. View statistics for ranked/unranked heroes
3. Filter by role and explore charts
4. Toggle Ranked/Unranked view
5. Update Player to refresh data (cooldown applies)

npm run build
npm start

app/
├── page.tsx                 # Home page with player search
├── player/
│   └── [player]/
│       └── page.tsx         # Player stats page
├── api/
│   └── player/
│       ├── [player]/
│       │   ├── route.ts     # Get player stats
│       │   ├── match-history/route.ts
│       │   └── update/route.ts
│       └── heroes/route.js
├── components/
│   ├── HeroRolePieChart.tsx
│   ├── HeroPlayedPieChart.tsx
│   ├── LoadingScreen.tsx
│   ├── Navbar.tsx
│   ├── PieChart.tsx
│   └── pieChartUtils.ts
└── globals.css

MARVEL_RIVALS_API_KEY=your_api_key_here
MARVEL_RIVALS_API_VERSION=v1
# OPTIONAL: HMR/network tweaks
# NEXT_PUBLIC_VERCEL_URL=localhost:3000
WATCHPACK_POLLING=true
CHOKIDAR_USEPOLLING=1

Build and run the app behind nginx (serving on port 80 in the container):

# Build the image
docker build -t marvel-rivals-dashboard .

# Run with your env file
docker run -p 8080:80 --env-file .env marvel-rivals-dashboard

Then open http://localhost:8080

The image runs Next.js (port 3000) and proxies through nginx (port 80). To change the external port, adjust the -p mapping. Add or override env vars (e.g., MARVEL_RIVALS_API_VERSION=v2) with -e flags or your env file.

• GET /api/player/[username] — Fetch player statistics
• POST /api/player/[username]/update — Force refresh
• GET /api/player/heroes — List heroes

• Match history visualization
• Team comparison
• Leaderboards
• Export as image/PDF

This project is provided as-is for personal use.