I know, the title sounds super confusing. Allow me to explain.
To start with, here's a live demo of the app, just in case you're curious - MySpotify
Alright, so, I built a client side application that makes use of the super cool Spotify Web API to log in users, filter the latest songs they have listened to by mood, suggest artists similar to the ones they love, get top tracks by their favorite artists, and let them listen to their favorite tracks.
A complete step-by-step walkthrough would probably end up in a comically large post which no one will have the patience to read, so I'll try and provide a general outline of how I went about building the application.
If you'd like to take a look at the code, here is the GitHub repo. Do consider starring it if you find it useful: MySpotify-repository. A small disclaimer - I'm not exactly a seasoned developer, so I'd gladly encourage suggestions on how to improve the code.
So here's what I did:
I registered the app with Spotify. That's because we use the Spotify API to provide OAuth authentication so that users can log in with their Spotify accounts. I suggest taking a look at this excellent article in case you have any problems implementing this step.
I used Redux for state management. For those of you who are new to Redux, it allows your application to have a centralized logic and state. Basically, it makes it easier to work with your application as it gets more and more complex. I suggest taking a look at the official documentation for any queries you might have.
I used the recently-played endpoint to get hold of the current user's recently played songs. The Spotify API has endpoints to get audio feature information for a single track identified by its unique Spotify ID. I used the 'valence' metric to filter the recent songs according to mood.
The rest of the features could be achieved by fairly straightforward API calls.
The Spotify API is pretty spectacular, not least if you're a music lover as I am, and I would highly recommend you go through it. There are tons of things you can do - the only limit, as they say, is your imagination. Whenever you get stuck, refer to the documentation. I found answers to most of my questions hidden there somewhere. And if that doesn't help, there's always Google.
All in all, I had loads of fun building this, and I hope you do too. This is my first post here, so let me know if you have any questions regarding the project, and if you liked it. Until then, bye bye, and happy coding!
P.S.
I made this into a PWA(Progressive Web App), but I have not pushed the changes to GitHub yet.
Top comments (0)