Go back
Soundisen
ISEN CIR 2 - 2023
Role
Developer
Duration and Result
1 Week | 14,2/20
Team
2 people
Links
Github Repository
Live site (Soon)
Overview
This project, carried out in pairs over a week, aimed to create a functional version of an audio platform. The project integrated key features such as playlist management, music search, and audio playback, all within a web environment developed in HTML, CSS, JavaScript, PHP, and SQL. An intuitive user interface, an integrated audio player, and account management features were developed to simulate a real user experience.
Goal
Developing a functional website inspired by Spotify.
The main objective of the project was to recreate the core functionalities of Spotify, including:
User account management with login and registration.
Playlist management (creation and addition of tracks).
Music search by titles, artists, and albums.
An integrated audio player with playback controls (play, pause, skip).
An interactive user interface inspired by Spotify.
Context
University project on web development.
This project was carried out as part of a second-year project at ISEN. The educational goal was to master the creation of a complete website, including dynamic features, relational databases, and responsive design. The project was designed to be deployed on a server, allowing for the testing of user management and the display of data stored in the database.
Process and Methodology
Development of a user interface and functional back-end.
Database generation: The project began with the creation of an SQL database to manage users, playlists, and tracks. An SQL script was designed to initialize the database.
User interface development: The website's front end was developed using HTML, CSS, and JavaScript. Users can log in, register, and navigate through several pages: home, playlists, and search results. An audio player is located at the bottom of the screen for a smooth user experience.
Interaction with the database: The back-end in PHP interacts with the SQL database to manage accounts, playlists, and tracks. Each user action (playlist creation, music search) updates the database and the displayed content.
Challenges Faced and Solutions
Full-stack development and database management.
Synchronization between front-end and back-end: Ensuring smooth communication between the front end and the database via the PHP back end was a challenge that was overcome throughout the project's realization.
Responsive design and user experience: Creating a user interface that is both functional and visually appealing across different devices required several design iterations. We also made the site responsive.
Performance and audio player management: Ensuring the audio player could handle continuous playback of tracks even when changing pages. We chose to use the same page for each feature, only changing the contents interactively using JS.
Results
A successful simulation of Soundisen with interactive features.
The final site offered an intuitive and interactive interface. Users could search for tracks, manage playlists, and listen to music with an integrated player and audio visualizer. The management of accounts and playlists via the database worked seamlessly, allowing real-time data storage and retrieval. This project received a score of 14.2/20.
Lessons Learned and Skills Gained
Complete web development and project management.
This project allowed me to strengthen my full-stack development skills (HTML, CSS, JavaScript, PHP, SQL) and gain solid experience in database management. I also deepened my knowledge of user interface design and performance optimization on complex web projects. Teamwork and deadline management enhanced my ability to plan and execute projects in collaborative environments.