Retour
Soundisen
ISEN CIR 2 - 2023
Rôle
Développeur
Durée et résultat
1 Semaine | 14,2/20
Équipe
2 personnes
Liens
Github Repository
Live site (Soon)
Aperçu
Ce projet réalisé en binôme durant une semaine avait pour objectif de créer une version fonctionnelle d'une plateforme audio. Le projet a intégré des fonctionnalités clés telles que la gestion de playlists, la recherche de musique, et la lecture audio, le tout dans un environnement web développé en HTML, CSS, JavaScript, PHP, et SQL. Une interface utilisateur intuitive, un lecteur audio intégré, et des fonctionnalités de gestion de compte ont été développés pour simuler une réelle expérience utilisateur.
Objectif
Développer un site web fonctionnel inspiré de Spotify
L'objectif principal du projet était de recréer les fonctionnalités principales de Spotify en incluant :
La gestion de comptes utilisateurs avec connexion et inscription.
La gestion des playlists (création, ajout de morceaux).
La recherche de musique par titres, artistes et albums.
Un lecteur audio intégré avec commandes de lecture (play, pause, skip).
Une interface utilisateur interactive, inspirée de Spotify.
Contexte
Projet universitaire de développement web
Ce projet a été réalisé dans le cadre d'un projet de deuxième année à l'ISEN. L'objectif pédagogique était de maîtriser la création d'un site web complet incluant des fonctionnalités dynamiques, des bases de données relationnelles et un design responsive. Le projet a été conçu pour être déployé sur un serveur, permettant ainsi de tester la gestion des utilisateurs et l'affichage des données stockées en base de données.
Processus et méthodologie
Développement d'une interface utilisateur et d'un back-end fonctionnel
Génération de la base de données : Le projet a commencé par la création d'une base de données SQL pour gérer les utilisateurs, les playlists et les morceaux. Un script SQL a été conçu pour initialiser la base de données.
Développement de l'interface utilisateur : Le front-end du site a été développé en HTML, CSS et JavaScript. Les utilisateurs peuvent se connecter, s'inscrire, et naviguer entre plusieurs pages : accueil, playlists, et résultats de recherche. Un lecteur audio est présent en bas de l'écran pour une expérience utilisateur fluide.
Interaction avec la base de données : Le back-end en PHP interagit avec la base de données SQL pour permettre la gestion des comptes, des playlists et des morceaux. Chaque action utilisateur (création de playlist, recherche de musique) met à jour la base de données et le contenu affiché.
Défis rencontrés et solutions
Développement full-stack et gestion de base de données
Synchronisation entre front-end et back-end : Assurer une communication fluide entre le front-end et la base de données via le back-end PHP a été un défi, surmonté au fil de la réalisation du projet.
Design responsive et expérience utilisateur : Créer une interface utilisateur à la fois fonctionnelle et visuellement agréable sur différents appareils a nécessité plusieurs itérations sur le design. Nous avons également rendu le site responsive.
Gestion des performances et du lecteur audio : Assurer que le lecteur audio puisse gérer la lecture continue des morceaux, même lors du changement de page. Nous avons donc choisi d'utiliser la même page pour chaque fonctionnalité, en changement seulement l'intérieur des balises de manière interactive en JS.
Résultats
Une simulation réussie de Soundisen avec des fonctionnalités interactives
Le site final proposait une interface intuitive et interactive. Les utilisateurs pouvaient rechercher des morceaux, gérer des playlists, et écouter de la musique avec un lecteur intégré et un visualiseur audio. La gestion des comptes et des playlists via la base de données a fonctionné sans accroc, permettant un stockage et une récupération des données en temps réel. Ce projet a reçu une note de 14,2/20.
Retours d'expérience et compétences acquises
Développement web complet et gestion de projet
Ce projet m’a permis de renforcer mes compétences en développement full-stack (HTML, CSS, JavaScript, PHP, SQL) et d’acquérir une expérience solide en gestion de base de données. J’ai également approfondi mes connaissances en conception d’interfaces utilisateur et en optimisation des performances sur des projets web complexes. Le travail d'équipe et la gestion des délais ont renforcé mes capacités à planifier et exécuter des projets dans des environnements collaboratifs.