Aller au contenu
Julien de Magalhaes
Tous les projets
Site webEn ligne2026League of Legends

Arena Journey

Un bilan de saison façon Spotify Wrapped pour le mode Arena de League of Legends

La première diapositive du récap de saison : « Welcome home, summoner », l'icône du profil dans un anneau lumineux, et « Your 2026 Arena season » sous le nom de l'invocateur.

Le problème

Arena est le mode de League of Legends en petites équipes et en manches, et les sites de statistiques habituels le couvrent à peine. Un groupe d'amis voulait revoir sa saison comme Spotify Wrapped résume une année de musique : ce qu'ils ont joué, comment ils ont gagné, avec qui. L'API de Riot ne fournit que des données de match brutes, une requête à la fois, sous des limites de débit strictes.

Ce que j'ai construit

Un site Next.js 16 où chacun peut chercher un Riot ID et accéder à un espace de bilan : un récit façon story, un tableau de bord sur un seul écran, des succès, une analyse détaillée et des cartes à partager, plus des classements et des pages par champion. Derrière, une API Fastify ne lit que notre propre base Postgres, qu'un crawler remplit de matchs Arena. Un service passerelle distinct est le seul processus à détenir les clés Riot : il applique les limites de chaque clé et sert les requêtes par niveaux de priorité, pour qu'un visiteur ne reste jamais bloqué derrière le crawler.

Défis techniques

  • Les limites de débit comme contrainte principale. Le crawler ne fait que de la découverte, et chaque modification est jugée au nombre de matchs stockés par appel à Riot.
  • Un mode qui change. Arena est passé d'équipes de deux à des équipes de trois, et Riot a modifié ses identifiants de file. Ces valeurs sont toujours lues dans chaque match, jamais codées en dur.
  • Le stockage. Les pages lisent un schéma allégé qui ne garde que ce qui est affiché. Les données complètes de Riot sont compressées dans une base d'archive séparée, d'où tout champ abandonné peut être recalculé.
  • Les données aberrantes. Les matchs aux dégâts impossibles sont signalés et exclus des succès et des classements.
  • La confidentialité. Les identifiants internes des joueurs et les messages d'erreur bruts de Riot n'atteignent jamais un visiteur.

Résultat

Le site est en ligne et utilisé par le groupe d'amis, avec recherche ouverte par Riot ID, classements, une collection complète de succès et des cartes à partager. Prochaine étape : un lancement public avec une clé Riot de production.

  • La page d'accueil d'Arena Journey : le titre sur un fond sombre de l'Arène, la recherche d'invocateur, les actualités et un classement King of the Ring avec son podium, et le nombre de parties et d'invocateurs analysés.
  • Le hub de saison d'un invocateur : l'icône et le niveau du profil, les dates de la saison 2026, et cinq cartes vers le récap, les succès, le tableau de bord, les classements et l'analyse détaillée.
  • La première diapositive du récap de saison : « Welcome home, summoner », l'icône du profil dans un anneau lumineux, et « Your 2026 Arena season » sous le nom de l'invocateur.
  • Le tableau de bord de la saison sur un seul écran : les chiffres clés et une barre des places, un graphique de la place de chaque partie, deux calendriers des parties et du meilleur résultat par jour, l'horloge des heures de jeu, et les tableaux des résultats et des emplacements d'équipe.
  • La page des succès : 4 665 points avec un graphique de leur progression sur la saison, le niveau de parangon, l'avancement par catégorie, et les succès récents, presque atteints et les plus rares.