How To Use Claude Code (Claude Code Tutorial)
Claude Code TutorialsFresh📅 2025-08-04
Tutorial Overview
┌─────────────────────────────────────────────────────────────────────┐
│ SETUP WORKFLOW │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 1. Prerequisites │
│ │ │
│ ├──► Install required software │
│ │ • Node.js / Python / etc. │
│ │ • Code editor (VS Code, Cursor) │
│ │ │
│ ▼ │
│ 2. Configuration │
│ │ │
│ ├──► Get API keys / credentials │
│ ├──► Set environment variables │
│ │ │
│ ▼ │
│ 3. Initialize Claude Code │
│ │ │
│ ├──► Run setup commands │
│ ├──► Verify installation │
│ │ │
│ ▼ │
│ 4. Ready to Build! │
│ │
└─────────────────────────────────────────────────────────────────────┘What You'll Learn
- Core concepts explained
- Step-by-step implementation
- Practical examples
Transcript
[00:00] Now that you have Cloud Code set up, you might be tempted to start building your very first project. But hold on, there are a few important tips and tricks you need to know to get the best out of your Cloud Code experience. So in this video, we'll build a simple project, but you'll learn a workflow that works every single time, and you'll learn a lot of very cool stuff along the way. First, in order to start Claude code, you have to run the command claude. But did you know you can start Claude in other ways as well? For instance, you can run it in YOLO mode by passing the flag
[00:31] dangerously skip permissions. By default, CLA will ask you permission to run certain commands. But with this flag, it won't ask your permission at all. Now, I don't recommend doing this. And if you run this command, Claude will actually give you this warning saying that Claude is running in bypass permissions mode. And it's saying Claude Code will not ask for your approval before running potentially dangerous commands. Now, if you know what you're doing, this might be fine, but I prefer to see what Claude code is doing and then stop it when it's going down the
[01:02] wrong path. So, what I'll do is run Claude normally. So, here's another tip for you. At the moment, we're running Claude code in the terminal. But to give ourselves some more room to work with, we can grab this terminal and add it to the stop section. And now we have a lot more real estate. And of course, we can still pull up the terminal when we need it. I'm also going to rename this tab to claude code. Cool. Let's say you wanted to enter something like please set up the following. Now you might be tempted
[01:34] to press enter or shift enter or control enter to add a new line. But irrespective of what you press this command will be sent to claude which is not ideal. We can add support for new lines by pressing front slash. This will bring up all the commands available to claude code. In here, let's search for terminal setup. And this will install the shift and enter key binding. Now, if we hold shift and press enter, we can add as many new lines as we want. Now, let's have a look at setting up our
[02:05] basic project structure. You might be tempted at this stage to tell Claw to go and build your application for you, and it will decide on the tech stack for you. I'm personally not a fan of that approach. I believe in giving it the text stack that it needs to use. And for this tutorial, we will be using Nex.js which is an incredibly popular framework for building full stack applications. Now, you don't have to know what Nex.js is. Just know it's the underlying framework that Clate will use to build our application. Now, if you're using
[02:37] Python or something else, you might want to use Django or another framework instead. So, I'm going to ask Claude to set up this next.js project for us. So let's enter. Please set up the following. And I'll press shift and enter to add a new line. And let's say set up the latest version of Nex.js in the current directory. Use the yes flag to accept all defaults. So just to explain what's happening here, I'm
[03:08] telling it to use the current directory because sometimes cloud code will simply create a new folder and then install Next.js in that subfolder instead. So I'm just telling it to use the current working directory. Then also during the Nex.js installation, Next.js will ask us all bunch of questions. So I'm simply telling Claude Code to use the defaults for all those questions. Now you don't have to specify this. Claude Kite will figure it out itself, but I found that this does save on some token usage. And let's add a database. So let's say set
[03:40] up a SQLite database. Now we're adding a database because typically in an application, you would want to add and retrieve data and you don't want to lose all of that data every time you restart your server. So we can persist that data by using a database. Now in order for Nex.js JS to communicate with the database, we need to add an OM. So let's say set up drizzle OM for connecting Nex.js to our database. And that should
[04:11] be it. Let's press enter to send this command. So this is another core feature of Claude Code. For complex tasks, it will create this to-do list. And you can see exactly which step it's currently on. And because we're not running CL code in YOLO mode, it will stop to ask our permission to run certain commands. So now we can either say yes to approve this command or we can say yes and approve all similar commands going forward or we can stop the process and tell code what to do different. I'm
[04:42] simply going to say yes. And I'll just keep selecting yes for all of these commands. And our cursor is asking our permission to edit this file. So I'll just say yes. In fact, I'll just select the second option. And by selecting that second option, the mode was changed to auto accept. But we will have a look at the modes in a second. And cool. It seems like everything was indeed installed. Now, in order to see if everything was set up correctly, I would like to run the dev server. Now, of course, we could open up the terminal and run it ourselves. For instance, we
[05:14] could call npm rundev, and that will give us this URL. And if we open that in the browser, we can see this boilerplate next.js JS project. Now, I don't want to run the dev server myself. I actually want Claude code to do it every time it makes a major change. So, how can I get Claude code to remember this rule for all changes? Even if we started a new conversation. Now, that takes me to memory in Claude Code. We can use memory to give Claude Code instructions that it needs to follow for all future requests.
[05:47] In order to add memory, we can create a new file in the root of our project called claude. MD. And now in this file, we can add any rules we want. So for instance, let's use a silly example like always respond like a pirate. If I save this, we can go back to claude code. And in order to make those changes take effect, we can start a new conversation by entering /clear. And now if I send something like hello cloud code will
[06:19] respond like a pirate. Now realistically that's not what you want to use this file for. Instead we want to add very specific rules related to our project. So I could add a new section and let's just call this something like post change instructions. And then let's add a new line and say always start a dev server after completing your changes. Now we could manually add more rules if we want but we can also add rules in the
[06:49] chat itself. So we can enter a hashtag and now we can add memory. So let's say something like always start the dev server on port 3000. Use npx kill if the port is already in use and let's press enter. Nut will ask us if we want to add this instruction to project level or to user level. At project level, this rule will only affect this current project. At user level, that rule will be applied
[07:22] to all of your projects. I'll simply select project memory. And if we go back to our file, we can indeed see that rule was added. Now, I'm going to add a few more rules to this file. In fact, before running the dev server, I want cloud code to run the build command to check for any syntax errors. So, I'm going to say always run the next.js build command after making any changes. Actually, I'm going to take this a step further and say always run the db generate migrate
[07:55] and next.js build commands after making any changes. So, this will just cater for the instance where database changes were made as well. All right, that should be good enough. So, I'm just going to start a new conversation to let those changes take effect. Hey, Leon from the future here. During editing, I realized that I completely forgot another way in which you can create the Claude MD file. Of course, you can create the file manually and then add memories using the hashtag, but you can
[08:26] also get Claude code to generate the file for you. All you have to do is enter front slash then in it and cloud code will automatically scan your project and then create the MD file for you. Now if you already have your own rule set up what Claude will do is analyze your codebase, generate a Claude MD file and then merge your rules into its rules. So you shouldn't lose any of these changes. All right. Now that Claude is done, we can switch back to the Claude MD file. And now you can see that Claude created a very detailed file
[08:57] containing all of the scripts, how to migrate database changes, the architecture of the project, and a lot lot more. But at the bottom of the file, we can see our own custom rules as well. So back to the video and in fact, let's actually start building our budget tracking application. Let's say please build a super simple budget tracking application and ensure to use real data from the database. Let's send this. All
[09:30] right. So, it's asking to run the database generation. Let's run this. And now it wants to run the migration step. So, let's run that as well. And I'm actually going to press escape to stop this process. And escape is your best friend when it comes to claw code. If you don't understand what it's doing, then rather hit escape and you can always continue the process if you feel comfortable with the changes. So the reason I pressed escape is I noticed this comment. It says it's going to see data to the database and it create a
[10:01] simple script to populate it with sample categories and transactions. Now I don't want C code injecting some rubbish data into my database. So I've pressed escape to stop the process and now I can course correct it by saying please do not seed the database with sample data. Let's run this. And now port code will course correct. So it says okay understood. I'll skip the database seeding and focus on building the budget tracking app.
[10:31] That's exactly what I wanted. And now it's just asking my permission to remove the seed data file. And I'll just select option two. And that's really why I'm not a fan of yolo mode. You really want to keep an eye on what cloud code is doing so that you can stop it and make changes. And here we can see cla code is now running the build command. And that is because it picked up that we gave that instruction in the claw.md file. And luckily we asked it to do that because it actually picked up a syntax error and is now making that fix. Now
[11:02] it's running the bold command again. And this time everything is working. And now it's trying to start a dev server on port 3000, but it realized this port is already in use. So it's going to kill our existing session and it should start the dev server, which it did. Now you might be wondering why I'm starting the dev server every single time. Yes, when you make changes, those changes will automatically be detected by Nex.js and it should show up on the front end. But if you've ever worked with Nex.js, JS, you do know that sometimes some major
[11:34] change will simply kill the dev server and you have to manually restart it. Anyway, so with that said, let's refresh our app. And there we go. We now have our budget tracking app. Let's try to add a transaction. And it's very hard to read this text. So we will fix that in a second. But I'll just enter some title like salary. And for the amount, I'll just enter something. And for the type, let's select income. And that should be it. Let's add this transaction. And we can see that transaction in this list.
[12:06] Let's try to add an expense. So let's just say food. Let's enter some amount. For the type, we'll leave it on expense. And let's add this transaction. And cool. So we can see our income and expense in this list. Let's see if the database works. So let's refresh this app. And these values are still there. Cool. Now let's fix the issues with this app. On this input form, it's very hard to read this text. So, back in claw code, let's say, please assist in fixing the following issues. The form text is
[12:39] very hard to read because the text is too light on the light background. So, let's send this. All right, it's made a few changes. And if we go back to the app, that looks way better. Also, I notice we get this error at the bottom. And if we open this, NexJS is giving us this warning or error. To fix this, all we have to do is copy this log and then paste it into claw code. And you can paste it just by right clicking on this
[13:10] field. Let's send this. All right, it's made some changes. And if we refresh the app, we now get this error message. And that is why I prefer to refresh the dev server every now and again. And it seems that for the small change, Cloudco decided not to restart the dev server. So let's tell it, please restart the dev server. All right, it's going to kill the existing one. And now it started the dev server. So let's refresh this. And there we go. And we don't have any error messages anymore. Now we are going to
[13:40] improve this app quite a bit. But since the basic functionality is now working, this would be a very good time to create a commit or a checkpoint. A checkpoint simply means we can store the current state of this application. So if we make mistakes going forward, we can always roll back to this current checkpoint. Thankfully, we can get Claude code to do that for us. All we have to do is say, please create a commit for these changes. And let's send this. And I'll
[14:11] just keep approving these changes. And cool, that should be it. We can see all of those checkpoints by going to this version control option and at the bottom we can see the commit that cla code just made along with a lot of detailed information about the work that was done. Cool. So in fact let me show you how to roll back if we manage to break something. Let's say change the theme to red just as a very simple example. So it says it's going to change the theme from
[14:41] blue to red. In fact, the color change might be too subtle. Let's just say please change the brand to my tracking app. Okay, cool. So, it's made this change. The app is now called my tracking app and it's changed some of the elements to red. Now, what do we do if we actually want to roll back these changes? Well, since we've created the checkpoint, all we have to do is say something like, please revert back to the previous commit. And it's asking our
[15:12] permission to reset to this previous commit. So let's just approve this. And of course, if forgot to start the dev server, please restart the dev server. We could always adjust the prompt in the cloud file to make it really strict to always start the dev server, but this will happen from time to time. All right, let's refresh this. And there we go. Everything is back to the way it was. All right, so this conversation is starting to get very long. And I highly recommend using small context windows.
[15:43] The longer a conversation gets, the more muddier it gets as well, and the quality of the responses will start to go down. In order to start a new conversation, we can use the command front slashcle. This will clear the conversation history and free up the context. Now, I know sometimes that's not what you want. You might be in the middle of a very complex problem and you can't lose this context. So, what you can do then is run compact. This will first create a summary of the
[16:13] conversation history and then start a new conversation, freeing up some of that context. If the conversation history is quite complex and you really only want certain information to be recalled, you could optionally add additional instructions like only summarize the stuff about changing the brand. And if we run this, cloud code will now summarize the conversation history and start a new conversation. So if you wanted to see the summary that it created for you, you can press Ctrl and
[16:45] R. And now you can see the complete summary or you can press Ctrl and R to hide that view again. Now let's have a look at a few more useful commands. We can exit out of cloud code by pressing front slashexit. Or if we want to resume a conversation, we can simply type in front slashres. And if we press this, we can see all our previous conversations. So let's select the last one we created, which was the conversation that contained this summary. But again, I
[17:17] recommend after completing the feature rather start a new conversation with clean context. And while we're on the topic of discussing commands, I do want to introduce you to the concept of custom/comands. So in cloud code, when you press front slash, you can access all of these default commands, but you can also create your own. For example, at the start of the project, we ask Lord Code to set up things like Nex.js and our database. Now, maybe we don't want to manually type all of that stuff out
[17:48] every time we start a new project. It would be ideal if we had some command that will instantly start a new project for us. So to create those custom /comands, what you have to do is within the claude folder, create a new subfolder called commands. And then within this folder, we can create a file for each new command that we want to add. Like let's add a file called new nex.js project. MD. Then on the first line let's enter hash and the name of
[18:21] this command like start a nexjs project. And below that we can provide a short description of this command like start a new nex.js project with a SQLite database and drizzle o. And now we can add something like commands to run in sequence. And honestly you can add anything to this file. It's simply a prompt that will run when you select that command. So we could do something
[18:51] like set up Nex.js in the current folder and set up a SQLite database and set up a Drizzle OM connection between Nex.js and the database. Something like that. So back in cloud code, I'm just going to clear this. And actually I think you have to exit out of claude code. And then let's run claude. And now when we press front slash, we can see our custom
[19:22] command in this list. So if we run this, it will inject that prompt into claude code. But I'm going to stop it as we've already set up our project. But just know if there's a prompt that you keep reusing, you can store that template in one of these command files and make it available through the slash commands. All right. So let's continue with our project. In claude code, we can change the current mode by pressing shift and tab. By default, this mode will ask for permission to run any commands. If you
[19:54] want to auto enable changes, we can press shift and tab and this will go into auto accept mode. This means cloud code will make changes to files without asking your permission first. But what you can also do is press shift and tab again and this will take you to planning mode. In planning mode, Claude Code won't make any changes to your project. This is ideal for planning the changes in advance before implementing those changes into your project. For instance,
[20:24] let's say we wanted to create a product requirements document before making further changes. Now, just a little pro tip. Cloud code does have very strict usage limits at the moment. So, you really don't want to waste your tokens on something like this. Instead, use something like chat GPT or Claude to come up with these plans. So, we could say, "Please create a PRD for a super simple budget tracking app. It will only be used by one user. So no need for orth
[21:00] at this stage. And let's send this. Creating a product requirements document can greatly improve the output of cla code. Because if we simply ask cla code to go and build an app for us, it will kind of use its own initiative to figure out what features should be available in the app. But sometimes just having this little bit of planning can make a massive difference. So of course we can have a look at what Claude code produced and have a back and forth to refine this application. So it's giving us things like the target market, success factors,
[21:33] core features and user stories etc. Okay. Then I'm going to copy this document and back in our project let's create a new folder and let's call it docs. And within the docs folder, let's create prd. MD and paste in our product requirement document. Cool. Because the PRD doesn't contain any technical information, it was the perfect candidate for something that we could use Claude or Chat GPT for. But now that we have the PRD in our project, we can
[22:04] come up with a technical implementation plan that looks at the PRD and our current tech stack and then comes up with a technical implementation plan. That is what the claw code planning agent is perfect for. So in planning mode, let's say please assist with a technical implementation plan based on the PRD in the docs folder. And here's a really cool tip for using clawed code. When it comes to planning, you can actually improve the reasoning
[22:35] capabilities of the agent to really carefully think about this plan. To force it into thinking mode, you can add keywords like think deeply or think hard or harder. So let's do something like think deeply on this solution. Let's send this. You will know that you've triggered reasoning mode. If you see this thinking step over here, now thinking will take slightly longer and consume more tokens, but it does provide better responses. Okay, cool. So Claude
[23:06] code came up with this implementation plan. And now it's asking if it can go ahead and make the changes or we can continue planning. Now I don't want it to make changes yet. So I'm going to select option three. And then I'm going to swap back to auto accept mode using shift and tab. And I'm going to say store this plan in the docs folder. So this way other team members can also see the implementation plan. And of course, I can always refer cloud code back to that implementation plan during any part
[23:38] of this build. And cool, we now have this technical implementation plan file. Right now, as I mentioned earlier, it's always a good idea to start a new conversation to free up the context window. And now, let's say, please improve our app by implementing the changes in the technical implementation plan document. Now what you can also do is directly reference a file by typing the at sign. Then let's go to docs and
[24:09] within the docs folder let's select our technical implementation plan. Now cloud code would be able to find that file by itself but by giving it direct access to the file we do save on a lot of token usage. All right so I'm just going to press escape for a second and have a look at this to-do list. So we can see it wants to install a few dependencies and then it wants to update the database schema with all of our new tables. And again, it wants to see the database with predefined categories and I think for
[24:40] the categories that's okay. I don't want it injecting transactions though. So I'll just turn it to continue. All right, cool. So the build completed and I do want to mention a couple of things. The build command was an absolute gamecher for this because cl code would make changes. It will then run the build command to check for any syntax errors and then proactively pick up issues and then fix them. Either way, we can now go back to our app and this is way more feature complete than what we had
[25:11] before. We now have these graphs and of course we can still see our recent transactions and now we have other features like budgets and analytics. So if we click on budgets, I assume we can now add a budget and under analytics, we can view these graphs. So that's all thanks to the PRD that we created and the implementation plan that cloth code came up with. These changes took a very long time to complete. So ideally, I want some audio cue to tell me these changes have been completed. For
[25:41] example, if you ever used cursor in cursor settings, there's this option to play a sound whenever the changes are completed. We can do something similar in claude code by using hooks. In fact, before we look at hooks, let me just create a commit changes. Please create a commit for these changes. Okay, cool. So, we now have a new checkpoint that we can roll back to if we break something. Now, let's talk about hooks. What we can do is add custom hooks to cla code. We
[26:14] can manage hooks by entering front slash and we can go to hooks. Now hooks are basically events that happen within clawed code. For example, after cla code made its changes, we can hook some custom process into that completion event. Now hooks are extremely powerful tools that allow you to do some complicated things. But all I want to do is once the changes have been completed, I want to play some sound. So in this list of hook events, we have events like
[26:45] before tool execution, after tool execution, where notifications are sent. And what I want is this stop event. This gets triggered right before cloud code concludes its response. In other words, after it's made its changes. Let's select this event. And now we can add a new hook. And now we have to provide a shell command that needs to be executed whenever this event triggers. So what we can do is download a sound effect. And I'll link to this page in the description of this video. And let's say
[27:16] whenever cord code completes, I want this sound to play. All right. I'm going to download this file and then add it to some folder on my machine. I'm just going to rename this file to something like bell. And that's it. And now all we have to do is create that shell command to play this sound. So to be honest, I simply use claw to generate the script for me. So we can just say I need a shell command to play a sound file on my machine
[27:48] without opening a media player. The file can be found in C cloth codebell.wave. I'm using a Windows OS. Now, this command will be different depending on your operating system. So, you can use a similar prompt to this. Simply change the location of that file and the operating system that you're using. So, if I run this, let's copy this command. And back in claw code, let's paste that
[28:18] in. And let's press enter. I'll set this at project level. And that's it. If we want, we can add more hooks, but I think that's all we need for now. So, I'll just press escape to go back and let's test it out. I'll just say hello and let's see if the sound plays. I'm not sure if you heard that on the recording, but I did indeed hear that sound. So, whenever Claude Code completes its changes, I now have some audio cue to listen out for. Finally, let's also have a look at processing images in Claude Code. I'm just going to
[28:50] start a new conversation. But let's say we wanted our app to have the same look and feel of this website over here. So what I'll do is grab a snapshot of this page and then save it somewhere on my machine. Then back in Claude Code, I'm going to drag and drop this image onto this chat window, but I'm going to hold shift and then release the mouse button. This will add that image to Claude code. Now let's say something like I would like our app to use the same color
[29:22] scheme as the theme in this snapshot. Please could you make these changes and let's send this. So I'll just approve access to that image file. And I believe on Mac and Linux you can also paste in the file using commandV or controlV but that doesn't seem to work on Windows unfortunately. All right, so it seems like Claude made those changes. And look at that. Our website now matches the theme of that template. So, did you learn something? If you did, consider
[29:52] hitting the like button and subscribing to my channel for more Claude Code content. Also, let me know in the comments if I missed your favorite tip or secret. Check out my other content by clicking on the card on the screen right now. Otherwise, I'll see you in the next one. Bye-bye.