App Surgery with React
Tags: react, functional, hooks, javascript
Published: 2020-07-24 21:38:20

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
<br/><br/>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t2o07bv6q9d9vj6c5nvk.jpeg)
## 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.
<br/><br/>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fwlttq2dsqzk9u14uphn.jpg)
## 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.
<br/><br/>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i9l0cfb7xi1myzzjldmf.jpg)
## 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:
<br/>

> **Duplicate song**  This song is already in your playlist.

<br/>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?

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

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.
<br/><br/>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4rsztth51f5rsswcvfg7.jpg)
## 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.
<br/><br/>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iv70m7pbulb85xyozdn1.jpg)
## 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...