Cursor AI Beginner's Guide To AI Coding in 28 min (Claude AI, ChatGPT, GitHub, Firebase)
Let's learn how to use Cursor AI📅 2024-09-03
Transcript
[00:00] that's a live website link go to that website it exists on the internet you can share with your friends Etc let's try it here is the easiest simplest guide you'll ever get for cursor Ai and I'm going to show you how to use it from start to finish trust me when I say easy I mean easy y'all I'm giving you a free Google doc that's going to walk you through step by step for Mac Windows Linux we're going to do everything together you're going to have this Google doc and on top of that if you have questions like you run into air like Corbin I ran that terminal command I got an error what's even going on
[00:31] don't worry I even solved for that by clicking that little link right there and I'll put in the description down below as well I created an entire chat gbt chat that you can ask very specific questions and get very specific outputs to help you build out your first cursor AI project all the way to the point of having a live website link therefore if you run into errors you have this video with me in it you have an entire Google doc and you have an entire chbt chat sound good let's jump in this video is here because of extreme popular demand I'm going to show you stepbystep as if you've never launched anything to do
[01:02] with code never used anything with code I'm going to show you everything to install how to run it how to apply it everything everything Corbin everything to the point that you'll have a live website link that looks like this with your website and your code deployed that is why I went the extra mile of this video and I gave you a Google doc that's going to show you how to do it step by step and allows for every single OS system to even access it so it's simple by the end of this video we're going to take code like this push it to an actual live website link not Local Host 3000 although I'll show that as well but an
[01:32] actual live website link you can start using right away so grab your coffee and let's get going I have no clue how long this video is going to be I assume 20 to 40 minutes long but we'll see let's jump in first step of all first steps download cursor AI it's free to start proceed simply click download for free once you've downloaded cursor AI let's do step one enter Google doc here which is going to be creating a project directory when looking at this Google doc I structured it as simple as possible I mean I could not have structured this any simpler y'all what I do is I provide the commands relevant to
[02:04] your operating system and then on top of that I make sure to apply a additional note here the purpose of the additional note here is to explain as Layman as possible what's even happening in the process so let's go and start here to start off all we need to do is come down to this button right here click it and go to terminal now that we got terminal open let's do that first command coming over to Google doc here here is our first terminal command think of terminal as our way of conversating within our computer don't worry about it don't complicate it this is our receed I'm going to go ahead and copy this and before you rush to the comments yes I got the commands for Windows as well so
[02:35] everyone's going to be able to follow this tutorial and as I said before if any terminology doesn't make sense use that Chad gbt chat or alternatively read the additional note for you to understand what is terminal what is a repository what are we even doing right now you can simply ask Chad GPT here or read the additional notes trust me y'all I got a lot of comments said this was not simple enough I'm trying to make it as simple as possible so goinging back to a terminal here I'm going to command V it's going to paste it and this is what we're going to call a directory I want you to think of your directory like where we're going to store an entire codebase codebase what I mean in this
[03:06] context is that code that we deploy to a website like when I go to a website that's deployed code when I say deploy I mean you have it locally on your laptop like let's just say you have like a text file right you drag and drop it it's in the trash only you have access it's not like a shared Google doc it's just like a local text file but now we're deploying it to the internet if some of you are like Corin why did you even explain it like that I'm trying to explain this as simple as possible all right right so I'm going to go ahead and name it first project this could be anything apples and ham green eggs and ham time to code new Facebook anything
[03:38] y'all this is just your name this is how you're going to reference it I mean I named it corn beef hash up there so this could be really anything I'm going hit enter now that we've done that we're going to do the next command here which is going to allow us to access this directory within the terminal itself so I do CD and then the actual name of the project so I'm going to pick here slash here we go and what you'll notice is that this little terminal line here is going to extend it means we're conversating it within that we're talking directly within that folder for all the code and everything we're about to install when it comes to doing stuff
[04:09] in a software development environment now Pro tip number one create yourself a terminal cheat sheet in your notes stickies whatever it may be these are going to be commands that you run repetitively throughout the application development process so for example this right here is very important let me show you why when I start a new terminal and you don't see like first project or whatever you name it all you need to do is simply paste that command and you're going to go and you'll basically be running every single command you see from here on out in this tutorial through this sound good we've
[04:40] successfully created a repository it's going to allow us to create code files and do everything like that now I'm going to go ahead and hit open folder in open folder here I'm going to Simply select the folder that's relevant to the project I just created so first project is the name here I'm going hit open now that I've opened my folder here we are in cursor Ai and we've successfully created an area where we can install dependencies react like everything we would want to build out a web development application Step One is done let's go to step two here which is going to allow us to install node.js this is how we're going to build our react application here and we got the
[05:11] step-by-step guide right here as referenced before we got Mac Linux and windows so don't worry let's begin here as a Mac User so I'm going to go and copy this first line don't worry I got the windows version as well now when installing node.js and home brew and everything you're about to see right now we're going to create a new terminal window if you want to know how to access this on Mac simply type in terminal you want to know how to access on Windows and Linux simply type in terminal same deal here there's going to be a global directory this is going to be our overall laptop so we're no longer inside of first project because what we're installing here is going to be used throughout our laptop in the context of
[05:42] software development sound good paste that first link once you paste the first link hit enter now because of the fact that this is going to be used throughout your laptop in the context of development this is going to be require pseudo access pseudo access in this context means administrative access or basically do you own your computer like is this yours and your password once I do this and also as a side note when you enter passwords like it doesn't show you like a little asteris like it's there right now but obviously you don't see it hit enter this is just going to go over everything that's installing here we don't have to worry go ahead and hit enter we are installing home brew home
[06:14] home home brew home brew we got it installed and what I usually like doing after a big command like this is you can just Spam enter and we're out of the next second thing we need to install here is going to be nodejs so we're going to do Brew install node now look at this I got an air here it says Brew doesn't exist but we just installed Brew what is going on here obviously you get air like this go ahead and copy everything paste it into this chat get help but I found the solution and I went ahead and just added it to the dock here so for example in this context we need to make sure to add home RW to the path like so we can actually reference it
[06:45] within our terminal here copy this entire thing here you're going to put your name there though so for example my current profile on Mac is called coffee fuel so my specific line is going to have coffee fuel for the users therefore if you run into this air for Linux or Windows make sure to use that CH gbt chat just copy the entire terminal output and it'll help you out from here we can go and continue to our next step here we're going to do Brew install node and here we go so while that installs I want to make clear again that if I run into any errors in this video we'll walk you through step byep how to solve it I'll add it to the doc but that's the
[07:15] idea here I want to make this as simple as possible like I can't make this any more simple so try my best here but in any context I run into an error proceed in this manner use the resources and go it's been successfully installed onto the next Next Step so now that we have successfully installed node.js this command will work I know this is from a past video a lot of y'all in the comments are like Corbin it didn't even work like npx it didn't even work it's going to work now copy this line come back to cursor AI here come back to your terminal which is in our directory this is very important it's in our directory
[07:47] and every time I reference directory I'm referring to the project name first project paste that line that's the wrong line we actually copy the right one there we go and hit enter this is going to install react files that are relevant for application development that rammed on accident let it install let it install install inall boom boom and boom once it's installed that's where all these files come into play that we can start playing around with so you'll see this here and if you got to this point then you have successfully completed step two here you have created a new
[08:18] react project with me if anything I just said in the last couple minutes didn't make sense read the additional note as Chad jbt let's proceed to step three here which is connecting GitHub now let me explain GitHub a little bit to anyone that doesn't have any idea what this is it's two major things well first major thing it's free so proceed completely free to use for everything you about to se in this video the second major thing about GitHub here is that it allows for you to back up your code in the cloud when I say cloud I mean like the internet right so all your code isn't just on your laptop your laptop Burns you lost your code oh no cups it's done
[08:50] having GitHub though will have it stored in the cloud this allows us to create you know versions of our apps right version one version two if you really mess up on version two and you want to roll back to version one using GitHub we can roll back to a previous commit this allows us to have more flexibility when coding create different branches when I say branches different offshoots of the same application maybe a new feature oh I'm adding a footer for this branch and if I mess up entirely bad I can just revert back to an older Branch think of a branch like a version I'm trying my best here y'all trying to explain this
[09:21] as simple as possible this will make more sense when you actually start using GitHub in application process as it's you know obviously kind of hard for me to explain through ation everything above the board here let's go and proceed here create your GitHub account here we go we're going to create our first GitHub repo together exciting stuff if you feel like you learn something up to this point make sure you leave a like is completely free let's begin here we're going to hit new when we are in these settings here we're going to make sure we fill out a very specific type of wording here the first thing here is your repository name what I typically like doing is naming the
[09:52] repository name in GitHub the same name I used it in my local project when I say local project I'm referring to this what's actually physically on my computer so for me I'm just going to call this GitHub repository first project as well first project description optional and then finally which is probably the most important part here is that you have the choice be doing public and private most likely I would assume most of you want private so people can just steal your code so choose private these other options we can just leave unselected and hit create repository now once you create your repository here it's going to give you a ton of directions and stuff to do don't
[10:24] worry we're going to do that together in this video and of course it's all outlined in step three so before before anything though let's go ahead and initialize git on our computer so we can do git commands and everything works in that manner when I say git git I'm referencing our ability to conversate with GitHub here in our terminal so coming back to my Global terminal here I'll just call Global it's Global I'm going to go ahead and paste this command Brew install git enter this is going to make it so that any git command you're going to be able to do in your laptop and have no issue with that successfully
[10:55] installed let's do step one here where basically our goal is we connecting the cloud with her local project here we're going to connect the to so with this command line here make sure to replace # youro with your repo name so for me it's first project for you it's fill in the blank coming back to my terminal here and I'll jump over here so I'm not blocking it I'm going to go ahead and paste those lines notice Echo hasht first project name or first project everything else is the exact same we're going to do a first commit together hit enter pretty good as you'll see we got
[11:26] one file changed and we got a new read me welcome to the readme so now that we know the kind of connection of adding a readme file let's connect our repository here so I'm going to copy this what I want you to notice is this your username is going to be found up here so if you scroll up here you're going to go all the way to your top left my username is Coffey fuel bump my project name my repo is first project it's very important you put your username and your project for this terminal command you're going to replace your username with your username your repo with your repo minus first
[11:59] project same situation here the last thing we need to add to this terminal command though is going to be your personal access token this gives us the ability to access this git because of the fact that it's private we need to add this step here to add it's pretty simple we're going to come over here to the top right here and we're going to Simply hit settings once we're in our settings here we're going to scroll down and we're going to go to developer settings we're going to find personal access token here find grain tokens once we're here we're going to say generate new token just to take a step back here cuz you're like cor what we you even
[12:29] doing right now like what's even happening what do you mean a token talking about like crypto no no no no token in this context then give it like a key to a lock this is going to give us the ability to access this repository through a local machine because we got the key like DJ khed said I got the keys another one another one okay name your token so this can be anything I say first project I'm just going to do first project token here expiration date we'll say 90 days actually we'll do seven days CU this is like temporary for me you can add a descript for what the tokens
[13:00] context is so whatever your app is that you're developing here and the next part is very important here so we're going to say only select repositories we're going to select our very specific repository which for me is first project so that's going to be right there first project next with these permissions we are basically going to give this token access to everything everything coron everything so what you want to do is you're going to go through every single one of these steps here and you're simply going to put read and write read and write like whatever the max is you're going to give it so let me go and do that real quick to this first step
[13:30] every single one of those options is read and right let's go to the next one account permissions here same deal thinking admin access here we want to give this token all the possibilities so that we never run into errors read and write for everything just to confirm with y'all there we go and for the ones you're like Corin what about that one that says read only that's just because that is the max that's afforded to me in that once that's done we're going to Simply hit generate token here now this is going to look blank to you why because that's the aess token but make sure with this token you copy that save that somewhere safe as you'll never be
[14:01] able to see it again now obviously if you mess up lost it need to redo these steps just generate a new token and follow what I just showed you all right coming back here what I suggest you to do is I suggest you to copy all of this put it into a notes and simply like just replace these variables with your specific variables so that you can go ahead and just paste it in one block and hit enter I'm going to go and do that just for your reference this is what it looks like obviously I input all my relevant variables the only I didn't input was my personal access token to do
[14:32] so simply grab this and just paste over with your access token we going to do this all in one go here just for reference that's what it should look like obviously add your personal access token that we just got right there I'm going hit enter a couple times I'm going to paste that block and then hit enter once I do that this is what a successful message looks like and I should be able to go back to my GitHub here and see it we successfully connected cursor AI with GitHub it's private no one else will be able to access it only you can with that personal access token as I said before you run into any errors any issues any
[15:03] questions of course leave it in the comments down below I'm assuming someone within the community can help but also you got to chat gbt chat here I want to be very clear here though what I'm showing you in this video is very complex work but I'm trying to make it as simple as possible so if you run into issues and errors and this is your first time ever coding that's to be expected that's just kind of how every beginner's Journey starts right so don't give up keep going at it this is very advanced stuff that I'm trying to make like bite-sized chicken nuggets which you know is really good spicy barbecue sauce sweet and sour sometimes it can hit it
[15:33] can hit but keep that in mind okay let me just show you how to do your first commit here so you can understand what a commit is you've heard this term before you're like why do these why do these people keep talking about commit are you trying to commit a relationship or no no no like actual commit in the context of coding so let's go ahead and learn how we do this when can a commit occur a commit can occur when your local code what's found here is not found in the cloud when I say the cloud I'm talking about GitHub to know what branch you're in or what version you're playing with you're going to look over here see how it says Main in order to know what branches happening here when I say
[16:04] Branch I'm just talking about like this is like a snapshot of what your code looks like in this specific version I guess a simpler way of putting that is like you got Google doc a that says like hello great day you got Google dob that says hello great day to you the slight Chang is the to you so that' be Google dob would be like a separate Branch Google doca would just be the original wording let me know if this makes sense I'm trying to explain expl this as simple as possible the idea here is this we got our main and you know to see what branch we're say get Branch right now
[16:35] we're in main so now that we know that we're in main it's like the main branch here that we can revert back to let me show you a commit so right now this is the read me file me zoom out a little bit has all this stuff in here I don't care I don't care command a delete first thing you're going to notice is that notice how the branch has a little asteris next to it that means that something's changed like there's a difference between the one in the cloud and the one in your local machine second thing you'll notice is that noce how read me is now blue that means that a change had incurred therefore what is this change let's just say hello leave a like if you enjoyed the video that's our
[17:08] change command save now in order for us to push this to GitHub and have it reflected in the cloud because right now this is not reflected if I go to the read me it's the same stuff we just had before don't want that we'll do the following commands and I encourage you to add this to the cheat sheet you're creating as this is how you always push a new update we're going to do get ad period get commit DM parenthesis or quotation marks give a name for it what what happened what are we pushing here what are we saving here now reality wise
[17:38] if you Cod it for a while sometimes this is kind of crazy stuff like you just put something random just because you're like I just need to push this but good etiquette I suppose is to name the commit what happened what changed so for this one read me changed we're going to do quotation again hit enter and the final thing we have to do is get push origin and then the branch name so since we're in main that's the branch name I hit main here and doom it's go to go coming back over to a GitHub here I'm
[18:09] going to reload and what you'll notice is that it'll be three commits now within that commit you can see the actual commit name I can click that and within the commit name once you click it it shows you what's changed so in this context we deleted all this code bye-bye is red and we added that one little line hello leave a like if you enjoyed sound good now if you followed along you have successfully done your first commit to GitHub you are a full-on software engineer now full stack developer let's move on on to step four here which is going to show us how to start the react
[18:41] application which really just takes a simple command of npm start what this is going to do is this is going to open up a separate web browser and it's going to be a local host 3000 EUR simply put in the command hit enter once you hit enter it's going to open up a browser here and this is what you're going to see what's being reflected here is the code found in app. yes this is what's being reflected here the advantages of being a local host 3000 is two major things first off this is not on the internet like this isn't real this is completely on your computer so if you got a really cool project a really cool app and
[19:12] you're trying to share it to your friend and you send them the link Local Host 3000 not going to show up nothing second thing because that this is all local any change I make is going to reflect instantly so for example edit source app.js and save and reload coming over here I could just be like nah I'm going to do my own thing if you know the reference let me know in the comments if you know that reference command save and right there nah I'm going to do my own thing shows instantly okay that's step four step four is out of the way we're good to go let's go to step five if you
[19:43] gotten up to this point congrats because I can already tell this video is going to be long like really long so this point now is that you successfully from start to finish up to this point of the video have created a react based application now the name of the game is how do we take this application and have it actually show on the internet EG I create something super cool I can actually take that URL and share with my friend let me show you how so to do this we're going to use Firebase and to be honest with you I could dive way deep in why we're using Firebase and just think of firebases our
[20:14] ability to host our website EG if you've done web development in the past like you were hosting with Shopify were you hosting with Google were you hosting with square dance or Square Pants whatever that one is you know what I'm talking about if you want a video of me diving deeper into this topic check that right there I'll show you why basically it costs nothing to run this website this video is so long I'm losing my voice so before we actually do that first command there let's go ahead and create a Firebase project coming over to your projects just type in firebase.com hit create project so with the project name I encourage you to name this
[20:44] something that you can recognize and connect the two dots so for me I'm just going to call it first project again you call it whatever first project let's simply hit continue now if you're watching this tutorial for the purpose of really trying to build out a software or website that you're going to launch obviously enable Google analytics this for me I'm just showing you how to do it so I'm just hit create project we are creating our project in Firebase that's going to allow us to host for free for free for free for free what do you think of that now when using
[21:14] Firebase you have a ton of different options we're creating a web app today hit web with the web app I'm going to give you the exact same name here for project and it's already giving us the option here so we're going to make sure we do Firebase hosting as well that looks good Register App next we're going to do the steps found in our Google doc this is going to be blurred out a little for obvious reasons because that's my stuff I'm going to go ahead and first install Firebase come in over to our Google doc it's mpm install Firebase simply go to your terminal here and we're going to Simply put in mpm install Firebase hit enter with that installed
[21:45] what you'll notice is that our package lock Json and our package Json is going to have a new dependency that's going to be Firebase with the version that's relevant to it let's go to our next step here which is going to put in the relevant code that we need to put in in order to connect Firebase hosting to our project to do so simply put in the command touch source firebase.com with that JS file this is where we're going to put all that relevant code you just saw from firebeast console what code am I talking about this code scrolling down here what you'll notice
[22:15] is that I put it in here as well so use this code right here input all your relevant information and get going here so let me make my life easy here I'm going simply copy all this I'm want to paste it here and then what you should do is simply over paste this or take the code you just saw from Firebase console and paste over here I'm going to hit command save here and obviously it's going to be blurred out a little bit because that's security reasons now that we made that file it's installed let's go ahead and install Firebase tools this is going to allow us to initialize or start hosting for this web app copy this
[22:46] line and before we do that let's go and make a commit here good practice right so you can hit down or up on your arrow keys on your laptop is going to allow you to go to previous commands so for me I can go all the way up here go to get add get commit you know change this maybe let's do uh Firebase added hit enter and then get push origin Main and this is going to add this information to our G Branch this is good practice here so we can revert if we ever mess up now that we've created our fire base.js we've installed the firebeast dependency let's install
[23:18] some tools here it's going to allow us to initialize hosting I'm going to command V the command line we saw earlier here which is this hit enter don't worry y'all we're almost done here I know this is a long stretch but you are learning a ton and I plan on doing more videos to give you more ideas and stuff we can do here but don't worry we're almost done coming back to your Google doc here we're going to do Firebase login this is going to allow us to log into the Google profile that we created with our Firebase account if you want to see these directions again just simply come back to that Firebase page here and you'll notice him here as well Firebase login this is going to pop up a little popup here and you're going to
[23:49] Simply sign in so I'm already signed in here but just to really show you how to do this I'm GNA do Firebase log out so this how you log out and what I suggest you to do this is very important so if you're on this far write this down anytime you want to develop for the day and get going for the day start with Firebase log out Firebase login just refresh it why trust me Firebase login enter you're going to get this prompt here simply hit why this is going to open a choose your account window choose the account you made the Firebase app with if you don't know simply just go back here let me hit like continue to
[24:21] console and then just like see your little selector here that's the one you made it with once you select your account hit continue all of this makes should to hit allow and you should get prompted with this message and you should see the email that you created the Firebase with saying successfully logged in now if it logged in let's go ahead and initialize hosting is going to allow us to have our website live that I can share Firebase in it Firebase in it mate you like shrimp on the barie mate keep it nice get some ribs some brisket maybe some corn on the barie all that's
[24:53] my little Australian accent all right hit enter you're going to get a couple options here now we can dive a ton into this kind of stuff so let me know in the comments if you want to see more stuff of this nature for now though we are just going to do a little select here for a keypad and hit hosting I'm going to do configure files from Firebase hosting enter my bad space space with that selected enter now you're going to get the option of basically creating a project useing an existing project well since we already did all that all the heavy lifting is done use an existing project this is going to then prompt all the relevant projects that we've created
[25:23] together now what you'll notice is like Corin why does it say 4 f52 F that's just be because like the actual first project in Firebase is obviously already taken so sometimes what Firebase will do is just like add a little bit of like a string so you can still get access to it hit enter what do you want to use as your public directory public that's right up here we're going to hit enter configure as a single app page say yes y enter for now we're just going to say no to the automatic builds to GitHub n and then when it prompts us to overwrite the existing index.html hit no n so far so
[25:55] good with all that done what you'll notice is that we are get some nice little Json files and Firebase files and everything we need to do to deploy this let's deploy coming over here to Firebase let's go ahead and just add hosting to a shortcut so we can see this two major steps here first one is npm run build what this does is this builds out our front end everything you see visually this is the react application so in this context right now it's just this so first in any type of deployment to hosting we do this command first npm
[26:26] run build enter remember that little cheat sheet make sure you have that make sure to add this to your cheat sheet it's build it out this is built out our optimized version of our front end now let's deploy it to a live link simply put in the command Firebase deploy enter there we go that's a live website link you go to that website it exists on the internet you can share with your friends Etc let's try it so for example I go to the hosting URL here click it now I realized that there was one little issue here so when you deployed that you may have gotten a white screen don't worry
[26:58] the issue here is that when we go to our fireb base. Json we need to make sure we're building to the correct area so instead of public we're going do build command save let me show you a little trick here we can actually run both these commands simultaneously in order to do so just copy both at the same time and hit enter mpm run build come back over here Firebase deploy what this is going to do is first build out our front end and then build out our back end hit enter boom so all I really expect to see here is what we saw in our react application earlier let's check it out
[27:28] and there we go look up there to the URL you'll notice this is a live website link by the time you see this I probably deprecated it so you probably couldn't access it who knows the idea is this you got it you're good to go now you can add custom domains if you want to do so you're going to Simply come back to your Firebase project here and hit add custom domain now there is a ton of other stuff I could do on this but you successfully completed this huge huge tutorial as I mentioned before all the resources that are discussed in this tutorial can be found in the description down below the Google DC ch BT everything you run into
[28:00] issues try that Chad gbt conversation try commenting in this video maybe someone will help you out in addition let me know in the comments down below of different things you want to see past this now that you got it set up what are you interested in completing with cursor AI make sure you leave a like it's completely free and I do a ton of other stuff on this channel it's not just these kind of tutorials I do stuff when it comes to automations news about artificial intelligence a my own software that I'm currently developing you can see like a whole timeline and a journey Chad gbt Claud like everything you need to know about artificial intelligence you can get a real
[28:30] perspective for me myself and I like that GE easy song and I'll see you in the next video make sure to check out these videos randomly chosen by YouTube's algo are they good are they bad that's my face and I'll see you in the next video