This is a simple project I put together to learn a bit more about frontend development. It’s a Spotify-esque music player with a new feature - Star Players.

The idea for the feature came from an observation I had - when organising my music in playlists, I would often create two copies of the same playlist. One contained all of the songs that matched the vibe I was going for, and the other was a subset of that playlist, keeping only the songs I loved and wanted to play on repeat. If I was leaving music on in the background, I would play the longer playlist. Other times, if I had my headphones on and was ready to really focus on the music, I would play the playlist with only my faves.

This gave me an idea for a feature - what if you could just highlight certain songs in your playlists, and have a separate shuffle mode for your highlighted songs? Most music players already use the heart symbol for “liking” songs, so it would have to be a star instead. Hence Star Players!

I built a simple demo of the feature, with Astro, React, and Tailwind. It consists of a playlist of songs, along with the usual media player features. The star icon next to each song title allows you to add them to your Star Players, and a separate shuffle mode in the media player allows you to initiate StarPlay.

You can check out the demo here.