À la une
Mapol
Carte interactive du jeu League of Legends, alimentée en temps réel par l'API officielle Riot Games.
- Rôle
- Développeur Full-Stack & Design
- Période
- 2022
- Stack
- React · Symfony · Riot Games API · Figma
Le projet
Mapol est né d’une frustration de joueur : avant chaque partie de League of Legends, il fallait jongler entre cinq sites pour vérifier les tendances de méta, les win rates par rôle et les compositions viables. L’idée a été de rassembler tout ça sur une seule carte interactive, mise à jour en direct depuis l’API officielle de Riot Games, pensée comme un compagnon de pre-game.
Mon rôle
J’ai porté le projet de bout en bout : direction artistique et maquettes Figma, développement du front React et conception du back Symfony qui fait office de couche d’intermédiation avec l’API Riot.
Décisions techniques
- Symfony en proxy / cache — l’API Riot impose des rate limits agressifs ; un back maison permet de centraliser les appels, d’agréger les données et de servir un front sans jamais dépendre directement d’un endpoint tiers.
- Cache à granularité variable — les stats de champions changent rarement (cache long), les données de joueur évoluent à chaque partie (cache court). Ce mix divise par dix le volume d’appels sortants.
- Carte vectorielle côté front — choisir une représentation SVG plutôt qu’un canvas permet d’animer chaque zone indépendamment et de garder une page nette à tous les niveaux de zoom.
- Itération design ↔ code raccourcie — chaque composant Figma a son équivalent React ; les ajustements visuels se font en quelques minutes au lieu de plusieurs allers-retours.
Ce que j’en retiens
Mapol a été ma première vraie expérience avec une API tierce contrainte, et c’est l’un des contextes les plus formateurs qui soit : on apprend à concevoir une architecture qui amortit les limites au lieu de les subir. Le projet m’a aussi confirmé qu’un produit “passion”, bien cadré et limité dans son scope, reste l’un des meilleurs laboratoires pour explorer une stack en profondeur.