WEBVTT

00:00:00.000 --> 00:00:02.640
You are about to gain AI superpowers.

00:00:02.640 --> 00:00:27.935
What I'm gonna show you in this video is the AI tool taking the world by storm, Claude Code. Even if you've never written a line of code before in your life, by the end of these fifteen minutes, you're gonna be able to build and launch money making apps faster than you can imagine. By the end of this video, you'll be a master of how Claude code works, how to set it up, and how to build and launch apps that will blow your mind even if you have zero technical experience.

00:00:28.360 --> 00:00:36.440
I'll even show you two tips that will 10 x your building speed. I'm serious. If you pay attention here, you have AI superpowers.

00:00:36.520 --> 00:01:02.770
Let's get into it. ClaudeCode is the most powerful AI coding tool in the world right now. It is better than Cursor. It is better than Windsurf. It is able to build way better apps on a way larger scale with significantly less work and oversight needed. When using Cursor, you need to babysit every step of the way. With Claude code, you can give a command, and it'll figure out how to do it on its own and build you really incredible apps.

00:01:02.930 --> 00:01:23.375
With a, you not needing to write a single line of code, and b, with you not having to give any oversight. You give a command, it builds the app, you can walk away, and you're good to go. It's like having your own senior employee working for you. And what it allows you to do is right inside your terminal on your computer, just give it commands, and it starts building applications for you autonomously.

00:01:23.375 --> 00:01:25.535
It's able to work independently

00:01:25.535 --> 00:01:45.645
while remembering a ton of context for you. You literally just open up a terminal like you can see here on the site. If you're on Mac, you open terminal. If you're on Microsoft, you open up the command line, and then you just type into the terminal what you want built, and then ClaudeCode goes off and builds it for you. What I'm gonna show you in this video is actually how you can open it up inside a cursor

00:01:45.885 --> 00:01:59.820
so that you can use it side by side with other AI tools to get even more power out of it. So you can see I opened up my terminal here inside a cursor. I installed Claude, and I'm able to give it commands like build out this app for me.

00:02:00.060 --> 00:02:20.295
And I can hit enter, and it goes, and it just does a tremendous amount of work. Well, if I was using Cursor by itself, the agent built in, I would sit there and babysit Claude. Code can do a lot of things independently. It's also built on top of the most powerful coding model that exists, which is Claude for Opus, which is 10 times better than any other AI model you can use for coding.

00:02:20.455 --> 00:02:49.245
It literally feels like you have a senior engineer working for you. I've never felt this before. When I used Cursor or Windsurf, it really felt like I was working with kinda like an intern that I had a handhold. But with Claude Code, this feels like I'm working with, like, a senior engineer who is doing work for me, who I can just give commands to, then walk away and trust them to get it done. Let's talk about pricing. How much does this cost? You have three options when it comes to Claude code. You have the pro Claude plan, which is $17

00:02:49.245 --> 00:03:04.160
a month. This is a good plan to get started with and probably what I'd recommend with people just testing this out, testing the waters, playing along with this video. The pro plan only gives you access to Claude Sonnet four, which is the less powerful model of the two Claude models.

00:03:04.400 --> 00:03:41.755
Right? So you have Claude Sonnet four and Claude Opus four. Sonnet four is still amazing in what I would consider the second best coating model in the world, and it's good enough to get started. Right? If you're just testing the waters, Claude Sonnet four is gonna do some incredible things. But when you're ready to take the leap, when you're ready to get serious, you also have the two max plans for Claude for a $100 a month and $200 a month. And really, the only difference between these two is you get way more usage out of the $200 a month plan. But both of these give you access to Opus four, which again is the most powerful AI coding model in the entire world. For the sake of this video, if you're new to the Claude code and the Claude ecosystem,

00:03:41.755 --> 00:03:52.790
you're just fine with the $17 month pro plan. You can test this out with Claude Sonnet four. And if you're as blown away as I was, then you can upgrade to the next levels. I personally am on the $200

00:03:52.790 --> 00:04:24.620
plan, and the only reason for that is I code, like, ten hours a day. So I need the most amount of credits to build with, but you can easily get away with any of these two tiers if you're just getting started. For the sake of this video though, I'd start with the $17 plan. So do yourself a favor real quick. Pause the video. Sign up for one of these plans. Again, if you're just getting started, you're not even paying for Claude yet, you're totally cool trying this out with the seven if you're looking to get hardcore and you wanna code every single day, you can easily upgrade to the $100 whenever you want. Once that is done and you are signed up, you are ready to install

00:04:24.620 --> 00:04:34.295
Claude code. Again, you can easily do this in your terminal. If you're just on Mac, you can open up a terminal. But what I'm gonna recommend doing to install Claude code is actually use Cursor.

00:04:34.295 --> 00:04:38.375
There are a lot of advantages to running Claude code in Cursor.

00:04:38.775 --> 00:05:03.435
One of them being is you can actually see the code being changed in real time. So it's a code editor. Right? So you can see code being changed. And number two is you can combine it with other cursor features that I like, which I covered in my last video, but I'll touch on here as well. But you can combine the Claude code features with some other cursor AI functionality too, which we'll get into. So do yourself a favor for the sake of this video, download Cursor two if you haven't already,

00:05:03.515 --> 00:06:03.775
and I'm gonna show you how to install Claude code inside a Cursor in a second. There's a free tier, so you don't need to worry about paying for this right now either. Once you have cursor installed, feel free to open it up, open up a new project, a new folder, very simple to do, and you will see this screen. What we're going to do now is install Claude code inside our terminal inside cursor so that we can combine all the functionality together. So what you're gonna do inside here is hit control tilde if you're on Mac, which opens up your terminal here, which you can see there. All we need to do, and this is very, very simple, is copy in the Claude code command. So I'm gonna go back to the Claude code site, and what you're gonna see right here is this command right here. You hit copy. You paste it into cursor right there in your terminal, and then you hit enter, ClaudeCode's gonna install for you. Very, very simple. Once it's installed, it's just gonna have you log in so you can see what plan you're on, and you're good to go. I'll also put the command down below, so feel free to pause here. Copy and paste the command from the description and put it into your terminal. One last step. Once you have that installed, all you do is type in Claude to your terminal,

00:06:04.015 --> 00:06:12.460
hit enter, and you have Claude code ready to go. There you can see it. Claude code is set. I'm gonna do one more stylistic

00:06:12.460 --> 00:06:19.100
thing here that I think you should do as well. If you right click on the terminal up here and then do panel position, click right.

00:06:19.420 --> 00:06:42.730
I like it over here on the right hand side. Then we can close the cursor AI agent, so all we see is Claude code. I just like having it here so we can see the entire chat on the right hand side. So now we have it installed. Time to start use here's the fun part. This is where we get to start building the app. So I'm gonna do a few things here. I'm gonna show you how to build the app. I'm also gonna show you two tricks I think will give you superpowers

00:06:42.730 --> 00:07:32.250
when it comes to Claude code. I'm gonna show you the kind of mindset you need when using it that's gonna make you super, super effective, and I'm gonna give you some little tricks I promise you haven't seen anywhere else that's gonna make it so much easier to build apps even if you've never written code before. So let's do this. We a fresh project in Cursor. We have no code written whatsoever. Let's get this started. Let's start off by building a calendar app. So I'm gonna have Claude code build out kind of the base components of the calendar app, and and then I'm gonna show you these really awesome tricks that are gonna make it so easy to build apps with Claude Code. So I'm gonna start off by giving it a simple command to build the app. We're gonna build a calendar app using Claude Code. Once we hit this, it's gonna start building out the app. I'm gonna go over some advantages of Claude code and how it's working. Then I'm gonna give you these awesome tricks. I'm gonna change how you build apps forever.

00:07:32.650 --> 00:07:42.735
So let's do this. I put in the command. I wanna build a calendar app using Next. Js. For those who don't know, Next. Js, very popular web app technology. It's gonna make it easy to build and scale your apps.

00:07:43.055 --> 00:08:47.760
It should show a calendar view of this week and make it so I can create new events and assign dates and times to the events. It should be a really beautiful app. So you're talking to Claude Co. Just like it's your employee, just like it's an engineer that works for you. Tell it what you want it to build, and it's gonna go build it for you. Let's set up the basic version of this app. I'll show you the tips and tricks, and it'll make this app look really awesome. So let's hit enter here. And as this is building, make sure to leave a like and subscribe if you learned anything at all. All I do is make incredible videos about how to build with AI. What Claude code is now going to do is gonna start thinking, and it's gonna start showing you how to build the app out. So it's okay. I'll help you build a beautiful calendar app with Next. Js. Let me start off by setting up the project. So it's setting up the project. What I love about Claude code that I don't really see any other tools do is it sets up a to do list. Right? So when you give a command to Cursor, for instance, and this is a big difference between the two, it thinks very one dimensionally where Cursor would be like, okay. I'm just gonna one shot this command. I'm gonna you tell me to build a calendar app. I'm just gonna one shot building the calendar app. And when AIs try to one shot things,

00:08:48.000 --> 00:10:14.600
that's when they usually screw up. What Claude code does is it doesn't try to one shot it. It actually breaks it down into individual to dos. So it makes like a to do list for itself, then it goes and executes on that to do list. So instead of one shotting everything, it breaks it down into tiny little chunks, and it executes on those chunks for you so that you get really, really good result. So every step of the way, it asks, do you want me to proceed so you can approve it? If you wanna go in YOLO mode, you can say yes and don't ask me again. Uh, let's just, for the sake of this video, just say yes. But as a side note, when I'm building apps personally, I go into YOLO mode. I let it do whatever it wants, and I've never once ran into an issue. I never once messed anything up. So let's, for the sake of this video, just hit yes for it to proceed, and it'll start building out our app. So as it goes through, it's gonna ask for approval on installing different technologies. Don't worry here. Just hit yes. It's gonna start installing all the tech you need to build out your app. And also make sure to build along with me here. So if you want, pause the video, grab the command from down below. I'm gonna put all my prompts down below as well, and build this out with me. The best way to learn is by doing. So as you can see here, as it goes through its to do list, it crosses it off and then moves on to the next to do items, which is amazing. It's it's like, it can manage itself. It can iterate and think about what it's doing and then improve on what it's doing. So I'm just gonna keep hitting yes as it goes down through its to do list. And by the end of this, it's gonna have a beautiful calendar app. Once it's done here, we're gonna go into the depths around switching models, around tips and tricks, planning mode versus execution,

00:10:14.760 --> 00:10:45.150
and I'm gonna give you those two hacks I think will blow your mind with Claude Code. So as you can see on the left hand side, inside cursor, the code is being written by Claude Code. We're not doing anything. We're just sitting back, relaxing while our senior developer goes and writes all the code for us. With Cursor, I do need I need to babysit each step of the way to make sure it's running well. With Claude, just sit back, relax, and it goes right down the list of to do items. Alright. Looks like it completed the v one of the calendar app. So let's check out what it looks like, and then we'll start getting into

00:10:45.310 --> 00:11:02.085
the workflow you wanna do with Claude code that makes it so much more powerful than any other AI tool. And I'll show you the secret to how I use it that gets you way more productivity from Claude Code. So let's check out the app first. I'm gonna bring over the local host, see what we got here. Okay. So we do have a calendar.

00:11:02.325 --> 00:11:07.125
I'm gonna be quite frank with you. It looks very ugly. This is a very ugly looking calendar.

00:11:07.580 --> 00:11:25.155
So this is good. I'm happy it looks this ugly because now I can show you how to work with Claude code to make this look way better and have way more functionality. So let's go back into Claude code, and let's get into the secret sauce here. So we're back into Claude code. Here is the secret to Claude Code. The secret to Claude Code is planning

00:11:25.235 --> 00:11:26.435
and execution.

00:11:26.515 --> 00:11:30.755
There's two phases to Claude Code. This actually isn't in any of the documentation.

00:11:31.075 --> 00:11:45.780
They just kinda expect you to know this, is there's a planning mode with Claude Code and an execution mode. And what you wanna do is if you can nail the distinction between these two modes, you can get so much better results. So we're in Claude code. What you wanna do is hit shift tab.

00:11:46.020 --> 00:12:09.080
When you hit shift tab, you can see plan mode on. This isn't in any documentation. If you go on Claude's site and look at all the documentation, for some reason, it doesn't tell you that there's a shift tab to turn plan mode on. So what you wanna do when working with Claude code is you start off in plan mode through shift tab, and then once you have the plan correct, you switch to execution mode with one more shift tab to execute.

00:12:09.240 --> 00:12:26.255
This is going to make it so you get so much better result. So pause here, get into plan mode, hit shift tab, and I'm gonna start walking you through how to use plan mode to get incredible apps. Okay. Great work. I wanna first make this calendar look really nice with clean colors and easy to read minimalistic interface.

00:12:26.415 --> 00:13:14.745
Please build the plan to execute on this. Right now, it's very plain and ugly as if there's no styling. We're gonna hit enter. Now what Claude code's gonna do because it's in planning mode is build us a plan that it can execute on. So it's designing it right now. You can see all the tokens being used. You can see which files it's reading to do the planning. If we wanted to interrupt, we can hit escape, but it's doing good so far. So we're gonna see what kind of plan it comes up with here. And then before we execute, I'm gonna show you one more amazing trick that's gonna make Claude code even more powerful than it already is. But let's take a look at the plan first before we do that. Okay. So here's Claude's plan. I like the little interface it gives us here. So calendar UI enhancement plan. Look how in-depth this is. Look how in-depth this is. That's pretty cool. Design goals. Create a beautiful, modern, minimalistic calendar interface with soft, pleasing colors and good contrast.

00:13:15.065 --> 00:13:18.825
Improve spacing and typography and enhance the visual hierarchy.

00:13:19.225 --> 00:13:21.305
Alright. And then it has a plan changes.

00:13:21.545 --> 00:13:27.020
Replace the harsh gray colors with softer colors. I like that. Oh, look at this. Glassmorphism

00:13:27.020 --> 00:13:28.860
effect for modal backdrop.

00:13:29.100 --> 00:13:33.660
So we're only a few days removed from the Apple event where they made glassmorphism

00:13:33.660 --> 00:13:36.220
like the whole Apple design language.

00:13:36.380 --> 00:13:54.440
Claude code is already aware of that. It's gonna start implementing it into our calendar, so I'm excited to see how it does. Let's see how good it can do there. Uh, and it has the rest of the plan, smooth hover transitions. Okay. I like that. Would I like to proceed? I think that's a pretty good looking plan, don't you? Let's do this. Let's hit enter on. So let's proceed. And now it is automatically

00:13:54.440 --> 00:15:07.605
switched to execution mode, and now it is going to implement the calendar design. So automatically switched to execution, and now it's writing the code to make this look really, really good. And, at this point, if I want to, I can walk away. That's how much I trust Claude code is this is the only AI where, for me, it's been so good. I feel like I can walk away and do other things. What I actually do is, and this would be my recommendation to you, there's one or two things you can do when Claude Code's working. One is you can build other apps. So I actually work on two apps at a time at all times because that's how good Claude Code is. But the other thing you can do as well if you're just getting started, and I'd recommend this, open up a second window, open up a chat, whether you like chat GPT or Claude. Open up that chat, and just chat with an AI. Talk about what you're building. Talk about what else you wanna build. Talk about your life goals. Set up a life coach. Whatever you wanna do, That's how I get the most productivity out of my AI sessions is I try to do two things at once. I have an AI build an app for me, and then I also have an AI coaching me, talking about planes, talking about what I'm working on, and improving my business. That's what I recommend for you. Alright. Looks like it's all done. Let's check this out. Let's see how it did. Boom. Okay. That's pretty nice styling. Let's see. We got this nice gradient on top here.

00:15:08.005 --> 00:15:37.575
Alright. Let's do new event. Oh, it does kinda have that glass morphism blurry effect in the background. Let's let's get one thing correct here. Still very ugly. There's still bordering issues here. There's still some things that need good styling, but we can work with this. This is good. Again, this is all done with pretty much two prompts so far, even entire calendar app with pretty cool modern styling. You can even see some of the nice little details here. There's, like, a glowing little dot here on the current day we're in. I like that. So I showed you a little bit about planning

00:15:36.900 --> 00:15:52.340
execution mode. We're gonna implement a couple more features. I wanna show you some other tips and tricks that are really, really critical for Claude code that are gonna turn up your productivity by 10. So let's do this. I wanna show you a couple more things here. I wanna show you another trick they don't show you, which is slash model.

00:15:52.695 --> 00:15:54.535
So if you do slash model

00:15:54.695 --> 00:15:57.415
and then do Opus, so you type in Opus,

00:15:57.655 --> 00:16:42.960
you are gonna be able to switch to their best programming model, which is Opus, Claude Opus four. It is by far the smartest, best AI coding model there is on planet Earth. So if you are on the 100 or $200 plan, you wanna do that. You wanna do slash model Opus. If you're still on the $17 plan, stick with Sonnet. That's totally cool. It still works really, really well. Up to now, everything we've done is on the Sonnet model, so it works well. But I wanna add a couple more features to this calendar app. But before we do that, I wanna show you another really, really powerful trick with Claude code. If you go over here to your file system and you do new file, right click, new file, we're gonna make a new file called Claude, in all caps, dot m d, so for markdown.

00:16:43.360 --> 00:17:39.740
This is going to be our rules file for Claude code. Whatever we put in here is gonna be included as context to Claude code with every single prompt to do. So what we're gonna do is we're gonna put in a few rules here that are really powerful, that are gonna make Claude code even better at coding. So here's the rules we're gonna put in. I'll also include this down below in the description, so feel free to pause here, copy and paste it from the description, and then put it into your own application. And right before I go through these rules, let's make one more file that make Claude even more powerful. So new file, and we're gonna call this to do dot m d. So another markdown file, to do dot m d. So once you have claw dot m d, to do dot m d, and then you copy and paste these rules in, you'll be good to go for what I'm about to show you. So here we go. This is what we put in the rules. This will be included in every single clawed prompt you do now. First thing through the problem, read the code base for relevant files, and write a plan to to do dot m d. So what this is going to do is basically build us a project manager.

00:17:39.900 --> 00:17:55.395
So everything Claude does, it's going to add its to do list to to do dot markdown. So as it goes, if we ever check back in, we can read that file and see what progress Claude has done in its to do list so we can track everything it's doing step by step. So that's really powerful.

00:17:55.635 --> 00:18:54.655
The plan should have a list of to do items that you can check off as you complete them, just as I explained. Before you begin work, check me, and I'll verify the plan, kinda what we're doing with the plan mode. One other really important rule here that's I included as well is make every task and code change you do as simple as possible. We wanna avoid any making any massive or complex changes. This is just a good rule to include in any other AI programming tool you use, so I include that as well. So we have this rule list here. This is included with every single Claude command you do, and this is gonna make it so that, a, the changes that Claude code makes are impactful, and, b, it keeps you up to date with everything that Claude code is doing so you can track progress as it goes, which makes it really easy to manage. It's kinda like setting boundaries for your own software engineer that's working for you. So now that we set up all our guardrails here, let's put everything I've taught you together so far into this and keep building our calendar app. Right? So far, I taught you about planning and execution mode.

00:18:54.895 --> 00:19:02.160
I taught you about giving it rules that it will follow to make really good changes, and then I taught you about the to do list

00:19:02.480 --> 00:19:21.425
file that it's going to keep track of all its tasks in. So now we're really organized. Claude Code's gonna be a really good employee for us, and it's gonna write really good code. So let's go back into Claude Code. Let's do shift tab to go back into planning mode, and let's start building out more features here. So one thing I like to do before I give

00:19:21.825 --> 00:19:33.640
more commands to Claude Code, and this is a really good tip as well for using Claude Code, I think you'll like. So what I wanna do next is add to do items to the calendar. So we can also add to do instead of events,

00:19:33.800 --> 00:19:49.585
but I wanna get a feel for what Claude code thinks it should do next. So since it's such a powerful smart model, before I do any next steps, I wanna get insight into what it thinks we should do next. So here's what I'm gonna do. What do you think we should add to make this calendar even more powerful?

00:19:49.745 --> 00:20:20.605
One of my favorite things to do with AIs, especially Claude Cote, who's so smart, is just ask for its opinion. What should we add next? What do you think you can do to improve it? And a lot of the time, what I find is to actually give suggestions that I never thought of that makes the app way more powerful. Let's hit enter on that in plan mode, and let's see what kind of plan it comes up with. Alright. So here's the plan. Wow. Look at this plan. Let's here's the plan that they came up with. A powerful features. One, event persistence and storage. Okay. So being able to store the events to a database. That's pretty good for future proofing.

00:20:20.685 --> 00:20:28.360
Adding recurring events, adding multiple views. Oh, I like that. Advanced event features, so being able to add descriptions, categories,

00:20:28.360 --> 00:20:29.080
locations,

00:20:29.160 --> 00:20:44.395
attachments. That's pretty cool. Search and filter, keyboard shortcuts. So I like some of these event management. Let's have it implement the event manage. So I'm gonna come back in. I'm gonna say I'm gonna hit the escape button, and I'm gonna say, I really like the event manage recommendation.

00:20:44.475 --> 00:21:15.415
Make it so I can manage drag and drop events in the calendar. So we're gonna switch back to execution mode. So shift shift tab, and I'm gonna hit enter, and it's gonna get to work. And by the end of what it's doing, I'm gonna have that implemented. Right? And so this is the most powerful way to work with Claude code where we're going back and forth. I'm asking for ideas. We're bouncing ideas, and I tell it, okay. Go ahead and execute on the ideas. This is what makes Claude Code so much more powerful than anything else out there. Okay. Looks like it's all done here. What did we get? So with that one prompt,

00:21:15.575 --> 00:21:20.615
Claude Code added drag and drop events, edit events, delete events, event persistence,

00:21:20.900 --> 00:21:26.980
description field, and the enhanced UX. So let's check this out. Let's see how it did here. So we have the calendar.

00:21:27.220 --> 00:21:30.500
Let's add an event. Record a YouTube

00:21:30.900 --> 00:21:50.650
video. Let's give it a date of today. Let's create the event. Boom. There it is. Let's see. Can we drag and drop it? We can. I mean, that looks just like Google Calendar. That's pretty amazing. So it added the drag and drop, which is sick. Let's see if we can edit it. Yep. We can edit it. Let's give it a different theme. Update it. It updates it. So we added entirely new editing

00:21:50.730 --> 00:22:02.765
with just that one prompt, and it did it. It made it looks really nice. I think the whole thing looks really nice. And this is what I love to do with AI is I love to take any apps I use regularly that I pay for, like Google Calendar,

00:22:02.845 --> 00:22:36.735
and just build my own version of it. Then I can go back, cancel the plan, save money. AI is actively saving me money. So, again, here are the three main ways to get the most out of Claude Code. You wanna think about planning versus execution, so being in planning mode, then switching execution mode. Get a really powerful plan, and then execute on it. You wanna have your Claude rules set up, which, again, pause. Look down below in the description. I have all the rules you need. Put that into your rules file. That makes sure Claude code runs very, very smoothly. And then you want to think about project management. So you want to think about managing your tasks,

00:22:36.895 --> 00:22:57.930
managing what you want to build next, and making sure Claude code manages that so that it thinks about the bigger picture as it's completing all its small tasks. Claude code is the most powerful AI coding tool I've ever used. If you use it properly and you know how to communicate with it, you can get more out of it than you can possibly imagine.

00:22:58.010 --> 00:22:59.530
It can build incredible

00:22:59.530 --> 00:23:36.654
things without you needing to babysit every single step of the way. I'm now using it over cursor. I'm now using it over windsurf. It is amazing. Feel free to watch this back over all my tips and tricks and rules again so that you can become a Claude code master. And if you can become a Claude code master, you can build anything you want. To see my advanced workflow with Claude code, feel free to check out the video linked somewhere on this screen right now. It'll show you how I use it side by side with other AI tools to build really amazing things. And make sure to hit the subscribe button and leave a like if you learned anything at all. All I do is make awesome videos about how to build stuff with AI. I'll see you in the next video.