Projet personnel2024
TranscribeX
Application de conversion de fichiers audio, images et documents en ligne via l'API CloudConvert.
- Next.js
- CloudConvert
- React Dropzone
- jszip
Projet personnel
NextMusic
Clone de Spotify avec lecture audio en temps réel via l'API Spotify, réservé aux comptes premium.
Aperçu privé
Le besoin
Projet personnel ambitieux visant à reproduire les fonctionnalités clés de Spotify en consommant son API officielle. Le principal défi était de gérer le flux OAuth 2.0 de Spotify, le rafraîchissement automatique des tokens d'accès et la synchronisation de l'état de lecture en temps réel entre l'interface et l'API.
Le résultat
Application fullstack inspirée de Spotify, développée avec Next.js et l'API officielle Spotify. Permet de parcourir ses playlists, contrôler la lecture audio en temps réel et gérer sa bibliothèque musicale. Nécessite un compte Spotify Premium pour accéder aux fonctionnalités de lecture.
- Authentification
- OAuth
- Tokens
- JWT
- Spotify API
- REST
- Lecture
- Live
Sous le capot
Défis rencontrés et technologies utilisées
Cette partie s'adresse aux développeurs et aux curieux : les obstacles techniques rencontrés et les outils choisis.
Défis rencontrés
Problème : Gestion du flux OAuth 2.0 Spotify
L'API Spotify impose un flux OAuth 2.0 strict avec des access tokens expirables toutes les 60 minutes, nécessitant un refresh automatique transparent pour l'utilisateur.
Solution : NextAuth avec provider Spotify custom
Implémentation de NextAuth avec un provider Spotify personnalisé gérant automatiquement le refresh token via un callback JWT, maintenant la session active sans reconnexion manuelle.
Problème : Synchronisation de l'état de lecture en temps réel
L'état du lecteur (piste en cours, position, volume, pause/play) devait rester synchronisé avec l'API Spotify qui est la source de vérité, notamment si l'utilisateur contrôle depuis un autre appareil.
Solution : Polling sur l'endpoint /me/player
Mise en place d'un polling toutes les 5 secondes sur l'endpoint Spotify /me/player pour récupérer l'état courant du lecteur et mettre à jour l'UI en conséquence, avec gestion des cas où aucun appareil n'est actif.
Problème : Restriction aux comptes Premium uniquement
L'API Spotify de contrôle de lecture (play, pause, skip) est exclusivement réservée aux abonnés Premium — les appels échouent silencieusement pour les comptes gratuits.
Solution : Vérification du produit Spotify à la connexion
Récupération du champ product du profil Spotify lors du callback OAuth pour détecter le type de compte. Les utilisateurs non-Premium sont redirigés vers une page d'information dédiée.
Problème : Synchronisation de l'état de lecture en temps réel
L'état du lecteur (piste en cours, position, volume, pause/play) devait rester synchronisé avec l'API Spotify qui est la source de vérité, notamment si l'utilisateur contrôle depuis un autre appareil.
Solution : Zustand store + polling sur /me/player
Store Zustand centralisé pour l'état du lecteur (piste, volume, progression), alimenté par un polling toutes les 5 secondes sur l'endpoint Spotify /me/player. Tous les composants consomment le store sans prop drilling, avec gestion des cas où aucun appareil Spotify n'est actif.
Technologies utilisées
Autres réalisations
Tous les projets
Organisme de formation2025
Acadyo
Plateforme e-learning fullstack pour la gestion de cours, apprenants et instructeurs.
- React
- TypeScript
- Symfony 7
- MongoDB
Un projet similaire en tête ?
Une idée de plateforme, un site à créer, un besoin métier à digitaliser — discutons-en.
Me contacter