About a week ago, my friend sent me this website, which takes your Spotify data and gets your top 3 songs in isolation with a fancy graphic. It’s created by a partnership between Tixel and Spotify to create this application. There’s been so much press and media around this which was crazy, but I felt that the web app was rather lacking in its details – so I decided to create another version!

Details

You can visit the web app here. I built it in one night and it mimics the features of Spotify+Tixel except with additional information. One additional feature I added was the ability to show your top songs from the past 4 weeks (isolation), past 6 months (2020), and last few years (all time).

Screenshots

The first page shows the link to the code, in case anyone wants to see the transparency behind the information they're providing.

Spotify's OAuth capabilities have been extremely refined. Using their API was seamless and letting them handle all aspects of authentication was really enjoyable. I simply created an application on their console and used the client ID.

This page displays your top songs through various time lengths and the current playing song if you are using Spotify at the moment!

Process

Using the Spotify API, I used the endpoint /top located here. Using query parameters, I got the top 10 songs from the past 4 weeks, past 6 months, and all time, and compiled them into three separate categories. I then displayed the info in the screenshot posted above.

Overall this project was fun and the one aspect I’d love to stress is the ease of use of Spotify’s API. Essentially, they require you to create an App within their ecosystem, retrieve a client ID, and then use that ID to connect with your program.

This is seamless and allowed me to focus on my app and not on authentication with someone’s Spotify data. I didn’t need to store user information and in fact, this is so much more secure because of that. If other applications allowed for registration to use auth keys, I’d bet security issues would drastically decrease.

Overall

This was a great learning experience, and honestly, I’m proud of the fact that I took an idea and expanded upon it. I hope to do this with other projects!