Initialisation · 00:00:00

Tom LEFRERE · Data Scientist

Des données. Un signal.

0%
FR EN

← Portfolio

· css · data · javascript · react · recharts · tailwind · typescript · vite · web

Discord Recap, mon récap annuel reconstitué à ma sauce

Mon propre récap Discord, bien plus complet que l’original, avec des visualisations Recharts et export PDF, en React 19 et TypeScript.

Discord Recap, mon récap annuel reconstitué à ma sauce

Le projet

En faisant mon récap de l’année 2025, je me suis rendu compte que je ne pouvais pas accéder à celui de Discord, parce que je ne partage pas mes données avec eux, et de toute façon, leur récap était assez léger. Du coup, je me suis dit : si cette donnée existe quelque part, il faut que je la récupère et que je l’utilise. J’ai donc monté mon propre système de récap, avec plein d’indicateurs supplémentaires : temps de jeu, nombre de sessions, et bien plus. Le résultat est beaucoup plus intéressant que ce que Discord propose, pour le coup.

Mes contributions

Développement complet de l’application web : interface React avec TypeScript, visualisations interactives avec Recharts, génération de rapports PDF avec jsPDF, et navigation multi-pages avec React Router. L’idée étant de pouvoir exporter un document propre et partageable, pas juste un dashboard éphémère.

Ce que j’ai retenu

Récupérer ses propres données et en faire quelque chose de mieux que la plateforme d’origine, c’est quelque chose de très satisfaisant. React 19 avec TypeScript, pour le coup, offre une expérience de développement très fluide, notamment sur le typage des props et des hooks. Et Recharts combiné à jsPDF permet de créer des rapports visuels exportés proprement, même s’il y a évidemment quelques petites contorsions sur la mise en page PDF.

Contexte

Projet personnel, né de la frustration de ne pas avoir de récap Discord digne de ce nom. Inspiré par le Spotify Wrapped, appliqué à ma communauté Discord. C’est typiquement le genre de truc qui part d’un manque et qui finit en petit outil perso utile.

Voici un extrait du résultat en PDF

Récap Discord 2025, version complète discord-recap-2025.pdf · 233 KB

Technologies utilisées

  • React 19 / React Router DOM

  • TypeScript

  • Vite 7

  • Tailwind CSS 4

  • Recharts

  • jsPDF

  • ESLint

L’image d’illustration a été générée par Nano Banana (Google), parce que je n’ai plus le modèle de mockup que j’utilisais auparavant. Du coup, il ne s’agit pas d’une capture d’écran de l’outil.