Skip to content

Playlisty Devlog: Week 3 Update | App is complete

Updated:

This is a continuation and the final devlog on Project Playlisty, which is now complete and functional. Links to the previous devlogs:

  1. Week 1 Update
  2. Mid-Week 2 Update
  3. This is the complete Week 2 Update (just published late).

I have submitted the Spotify Quota Extension application, and once it is approved (which could take up to 6 weeks), anyone can use it.

📺 Demo video:

👉 Live Link

Table of Contents

Open Table of Contents

Found Workaround For The Missing Spotify API Endpoint

Previously, I encountered a major roadblock:

there is no API endpoint to check if a song is in a given playlist!

Without having such an endpoint, the filtering part of the Is-In and Not-Is-In component needs considerable rethinking…

I found a workaround. Now, after the user logs in and requests their playlists, all playlists and their respective songs are fetched. Initially, all playlists are fetched as a set of 50 playlists (as the Spotify API operates this way). Then, each playlist is used to create a Promise object that calls the API to fetch the songs. These promises are then resolved simultaneously using Promise.all to make concurrent calls and not block the UI. This process is repeated until the next property in the response is null, indicating that there are no more songs to fetch. I was concerned about potential rate limiting by Spotify, however, I did not encounter any issues. Voila! Now, all the playlists and songs are stored in the app’s state, allowing for easy implementation of the Is-In and Not-Is-In functionalities using a filter().

Implementing Rest Of The Features

After resolving the API endpoint issue, the rest of the development progressed rather swiftly. Here’s a rundown of the implemented features:

Known Bugs And Enhancements

As I began using my own app and gave access to a couple of friends, I identified the following bugs and potential enhancements:

As previously mentioned, this is the final devlog on this project, so the fixes mentioned above won’t receive any new blog post updates. If you wish to follow the updates, ⭐ the project on GitHub: r0thim/playlisty. (Go do it now 😂!)

Final Notes

In summary, I developed a functional React App to solve a personal problem with a decent UI in just 10 days (from March 21 to March 31). It’s gratifying to create something that solves a personal problem and, hopefully, proves useful to others. This project represents my first endeavor of considerable size, and I’m very proud of the outcome 😎.

(P.S.: Although technically complete, the app is in “development mode”, and I have requested the Spotify team for “Extended Quota Mode,” which can take up to 6 weeks. Consequently, anyone whose email account I do not add manually will not be able to use the app. Let’s wait patiently and hope for the best. If you want to try the app nonetheless, please contact me, and I will add your email to the list. Please note that there is a limit of 25 users, so I might not be able to add everyone.)

I did it anime gif