Spotify Discovery Network

Spotify Discovery Network Homepage
Spotify Login Page
Most Recently Played Artist
Building up the Network

Inspiration

The inspiration of the Spotify Discovery Network rests on connectivity. From graphs in Discrete Structures to the theory of six degrees of separation to our love of music, the project focuses on networks to further provide an visualization of these ideas and is reminiscent of the Wikipedia Game.

What it does

The Spotify Discovery Network allows users to log into their personal Spotify accounts to view connections between artists with the users' most recently played artist as the starting point. As the user traverses through each artist, a network of musicians is slowly formed demonstrating the connectivity between artists through song collaborations.

How we built it

The project was made using Create React App and the Spotify API as a basis with React, JavaScript, HTML, and CSS. After authentication, information regarding the most recently played artist, specifically the song and albums, was pulled to filter for musicians the most recently played artist have collaborated with. That information was then displayed in the form of the artist's name along with the image of album that the collaboration occurred and song title. When clicking on the album image, the user is redirected to the song in Spotify and clicking on the artist's name brings up other artists that the selected musician has collaborated with. As various artists are selected, the progression is recorded and displayed as well. Throughout the process, the UI was updated to further enhance the experience. The Spotify Discovery Network was lastly hosted on GitHub to allow ease of access.

Challenges we ran into

Although there were many challenges that we ran into, most of them stemmed from our little to no experience with React and JavaScript. As a result, we often had difficulty with the syntax and implementing our desired functionality such as the authentication. The Spotify API was another area we encountered some difficulty since we had some trouble understanding the documentation thus prolong the process. Also, due to the online nature of the collaborative effort, it can be hard remain on the same page as we each attempt to implement various components of the project and ensuring that frequent commits to GitHub were occurring to ensure all members' working environment was up to date.

Accomplishments that we're proud of

In the initial stages of the Spotify Discovery Network we made little progress. However, as we solidified what functionalities to implement, we were able to complete our project in the span of these two days despite our lack of experience with React and JavaScript. As a whole we are very proud with the completion of a working project that encompasses our goals with an satisfactory user interface.

What we learned

Throughout the entire HackBeanpot experience, there were many things that we learned from not only the workshops, but from working on the our project as well. We gained experience and a certain degree of with working with React and JavaScript. Despite having little to none previous exposure to the language, we were able to apply our knowledge from previous other experiences and classes to create our project. Additionally, this was an opportunity to learn to work in a collaborative environment separated from your peers and with others of various backgrounds.

What's next for Spotify Discovery Network

Although we are proud of what we have accomplished in these two days, there are more components and features we would like to implement in the future. For instance, having the option for the user to choosing the starting artist rather than only beginning from the user's most recently played song. Another thing we'd like to fix or expand more is that it only pulls the singles & albums of the artist, not the appears on, so sometimes you can't go backward. We decided to opt out because of Spotify API calls included albums made by Spotify and then the artists on those albums.