shipped
2023
League of Legends Champions
A champion browser for League of Legends, where every champion is a Yu-Gi-Oh!-style trading card built from Riot's live game data.
Overview
Every one of the game's ~173 champions gets its own page — stats, abilities, ally and enemy tips, and lore — and the whole thing is a static export. There is no server and no client-side fetching: the roster is pulled from Riot's Data Dragon CDN at build time and one HTML page is prerendered per champion.
The patch version is not pinned. An earlier version of this app hardcoded it, which quietly froze the roster two years behind the live game and left the spell art on a different patch than the data. Now a memoised lookup reads Riot's version manifest once per build and feeds the current patch into every data and image URL, so a rebuild picks up champions released since the last deploy. Every fetch checks its response, so an outage upstream fails the build rather than exporting an empty site.
The design borrows from Yu-Gi-Oh!: each champion is a card with portrait, class icons, title and four stat ratings, drawn strictly from the palette Riot publishes on its brand site. It was originally built in 2023 on Next.js 13 and Chakra UI v2, and rebuilt in 2026 on Next.js 16, React 19 and Chakra UI v3.
Highlights
▸
Roster tracks the live game — the patch is resolved at build time instead of pinned, so new champions appear on the next rebuild
▸
~173 champion pages prerendered to static HTML, served from Cloudflare Pages with no backend to run
▸
Typed wrappers around Riot's Data Dragon API, so a change in the payload shape is a build error rather than a blank page