Mapol

The project

Mapol started as a player’s frustration: before every League of Legends match, I was juggling five different sites to check meta trends, win rates per role and viable team compositions. The idea was to pull all of that into a single interactive map, refreshed live from the official Riot Games API, and designed as a pre-game companion.

My role

End-to-end ownership: art direction and Figma mock-ups, React front-end development, and a Symfony back-end acting as the intermediation layer with the Riot API.

Technical decisions

• Symfony as proxy / cache — Riot enforces aggressive rate limits; a home-grown back centralises calls, aggregates data and serves a front-end that never depends directly on a third-party endpoint.
• Variable-granularity caching — champion stats barely change (long cache); player data shifts after every match (short cache). The mix cuts outgoing call volume by an order of magnitude.
• Vector map on the front-end — choosing SVG over canvas lets each zone animate independently and keeps the page crisp at every zoom level.
• Shortened design ↔ code loop — every Figma component has its React counterpart; visual tweaks land in minutes instead of multiple back-and-forth iterations.

Takeaways

Mapol was my first real run-in with a constrained third-party API, and that’s one of the most formative contexts you can work in: you learn to design an architecture that absorbs limits rather than fights them. The project also confirmed that a well-scoped passion project remains one of the best labs to explore a stack in depth.