Spotify Graph Explorer is a tool that I made to satisfy one of my own itches. I'm very passionate about music, and trying to find new artists and sounds. I've used tools such as to accomplish this in the past, but I wanted something more visual.

What it does

After searching for an artist, Spotify Graph Explorer queries the Spotify API with the search term, and pulls down the closest match. It also retrieves all of the artists related to the one you searched. All of these artists are displayed in a graph, where nodes represent artists, and edges represent the "related" connection. Users can then pan and zoom around the graph. Clicking on another artist will pull down all of its related artists too, and the graph will automatically update. Often times, exploring this graph, you can end up with very different sounds. So you can also automatically create a playlist of the top songs from each artist in your related artist chain.

How I built it

Sinatra/Ruby on the backend, haml for the single view template, and React for the frontend. Bootstrap for the UI framework. I also found an amazing graph visualization library called Cytoscape, which made drawing the graph a lot easier.

Challenges I ran into

I've never built an application that uses an authorization flow before. Spotify Graph Explorer lets you sign in with Spotify to save the playlist to your account. Some React quirks as well.

Accomplishments that I'm proud of

A graph full of artists to explore looks really beautiful in Spotify Graph Explorer, and I'm really proud of that.

What I learned

I need a team!! I feel that this project could have been more robust. I'd never used Sinatra before, and it made it super easy to get off of the ground. I'd never used Cytoscape either. I also learned about authorization flows.

What's next for Spotify Graph Explorer

Stability improvements, more features (exporting an image of the graph), UI improvements

Share this project: