Antonio in the Land of Techno

19 March 2018

Published On:

19 March 2018

Tags:

react
spotify api

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.

antonio-in-the-land-of-techno-1This is what you see when I'm in the land of Techno

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

antonio-in-the-land-of-techno-2This is what you see when I'm not in the land of Techno

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

antonio-in-the-land-of-techno-3This is what you see when I'm not listening to music

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:

  • techno

  • electro house

  • destroy techno

  • german techno

  • tech house

  • minimal techno

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.

antonio-in-the-land-of-techno-4

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!

Antonio Cosentino © 2021 - All rights reserved