Cursor AI For Dummies
Let's learn how to use Cursor AI📅 2024-09-05
Transcript
[00:00] what you just learned here is actually pretty fundamental you learned how to do correct structuring in the context of a react based application let's learn how to actually code with cursor AI if you're a complete beginner the purpose of this video is that if you have no experience of coding I'm going to go ahead and give you the perspective and the experience from someone that's building out an artificial intelligence software that's backed by Google on tips of how to code structuring on how to code how to build out a full production environment what do you mean by production corate I mean like the one that the consumer sees everything you
[00:30] need to know in this video so let's jump in welcome back y'all okay this video is highly requested due to the fact that I've been doing a ton of cursor videos on my channel here and a lot of people have been asking me okay Corbin I get it I know how to set up a project I know how to render it like but how do I actually give good structuring if I want to do a production level environment as a side know here I'm going to leave two videos in the description also possibly as end cards also as cards on the screen the first one's going to be this one right here this is going to show you from start to finish 0 to 30 minutes how to launch a actual live website what I mean by live website is not Local Host
[01:01] 3000 EG that we use Firebase hosting I gave you Google Docs Chad gbt chat Etc check it out the second Major Video is going to be that one right there in 9 minutes I show you the actual functionality of cursor AI what you can do with it and everything above the board when it comes to this new way of coding I'm giving that as a pretense because in this video if you're like Corbin how'd you even get there this doesn't make sense you didn't explain this oh he put beginner in the title but it's really not for beginners no no no just check out the other videos purpose of this video is I already went over all that stuff to get to this point so let's
[01:33] actually learn how to code sound good let's do it let's go and begin here first major thing you should know here this is a react based application there's other ways of creating applications but in this specific context we're using react what is react react is made by meta who is meta they're originally called Facebook just know where it comes from second thing what is all this shabam here what's going on here what should I know zoom in first major thing you should identify is app.js in app.css app.js is where we're going to render
[02:04] our application now some of you might be asking Corin what do you mean by render think of it this way when we create an application there's going to be multiple pages when I say application I'm not just talking about like your iPhone app or Android app I'm talking about like any type of application this could be a website this could be a software this could be anything y'all so application is a very aitous term in this context knowing that the way we use and leverage app.js here and I'll show in this video is this is very much where we render pages and this will make more sense as we get going here but the idea is this
[02:34] the app.js should be very limited you're looking at a Max of like maybe 50 lines maybe 40 and that's because we'll be importing most the files or most the other pages and components into the app.js I know I know this might not make a lot of sense so let me go ahead and just start here by going into structuring here's your Source folder I want you to think of your Source folder of everything that the front-end engineer would handle when I say front end I'm talking talking about like the website how it visually looks like when I say UI talking about user interface
[03:04] how you navigate in a website so just as a real quick example here I'm going to say new folder we're going to call this Assets in the assets folder what I typically like to do when I build applications is two major types of folders within that folder first folder would be images second folder would be gifs or gifs am I going to start a fight in the comments over that some of yall be fighting me over the dumbest stuff we'll keep going here the use case for this folder in this structuring here is obviously if you have images for your application or you have gifts for your application you'll drag them into here
[03:36] then you'll reference them from here as a real quick side note for front end engineering typically you want to optimize your images jpegs webp this is going to be a smaller file for the underline website it loads faster I could get into that but for now we'll skip that that covers that that's the idea here right so now you're getting a little bit more the structuring okay understand okay so this asset just for like Media stuff okay cool what's the other folder Corbin we add another folder here also to add folder I simply just right click into wherever I want to add it and then it gives me this little prompt here is we're going to call it homepage that's it within homage we can
[04:08] then start adding files that will be relevant to the homepage of our application so for example here we can say new file and let's just say we have homepage. Js and then we have a new file here as well we'll do homepage. CSS first major thing you just learned here which is very important and you could overlook this if you just jump right into cursor is notice how I'm separating the JS and the CSS this is important you need to understand this you don't want to have code where the JS and the CSS are all within that return
[04:39] statement it's just not going to look good longterm for scaling production it just trust me on this okay as a side note Source folder as I said before front end engineering backend Engineering incurs in a whole separate folder whole separate way to initialize it Etc I can make a video on this so let me know if you want that in the comments down below for now let's just begin and understand how to proceed my Nick command K here I'm just going to start using cursor AI to code out a little bit of a front page this is very simple two sentences here I just want to show you structuring in this context and also it gives me a chance to gut check cursor AI
[05:10] to see if the code's even good build me a react based homepage that is has a button in the middle that says that was easy when I click the button turn it blue subscribe maybe generate eh not bad actually pretty good not bad at all so I'm going to go and accept this uh first major issue as I referenced earlier is notice how all the relevant okay when I say CSS I'm jumping I'm jumping here when I say CSS that's uh the visual elements right so if you're on YouTube right now or you're an X that's like why is the YouTube like font that color why is like the the
[05:40] title that color like why is the entire website's entire background like that darker color or lighter color depending on your theme that's CSS so what you'll notice here from this output is that it's putting the CSS within the JS not good don't do no bueno let's go ahead and solve that another thing you'll notice is that within cursor AI what it typically likes to do or within any type of AI generation is it will give General class names for stuff but that's really bad for scaling and that's really bad for creating production level environments because of the fact that button clicked set button clicked what
[06:12] does that mean if I had thousands of lines of code or I had multiple files and I triy to reference back to this yeah in theory I could double click this find where it's being referenced hit command F or just double click and you'll see it's highlighted and see what it's doing that doesn't work at scale keep that in mind now I go over why I think having cursor AI is helpful but doing it in CAD gbt is better you can check out that video right there because AFF what I have to do right now we got over CSS here let's go ahead and convert this back to this CSS or just grab the code and put it here so this looks
[06:43] better so to do so what I'm going to do is this I'm to command a here hit command K well actually first off let me copy this underlying CSS so I'm just going to copy all this now I'm going to hit command K here copy all that I'm going to say okay don't give CSS here please give us a CSS class name for each element submit and edit looking pretty good here hit accept and what you'll notice is Boom condensed we'll get a CSS element for the homepage container we'll get a CSS element for the homepage button with this pieces of information what we want to do now is we're going to import the CSS class here so that it
[07:14] reflects into as a visual element and honestly just so this looks good you can kind of get an idea of what's Happening Here in a visual way let me go and run this in the EM emulator actually not the meem that's for Firebase and Firebase emulator which I can do a whole video on emulator in this context is like think of Local Host for react front end Firebase emulator is for a bubble back end like it doesn't exist I'm getting too confusing I I'll we'll talk about that later watch those other videos because you might be like Corbin how do you even launch this into Local Host 3000 just watch the other videos we're going to launch this real quick to do so
[07:45] we're going to Simply put in mpm start as you already know this is going to launch a whole separate window page here so obviously this is rendering the app.js what I mean by render is that it's grabbing the code found here so let me go ahead and show you good structuring here before I make the like CSS class and import everything here right let me show you some good stru for the app. GS and to start off here let's just burn all this so I'm going to burn everything except app div command save there you go nothing now so now we need to import our homepage. JS file first off I'm going to command save this and actually I'm curious oh not bad pretty
[08:17] good cursor that's actually really good good job good job cursor that I mean that that's good I'm impressed so this is already making an assumption of what I'm trying to import here and it knows I'm trying to import my homepage so I'm going hit enter here Comm in save or tab command save and it looks like I can hit tab again not bad tab again okay I nice okay not bad so if I come back over here it renders but obviously it doesn't have its CSS elements right that's why it's up there and looks a little crazy um I'm actually pretty impressed by that tab feature there I will say that there's drawbacks to that there's a reason why I don't necessarily encourage new coders
[08:48] to jump all in on that kind of stuff but for now let's add that CSS so the way I'm going to do this is I'm going to Simply have the CSS names class names and that original CSS elements that's already created for us I pasted that into some notes so I can go here and say put each of these in the CSS class name that's fine hit generate and we should basically get two elements here yeah perfect okay I like that accept command save so to make this simple for y'all homepage container come back to here is the homepage container found here sound good although in order for this to
[09:18] reference that we're going to actually have to import the homepage. CSS because as you see why isn't it blue why isn't it red so to do so it you know typically you have to type it but it's already giving me the little like suggestion here so I hit tab command save there we go that was easy subscribe maybe nice what you just learned here is actually pretty fundamental you learned how to do correct structuring in the context of a react based application where you only will render the underlying files here and you will have every single specific
[09:50] type of element and file in little folders there now this is where it gets crazy I want you to think as this as like the the big parent like this is the grandparent everything's under it right this is the grandparent but within these little folders here you could create some child and parent components where you render the same way in these files and then you render the overall file here now that topic I could go into make you understand better but for now I kind of want to see how this video performs as I do stuff like this on my channel but first I want to get a gauging of if people would be even interested in
[10:21] seeing that type of content as this is a little bit more code heavy but for now make sure to leave a like it's completely free helps me out here and you just learned some good structuring tips when it comes to building out cursor apps or just in reality just building out applications like cursor AI is just an IDE with AI implemented into it therefore I'll see you in the next video was today's tutorial good was it not those are random videos that's my face and as I said before subscribe Maybe