The problem
Arena is League of Legends' small-team, round-based mode, and the usual stats sites barely cover it. A group of friends wanted to see their season the way Spotify Wrapped shows a year of music: what they played, how they won, who they won with. Riot's API only hands out raw match data, a request at a time, under strict rate limits.
What I built
A Next.js 16 site where anyone can search a Riot ID and get a recap hub: a story-style wrap, a one-screen dashboard, achievements, a deep dive and share cards, plus leaderboards and per-champion pages. Behind it, a Fastify API reads only from our own Postgres database, which a crawler keeps filling with Arena matches. A separate gateway service is the only process that holds the Riot keys; it enforces each key's rate limits and serves requests through priority buckets, so a visitor's first fetch is never stuck behind the crawler.
Technical challenges
- Rate limits as the main constraint. The crawler only does discovery, and every change to it is judged by matches stored per Riot call.
- A mode that changes under you. Arena moved from teams of two to teams of three, and Riot has changed its queue ids. Team size, team count and queue ids are always read from each match, never hardcoded.
- Storage. Pages read a trimmed schema that stores only what a page shows. Riot's full payloads are compressed into a separate archive database, so any dropped field can be derived again later.
- Bad data. Some lobbies report impossible damage numbers. Those games are flagged and kept out of achievements and leaderboards.
- Privacy. Riot's internal player ids and raw error messages never reach a visitor.
Outcome
The site is deployed and used by the friend group, with open Riot ID search, leaderboards, a full achievement set and shareable cards. Next is a public launch on a production Riot key.
