Build a Spotify Album Discovery App

Use Claude Code to build a web app that picks a random Spotify album for you every day

Introduction

30 Second Summary

Streaming has changed music discovery. Your playlists keep getting more predictable, and you stop finding albums that surprise you.

In this project, you'll build an app that suggests a random Spotify album every day. You'll use Claude Code to create it, then experiment with prompting it to add interactivity and visual polish.

What You'll Build

A web app that connects to Spotify via an API, picks a random album each day, and let's you play it from within your browser.

By the end of this project, you'll have:

👤 A working Spotify OAuth flow that securely authenticates users and retrieves access tokens.
💽 A server that calls Spotify's API to fetch a random album based on today's date and serve its details to the frontend.
🎵 An in-browser music player powered by Spotify's Web Playback SDK with play, pause, and skip controls.
🎨 Secret Mission: A polished, animated interface designed by prompting Claude Code with creative visual ideas.

Are there any prerequisites?

For this project, you'll need:

A Spotify Premium account. The Web Playback SDK we'll be using only works with Spotify Premium accounts.
A Claude subscription. We'll be building with Claude Code, which requires a Pro, Max, Team or Enterprise Claude plan. Check out Claude's subscriptions and pricing.
No coding experience required. Claude Code handles the code, and we'll walk you through the prompting. For a deeper intro, start with Getting Started with Claude Code.

No prior coding experience required. Claude Code handles the coding, and we'll walk you through the prompting. For a deeper intro, start with Getting Started with Claude Code.

Before We Start

Before We Start...

Take a moment to explain what you're building and your goal for this project.

Set Up Your Tools

Let's make sure you have the right tools set up. For this project, you'll need:

A code editor, such as VSCode or Cursor. This is where you'll view and browse your project files.
Node.js, which powers the web server that runs your app.
Claude Code, the AI coding assistant that will write the code and build your app. You could also use other AI coding tools like Codex or Cursor.

In this step we'll get all three installed and verified. You'll also use your terminal, which is where you give your computer instructions by typing commands. Good news — it's already installed on every computer.

Download a code editor

A code editor is where you'll browse and edit the files that Claude Code creates for you. You can use any code editor of your choice, such as VSCode or Cursor.

To check if you already have one installed:

Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
Search for Visual Studio Code or Cursor and press Enter.
If either VSCode or Cursor opened, you already have a code editor and can move onto installing Node.js.

If you don't have a code editor, download and set one up from:

VS Code: https://code.visualstudio.com
Cursor: https://www.cursor.com

Intall Node.js

Node.js is what lets your computer run the code behind your app. This project needs Node.js v18 or higher.

Open your terminal by pressing Cmd+Space (macOS) or the Windows key (Windows), typing Terminal, and pressing Enter.
Check if Node.js is already installed by running this command:

node --version

✔️ I see v18 or higher

If your terminal prints a version like v18.x, v20.x, v22.x, or v24.x, you are all set. Move on to adding Claude Code.

ⓧ I see a version lower than 18

Your version of Node.js is too old for this project. You need v18 or higher.

Go to https://nodejs.org/en/download
Scroll past the code block until you see the installer buttons. Download the one that matches your operating system (.pkg for macOS, .msi for Windows).
Open the downloaded file and click through the installer. The default options are all fine.
Close and reopen your terminal, then run node --version again. You should see a version number starting with v18 or higher.

Still seeing the old version?

Close your terminal and open a fresh one. If it persists, restart your computer.

Help me update my Node.js version

ⓧ Command not found

Node.js is not installed yet.

Go to https://nodejs.org/en/download
Scroll past the code block until you see the installer buttons. Download the one that matches your operating system (.pkg for macOS, .msi for Windows).
Open the downloaded file and click through the installer. The default options are all fine.
Close and reopen your terminal, then run node --version again. You should see a version number starting with v18 or higher.

Install Claude Code

Claude Code is an AI coding agent that runs in your terminal. You give it natural-language prompts describing what you want, and it writes the code, creates files, and runs commands for you.

Install Claude Code by running this command in your terminal:

curl -fsSL https://claude.ai/install.sh | bash

Seeing a permission error?

On macOS, if you see a permissions issue, try opening a fresh terminal window (Cmd+T) and running the command again.

Help me install Claude Code

Confirm the install worked by running:

claude --version

You should see a version number printed, like 2.1.x. That confirms Claude Code is ready.

✔️ I see a version number

Claude Code is installed and ready to use. Move on to Step 2, where you'll create your Spotify Developer App.

ⓧ Command not found

The install may not have added Claude Code to your terminal's path.

Close your terminal completely and open a fresh one.
Run claude --version again.
If it still fails, try the Homebrew method instead:

brew install --cask claude-code

After installing via Homebrew, run claude --version once more to confirm.

Set Up Your Spotify Developer App

Now that your code editor, Node.js, and Claude Code are all set up, we'll create a Spotify Developer App.

A Spotify Developer App is like a pass that tells Spotify your project is allowed to access data and play music on behalf of a user. You register your app once, and Spotify gives you credentials that your code uses to prove its identity.

In this step, you'll:

Create a Spotify Developer App on the Spotify dashboard.
Configure your app's redirect URI and API permissions.
Copy your Client ID and Client Secret for use in the next step.

Create your app on the Spotify Developer Dashboard

Go to https://developer.spotify.com in your browser.
Click Log in in the top right corner.
Use the same email and password you use for your Spotify account.
Once logged in, you will land on the Dashboard.
Click the Create App button.

Now fill in the app details:

In the App name field, type Album of the Day.
In the App description field, type Daily random album discovery app.
In the Redirect URI field, type http://127.0.0.1:3000/callback and click Add.
Under Which API/SDKs are you planning to use?, check: Web API and Web Playback SDK.
Check the Developer Terms of Service checkbox.
Click Save.

What is a redirect URI?

You don't need to fully understand how redirect URIs work. Just know that it tells Spotify where to send the user back to after they log in. Since your app runs on your own computer (not on the internet), the address 127.0.0.1 means 'send them back to this computer.'

You might see localhost used in other places - it means the same thing as 127.0.0.1 but Spotify doesn't accept it. This is the most common cause of login errors later.

Copy your credentials

You will land on your new app's overview page. You need two details from this page.

Find your Client ID on the app overview page. It looks like a long string of letters and numbers. Copy it somewhere safe (a notes app or text file).
Click View client secret to reveal your Client Secret. Copy this too.
Keep this browser tab open. You will need these values in the next step.

What are these credentials for?

The Client ID identifies your app publicly. The Client Secret is like a password that proves your server is authorized to exchange tokens. Never share the Client Secret publicly.

Your Spotify Developer App is registered and you have your credentials ready. Next, you'll use Claude Code to build a web server that lets users log in with their Spotify account.

Build the Server with Spotify Login

Build Your App's Login Flow

Your Spotify Developer App is registered and you have your Client ID and Client Secret ready. Now it's time to start building!

Before you can fetch albums or play music, Spotify needs to know who you are. In this step, you'll prompt Claude Code to build a login system that connects your app to Spotify.

In this step, you'll:

Create the project folder and launch Claude Code.
Prompt Claude Code to build your app's login system.
View the code in your code editor.
Add your Spotify credentials.

Create the project

You will create a project folder on your Desktop, then launch Claude Code inside it. Claude Code will write all the code for you based on a prompt you give it.

In your terminal, move to your Desktop by running this command:

cd ~/Desktop

Create your project folder and move into it by running this command:

mkdir album-of-the-day && cd album-of-the-day

Start Claude Code by running:

claude

Since you already authenticated in Step 1, Claude Code should connect immediately. You can now prompt directly from this terminal window.

Prompt Claude Code to create your app

Copy and paste this prompt to Claude Code in the terminal window:

Build a Node.js Express web app that lets users log in with Spotify. Use the Authorization Code flow (server-side with client secret). The server should:
- Read SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET from a .env file
- Have a route GET /login that redirects to Spotify's authorize endpoint with scopes: streaming, user-read-email, user-read-private, user-modify-playback-state
- Use http://127.0.0.1:3000/callback as the redirect URI
- Have a route GET /callback that exchanges the code for an access token
- Serve a static HTML page at / that shows a 'Log in with Spotify' link
- After login, show the user's Spotify display name on the page
- Store the access token in the session or pass it to the frontend

What does this prompt ask for?

You're asking Claude Code to build:

A login page — where users click to connect their Spotify account.
A redirect to Spotify — your app sends the user to Spotify's own login page, so you never handle their password directly.
A callback route — after the user approves, Spotify sends them back to your app with a temporary code.
A token exchange — your app swaps that code for an access token, which is like a key that unlocks Spotify's data.

This pattern is called OAuth. It's how most "Log in with..." buttons work across the web.

Claude Code may ask you to approve file creation or command execution. Press Enter to approve each one.

Skip manual approvals with auto-accept mode

Press Shift+Tab inside the Claude Code terminal window to toggle auto-accept mode. Claude Code will execute file creation and commands without waiting for you to press Enter each time. Only use this if you are comfortable letting Claude Code act without confirmation.

🙋‍♀️ Claude Code not creating files?

If Claude Code asks a clarifying question instead of building, answer it and it will continue. If it seems stuck, type Go ahead and build it and press Enter.

Help me get Claude Code to create my project files

Check out what Claude Code built

Claude Code will start creating files. You'll see its progress scrolling in your terminal. When it's done, it describes what it built. Your output might look slightly different from someone else's. That's normal — AI doesn't produce the exact same result every time.

You can now view the files Claude has created.

Open your code editor.
Click File in the top menu bar.
Click Open Folder.
Select the album-of-the-day folder on your Desktop, then click Open.

You should see several files in the Explorer sidebar.

What are these files?

You don't need to understand what each file does, but if you're curious, here are the key ones:

public/ — a folder containing the page you'll see in your browser.
.env.example — a file where your private Spotify credentials will go.
package.json — a file that lists the packages your app needs to run.
server.js — the main app that handles login and talks to Spotify.

Add your Spotify credentials

Based on your prompt, Claude Code created a .env.example file with placeholder values for your Spotify credentials. You need to replace those placeholders with the real Client ID and Client Secret from your Spotify Developer Dashboard.

In the Explorer sidebar, click the .env.example file to open it.
Replace the placeholder values with your actual Client ID and Client Secret from the Spotify Developer Dashboard (the page you kept open in the previous step):

SPOTIFY_CLIENT_ID=your-client-id-here
SPOTIFY_CLIENT_SECRET=your-client-secret-here

Rename the file from .env.example to .env.
Save .env by pressing Cmd+S (macOS) or Ctrl+S (Windows).

What is a .env file?

Your .env file is a safe place to store private values like your Spotify credentials. Your app reads from this file, but it stays hidden if you ever share your code with anyone.

Your project files are created and your credentials are in place. Time to see the login flow in action.

Run and Test the Login Experience

You have the code. Now let's see if it works.

In this step, you'll:

Install project dependencies.
Run the app and view it in your browser.
Test the full login flow to see your app connect to Spotify.

Install project dependencies

Your app needs a few packages installed before it can run. You'll do this in a new terminal tab — keep Claude Code running in the one you already have open.

Open a new tab in your terminal by pressing Cmd+T (macOS) or Ctrl+Shift+T (Windows).
Navigate to your project folder by running:

cd ~/Desktop/album-of-the-day

Install the project dependencies by running:

npm install

In your terminal, you should see a summary showing packages including express and dotenv being added. If your terminal says "Up to date" instead, that means Claude Code already handled this step for you — either way, you're good to go.

Seeing permission errors on npm install?

Make sure you are inside the album-of-the-day folder (not one level above it). Run pwd to check your current directory. If you see Desktop at the end instead of album-of-the-day, run cd album-of-the-day first.

Help me fix npm install errors

Run your app

Now let's start the app and see it in your browser.

Start the server by running:

npm start

You should see a message in your terminal confirming the server is running on http://127.0.0.1:3000.

Open that URL in your browser. You should see a page with the title "Album of the Day" and a "Log in with Spotify" button.

Server not starting or page not loading?

If you see an error about a missing module, run npm install again. If the page does not load, make sure you typed the full URL including the port: http://127.0.0.1:3000.

If you see an error about SPOTIFY_CLIENT_ID being undefined, double-check that your .env file is saved and has no extra spaces around the = signs.

Help me get my server running

Test the login flow

Now that the server is running and the login page is working, you can test the full login flow to check your app can connect to Spotify.

Click Log in with Spotify on the page. Your browser will redirect to Spotify's login page. If you're already logged into Spotify, it skips straight to the authorization screen.
You'll see a permissions screen asking you to agree that "Album of the Day" can access your account. Click Agree.

Spotify will redirect you back to your app, and you should see your Spotify display name shown on the page.

What just happened behind the scenes?

Your app sent you to Spotify to prove who you are.
You approved the connection by clicking Agree.
Spotify sent proof back to your app that it can now act on your behalf.

🙋‍♀️ Running into errors?

If you are seeing the errors INVALID_CLIENT or redirect_uri_mismatch, errors mean Spotify cannot verify your app. Check these two things:

Your Client ID and Client Secret in .env are correct with no extra spaces or quotes around them.
The redirect URI in your Spotify Developer Dashboard exactly matches http://127.0.0.1:3000/callback (not localhost, which Spotify does not allow).

Help me fix my Spotify login error

You're connected to Spotify. Next up, a random album every day.

Display Today's Random Album

You confirmed the login flow works end to end — your Spotify display name is showing on the page. Now let's get an album!

In this step, you'll prompt Claude Code to add the core feature: picking one random album based on today's date, fetching it from the Spotify Web API, and displaying it with artwork and a track list.

In this step, you'll:

Prompt Claude Code to add daily album discovery.
Test that a random album displays after login.

Prompt Claude Code to add album discovery

Switch back to your terminal where Claude Code is running. Copy and paste this prompt:

Add a 'daily random album' feature. After the user logs in, the app should:
- Use today's date as a seed to generate a deterministic random search query (combine a random letter a-z with a random year between 1960-2024, seeded by the date so it is the same all day)
- Call the Spotify Search API: GET https://api.spotify.com/v1/search with q set to the random letter, a year filter, type=album, and limit=10
- Pick one album from the results using the date seed
- Fetch the album's full details including its track list using GET https://api.spotify.com/v1/albums/{id}
- Display on the page: the album cover art (large), album name, artist name, release year, and the track list with track names and durations
- If the search returns no results, try a different random letter as a fallback

What does this prompt ask for?

You're asking Claude Code to add:

A daily album pick — your app chooses one album each day, and everyone sees the same one.
Album details from Spotify — it fetches the artwork, title, artist, and track list using your Spotify connection.
A visual display — the page shows the album cover and tracks instead of just your name.

Test the album feature

Your server is still running the old version of your code. To pick up the changes Claude Code just made, you need to restart it.

Stop the running server by pressing Ctrl+C in the terminal where it is running.
Restart the server by running:

npm start

Open http://127.0.0.1:3000 in your browser.
Click Log in with Spotify and authorize the app (you may skip straight through if already authorized).

Will I need to restart the server every time?

Yes, any time Claude Code changes your server code (server.js), you'll need to stop and restart the server to see the updates. Changes to frontend files (HTML, CSS, JavaScript in public/) usually just need a browser refresh.

If you ever refresh the page and something seems broken, try restarting the server.

You should see today's album displayed with its cover art, title, artist, and track list. Try reloading the page — you'll get the same album every time. It only changes once per day.

Not seeing an album after logging in?

If the page is blank or shows an error:

Try clicking the login link again — sometimes the connection to Spotify times out.
Double-check that your Client ID and Client Secret in .env are correct with no extra spaces.
If it's still not working, tell Claude Code what you're seeing and ask it to help fix it.

Why isn't my album showing up after logging in with Spotify?

You now have a working album discovery feature. Every day, the app picks a different album from Spotify's catalog and displays it. Next up, you'll make it playable — right in your browser.

Add In-Browser Playback

We know that the app is already connected to Spotify — that's how it pulls the album details. But to actually listen to music from within the app, you need to integrate with the Spotify Web Playback SDK. This turns your browser into a Spotify player and lets you add Play, Previous, and Next controls.

In this step, you'll:

Prompt Claude Code to integrate the Spotify Web Playback SDK.
Test that clicking Play streams the album through your browser.
Verify that Next and Previous track buttons work.

Prompt Claude Code to add playback

Switch back to your Claude Code terminal session. Copy and paste this prompt:

Add in-browser music playback using the Spotify Web Playback SDK. The frontend should:
- Load the SDK from https://sdk.scdn.co/spotify-player.js
- Initialize a Spotify.Player instance named 'Album of the Day' with the user's access token
- Listen for the 'ready' event to get the device_id
- Add a Play button that calls PUT https://api.spotify.com/v1/me/player/play with the device_id as a query parameter and body: { context_uri: 'spotify:album:ALBUM_ID', offset: { position: 0 }, position_ms: 0 }
- Add Pause, Previous Track, and Next Track buttons that use the player's togglePlay(), previousTrack(), and nextTrack() methods
- Show the currently playing track name and progress
- Handle the 'player_state_changed' event to update the UI with current track info
- Call player.activateElement() on user interaction to handle browser autoplay restrictions

What does this prompt ask for?

You're asking Claude Code to add:

A music player in your browser — Spotify streams audio directly to your browser tab, like it would to your phone or a speaker.
Playback controls — Play, Previous, and Next buttons to control what's playing.
Track info — shows which song is currently playing.

Test playback

Once Claude has finished running, you can test the playback.

Stop your server by pressing Ctrl+C in the terminal where it is running.
Restart the server by running:

npm start

Open http://127.0.0.1:3000 in your browser.
Click Log in with Spotify again. Your previous token has expired since you restarted the server.
Authorize the app when prompted. You should see today's album displayed again.
Click the Play button.

You should hear the album start playing through your computer speakers. Confirm all the playback buttons work as intended:

Click Next to skip to the next track.
Click Previous to go back.
Click Pause to stop playback.

Fix any issues with Claude Code's help

If playback did not start on the first try, that is completely normal. The Spotify Web Playback SDK has a few moving parts that can trip up the initial implementation.

If something is broken, describe the exact symptom to Claude Code (what you clicked, what you expected, what happened instead, and any console errors).
If Claude Code asks to run commands or edit files, approve those changes.
After Claude Code makes fixes, stop the server with Ctrl+C, run npm start again, log in, and re-test.

Give Claude Code specific details

Vague descriptions like "it doesn't work" make it harder for Claude Code to help. Instead, say something like: "I clicked Play, nothing happened, and the console shows 'Auth error: Invalid token'. I logged in 10 minutes ago." The more context you provide, the faster it can diagnose the issue.

Your Album of the Day app is fully functional! You can log in, see a random album, and stream it right in your browser. Next up, the secret mission will be to make it look beautiful by prompting Claude Code to add visual polish and animations.

Secret mission

Make It Beautiful with Claude Code

Your app works, but it looks like a developer prototype. Can you use creative prompting to turn it into something you would actually want to open every morning? This is where you practice the most valuable Claude Code skill: describing what you want visually and iterating until it looks right.

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs locally, so there are no ongoing costs.

Resources you used:

The album-of-the-day project folder on your Desktop.
Your Album of the Day Spotify Developer App at developer.spotify.com.

Keep everything running

No action needed. Choose this if you plan to keep using the app or want to extend it with new features.

Your project folder stays on your Desktop. Run npm start from inside it any time you want to use the app again.
Your Spotify Developer App stays registered. You can reuse its Client ID and Client Secret for future Spotify projects.
Claude Code remains installed on your machine. It is available for any future project.

Pause - I'll come back to this later

Shut down the running server to free up your terminal. Your files and Spotify app stay intact for when you return.

In your terminal, press Ctrl+C to stop the Node.js server if it is still running.
Close any browser tabs open to http://127.0.0.1:3000.
When you come back, open your terminal, navigate to the album-of-the-day folder, and run npm start to pick up where you left off.

Delete - I don't want to use this again

Remove all project files and deregister your Spotify app to start completely fresh.

Stop the server by pressing Ctrl+C in the terminal if it is still running.
Delete the project folder by running the command for your operating system:

macOS

rm -rf ~/Desktop/album-of-the-day

Windows

Remove-Item -Recurse -Force ~\Desktop\album-of-the-day

Linux

rm -rf ~/Desktop/album-of-the-day

Delete your Spotify Developer App by going to https://developer.spotify.com/dashboard.
Click on Album of the Day to open the app overview page.
Click the red DELETE button and confirm the deletion.

Nice Work!

You just built a daily album discovery app from scratch using prompts and Claude Code. Every time you open it, a different album is waiting for you to explore.

Here's what you accomplished:

Built a web app that connects to your Spotify account, picks a random album every day, and plays it directly in your browser.
Used Claude Code to write all the code, directing it with prompts while you made the decisions about how it should look.
Secret Mission: Transformed a working prototype into a polished music player with animations and 3D effects using creative prompting.

Ready to quiz yourself?