Spotify Stats is my fun way to discover what I've listened on Spotify since my registration on this service, a few years ago. All started when I saw this beautiful app created by Brittany Chiang, and started looking at the Spotify API, to see what informations Spotify can share with about my activities.
Turns out you can check out what are the albums and the tracks that you've most listened since you started using the app (I was surprised about who were my top Artists of all time 😄), you can check all kinds of info about you profile, what you've listened to recently, what are the playlists created by you, etc. Many interesting things.
Once understood what I could do with the API, next step was to understand how to get this data.
In this article on Dev.to I read about how to set my Spotify developer account, and then I was ready to go.
Build the app in React
The most difficult part on the development was at the start, when I had to understand how to manage the different requests to Spotify server, in order to get the different info that I wanted to show on the Homepage of the logged user. I read online about this plugin built specifically as a React wrapper for Spotify API, but eventually I decided to use direct axios calls, put into async functions, like that:
I decided to split the calls into two sections: one that starts when the Spotify API returns a token, after the user is logged, and waits for the info necessary to render the homepage, and the second that is executed in background, and returns the info for all the other sections of the application (playlists and recent activities)
There are some limitations, like most of the calls to Spotify API return a maximum list of 20 items (like for playlists saved), but I believe the final result is nevertheless interesting and fun to view.
Here's a link of the running app, and here you can check out the git repository for the project.
