Build a New App Feature With Claude Code

Welcome to project #2 of the AI Workspace series!

Introduction

This project has been archived

We're no longer updating this project - we recommend checking out our active projects instead!

If you've already completed this project, don't worry! Your documentation is still available for you to check out and share.

If you have any questions, leave a question in our Discord and we'll get back to you ASAP!

⚡️ 30 second Summary

In this project, you'll take NextSound, a mini-Spotify clone, and build a complete share track feature from scratch.

We'll use Claude Code, a coding assistant that works in your terminal, to build this feature. Instead of writing every line manually, you'll describe what you want and Claude Code helps implement it.

New to Claude Code?

Woohooo, that's exciting! This project requires no experience in Claude Code or coding, so you can definitely get started here.

You also don't need to do Part 1 of our AI Workspace Series to do this one... BUT if you're curious about Cursor, definitely check it out.

Psssst... as a standalone project, you also won't need to complete this project to start the next project in the series (Part 3: Build a Database with Cursor and Supabase MCP) either. If you get stuck or want to save on Claude Code credits, feel free to jump ahead to Part 3 whenever you're ready!

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.

Want a complete demo of how to do this project, from start to finish? Check out our 🎬 walkthrough with Natasha 🎬

This project is part of a series:

  1. Part 1: Build a Mini Spotify with Cursor
  2. Part 2: You are here!
  3. Part 3: Build a Database With Cursor and Supabase MCP

Before we start Step #1...

We're working with a Spotify clone called NextSound, where you can:

  • Browse tracks from some of the most popular artists!
  • Discover new music using a search feature
  • Toggle themes between dark/light mode

By the end of this project, you'll have built a complete share track feature, which has three polished components...

  1. A share button in the frontend
  2. A copy functionality that copies a track's Spotify URL (stored as demo data in the app) to your clipboard
  3. A toast notification that confirms you've copied the URL.

You'll plan and implement this feature stage-by-stage with Claude Code!

What's Claude Code? How is it different from using Claude in my browser?

Claude Code is a command-line interface (CLI) tool that brings Claude's AI models directly into your terminal. Unlike using an AI chat in your browser, when you prompt Claude Code, it has access to your entire codebase. This means it can:

  • Edit files directly
  • Run terminal commands
  • Understand the context of your project immediately

If you're up for a challenge, there's also a 💎 Secret Mission at the end where you can use advanced Claude Code techniques to speed up development.

A note about costs

Claude Code uses pay-as-you-go API billing. When we set it up in 🛠️ Step #1, you'll have to top up a minimum of $5 USD credit into your Claude account. This project (including the secret mission) uses about $2-5 USD.

You'll learn how to pick the right Claude model for your budget and monitor usage as you go in this project - so you're always in control!

Set Up Your Coding Environment

Let's set up your coding environment. We'll need to make a copy of NextSound's code, install Claude Code itself, then create your Claude account... let's do it step by step together!

In this step, you're going to:

  • Clone NextSound's code repository.
  • Install Node.js, a tool you'll need to run Claude Code.
  • Install Claude Code.
  • Create your Claude account.

Clone the Project Repository

If you've done the previous project in this series, you might find that you already have NextSound in your computer!

Search in your Desktop - do you already have a folder called nextsound?

I don't have NextSound

We'll clone NextSound, a music web app, from GitHub.

  • Open your IDE.

Which IDE should I use?

We'll use Cursor for this step by step guide, but you can pick another IDE like VS Code if you prefer.

🙋‍♀️ I don't have an IDE!

No worries - let's install one now. Check out Cursor's download page if you'd like to have a go at doing this on your own, or try Step #1 of our Build a Mini Spotify with Cursor project for step by step guidance!

  • Select the clone option in your IDE. In Cursor, click Clone repo in the welcome screen.
  • In the repository URL field that appears, enter https://github.com/itsnextwork/nextsound.git.

Why this specific URL?

This URL points to NextSound's code repository on GitHub! The itsnextwork part is the organization name, nextsound is the project name, and .git tells us it's a Git repository that can be cloned.

  • Press Enter on your keyboard.

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!

  • Select your Desktop as the repository destination.
  • When prompted, choose to Open the cloned repository.

This will open NextSound right inside Cursor.

I already have NextSound

Nice! Let's build on your awesome work from the previous project.

  • Open your IDE.

Which IDE should I use?

We'll use Cursor for this step by step guide, but you can pick another IDE like VS Code if you prefer.

🙋‍♀️ I don't have an IDE!

No worries - let's install one now. Check out Cursor's download page if you'd like to have a go at doing this on your own, or try Step #1 of our Build a Mini Spotify with Cursor project for step by step guidance!

  • Select Open project.
  • Select your nextsound folder.
  • Select Open.
  • Voilà! NextSound repo is all ready to go.

Install a prerequisite for Claude Code - Node.js

What is Node.js?

Node.js is a runtime environment that lets you run JavaScript code outside of web browsers. Think of it like this: JavaScript was originally designed to run only in web browsers (like when you visit a website), but Node.js acts as a translator that lets JavaScript run on your computer's operating system.

💡 Why do we need Node.js?

Many modern developer tools, including Claude Code, are built using JavaScript because it's a versatile programming language. Claude Code needs to run on your computer (not in a browser), so you'll need Node.js to run it.

We need Node.js installed to run Claude Code, let's check if you already have it!

  • In your IDE's menu bar, find the option to open a new terminal.

Pro Tip

You can also use the keyboard shortcut Ctrl + Shift + ` to open a new terminal.

🍎 macOS

🖼️ Windows

  • Run the following command:
node --version

Terminal tip: How to stop a running command

If you ever need to cancel a terminal command that's running (like if it's taking too long or you made a mistake), press Ctrl+C on your keyboard. This sends a "stop" signal to the terminal and returns you to the command prompt. You'll use this throughout the project when stopping development servers or canceling operations.

  • Check your terminal! What do you see?

A 'command not found' error

If you don't have Node.js, let's run through the steps for installing it now 🤠

  • Where it says get a prebuilt Node.js, select your operating system from the dropdown.

Can I install Node.js using the terminal instead?

Yes! Advanced users can install Node.js using package managers like Chocolatey (Windows), Homebrew (Mac), or other command-line tools shown on the download page. However, for this project, we'll use the graphical installer method as it's more straightforward and ensures all components are set up correctly.

macOS

  • Download the Installer for macOS.

It'll take less than a minute for the Installer to download - once it's done, you'll find it in your Downloads folder!

  • Open your Downloads folder.
  • Open the Installer.

The Node.js Installer will launch with a welcome screen.

  • Click Continue.

The installer will display the Software Licence Agreement.

  • Click Continue.

A dialog will appear asking you to agree to the licence terms.

  • Click Agree to continue.

The installer will show the Installation Type screen. This indicates that Node.js will take 300.5 MB of space.

  • Click Install to proceed with the standard installation.

macOS will ask for authentication.

  • Enter your password or use Touch ID to authorize the installation.

The installer will validate and start installing Node.js.

This installation should take about 1-2 minutes... time for a stretch! 🧘🏻‍♀️

Once the installation is complete, you'll see a success message confirming Node.js and npm have been installed.

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.

  • Click Close.

After closing, macOS will ask if you want to move the installer to the Bin.

  • Click Move to Bin to clean up the installer file.

Windows

  • Download the Windows Installer (.msi).

It'll take less than a minute for the Installer to download.

  • Open your Downloads folder.
  • Open the Node.js installer.

Windows will show a security warning asking if you want to run this file.

  • Click Run to continue.

The Node.js Setup Wizard will open.

The installer will display the End-User Licence Agreement.

  • Check the box "I accept the terms in the License Agreement"
  • Click Next.
  • Choose the installation location. Let's keep the default location C:\Program Files\nodejs\
  • Click Next.

Next, the installer will show you custom setup options. The default selections include Node.js runtime, npm package manager, and adding Node.js to your PATH.

Extra for Experts: What does "Add to PATH" mean?

Adding Node.js to your PATH environment variable lets you run node and npm commands from any terminal window without specifying the full installation path. This is essential for using Node.js and npm easily.

  • Keep all defaults selected.
  • Click Next.
  • Click Install to begin the installation.

You may be asked for administrator permissions - if this happens, select Allow.

  • Wait for the installation to complete.
  • Once finished, you'll see a success message. Click Finish to exit the setup wizard.

Let's check we've installed Node.js properly.

  • Head back into your terminal in your IDE.
  • Run the command to check your node version again:
node --version
  • You should see a ✨ beautiful ✨ version number this time.

You've installed Node.js! Next up, let's install Claude Code 🔥

A version number

Great! That means you already have Node.js, let's go straight to installing Claude Code.

Install or Update Claude Code

Let's check if you already have Claude Code!

  • Make sure your terminal is still open in your IDE.

My terminal is not open!

No worries! Let's use the menu bar to open a new terminal.

Or, you can use this keyboard shortcut: Ctrl + Shift + `

  • Run the command to check your Claude version:
claude --version
  • Check your terminal! What do you see?

A 'command not found' error'

Aha! That tells us Claude Code isn't installed in your computer yet.

My error message looks different!

If you're on Windows, you might see: claude : The term 'claude' is not recognized as the name of a cmdlet...

This is because Windows PowerShell uses different terminology than Mac/Linux terminals. Instead of "command not found," PowerShell says "not recognized as the name of a cmdlet" - but both errors mean the same thing: Claude Code isn't installed yet!

Let's install Claude Code and get it authenticated with your Anthropic account.

  • In your IDE's terminal, run the following command:
npm install -g @anthropic-ai/claude-code

I ran into a permission error!

Whoops! You might run into a permission error like this:

If you're using a Mac or Linux, have a go at running the same command using sudo. If you're using Windows, have a go at running your terminal as an administrator.

After you run the command, npm will work its magic. You'll see some text scroll by as it downloads and installs the package.

What is npm?

npm is the default package manager for Node.js, which means it handles downloading and managing your project's dependencies (packages and libraries) that it needs to run.

💡 What does @anthropic-ai mean in this command?

The @anthropic-ai part is called an "npm scope" or "organization namespace", this tells us the package was published by Anthropic (the company that created Claude). The full package name @anthropic-ai/claude-code means "the claude-code package from the Anthropic organization."

💡 What does the -g flag mean?

The -g flag is short for --global. When you install an npm package globally, it's placed in a central location on your system. This makes the command (in this case, claude) available in any terminal window, no matter which folder you're currently in.

A successful installation will look something like this.

What are the 3 packages that were added?

When you install @anthropic-ai/claude-code, npm actually installs multiple packages:

  1. @anthropic-ai/claude-code - The main Claude Code CLI tool
  2. Dependencies - Additional packages that Claude Code needs to function (these are listed in the package's package.json file). The exact packages can vary between versions, but they typically include libraries for handling API communication, terminal interfaces, and file system operations.

💡 What does "npm fund" mean?

You might see a message saying "run npm fund for details" after installation. This is npm's way of showing you which installed packages accept financial support from developers.

Awesome! You've just installed Claude Code.

A version number

Great! This means you already have Claude Code installed. Let's make sure you're on the latest version and get it running in your IDE.

  • Run claude update to update to the latest version before continuing.

That worked

Great! Your Claude Code installation is now up to date. You're all set to continue with the next steps.

I ran into a permissions error

No worries, we can fix this together! Which OS are you using?

🍎 macOS / Linux

Seeing a permission error like this?

If you're using a Mac or Linux, you might need to use sudo claude update so you're running the command with admin permissions.

🖼️ Windows

On Windows, you might see an error like this when trying to update:

Error: EPERM: operation not permitted, access 'C:\Users\YourName\AppData\Roaming\npm\claude.cmd'

This happens because Windows requires administrator privileges to modify files in certain system directories.

Solution: Run your terminal as an administrator:

  • Close your current terminal window
  • Press Windows + R to open the Run dialog
  • Type cmd and press Ctrl + Shift + Enter (this runs Command Prompt as administrator)
  • Click Yes when Windows asks for permission
  • Navigate back to your project folder: cd "C:\path\to\your\project"
  • Run claude update again

Alternatively, you can right-click on your terminal application and select "Run as administrator".

I ran into another error!

Errors are awesome learning opportunities! Troubleshoot your error here, or share your question with the NextWork community if you're still stuck.

  • Run claude --version again.

I'm running into errors!

If you're running into errors, or claude --version is showing you an older version number, have a go at:

  1. Kill your terminal, and start a fresh one. Run the claude --version command again.
  1. Troubleshooting your error here
  2. Asking the NextWork community for help!

Run Claude Code in your IDE

  • In the terminal, type claude
  • Press Enter.

I ran into an error?

Let's investigate! Troubleshoot your error here.

💡 What does the claude command do?

Running claude starts a conversation interface where you can chat with Claude AI about your code, ask it to implement features, debug issues, or explain how things work. Because we installed it globally with the -g flag earlier, the claude command is available from any directory on your computer.

💡 Why does Claude Code run in my terminal?

Claude Code is a CLI (Command-Line Interface) tool, which means it's designed to run in a terminal rather than as a graphical application with windows and buttons. This means Claude Code can directly execute shell commands, read and modify files in your project, run build scripts, and interact with other command-line tools (like git, npm, or docker).

What do you see in your terminal?

Choose text style

Claude will wake up and greet you with a welcome screen! First, you'll be asked to choose a text style that looks best with your terminal.

  • Use the arrow keys to select your preferred theme (we recommend Dark mode).
  • Press Enter.

Next, Claude will ask you to choose a login method.

  • Use the arrow keys to select Anthropic Console account.

What is the difference between Subscription and Anthropic Console account?

A subscription is ideal if you want a predictable monthly cost, that covers both Claude Code and Claude Chat on your browser.

An Anthropic Console account, on the other hand, uses API Billing so it charges based on actual usage. This is ideal for teams or businesses that need flexible spending and detailed cost tracking.

  • Press Enter.

Claude will automatically open a new tab in your web browser.

What do you see?

A login page

Nice! Let's log you into Claude.

  • Click Continue with Google (or enter your email to create a new account or sign in to your existing account).
  • If using Google, select your Google account from the list.
  • Enter your Google password to continue.
  • Review the permissions Claude is requesting.
  • Click Continue to authorize.

Depending on whether you've got a Claude account, you'll see a different setup screen.

  • If you don't have an account, Claude will ask you to fill in your name.
  • If you do have a Claude account, Claude will ask to authorize a connection to Claude Code.
I don't have a Claude account
  • Fill in your full name and what you'd like to be called.
  • Check the box to agree to Anthropic's terms.
  • Click Continue.
  • Select Individual as your account type.
  • Anthropic will ask for your permission to let Claude Code access your account.
  • Click Authorize.

You'll be prompted to buy credits to get started.

  • Enter your credit card and billing information.
  • Click Buy $5 of credits.
Why do I need to add a payment method?

Claude Code uses API billing, which means you pay for what you use. Adding a payment method and purchasing credits ($5 minimum) lets you start using Claude Code. You won't be charged until you actually use the service, and you can set spending limits to control costs.

  • Wait for the payment to process.

Once complete, you'll see a success message: "Build something great - You're all set up for Claude Code."

I already have a Claude account

Anthropic will ask for your permission to let Claude Code access your account.

  • Click Authorize.
What if I haven't added credits to my account yet?

If this is your first time using Claude Code and you haven't purchased credits yet, you may be prompted to add a payment method and buy credits (minimum $5) before you can proceed. Follow the payment instructions to purchase credits, then continue with the authorization process.

Once complete, you'll see a success message: "Build something great - You're all set up for Claude Code."

Authorize a connection

Anthropic will ask for your permission to let Claude Code access your account.

  • Click Authorize.
I see a form to buy credits!

If Claude's detected that your account doesn't have any credits, it will ask you to purchase $5 USD of credit to get started.

Follow the screens to purchase $5 USD in credits, and ask here or the NextWork community if you're ever stuck!

Once complete, you'll see a success message: "Build something great - You're all set up for Claude Code."

Head back to your terminal in Cursor. You should see the message: Login successful. Press Enter to continue...

  • Press Enter. (And give yourself a pat on the back 🕺)

Claude will then show you some security notes about reviewing Claude's responses and prompt injection risks.

  • Press Enter to continue.

Next, Claude will ask if you want to use the recommended terminal settings (like Shift+Enter for newlines). This helps improve your coding experience.

  • Select Yes, use recommended settings.
  • Press Enter.

Claude Code will prompt you to trust the files in the current folder.

  • Select Yes, proceed.

Why does Claude ask for trust?

This is a security feature. Claude needs to read your project's files to understand the code and provide helpful, context-aware suggestions. This message is a safeguard, confirming that you're okay with an external tool (Claude Code) accessing and running your local files. That's why it's important we only run Claude Code in folders/repos we know and trust, like NextSound!

Repos with malicious code can make Claude Code do things you don't expect e.g. pass information to a third party, which we wouldn't want 😬

All done - Claude Code is now ready for your first prompt.

You did it! Claude Code is now fully set up and ready to start analyzing our project. Fantastic work!

Trust the files in the folder

Claude Code will prompt you to trust the files in the current folder.

Why does Claude ask for trust?

This is a security feature. Claude needs to read your project's files to understand the code and provide helpful, context-aware suggestions. This message is a safeguard, confirming that you're okay with an external tool (Claude Code) accessing and running your local files. That's why it's important we only run Claude Code in folders/repos we know and trust, like NextSound!

Repos with malicious code can make Claude Code do things you don't expect e.g. pass information to a third party, which we wouldn't want 😬

  • Select Yes, proceed.

Claude Code's ready!

If Claude Code's ready to go - perfecto!

Other

That's tea 🫖

If you're feeling lost, have a go at troubleshooting and finding your way out.

The NextWork Community is always here for you if you'd like to share your question with someone else :)

I'm still seeing other popups on my screen

You might see a popup in your terminal that says you've installed the VS Code extension - this is because VS Code automatically installs this extension when you run the claude command!

Just press Enter on your keyboard, and you should be all good to start using Claude Code.

Understanding AI Models and Costs

Let's run our first few Claude Code commands - these will help us with managing costs!

The first command is /model, which will help us pick the right Claude model for our budget.

  • Type /model in the Claude Code prompt window.
  • Press Enter.

Nice! You've just run your first Claude Code command.

Let's use the most cost-efficient model.

  • If you have a Default (recommended) option, choose that.
  • Otherwise, choose Sonnet for the best learning experience with detailed explanations and code suggestions.
  • Press Enter.

What are Claude's AI models?

Claude offers different AI models, each with different capabilities and costs:

  • Claude Haiku - Fastest and most cost-effective for simple tasks
  • Claude Sonnet - Balanced performance and cost for most tasks (good choice for this project)
  • Claude Opus - Most powerful for complex reasoning tasks, but more expensive

You can switch models anytime with /model

💡 Extra for Experts: How does pricing work in Claude Code?

Here's how pricing works:

You're charged based on tokens (roughly 4 characters = 1 token). Every time Claude reads your code or generates a response, it consumes tokens. Input tokens are what you send (your prompts + files Claude reads), and output tokens are what Claude generates (chat responses + code it writes). For this project, expect to spend $1.00 - $5.00 depending on which model you choose.

Pricing varies depending on the model you're using when it consumes tokens:

  • Haiku: ~$1 per million input tokens, ~$5 per million output tokens
  • Sonnet: ~$3 per million input tokens, ~$15 per million output tokens
  • Opus: ~$15 per million input tokens, ~$75 per million output tokens
  • Run /cost for the first time to check your usage.

What does the /cost command do?

The /cost command shows your token usage and estimated costs for the current conversation. Use this to monitor your spending, especially when you're working on larger features.

If you want to check how much you spent on Claude Code in total (not just in this chat), check out your Claude Code console.

You'll notice a total cost of around $0 - sweet! We'll check this again after we've built a new feature using Claude Code.

Set Up a Budget to Control Costs

Now that you understand the costs, let's set up a budget limit so we don't accidentally spend more than we'd want. We'll set a $5 budget for this project.

I need to login!

Nice! Let's log you into Claude.

  • Click Continue with Google (or enter your email to create a new account or sign in to your existing account).
  • If using Google, select your Google account from the list.
  • Enter your Google password to continue.
  • Click Continue to authorize.

Nice work! You should see your console's home page now.

I see my Console's home page!

Sweeeeet! Welcome back to your Anthropic console.

  • Click on Limits in the left sidebar.

I don't see the Limits button!

Make sure you've popped open the left sidebar! You can expand it using a button on the top left hand corner.

You'll see the Rate limits page showing API usage limits for different Claude models.

  • Scroll down to find the Spend limits section.

In the Spend limits section, you'll see your current monthly limit (default is $100).

  • Click the Change Limit button.

A modal will appear titled Edit spend limit.

  • Enter $5 in the text field.
  • Select Set Limit.

Your monthly limit should now be $5.

Why set a budget?

Setting a budget is like putting guardrails on your spending. API costs can add up if you're not careful, especially when experimenting or working on large projects. A $5 budget is more than enough for this project (which typically costs $0.50-$2.00) and provides a safety net. You'll receive notifications as you approach your limit, and API calls will stop when you hit it.

Let's also set up notifications so you get emails when you're about to hit your spend limit.

  • Click Add notification in the Email notification section.
  • Enter a threshold amount (like $1) so you get notified when your spending reaches that level.
  • Click Save changes.

Nice, all done! You should see an Email notification set to $1.

Initializing Claude Code in Your Project

Now to bring it all together! With Claude Code installed and authenticated, it's time to introduce it to our codebase.

In this step, you're going to:

  • Install the NextSound project's dependencies.
  • Initialize Claude Code to analyze the project's structure.
  • Manage Claude's "memory" with custom instructions.

Install Project Dependencies

Before we do anything else, we need to install the project's dependencies.

What are dependencies?

Dependencies are external libraries and tools that a project needs to function. Instead of writing everything from scratch, developers use pre-built packages (like React for UI components, or Express for web servers) created by other developers. These dependencies are listed in a project's package.json file.

  • Open a new terminal in your IDE.

Why am I starting a new terminal?

Think of your Claude Code session like a conversation - once you close it, you lose all the context and history! Running commands in a separate terminal keeps your Claude Code session running so you don't lose your conversation context.

🙋‍♀️ How do I start a new terminal again?

You've got three choices!

  1. The easiest way is to find the + button in your terminal window. If you can't find your terminal window, just press Cmd + J (MacOS) or Ctrl + J (Windows)
  1. Find the menu bar option Terminal -> New Terminal to open a new terminal again.
  2. Or use this keyboard shortcut: Ctrl + Shift + `
  • Run the following command:
npm install

What does npm install do?

The npm install command reads the package.json file in your project (which lists all required dependencies) and downloads them from the npm registry into a node_modules folder. The command also creates a package-lock.json file that locks down the exact versions of each dependency, so everyone working on the project uses the same versions.

This is why the first thing you do after cloning most JavaScript projects is run npm install - it gets all the necessary code libraries your project needs to run.

Great, our project is now ready for Claude!

Initialize Claude Code with /init

Let's get Claude Code familiar with our project.

  • Switch back into the terminal that's running Claude Code. The terminal should be called node.
  • Run /init

What does /init do?

The /init command helps Claude Code learn about your project by reading through your files and creating a "memory file" called CLAUDE.md. Think of it like giving Claude a quick tour of your project so it knows what you're working on!

🙋‍♀️ It says my balance is too low!

Aha! If you've skipped adding credits in Step #1, your balance might be close to $0. Claude Code won't work until there's credit in your account.

To keep going with this project, buy $5 in credits in your Anthropic Console and ask here if you ever get stuck.

You'll see Claude's response appear in your terminal in real-time. The terminal shows a "loading" state while Claude is thinking and generating its response.

While we wait...

Extra for Experts: Why did we install dependencies before running /init?

/init needs to know what libraries and tools your project uses to write a good summary. By running npm install first, we download all the dependencies so /init can see the complete picture of your project.

Claude Code will also ask if you want to save it to a file called CLAUDE.md.

  • Select Yes, allow all edits during this session.

What is CLAUDE.md? What's the difference between CLAUDE.md and README.md?

Both are markdown files in your project root, but they serve different purposes:

README.md is for humans. It's documentation that explains what your project does, how to install it, how to use it, and other information for people who want to understand or contribute to the project. It's typically the first thing developers read when they discover your repository on GitHub.

CLAUDE.md is for AI. It's a "memory file" specifically designed to give Claude Code context about your project. It contains instructions, coding standards, architecture patterns, and project-specific rules that Claude should follow when helping you code.

💡 What does it mean to allow all edits during this session?

When Claude Code wants to make changes to your edits, 'allowing all edits' means you're letting Claude Code make those changes without asking for your permission.

Manage Claude's Memory

One of the most powerful features of Claude Code is its memory. You can give it custom instructions that it will remember for this project. Let's teach it a rule.

What is Claude's memory?

The /memory command lets you view and edit memory files like CLAUDE.md. These files contain instructions that Claude reads at the start of every conversation, helping it understand your project structure and preferences.

💡 Why do we manage Claude's memory?

Managing Claude's memory is crucial for getting consistent, high-quality assistance tailored to your project. Here's why it matters:

  • Consistency: By adding rules to memory (like "always use TypeScript strict mode"), you ensure Claude follows your project's standards every time, without having to remind it.
  • Project-specific context: Memory helps Claude understand unique aspects of your codebase (e.g. architecture patterns) that it couldn't know otherwise.
  • Efficiency: Instead of explaining your preferences in every conversation, you set them once in memory and Claude remembers them forever in that project.

Let's add a custom instruction.

  • Type a hash (#) in your Claude Code prompt window.

You should see Claude Code shifting to a new mode that says # to memorize

  • Let's add a handy rule for Claude Code to remember!
  • Paste this prompt into the prompt window.
Do not implement new features that I didn't tell you to do. If you'd like to add something we haven't discussed, you must confirm the plan with me.
  • Press Enter.

Claude will ask where you want to save this rule.

  • Choose Project memory.

This will add our new rule to the CLAUDE.md file.

What are the different types of memory?

Claude has multiple types of memory:

  • Project Memory: This is for instructions specific to the current project and is shared with your whole team if you commit it to Git. For example, you might add: "Always use the same button style as the existing buttons."
  • User Memory: This is for global instructions that you want Claude to follow across all of your projects. For example: "Always explain what your code does in simple terms."
  • Bonus - Local Memory: Aside from Project and User memory, you also have Local Memory for your personal notes and instructions on a project (that you don't want to share with the team). For example: "I'm working on the login feature today."

💡 Extra for Experts: Where are these different types of memory stored?

Each memory type has a specific file location:

  • Project Memory: ./CLAUDE.md (the ./ means current directory - the root of your project)
  • User Memory: ~/.claude/CLAUDE.md (the ~/ means home directory - applies to all projects on your computer)
  • Local Memory: ./.claude/CLAUDE.local.md (stored in a hidden .claude folder in your project)

Let's verify our work! You can run /memory to view your memory files, or open the CLAUDE.md file in your project's root directory. You should see the new instruction we just added at the bottom.

Excellent! You've just customized Claude Code's behavior for this project.

Building a New Feature with Claude

Now that we've set up Claude Code and integrated it with our project, let's put it to work! We're going to build a brand-new "share track" feature from scratch.

This feature will let users share their favorite tracks with friends. We'll break it down into three stages: first the share button UI, then the clipboard functionality, and finally a toast notification for user feedback.

In this step, you're going to:

  • Run and explore the NextSound web app.
  • Create a three-stage implementation plan for the share feature.
  • Review and provide feedback on Claude's plan.
  • Implement the feature one stage at a time.

Run the Web App and Explore

Let's run the NextSound application and get familiar with what we're working with.

  • Jump back into the terminal where you ran npm install
  • Run pwd (present working directory) in the terminal.
  • Double check that the terminal is at the root of the project directory.

I'm not at the project root!

No worries! If you're feeling a little lost, troubleshoot here.

  • Run the following command to start the development server:
npm run dev

What does npm run dev do?

The npm run dev command starts your web app so you can see it running in your browser. It's like turning on your app so you can test it and see any changes you make.

Your terminal will show a local URL, like http://localhost:5173

What is localhost?

localhost is a special hostname that refers to your own computer. When you access http://localhost, you're connecting to a web server running on your machine, not on the internet. It's like having a private, internal website that only you can see.

The :5173 part is the port number, it's like a specific door or channel on your computer where the server is listening. Vite (the build tool NextSound uses) defaults to port 5173 for its development server. The combination localhost:5173 means "connect to the web server running on my computer, on port 5173."

  • Open this URL in your web browser.

Take a moment to explore the app!

  • Click around, look at the track cards, and get a feel for the user interface. Notice where a share button might fit naturally.

Create a Complete Three-Stage Plan with Plan Mode

Now comes the exciting part! We're going to use plan mode to have Claude create a complete, detailed plan for all three stages of our share feature.

What is plan mode? What's the difference with what we've been using?

Up until now, Claude Code has been in regular mode - when you ask it to do something, it can immediately take action by reading files, writing code, and making changes.

Plan mode is different: it tells Claude to only create a plan without taking any actions or writing any code.

Plan mode is perfect for complex features because it lets you review Claude's approach, make adjustments, and confirm you agree with the strategy before any code is written.

  • Head back to your Claude Code terminal.
  • Before typing anything, activate plan mode by pressing Shift + Tab on your keyboard.

My terminal seems stuck!

If your terminal is stuck reading files or seems frozen, try these quick fixes:

  • Press Ctrl + C to cancel the current operation and return to the command prompt
  • If that doesn't work, try pressing : then q and Enter (this exits certain modes)
  • Still stuck? Press Esc twice to reset Claude Code's context
  • Last resort: Close the terminal and open a new one, then run claude again
  • Need help? [Ask Claude Code directly](ASK=My terminal seems stuck or frozen. How can I get it working again? I was looking at my memory

You should see a "plan mode on" indicator.

  • Type the following prompt that requests a comprehensive three-stage plan:
I want to add a share feature to the NextSound app. Please create a detailed three-stage implementation plan:

Stage 1: Add a share button UI to each track card that sends a debug message to the browser console when clicked
Stage 2: Implement the clipboard functionality to copy the track's Spotify URL
Stage 3: Add a toast notification that confirms the URL was copied

Describe what you'll do in each stage, which files will be created/modified, and how each stage builds on the previous one.

I got a popup when I pasted this prompt

Aha! If you see a popup that looks like this, that's your IDE looking out for you.

When you paste multiple lines into a terminal, Cursor thinks you might be trying to execute 8 different commands at once! This could lead to unintended consequences if you're pasting code or commands you didn't actually mean to run.

For us, it's totally safe to paste the entire prompt - select Paste on the popup.

  • Press Enter on your keyboard to send the prompt.

It'll take 3-4 minutes for Claude to analyse how it can create this share feature. While we wait...

What does this prompt do? How can I write my own prompts in the future?

This prompt is carefully structured to get the best results from Claude. Here's what makes it effective:

  1. Clear goal: "I want to add a share feature" - states exactly what you want
  2. Specific request: "create a detailed three-stage implementation plan" - tells Claude you want a plan, not to make code changes
  3. Detailed stages: Breaking it into Stages 1, 2, 3 gives Claude (and you!) a clear roadmap
  4. Explicit requirements: Each stage explains exactly what should happen (button UI, clipboard copy, toast notification)
  5. Additional context: "Describe what you'll do in each stage, which files..." guides Claude to include helpful details

For your own prompts, follow this pattern:

  • Start with your goal: "I want to [do something]"
  • Be specific about what you need: "Please [create/refactor/debug] [specific thing]"
  • Break complex tasks into steps or stages
  • Mention important constraints or requirements (tech stack, style preferences, etc.)
  • Ask for what you need to see: "Explain your approach" or "Show me the code" or "List the files affected"

Good prompts lead to better results and save you time and money!

When it's ready, Claude will present an initial plan. ✋ Don't approve it yet! We need to add instructions to pause between stages.

At the bottom of the plan, Claude will ask if you want to proceed (i.e. make the changes it's proposing).

  • Select "No, keep planning".
  • Send this follow-up prompt to add strict stage-by-stage control:
Add strict instructions in this plan to ensure that we will NOT move beyond a certain stage until I have confirmed it is ready for the next stage.

Why does stage-by-stage control matter?

Think of it as building with safety gates. Each stage is a checkpoint where you verify everything works before unlocking the next stage. This prevents cascading issues and keeps you in full control of the development process.

Claude will now revise the plan, which should now say that implementation will stop after each stage until you approve moving forward. Get ready to take a screenshot! 📸

Once you're satisfied with the plan and the stage controls:

  • Select "Yes, and auto-accept edits".

Nice! Now that we've approved the plan, Claude will go straight into implementing Stage 1 i.e. creating the share button UI.

While we wait...

Stage 1: Share Button UI

Once Claude is done implementing Stage 1, it will show you what changes it's made, and how you can test that it's working.

Now let's check Claude Code's work!

  • Head to your browser where NextSound is running.
  • Refresh the page - press Ctrl + R (Windows/Linux) or Cmd + R (MacOS)

You should now see a new share button or icon on each track card!

My share button looks different to yours

The UI of your share button, and anything else you create in this project, might look different to the example screenshots. That's totally okay! Claude Code might use different styling, colors, or positioning in a new conversation. As long as you can see a share button on each track card, you're on the right track!

Next up, let's open the browser console so we can see debug messages.

  • Right click on your NextSound's page in your browser, and select Inspect or Inspect Element

Once you open the developer tools, you'll see the browser's DevTools interface.

  • Click on the Console tab.

What is the developer console? What is a console useful for?

The developer console (also called browser console or DevTools console) is a built-in tool in every web browser that shows behind-the-scenes information about your web page. Think of it as a window into what's happening inside your application. The console is useful for:

  • Viewing debug messages: Developers can log messages using console.log() in their code, which appear here
  • Seeing errors: JavaScript errors and warnings show up in red, helping you debug issues
  • Testing code: You can type JavaScript directly into the console to test things on the fly
  • Monitoring network requests: See what data your app is fetching from servers
  • Inspecting performance: Check how long operations take and find bottlenecks

In Stage 1, we'll use console.log() in our code to send a debug message when the share button is clicked. This lets us verify that clicking on the button can generate a response, before we add real functionality in Stage 2.

  • Click the share button.
  • Look at the browser console (the developer tools you opened earlier).

You should see a debug message appear confirming the button was clicked! The message might look something like: "Share button clicked for track: [track name]" or "Debug: Share clicked". This confirms the button is wired up correctly and sending messages.

✅ Share button is working

Great! Your Stage 1 implementation is successful. You should see:

  • A share button or icon visible on each track card
  • When clicked, a debug message appears in the browser console
  • The message confirms the button click (e.g., "Share button clicked for track: [track name]")

This means the UI is properly integrated and the button click is working correctly. You're ready to move on to Stage 2!

⚠️ Something isn't working

Hmm let's solve this together! What's not working?

I can't access NextSound:

You might find syntax or import errors that stop you from accessing NextSound!

Here's how you could troubleshoot it with Claude Code:

  • Take a screenshot of the error.
  • Send the screenshot to Claude Code.

How do I send a screenshot to Claude Code?

You can send a screenshot either by dragging and dropping it, or pasting it directly from your clipboard (i.e. press Cmd + V or Ctrl + V keyboard) into your Claude chat.

  • Add the prompt:
I can't access the web app because of this error - can you explain the error to me and share a plan for how we can resolve it?
  • Send the prompt, and watch as Claude gets into troubleshooting mode to identify, suggest a plan and fix the error! 🧹

The share button isn't visible:

  • Hard refresh your browser (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows/Linux) to clear the cache.
  • Check if the dev server is still running - look for errors in the terminal where you ran npm run dev.
  • Review Claude's output for any error messages during implementation.
  • Ask Claude:
I don't see the share button on the track cards. Can you verify the ShareButton component was added correctly?

The share button is visible, but no console message is showing:

  • Make sure the browser console is open and set to show all messages (not just errors).
  • Check the Console tab for JavaScript errors (red text) that might be blocking execution.
  • Click the button again to make sure the click is registering.
  • Ask Claude:
The button appears but I'm not seeing the debug message in the console. Can you check if the button click is working properly?

Other:

  • Share the error message with Claude if you see one:
I'm seeing this error: [[ERROR_MESSAGE_1="paste your error message here"]]. How do I fix it?

Still need help?

If you're completely stuck, you can also reset your progress by pressing esc on your keyboard twice. This will rewind your chat history and ask Claude to re-implement Stage 1 from scratch.

Add your error here for a quick troubleshooting session, or ask the NextWork community if you're still stuck!

Implement Stage 2: Clipboard Functionality

  • In your Claude terminal, tell Claude to proceed with Stage 2:
Proceed to Stage 2

While we wait...

Extra for Experts: how can I manage Claude Code's context?

If your Claude Code conversation is getting long, you might start to see a few warning signs from Claude Code that it's running out of context!

If you're running out of context during a long session, you have two options:

  • /compact - Summarizes your conversation history and uses that summary as the new context, freeing up space while keeping your past messages. Use this when you want to continue with context - we recommend choosing this option if you're still halfway through building your share feature!
  • /clear - Completely wipes Claude's context window and conversation history, giving you a fresh start. Use this when you want to begin with a clean slate.

In Stage 2, Claude will add some backend logic so that a track's Spotify URL gets copied into your clipboard when you select the share button.

Since we're working with demo data, the Spotify URL is stored in the web app's code (which means we're don't need the Spotify API)!

Once Claude Code is done implementing Stage 2, it'll send you a terminal message that explains how to verify this stage is working.

Test Stage 2

  • Head back to your browser where NextSound is running.
  • Select the share button on any track.
  • Open a new browser tab.
  • Paste (i.e. press Cmd+V or Ctrl+V) into your browser tab.

You should see a Spotify URL appear!

✅ Clipboard functionality is working

Excellent! Your Stage 2 implementation is successful. You should see:

  • When you click the share button, the track's Spotify URL is copied to your clipboard
  • You can paste (Cmd+V or Ctrl+V) the URL into a text editor or browser address bar
  • The URL format is correct (starts with https://open.spotify.com/)

This means the clipboard API integration is working properly and the track data is being accessed correctly. You're ready to move on to Stage 3!

⚠️ Something isn't working

Let's troubleshoot this together! What's not working?

I can't access NextSound:

You might find syntax or import errors that stop you from accessing NextSound!

Here's how you could troubleshoot it with Claude Code:

  • Take a screenshot of the error.
  • Send the screenshot to Claude Code.

How do I send a screenshot to Claude Code?

You can send a screenshot either by dragging and dropping it, or pasting it directly from your clipboard (i.e. press Cmd + V or Ctrl + V keyboard) into your Claude chat.

  • Add the prompt:
I can't access the web app because of this error - can you explain the error to me and share a plan for how we can resolve it?
  • Send the prompt, and watch as Claude gets into troubleshooting mode to identify, suggest a plan and fix the error! 🧹

Nothing gets copied:

  • Check your browser permissions - some browsers need HTTPS or explicit permission for putting this into your clipboard. Try clicking "Allow" if you see a permission prompt.
  • Make sure you're clicking the button, not just hovering over it.
  • Try a different browser (Chrome/Edge tend to have the best clipboard API support).
  • Check the browser console for errors related to clipboard or permissions.
  • Ask Claude Code:
The clipboard copy isn't working. I see this error: [[ERROR_MESSAGE_2="paste your error message here"]]. Can you help me fix the clipboard functionality?

Wrong URL copied:

  • Check if the URL format is correct (should start with https://open.spotify.com/).
  • Look at the browser console to see if Claude's debug logging shows the URL being copied.
  • Verify the track's data structure - ask Claude:
Can you show me how you're getting the Spotify URL from the track object?

Permission issues:

  • Some browsers block clipboard access in development mode. Try accessing via localhost instead of 127.0.0.1 or vice versa.
  • If using Safari, check: Safari → Preferences → Websites → Clipboard → Allow for localhost.
  • Ask Claude:
I'm getting a clipboard permissions error in my browser. Can you confirm which browser I'm using, and suggest how can I fix this?

Still need help?

If you're completely stuck, you can also reset your progress by pressing esc on your keyboard twice. This will rewind your chat history and ask Claude to re-implement Stage 2 from scratch.

Add your error here for a quick troubleshooting session, or ask the NextWork community if you're still stuck!

Implement Stage 3: Toast Notification 🍞

For the final stage, let's add user feedback with a toast notification! When you click on the share button, a "Copied to clipboard!" message should pop up.

What is a toast message?

A toast notification is a small, temporary message that pops up on the screen to give the user feedback about an action. It's called a "toast" because it pops up like bread from a toaster!

  • Tell Claude to implement the final stage:
Proceed to Stage 3

Off it goes! Once Claude Code is done, it will explain how you can verify that the final stage is working.

Test Stage 3

  • Head back to your browser where NextSound is running.
  • Click on the share button on any track.
  • You should now see a toast notification pop up at the bottom of the screen that says something like "Copied to clipboard!"

✅ Toast notification is working

Perfect! Your Stage 3 implementation is complete and successful:

  • When you click the share button, a toast notification appears on the screen
  • The toast displays a message like "Copied to clipboard!" or similar confirmation
  • The toast automatically disappears after a few seconds

The entire share feature now works end-to-end: button click → URL copied → user feedback - how good!

⚠️ Something isn't working

Nooooo worries, you've got this! What's not working?

I can't access NextSound:

You might find syntax or import errors that stop you from accessing NextSound!

Here's how you could troubleshoot it with Claude Code:

  • Take a screenshot of the error.
  • Send the screenshot to Claude Code.

How do I send a screenshot to Claude Code?

You can send a screenshot either by dragging and dropping it, or pasting it directly from your clipboard (i.e. press Cmd + V or Ctrl + V keyboard) into your Claude chat.

  • Add the prompt:
I can't access the web app because of this error - can you explain the error to me and share a plan for how we can resolve it?
  • Send the prompt, and watch as Claude gets into troubleshooting mode to identify, suggest a plan and fix the error! 🧹

Toast doesn't appear at all:

  • Hard refresh the browser (Cmd+Shift+R / Ctrl+Shift+R) to ensure the new code is loaded.
  • Check the browser console for JavaScript errors (red text) - the toast component might have a syntax error.
  • Verify Stage 2 is working - the toast only shows when the clipboard copy succeeds.
  • Ask Claude:
The toast notification isn't appearing when I click the share button. Can you check if the Toast component is being triggered correctly?

Toast appears but looks broken:

  • Check if CSS/styling was applied - sometimes styles don't load properly.
  • Look for CSS errors in the browser console.
  • Verify the toast positioning (should be visible, not hidden off-screen).
  • Ask Claude:
The toast notification appears but the styling looks wrong. Can you verify the Toast component's CSS?

Toast doesn't disappear:

  • Check if the toast has a timeout set (typically 2-3 seconds).
  • Ask Claude:
The toast notification stays on screen forever. Can you add an auto-dismiss timeout?

Toast shows wrong message:

  • Verify how Claude Code implemented the toast message - ask Claude: "Can you show me where you set the toast message text?"
  • Make sure it says something like "Copied to clipboard!"

Still stuck?

  • Share a screenshot with Claude showing what you see (or don't see): "Here's what I'm seeing: [description]. What should I check?"
  • Try refreshing from a clean state: stop the dev server (Ctrl+C), restart with npm run dev, and hard refresh your browser tab.

Still need help?

If you're completely stuck, you can also reset your progress by pressing esc on your keyboard twice. This will rewind your chat history and ask Claude to re-implement Stage 3 from scratch.

Add your error here for a quick troubleshooting session, or ask the NextWork community if you're still stuck!

Incredible! The share feature is fully functional with a proper UI, clipboard functionality, and user feedback!

We planned all three stages upfront, then implemented and tested them one at a time. Nice work 👊

Check Your Costs with /cost

Now that you've completed the share feature, let's check how much it cost to build it!

  • Run /cost in your Claude Code terminal.

What does the /cost command do again?

The /cost helps you monitor spending. It shows:

  • Input tokens - How much you've sent to Claude (your prompts, code files read, etc.)
  • Output tokens - How much Claude has generated (responses, code written, etc.)
  • Estimated cost - The total cost for this conversation in USD

Secret mission

In this secret mission, you'll learn to build features at twice the speed using custom commands!

Here's a sneak peek of an advanced share feature we're about to build...

Plan and implement at twice the speed

Delete your resources

Delete your resources

Congratulations on completing this incredible project! Now that we've built our AI-powered workflow, it's time to clean up the resources we created. This is good practice to keep your local machine and cloud accounts tidy.

Resources to delete:

  • Uninstall Claude Code.
  • Delete the local nextsound project folder.

Uninstall Claude Code

  • Open your terminal.
  • Run the following command to uninstall the global Claude Code package:
npm uninstall -g @anthropic-ai/claude-code

I ran into a permission error!

If you're using a Mac or Linux, you might need to use sudo npm uninstall -g @anthropic-ai/claude-code so you're running the command with admin permissions. If you're using Windows, have a go at running your terminal as an administrator.

  • To verify it's gone, check claude:
claude --version
  • You should see a "command not found" error!

Delete Local Project

  • In your file explorer or terminal, navigate to the directory where you cloned the nextsound project.
  • Delete the entire nextsound folder.

That's a wrap!

That's a wrap!

Ayyy let's GOOOO! You've just built a brand new app feature using Claude Code!

In this project, you:

  • 🛠️ Set up and authenticated Claude Code CLI in your development environment.
  • 🚀 Initialized Claude Code in a project and managed its memory with custom instructions.
  • 💻 Mastered essential Claude Code commands (/init, /clear, /model, /memory).
  • 📋 Used plan mode to create and refine multi-stage implementation plans.
  • ✨ Built a complete share feature from scratch using staged implementation.
  • 💰 Monitored API costs and managed your budget throughout development.

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!

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