This project is a frontend assessment to build a music player UI with GraphQL integration. The application allows users to enjoy a seamless music listening experience with a beautiful and interactive user interface. The music player fetches song data through GraphQL API, enabling users to play, pause, skip to the next or previous track, and search for their favorite songs.
You can find the demo here : https://musicplayer-frontend.netlify.app/
- React JS
- GraphQL
- HTML
- CSS
- Javascript
| 
| 
-
Interactive and Responsive UI: The application features a user-friendly interface that adapts to various screen sizes. On smaller screens, the music player becomes the main interface, with a menu button to access the song list.
-
GraphQL Integration: Song data is fetched using GraphQL from the provided API, allowing seamless data retrieval and a smoother user experience.
-
Continuous Music Playback: Even when users navigate to other tabs, such as Favorites, the music will continue playing, ensuring an uninterrupted listening experience.
-
Dynamic Background Color: The background gradient color changes according to the cover image of the currently playing song, adding an aesthetic touch to the music player.
-
Fluid Animations and Transitions: The interface is enriched with animations and transitions, such as list loading skeletons, animations and background color change animations, making the application feel dynamic and engaging.
-
Search Functionality: Users can search for their favorite songs or artists, making it easy to find and play the desired music.
-
Music Controls: The music player provides controls to play, pause, skip to the next or previous track, and adjust the playback using the seeker (progress bar).
-
Tab Switching: Users can switch between tabs, such as "For You" and "Top Tracks," to explore different song categories.
-
Clone the GitHub repository:
-
Install the dependencies:
cd spotify-music-player
npm install- Start the development server:
npm startThanks!