41SR07p243Q
Let's learn how to use Vercel
Transcript
[00:00] let me show you everything you need to know about v0 as fast as possible I'll show you how to code out an entire front end and then I'll show you how to take that code put it in a cursor project and deploy it as a web application so let's go ahead and learn everything we need to know about VZ let's jump in there's been a lot of hype around cursor AI VZ repet all these different platforms so I'm creating this video just to give you a real quick rundown of what's possible on this platform so let's go and begin here all you need to do to start with VZ here is obviously create an account sign up once you're logged into the dashboard here we're going to have obviously our chats here from conversations therefore
[00:31] let's start a new chat I'm going to create that SAS onboarding form that you saw earlier in this video we're going to go ahead and put generate a multi-step wizard to collect information on users when onboarding a SAS product from here all we need to do is hit enter and then the UI is structured where we have a chat-like conversation with the artificial intelligence and then our code files and previews will be to the right over here first impressions of this platform this seems like a good platform kind of like what we saw with repet in the sense of making sandbox type of uis or MVPs of products while generating the code we can actually scroll down here and see the code coming
[01:03] out live which is pretty cool once it's done we're able to actually preview it but one step back from this is that this isn't actually in a local host environment EG running on our laptop locally if you don't know what that means that basically means right now in order for us to preview this we need an internet connection and we need to be connected to their servers a local host environment allows us to connect and deploy applications and Visually see how they interact with the code with no Wi-Fi completely on our machine or laptop desktop Etc once we get it fully outputed we have a couple options first
[01:34] one ask a followup we can add more additional stuff to our underlining code here second one we can actually favorite chats so maybe you got a really good chat want to continue conversating on another day you can hit favorite here we even go as far as actually renaming the chat and be like new software new software is here save to see the original file that was coded you can simply hit to the right here and then we can scroll down here and see everything that was just coded from that prompt coming up here we have a couple other options here we can either Fork it we can share it if we choose to do so as a public link but probably the most important one out of all these options
[02:05] you see here is our ability to add to our code base this is going to be our ability to add this entire project to cursor Ai and do further development if we choose to do so before we do that though let's check out what we have this is why I say this is good for like sandboxing or understanding different UI elements you would possibly want to develop in an artificial intelligence context this all works so full name email next it works in the sense of UI and what I mean by that is right now none of this is connected to a backend this is purely just for like the user
[02:35] experience if we were to go through a onboarding form for a software as I'm clicking through right now so this UI looks good it's not connected to a backend so make sure to subscribe here as I'll probably do another video in the future showing you how to actually take data like this and when you hit finish it actually does something and stores it but for now though let me show you how to deploy this in a cursor application so you keep messing around to do so go ahead and click this add to codebase copy this coming over to cursor AI come down here to the bottom left then hit terminal now in terminal we're going to go ahead and set up a project and then within that project we're going to go
[03:06] ahead and push that line of code as a side not if you want a full 30-minute video that shows you with cursor Ai and how to actually deploy to a live website link EG like apple.com rather than Local Host 3000 check out the description down below check out that video right there I show you how in 30 minutes for now though let's create this project M KD i r give a project name we'll say v o good once we do that I'm going to hit C d v good is going to put us in the directory of where this folder is located what we can do here is we can simply hit open a folder with open a folder go ahead and
[03:38] select the folder we just created V good okay in our project let's go ahead and open up our terminal again here and we're going to put in that line that we just copied EG this line add a Cod base copy paste hit enter now since I've already installed a dependency here you're going to notice a little like notification like do you want to install XYZ just simply put y hit enter and it's going to install the dependencies required for everything you're about to see from here so I'm going to come up here and let's do this terminal for the first prompt here would you like to start a new nodejs project we're going to hit Y we're going to give a app name
[04:08] here so what is the way we're going to reference it later on in the code we got my app here we can say uh my new V enter now it's going to start deploying and creating our relevant files needed to deploy this later on as a local host 3000 this is grabbing the code that we created here in v0 we can choose different styles for now going to hit New York base colors neutral this is all arrow keys up and down would you like to use CS variables for theming yes so once we get all that we have successfully
[04:39] created our app and grabbed the code that we saw earlier let me go ahead and prove that to you though scrolling up here if we come up here we can see onboarding data name email company size roll interest to find that relevant code we're going to go to app here components UI and then you'll see it is found right here name email company signs roll interest now let me show you the command that's going to deploy this to Local Host 3000 and as another side note and the reason I keep doing side notes y'all is because this is a lot to take in if you're a beginner like you're looking at all this code and you're just like what the heck's going on if you want a full
[05:10] 3-hour free course that's on YouTube it's free check out the description down below again 3 hours long I show you how to do from zero lines to code to however many deploying an actual front end for an actual website coding of AI now let's deploy this to deploy this we're going to have to hit the correct folder so we just created that app so we're going to do CD again and then our app's name is the one all the way up here right under V good it's going to be my- newv once we're here this is where we're going to do a simple line if you're familiar with
[05:40] react it's typically npm build in the context of node.js here we're just going to do npm run Dev hit enter this is going to launch in Local Host 3000 once you see the message of ready we're going to go ahead and just copy this uro or simply click it and there we go we successfully deployed to Local Host 3000 which now allows us to instantly reflect new changes in this environment and obviously we can click through this add some stuff go through the actual flow but what I mean by like actually doing live changes we scroll down here to our file here let's say we want to change full name instantly and just get a reflection that's the beauty of Local
[06:10] Host 2000 so right now it says full name here I can simply say full name please command save and then it reflects like that there you go now you know how to successfully take vo code and push it to a cursor AI project to get going on deployment and proceed in whatever application or web app you plan on making make sure you leave a like it's completely free and check out this channel as if any of that didn't make sense or this was too fast or you're like why is there for beginners in the title this is definitely not for beginners check out my other stuff on this channel I have to make longer videos for that 30 minutes Google doc
[06:41] resources Chad gbt chats that are lasered in just to help you for that specific tutorial trust me we got going here I'll see you the next video it's v0 000000 those are two random videos that's my face I'll see you in the next video