Antonio in the Land of Techno

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.

This 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

This 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

This 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.

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!