Spotify Jukebox

Our site takes away the usual Spotify distractions and leaves the features necessary for creating a queue. Log in to your account, see what's currently playing, and add a few songs to your queue!

Comment

Inspiration

We wanted to make an application that would allow us to easily take turns adding songs to a Spotify queue, particularly when we were all in one location together. Spotify itself has a great application, but for the purpose of focusing on what's currently playing and what's going to play next, none of the other features are necessary.

What it does

Our site allows a user to log in to Spotify. Then, if the user is currently playing a song in Spotify, the site displays some information about what song is currently playing. The user can also search for songs that are on Spotify and add them to the site queue. The site adds the song to both the site queue and the user's Spotify queue. Although the user has to actually play the music from Spotify itself, our site keeps track of the queue and updates it as songs are added and played.

How we built it

We used React to create the Spotify Jukebox. For the UI, we used Material-UI. The site's functionality is also dependent on the Spotify API. Those technologies combined make up the Spotify Jukebox!

Challenges we ran into

The Spotify API can be really complex at times, so we kept having issues with pulling the data we wanted and then navigating it. Some of the site functionality is on the complicated side as well. For example, the simple act of removing a song from the top of the queue once it starts to play is more difficult than you'd think. Lastly, the site looks amazing now, but dealing with HTML, CSS, and Material-UI to make everything look just right took a significant portion of our time.

Accomplishments that we're proud of

We're insanely proud of the whole thing! We weren't sure that half of this stuff would work, but it ended up way better than we were hoping for.

What we learned

Only 1 person on our 3 person team had experience with React prior to starting this project. Also, only 1/3 of our team had experience with the Spotify API. So everyone learned something, but 2 people learned a LOT.

What's next for Spotify Jukebox

If we had more time, we would have liked to host the website and find a way to allow multiple people to edit one user's queue... from their own devices!

Built With

Share this project:

Updates