0:00 Hey guys, welcome to my cursor and 0:02 coding with AI crash course. So in this 0:05 video I'm going to introduce you to 0:06 cursor and go over the features and 0:08 interface, but I I'm also going to spend 0:10 time talking about just coding with AI 0:12 in general. So a lot of these practices 0:14 and workflows and the stuff we talk 0:16 about, they're going to apply whether 0:18 you're working with cursor, claude code, 0:20 winds surf, or any of these other tools. 0:22 So we're going to talk about things like 0:24 agents, rules, context, uh models, 0:27 things like that. So, I want to give you 0:30 kind of three different examples because 0:32 there's different levels of of how much 0:35 AI assistance you can use in your in 0:37 your project. So, I want to start off 0:40 doing what I would suggest beginners do, 0:42 which is opening an existing project 0:44 that you've been working on, open it in 0:46 cursor, and then start to use it 0:48 gradually. So, you can use things like 0:51 tab completion and inline editing. And 0:54 you can do that before you move to the 0:56 the main chat interface where you just 0:58 vibe code and pretty much just tell it 1:00 what to do. So, we'll start off that way 1:02 and we're going to use uh just an 1:04 existing shopping cart UI that I have. 1:07 And then we're going to move on to some 1:09 vibe coding and we'll use the chat 1:11 interface to create a a SAS landing page 1:14 with an interactive calculator where you 1:17 know you can change the number of users 1:19 or the number of of any kind of resource 1:21 and the price will update in real time. 1:24 So we'll generate that. We'll go back 1:25 and forth ask it questions talk about 1:28 context. And then finally we're going to 1:30 create a next.js project that will be a 1:34 markdown resume editor. So something a 1:37 little more in depth and we'll again 1:39 talk about context. I'll show you how we 1:41 can create a a context file. Uh we'll 1:43 also talk about setting rules and so on. 1:46 All right. So this will be kind of a 1:48 it'll be longer than most cursor 1:50 tutorials because I feel like a lot of 1:52 them they just jump in and show you the 1:53 chat interface and generate something 1:55 and that's it. I want to go over the 1:57 settings and and go over, like I said, 1:59 the the kind of workflow that that I 2:01 would use for each of these different um 2:04 these different levels of of AI 2:07 assistance. All right, so let's get into 2:09 it. 2:14 All right, guys. So, I just wanted to 2:16 take a second and tell you about today's 2:18 sponsor. So, Savella is an all-in-one 2:20 solution for hosting your apps, your 2:22 APIs, static sites, and they support 2:25 just about any popular language and and 2:28 framework that you can think of. And I 2:30 myself have been doing web development 2:32 for about 20 years now. And I remember 2:34 the the absolute nightmare that came 2:36 with deployment and DevOps up up until 2:39 really just a few years ago. But Sabella 2:41 is a platform that makes it super easy. 2:44 Gives you a simple UI to work with to 2:46 deploy your applications as well as spin 2:48 up databases like Postgres in in really 2:51 just a couple of clicks. And you can 2:53 deploy from GitHub or GitLab or from a 2:56 Docker image. They offer free static 2:58 site hosting and then app and database 3:01 hosting from $5 per month. And then 3:04 obviously you can scale as needed. And I 3:06 don't take on sponsors that I don't 3:08 believe in. Sabella has a great service, 3:10 great product. So check them out and the 3:12 links in the description below. All 3:13 right, so let's talk about what cursor 3:15 actually is. So it's essentially a 3:17 supercharged version of VS Code with AI 3:20 built directly into the editor. So it's 3:22 not just another extension that you add 3:24 on top. The AI features are baked into 3:26 the core experience and you get that 3:28 familiar VS Code interface and you have, 3:31 you know, powerful AI assistants that 3:33 can help you write, edit, and understand 3:35 code. And I would say the main 3:37 difference between cursor and a lot of 3:39 the other ai tools is how seamlessly 3:42 integrated everything is. So instead of 3:44 switching between your editor and a 3:46 separate uh AI chat interface or dealing 3:49 with clunky extensions, cursor just 3:51 gives you multiple ways to interact with 3:53 the AI right from where you're already 3:55 working and it knows full context of 3:57 your project. All right. So, I I want to 4:00 talk a little bit about pricing because 4:02 it can be pretty confusing and even 4:04 Curser themselves admitted that their 4:06 their roll out for pricing was horrible 4:08 and it's changed over the past few 4:10 months and it'll probably change again 4:12 or I know it will change again. It's 4:13 just a matter of when. So, by the time 4:15 you watch this, this could be different. 4:17 And I'll explain it to how I understand 4:20 it because it still confuses me a little 4:22 bit as well. And if if I'm wrong about 4:24 anything, feel free to correct me. So, 4:26 for the individual plans, you have the 4:28 free tier, the hobby tier, you get a a 4:31 two-eek trial of the pro tier, and you 4:33 get very limited agent requests, which 4:35 are basically interactions with the AI. 4:38 So, whether that's in the chat interface 4:40 or inline, you get very limited 4:42 requests, limited tab completions. And 4:45 then the $20 per month gives you 4:47 extended limits on agent requests and uh 4:50 unlimited tab completions. You also get 4:52 something called background agents where 4:54 you can run tasks in the background. Um 4:57 access to bugbot which will look at your 4:59 pull requests and and look for bugs and 5:01 then access to maximum context windows. 5:04 Now there's kind of a caveat from what I 5:06 understand with the $20. So if you want 5:10 to use a specific model because you can 5:12 use multiple models with cursor whether 5:14 it's GPT or claude or Gemini. If you 5:18 want to use like let's say Claude for 5:20 Sonnet and you want to only use that you 5:23 you get allocated $20 per month towards 5:26 that and if you go over that if you want 5:28 to keep using that specific model then 5:31 you'll be either be asked to upgrade to 5:33 the 200 or you'll be asked if you want 5:35 to pay the normal price for that model. 5:38 Now, if you don't want to pay more than 5:39 $20 per month, you don't have to, but 5:41 you just switch to auto mode, which 5:43 means that cursor selects the model 5:46 that's going to be used based on 5:48 basically based on the task that you're 5:50 doing. Um, so that's kind of the caveat 5:53 of this. You can't just use whatever 5:55 model you want forever. Um, and then the 5:58 $200 plan is is everything the $20 is. 6:01 It's just more, right? You get 20 times 6:03 the usage on these these premium models 6:06 like GPT, Claude, Gemini, Grock. You can 6:10 use pretty much anything, any of the 6:12 real popular models. So, that's the 6:15 pricing from what I understand. Now, to 6:17 get Cursor, just go ahead and download 6:19 it, install it just like anything. It'll 6:21 ask you if you want to import your VS 6:22 Code settings, and that includes your 6:24 extensions. So, the interface is, you 6:26 know, very, very familiar. So, let's 6:29 open cursor up and I'm going to, like I 6:32 said, I'm going to be using it in a 6:33 project that already exists, which is 6:35 this shopping cart UI. And before I get 6:38 into anything any of the code, I just 6:40 want to talk about the settings and the 6:42 interface. So, the biggest the most 6:46 notable change here between VS Code and 6:48 Cursor is going to be this chat 6:50 interface on the right. And this is 6:52 where you're going to spend a lot of 6:53 time if you're using AI a lot, if you're 6:56 basically vibe coding. So from here you 6:59 can add context, right? Context is just 7:02 is basically what the AI sees and it 7:05 does see your entire project without 7:07 having to add context. But if you wanted 7:10 to focus on specific functions or a 7:12 specific problem, you know, uh lines or 7:16 whatever, then you can add right here 7:19 you can add certain you know files and 7:21 folders code documentation. So like uh 7:25 if you wanted to add let's say the font 7:27 awesome docs or something like that or 7:30 git repositories pass chat rules which 7:33 I'll talk about in a few minutes 7:35 terminals your active tabs so if I open 7:37 a tab that's automatically going to be 7:39 in my context you can see right here one 7:41 tab and you can also specify with at so 7:45 let's say I wanted to add like um index 7:49 CSS or or whatever I could add it that 7:52 way. All right. So, just be aware of 7:54 what is in your immediate context. Now, 7:58 this stuff, agent auto, I'm going to 7:59 talk about that in a minute, but I want 8:01 to get into the settings. So, let's go 8:03 to cursor settings and then cursor 8:05 settings. So, from here in the general 8:07 tab, you have your manage account. This 8:10 is where you can see all your usage, the 8:12 exact models that you use, the tokens, 8:14 all that stuff. And then this is just 8:17 basic settings. Privacy mode. So if you 8:20 have this on, which I do, your data 8:22 won't be trained on or used to improve 8:24 the product. So that's that's up to you 8:26 if you want to keep it on or off. I just 8:28 I value my privacy, so I keep it on. And 8:31 then the chat tab here. So this is where 8:33 you can choose the default mode of agent 8:35 or ask. Now, I would say at least 95% of 8:39 the time you're going to be in agent 8:40 mode because the agent is what actually 8:43 uh creates files, edits your code, um 8:46 runs terminal commands, runs tests. So, 8:50 it does it does all that stuff. It's 8:51 like the the virtual coder where ask 8:54 mode is more like a chatbot like chat 8:57 GPT or Claude AI. So if you want to ask 9:00 specific questions either about the 9:02 project or about something else like 9:04 maybe you want to know more about the 9:05 use ref hook from React or something 9:07 like that then you would use ask. So 9:10 you're most likely not going to have the 9:11 default as ask. But if you want to use 9:14 it you can go here in the chat interface 9:16 and you can select ask. Okay. And you 9:19 might also want to use this if you want 9:20 to ask a question but not worry about it 9:22 actually editing your code because 9:24 sometimes the agent will edit stuff that 9:26 you don't want to. It'll run code. It'll 9:29 um you know run tasks that you don't 9:31 want. And you can also uh use background 9:34 agents from here as well. So yeah, all 9:38 this stuff is pretty basic. 9:40 The include full folder folder context. 9:43 I wouldn't suggest adding that because 9:45 that can it can add to your tokens. It 9:47 can slow things down. Um web search 9:50 tools. So you want to allow agents to 9:52 search the web for relevant information. 9:54 I would suggest leaving that on. So, 9:56 let's see. Auto run mode, also known as 9:59 YOLO, uh, YOLO mode, will just run tools 10:03 like command line tools and stuff 10:05 without asking or needing your 10:06 permission. So, I would say leave this 10:08 at ask every time if you're just getting 10:11 started with cursor. And then once you 10:13 get a feel for it, once you get add some 10:15 rules, then you can just have it run 10:17 everything automatically if you want. 10:19 There's also an allow list. Okay, so 10:22 tab, this just has to do with tab 10:24 completions. There's partial accepts. So 10:26 if you want to accept a part of a 10:28 suggestion, you can do that with command 10:30 or control arrow. Now models, this is 10:33 where your models are enabled or 10:35 disabled. So I pretty much have the 10:38 defaults. I've uh GPT5, 10:40 Claude 4 Sonnet, Claude 3.7, Cursor 10:44 small, which is Cursor's own model. Um 10:46 that's pretty much all I have enabled, 10:48 but you also have like 03, you have 10:51 Gemini, you have Grock. Uh yeah. So if 10:55 you want to enable other models here you 10:57 can. Now claw 4 opus is for it. You can 11:01 use that with cursor but only in max 11:04 mode. So max mode will get maximum 11:07 context window in tool calls. And this 11:09 can again really just just raise your 11:12 token your usage. Um it can also really 11:15 slow things down. So I would only use 11:17 this if you're doing really difficult 11:19 stuff like difficult calculations or 11:21 whatever. So otherwise I would I would 11:23 suggest keeping that off. So background 11:26 agents I haven't really gotten into. Um 11:29 MCP tools. So basically model model 11:32 context protocol servers you can add 11:35 those here. Um basically like let's say 11:38 Neon database or or or Kubernetes or 11:42 Firebase. These these services have 11:44 these MCP servers that you can use to 11:47 basically directly interact with the AI 11:50 kind of like kind of like an API. And 11:52 then rules and memories. Rules are 11:54 really important when it comes to coding 11:57 with AI because if you don't have rules 11:59 then it's just going to do things 12:00 however it wants. So here you have both 12:03 user rules and you also have project 12:05 rules. So user rules are global that 12:07 pertains to any project where project 12:10 rules obviously pertain to that specific 12:12 project and stuff that is is directly 12:15 related to specific technologies like 12:18 React or or Python whatever it is you're 12:21 using usually that's going to go in your 12:23 project rules and then more general 12:25 stuff more highlevel rules will go in 12:28 your user rules. So you can see mine. 12:30 We'll just look at these for instance. 12:32 Prioritize clean, efficient, and 12:34 maintainable code. Follow best practices 12:36 and design patterns. Generate concise, 12:39 actionable responses. Some of these are 12:41 are kind of redundant, but I think that 12:43 they're important. So uh most of them 12:45 are are pretty general, but some are 12:48 related to technologies like I have used 12:50 TypeScript over JavaScript for any React 12:53 or Nex.js projects. Um, and and some of 12:56 this stuff you'll add as you go along 12:59 and you notice that it's doing things 13:01 you don't want or that you want to 13:02 change. For instance, anytime I would 13:05 generate a Nex.js project and use 13:07 Tailwind, it was using Tailwind 3 and it 13:10 was creating a config file. So, I 13:12 specifically said always use Tailwind 4 13:15 syntax and refer to the docs for version 13:17 4. Never use version three. Another 13:20 thing it was doing was suppressing my 13:21 TypeScript errors. So I said do not 13:24 ignore suppressed TypeScript errors. 13:25 Focus on clean passing code. I said 13:28 never use the any type unless absolutely 13:30 necessary. So I mean you know rigorous 13:34 rigorously apply dry and kiss principles 13:36 in all code. So most of it's pretty high 13:39 level but rules are are very important. 13:42 Now when you create a project rule it 13:45 creates it in your uh in your file 13:47 structure. It'll be a folder called I 13:49 believe curse.cursor cursor and then a 13:52 rules folder. It used to be a single 13:54 file called cursor rules, but that's 13:56 been deprecated, but you can still use 13:58 that. It still works. And then indexing. 14:02 This just shows that 100% of my codebase 14:04 is indexed. Um, so basically it sees 14:07 your whole codebase, but again add the 14:09 context if you want to focus on 14:11 something specific and your open tabs 14:13 will be in your context. So no need to 14:15 add those manually. All right. So that's 14:18 kind of just the the gist of of every 14:20 everything and how it works. So now what 14:22 I want to do is give you a couple 14:24 different examples. I'm going to start 14:25 with just using cursor with an existing 14:28 project. So let's start that. All right. 14:30 So as I mentioned, there's different 14:32 levels of of AI assistance that you can 14:35 use in your projects. Anything from 14:37 using it to write every line of code to 14:40 you just using a little bit of tab 14:41 completion, using it to ask questions 14:43 and learn. And that's the way I would 14:46 suggest using it if you're a beginner, 14:47 not just a beginner to to programming in 14:50 general, but to a specific language or 14:52 framework or or anything you're using. 14:54 So that's what I want to show you first 14:55 is to use it in an existing application. 14:58 So I have this shopping cart UI and this 15:01 is just a very simple project from my 15:03 React course. It's not an e-commerce 15:05 platform or anything. It's just some 15:07 products that you can add to your cart. 15:09 And I I basically used it to show how to 15:11 use the context API because as you can 15:13 see there's a context and there's an add 15:16 to cart function in that context. And 15:18 what I want to use tab completion to do 15:21 is to make it so we have a quantity 15:24 selector that will pass a quantity in 15:26 here instead of just adding one to it, 15:28 which is what it's currently doing. So 15:31 let's run the project. I'm going to open 15:32 up my terminal. It uses JSON server. So, 15:35 I'm going to say run JSON- 15:38 server. And then I'll open up another 15:41 tab 15:43 and let's do npm 15:46 npm rundev. 15:50 And then I'll open that up. 15:53 Okay. So, this is what it looks like. We 15:54 just have some cards with some products. 15:56 This is the cart right here. And if I 15:58 click add to cart, gets added. And I can 16:00 click multiple times and add multiple 16:02 quantities. But like I said, I want to 16:04 have a a a quantity selector. Basically, 16:07 a button to to increase or decrease the 16:10 quantity. All right. So, let's do that. 16:12 I'm going to jump over to components 16:14 product card. And I'm just going to put 16:16 my my cursor here. And you can see it's 16:19 recommending use state import use state. 16:22 It's also recommending to add uh the 16:25 quantity as a state, which is what I 16:27 want to do. So, I'm going to hit tab. 16:28 It'll accept both of those. Now, it's 16:30 going to keep going. So you see this tab 16:32 to next move. So I can either hit it or 16:35 I can scroll down and I'll still see 16:37 I'll see right here tab to jump here. So 16:39 I'll do that. And then the 16:40 recommendation is to pass the quantity 16:43 into the function. So I'll accept that. 16:46 All right. Now there's no quantity 16:48 buttons here. So I'm going to click 16:49 above the add to cart button and it 16:52 should suggest. So it's suggesting an 16:55 opening div. I'll go ahead and accept 16:57 that. Now it's accepting or sorry it's 17:00 suggesting a button with an on click to 17:03 set the quantity to to minus whatever it 17:06 is. So the decrease button I'll accept 17:08 that. Then it's suggesting the span 17:12 which is going to show the quantity and 17:14 the the button to add to the quantity. 17:17 So I'll accept that. Now it's showing 17:20 the closing button and the closing div. 17:22 So I'll click that tab to wrap it up. 17:24 And now we should see the buttons. So, 17:26 I'll go ahead and go to the the browser 17:29 here. And now we have these quantity 17:32 buttons. All right. And I didn't write 17:33 one line of code. Now, these aren't 17:35 going to work just yet. If I have it to 17:37 three and I hit add to cart, you'll see 17:39 it's only one. That's because this add 17:42 to cart, even though, you know, we're 17:45 passing a quantity in, it doesn't accept 17:47 that. So, what I want to do is go to 17:49 that function, which is in this, it's in 17:52 the context coming from use cart. So, 17:55 I'm going to commandclick that. go to 17:56 that file. And now notice it says tab to 17:59 next move. So if I come up here, it says 18:02 tab to jump here. So not only does the 18:05 tab follow me, you know, through the 18:07 file going to different lines, but it 18:09 follows me across multiple files. So 18:12 I'll hit tab. And now it suggesting that 18:14 I add the quantity. I'll accept it. Now 18:17 right here, another one's popping up. 18:19 And you can't see that, but it says tab 18:22 or whatever. It says tab to to go here. 18:24 I'm going to do that. And what it's 18:26 going to do is get rid of that one. And 18:28 it's going to use that quantity that's 18:30 passed in. Okay. So now I'll save that. 18:32 We'll go back to the project. I'm just 18:35 going to clear the cart and I'm going to 18:38 select three of the headphones. Add to 18:40 cart. And now you'll see three times 18:42 $59.99. 18:44 Okay. So we now added that 18:46 functionality. And I didn't write any 18:48 code, but I did see exactly what it did. 18:51 So this this way of using AI is much 18:54 different than just saying, you know, 18:56 add the add the quantity buttons. I 18:58 mean, you could do that and then look at 19:00 the file, but this shows you everything. 19:02 So now I want to show you the inline 19:04 edit, which is also very helpful. So 19:07 let's say now that we added those 19:09 buttons, we don't like the look of them, 19:11 right? So let me just make this a little 19:13 smaller. So we don't like the look of 19:15 them. So I'm going to select the div 19:18 that wraps those buttons. Right? So I 19:21 want to select this whole div and the 19:23 two buttons and the quantity display. 19:26 And then I'm going to hit you can either 19:28 click this quickedit or command or 19:30 control K. And then this input is going 19:33 to pop up and I'm going to say can you 19:36 style 19:37 the or can you style um this area 19:42 better? And then you have options. You 19:45 have edit selection, so that's 19:47 whatever's highlighted. You have edit 19:49 full file if you wanted to look at the 19:50 full file. Quick question, so if you 19:53 just had a quick question, which is 19:54 which is great for learning, and then 19:56 send to chat, which is just going to put 19:58 what whatever you put here is going to 19:59 go to the chat. So I want edit 20:01 selection. And I'll hit enter or click 20:04 send. So it says generating now. It's 20:06 going to make the changes and give me 20:08 the diff. So anything that is gone that 20:12 it gets rid of is in red. Anything it 20:14 adds is in green. So you can see it 20:16 added the class of justify center gap 20:19 three and margin top four. And then it 20:21 added a bunch of classes onto the 20:23 button. Now you can if you don't want 20:25 this the suggestion or the change, you 20:28 can just hit undo or you can hit keep to 20:31 keep it. Usually there's a keep all 20:34 button so you don't have to go through 20:35 and click all these. Okay. Now let's 20:38 save it. Let's go back. And now you can 20:40 see that it's styled differently. It's 20:42 in the middle. It has rounded buttons. 20:45 Okay, just make sure it still works, 20:47 which it does. It added three. 20:50 So, that's inline editing. Now, let's uh 20:54 let's use inline editing for some other 20:56 things. I'm just I'm not going to make 20:58 any selection. And I'm going to hit 20:59 command K. And then uh I don't want a 21:03 selection. 21:05 So, let's just go like right here and 21:08 command K. All right. All right. So, 21:10 it's just it's saying edit selection no 21:12 matter what. But what I want to do is 21:13 edit full file. Okay. And then I'm going 21:16 to say can you 21:19 uh can you add we'll say area 21:23 attributes to the elements 21:28 in this file. 21:32 Okay. Okay. So now it's going to select 21:33 the whole file and look at it. 21:39 And there we go. So it shows me the 21:42 difference, right? So what in red is 21:44 what it gets rid of, green, it's what it 21:46 adds. I'll click accept. And then it it 21:48 accepts all of those. I don't have to go 21:50 through and hit keep. So now if we take 21:52 a look, we have like area described by, 21:55 we have uh let's see, Arya label. So it 21:59 went ahead and added those accessibility 22:01 attributes. So let's say we want to add 22:04 another piece of state. Let's do a 22:06 hover. So a card hover. So I'll hit um 22:10 enter. Put my cursor here. Actually this 22:13 is this is suggesting an is added which 22:15 we could do this. So basically it'll say 22:18 added to cart if we clicked if we 22:20 clicked on the add to cart. So I'll go 22:22 ahead and accept that. And then it says 22:24 tab to next move right here. Going to 22:26 hit that tab. And then it's going to add 22:29 a set is added to true. Okay, so this 22:32 popup is what it it'll it'll add if I 22:34 hit tab again, which I'm going to. And 22:37 then it says tab to next move again. 22:40 Brings me down here and shows me that 22:41 it's going to add a turnary and show 22:44 added to cart if that is added is true. 22:46 So I'll hit tab to accept that. Okay, 22:49 let's save it. Let's go back here. Let's 22:51 click add to cart. And now it says added 22:53 to cart. So now I want to add a hover 22:57 effect. And I could do that in in a 22:59 bunch of different ways. I could use 23:00 inline editing. I could just use tab 23:02 completion, but let's use the the chat 23:04 interface. So I'll say um and this this 23:08 is in context. You can see right here 23:10 one tab. So my product card file is in 23:12 the context. So, I'm going to say, can 23:15 you 23:16 can you make it so 23:19 there is a we'll just say an effect 23:24 uh an effect on the 23:28 cards 23:30 when hovering. 23:33 Okay, so this is similar to using inline 23:36 edit. So, it should show me the the 23:39 diff. 23:42 So it shows me which cut which um file 23:45 it's working on. So product card 23:50 it's applying and now it shows the diff. 23:52 And then there's a keep all button. So 23:54 I'm going to hit that and then let's 23:56 save it. And also it gives you a summary 23:59 of what it did. So card container 24:01 enhance shadow on hover. It shows me 24:03 exactly what it did. So pay attention to 24:06 that. Don't just randomly add stuff and 24:09 and let it do all the work. learn from 24:11 it as you're doing it. So now if I hover 24:13 over these cards, then I get that that 24:16 zoom effect. 24:19 Okay, so those are the different ways 24:21 that you can use AI to enhance your your 24:24 coding experience, but you can still, 24:27 you know, still know what you're doing. 24:29 And another great way to use it is to 24:31 just ask questions. So, for instance, if 24:34 I want to go to the context and let's 24:37 just grab the um the add to cart. 24:41 Actually, let's we'll we'll take the 24:43 whole provider. 24:47 So, I'll take the provider here 24:51 and I'm going to say quickedit or or 24:54 command K and I'll say can you 24:58 can you explain what this provider 25:03 function does. 25:06 Okay. And then I'm going to select I'll 25:08 just keep edit selection or not edit. 25:10 Sorry, I don't want to edit selection. 25:12 I'm not editing anything. It's a quick 25:13 question. 25:16 So it'll answer me right here. So the 25:18 cart provider function creates a React 25:20 context provider for a shopping cart, 25:22 initializes the cart from local storage, 25:24 persists cart changes, provides 25:26 functions. All right. Okay. And then I 25:28 can keep I can add a followup and keep 25:30 asking it if if it's not clear. And then 25:33 I could do the same thing over here in 25:35 the chat interface. So you can do it in 25:36 in either area. All right. So that's 25:39 pretty much what I wanted to show you 25:40 with an existing project. So now let's 25:42 jump in and do some some higher level 25:44 stuff and a little bit of vibe coding. 25:46 All right. So we looked at how to kind 25:48 of gradually use AI in cursor into an 25:52 existing project. Now we're going to do 25:53 something more highlevel and do some 25:55 vibe coding. And it's going to be 25:57 something really simple, a SAS landing 25:59 page with uh an interactive calculator. 26:02 And we're just going to kind of oneshot 26:04 it. If this were a more in-depth 26:06 project, then I would do a lot more 26:08 planning. Um I think that since we don't 26:11 have to like write boilerplate and and a 26:13 lot of time is freed up now with AI, if 26:16 you if you're using it, then put that 26:18 that energy into planning, into 26:21 structuring everything out, you know, 26:22 your database models, your layout. So 26:25 you want to really kind of up your your 26:28 project management skills. But let's go 26:30 ahead and just put we're this is really 26:32 simple. So we'll say create 26:35 uh create a say landing page 26:40 for a SAS product 26:44 with an interactive 26:47 calculator. 26:49 And let's say 26:51 add a hero section 26:56 features 26:58 testimonials 27:02 and say add a pricing 27:05 uh pricing slider 27:08 that updates 27:10 costs. 27:12 and we'll say based on based on number 27:15 of users and other resources 27:20 and I'll say use CSS animations 27:24 um 27:26 what else create 27:28 or we'll say make it responsive 27:33 responsive with a simple 27:37 hamburger menu 27:40 I notice that sometimes it over complic 27:41 complicates just like hamburger menus 27:44 and it over complicates vanilla 27:45 JavaScript a lot in my experience. So, 27:48 I'm going to say um keep we'll say keep 27:53 the the JS 27:55 very simple, clean, 27:59 and readable. 28:02 And I'm going to specifically say do do 28:05 not 28:07 uh overengineer 28:12 Okay. Um, what else do I want to put? 28:15 I'm going to say use use only 28:19 HTML and I'm going to say plain CSS 28:22 because it will it might use Tailwind if 28:24 I don't and vanilla JS. 28:30 And I think that's it. Yeah. So, let's 28:33 try that out. Very basic prompt. Uh 28:36 again, if it were a more serious 28:38 project, I might put that through chat 28:40 GBT or Claude AI first and then have it 28:42 create uh something that's more, you 28:44 know, better formatted and just more 28:46 in-depth. But this is something very 28:48 simple and and I don't want this video 28:50 to be, you know, three hours long. 28:53 All right, so let's see what we got 28:54 here. I'm just going to open it up first 28:56 and take a look. So I'm using live 28:58 server. So cloud scale, scale your 29:01 business to the cloud. Got some cool 29:03 little animations here. API, DB, AI. So, 29:07 it looks like a legit SAS landing page. 29:10 Why choose Cloud Scale? I like that. I 29:13 like these effects. So, those are the 29:16 features. We get the calculator that I 29:19 asked for. All right. So, very simple, 29:22 but I think it's clean. I think it looks 29:24 nice. I mean, I might like decrease the 29:26 spacing here and do some small little 29:28 adjustments, but I'm not going to do 29:30 that in this video. Uh, let's test the 29:32 the calculator. So, we got number of 29:34 users. As I scale that up, you'll see 29:37 the price goes up. Storage, bandwidth. 29:40 So, that will all cause the price price 29:42 to go up. Now, I'd like to have a toggle 29:44 here so that it would show maybe a 29:46 savings if you were to pay annually 29:48 versus monthly. So, that's maybe that's 29:50 something we can ask for. Uh, let's see. 29:53 Get started. That has a cool effect when 29:55 I click it. 29:57 So, let's um let's check let's check 30:01 mobile. 30:04 So, we got Okay, that's that's fine. 30:07 Little hamburger menu and everything 30:11 stacks. 30:13 So, yeah, this actually looks really 30:15 good. I've generated quite a few things 30:17 like this and this is one of the better 30:20 ones. 30:21 So, let's um yeah, let's let's ask for 30:24 it to add the annual option on the 30:27 calculator. So, I'm going to go back to 30:29 cursor and we're just going to keep all 30:32 here. 30:33 And let's say, can you 30:36 add a toggle switch 30:40 on the calculator 30:43 that will 30:45 display 30:48 monthly versus 30:51 yearly pricing? 30:55 And let's 30:57 save them let's say 20 uh 20% 31:03 if 31:04 if they pay excuse me yearly. 31:11 And while it's doing that let's just 31:13 take a look here. So the index the the 31:15 HTML is usually pretty good with this um 31:18 using you know semantic tags and all 31:20 that. So pretty simple pretty 31:22 straightforward. The CSS 31:26 again just got a reset. We got our 31:28 containers typography. I would have 31:31 liked to have the colors in in in custom 31:33 properties. That's something we could 31:35 ask for, but uh at first glance just 31:39 looks looks fine. And script.js. So we 31:43 get our DOM content loaded. We have a 31:46 function that initializes these 31:48 functions, the hamburger menu, the 31:50 pricing calculator, and so on. 31:54 Um, this just toggles the the active 31:57 class on the on the menu. 32:00 Close the menu when clicking on the nav 32:02 links. 32:03 Close menu when clicking outside. 32:06 We got our pricing calculator 32:09 initialization. So, it's just grabbing 32:10 all the DOM elements and putting them 32:12 into variables. We have our rates 32:14 object. 32:17 Looks like it just added some stuff 32:19 here. So, anything in the green it just 32:21 added. Um, just going to keep all. So, 32:25 we get our rates object. So, you can 32:27 easily change this if you want, you 32:29 know, more than $5 per user or per 32:32 storage, whatever. Update pricing. So, 32:35 this will do the calculation and then 32:37 update that pricing based on that. 32:40 So, looks like it just added this stuff, 32:42 the is yearly, because I just asked for 32:45 that. We'll check that in a minute. 32:47 animate value. 32:51 So, scrolling animations just kind of 32:54 adds and removes classes. We got an 32:56 inter uh uh intersection observer 33:01 smooth scrolling 33:04 create ripple. So, that's that effect 33:06 that get started had um as a ripple 33:09 effect. 33:11 Yeah. So, some of this is probably 33:13 overkill with the animations. 33:16 But uh overall I think it it it looks 33:19 all right. 33:20 But let's check that switch. So we got 33:23 monthly. It's at 85 right now. If I hit 33:26 yearly, 33:28 wait. Yeah, monthly 85. Yearly 33:32 it would be 816. But I'd like to see the 33:35 monthly 33:37 rate if I pay yearly. Does it show me 33:40 that? Well, it shows the yearly savings, 33:43 I guess. 33:45 Um, yeah, I'd like to show the month. 33:47 So, let's go back here and let's say, 33:49 can you also show 33:52 what 33:55 what the monthly 33:59 price 34:00 will be if 34:03 paid 34:05 uh annually? 34:07 See what that does. 34:10 Okay, so let's check that out. So, 34:14 let's see. We got monthly 85. If I hit 34:16 yearly, 34:18 so now it shows me the effective monthly 34:20 cost would be 68 versus 85. All right, 34:24 perfect. 34:26 So, yeah, this looks pretty good. 34:28 There's not much I'd change in terms of 34:30 of the design. 34:32 So, a lot of times what I'll do is um is 34:35 have a change document that will just 34:38 update as I make changes. So why don't 34:41 we do that? Let's say can you 34:45 can you create a changes I'll call it 34:47 changes.md 34:51 file that will 34:54 that will track 34:56 we'll say track any 34:58 um major 35:02 major changes and features 35:06 features that we make 35:08 and add the changes 35:12 that we already made. 35:19 All right. So, looks like it added the 35:21 changes file. So, uh let's see core 35:26 features implemented 35:28 hero section 35:30 navigation and mobile menu. So it looks 35:32 like just the initial features that it 35:35 added modern CSS animations and then 35:38 here new features added monthly verse 35:40 yearly billing toggles. So it's good it 35:43 log that the yearly pricing with 20% 35:46 discount enhanced pricing UI 35:50 technical improvements. 35:52 Okay, so this should keep going as you 35:54 work and it's nice to just have a a 35:57 place where you can see everything 35:58 that's been changed since your initial 36:00 generation. Uh, and of course, you know, 36:03 you're using git and so on, but this is 36:05 it's nice to have just a single file as 36:07 well. So yeah, that's really all I 36:10 wanted to do is just give you guys an 36:12 example of generating something and talk 36:14 a little bit about the workflow. And we 36:16 could even do an uh Lighthouse report 36:18 and see what kind of scores we get for 36:20 performance and uh what else? 36:22 Accessibility. I think it does SEO. 36:28 All right. So pretty good scores. 91 36:30 performance, 92, 96 for best practices. 36:34 SEO is 90. I mean, we could try to 36:36 improve them a little bit. You could 36:38 actually take a screenshot maybe of this 36:40 stuff right here and uh and you could 36:44 put that in the context. That's another 36:45 thing you can do is you can actually 36:46 load images in here. Uh you could even 36:49 put an image of a layout and ask it to 36:51 to to replicate it with HTML, CSS, 36:55 JavaScript, whatever. But yeah, I think 36:57 that I'm going to stop here as far as 37:00 this project goes and then we'll jump 37:02 into uh we'll jump into creating a 37:04 Nex.js application. So last thing I want 37:07 to do is generate a Nex.js JS project 37:10 and we're going to do something simple 37:11 cuz I'm you know trying to fit all this 37:13 in one video and we're going to create a 37:15 simple split uh split view resumeé 37:18 editor where we have a form on one side 37:20 to add our information add our our 37:22 experience and then create a markdown 37:25 resume on the other side and if we have 37:27 time we'll add like PDF export but for 37:31 for now it's going to be pretty simple 37:33 and what I'll usually do for a larger 37:35 project is create this project d-context 37:38 text MD file and just put in basically 37:41 my my vision of the project. And this 37:44 one is very simple. Usually it'll be a 37:46 lot more than this, but this is a really 37:48 simple project. So I'll put the goal. So 37:50 build a clean split screen resume editor 37:52 with live preview. The text stack is 37:55 next TypeScript and Tailwind React 37:57 Markdown for preview and local storage 37:59 for persistence. Then we have some quick 38:01 rules. So use TypeScript interfaces for 38:03 all data client components for forms and 38:06 server components for display arrow 38:08 functions. Keep it simple and focused. 38:10 Have a modern look. Ask to manually test 38:13 code after each feature. And then I just 38:16 um you know mapped out the the resume 38:18 data type which will be name, email, 38:20 phone, summary, experience with some 38:23 other fields and then skills. 38:25 So uh the layout structure left side 38:29 will be the form right side will be the 38:31 preview split 50/50 clean professional 38:33 styling and then key features real-time 38:36 preview updates clean form with proper 38:38 spacing etc. So I'm not going to put 38:42 this in the prompt. What I do is put 38:43 this in the root and then in the prompt 38:46 I'll tell it to look at this in the 38:48 context. So let's uh let's go ahead and 38:51 open up cursor 38:53 and I have an empty folder called 38:54 markdown editor and then what I'm going 38:57 to do is is generate a new nex.js 39:00 project using create next app. Now you 39:03 could go up here and say create me a 39:05 nextjs project with tailwind 4. But when 39:08 I do that it seems to have get something 39:10 wrong. When you do it yourself you have 39:13 no margin of error. You know exactly 39:15 what you're getting. So I would always 39:17 suggest just gener generating the boiler 39:19 plate on your own. So I'll say npx and 39:22 then let's say create next- app and 39:26 let's do at latest and then dot because 39:29 we want it in this directory. 39:31 And I'm going to say yes to all this 39:33 eslint typescript tailwind um source 39:36 directory app router turboac and no to 39:39 the import alias changing that. 39:43 Okay. Okay. And then while that's going 39:44 on, I'm going to take my project context 39:46 that I just showed you and move that 39:48 over to the root. 39:50 All right. And then I also have rules 39:52 that I use for Nex.js and TypeScript. So 39:56 this is just, you know, best practices, 39:58 app router patterns, um, React 19 40:01 optimization. So it doesn't use use 40:03 memory or use callback because the 40:05 compiler does that. Um, component 40:08 architecture, data fetching patterns. 40:11 It's just a standard file. Um, and you 40:13 can go to cursor.directory. And there's 40:15 tons of rules for TypeScript and and 40:18 next. But I'll just go ahead and um, how 40:21 do I want to do this? I guess I'll just 40:22 copy this. And then I'm going to go to 40:27 uh, file. Let's see. Not file. Cursor 40:30 settings. Cursor settings. We'll go to 40:32 our rules. And this is these are going 40:34 to be project rules. So right here, I 40:36 could say add rule. And I'll call this t 40:40 uh ts- next. 40:44 And then you can apply it manually, 40:46 meaning you tell you prompt and you tell 40:48 it to use it, or you can do apply to 40:50 specific files or always apply. I like 40:53 to do apply intelligently, which lets 40:56 the agent decide when it's relevant. So 40:58 we'll do that. And then I'm just going 41:00 to go ahead and paste in uh what I just 41:02 showed you. 41:05 All right. So I'll save that. And now we 41:07 have those rules. and it's going to 41:08 create this dot dot cursor folder and a 41:11 rules folder inside of it with that file 41:13 which has an MDC extension. 41:16 Okay, so now that we have the context, 41:18 we have the rules, we have the Nex.js 41:20 boilerplate, we'll go ahead and run the 41:22 server. So, npm rundev. 41:25 And this is just my way of doing it. 41:27 There's a million ways to do it. You 41:29 might find uh a different way, you know, 41:31 something you like better, but 41:33 everything in this video is pretty much 41:34 just how I like to do it. And obviously 41:37 I'm pretty new to it. I mean, everyone 41:39 is really. So, we got the Next.js 41:42 boilerplate up and running. Now what 41:45 I'll do is come over to the prompt and 41:47 I'll say uh take a look take a look at 41:51 and then we can use the at symbol and 41:52 then project context file and I'll say 41:57 let me know if 42:01 you we'll say if you understand 42:05 the instructions 42:08 or something like that. You can phrase 42:10 it however you want. So it gives me the 42:12 project overview, key requirements, 42:14 technical guidelines. So sometimes this 42:16 is easier than than writing the prompt. 42:18 Oh, you just create your context, you 42:20 tell it to look at it, and then you go 42:22 from there. So I'm ready to start 42:24 building this resume editor. Should I 42:26 begin by examining the current project 42:27 structure and then implementing the core 42:29 components? I'll make sure to use 42:31 Tailwind 4. So I'm going to say I 42:34 probably should have put this in the 42:35 context. I thought I did, but I'll say I 42:37 already I already generated 42:42 the app with 42:44 Tailwind 4. So, no need. Let's Let's 42:50 start to build out the layout and 42:55 components. 43:00 Okay. So, it's going to examine the 43:01 current project, which is just a, you 43:03 know, boilerplate. 43:05 All right. So, let's see. So, it's going 43:07 to install React Markdown, create the 43:09 resumeé interface, build the split view 43:12 layout, create the form components, and 43:14 create the preview component. So, that 43:16 sounds like a good plan. Let's go ahead 43:18 and run the React Markdown install. 43:23 Now, let me create the core components. 43:25 First, I'll create the RSé interface and 43:27 types. So, it's going to create the 43:29 TypeScript file. If we take a look at 43:31 that, we have a ré type with these 43:33 fields. experience will be an array of 43:37 experiences. So this type here you get 43:39 res uh resume form data. So I'll just 43:43 say keep all to that. 43:45 And you don't have to approve them like 43:48 see the check mark. I can I can reject 43:50 the changes or I can hit the check mark. 43:53 But even if you don't hit the check 43:54 mark, it's still going to approve it. 43:58 So now let me create the components 43:59 directory and the resume form component. 44:02 and you can like you know check things 44:03 out as it's as it's building it. So this 44:06 will be a client component because it's 44:08 going to use hooks. You can't use hooks 44:10 in in server components. 44:13 And let's see got our state for the form 44:16 data. A use effect to check if it's in 44:18 local storage. 44:21 Save data to local storage when when the 44:23 form changes. 44:25 Update your experience. So we should be 44:27 able to add multiple experiences. 44:30 Here's the form, the function to do 44:32 that. You'll be able to remove an 44:35 experience, 44:37 update your skills, 44:41 personal information. So, pretty simple 44:44 stuff. 44:48 And you're going to see errors and and 44:50 and it's going to stop working. Like, 44:51 it's probably broken right now. Well, 44:53 no, it's not. But you'll see errors and 44:55 stuff because it's in the middle of 44:56 creating files. A file might be half 44:59 created. So, if you try to load it, 45:01 you're going to see an error. Just make 45:02 sure that you wait until everything is 45:04 done before you actually try it out and 45:06 test it 45:09 because it's, you know, it's still going 45:10 now. So, I'm not going to test it yet. 45:12 But, I mean, this doesn't look bad. You 45:13 know, we got our split view, which we 45:15 asked for. We get the live preview. 45:17 Hopefully, that works. Got the form. We 45:20 got uh an experience. So, little module 45:23 to add experience. 45:25 Add skill. 45:29 Now I have it so it'll run npm run build 45:32 very frequently because I don't want it 45:34 to I don't want to have any weird 45:36 TypeScript errors. I don't want to have 45:38 linting errors. I don't want to suppress 45:40 them. So I just want to make sure 45:42 everything is nice and clean. 45:46 Make sure it all passes. So it looks 45:48 like there's got a small issue. 45:53 So it'll it'll automatically try to fix 45:56 those issues. And now it looks like it 45:57 passed. So the build is successful with 46:00 a minor eslint warning. Let me fix that 46:02 quickly. 46:05 And it's going to check again. So it'll 46:07 fix it or try to fix it and then check 46:09 it again to verify it. 46:12 Okay. So let's see. Resume editor 46:14 complete. So it basically created our 46:17 what we've asked for so far. We got the 46:20 live preview, the form components, the 46:22 split view, the um local storage, modern 46:26 UI. So, let's test it out. Come over 46:28 here and just going to Whoops. So, this 46:32 will happen often, this internal server 46:34 error, just because things are happening 46:35 so fast, and sometimes you just need to 46:38 uh to refresh the server. So, that's 46:40 what I'm going to do. 46:44 And then once it refreshes, you should 46:46 have no issues. It should just reload. 46:50 Sometimes it takes a second. 46:52 All right. So, let's say John. And you 46:56 can see that as I type, it's giving me a 46:58 live preview. I should probably put my 47:01 full name or or a full name. John Doe. 47:04 Let's say Johngmail.com 47:09 555. 47:11 So, the the text in the input is super 47:13 light. I can't even see it. So, we'll 47:15 have to fix that. Uh, actually, you know 47:17 what? I have a form filler. I'm just 47:19 going to use that. So, I'm going to go 47:20 ahead and just fill these out. So, and 47:23 it added an experience. I know you can't 47:25 really see that here. Um, now if I want 47:28 to add another experience, 47:30 I can click that and it has another box. 47:32 So, I'll fill that out. Now, I have two 47:35 experiences. 47:36 And then skills. Looks like it's going 47:38 to be just commaepparated values. Again, 47:41 I know you can't really see the inputs, 47:43 but let's see if I do JS and then PHP. 47:47 Oh, wait. No, it's not. I'm sorry. It's 47:49 not commaepparated. We have a skill 47:51 button here. So, I'll say JavaScript 47:56 add skill. 47:57 All right. So, this is cool. So, we got 47:59 PHP 48:00 add skill 48:03 um I don't know CSS. 48:05 Cool. And we can delete them. So, if I 48:07 click the delete, that goes away. If I 48:10 click the remove on the job experience, 48:12 that goes away. But let's add a couple. 48:15 Let's add it back just to have 48:16 something. 48:19 Okay. And then it should stay. If I 48:21 refresh the page, it stays because 48:23 remember it gets saved to local storage. 48:25 In fact, we can check make sure check 48:28 that. 48:30 So, local storage and you can see 48:32 resumeé data. So, all of our data is 48:35 getting saved. 48:37 Now, this obviously doesn't look very 48:40 good. I mean, you're not going to go 48:41 apply to a job with this, but it gives 48:43 you an idea of how this works. Right 48:45 now, I do want to make the text so we 48:47 can actually see it in the form. So, 48:49 I'll I'll just say that the form input 48:53 text is I'll say way too light. 48:59 Please darken. 49:02 And that's something that's really 49:04 simple. So, that should just should be 49:07 pretty quick. 49:09 Yep, there we go. So now this is docker. 49:16 Yep, this one summary looks good. 49:24 So I mean you can imagine you could you 49:26 could make this you could add a ton of 49:28 features to this. So so you can add 49:30 multiple résumés um obviously PDF export 49:34 maybe send to employer or something like 49:36 that. that you can have authentication 49:38 with with Google login, GitHub login, 49:42 maybe even have premium features and and 49:45 charge people for those extra features. 49:48 So, why don't we try one more thing? Why 49:50 don't we try adding a PDF export? So, 49:53 I'm going to say add a PDF export for 49:59 the resume. And it'll probably use a 50:01 package like um 50:04 JSPDF, I guess. 50:07 HTML2 canvas. 50:11 Not sure if I've used those. 50:14 So now we have a utils folder with PDF 50:16 export.ts. 50:18 So we're using those two packages. We 50:21 have our export. Looks like this is all 50:23 the styling 50:25 for the PDF. 50:27 Adding it to the canvas. 50:32 So we'll see how it looks. It might look 50:33 like crap to begin with, but you got to, 50:36 you know, work through it. Um, the 50:38 symptom tracker that I'm creating, it it 50:40 generates health reports, and it took me 50:43 a long time. It took me like like three 50:45 or four hours to get the the PDF looking 50:47 decent. It just looked horrible at 50:49 first. That's what happens with a lot of 50:51 these packages. You really got to tweak 50:53 them. So, now it's going to run npm run 50:55 build. 51:00 And I know it's still working, but I'm 51:02 just going to see. So, we do have the 51:03 export PDF now. I don't want to try it 51:06 though until this is completely done. 51:10 Okay, so feature has been added. We're 51:12 probably going to get yep, internal 51:13 server error. So, that's no problem. 51:15 Just uh just restart the server. 51:21 So, it says the export button will now 51:22 appear on the top right. Generate 51:25 professional PDFs. 51:27 So, let's try that out. I'm going to 51:29 refresh this. 51:34 All right. So, we got this Michelle uh 51:37 Jacobson get some experience. Excuse me. 51:40 Let's export. So, we got the download. 51:43 Let's open the PDF. 51:46 And there we go. Actually, it looks the 51:47 exact same really. I mean, there's some 51:49 text over here, so you might have to 51:51 mess with that. um probably within that 51:54 excuse me within that utility file but 51:57 uh but the you know PDF export works 52:00 perfectly. 52:01 So you just work at it you know you just 52:03 keep going and just keep asking 52:05 questions try to get a feel of the code 52:08 and try not to just let it snowball like 52:11 I mentioned before and and you know get 52:13 all this technical debt um you want to 52:16 kind of understand what's going on. So 52:18 that's it guys. Hopefully you enjoyed 52:20 this and and learned something from it, 52:22 even if it's just a little bit of, you 52:23 know, how to use your how to create a 52:25 workflow when you're using AI. Um, all 52:28 it obviously I will do some some 52:30 vibecoded projects, but obviously that's 52:32 not going to be the main focus. The main 52:34 focus of the channel is always to to 52:36 teach people how to code. So that's it 52:38 for now. Thanks for watching and I'll 52:40 see you next
1:00:21
12:08
3:23:11
2:46:21