Discover Spotify Web App Build
Build responsive wep app that utilizies the Spotify API to generate curated playlists and info for a user.
Role
Full Stack Dev + UI Design
Timeline
Couple months
Project
Personal Exploration
Tools
Next.js, Tailwind CSS, Typescript, Spotify API, NextAuth, Recoil
What is Discover Spotify?
Discover Spotify is a personal project which I started with the intentions of developing my skills in working with APIs. Through building and exploring I also ended up learning authentication and state management.
I wanted to build something that I could use. I like looking for new music, and I spend hours scouring through random playlists on Spotify. Why not make something that could just give more recs?
Using the Spotify Web API I gather a user’s listening habits, then use those to curate recommended songs and playlists for the user. The app is intended to be inspired by Spotify’s “wrapped” series and therefore displays other information about a user’s habits. Building those components also allowed me to explore more of the API’s features.
Check it out here.
SETUP
How did I start?
I found a tutorial online on building a “spotify clone” which taught me the foundations for my app - authentication using NextAuth, state management using Recoil, and integrating the Spotify Web API with Nextjs.
Once I had the foundations, I could explore what I wanted with the Spotify API. I wanted to play around with different features, which brought me to an all encompassing “Discover Spotify” app. The most important thing for me was trying to build one feature: song and playlist recommendations based on a user’s listening habits. The playlists would be categorized into different "moods" or "vibes." The other features are more basic and display a user’s current listening habits.
DESIGN
Visual Design Elements
The visual design elements for this app were simple. I went for a darkmode look: black background, white text, easy layout. I included horizontal scroll for the user's info and vertical scroll for the generated playlists to adhere to responsive design.
BUILD
Spotify Web API
This app was pretty much built around my desire to play around with the Spotify API. I love listening to music, and I'm always looking for new songs. The API's "get recommendations" feature was a great way for me to build something that does that for me. I figured I could first get a user's listening habits (top artists and tracks), save the state of that info and then feed it as the seed entity to the recommendations function.
Authentication
Accessing a spotify user's information requires setting up authentication and middleware. The tutorial I found was really helpful in learning how to set up NextAuth, as well as a refresh token function. Since Spotify's API gives you an access token that expires, setting up an automatic refresh token renewal was key to ensuring that a user's session in the app would be able to persist.
State Management
The tutorial also showed me how to use Recoil for state management, which was really helpful for this project in particular since I didn't need to save too much information and it pairs with React. I just created as many "atoms" as I needed, which with Recoil are essentially individual data storage units. Atoms will also make it so that if you want to change the state of something stored in that specific unit, only components that are using that atom will be re-rendered.
THOUGHTS
- This continues to be one of the most headbanging yet rewarding projects I've ever started for myself. What they say about learning through doing is very true in this case - and it helps that I'm building something that I genuinely want to use for myself.
- Sometimes I think to myself: if I'm having to debug something after every change, then maybe I should be learning more before doing. Which is also true in this case. After my first attempt at this project, I went through each step of the process and researched into how everything was actually working together. Rebuilding it using Typescript showed me I still have so much more to learn, but I'm going into it with a much better appreciation and understanding for how it's being built.