Spotify Stats
Description du projet
Spotify propose Spotify Wrapped pour voir ses stats d'écoute, mais seulement une fois par an en décembre. Je me suis dit : pourquoi attendre un an ? J'ai donc créé une application qui permet de voir ses statistiques à tout moment. J'ai intégré une connexion via OAuth 2.0 — sécurisée, je ne vois jamais le mot de passe de l'utilisateur. J'ai développé l'affichage du Top 5 artistes et Top 5 titres, du genre préféré et du temps d'écoute, avec des filtres par période (4 semaines, 6 mois, ou depuis toujours) et un export des stats en image pour les partager sur les réseaux. Côté technique, le plus gros défi était l'authentification OAuth — gérer les tokens et leur expiration. J'ai aussi dû convertir les images en Base64 pour l'export, à cause des problèmes de CORS.
Traces (4)
Page de connexion OAuth 2.0 Spotify
Légende
Page d'accueil de l'application Spotify Stats avec le bouton de connexion via Spotify. J'ai conçu une interface épurée avec le logo Spotify, le titre 'Spotify Stats', le sous-titre 'Découvrez vos statistiques d'écoute' et le bouton vert 'Se connecter avec Spotify' sur un fond sombre avec un cercle lumineux vert.
Commentaire
Cette page illustre l'intégration de l'authentification OAuth 2.0 de Spotify. L'utilisateur se connecte avec son propre compte Spotify de manière sécurisée — l'application ne voit jamais son mot de passe, elle reçoit uniquement un token d'accès temporaire. La gestion des tokens (obtention, rafraîchissement, expiration) a été le principal défi technique du projet. Cette compétence en authentification sécurisée est très demandée en entreprise.
Compétences
Dashboard des statistiques d'écoute
Légende
Dashboard des statistiques d'écoute Spotify : 2h58min d'écoute totale, 43 artistes uniques, 50 titres différents, 29 albums, genre favori Rap. La section 'Artistes Similaires' propose Travis Scott, Don Toliver, ASAP Rocky, Metro Boomin et EsZeeKid. Le Top Artistes affiche les photos des 5 artistes les plus écoutés avec leur genre. L'interface est en dark mode avec un bouton 'Partager mon profil musical'.
Commentaire
Le dashboard est le coeur de l'application. Il consomme plusieurs endpoints de l'API Spotify pour agréger les données d'écoute et les présenter de manière claire. L'utilisateur peut filtrer par période et exporter ses stats en image. Pour l'export, j'ai dû résoudre un problème de CORS en convertissant les images d'artistes en Base64. Si c'était à refaire, j'ajouterais des graphiques pour visualiser l'évolution des écoutes dans le temps.
Compétences
Mode Wrapped — résumé musical animé
Légende
Écran d'introduction du mode Wrapped de l'application : fond dégradé vert sombre avec une note de musique, le titre 'Ton Wrapped', le message personnalisé 'Salut Hoko ! Voici ton résumé musical.' et l'instruction 'Clique pour continuer'. Cette vue lance une expérience animée qui résume l'année musicale de l'utilisateur.
Commentaire
Le mode Wrapped est une fonctionnalité bonus qui reproduit l'expérience Spotify Wrapped avec mes propres données. J'ai conçu une interface animée en plein écran qui présente les stats sous forme de slides. Cela m'a permis de travailler sur des animations CSS/JS et de soigner l'expérience utilisateur au-delà d'un simple affichage de données.
Compétences
Carte mondiale des origines d'artistes
Légende
Vue 'Carte des origines' de l'application : une carte du monde en dark mode avec des points verts indiquant les pays d'origine des artistes écoutés. Stats : 5 pays représentés, 20 artistes localisés, pays #1 les États-Unis 🇺🇸, 30 artistes analysés au total. Les bulles vertes sont proportionnelles au nombre d'artistes par région.
Commentaire
Cette fonctionnalité originale consomme une API tierce pour récupérer le pays d'origine de chaque artiste, puis affiche les données sur une carte interactive. Ce n'était pas prévu dans le scope initial — je l'ai ajoutée car je trouvais l'idée créative. Cela démontre ma capacité à enrichir un projet avec des fonctionnalités inattendues et à intégrer plusieurs sources de données.
Compétences
Compétences validées
- Développer — Développer pour le web et les médias numériques
- Entreprendre — Entreprendre dans le secteur du numérique
Technologies utilisées
Rôle
Développeur Full-stack
Durée
3 semaines
Année
2024
Nombre de traces
4
Naviguer les traces