Build a Spotify Clone with Cursor

Ship a new queue feature for a Spotify clone using Cursor AI.

Introduction

⚡️ 30 Second Summary

Getting up to speed with a new codebase takes time. AI-native IDEs like Cursor make learning faster by letting you learn through chat.

In this project, you'll set up the Cursor IDE, create a Spotify clone web app, and use AI to understand, debug and add new features to the codebase.

What You'll Build

You'll use Cursor's AI chat features to explore, debug, and extend a Spotify clone web app.

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

🚀 A working Cursor setup with your Spotify clone running locally.
⚙️ A queue feature that lets users manage their upcoming songs.
💎 Secret Mission: A .cursorignore file that improves Cursor's performance and protects sensitive files.

Not sure if this project is right for you? Check if it matches your goals

If you're up for a bit of a challenge, quiz yourself on the key concepts up ahead in this project.

Set Up Cursor

First, we will install Cursor, an AI-powered code editor. Later on, we will use Cursor to learn more about the codebase as well as build new functionality without writing any code ourselves.

In this step, get ready to:

Download and install Cursor.
Create a Cursor account.

Download and Install Cursor

We need to get Cursor installed on your machine, so that we can view and edit code.

I already have Cursor downloaded

Open Cursor from your Applications folder (Mac) or Start menu (Windows).
Wait for Cursor to fully launch.
If prompted to update, go ahead and update to the latest version.

Onwards! Let's login.

I don't have Cursor yet

Navigate to the official Cursor website at cursor.com/downloads

🍎 macOS

Download the macOS installer

Not sure what to choose?

On a Mac you may need to know your chip architecture (e.g., Apple Silicon, Intel) to select the correct version.

You can find this by selecting the Apple Menu > About This Mac.

🖼️ Windows

Download the Windows installer.
Once the download is complete, open your Downloads folder.
Click the CursorUserSetup...exe file.

You might see a security warning since it's an app downloaded from the internet. This is normal!
Select Run to proceed.

The setup wizard will start.
Accept the license agreement.
Select Next.

Choose the destination location for the installation. The default is usually fine.
Select Next.

Choose the Start Menu folder. Again, the default is fine.
Select Next.

In the Select Additional Tasks screen, we recommend keeping the default options checked:
- Register Cursor as an editor for supported file types
- Add to PATH
Select Next.

You're now ready to install.
Select Install.

🍎 macOS

Once the download is complete, open your Downloads folder.
Click the Cursor .dmg file.

Then, drag the Cursor application into your Applications folder to complete the installation.

Open your Applications folder.
Click on the Cursor icon to open it.
You might see a security warning since it's an app downloaded from the internet. This is normal!
Select Open to proceed.

Nice! You've successfully installed Cursor.

🖼️ Windows

Once the installation is complete, ensure Launch Cursor is checked.
Select Finish.

Nice! You've successfully installed Cursor.

I'm already logged in

Awesome, you're all set to continue!

I already have a Cursor account

Fantastic! This will be speedy.

Select Log In.

Your browser will open to the Cursor login page.

You should see a Welcome to Cursor page.

Awesome! You've logged in and are ready to go.

New to Cursor!

When Cursor launches for the first time, you'll see a welcome screen.
Select Sign up.

Your browser will open to the Cursor login page.

Select Sign up at the bottom of the screen to create a new account.
Create a new account using your email or a social provider like Google or GitHub.

Let's fill in your details to create the account!

You'll need to verify your email address.
Check your inbox for an email from Cursor.

Enter the verification code.
After creating your account, Cursor will ask if it can log you into its desktop app.
Select Yes, Log In to connect your account to the Cursor desktop app.

Cursor will now guide you through some setup instructions. This should only take a few minutes!
Select skip and continue for importing settings from VS Code (although you're welcome to import them if you use already use VS Code!)

Next, customize your theme.
Select Continue.

Set your preferred keybindings. VS Code is the default.
Select Continue.

You'll also see Cursor's Data Sharing agreement. By default, Cursor learns from your code. You can disable this by enabling Privacy mode via Cursor settings.

Check the box to proceed.
Select Continue.

Finally, review your settings.

Select Continue.

Awesome! You've logged in and are ready to go.

How is Cursor different from other AI coding tools?

Many tools add AI to an existing editor. For example GitHub Copilot gives you suggestions and chat inside VS Code or other editors.

Others are terminal-based. You run an AI coding agent and it can edit files, but you're still switching between the terminal and your editor to read and modify AI code.

Cursor is different because it integrates an IDE with an AI chat. The editor and the AI are the same app out of the box. You can read & modify code as well as get AI to write the code for you, without having to open another app.

Your editor is set up and ready to go. Next up, we'll bring in the project code you'll be working with.

Clone the Starter from Github

Now that we have Cursor set up, we need to download our Spotify clone's starter/boilerplate code so we can build on top of it later.

In this step, get ready to:

Download and install Git.
Clone our starter code from Github.

What are Git and GitHub?

Think of Git as a time machine for your code. It's a version control system that tracks every change you make, so you can rewind to a previous version if something goes wrong.

GitHub is like a social network for your code projects. It's a web-based platform that hosts Git repositories, allowing you to store your code online, collaborate with others, and share your work.
Cloning a repository means creating a local copy of the project on your computer, so you can work on it.

Open Cursor.
On the Cursor welcome screen, select Clone repo.

Paste the URL https://github.com/itsnextwork/nextsound.git into Cursor.

Press Enter.

Getting a 'Git not found' error?

That's totally okay! This just means you don't have Git installed on your computer.

Head over to git-scm.com/downloads.
Download and run the installer for your operating system.
Once installed, restart your IDE and try again.

Still having issues? Troubleshoot here or share your error with the NextWork community!

Choose your Desktop as the destination.
Select as Repository Destination.

🍎 macOS

When prompted, choose to Open the cloned repository.

Fantastic! You've got the project code on your machine. Now we're ready to start exploring it.

🖼️ Windows

When prompted, choose to Open the cloned repository.

Fantastic! You've got the project code on your machine. Now we're ready to start exploring it.

Pro Tip: Clone from the command bar

You can also clone repositories using Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux), type Git: Clone, paste the URL, and select your destination folder.

You've got the code. Now let's find out what it does. In the next step, you'll use Cursor's AI to explore the codebase.

Explore NextSound

You've got the project code on your machine. Now it's time to understand what's inside. Before building new features, let's explore the existing codebase using Cursor's AI chat.

In this step, get ready to:

Explore the codebase using Cursor's chat.
Learn about AI Context Windows.

Explore the Codebase with Cursor's Chat

Instead of manually reading through every file, let's ask Cursor to give us a tour so we can learn how the app is structured.

Open Cursor's AI pane on the right.

Copy & paste the prompt into the chat:

Explain this web app to me. 

- How are the files organized? 
- What does this web app do? 

Please be concise, max 4 sentences.

Press Enter.

What is Cursor's Chat?

The chat in Cursor is your conversational coding partner. You can ask it questions about your code, tell it to write new code, or ask it to fix bugs. It's aware of your entire project, so it gives context-aware answers.

Read Cursor's response.

It should explain the app's purpose, file structure, and key components.

How does Cursor understand my project?

Cursor reads your files to build an understanding of how everything fits together. This is called indexing. When you ask a question, it uses this index to find relevant code and provide accurate explanations.

💡 Can I talk to Cursor about things other than code?

Yes! Cursor is powered by a general-purpose large language model. You can ask it for ideas, help with documentation, or general questions.

You might notice a percentage icon showing your context usage.

What does 'context' mean for Cursor?

AI Context refers to all the information Cursor can see when responding to you, including your open files, selected code, and chat history. The 15% context indicator shows that Cursor is currently using 15% of its available context window.

💡 Why is context important?

Context is important because it helps Cursor give better answers. A larger context window lets it see more of your project, but the tradeoff is slower and more expensive requests since there’s more data to process.

Want to learn more about context? Check out the 💎 Secret Mission!

What happens when Cursor runs out of context?

You've got a solid understanding of how the app works. Next, we'll get it running so you can see it in action.

Run the app

Now that you understand how the app is structured, let's get it running locally so we can see our code updates live in the next step.

In this step, get ready to:

Install NextSound's dependencies.
Run the app locally.

Install Dependencies

To see the app in action, we need to install its dependencies.

Press Cmd+Shift+L (macOS) or Ctrl+Shift+L (Windows/Linux) to open Cursor's AI chat.
Copy and paste the prompt: Install the project dependencies
Press Enter.

Cursor will run npm install for you.

What is npm?

npm stands for Node Package Manager. It's a tool that comes with Node.js and helps you manage the external libraries (packages) your project uses.

💡 What does npm install do?

This command reads the package.json file and installs all the necessary project dependencies.

The package.json file in NextSound lists all the required packages, and npm install reads that file to download them.

Look at the file explorer on the left, do you see a node_modules folder?

✔️ Yes, I see it

Great! That means the dependencies installed successfully. Onwards!

What's the node_modules folder?

This is where npm stores all your project's dependencies. It can get quite large, so it's excluded from GitHub. Each developer creates their own by running npm install.

ⓧ No, I have an error

Getting a 'npm not found' error?

That's okay! This means you don't have Node.js installed on your computer. Node.js is a runtime environment that executes JavaScript code outside of a web browser, and npm (Node Package Manager) comes bundled with it. Let's solve it together:

Visit the official Node.js download page.
We recommend downloading the LTS (Long-Term Support) version, as it's the most stable. Choose the installer that matches your operating system (macOS, Windows, or Linux).
Once downloaded, run the installer and follow the on-screen instructions.

Make sure you pick the right installer for your computer.

Once installed, restart your terminal and try the npm install command again.

If you're still running into issues, ask our AI or ask in the NextWork community!.

You'll know it works if you see the node_modules folder in your file explorer. Onwards!

What's the node_modules folder?

This is where npm stores all your project's dependencies. It can get quite large, so it's excluded from GitHub. Each developer creates their own by running npm install.

Running the app

Now that we have our dependencies installed, we can run our app locally. The first thing we'll do is run our development server.

In Cursor's AI chat, copy and paste the prompt: Run the development server
Press Enter.

Cursor will run npm run dev for you in the terminal.

What do you see?

✔️ It started successfully!

Awesome! You should see a local URL given to you by the agent.

ⓧ I'm getting an error

Don't worry, Cursor can help troubleshoot this.

Look at Cursor's AI chat response, it will show you the error message.
In the same chat, ask Cursor for help (e.g. "I'm seeing this error. Can you help me fix it?").
If Cursor can't resolve it, copy the error message and share it with the NextWork community for help!
Once resolved, ask Cursor to run the development server again.

Hold Cmd (on macOS) or Ctrl (on Windows/Linux) and click the link (e.g. http://localhost:5173) to open the app in your browser.

Does the app load when you open it in the browser?

✔️ It loaded successfully!

Awesome! The app should look like this:

ⓧ Something not right?

Don't worry, Cursor can help troubleshoot this.

Ask Cursor for help (e.g. "I'm seeing a blank screen, Can you help me fix it?").
If Cursor can't resolve it, take a screen shot and share it with the NextWork community for help!

Wooohoo! You've got NextSound running. Now you're ready to work with Cursor and start making changes!

Build a New Feature with AI

Now that you've got the app running, we're going to plan and build a queue feature so users can manage their upcoming songs.

In this step, get ready to:

Plan the queue feature with Cursor.
Implement the plan with Cursor Agent.
Verify the queue feature loads.

Plan the Queue Feature

Before Cursor writes any code, you'll describe the feature using a prompt in Cursor's Ask mode so it can create a plan for you to review.

Start a new chat to keep the context clean.

Why start a new chat?

Starting a new chat resets your Context Window, clearing out old messages and helping Cursor focus its attention just on planning the queue feature, making your context usage more efficient.

Select the Agent mode pill to open a dropdown of different modes.

Select Ask instead.

What's the difference between Agent and Ask mode?

Agent mode can edit your files, create new ones, and run commands. Ask mode can only read your code and suggest changes.

Use Agent when you want Cursor to start building something, and Ask when you just want advice or a plan.

In Ask mode, copy & paste the prompt:

Plan a change with me – I'd like to add a queue feature to our music web app! The goal is to let users manage their upcoming songs in a dedicated area.

Key requirements:
1. Add an "Add to Queue" button on each song tile. I.e. When a user clicks the "Add to Queue" button, a panel should open from the right-hand side of the screen that shows the queue in a vertical list.
2. Users should be able to add songs to this queue panel.
3. Show the currently playing song prominently.
4. Allow users to reorder or remove songs from the queue.
5. Make it easily accessible but not intrusive to the main experience. It should feel natural and intuitive for managing what plays next.
6. Please make sure to use only the packages and versions defined in `package.json`.

Press Enter.

Read over the response

This helps you understand what Cursor is about to do.

Look out for red flags like Cursor wanting to delete files or proposing changes that don't match what you asked for.
If you spot something off, type your feedback to course-correct before moving on.

Why plan before building?

Asking Cursor to create a plan first is like asking a builder for a blueprint before they start construction.

It lets you review the proposed changes, catch potential issues, and make sure Cursor's approach aligns with your vision before it writes a single line of code.

What makes a good AI prompt?

Implement the Plan

Once you're happy with the plan, it's time to let Agent mode do the work.

Switch Cursor's mode back into Agent mode.

Copy and paste the prompt: let's go!
Press Enter.

Is Cursor editing my files right now?

Yes! Since you're in Agent mode, Cursor can directly edit your files, create new ones, and even run commands. It's actively working on your codebase, following the plan it created.

Once Cursor finishes, select Keep All to apply them.

Verify the Queue feature works

After Cursor finishes implementing the plan, we need to check if the feature works as we expect it to.

Check out the new queue feature in the browser.

Take a look at the result, does the queue feature work as you expected?

✔️ It works!

Great! Your queue feature is working as expected. Continue to the next step to refine and troubleshoot any edge cases.

ⓧ Something's broken

No problems! In the next step we'll fix these issues in the next step.

ⓧ My feature looks different

That's totally okay! AI models don't produce the exact same output every time, so your version might look different. It's part of working with AI.

Your queue feature is live! But it might not be perfect yet. In the next step, you'll troubleshoot any issues and iterate until it's just right.

Troubleshoot and Iterate

Now that we have the queue feature implemented, we need to troubleshoot any errors and iterate until it works like we want it to.

In this step, get ready to:

Fix technical errors using Cursor chat.
Fix UI bugs using screenshots.
Confirm the queue feature works end to end.

Pro Tip

Start a new chat for each round of feedback. This prevents context from previous conversations from confusing Cursor.

✔️ It's working

Amazing! Double check everything works with the checklist below…

ⓧ Something isn't working

If your Spotify clone is showing errors or the queue feature isn't loading, you can paste error messages directly into Cursor chat for help.

Copy the error message from your terminal or browser console.

Web app showing a blank page?

If your web app loads but shows a blank page, check the browser console for errors:

macOS: Press Cmd+Option+J (Chrome) or Cmd+Option+C (Safari)
Windows: Press Ctrl+Shift+J (Chrome) or F12 (Edge)
Linux: Press Ctrl+Shift+J (Chrome) or F12 (Firefox)

Paste the error into a new Cursor chat. Here's an example prompt:

I'm getting these errors in my project!

**Here is the Error:**
[[ERROR="paste error message here"]]

**Can you:**

- Explain why these errors happen?
- Help me resolve these issues!

Press Enter.

If you see a different error, ask our AI or ask the NextWork community for help.

ⓧ I can't find the queue feature

If the queue feature is completely off or missing, it's often faster to start over with a more detailed plan file.

First, revert the changes made by Cursor:

Go to the Changes panel in the source control tab.

Above the list of changed files, select Discard All Changes.

Next, create a detailed plan file:

Select the New File... icon.

Name the file plan.md.

Add your detailed instructions for the feature into plan.md.

The more specific you are, the better the result will be.

Pro Tip

Don't want to write your own plan? You can download a pre-written plan.md file here and save it to your project's root directory.

In a new chat, copy & paste the prompt:

Review and implement the queue feature defined in @plan.md

Press Enter.

Cursor will create a new to-do list based on your detailed plan and begin the implementation.

If you see a different error, ask our AI or ask the NextWork community for help.

ⓧ I want to fix a UI bug

If the feature works but has visual issues, you can give Cursor a screenshot so it can see exactly what's wrong.

Take a screenshot of the part of the web app you'd like to fix.

For example, the text in the queue might be hard to read against the background.

How do I take a screenshot?

On macOS, press Cmd+Shift+4 to select an area to capture. On Windows, use the Snipping Tool or press Win+Shift+S. On Linux, press Print Screen (full screen) or Shift+Print Screen (area selection - varies by desktop environment).

In a new chat, attach the screenshot and copy & paste the prompt:

I'm looking at the Queue feature.
I can pop open the Queue sidebar, but the text is black and not quite visible.
Can we make the text white?

Why use an image in the prompt?

A screenshot gives Cursor visual context of the bug, letting it see the issue and identify the relevant HTML and CSS more accurately than text alone. This is multimodal AI.

Cursor can understand and process different types of information (text and images) at the same time.

Press Enter.

After Cursor has attempted a fix, check the result in your browser.

✔️ Fixed

Great work! The fix worked, and the UI should now be correct.

ⓧ Still an issue

Sometimes Cursor needs a bit more guidance.

How can I give better feedback?

Be specific! Point to the exact part of the UI that's wrong, describe what it's doing, and state what it should do instead. The more detail you provide, the better Cursor can understand and fix the issue.

Edit your previous prompt to be more specific. Copy & paste the prompt:

I'm looking at the Queue feature.
I can pop open the Queue sidebar, but the headers and icons are black and not quite visible.
Can we make all headers and icons white?

Press Enter.

When you submit from a previous message, Cursor will ask if you want to revert the changes made since that point.

Select Continue and revert to undo the previous attempt and try again with the new prompt.

Keep iterating until the fix looks right, or try rebuilding from a detailed plan below.

If you see a different error, ask our AI or ask the NextWork community for help.

Confirm the Queue Feature Works End to End

By providing clear instructions and iterating with feedback, you've guided Cursor to build the feature exactly as you imagined it.

Can you add tracks to the queue?

Can you open the queue sidebar?

Are you happy with the final result? If not, prompt some more till you're happy with it!

You've built, debugged, and polished your queue feature with Cursor by your side. Nicely done!

Secret mission

Your mission, should you choose to accept it, is to optimize Cursor's performance and control what it "sees" by using a .cursorignore file.

By managing Cursor's context index, you'll get faster, more relevant responses and keep sensitive files out of reach.

💎 In this secret mission, get ready to:

Learn how Cursor indexes your codebase.
Create a .cursorignore file to exclude files from Cursor's context.
Create a .cursorindexingignore file for more flexible control over indexing.

Manage Context with .cursorignore

Clean Up Your Resources

Now that we've built and tested our queue feature, it's time to decide what to do with the resources we created.

Heads up!

Your NextSound project showcases your ability to use AI-powered tools to explore, build, and debug a real web app. Consider keeping it to show off your Cursor skills to employers!

Resources to manage:

Running development server
Cloned nextsound repository

🟢 Keep everything running

If you want to continue experimenting or building on this project, no action is needed.

Your dev server will keep running until you close the terminal, and you can always restart it with npm run dev from the project folder.

🟡 Stop but keep resources

If you're done for now but want to come back to this project later:

Go to the Cursor chat window where the dev server is running.
Tell the agent to stop running the dev server.

Your project files and configuration will stay on your computer, ready to pick up where you left off.

🔴 Delete everything

If you're completely done with this project:

Go to the Cursor chat window where the dev server is running.
Tell the agent to stop running the dev server.
Delete the nextsound folder that we cloned with Cursor.

Should I delete my project?

Your NextSound project is great portfolio material! We recommend keeping it unless you're certain you won't need it.

That's a wrap!

Nice work! You've successfully used Cursor to understand, debug, and enhance your very own web app 😮‍💨👌

You've learned how to:

🚀 Get a working Cursor setup with your Spotify clone running locally.
🧠 Use chat to quickly understand a new codebase.
⚙️ Build a queue feature that lets users manage their upcoming songs.
💎 Secret Mission: Use a .cursorignore file that improves Cursor's performance and protects sensitive files.

Ready to quiz yourself? 💪

p.s. Does it say "Still tasks to complete!" at the bottom of the screen?

This means you still have screenshots left to upload, or questions left to answer!

Press Ctrl+F (Windows) or Command+F (Mac) on your keyboard.
Search for the text Return to later.
Jump straight to your incomplete tasks!
🙋‍♀️ Still stuck? Ask the community!