Antonio in the Land of Techno
Published On:19 March 2018
When I started playing around with React I needed a real-life project to be more motivated to learn. And what is better for this purpose than a completely useless WebApp? :)
Flashback to a couple of years ago when at work somebody pointed out that my headphones were very loud. My reply was that, for fully concentrating, I need to be "In the land of Techno". This instantly became a running gag, so I decided to take this old (not even that funny) joke and transpose it into a Web App which is doing one simple thing: telling you if I'm currently listening to Techno or not.
To achieve this I needed:
A frontend part, showing the currently playing track and "YES" or "NO"
A Backend service, taking care of the Spotify API authentication and fetching of my currently playing Spotify track
A way to determine if a certain track is Techno or not
BONUS: allow the user to login with his Spotify account
I started with the backend. It's a simple Express service which I'm using for the initial authentication with the Spotify API and to exchange the
refresh_token with a newly generated token in order to have an API session that never expires.
Then I switched to the React part. The Web App needed to manage three different scenarios:
I'm listening to Techno
I'm listening to music which is not Techno
I'm not listening to music at all
The musical genre matching part was easier than I thought: Spotify API provides already an array of genres associated with the playing track that I could easily use for my purpose. Of course I had to decide how wide the range of "accepted" genres should be. At the end, based on my listening habit, I came out with this list:
So, if the track is classified in one of these genres, for me it's a YES.
When I released this, and started showing it around, for some weird reason people loved it, and somebody even asked "can I do the same?"
Well technical yes, I mean, it's all already there. But of course I need to get some other users' data from Spotify.
For this reason I later introduced a "Connect with Spotify" button which allows you to login with your account.
A temporary token gets generated and the app will now work with the logged user's listening data.
Now you can also know if you're in the land of Techno!