Booting · 00:00:00

Tom LEFRERE · Data Scientist

Raw data. A signal.

0%
EN FR

← Portfolio

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

Discord Recap, my own annual wrap, my way

My own Discord wrap, much richer than the official one, with Recharts visualizations and PDF export, in React 19 and TypeScript.

Discord Recap, my own annual wrap, my way

The project

While doing my 2025 year-in-review, I realized I couldn’t access Discord’s because I don’t share my data with them, and honestly, their wrap was pretty thin anyway. So I thought: if this data exists somewhere, I need to grab it and do something with it. I built my own recap system, with plenty of extra indicators: playtime, number of sessions, and more. The result is way more interesting than what Discord ships.

My contributions

Full web app build: React interface in TypeScript, interactive visualizations with Recharts, PDF report generation with jsPDF, and multi-page navigation with React Router. The idea was to export a clean, shareable document, not just an ephemeral dashboard.

Takeaways

Pulling your own data and doing something better than the original platform is deeply satisfying. React 19 with TypeScript offers a very smooth dev experience, especially for typing props and hooks. And Recharts combined with jsPDF lets you export clean visual reports, even if there are obviously a few layout contortions for the PDF.

Context

Personal project, born of the frustration of not having a proper Discord wrap. Inspired by Spotify Wrapped, applied to my Discord community. Typical kind of thing that starts from a gap and ends as a small, useful personal tool.

Here’s an excerpt of the PDF result

Discord 2025 recap, full version discord-recap-2025.pdf · 233 KB

Tech stack

  • React 19 / React Router DOM

  • TypeScript

  • Vite 7

  • Tailwind CSS 4

  • Recharts

  • jsPDF

  • ESLint

Cover image generated by Nano Banana (Google), since I no longer have the mockup template I used before. So it’s not a screenshot of the actual tool.