A minimal Next.js app that displays a season-based rank leaderboard. It works out-of-the-box using deterministic mock data and can connect to a real backend if environment variables are provided.
- Install deps and run the dev server
npm install
npm run devThen open http://localhost:3000
- Use the UI
- Select a season from the dropdown.
- Optionally turn on the Live toggle to auto-refresh the ranks every 5 seconds.
- Use the user dropdown to highlight a player in the list.
By default the app uses mocked data so you can run it without any external services.
- Seasons endpoint: GET /api/rumble/season
- Ranking endpoint: POST /api/rumble/season/rank with body { "seasonId": string }
If TENNO_SERVICE is not set or upstream calls fail, the app returns:
- Two example seasons with realistic date ranges.
- A deterministic list of ~150 players per season with scores and ranks.
Provide these environment variables to fetch real data:
- TENNO_SERVICE: base URL of the backend service, e.g. https://example.com
- TENNO_TOKEN: bearer token for the service (optional depending on your backend)
The app will call:
- POST ${TENNO_SERVICE}/rumble/list → seasons
- POST ${TENNO_SERVICE}/rumble/ranking with body { id: seasonId } → ranking
If the calls fail, the app gracefully falls back to mock data.
- Middleware injects x-origin so server components can construct absolute URLs for internal API calls.
- Frontend uses @tanstack/react-query for fetching ranks on the client, with optional polling when Live is enabled.
- Styling uses Tailwind CSS.
- Supports light and dark themes. Use the theme toggle in the header; your choice is remembered. The app also respects your system preference on first load.