App Surgery with React

bytebodger

Adam Nathaniel Davis

Posted on July 24, 2020

App Surgery with React

I've been wanting to do some practical case studies in how I choose to build apps. My recent (re)tinkering with Spotify's API has given me a great opportunity to do just that.

In subsequent articles, I will outline, with specific coding examples, how I'm leveraging Amazon Web Services, functional React/JS with Hooks, and the Spotify REST API to alleviate some of my headaches with the Spotify player. But this first article in the series will be more conceptual, as I explain the perceived problems and my proposed solutions.

The app to which I'll be referring is actually live now. You can see/use my Spotify Toolz app here:

https://www.spotifytoolz.com

(If you're thinking that the site isn't much to look at, well... yeah. I agree with you. I've put a lot of thought into the code. But I've never pretended to be a designer. If you wanna make this thing look all spiffy, you're more than welcome to jump in and help.)

The underlying code is available here:

https://github.com/bytebodger/spotify


Alt Text

The Problem

Spotify's an incredible service. When I was a kid, I never coulda dreamed that I'd be listening to almost any songs that I want, as frequently as I want, all for a monthly cost that's less than I used to pay for a single CD. And now that I spend most of my life glued to a keyboard, I don't consider a good supply of tunes to be a "luxury". So with this perspective in mind, Spotify is a lifesaver.

But despite all its strengths, Spotify is far from perfect. Specifically, the Spotify music player can be maddening with its quirks and limitations. On one hand, I have what is probably the world's most expansive and flexible music service at my fingertips. On the other hand, trying to get those songs to play in the way that I want them to play leaves me feeling extremely... restricted.

I used to constantly gripe about this. I tried to work through Spotify's non-existent customer service. I tried to find rival services that I liked better. But I always ended up simply griping about Spotify's crappy music player.

One day, my girlfriend said, "You're a programmer. Can't you fix these problems?" My first reaction was to talk condescendingly about how it can be nearly impossible to reverse engineer someone else's application. To which she replied, "You mean, they don't have some kind of interface that you could use??"

Umm...

Of course, Spotify does have an API. And with a little trial-and-error, I've managed to multiply the value that I get from the service. Granted, the "average" individual can't be expected to program their own Spotify solutions by manually leveraging their API. But you are not the "average' individual, are you??

If you're reading on Dev.to, you too dabble in the dark binary arts. So hopefully you'll get some value by following along with what I've done.

Spotify's API is sufficiently robust that you could conceivably craft all sorts of ingenious solutions. And as times goes on, I'll probably add more features to Spotify Toolz. But for the time being, my app addresses three issues that were previously driving me up a wall.


Alt Text

Grievance #1: Spotify Shuffle Sucks

I described this in some detail in a previous article, so I won't rehash all of it here. Suffice it to say that Spotify uses a purposely-weighted (and opaque) algorithm to "shuffle" the playback of your playlists.

This isn't a conspiracy theory on my part. They've admitted as much. Years ago. In fact, they wrote a fancy blog post bragging about it. And they steadfastly refuse to do anything else about it.

And I'm not the only one frustrated by this limitation. If you google "spotify shuffle", you'll find hundreds of forum threads, filled with thousands of posts from people complaining about the exact same thing.

So the first problem to be addressed, the problem that inspired me to create Spotify Toolz in the first place, is the problem of true shuffling. We'll create a simple, random shuffling feature devoid of secret weighting.


Alt Text

Grievance #2: Spotify's De-Dup'ing Is Nearly Nonexistent

If you use Spotify a lot, you've probably built up a few playlists. If you've had those playlists for a long time, they've probably grown to be rather large. For example, I have several playlists with more than 600 tracks. I know some people have well over 1,000 tracks in a single playlist.

One of the downsides to a large playlist is that it can be challenging to remember whether you've already added a specific track to it. You run across a great song. You think, "Oooh - let me add that to my playlist." And it's nearly impossible to remember the fact that you already added that track two years ago.

You may be thinking that Spotify already addresses this. You see, when you try to add a second copy of the exact same song to a playlist, Spotify warns you. It says:

Duplicate song This song is already in your playlist.


So that solves it, right??

Not exactly. Spotify's warning is marginally useful. But it falls far short of keeping your playlists free of duplicates.

Spotify's "Duplicate song" warning only triggers if the unique ID between both tracks is identical. In other words, Spotify only sees something as a "duplicate" if it's literally the exact same record. But when we're talking about something as messy as a global music catalog, this can be problematic.

For example, what happens if we try to add these two tracks to a playlist?



TITLE        ARTIST                               Album
Gett Off     Prince & The New Power Generation    Diamonds and Pearls
Gett Off     Prince                               The Very Best of Prince


Enter fullscreen mode Exit fullscreen mode

Spotify has these two tracks listed as unique - with their own unique IDs. This means that Spotify won't complain at all when you try to add both of them to the same playlist - even though the two tracks are sonically identical.

In fact, the more you sift through Spotify's catalog, the more you realize that they have many different copies of the same song. Sometimes, the artist's name is literally misspelled. Other times, you have one track that ends at 4:32 - and another with an extra second of white noise at the end, so it ends at 4:33. All of this means that Spotify has many tracks that it views as "unique" - but they are, in fact, the exact same song.

If you don't catch a "duplicate" song when you're adding it to a playlist, there's really no efficient way - inside of the Spotify player itself - to find those dups outside of visually, manually scanning your playlists. I can't tell you how much time I've spent sorting a playlist's tracks by title, then slowly scrolling through the entire list to spot any duplicates.

So the second problem to be addressed is that we must have an efficient way to identify duplicate tracks in a playlist. And this method must be more sophisticated than simply searching for duplicate track IDs.


Alt Text

Grievance #3: Spotify's Recommendations Are Hot Buttered Garbage

I find this to be one of the most baffling aspects of Spotify. They have many millions of tracks in their catalog. And I'd think that they have a vested interest in keeping you listening. So if they could manage to introduce you to many new tracks through their service, that should make you a loyal customer who will listen often, and repeatedly, for many years to come.

But Spotify's music discovery options are, too often, outright pitiful. I do enjoy their Discover Weekly feature. But that provides only 30 recommended tracks. And it only provides them... weekly.

If you don't feel like waiting for 30 new recommendations each week, you can scroll to the bottom of one of your playlists and you'll see the Recommended Songs feature. And that looks promising, right???

Well...

After you hit that REFRESH button a dozen-or-so times, you'll notice that the same songs keep getting recommended OVER AND OVER.

You can also try things like the Artist Radio feature. But once again, you'll discover that once you've listened to a few dozens tracks, it starts recommending the same songs OVER AND OVER.

It's hard for me to articulate just how frustrating this is. Spotify has many millions of tracks to choose from. But when I start looking for "recommendations", after it's given me a few dozen tracks, their algorithm throws its hands up and just starts regurgitating the same ol' ideas. It's incredibly lazy. And incredibly sad.

To illustrate this, I have a rap-centric playlist. And when I first started using the Recommended Songs feature, it would keep suggesting Method Man.

Now, I have nothing in particular against Method Man. I don't hate him. I don't love him. He's just sorta... there. I guess you could say that, even as a rap fan, he's just not my particular "cup of tea". But no matter how many times I refused to play his tracks or add them to my playlists, Spotify kept suggesting them over and over and OVER AGAIN.

Imagine you go to your neighborhood pub and the barkeep suggests a Budweiser. And you tell him, "Yeah... I really don't like Budweiser." So he nods, and slides you a different kind of beer. And when you're done with that one, he says, "Sooo... are you ready to try a Budweiser??" And every time thereafter when you walk in the pub, he keeps asking you whether you'd like to try a Budweiser.

After awhile, you might stop going there altogether. I know I would. Yet this is exactly what Spotify does with their lame attempts to recommend new music.

Spotify used to have a thumbs-up/thumbs-down feature which they seem to have removed. And I'm glad they did. Because it didn't seem to do anything. No matter how many times you gave a thumbs-down to a particular track or artist, Spotify would continue to blindly suggest the same track/artist until you were ready to yank out your hair.

So the third problem to solve is to provide more meaningful recommendations for new music - recommendations that don't blindly suggest the same damn song/artists repeatedly.


Alt Text

Conclusion

So we have... a lot of problems. We have a service that, on one level is amazing. But on another level, it's infuriating. The service is a patient - one which could enjoy a long and productive life. But if the service is ever going to meet its full potential, it needs some... surgery. So what's to be done??

Well, the good news is that we're not left to just take what the vendor gives us. We're programmers. We're problem solvers. We have the scalpels (APIs) and the operating facilities (programming languages) to patch up this Frankenstein. And that's exactly what we're gonna do.

In the following articles, I'm going to spell out exactly how I've addressed these with the help of Spotify's own API. Along the way, I'll outline my specific approach with many code samples in React/JS.

Stay tuned...

💖 💪 🙅 🚩
bytebodger
Adam Nathaniel Davis

Posted on July 24, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

App Surgery with React
react App Surgery with React

July 24, 2020