Skip to content

Playlisty Devlog: Week 1 Update | Successful Login, Skeleton Routing, and Basic Layout Implemented

Updated:

I recently embarked on a new project to address a personal issue that I believe others may also encounter.

I am calling the project Playlisty and is aimed at solving this problem. My goal is to provide users with the ability to easily see which playlists a specific track is included in at a glance! And quickly move/remove among these.

Playlisty will be a serverless Single Page Application (SPA) developed using React.

This post marks the first of a series of upcoming devlog entries as I progress with this project.

Table of Contents

Open Table of Contents

Motivation & Scope

In Spotify, there is a lack of an intuitive way to identify playlists containing a particular song and those that do not. While the recent update in the Desktop official client allows users to check a green checkmark that opens a dropdown menu for adding/removing a selected track to/from multiple playlists, it can still be a cumbersome process for each individual track with a limited small-sized menu.

The goals of this project are:

In addition to addressing a real-world issue, this project also aims to showcase my developer skills to potential employers, and I plan to utilize this project for the MLH fellowship demo project.

The following aspects are currently out of scope:

Week 1 Progress

I am developing this project with React + TypeScript + Vite and using the official Spotify Web API TypeScript SDK.

Challenges

Progress Highlights

Initially, I complicated the structure with context APIs but simplified it by replacing them with a custom hook useSpotify, which provides the SDK object along with login and logout functions. I also utilize the Outlet context from React-router to share the SpotifyApi instance across the app’s routes post-login.

I discovered that the /callback route was unnecessary since the authorization code was directly passed to the redirect URI. I now use an useEffect on the Root route to check for the code query parameter and run the login function from the SDK to complete the login flow. Success - the user is logged in!

In hindsight, the setup appears obvious and simple, yet it took me two days to figure everything out (I feel stupid). Nevertheless, I’m pleased with the progress.

Key Learnings

A sneak peek of the post-login view of Playlisty:

Playlisty Sneak Peak - Logged In

Goals for the Next Week

My aim is to have the app mostly functional by the end of this month (March 2024). Below is a breakdown of my to-do list for the upcoming week:

If you wish to test the app before the official launch or have any feedback or suggestions, feel free to reach out!

Stay tuned for updates by following me on Twitter and/or LinkedIn!

Next devlog live 👉 Playlisty Devlog: Mid-Week 2 Update