Musicontrol

1/8

Au départ, il s'agissait d'un simple projet pour apprendre les bases de Next.js, Tailwind et Recoil (que je n'avais jamais utilisés) à partir d'un simple tutoriel en ligne. Il y avait quelques problèmes avec l'implémentation, mais c'était tout de même un bon tutoriel. Frustré par les fonctionnalités de base, j'ai décidé d'en faire un projet plus robuste. Je me suis inscrit chez Spotify et j'ai obtenu un compte PREMIUM d'introduction GRATUIT pour 3 mois afin de pouvoir mettre en place les fonctionnalités. J'avais donc une date limite à laquelle je devais avoir terminé le projet.

Fonctionnalités

Interagir avec le service de streaming de Spotify.
Connexion sécurisée avec Next/auth.
Pages : Bienvenue, recherche, résultats de recherche, album, liste de lecture, artiste, émissions/podacasts, épisodes, chansons aimées, récemment écoutées.
Barre latérale contenant toutes les listes de lecture et tous les albums des utilisateurs
Filtrer la barre latérale par listes de lecture (toutes, vous ou Spotify) et par albums
Filtrer la barre latérale par listes de lecture (toutes, vous ou Spotify) et par albums
Ajouter/retirer un chanson de la liste des Chansons aimées
Ajouter/retirer un chanson d'une liste de lecture
Liens de navigation rapide vers les artistes et les albums
L'option de recherche renvoie les résultats pour les albums, les artistes, les listes de lecture, les podcasts/spectacles et les épisodes.
Contrôles du lecteur multimédia (répétition, lecture aléatoire, etc.)
Contrôle 'Seek to position.'
Contrôle de démarrage/pause de la lecture rapide.
Bannière de contrôle de démarrage/pause de la lecture rapide lors du défilement de la page.
Animation graphique de l'égaliseur lors de la lecture d'une piste.
Défilement infini pour charger plus d'éléments lorsque l'utilisateur fait défiler la page.
Utilisation de crochets et de crochets personnalisés.
La liste des recherches récentes est actuellement conservée dans le stockage local pour faciliter la démonstration.
Mise en page réactive.
Adaptation de la couleur d'arrière-plan de la bannière en fonction des couleurs de l'image.
Web Api courtesy of Spotify for developer.
Spotify Web API Node courtesy of Michael Thelin.

Contraintes

Coder le site en utilisant Next.js & Tailwind.
Gestion de l'état avec Recoil.
Assurez-vous que le code est correctement documenté.
Le site doit être compatible avec les dernières versions de Chrome et de Firefox.
Versionner le code avec Git.
L'ensemble du site doit être responsive sur mobile, tablette et desktop.
Rendre le site le plus accessible possible.
Utiliser l'Api Spotify.

Compétences

Utiliser un système de gestion des versions pour le suivi et l'hébergement des projets.
Mettre en œuvre des effets CSS en utilisant Tailwind.
Programmer avec Next.js.
L'authentification avec next-auth.
Construire un site web en utilisant une API REST (Spotify).

Notes

Le site Spotify est (faussement) énorme, avec de nombreuses fonctionnalités et caractéristiques. Je n'ai pas essayé de reproduire l'intégralité du site. Par exemple, vous ne pouvez pas ajouter/supprimer/modifier vos listes de lecture/chansons préférées à partir de cette application (peut-être dans le futur). La fonction Épisode ('up next'] n'est pas implémentée sur la page de l'émission. De plus, les algorithmes utilisés par Spotify pour créer les différentes listes ne sont pas tous disponibles, donc je n'ai pas créé de listes comme 'jump back in' ou 'mixes for....' et bien d'autres encore etc.... Mais à d'autres endroits, j'ai amélioré la fonctionnalité, en particulier la possibilité de sauter en avant/en arrière entre les épisodes sur les pages des épisodes (ce qui, au moment où j'écris ces lignes, n'était/est pas possible sur le site Spotify). Il y a actuellement quelques problèmes connus avec mon implémentation, listés dans mon compte github. NOTE IMPORTANTE : Vous devez avoir un compte Spotify Premium (pour utiliser toutes les fonctionnalités de lecture, sinon vous ne pouvez que naviguer) et, plus important encore, me contacter pour que je puisse vous mettre sur la 'liste blanche' (j'ai besoin de l'adresse email que vous utilisez pour vous connecter à Spotify). Si vous n'êtes pas sur la 'liste blanche', le site ne fonctionnera pas ! C'est actuellement le seul moyen car j'attends toujours des nouvelles de Spotify pour savoir si je peux avoir un accès étendu afin que tout le monde puisse se connecter...