Claude Code Tutorial - Build Apps 10x Faster with AI

Cloud Code is changing the way software gets built. At Anthropic, engineers are

gets built. At Anthropic, engineers are already using it to write up to 90% of their code. And in this course, you will

their code. And in this course, you will learn how to use it to build and deploy real production-grade software with AI.

We'll build a full-stack AI-powered support ticket system, the kind of app you would actually ship to real customers. It has authentication and

customers. It has authentication and role-based access control, so the right people see the right things.

We'll build a rich ticket management experience, so agents can quickly and easily find what they need.

And we'll add AI-powered features that make the whole system smarter, summarizing long ticket conversations in one click, and polishing agent replies to sound

professional and on brand.

And here's my favorite part. When a

customer sends us an email, an AI agent in the background picks it up, analyzes it, and sends a professional reply within seconds. No human involved. And

within seconds. No human involved. And

if the ticket can't be resolved, it gets escalated to a real agent to handle.

This is a real engineering course, not a vibe coding experiment where 50 AI agents build an app while you sleep.

We'll review every line of AI-generated code, identify issues, refactor constantly, and make sure everything follows solid engineering practices [music] backed by hundreds of automated tests.

This is the app I started building to solve a real problem for my own coding school. I built this with Cloud Code in

school. I built this with Cloud Code in about two full working days. If I wanted to build this manually with all the tests and all the features, we're talking two to three weeks minimum.

That's the power of building with AI.

And in this course, I'm going to show you exactly how I did it, from an idea to a live deployed application. I'm Mosh

Hamedani, a software engineer with over 20 years of experience, and I've taught millions how to code and become professional software engineers through my YouTube channel and online school

codewithmosh.com. If you're new here,

codewithmosh.com. If you're new here, make sure to subscribe as I upload new videos all the time.

Now, let's jump in and get started.

To get the most out of this course, you should have at least three months of experience building React applications.

That means you're comfortable with JavaScript and TypeScript, you understand HTML and CSS, you know how to work with components, state, props, and hooks, and you have built applications

that talk to APIs. Now, we'll also build a back-end in this course. I'm using

Express, but you might be wondering, why not Next.js? Well, there are a few

not Next.js? Well, there are a few reasons. First, not everybody likes

reasons. First, not everybody likes Next.js. A lot of developers prefer a

Next.js. A lot of developers prefer a complete separation between front-end and back-end, and that's how many real-world applications are structured.

Some teams even use a completely different language for the back-end. So,

I wanted this course to reflect that reality. With Express, you can clearly

reality. With Express, you can clearly see what's happening on each side without any framework magic blurring the lines. Having said that, everything you

lines. Having said that, everything you learn here applies directly to a Next.js project, too. Because our focus here

project, too. Because our focus here isn't on the tooling, it's on the engineering mindset you need to build and ship software with AI. So, some

familiarity with Express or any other back-end framework is helpful, but it's not required. I'll explain what we're

not required. I'll explain what we're doing as we go. Now, if you want to strengthen your React or Express skills, I've got comprehensive courses for you.

I'll put the links below this video. So,

that's pretty much all you need. You

don't need any experience with Cloud Code or other AI coding agents. We'll

start from scratch, and I'll teach you everything you need to know.

Now, one more thing. Even though we use Cloud Code throughout this course, the concepts apply to other coding agents as well. So again, our focus here isn't on

well. So again, our focus here isn't on the tooling, it's on the engineering mindset. So, that's all about course

mindset. So, that's all about course prerequisites. Next, we're going to talk

prerequisites. Next, we're going to talk about course structure.

[music] Now, let me give you a quick overview of what this course covers. We'll start

with the foundations. In section two, you will learn Cloud Code from the ground up using a simple expense tracker. This application has a bug and

tracker. This application has a bug and some messy code, and we'll use Cloud Code to fix it, refactor it, add a new feature, and polish the UI. By the end of that section, you'll have a solid

foundation to build on.

From there, we'll start building the real project I showed you at the beginning of the course, our full-stack support ticket system. Section three is all about planning and setup. We'll

define the project scope, clarify requirements, pick the tech stack, and set everything up. Section four covers authentication. We'll implement login,

authentication. We'll implement login, registration, and role-based access.

In section five, we build our user management module, listing, creating, editing, and deleting users with proper tests along the way.

Section six is ticket management, the core of our application. We start by building a ticket submission flow, so customers can send in their requests.

Then we create the ticket list page with filtering, sorting, and pagination.

After that, we build the ticket detail page. This is where our agents do most

page. This is where our agents do most of the work. They can read the full conversation history, assign a ticket to themselves, update its status, and reply directly to the customer.

Section seven is where things get interesting. We add AI-powered features.

interesting. We add AI-powered features.

First, we build a reply polisher that takes an agent's response and rewrites it to sound professional and on brand.

Then we add ticket summarization, so agents can instantly see a summary of a long conversation without reading every message. After that, we implement

message. After that, we implement automatic ticket classification. So, as

we receive each ticket, we use AI in the background to classify it. And finally,

we build an auto-resolve feature, a background job that checks incoming tickets against the knowledge base, and if it knows the answer, resolves the ticket and replies to the customer

automatically in seconds.

Section eight is email integration, and this is where the application starts to feel like a real product. When a

customer sends an email to our support address, we receive it directly in our app and start processing it. And

finally, section nine is production. We

add error logging, polish the UI, dockerize the app, and deploy to the cloud. But my favorite part is the very

cloud. But my favorite part is the very end. We set up Cloud Code with GitHub

end. We set up Cloud Code with GitHub Actions. I'll create an issue on GitHub

Actions. I'll create an issue on GitHub and have Cloud automatically fix it.

Then I'll review the code, merge it, and that triggers a new deployment straight to production. It's a glimpse of what

to production. It's a glimpse of what AI-assisted software delivery actually looks like in practice. So, that's the full course. In the next lesson, I'll

full course. In the next lesson, I'll show you where to find the source code.

[music] We have two repositories for this course. The first one is the expense

course. The first one is the expense tracker. Go ahead and clone this

tracker. Go ahead and clone this repository now because we're going to use it in the next section as we learn the foundations of Cloud Code. It's an

existing project with a bug and some messy code, and we'll use it as our playground. The second repository is the

playground. The second repository is the help desk. That's our full-stack support

help desk. That's our full-stack support ticket system that we'll build together throughout the rest of the course. I've

made a commit after each lesson, so you can see the exact code that was produced in each lesson. You'll find the links to both repositories below this video.

In the next lesson, I'll talk about how to get the most out of this course.

[music] A lot of AI coding courses show you a demo, make it look easy, and leave you wondering why you can't replicate it on your own. This is not that kind of

your own. This is not that kind of course. This is a software engineering

course. This is a software engineering course, not a course for product managers. If you're looking for

managers. If you're looking for something that promises 50 agents building software for you while you sleep, this isn't the course. You'll be

actively involved in coding. The

difference is that you'll have AI helping you get there faster. Because

here's what I believe, software engineering isn't going anywhere. The

fundamentals stay. What's changing is our tooling, and that's happened many times before. We went from text editors

times before. We went from text editors to IDEs, from manual deployments to CI/CD pipelines, from writing raw SQL to using ORMs. Every generation of

developers gets new tools, and the ones who embrace them early get ahead. AI

coding agents are the next shift.

Instead of fighting syntax and copy-pasting from documentation, you'll use an agent to handle the mechanical part, so you can focus on the real engineering, the architecture, the

decisions to craft. That's what this course is about. And to truly feel that, you'll have to do it yourself. It's like

riding a bicycle. I could show you hours of footage, but until you get on the bike, you won't feel it. The same goes here.

So, don't watch this course passively.

Build it with me every lesson. Have your

editor open, your terminal ready, and your hands on the keyboard. You'll see

me write prompts, generate code with AI, and then go through every line to make sure it's in good shape. I'll identify

issues, refactor constantly, and make sure that what we ship follows solid engineering practices. At the start, I

engineering practices. At the start, I take my time doing that, but as we progress, I move faster. And the only way to keep up is by doing it yourself, too.

Now, one more thing. Take this course from A to Z. Every lesson matters, even if the title makes you think you already know what it covers. Because each lesson builds on what came before, so if you

skip around, you'll miss things that matter later. Trust the structure. All

matter later. Trust the structure. All

right, that's all I wanted to talk about. In the next section, I'll

about. In the next section, I'll introduce you to Cloud Code.

[music] In this section, I'm going to teach you everything you need to know to start using Cloud Code effectively. We'll talk

about what Cloud Code is and why it's changing the way developers work. We'll

talk about installing and setting it [music] up, writing good prompts that get you better results, using planning mode for complex tasks, managing the context window, extending Claude with

tools and skills, [music] using checkpoints to undo changes, and using sub-agents to break down big tasks.

Throughout this section, we'll be working with a simple expense tracker built with React. This is different from the other full-stack project we're going to build later in the course. It's just

to get you started. Right now, it has a bug. The total income and expenses are

bug. The total income and expenses are not calculated properly. The code is messy and the UI looks Well, let's just say it needs some love. In this section, we'll use Claude code to fix the bug,

refactor the code, add new features, and give it a modern, polished look. I'm

very excited for this section. I hope

you are, too. So, let's jump in and get started.

[music] All right, let's start with a big question.

[music] What exactly is Claude code and is it the end of software engineering? Claude

code is what we call an agentic coding tool or simply a coding agent. Now, what

does it mean? Traditional AI assistants work like a conversation. You ask a question, you get an answer, you copy-paste it into your code, and repeat. A coding agent is different.

repeat. A coding agent is different.

Instead of just giving you suggestions, it has access to tools that allow it to actually take action. It can read your files, write code, run commands, fix bugs, and commit changes to Git, all on

its own. You describe what you want and

its own. You describe what you want and the agent goes and does it. Over the

past few years, many AI coding tools have emerged. GitHub Copilot, Cursor,

have emerged. GitHub Copilot, Cursor, Windsurf, and so on. So, what makes Claude code special? Well, first, it lives in your terminal. That means it's editor agnostic. You can use it with any

editor agnostic. You can use it with any editor you like, but it also has great integration with popular editors like VS Code and JetBrains IDEs.

Second, Claude code doesn't just suggest code. It understands your entire code

code. It understands your entire code base and can execute multi-step tasks autonomously. Since its launch, Claude

autonomously. Since its launch, Claude code has been exploding in popularity.

Just look at Google Trends. The interest

has skyrocketed over the past year. It's

even been listed as a requirement in job descriptions. Now, you might think this

descriptions. Now, you might think this is just a tool for those YouTube vibe coders. I just built three apps today

coders. I just built three apps today using AI. No code. I literally have an

using AI. No code. I literally have an army of AI agents working for me 24/7.

But Claude code is actually used at big companies like Netflix, Spotify, Uber, and Salesforce, just to name a few. So,

what can you do with Claude code? Well,

you can explore and learn new code bases, you can write and edit code, debug and fix errors, write and execute tests, refactor code, handle Git workflows, and so on.

But I have to be honest with you.

Initially, I didn't like these agentic coding tools at all. I thought most of them do more damage than help, or at least they take away the fun from coding. Some of you might feel the same

coding. Some of you might feel the same way. But since I started using Claude

way. But since I started using Claude code, it has genuinely changed my life.

It brought back that excitement that I had when I was in my early 20s. You

know, when I had big ideas that kept me awake till 5:00 a.m. coding. Claude code

helps you turn your ideas into real working software faster. I've been so excited that I actually started working on a new startup that I've been thinking about for a long time. And Claude code

has allowed me to build that product with so much less effort. That

excitement and everything I've learned over the past few months working with Claude code made me want to create this course for you to share my knowledge and help you experience the same thing.

Now, the big question. Is this the end of software engineering? Well, as I've said over and over, software engineering is not going away, but the way we build software has changed and will continue

to evolve. In the early days, we didn't

to evolve. In the early days, we didn't have fancy editors. We had to type every keystroke by hand. Then came

auto-complete, which helped us go faster. And now we have coding agents

faster. And now we have coding agents that help us go even faster. Think about

it like this. When power saws were invented, they didn't put carpenters out of a job. They allowed carpenters to get the job done faster, with more precision

and less effort. Sawing wood is only one part of a carpenter's work. If you hire a carpenter to build you a cabinet, he still has to come to your place, take measurements, discuss design ideas, help

you choose the type of wood, then saw, assemble, and install. Sawing is just one piece of the puzzle. Power saws

simply made that piece easier. Same for

us software engineers. Coding is only one aspect we do. And honestly, it's the part that, while exciting at first, can get repetitive over time. Do you know how many times I've built a form with

validation or an API for CRUD operations? Do you think I still find

operations? Do you think I still find that exciting? Not at all. I would

that exciting? Not at all. I would

rather type one prompt, have an AI agent build that for me, and then I just review and refine it if needed. But

here's the thing. You still need to understand code. These tools don't mean

understand code. These tools don't mean you can skip learning how to program.

You have to review the output, spot mistakes, and know if the agent is on the right track. If anything,

understanding software engineering fundamentals matters more now, because you're not just writing code, you're evaluating it. And I'll be transparent

evaluating it. And I'll be transparent with you. There are times that you still

with you. There are times that you still have to roll up your sleeves and get your hands dirty in code. Sometimes it's

just faster or easier than typing a long prompt. But that's the beauty of it.

prompt. But that's the beauty of it.

Coding agents let you focus more on solving problems and less on the repetitive or dirty aspects of our work, like writing boilerplate code, running shell commands, configuring build tools,

or wiring up the same patterns we have done a hundred times before. So, once

again, coding agents let you focus more on solving problems and less on the repetitive or dirty aspect of our work.

And that's what you're going to learn in this course.

In the next lesson, we'll get Claude code installed on your machine so you can start using it right away.

All right, let's get Claude code installed on your machine. First, you

need to sign up for an account, and here you have two options. One option is to get a Claude subscription. This is a monthly plan, so you pay a fixed amount each month and get a certain amount of

usage. They have a free tier, but quite

usage. They have a free tier, but quite honestly, you can't get very far with it. It's fine for giving it a try, but

it. It's fine for giving it a try, but not for building a real app. Then they

have the pro plan, which gives you more usage, and the max plan, which gives you even more.

I personally started with the pro plan, but because I was using it so much, I kept hitting the limits very quickly.

So, I switched to max and I absolutely love it. So, that's one option, to get a

love it. So, that's one option, to get a subscription. Then they have this API

subscription. Then they have this API option, which is the pay-as-you-go option. So, instead of a monthly fee,

option. So, instead of a monthly fee, you pay based on how much you use it through their API. You can also start with this, but keep a close eye on your spending, because if you're not careful,

it can get expensive fast. I'll show you how to track your costs later in the course. So, head over to

course. So, head over to claude.com/pricing

claude.com/pricing and use one of these plans. Now, I know some of you might say, "But Mosh, why are you using paid tools? We want to use free tools." Look, I get it, but here's

free tools." Look, I get it, but here's the thing. If a tool helps you build

the thing. If a tool helps you build faster, learn faster, and ship real projects, it's worth the investment.

Think of it as investing in yourself. A

good developer knows when to spend a little bit of money to save a lot of time. Oh, and by the way, I'm not an

time. Oh, and by the way, I'm not an affiliate with Anthropic. I don't get a penny for recommending their tools. I

just genuinely think Claude code is the best option out there right now.

So, once you create an account and select a plan, head over to code.claude.com/docs.

code.claude.com/docs.

On this page, you can find the installation instructions for your operating system.

So, here we have the curl command for Mac, Linux, and WSL, and two separate commands for Windows PowerShell and Windows CMD. Pick the one that you like,

then open a terminal window, and run this command.

All right, Claude code is successfully installed. Now, pay close attention to

installed. Now, pay close attention to the output of this command, because on your machine, you might see a warning here saying Claude code is not in your path. And right below that, you will see

path. And right below that, you will see a command to execute to add Claude to your path. If you see that, make sure to

your path. If you see that, make sure to add it. Otherwise, if you run Claude,

add it. Otherwise, if you run Claude, you're going to get an error like command not found. So, Claude is installed. In the next lesson, we're

installed. In the next lesson, we're going to clone a project and start improving it using Claude code.

All right, now let's create a new directory on our machine and clone the starter project for this section.

So, I'm going to go to my desktop, create a new directory. Let's call it playground.

Go into this directory.

Now, open your browser and head over to github.com/moshhamedani/expensetracker-starter.

github.com/moshhamedani/expensetracker-starter.

This is the starter project I've created for this course that we're going to improve using Claude code.

So, let's clone this project on our machine.

So, Git clone.

All right, great.

Now, let's go into this directory.

Now, we can run Claude right here, but if you're a VS Code user, you get better integration by running Claude inside of a VS Code terminal. So, I'm going to go to my VS Code

and open this project right here.

Good.

Now, when using Claude code, we don't want to use the chat window here, so let's close it and open up some space.

Now, let's open a terminal window by pressing control and backtick.

All right, good. Now, we can run Claude right here.

Now, when building applications with Claude code, we use this terminal window a lot, and putting it in the bottom is not very effective, because it's hard to see our prompts.

So, I personally like to position this on the left. So, we right-click here and go to panel position and position this on the left side. Okay? Now, we

don't need the explorer panel, so let's close it by pressing command and B on Mac or control and B on Windows.

Next, we expand this so we have a lot of room to work with. So, I put Claude Code on the left side and the actual code on the right side.

Now, the first time you run Claude Code, you have to select a theme. Here we have a few options like dark mode, light mode, and so on. I'm going to go with the dark mode.

Now, the first time you have to log in, so you can log in with your Claude account if you have a subscription.

Alternatively, you can log in with your Anthropic console account if you're using the API model. So, I'm going to log in with my Claude account.

All right. Now, back to Claude Code.

Login successful.

Press enter to continue. All right,

here's Claude Code up and running. We

can press a question mark to see the shortcuts.

Let's talk about a few key ones. We can

type an exclamation mark for running bash or shell commands. This is very useful because we don't have to open a separate terminal window for running Git or NPM commands. We can run them right

here by prefixing them with an exclamation mark. We also have a bunch

exclamation mark. We also have a bunch of what we call slash commands. These

are the built-in commands inside Claude Code. We're going to go over them as we

Code. We're going to go over them as we go through the course. We can use an at sign for referencing files. This is very useful when we want to give Claude some context about our code. And also, we

have this ampersand for running background jobs. Again, we're going to

background jobs. Again, we're going to go over these as we go through the course. So, first, let's play with a few

course. So, first, let's play with a few slash commands. We have model for

slash commands. We have model for selecting our AI model.

So, at the time of this video, the default model is Opus 4.5. We also have Sonnet and Haiku. And of course, this is going to change in the future, and that's not our focus here.

So, I'm going to accept the default. We

can press escape to jump out of this.

Now, another useful command is slash terminal setup. This installs the shift

terminal setup. This installs the shift and enter key binding. So, when typing multi-line prompts, we can press shift and enter. Let's execute this. And by

and enter. Let's execute this. And by

the way, you don't have to type the whole command name, you can just press tab to auto-complete it.

All right. This installed the shift and enter key binding. So, now we can write a multi-line prompt by pressing shift and enter.

That's much cleaner than appending a backslash to each line, okay?

Now, when you have a long prompt and you want to clear this, you can press control and L.

All right, good. Next, we're going to run this application.

Now, let's run this project. Here we

have two options. One option is to run NPM run dev. So, we start with an exclamation mark to enter the bash mode and then run NPM run dev. Let's see what

happens.

We got this error saying "Vite command not found." What's going on here? Well,

not found." What's going on here? Well,

let's go to our package.json file.

All right, look. Our dev command uses Vite, and Vite is not installed because we haven't installed the NPM dependencies, right? Now, let me show

dependencies, right? Now, let me show you another way to run this project.

Instead of directly running NPM run dev, we could write a prompt like run this app.

Now, this is a little bit slower than directly running NPM run dev because Claude first have to figure out what command to execute, but the benefit of using this prompt is that it can

automatically fix issues on its own. So,

in this case, it's going to automatically install the dependencies and then run the development server.

Let's see what happens. So, let's go ahead.

All right, earlier in this section, I told you about coding agents. I told you that agents have access to a bunch of tools for taking actions. One of the tools we have here is the bash tool. So,

Claude uses the bash tool for executing bash or shell commands like NPM install.

So, right here you can see the command that Claude wants to execute, and right below that, you can see a description of this command. This is very useful

this command. This is very useful because sometimes these commands are pretty long and it's hard to understand them. So, always look right below to see

them. So, always look right below to see a description of the command to be executed. Now, the first time Claude

executed. Now, the first time Claude wants to use a tool, it always needs to get our permission. Here we have three options. We can select yes and allow

options. We can select yes and allow this command only once, but if this command is something that comes up all the time, we can go with the second option so Claude doesn't have to ask us all the time. It's much faster. Now, if

this command is something dangerous, we don't want to allow Claude to execute it, of course, we should go with the third option.

Now, let's go with the second option.

All right, look. Claude installed our dependencies. Now, it wants to run our

dependencies. Now, it wants to run our development server using NPM run dev.

Again, we have three options. Running

the server is a safe command, so I want to allow it so Claude doesn't ask us again in the future.

All right, great. Now, our app is running at this address, and down here, you can see we have one bash. That means

we have one task running in the background. Now, how can we see that? We

background. Now, how can we see that? We

can use slash tasks to see the background tasks. So,

currently, this command, NPM run dev, is running. It's been running for 49

running. It's been running for 49 seconds. If you want to kill this, we

seconds. If you want to kill this, we can press K.

Alternatively, we can press escape, enter, or space to close this window.

All right. Now, let's open our app in the browser.

All right, here's our expense tracker application. I know it looks very ugly,

application. I know it looks very ugly, but don't worry, we're going to improve the look and feel of it later in this section. But what matters the most is

section. But what matters the most is that we have a bug here, so the total income, expense, and balance is not calculated properly. And we're going to

calculated properly. And we're going to use Claude Code to fix this bug. In the

next lesson, we're going to talk about creating our project memory.

Right now, every time we start a new session, Claude knows nothing about our project. It knows nothing about our

project. It knows nothing about our folder structure, the libraries we use, or how we like to write code. We have to re-explain everything, or Claude has to explore the code base each time to

figure it out. That's where the init command comes in. This adds a new claude.md file to this project.

claude.md file to this project.

claude.md is a special file that provides instructions and context to Claude Code when working in a project.

It's like a project-specific prompt that includes our conventions, our project architecture, basic commands, and so on.

So, let's run the init command.

All right, here's another example of a tool that Claude uses. And that is the write tool for writing to our files, in this case, claude.md. Now, once again, we have three options. One option, the

first option, is to allow edit to claude.md so we can see the changes up

claude.md so we can see the changes up here, and we can either approve or reject them. But with this option, next

reject them. But with this option, next time Claude wants to write to a file, again, we have to manually approve or reject changes to each file.

Now, if a task involves writing to multiple files, this is going to be time-consuming and tedious. So, going

forward, I want to go with the second option to allow all edits during this session, and with this, we basically allow Claude Code to write any changes to any files, and then we can use the

source control panel to review the changes to each file one by one. In my

experience, that's much faster and easier to work with.

So, let's go with the second option.

All right, Claude created our claude.md

file. Before moving on to the next lesson, let's go to the source control panel and review this file. So, I'm

going to press command and B to collapse the source control panel so we have more space here.

So, in this file, we have the basic commands for our project like NPM run dev, build, lint, and preview.

We have a description of our architecture. So, this is a single-page

architecture. So, this is a single-page React 19 application built with Vite 7.

It's an expense tracker app. All the

application logic is inside this file, which is a single component managing local state with use state. Now, what

you're going to see is definitely going to be different from this video because that's the whole idea of large language models. Large language models are

models. Large language models are non-deterministic. That's a fancy

non-deterministic. That's a fancy computer science word for saying something that is not predictable. It

cannot be determined. So, every time you run slash init, the output is going to be different. So, going forward, I don't

be different. So, going forward, I don't want you to get too hung up on the actual content you see here. I want you to pay close attention to the overall workflow, how I break down a task into

smaller tasks, and how I recover from mistakes. That's the entire purpose of

mistakes. That's the entire purpose of this course. So, here's our claude.md

this course. So, here's our claude.md

file. Every time we ask a question, the content of this file is loaded into the context window of our AI model. Now,

we're done with this. Before we move on to the next lesson, I want to make a commit. Again, here we have two options.

commit. Again, here we have two options.

One option is to run a bash command, so we can do git add period and git commit.

Provide a message. That's one option.

The other option is to use the source control panel. Some people prefer this

control panel. Some people prefer this UI, but there is a third option as well.

And that is using Claude Code. So, I

press control and L to clear my prompt.

Then, I press the escape button to exit the bash mode. Now, here we can simply say commit. Of course, this is slightly

say commit. Of course, this is slightly slower than directly executing Git commands because Claude first have to figure out what exactly has to be executed. And that means it has to use

executed. And that means it has to use some of our tokens. So, it's going to cost us a little bit of money, but on the flip side, we get commits with beautiful commit messages. Let me show you.

So, let's go ahead with this.

All right, again, Claude wants to use the bash tool to execute this Git command.

Now, look at the commit message, add claude.md with this project guidance for

claude.md with this project guidance for Claude code. And right below you can see

Claude code. And right below you can see that it's co-authored by Claude Opus 4.5. So, we get these consistent,

4.5. So, we get these consistent, beautifully written commit messages.

That's the benefit of making a commit using a prompt. Now, once again, running Git add or Git commit are safe messages, so I don't want to get asked again, and I'm going to go with the second option.

All right, this is committed. In the

next lesson, we're going to start improving this project step by step.

Hey guys, I just wanted to let you know that this video you've been watching is actually the first hour of my complete Claude [music] code course. The full

course is about 9 hours long, so after you finish this video, if you want to learn more and build and deploy that full stack application with me, enroll in the full course. I'll put the link

down below in case you're interested.

[music] All right, now let's talk about prompting, because this makes a huge difference in the quality of the results you get. Here are a few simple rules.

you get. Here are a few simple rules.

First, be clear and specific. So,

instead of add authentication, say add JWT-based authentication to the login endpoint using the existing user model.

That's much better. Second, give

context. If there is something that Claude needs to know, like a piece of code, a file, a library, a pattern you're using, a constraint you have, say

it up front. Don't make it guess. Third,

be concise. Remember, you don't need to write an essay, so get to the point. The

shorter and clearer your prompt, the better the output. And for God's sake, please stop talking to Claude like, "Hey Claude, can you please kindly help me with?" Claude is a coding agent. It's

with?" Claude is a coding agent. It's

not your co-worker. So, let's go over a few examples. Back to VS Code, we want

few examples. Back to VS Code, we want to fix the bug that I showed you earlier. So, first, we're going to give

earlier. So, first, we're going to give it some context. We want to say that we have this bug in app.jsx. So, here we type in Now, we type an at sign to

reference a file, and that is app.jsx.

Tab, it adds the full path.

Now, here we can say in app.jsx,

total income and expense are not calculated correctly.

Fix it.

All right, let's see what Claude has done. So, here we go to the source

done. So, here we go to the source control panel.

app.jsx is modified.

Now, to clean up our view, I press command and B to hide the source control panel, and then control and backtick to hide the terminal window.

Okay, now we can clearly see the before and after code.

So, look, on this line, as part of calculating the total income, Claude is converting the amount to a float. Now,

this is going to solve the problem, but this is not the right way to fix this bug.

Look, up here, in the transactions array, the amount is represented as a string. So, that means every time you want to do something with the amount, first we have to parse it

into a float. So, this is treating the symptom, not the actual problem. So,

let's give Claude a follow-up prompt.

Back to our terminal, here we can say in transactions array, amount should be a number.

All right, look, in the transactions array, the amount property is now represented as a number. And as a result, we no longer have to convert the amount to a float as part of calculating

the income and expense.

All right, now back in the browser, look, the bug is fixed, beautiful. So,

before we move on to the next task, first we have to make a commit, so we can easily compare the code changes as part of the next task.

So, back in VS Code, let's make another commit.

All right, now let's refactor some code.

So, let's go to our app.jsx.

Look, currently all the code for this app is inside this component. Now, this

is not terribly bad, but generally speaking, as a component grows large, it's better to break it down into smaller, more focused, and more understandable components.

So, the first thing I want to do here is to extract a child component for displaying the summary.

So, here we can say extract the summary into a separate component.

Now, in this case, I didn't specify a file, because this is all part of the same conversation, and at this point, Claude has a good idea of the structure of this app and the code it contains.

So, I don't have to constantly reference files, unless that gives Claude better context okay?

So, let's go ahead with this.

All right, Claude created the summary component that includes all the markup for displaying the total income, total expenses, and balance.

This component has three props, total income, expenses, and balance. But

again, this is not the right way to refactor app.jsx, because look, in

refactor app.jsx, because look, in app.jsx,

app.jsx, we have this logic for calculating the total income and expenses, and this data is only used in the summary component.

So, the right place to encapsulate this piece of logic is inside the summary component.

So, back to the terminal, here we can write a follow-up prompt and say, move the calculation of total income, expenses, and balance

in the summary component.

All right, look, now in the app component, we no longer have the logic for calculating the total income, expenses, and balance. The right place to encapsulate this is inside the

summary component.

So, as a result, our summary component has only a single prop as opposed to three props that we had earlier. So,

this is a better component design, and here we have all the code, including the logic and markup for displaying the summary. Now, of course, I could do this

summary. Now, of course, I could do this refactoring manually by hand, and quite honestly, it wouldn't take so much time, but sometimes you can get a lot done by using a simple prompt.

So, back to app.jsx, next we're going to have Claude refactor child components for adding a transaction, as well as displaying the transactions list.

So, back in the terminal, we can say extract child components for transaction form and transaction list.

Now, look, because I've opened app.jsx

here, it's automatically referenced in this prompt. This is the same as using

this prompt. This is the same as using an at sign to reference a file. But in

this case, we don't have to do that, because this file is already open in my editor okay?

Let's go ahead.

All right, let's see what Claude has done.

It has created a new component called transaction form that has a prop on add transaction. This

is basically a way to call the parent component when a transaction is added.

Now, in this component, we only have the code for adding a transaction.

Much simpler and easier to understand.

Now, we also have a new component called transaction list that takes an array of transactions, and once again, here we have all the logic for filtering transactions, as

well as displaying them inside a table.

Now, let's take a final look at our app.jsx.

app.jsx.

As you can see on the right side, a large number of lines in this component have been removed. So, as a result, our app component is a lot simpler.

Let me go to this file, so you can see things clearly.

Look, in this component, we have the layout of our application, as well as the overall logic and data. So, now our app component has a single responsibility. This is much better than

responsibility. This is much better than the original implementation where we had all the logic inside this file.

Now, let's go back to our claude.md

file.

Look, under the architecture, we have this line saying, "All application logic lives in app.jsx, a single component managing local state with use state."

Now that we have changed the architecture of this project, we should update our claude.md file.

So, back to the terminal, we can say update claude.md

claude.md and include architectural changes.

All right, look at the updated file.

Here, under the component structure, we have all these components. We have

app.jsx, which owns the transactions array. We have summary for displaying

array. We have summary for displaying total income, total expenses, and so on.

We have transaction form that owns the form state, and transaction list that owns the filter state and renders the transactions table. Now, with this

transactions table. Now, with this updated claude.md file, Claude has a

updated claude.md file, Claude has a better understanding of our project structure and can make better code changes in the future.

We're done with this step. Before we

move on to the next lesson, make sure to commit, so we can easily compare the changes for the next task.

So again, you can commit using Claude, or it's faster to use the source control panel and say, "Refactor app.jsx."

Great.

So, in In lesson, we used Claude to fix a bug, and also to refactor our app component. But, we can also use Claude

component. But, we can also use Claude for better understanding a code base.

For example, when you start with a new project, you can ask Claude questions like, "What does this project do? What

tech stack it uses? How's the

authentication implemented? Or, explain

the folder structure. Or, explain a piece of code." Let me show you. So,

let's go to our transaction form.

Look down here in the handle submit function.

We have this expression for extracting the date component. Now, you might look at this piece of code and wonder, "Why do we have to split by a capital T, and then grab the first element?" So, if

this piece of logic is foreign to you, you can select it.

Now, back to the terminal. Here, you can say, "Explain the selected code."

All right, here's the response. That

line generates today's date as a string in this format.

Now, here's the breakdown. When we use a new data object, this creates a date object for right now. Then, when we call to ISO string, this converts the date

object into a string like this. So,

first we have the date in this format, then we have a T as a separator, and then we have the time.

So, using this expression, we can grab the date component of this long string.

So, as you're exploring a code base, you can always reference files, or select a piece of code, and then ask Claude to help you.

In the next lesson, we're going to talk about planning new features.

[music] All right, now let's talk about the plan mode. Plan mode is used for building new

mode. Plan mode is used for building new features. Now, a new feature can be as

features. Now, a new feature can be as small as adding a delete button here, or it can be larger like building an entirely new page, or a complete application. But, generally speaking,

application. But, generally speaking, it's better to break down a large feature into smaller features, so we can review and refine the code along the way. Otherwise, if Claude modifies tens

way. Otherwise, if Claude modifies tens or hundreds of files, we're not going to be able to properly review the code, and we essentially end up in the vibe coding trap.

So, back in VS Code, let's use the plan mode to build a new feature.

Now, look, we're currently in this mode, except edits on. We enabled this earlier to give Claude freedom to modify any files without having to get our approval

every single time. Now, we can change the mode by pressing shift and tab.

So, now we are in the plan mode. If you

press shift and tab again, we are in the normal mode, and if you repeat, again we are back to accept edits on.

So, let's go to the plan mode, and build a new feature. So, here we can say, "Add the ability to delete transactions."

All right, here's what happened. Claude

read and searched our code base. It

analyzed our architecture, and drafted an implementation plan. But, it hasn't changed any code yet, until we approve the plan. So, let's go over the plan

the plan. So, let's go over the plan real quick.

The overview says, "Add ability to delete transactions by adding a delete button to each row in the transaction list." Great.

list." Great.

Now, here are the changes that Claude is suggesting.

So, in app.jsx, it wants to add a function called handle delete transaction, that looks like this.

Then, it's going to pass this function as a prop to transaction list component.

Next, it's going to modify the transaction list component. It's going

to give it a prop called on delete transaction. It's going to add the

transaction. It's going to add the actions column header to the table, and a delete button in each row.

So, here's the sample markup. We have a button with this class.

When we click this button, on delete transaction is called. Pretty

straightforward.

Now, for CSS, we're not going to have any changes, because we already have this class delete button in our app.css.

Now, here are the steps that we have to follow to verify that this feature is implemented properly. We should run the

implemented properly. We should run the app, and make sure that our application displays a delete button in each transaction row.

Clicking delete should remove the transaction from the list, and summary totals should update after deletion.

Now, in this video, we're going to follow these steps manually, but later in the course, I'll show you how we can automate these steps using automated tests.

Oh, and by the way, as I said before, what you see in your plan is definitely going to look different from what I showed you here, so don't get hung up on the exact output. Now, here Claude is asking that the plan is ready to

execute, and it's asking if you want to proceed.

Here, we have a few options. The first

option is, "Yes, clear context, and auto accept edits." What does it mean? Well,

accept edits." What does it mean? Well,

context is like the short-term memory of our agent. It includes our entire

our agent. It includes our entire conversation since we started Claude.

So, all our prompts, all the files that were referenced, and all the code that Claude generated currently exists in this context window.

Now, here we can clear the context to start fresh like a new conversation, or if this feature is related to our previous tasks, we can keep the context, and just auto accept edits.

The other option is to manually approve edits, but as I said before, this is tedious and time-consuming. The other

option is to ask for changes. So, here I want to update the plan and say, "Add a confirmation dialog box."

All right, here's the updated plan. Now,

look at the declaration of our button.

When we click it, we have this if statement for showing a confirmation model asking, "Are you sure you want to delete this transaction?" If we select yes, then on delete transaction will be

called. Okay?

called. Okay?

So, this is all good. Now, I'm going to select the second option to auto accept edits.

All right, our new feature is implemented. This took 50 seconds

implemented. This took 50 seconds seconds, which is not too bad. If I

wanted to implement the same feature manually, it would probably take me the same amount of time. But, as you will see later in the course, we can use prompts to build more comprehensive features, and save a lot of time.

So, before we review our code, let's make sure that this new feature is implemented properly.

So, we have the delete button here, beautiful. Now, let's remove one

beautiful. Now, let's remove one expense, so the value is 1,200.

When I remove it, the expenses and the balance should be updated. Take a look.

First, we get a confirmation, great. If

we click okay, now the expenses and the balance are updated. Perfect.

updated. Perfect.

So, let's review the changes. We start

with app.jsx.

Here, we have a new function handle delete transaction. This is following

delete transaction. This is following the same pattern as the other function.

So, Claude and other coding agents are good at following patterns. So, it's

really important to establish these patterns at the beginning of the project. And the way we do that is by

project. And the way we do that is by giving Claude small tasks, so we can review and refine the code to establish those patterns. Otherwise, if we give

those patterns. Otherwise, if we give Claude a big chunk of work, it may go off the rails, and use different patterns in different parts of the application. Okay?

application. Okay?

So, here's our new event handler. This

is passed as a prop to the transaction list component.

Now, let's quickly review the transaction list.

So, here we have a new prop, beautiful.

And down here, we have a new column that is actions.

And in this column, we have the button that I showed you earlier.

So, the code looks good to me. We don't

need any changes, so let's finish up this task by making a commit.

Add the ability to delete transactions.

Let's talk about context. What is the context window? Well, think of it as

context window? Well, think of it as Claude's working memory. It's everything

Claude can see at any given moment, like our conversation history, the files it's read, our Claude empty file, and so on.

Here, we can visualize our context window using the slash context command.

All right, look. So, currently we're using Claude Opus 4.5.

You can see that the size of our context window is 200,000 tokens. That can

change in the future, but right now, we have used 47,000, or 24% of the context window.

What are tokens? Well, a token is roughly about 3/4 of a word. So, LLMs

don't see text the way we humans do.

When we give some text to an LLM, it breaks it down into small chunks called tokens. As I said, a token is roughly

tokens. As I said, a token is roughly about 3/4 of a word.

So, the size of the context window of Claude Code at the time of this video is 200,000 tokens, and this can fill up pretty quickly if we are not careful.

Once that happens, Claude starts to hallucinate, it starts to forget things, and it starts to generate lower quality responses. So, it's very important for

responses. So, it's very important for us to properly manage this context window. Now, down here you can see the

window. Now, down here you can see the breakdown by various categories.

So, we have system prompts, which are instructions that are always available to Claude for doing his job. These

prompts have taken about 2,400 tokens, or 1% of the context window. Then, we

have system tools. These are the tools that I showed you earlier, like the bash tool for executing bash commands, or read for reading files, write for writing files, and so on.

Then, we have MCP tools, which are additional tools we can add to Claude.

We'll We'll about them later in this section.

You have skills. Again, we'll talk about them. You have messages. These are the

them. You have messages. These are the messages that we have exchanged with Claude. So, all the messages we have

Claude. So, all the messages we have sent and the responses we have received are taking about 29,000 tokens or 14% of the context window. So, as a best

practice, when we switch between completely unrelated tasks, we should always clear the context window. And to

do that, we use the clear command. But

before I do this, let me show you another command that is compact.

This is useful if our context window starts to get full and we're working on related tasks. So, we don't want to lose

related tasks. So, we don't want to lose the history. We don't want to lose the

the history. We don't want to lose the context. When we execute this command,

context. When we execute this command, Claude will clear the conversation history, but keep the summary in context. Let me show you. So, right now

context. Let me show you. So, right now we're using 24% of the context window.

Let's see what happens if we execute the compact command.

All right, Claude compacted our conversation. So, let's run the context

conversation. So, let's run the context command one more time.

All right, now we're down from 24% to 13%. So, system prompt and system tools

13%. So, system prompt and system tools are always there, but our messages are now taking 3% of the context window.

Now, let's see what happens if we clear the context window.

Okay? Now, let's run context again.

Look, we're still using 10% of the context window. Again, this is because

context window. Again, this is because the system prompt, system tools, MCP tools, and memory files are always there. So, memory file is the Claude MD

there. So, memory file is the Claude MD file we talked about earlier. This file

represents our project's long-term memory. So, it's very important to keep

memory. So, it's very important to keep this file minimal and only include essential information about our project, like the architectural decisions, our file structure, patterns, conventions,

and so on. So, once again, as a best practice, if you're switching between completely unrelated tasks, always use the clear command to clear the conversation. Otherwise, if the context

conversation. Otherwise, if the context is filling up, use the compact command to summarize the conversation. And by

the way, I think once you hit the 70% usage, Claude will automatically compact and summarize the conversation. That's

all about context. Next, we're going to talk about tracking usage and costs.

[music] All right, now let's talk about tracking cost and usage. There are a couple of commands you need to know. One is cost if you are using the API. The other is

usage if you have a subscription. I have

a subscription, so unfortunately, the cost command is not working for me. So,

let me show you the usage command.

All right, look. In my current session, I've used 8% of my plan. And in the current week, I've used 1%. Now,

depending on your usage and the plan you have, you might hit the limit faster.

So, here's a question. How can we control the cost and usage? Well, in the previous lesson, we talked about the context window. Our context window has a

context window. Our context window has a direct relationship to our costs because each time we send a message, the model receives the system instructions, our

Claude MD or project memory file, as well as the entire conversation history.

Longer conversations means more input tokens per request. So, to control your cost and usage, it's really important to properly manage your context window. As

I said before, if you're switching between unrelated tasks, always clear the context window. Otherwise, if you're working on a bunch of related tasks and the context window is building up, use

the compact command to summarize the conversation. And also, keep the Claude

conversation. And also, keep the Claude MD file lean and relevant. Remove

outdated or unnecessary sections because this file, the content of this file, is sent to the model with each request.

So far, you have seen a few of the built-in tools in Claude Code, like the bash tool for running shell commands, the read tool for reading files, the write tool for writing to them, and so

on. But we can also extend Claude and

on. But we can also extend Claude and give it additional tools. For example,

we can have it talk to GitHub to create issues or open pull requests, or talk to Slack to send and receive messages, or talk to a Postgres database to run

queries. The way we do this is using

queries. The way we do this is using something called MCP or the model context protocol.

So, why do we need MCP? Well, without

MCP, the Claude team would have to write specific code for every service they want to support. They would have to write custom code to talk to the GitHub API, custom code for Slack, custom code

for Postgres, and maintain all of it.

And it's not just Claude. Other AI

providers, like OpenAI and Google, would have to do the same thing. There are

three problems with this approach.

First, the code base for each AI agent would keep growing to support more and more tools. Second, only the team behind

more tools. Second, only the team behind the AI agent could add new integrations.

You couldn't do it yourself. Third, if

an external service changed its API, every AI provider would have to update their code. This is where MCP comes in.

their code. This is where MCP comes in.

MCP introduces two participants to solve this problem. An MCP server and an MCP

this problem. An MCP server and an MCP client. An MCP server abstracts away an

client. An MCP server abstracts away an external service like GitHub. It knows

how to talk to GitHub. It knows all the complexity involved, like the message format, authentication methods, and so on. If the GitHub API changes, the

on. If the GitHub API changes, the GitHub MCP server is the only place that needs to be updated. An MCP client is embedded inside a host application like

Claude Code. The client doesn't know or

Claude Code. The client doesn't know or care about the specifics of GitHub. It

just talks to the GitHub MCP server using a standard message format based on JSON. When the host application starts,

JSON. When the host application starts, it looks at the registered MCP servers and asks them, "What tools do you have?"

The GitHub MCP server might say, "I have tools for creating issues, opening pull requests, and reading repositories."

Then, when you ask Claude to do something, like create an issue on GitHub, it knows exactly which tool to call.

With this architecture, the Claude team doesn't have to write custom code for every external service. They only write the MCP client, which is the part that

talks to any MCP server using a standard format. It's just like how Chrome can

format. It's just like how Chrome can talk to any website using HTTP. Chrome

doesn't need custom code for every website, right? It knows how to send a

website, right? It knows how to send a request and parse the response.

Same idea here. Claude Code knows how to talk to MCP servers. The servers will handle the rest.

Now, there are MCP servers for all kinds of things. With GitHub MCP server, we

of things. With GitHub MCP server, we can create issues, open pull requests, and read repositories. With Slack MCP server, we can send messages and read channels. With the Postgres MCP server,

channels. With the Postgres MCP server, we can query and update our database.

With the Playwright MCP server, we can automate browser testing. With Google

Drive MCP server, we can access documents. With Sentry MCP server, we

documents. With Sentry MCP server, we can check error logs, and so on. There

are literally hundreds of MCP servers out there, and the ecosystem is growing fast. Now, you've probably seen those

fast. Now, you've probably seen those YouTube experts telling everyone to build MCP servers and become a millionaire. There was a huge hype

millionaire. There was a huge hype around it, and that's why thousands of people ended up creating MCP servers.

The reality is that most of them are not being used. So, here's some pragmatic

being used. So, here's some pragmatic advice. Just because there are million

advice. Just because there are million MCP servers out there, doesn't mean you should use all of them. In fact, you shouldn't because every MCP server you register with Claude includes its tools

in your context window. That means

higher cost, higher usage, and potentially confusing Claude with too many options. So, only add the tools you

many options. So, only add the tools you actually need.

So, that's MCP in a nutshell. In the

next lesson, I'll show you how to add a useful MCP server that gives Claude access to up-to-date documentation for the libraries we use in our project.

Hey guys, thank you for watching this video. As I told you before, this video

video. As I told you before, this video is the first hour of my complete [music] Claude Code course. The full course is about 9 hours. So, if you want to learn more and build and deploy that full-stack application with me, enroll

in the full course. I'll put the link down below.

Thank you for watching and have a fantastic day.

[music]