Cursor AI For Beginners: Your First Project
Let's learn how to use Cursor AI📅 2024-08-29
Transcript
[00:00] so for example what you'll notice is some of the fix code here such as learn react learn react you know for example if I just added like a bunch of stuff here command save it will instantly show here let's find out how we can set up our first project together using cursor AI don't worry I'm not going to skip steps and just be like wait how did Corin get there don't worry I'm going to show you everything from start to finish how to set up your first project to the extent of showing it into a browser seeing Live code edits and everything happening live so I'm good let's jump in obviously to get going here you got to download it so go ahead and click
[00:30] download once you download it install it this is the first popup you'll see to be clear this video is very much tailored to people that either have zero to no coding experience or alternatively people that just want to know how to leverage this new AI code editing tool so if some of this seems simple check out my other videos on cursor we dive into creating Landy Pages Video Games Etc for now though let's proceed First Step here is choosing your keyboard type typically if you've coded before or haven't coded before you're going to like vs code just trust me on that vs codee's amazing so stay vs code here for
[01:01] language obviously put in the language that you speak for me I speak English that was not obvious next codebase wise enable this for sure this going to allow us to search through directories and finally we could do this last step here but it's not really necessary so for now we're going to hit continue if you're a past developer and you've been using vs code you'll be prompted to do this to use the extensions that you use within vs code here if you don't don't worry start from scratch now the next question has to do with privacy this is up to your discretion if you want to build out a full stack application I would go with privacy mode that's not really what
[01:31] you're doing here and you just kind of want to help cursor out you're having some fun you go help improve him cursor choose that option is basically gives them the ability to whether or not to read the code that you're outputting and using now in reality let's be real here even in privacy mode I still guarantee they'll probably see some parts of your code for whatever the legal reason may be but if you're inclined to do so hit privacy mode hit continue then you either got to log in or sign up for me personally I'm going to go and log in here you can just sign up it's completely free with the options being email Google and GitHub so once we're logged in this is going to be our user
[02:02] interface or how we're going to be able to communicate within cursor now if you use vs code this looks very similar now if you want to rund down really fast of what cursor can do when it comes to editing code and everything above the board of this application check out that video right there it's under 9 minutes I go over everything the purpose of this video though is very much let's just set up our first project together let's launch that project let's learn a little bit so no we're not going to do cursor tutor today here's how we go ahead and build out a new project that we can start building out a react based application
[02:32] what's react Corbin this is a framework that we can use to leverage to build out web applications EG any type of website you go to could be a react app what I want you to do is simply hit new window while we're in new window and I'm going to move over here we're going to go ahead and come down here to these buttons no problems we hit terminal so right here we can either do a terminal within our desktop or alternatively just talk to it right here I'll try to remember to put these commands in the description if I don't just remind me but here is the first command here we're going to create our directory this is where we're going to store all of our
[03:02] code be able to run projects off of it this will make more sense as we keep going here we're going to go and do mkdir and then the name of the underlying application so for me let's go ahead and change this a little honestly because I'm craving it right now I'm going to name it corn beef hash this could be anything though multi-billion dollar software application vid chapters AI who knows whatever it is choose your name this is how you're going to reference it trust me you don't want to change this long term proceed hit enter now that we created a directory here we're going to
[03:32] go ahead and make sure that we are talking specifically to this file location I want to be clear here make sure to write this stuff in your notes so that you can reference this I like doing sticky notes but like on your actual computer so I can copy and paste these kind of commands so the next command here is going to be CD corn beef hash so we can talk directly within corn beef hash and I just realized in all these videos we'll be talking about corn beef hash a lot so I'll probably get some tomorrow honestly now make sure you are in this directory for the next line here this is going to create our react base app going to paste this be npx
[04:04] create react app kind of obvious once we do that we're going to hit enter and let it start downloading don't worry it's not installing a virus I'm not about to spam you we're just install react now for reference if some of these commands don't work right away use Chad gbt use AI models help yourself out sometimes you need to install dependencies that I'm kind of overlooking just because of the fact that I develop so it's just not there if you've got to this point here the very last one you you should see or the very last line you should see is Happy hacking so yeah if you follow up to this point I'm hacking your computer
[04:36] now I'm joking okay so here's what's next we're going to go ahead and click that little button that says open folder once we're here we're going to go ahead and click the specific name directory that we just created together so for us it's corn beef hash open and congratulations this is a big part now we have a specific project we can use cursor in to generate some code now that we've set up our directory or our project here let's go and run some code here so we can actually see it within a browser as Local Host 3000 here we go so I got my browser right here I just typed in Local Host 3000 it doesn't work right
[05:06] now obviously so we actually got to run this app to do so let's come back to our terminal here and just run a very simple line the line we have to run here is very simple just two words mpm start what this is going to do is it's going to run the current code we see here and pop it here you're going to see a little react UI here I got to hit allow here you're going to see a little react UI here as you'll see that there's going to be this image here there you go then you'll notice the fix code here so for example what you'll notice is some of the fix code here such as learn react learn react you know for example if I
[05:37] just added like a bunch of stuff here command save it will instantly show here and we can kind of proceed in this manner but the purpose of this video though was to show you how to get to this point and let me reference some videos for you to allow you to understand past this first major thing just check out my playlist here on cursor AI I'm going show you how to take a project like this and do landing pages create video games create a utility application useing curs your AI specifically in the context of its code generation abilities talking to the code everything like that so make sure to subscribe for that the second major
[06:07] thing here is for people that really want to take this to the next level here what I mean by that is push this all the way to a live application to a live URL use Firebase as your backend or Google cloud or AWS like if you want to learn all that then I suggest you check out my playlist here called don't pay for a website ever it's going to be lesson two I'll even reference it right there so lesson two is going to show you how to take this and put it into a live environment and what's great is that when you actually code out a website it basically costs no money sound good make sure you leave your like it's completely free there's going to be a ton of different videos on cursor AI on this
[06:38] channel here trust me trust me this is getting a ton of demand from what I've seen so expect more and I'll see you in the next video check out those videos if they interest you I'll probably link less than two there I might not for how to build this into a real life frontend who knows and I'll see you in the next video