Build an app with a backend using AI in 19 min (V0, Cursor AI, Claude AI, Firebase)
Let's learn how to use Vercel📅 2024-10-18
Transcript
[00:00] and here is the moment of the truth is a vzero code that we import into cursor AI now going to successfully actually work in our back end hit finish and then look at this y'all what did I tell you company size 1150 email apples gmail.com interest automation apples product manager let's go ahead and start using v0 paired with cursor AI to show you how to take a front end like this from v0 connected to a back end so all the data that we provide here actually get saved into the cloud because right now if I hit next put in all these metrics here
[00:31] hit next again this doesn't get saved anywhere this is no good therefore I'm going to show you step by step as if you've never coded before how to build out a front end with v0 how to integrate that into cursor AI connect it to Firebase as our back end and then by the end of the video we'll have a fully functional form that actually saves the data sound good let's jump in there's a lot of tutorials out there trying to show you little cool things with rep cursor AI v0 but none of them really connected from0 to all the way to dot like actually full functional web app with a backend so that's the purpose of
[01:02] this video as you know of these videos and if you don't welcome to this channel my name is Corbin Brown there'll be a Google doc in the description that walks you step by step all the terminal commands everything we do that is showcased in this video you can find it in that Google doc and in addition I'm going to provide a specialized chat GPT chat for the purpose of everything we're doing in today's video does that sound good if it does so far make sure to leave a like and let's find out how to do this to get started here let's go ahead and start with a prompt this is going to build out our front end using vzer if you want a whole video that shows you in 7 minutes everything we can do with VZ check out that video right
[01:32] there but for now we're going to say generate a multi-step wizard to collect information on users when onboarding onto asss product we're going to hit enter here as we know from past tutorials you can chat with it to get different code here we'll be able to see a preview here and then we'll be able to export this code into cursor AI idea here being that basically spend as much time you want in this stage of the process just chat with them more do whatever you want as the purpose of this video is to show you how to connect this to an actual backend and actually deploy an application rather than little preview thing we saw earlier because that little preview thing is no good it
[02:03] doesn't work here we go so we have our preview here we can open it in full screen play around if you want to play around let's go and Export this code which is going to be add to codebase but before we do that let's go and create our folder in our project in cursor AI to do so make sure you come up to cursor AI here make sure to do new window if you need to do that then we're going to go ahead and open the terminal that's right here in this terminal we're going to Simply put mkd with mkdir selected here name a project name this is going to be our directory this is how we're going to reference it we're going to say a full app enter now that we're in full app here we're going to go ahead and
[02:34] then create the actual application within it just go ahead and open this folder real quick so we can start messing around going to open folder here or let me back up open folder and find full app there we go enter and here we'll open up terminal again and then from this spot we're going to go to terminal we're going to go ahead and paste that line of code that we find here so we're going to add a code base copy hit paste and then hit enter one thing you need to know is that if this is your first time doing this you're going to get a notification B basically saying do you want to install some dependencies say why say yes hit enter first question it's going to ask is that
[03:04] do you want to start a next JJs project we're going to say why not why like why is this happening why is it like yes what is the name of this project we'll say my new soft where enter now we're creating it you're going to see files end up over here and this successfully completes step one here where we take vzero code and put into a cursor AI project let's choose some relevant settings here we're going to say New York New York New York we're going to say neutral we're going to say yes let's get going with all that complete you'll see that we have our nice little app here with all this relevant information
[03:36] I dive way deeper into this topic and other videos on my channel for now I just want to connect you to the back end what we can do is we going hit app here we can go to components onboarding Das wizard this is going to be the relevant code that we saw earlier from vzer now that we have that done we need to make sure we can run this in the front end so it's in Local Host 3000 Local Host 3000 is our ability to start development with no internet connection it's purely within our local machine your laptop your desktop make sure we're in the right area when we deploy this this is not going to be in full app this is
[04:06] going to be in what we just named this node.js project which is going to be my new software I'm going do CD my new software kind of makes sense enter now the way you run node.js projects is going to be npm run Dev hit enter with it running you'll notice that we'll get this nice little success message here and if you simply click this link here it will show up there we we go we're in Local Host 3000 this is our front end and this is kind of the preview we saw on v0 but it's in our Local Host 3000 I hit next next previous this is all the
[04:39] relevant data associated with the form we're still not connected to a backend so let's go and do that so with that running let's just go ahead and just do some quick code here as there is one thing that this form does that it should do and that is if I go ahead and put my full name here but I don't put in an email and hit next it lets me proceed to The Next Step no good so instead of me showing you like some past methods I've done with my full-blown three-hour playlist that shows you how to build out an actual website I'm just going to use cursor AI going command a going command K or control a control K depending on
[05:09] what OS you use I'm going to go ahead and say make it so that in order for me to hit next in the form all input fields are filled in submit edit getting some new code so what you'll notice now is that it actually identifies the new code so it deletes the previous code and then with the green it shows us the new code we're going to say accept and as we love with Local Host 3000 I can simply save this and if I go back to my form you will notice that I can't hit next anymore because of the fact that we don't have an email therefore now that I put an email in we can hit next can't hit next anymore got to fill out the
[05:39] variables pretty solid now with that change let's go ahead and get it back in as a side note if you want to know how to connect this code repository to GitHub I'm going to link one of the lessons from my three-hour course that just shows you how to do that basically this allows it so that the code you create is in the cloud as well as the local machine you have this is really good and basic basically a standard practice with software developers so make sure you do this step once we do that though we're going to go ahead and begin the process of creating our backend here initializing it and adding it to our project first thing you need
[06:10] to identify anytime you're working within this repository make sure you're in the right area look at that my path for the right area is going to be full app where we name the repository slash my new software which is the actual app itself now that we've done that let's begin come to firebase.com and hit create project in this project whatever you want for me I'm just going to say new software hit continue for my purposes I'm not going to connect Google analytics if you want a video on that check out my big playlist create project we are creating a Firebase project
[06:40] software hit continue first major thing let's identify the kind of app we're creating the app we're going to created today is a web app therefore we're going to select web with the naming of this app name whatever you want obviously name it something that's relevant to what you're creating so I'm Going's do new software again make sure to select also set up Firebase hosting as that is relevant for you to have a back end that can store data Register App this next part this is going to be blurred for obvious reasons as this is relevant information for this Firebase app this right here or I guess you can't really see that because it's blurred out but
[07:11] point being is that you'll see a bunch of code there don't worry I'll show you how to do that first thing you need to do though is make sure you have Firebase installed copy that as as side know if any of these commands don't work such as npm why isn't the npm command not working check out that video right there 30 minutes long shows you from Ground Zero how to make sure the npm command works for now though install Firebase mpm install Firebase perfect it has been installed with it installed here let's go ahead and hit new file in the top of our directory here and I'm going to just do Firebase JS I'm going to go and copy this code copy paste that code once the
[07:43] code is pasted here we're almost there now the rendering of our actual application is done in page. TSX therefore let's go to import firebase.com page. TSX then over here we're going to do import Firebase app coming back over to Firebase do this next command line here this is going to give you the ability to do different abilities within Firebase that's going to allow us to do fir store hosting there's other stuff like storage functions Etc paste that
[08:13] line hit enter okay we are on the right track here now that we've done that now we have the tools the abilities to initialize different features within firebeast let's go actually log in so I'm going to go and log out first because I'm probably already logged in do Firebase log out and then I'll do Firebase login what you'll probably do if this is your first time is just Firebase login hit Y here make sure whatever account you're logging in up to this point is the account associated with your Firebase profile for me is contact at webcafe ai.com all this information you're going to hit allow we've successfully logged in now that we're here we're going to do Firebase in
[08:44] it now that we're logged in no not Australian in it might just in it enter this is going to give us the ability to initialize different things within our project so first off let's initialize hosting we're going to use our up and down in the arrow keys we're going to come down to hosting here we're going to hit enter oh my bad spacebar Firebase in it again boom enter then the next option here of using an existing project or create a new project we already created the project so we're going to say use an existing project for us we're going to scroll down here it's going to be new software enter what do you want to use as your public directory we'll say public configure as a single page at
[09:16] rewrite all urls to index.html we'll say y for GitHub we'll say no for now but I referenced that tutorial earlier that you can watch if you want to know how to do that and for now we're going to go so in order to deploy to hosting we're going to do Firebase deploy it is deploying hosting and then in order to see your application here and let's see if it works we're going to go and copy this hosting URL which doesn't seem to be working right now so let's see what's up so here we go I went ahead and got it working here as you see with our hosting URL that's right up there it is currently live let me show you step bystep how I did this so if you ever run into errors in this tutorial you know how to troubleshoot and I just don't
[09:48] leave you hanging now one thing really quick that URL just doesn't look good right like an actual software or website you plan on developing it probably shouldn't be that URL because it looks a little crazy and it's a web app therefore if you want a video that shows you how to make custom domains for your Firebase web app check out the school community in the description down below proceed and let's see how I fixed it two major things first thing hit control L command L this is going to open up the chat why is this relevant what you need to do is simply this you need to go to Every Firebase file because the fact
[10:18] that we're trying to fix a Firebase issue and simply hit this add button up here with this add button selected select anything relevant to Firebase select your package.json package.json these are relevant files for deploying and scripts I'll show you more what I mean by that pretty soon here your page Firebase .js components like anything really just throw a bunch in there then what you want to do at this point is that you either want to show relevant errors that you received in terminal or just simply put out like how do I deploy this to Firebase into
[10:48] this web app so for example here I'll put all the relevant files I'm like make it so I can deploy to my Firebase hosting and then it gave me all the correct code that I needed to follow step by step such as updating the next. fjs updating my package.json updating my Firebase Json so that those are all over here so go ahead and copy paste over and just for a little context of package.json notice next build next Dev next export npm run build and Firebase deploy what this does is this is how we reference
[11:19] either building the front end or the back end in a simple command line so for now the way I'm currently doing it is I'm just going to Simply put like npm run build for the front end and then Firebase do deploy or Firebase deploy for the back end at least for hosting so if you run into issues or you run into errors if the Google Doc doesn't help Chad gbt chat I provide doesn't help use the control L command L feature here select all the files and then you can even go as far of if you get specific errors in your terminal when you're trying to deploy the front end or deploy the back end paste the entire error
[11:49] right there and get the results for example I got this air right here there was an issue with components UI input. TSX if I go to components UI input. TSX I come to this file I'll start a new chat I will take the exact Airline I'll paste it in here hit enter and it'll give me the answer and through this logic I realized I didn't even need to import the Firebase right here this is just coming from my logic of when I do react based apps that are on app.js for now though we don't need to import Firebase JS just yet we will soon here
[12:23] as we're going to be inputting logic here so we can handle back in logic so let's go ahead and begin here coming back to Firebase what we're going to do here is we're going to Simply go to build now there's a couple things we want to add here such as hosting so this is where we can check all our hosting deployments as we just did together here let it load there we go with the relevant URLs right there the one we're going to care about today on top of Hosting is our fir store database this is what's going to make that form actually work let's go ahead and select create database database ID will go of default location will stick with its
[12:54] default as well the next question comes down to security rules this is very relevant in the content text of building out an application EG there is certain data found in the database that you wouldn't want all users to get access to maybe only off users maybe only you as an individual there's certain ways you can gatekeep this I'll probably do a whole video on this so make sure to subscribe for now we're going to start in test mode here and create here we go this is our database there's a bunch of cool stuff we can do in here there's a bunch of ways we can reference it but for now let's start a collection here we'll just put form hit next and we're
[13:25] going to need a relevant document to start with this is just name structuring for now we'll just say form test and then hit save we just added our first data point in reality this isn't actually going to be the way we do it in our front end for now though you get an idea basically we start with like a global collection here or general collection then those turn into docs typically good formatting is going to be some type of General name EG users a unique identifier and then the relevant documents associated with that user there's a bunch I could do on this topic but for now let's just connect it Firebase in it we're going to scroll
[13:56] down here to fir store base enter what file should be used as fire store rules default enter what file should be used for fire store indexes enter there we go if you want to see your relevant rules you're going to come down here to fir store. rules fir store. Index this is your fir store everything I can update this deal with this in another video for now though let's set this up I'm going to select all the code in Firebase .js and I'll put in the line import fir store and Export it so I can use it submit edit hit accept once you hit accept I know this is blurred out for
[14:28] obvious reasons once you had accept here you're going to notice it as DB DB is how we're going to reference it and reference different functions we can do within fir store so actually to be honest with youall we need to export a little bit more functions to do so we're going to say we need the ability to set doc get dock on Snapshot a lot of this will make more sense as I explain it in this tutorial but for now what you need to know is we need to export a bunch of stuff that we're going to use within the front end of the code so make sure to add export as well it once to export it up here that's not necessary we can actually export it down here there we go now we got some functionality here if we need more we'll go ahead and proceed as
[14:58] I noticed we don't have set doc here or we do have set doc okay we're good to go let's go ahead and jump over to our onboarding onboarding data this is the original code we got from v0 from here we're going to go and select this import selection here we're going to say import fir store as well well actually see if we can push this to the limits command a control a command K let's see how powerful cursor AI is at handling lame indication okay let's use fire swore to save the data from the form when I hit submit at the end use this dock path the dock path is what I referenced earlier when it came to what we created that
[15:28] first little data point for submission this is going to be the collection name General then submission D unique number EG y y 789 then all the relevant information is going to be found within that doc name email company size Etc I'm curious is cursor AI really that powerful submit edit first thing you'll notice is that we are currently importing from firebeast the DB the doc the set doc next the submit button actually has a function associated with it now this actually is looking pretty good here y'all submission ID is submission slate now that's cool so it chose to use the as the unique
[15:59] identifier set Doc is going to be found within that path that we referenced earlier here I'm going to hit accept this actually look pretty good y'all uh this I'm impressed DB form submission submission ID good and then within the submission doc we have name email company size role interest submitted at everything's looking good so far in order to know where this is being referenced we're going to hit command F here and then we can see it is submitted here let's just see if this even works to do so we have two options either we could redeploy this to that hosting URL or alternatively just use our Local Host 3000 so for now let's just use Local
[16:31] Host 3000 I'm going to go ahead and rerun at mpm runev let's open up this Local Host 3000 here this is just to allow us to do fast code edit if there is an error so for your reference if we come up here so that's currently running as you see here to make sure confirm okay we're good to go and just to make sure that you feel like is it connected we can do a real quick test here if I just add a bunch of characters here come over here there we go they show up here we're live now let's see if this works so if we come back up to our Firebase here and we have our Local Host here
[17:01] we're good we should see a new Doc collection show up here showing that we've actually saved data to the back end and what is always good is that we have console logs in order to open them on Google Chrome it's going to be inspect hit console we're going to go apples apples at gmail.com hit next 11 to 50 next select your role product manager next automation next and here is the moment of the truth is a vzero code that we import into cursor AI now going to successfully actually work in our back end hit finish finish we get
[17:33] our message here onboarding complete data saved successfully they it actually save there we go form submission submission with a unique identifier date now this is going to be in unic code and then look at this y'all what did I tell you company size 1150 email apples gmail.com interest automation apples product manager and submitted on October 17th of 2024 if you feel like you learned something up to this point make sure to leave a like couple of things first thing right now for our current logic we only needed to reference DB Doc
[18:03] and set doc that's all we're using in our functions but as you saw from the original import file there is a ton of other stuff you can do within fire store that's pretty cool one that is really particularly cool is an on Snapshot and this will listen to an endpoint found within fir store and if data exist you can reflect a different user interface that might have sounded very confusing I'll probably need to do a video on that but for now we've successfully connected our front end with our backend with a database I want you to notice as well how we identified the dock path why that original cursor AI prompt was as it was
[18:36] that is because of the fact that is when you set docs or read docs there is always going to be like a path right so we got our DB form submission which I identified and then the submission ID now right now we have an alert and that's the alert you saw we got that little popup from Google Chrome we're good in theory we could put a console log here for the payload there is a console airor here so if an air did incur we would see it in our console logs and everything about the board in that manner for now though you know how to connect to a back end I'll probably do more videos on this so make sure to subscribe it's completely free I may put that code you just s in a GitHub
[19:07] repository therefore allowing you just to click on it and then just copy and paste some files over if you get lost so let me know if you want to do that but make sure you leave a like check out my three-hour course that shows you how to build out an entire front end using Ai and coding if you want to see that in the description down below but without further Ado I'll see you in the next video we have backend data there is data email those are two random videos that's my face I'll see you in the next video