4. Task 1 - SarthakJha/IECSE-Web-Summer-21 GitHub Wiki

Music Streaming Application

For this task, you'll have to create the UI for a playlist/album section of music streaming application. Here's some inspiration from the Spotify and Apple Music desktop apps. Implement just the major features for now.


Identify parts of the page that should be their own components. Reuse these components where required. Identify whether these components should have some data passed as props or not, or whether it requires state. Focus on getting the basic structure done before thinking of styling.

  • Add a header that shows the title of the Album/Playlist along with an image.
  • A list of all the songs in the Album/Playlist with some information (Name, Length, Artist, etc). Each song could be its own component.
  • Highlight the song that is currently being played by styling it differently. If a user clicks on another song, update the song that's currently being played.
  • Make your app pretty and responsive!

Additional features

  • Get songs from an API using Fetch instead of hard coding data locally. Do this only after finishing the features mentioned above.
⚠️ **GitHub.com Fallback** ⚠️