Spotify

A clone of the Spotify UI.

Stack

• Fire Base - Deployments, metrics, ci/cd
• React / NX.dev - React SPA for the Front-end with NX.dev for VERY opinionated repo managemtn and build tools.
• React Query - Data fetching, nutations, and network data cache management.
• Vite - Build tooling.
• Typescript - bacause there is no reason not to have type safety.
• Spotify API - Data from Spotify's apis.
• Material UI - Styled components an MUI for the UI framework.

About Spotify

Building Spotify was one of my favorite projects. It challenged my responsive skills, along with learning new styling transformations. In order to view this project Spotify requires registration of API use. You must give artist attribution amongst other requirments in order to allow unlisted users to log in via Spotify SSO redirect.

While the application is hosted, you wont be able to login unless I want to give out my personal access token, sigh ... :/ .

For now the code is available to view on Github.

Identifying Unique Challenges

The hardest (and coolest) thing Spotify does is match color gradients to album covers. I took a crack at replicating that by creating a background gradient that mirrors the album art. This was before ChatGPT, so it took a lot of trial and error, but I’m really happy with how it turned out in the end.

When working on a clone, the goal is to capture the vibe of the original app as closely as possible. With Spotify, I was really curious about how their REST APIs work and how to play audio. The console became my best friend during this process, helping me understand how developers style and structure their markup. Of course, not everything is a perfect replica of the production version of Spotify. There are definitely some differences between my app and the real thing. Sometimes I simplified the styling but still ended up with the same result, and other times I discovered new techniques by digging deep into the console.