Let's build an app's Backend using AI in 153 min (Cursor AI, Claude AI, Firebase, GitHub, React)

Other Videos📅 2024-12-26

Watch on YouTube ↗

Transcript

[00:00] hello the course you're about to view right now is going to give you a full comprehensive idea as if you've never coded how to build out real backends using artificial intelligence and code if you don't know who I am my name is Corman Brown I buil out bump ups.com this is a full-blown software that is currently funded by Google so don't worry in this series you're going to get real applicable software development knowledge with our new ability to code of artificial intelligence and the entire purpose of this series is for individuals who have little to no coding experience and even if you have a ton of

[00:30] coding experience this still works as Ai and our ability to integrate it into our coding workflow is a whole new field I'm not going to take up too much of your time here as when you jump into this series I'll probably go over what you see above me anyways but this is a multi- indepth series that's been running on my channel and I went ahead and combined it all into this one video you're watching now so go ahead and let pass Corbin explain everything you're about to see in this series pretty soon here one last little note this series shows you how to build out an entire backend for appp I built out an entire

[01:01] separate playlist built similar to this for the front end of an app now what's going to happen on this channel so make sure to subscribe here is I'm going to build out an entire playlist that shows you how to combine the front end and the back end into one real software application that I'm going to sell and show you everything I'm going to be completely transparent about it that's enough for me say hello to past Corbin you found yourself on a playlist that actually shows you how to build out an app with a real backend when coding in this series I'm going to show you how to code with artificial intelligence as if you've never coded before we'll be using

[01:33] cursor AI paired with Firebase which will be your backend in order for me to do this series correct I'm going to have to break this down into multiple episodes in this video we're going to be setting up a react based app within cursor AI we're going to be connecting it to GitHub we're going to be connecting it to Firebase basically we're getting everything ready for all the backend functions will run therefore in this series let me show you everything you can do with a backend when it comes to app development and specifically using artificial intelligence to help us along the way next episode will be setting a posting a real domain third video will be off

[02:03] authentication a user's ability to log in log out fourth lesson will be fire store this going to allow us to store data for specific users so when they log in they get personalized information fifth lesson would be functions setting up functions within Firebase which then translates to Google Cloud how do you read functions how do you understand functions specifically in this series though I'll show you how to do an API call when it comes to open aai because as we know this is a new market and artificial intelligence integrated sasses are very very popular you're like Corbin how do you know if they're popular I'm currently building out my own software called bump ups.com it's funded by Google so anything you see in

[02:34] this entire series is going to be based off my experience coming over to the next video here what should be storage how do we upload images files PDFs whatever it may be we're going to use the storage function in backends next will be user analytics ability to attach Google analytics within our software application following this will be payment how do we integrate Stripes so we actually get paid and then a really big one which will be advertising how do we attach conversion code in an actual full stack application this right here is extremely powerful this right here is where's going to get you traffic and actually be able to track it for payments which leads us all the way to the end here which won't be a part of

[03:05] this playlist and series we're going to be building out a full stack application of an actual software together and I'm going to go from ground zero to ground conversions and payments of actual users so make sure to stay tuned here for this channel make sure to subscribe and don't worry the introduction for every single one of these videos you see here are not going to be like this I'm not going to walk through every single one again I just want to give you an overarching idea of what's about to happen as in in reality a lot of y'all might be coming from different episodes here like y'all might have just clicked on the fir store episode and be like oh wait I got to watch the first lesson to create my

[03:35] react app so that's the purpose of this lesson so hello I don't know if you're coming from lesson 5 4 3 2 1 launch Houston we have a problem and one last thing before we jump into this video this playlist its purpose is for purely backend development which honestly seems like a very undersaturated Niche within YouTube and content kind of makes sense a lot of people that do content probably aren't actual software engineers no shade but if you want to do a front end development and everything above the board in that manner and how I approach it personally check out this video right

[04:07] here or series let's build a web app with AI that goes over front end this entire series you're about to see right now is not frontend heavy if anything I'm going to give you some pointers here and there for front end like good use cases and how to approach front end but the majority of this series is purely for backend which I already know some of you are like yes Corbin we need this I don't see this anywhere else on YouTube okay okay I got it let me show you I actually buil out a back end for my understanding I should be providing Google Docs in the description down below if I don't then I'll just provide a Chad gbt chat that is lasered in to

[04:37] help you throughout all these lessons we're starting with cursor AI here let's create a react app grab your coffee you already know I got my WWDC Swift thinking shirt it's the Og app development iOS okay let's jump in first we need to do is create a project our goal today is creating a react based app therefore we need to create a directory where we're going to store a code we're going to push this to GitHub we're going to make sure this is in the cloud Etc open up terminal personally I like using terminal like its own little window here just type it in on your computer Windows Mac whatever y'all

[05:07] could use the actual built-in version in the IDE here in cursor AI come down here and hit terminal I just like let me go and zoom in y'all it's a little small I just like personally using it outside of it why do you like doing that Corbin because what you'll see through this entire tutorial and series is that when we run an application with a front end and a back end and you need your own little terminal window we need a whole separate terminal for the front end whole separate terminal for the back end like this will make more sense of why I do this for now though let's create a project mkdir let's give a project a name so this is pretty fundamental don't go with

[05:39] something that you don't like put it that way the project I'll be creating today is going to be called actual backend app sounds good enter now let's go ahead and go into this actual directory here I'm zoom in a little bit more y'all in order to do that we're going to do CD CD and then we're going to go and copy this now this is going to be the first thing in our cheat sheet if you if you follow me during the front end series that I referenced earlier you already know what this is about but if you haven't then let's go and learn together hit enter we are currently in the directory where we're going to be loading our code first major thing copy this command sorry the little apple

[06:09] thing went click paste this command you're going to use this a lot this is important you're going to run commands in this just make a little cheat sheet with me okay this is going to get a little longer as we go with this series let's come back here now we need to actually grab this folder so we say open folder here in cursor AI with open folder here we're going to go to our folder here and hit open kind of makes sense great now that we have a direct that we can basically store a code and we're going to get used to this area very soon here let's go ahead and create our react Bas app the video I'm doing right now is kind of similar to a video I did in the past therefore I'm going to

[06:39] link this resource stock in the description down below why I'm linking this is that some of y'all or most of y'all Or maybe none of y'all I keep getting comments Corbin the mpm command is not working okay okay you need to install node.js how do I do that Corbin go to step two follow this this is how you install node.js and if you want a full in-depth video on that specific part let's go to this original video right here also if you run into issues just talk to Chad gbt ask a questions let's build our react frontend we're going to do the line npx create react app dot if this command doesn't work

[07:10] reference that resource that I provided earlier hit enter let's go make sure you are in with the actual backend app or whatever you named yours make sure you're in the directory as you'll notice files are going to start appearing here while this loads in my goal of this series is at the end product of this actual backend app I'm going to give you all the code for free and the reason I'm doing that is cuz I'm nice now but the reason I'm doing that is because of the fact that you can reference all of this code place it use it put it in Chad gbt chats claw chats whatever it is and actually get more understanding from the

[07:41] code itself if you want to ask further questions about it once we load it in once we created it you'll notice we get all these relevant files here let me walk you through some so you can kind of understand the structuring of a react app you don't have to understand everything don't worry the end goal of this entire series is I'm going to provide all this code for free so you can reference any part you're like how do you do the function again don't worry you're going to have the files okay read me is self-explanatory that is just like what's going on with the project getting nor this is going to be stuff that we don't commit to GitHub for security reasons this will make more sense as

[08:12] you'll see when we set up security with the Firebase and all the relevant API keys that are associated with that project coming over to Source here this is going to be your front end right now we don't have a backend installed because we're using Firebase we just installed the front end which is react in react you're going to render the entire application Within app.js but we're going to build out different components that we're going to input here as I said before if you want a full series on that you got to check out my other stuff this is not a frontend it's not front end it's just backend when we come down here index.js don't worry

[08:42] about to that too much all this other stuff is not too important here coming to the public here index.html is how it shows in your browser so what you'll notice like the little tab the fave icon you know right now the fave icon is going to be react stuff uh if you go to fave icon. Ico we need to change that as well robotext whether or not we want it to be crawled by Google Etc but for now this is sufficient this is what we needed for our react application front end therefore with all that set up let's go ahead and Commit This to GitHub set up our GitHub repo and understand how we

[09:13] can access this and put it in the cloud GitHub is extremely powerful GitHub is extremely good GitHub is life GitHub is love I don't know but the point is that you need to use GitHub this is extremely important in software development as you're going to be able to one have your code in the cloud so if your dog chews your laptop top you don't lose your code do choose your homework let's go ahead and create a repository here and proceed first major thing make sure you even have GitHub installed reference that Google doc I provideed Bel below but it's going to be Brew install git with that command I'm not going to run it I already have it installed with that command install GitHub great once that's

[09:45] installed here we're going to create a new repository I'm going to come up here to repositories I'm going to hit new for the purposes of this tutorial so I don't accidentally let a key run through I'm going to put this at private for now but at the end of this entire series I'm going to switch that to public so you get access to everything for now I'm going do private and just as a side note public obviously means that if you ever do commits with your code anyone in the world can see your code so I think a lot of you probably going to go private anyways repository name I'm going to make my life easy and just name it the exact same thing as the actual project itself I'm going to say actual backend

[10:15] app perfect description is optional so we're not going to do it add REM me file we're not going to do that add get or none none none all good create repository so here we go I'm going to go and reference our Google doc here so you can kind of follow along coming down here what we need to do is do Echo your repo read me it's going to be our first line here we're going to be adding the readme file copy or alternatively just copy it right there paste it in hit enter okay so far so good now the next terminal commands here are going to be this right here what I want you to do is just copy this and put it in like a Notes app because we're going to have to

[10:45] basically paste some relevant variables into here so Cappy I'll go ahead and explain all this but first off we need to get our personal access token and what this is and then why this is relevant for us is this is going to give us the ability to tell GitHub that we actually own this repository and actually have the ability to push commits to it so to do that we need to go to settings here we're going to hit our profile name here we're going to go to settings in settings we're going to scroll down here developer settings in developer settings here we're going to go to personal access token find grain tokens once we're here we're going to say generate new token here we go now

[11:16] back in the day we used to be able to do this with our username and password but you know GI put in some more security measures so we have to do this every single time in order for us to access our private repositories token name I'm going to call it backend token resource owner that'll be you that coffee feel bump expiration time I'm putting 90 days and holy smokes y'all in 90 days is 2025 that's kind of crazy we're going to go and say only select repositories repository here is going to be the actual backend app or whatever yours is called coming down here this is a little Annoying kind of Hope GitHub would be able to fix this

[11:47] not fix it but just basically add a feature essentially we got to open both of these and just say allow access to the max ability so read and write and just you have to do this for everything so go to every single one of these tabs give Max access access it would just be cool if GitHub gave us the ability to like select a button that says select all give Max access we got to click through first one's done now we have to do account permissions same thing perfect now let's go ahead and generate this token first thing you need to understand is that yes in 90 days I'm going to have to redo that entire process not fun in theory I could have

[12:19] made it so the token expired like a year from now but just giving you context next thing make sure to copy this you won't be able to see it for obvious reasons this right here once you leave this page you'll never be able to see it again so copy it use it correctly proceed all right now let me go and explain what's going on here with the other parts github.com your username your username is you guessed it your username so for me it's coffee Feld bump so I'll be pasting coffee Feld bump right there eo. is the repo you just created which is found right here for me it's actual

[12:50] backend app you copy that you paste it right there therefore do that for all of them your username put it there that access token we just got access to that kind of sound weird put it right here and then your username again and your repo again it is preferable you just do this all as one paste so let me go and do that now obviously I can't show you the entire block here because my aess tokens in it but just from the first line you will see coffee fueld bump actual backend G so after some debugging I realized that I actually didn't get full access to that token I gave no

[13:21] access for the content which is very important so I'm going to go and change that to read and write I'm going save again I'mma update again and proceed therefore if you're running into errors and it's it's just like this doesn't really make sense why I'm running into an error I would encourage you to check out the Google Doc Chad gbt or just check the token itself where you may have forgotten to give access to one of these categories I'm going hit update just in case you R into the same situation I did all you have to do is come back to the developer settings in GitHub go to edit see if you're all good on top of that if you want to regenerate your token you can simply hit regenerate

[13:52] token here so I'm going to do that this allows you to actually give the further expiration date so I'll do 90 regenerate token therefore to navigate all this I'm going to make my life easy I'm simply just going to copy these three lines here hit copy make sure we're in the correct directory as I explained earlier paste those lines in hit enter we are going to be noted here for us to and the reason it's giv me an air on like it already exists is because I already set this URL as the origin to do so that is a line get remote at origin for now though this is going to prompt you to ask for the username let's provide it so for me it is Cy F bump it's going to

[14:23] come up here and copy hit enter now for the password you would assume this means like your GitHub password but no this right here we're going to be pasting in our token that we just created it's a little weird in terminal when you hit paste it looks like nothing is there trust me it is so command c contrl c paste it in there now that it's pasted hit enter there we go okay it all works now so if I reload this we're going to see our Branch here we go I want to point out this part can get a little frustrating we're running into errors so use Chad gbt leverage at Google doc proceed for now though we have successfully pushed this repository

[14:55] to get Hub let's just start off by doing a first commit together so you can understand how to take local code like this and a little bit of the infrastructure so to do so we're just going to change our read me here I'm going to command a delete all this and just say new software actually learn backend with that done notice a couple things first thing file itself changes color second thing little Branch down here has a little asteris that means that it is different than what we saw in the GitHub Branch EG the read me looks like this in GitHub but the read me in local looks like this there's a

[15:25] difference therefore asteris let's go and push this we're g to say get ad dot get used to these commands as well this is something you're going to type in a lot get Commit dasm This is going to explain what you just did this could be anything though for me I'm just going to say read me change rotation Mark boom get push origin and this will be the branch name so right now we're in the branch of main therefore we'll do get push origin main this will push us to our GitHub right here if I hit reload boom and then you'll notice is that on top of that we have the nice little

[15:55] Branch right here and then with this Branch change that we just pushed we can actually see what the heck just happened so we deleted all this and also I added this little comment here but deleted all this and then we added that line new software actually learn back end as we continue with this tutorial and this entire Series this will all make more sense as it's going become more natural to you for now this might feel like a lot but don't worry over time this is all easy or relatively easy once we push it is no longer blue over here and on top of that it is no longer an ashx over here we're good let's go and do our last

[16:26] step here where we're going to connect our back in this will be Firebase to put us in good practice here and so you can start understanding gits and how it works when it comes to Branch development we're going to do this we're going to do git well first off let me just show you this command get Branch add these to your cheat sheet if you want to that little cheat sheet we made earlier now in software development what you want to do is that any fundamental or just really any changes you rarely want to work in the main branch I want you to think of the main branch like we don't touch this this isn't PR this is like development this is live therefore when you make changes or do development

[16:56] you're going to do separate branches this ALS is really clean for codee in the sense of like what did I do right here oh this was associated with the new footer Branch where I just created a footer and all the code associated with the footer at least initially was in that Branch early days of development you could just keep pushing a main if it's not actually deployed you don't have to care as much it's always going to be in good practice therefore we're going to do get checkout dasb give it the branch name so for this we'll say Firebase ad because we're adding the Firebase enter so now we're in a new branch called Firebase ad this will make

[17:27] more sense as we keep going here all you need to know is that right now we're good to go you'll notice that it change down here and we are currently in Firebase ad let's jump over to Firebase real quick and what you need to know about Firebase is especially in early development and doing everything you're going to do in today's tutorials and series you're basically going to pay no money as that is going to be part of the spark plan where it is no cost this is just to get you comfortable the platform this gives us the ability to do fire store functions basically everything we would want to do we can do within the spark plan for the most part even if we go to the blaze plan that is pay as you

[17:58] go there is no fix fee and I'm pretty sure Google cloud has like a promotional thing where you sign up you get $300 worth of credits for free let's proceed okay let's go ahead and say create project this is going to be your project name these all can be different but for organization reasons for myself I'm going to name it all the same thing so I'm going to do actual backend app hit continue okay so then we're going to go and enable Google analytics for this project because I'm going to have to show you how to do some really cool stuff with that for the account we'll just say default account for Firebase automatically create a new property create project here we go we are creating an app that will actually have

[18:28] a in I know surprising for YouTube here we go let's hit continue now that we're in our actual app here we're going to go ahead and get started because in today's video we're not doing iOS not like the WWDC we're doing a web app select web app for the web app we're going to give this a nickname and you could probably already guess what I'm going to give it I'm going to have consistency in my naming here so I'm just going to call it actual backend app we're also going to set up Firebase hosting but this won't be in this video this going to be the next video so you want to see that make sure to stay tuned here make sure you leave a like if you feel like you learn something up to this point why cuz it's free Register App for these next steps

[18:59] I'm actually going to skip it because these next steps have to do with hosting therefore all I wanted to show you in today's tutorial is setting up our Firebase backend with a react front end so let me go a and show you how we deploy that front end and then in the next lesson here you're going to learn how to do hosting with it what hosting is is fire base's way of giving you a custom domain and is actually really relevant in the context of the backend is when we do function calls whether that that's through API requests or HTTP cbles and this stuff that'll make more sense we need an actual URL rather than

[19:30] Local Host 3000 let me just show you how to launch this though so we're in Firebase ad and for react apps it's pretty simple make sure in your directory and just do mpm start H enter here this is going to build into local 3000 and we're going to see what's here rendered in a local environment for more context a local environment is you don't have to connect to the internet and it runs locally on your machine this allows you to really mess around so if you really mess up in the code you're not breaking something significantly you're not really like any charged anything like obviously you're getting charged if

[20:01] like there's an AI NPI endpoint here and you're using it in the local but you know what I mean Local Host 3000 is a front-end engineer dream you're able to make instant changes and it get reflected in the code just as an example here if I come down here to save and reload and be like no and then it shows up here idea being that we get instantaneous changes as you'll notice later on in this tutorial or this series you're going to notice that when we have to actually deploy to an actual application either in QA or in prod this

[20:31] would require a little bit more latency because we have to actually push it to a live server comparative to our local machine if none of that made sense don't worry this will make more sense as we keep going with the series for now what you need to know is this is really good for front end development this is really good for instantaneous changes and even good for local backend development as you'll see with the Firebase emulator therefore last little thing here is I'm going to create a decent looking homepage here that we can use on our next tutorial rather than this little spinning logo so that we can just jump into backend logic right away check out

[21:02] that other playlist if you want to see how I do the front end for now let me create a nice looking front end I am back went ahead and cook this up in 15 minutes just a simple landing page here features Tech stack we're using react Google Cloud firebeast GitHub testimonials episodes you should watch that episode get started just a nice little CTA here scrolling all the way up here just actually build backend apps using AI now if you want a full in-depth tutorial of frontend development check out the other videos I'll walk you through some little pointers here and

[21:33] there of how I created this nice little landing page like interactive elements as well real quick run through of how I did this first off app.js this is where're going to be rendering most of the app therefore when to rendering the Lenny page or the homepage in this context I'm going simply import it I'm going to store files or pages that don't require authentication in a folder called unoth for unauthentic privacy policy terms of service sign up sign in pricing page everything of this nature here I went ahead and set up my Js file

[22:04] went ahead and set up my CSS file pointer for CSS file when using a CSS file like this we can set a root Clause here that allows us to change a overarching branding palette color that we have in the front end very fast for example if I want to change the section coloring and how it looks I could go like this let's change it to like orange you will notice that it will change to Orange automatically this is useful in the context of very complex file files or very long files as you will have very very similar UI throughout your application therefore you want to

[22:35] reference it so you don't have to put out the same color like 10 different times for 10 different CSS elements real quick run through of JS so this is going to be where your logic is going to be situated it's going to be within the component scrolling down here the return statement is what we see visually in the front end what I like to do is with assets if you do have assets make a folder CL assets have an images folder have a gif folder or GIF once you do all that though simply import your front end render it so that concludes episode one here we have successfully created our react front end with its connection to Firebase let's jump to lesson two here

[23:06] we're going to be creating hosting with Firebase if you feel like you learned something make sure you leave a like it's completely free I'm going to go ahead and leave it at the end here if it exists might not exist yet and I'll see you in the next video let's connect our web application to a live hosting URL so we no longer see that Local Host 3000 welcome back y'all in this video we're going to be going to part two here number two which will be hosting we're going to be setting up hosting with react so we're going to go ahead and SL app St back what we did in abstack was as a quick overview as we set up in GitHub so we can access this through a git in addition we set up our Firebase which is going to be all of our backend

[23:37] logic and if you just found this video we're doing a ton of stuff here check out this series make sure you don't skip part one as that is where we're at right now therefore let's do part two here let's set up hosting to do so go to Firebase the project we set up in the first video go to Project settings here scroll down this code right here is what it's going to allow us to connect our Firebase to our react application obviously some of it's going to be blurred out because that is sensitive information so two things we're going to do in today's video first thing we're going to create an envv is for high-risk variables you'll see how we connect that the second thing

[24:09] we're going to do is we're going to connect that to our application here so we can actually deploy to a live website link make sure you have terminal open make sure you have it in the correct directory for me it's actual backend app if you don't know what yours is reference to cheat sheet we created in episode one for me it's just CD actual backend app once we here we'll make sure we're in the correct Branch here which we set up earlier which is going to Firebase ad the first line you're going to do is you're going to need to install Firebase so you're going to do npm install Firebase I've already done this simply hit enter there next step we're going to come over here to Source we're going to hit new file firebase.com

[24:58] I'm going to come over here I'm going to hit command L control L we're going to add our current file. EMV we're also going to add firebase.com I key which we notated inmv these two

[25:31] are connected now we're good to go we set up some security measures so far so good come back to terminal before terminal let's make sure we set everything we need to set up in hosting we're going to hit get started you can find this you're going to go to build hosting let's just make sure you have all the fundamental stuff required for everything you're about to see from now EG npm install DG fire tools paste that line in there hit enter I've already done it do the same if you ever run into issues with mpm that means or like basically it's like what's an mpm you need to install no JM which I referenced in the first lesson now that we've done that A good rule of thumb anytime you

[26:02] start a developing day is going to be Firebase login Firebase log out so first I'm going to log out because I am probably logged in this is going to give us the ability to access our project that we created and do a bunch of cool stuff so first off let's log out and going to do Firebase login the relevant email that we're going to be logging into is the email that is associated with that Firebase project hit Y here we go so make sure you have the right email associated with your Firebase project hit continue we're going to hit allow and we're successfully logged in based off my experience in the past what I would suggest you to do is anytime you start a new day Firebase log out

[26:32] Firebase log in so you don't get random errors that you're just like that's impossible I know I did this correct just start your day like that kind of like starting your day with some coffee now let's go ahead and do Firebase in it this is going to allow us to initialize hosting we're actually going to use the same type of logic for everything else we'll do in the back end what you'll notice is that this is where all of our backend functionalities and everything you're going to see this entire series get played out oh yeah and also because I didn't really describe in this video yeah this entire series you're getting full stack backend development if you want front end I have

[27:02] a whole separate playlist for that for now though we're going to go to hosting hit space hit enter use existing project this we're going to go ahead and do actual backend app this is the one that we created together and it looks like it wants us to do a separate command in the beginning so we're going do Firebase init hosting use an existing project we go what do you want to use as your public director we say public configure as a single page app rewrite all urls to index.html I'm going to hit no set up automatic builds and deploys Hub this is not necessarily to hit no file already exists over right we'll hit yes there we

[27:33] go we have successfully initialized hosting now let's just go and confirm that we don't get that little glitch where it is a blank screen and we got that little glitch let's fix it now how do we fix this now we're in a separate Branch here so we could roll back to Main and be like y we messed up or alternatively let's go to GitHub notice how it's the index.html that's throwing this air in GitHub here we can go to the REM me change which is a previous Branch commit we haven't committed this one yet and coming up here I'm going to hit browse file files there going to be all the files found within this commit I'm going to hit public I'm going to go to index.html I'm going to hit command a

[28:03] command C and paste this command save and we're good to go use that as you will this logic is very useful in the context that you don't want to roll black completely to a previous Branch you want to change something very minute that is why GitHub is so powerful and I just fix that air so if you found your luck you learned something make sure leave a like let's keep going here all right perfect so now that we have that set up we need to do one last step here to deploy to hosting so we no longer see that Local Host 3000 no more Local Host 3000 to do so we're going to do Firebase deploy hit enter oh actually we're not

[28:34] going to go to the URL we want to have some good practices here so we want to do two lines going back to the chii here just for good practices we're going to do npm run build this is the front end Firebase deploy this is the back end it's just for good practice run this every single time you want it deployed to an actual live link and paste it again this is not completely necessary but let's just do best practices all right and then we're going to go ahead and gut check this by clicking that link that you saw earlier okay cool hosting URL command C this we got the air again let's fix it anytime you run into errors that are specific to deployment you're

[29:04] going to be looking at adding very relevant classes such as the major app the [Music] firebase.com and this should be good enough here we're going to ask a very simple question I show this so that y'all can do the debugging on your own rather than me just showing you a cookie cutter solution in where everything works because as you know with code everything always doesn't work all right so here we're going to do this use this

[29:35] terminology as you will but we're going to say when I deploy a Firebase hosting I get a blank white screen rather than the rendered app.js hit enter and there we go it's actually very obvious what we needed to do so we're going to do firebase. Json come down here fireb base. Json command a command V command save let's try again we're going to do npm run build we do Firebase deploy enter there we go it works now so we got our actual backend app. web app URL here we got our nice little UI that we created in the first tutorial here we're going to go now if you're like Corbin I

[30:05] don't like that domain web app is kind of crazy that's kind of C if you release a software with the web app domain let me know that's kind of crazy so if you want a custom domain I show you how to do that within the school Community here it's in the description down below obviously if you don't care about a custom domain you don't have to do it it's only 20 bucks they'll probably go up over time if you're interested check it out all right sweet so now that we've done that though so let's go and Commit This we're going to add this to our git because we've successfully created a nice little Branch here for Firebase ad so get ad commit uh we're going to say

[30:37] hosting good and then we'll say get push origin and it's going to be the branch name if you forgot your branch name you can just kind of scroll up here and you'll see it's right here plus you can find it at the bottom left here there we go so what this will do is we are then going to have in our code here come back over here we're going to have a PR whole request what this is is like you want to add this to main are you sure so for you to be sure just sayit compare and pull request and then what you'll notice is that we can add more information relevant to what we did here

[31:08] so if you ever need to track backwards but if everything looks good and just for context you can kind of see what's changed like what's going on here this is all the stuff we added from the previous video or actually this branch in the other video If it all looks good and you're going to go or say create pull request better UI if you hit file changed here and then you can kind of scroll through the directory that you have here you're like all right this looks good this looks good typically when you work in a team you'll have reviewers over here so I might do some videos on that later on you can check me out here for now though because it's just me myself and I gz we're going to

[31:38] say merage pull request confirm merge once we've done that because of the fact that we don't need this Branch anymore we can just delete it and of course we can restore it in the future if we get scared and we're like yo I need that Branch back once we do that though this is going to merge to main which means that we can go ahead and go back to Maine and update our local code or just the code we have here so we go get branch and right now we're in Firebase ad we're going to do get checkout main what you'll notice is that when you delete a branch in GitHub it doesn't delete locally in your machine which actually can be kind kind of cool I like

[32:09] some old the old version of bump ups.com like the old software branches I still keep locally so I can kind of run in the emulator if I want to see them for now though we're going to hit git pull origin main this is going to pull all that relevant code that we just did there we go you'll notice is that we have the little pluses the little minuses Etc and for now because of the fact that we're going to go and if I click cursor here we're updated here we can go ahead and do get branch and we're going to do Dash capital D and this is going to delete it locally from our system get Branch DD Branch name boom

[32:42] we've deleted that Branch we're good to go we're in get main we're ready for the next video next video we're going to do here together is going to be off and our ability to have a user sign in sign out this is going to require a little bit of backend logic with the function of creation of the user with some database as well to be honest with you so this is going to be a more complex tutorial when it comes to the back in but don't worry I'll make it easy we'll do it with AI we'll be good make sure leave a like it's completely free and I'll see you in the next video no more hosting we're done with hosting bye-bye let's go ahead and get going here in this video I'm going to show you how to do user authentication for any type of web app

[33:13] that you create SL software let's jump in we're going to go ahead and use this user interface that we did in lesson one here I'm going to have it so in the user I'm going to have to say sign up instead of Watch series the user clicks this we're going to go to a sign up page within that sign up page we're going to have the ability for the user to sign up with email or alternatively Google to do this we're going to use cursor AI then we'll be using Firebase as our backend here for authentication welcome back or alternatively welcome still if you're binge watching this we're going to be setting up off today which is actually highly requested I've seen a ton of comments about this no good tutorials

[33:44] this is going to be a good tutorial if you want to know how to set up everything that you see up to this point which was hosting and appstack check out the other episodes in this series for now though we're going to set up off let's Jump Right In all right let's come to our terminal here if you go back to your cheat sheet remember it's going to be CD whatever your cheat sheet directory was remember for any command do the CD and then your actual directory name and what we're going to do is this we're going to create a whole separate Branch to this directory get checkout DB the purpose of this branch is going to be authentication so we'll call this off

[34:14] get branch and we're going to do get checkout uh off everything we add From Here and Now is going to be code that is relevant to authentication and what is amazing about this entire series is that by the end of it I'm going to have this as completely free all the code you'll see you'll be able to use and past into your own project sound good how do we do o Corbin I don't know I'm joking we're going to do build here and we're going to hit authentication I'm going to go and drag this up and just as a side note real quick for hosting here once you deploy to hosting like you saw in the previous lesson you'll see your commits

[34:45] here when it comes to hosting there'll be previous releases one very valuable thing that you should know about hosting is that if you push to hosting and you screw up tremendously don't worry you go to your previous commit that's maybe more stable hit these three ellipses hit roll back and it's like within 3 seconds 4 seconds it'll roll back to this version something to keep in mind okay let's go to authentication to do authentication this is going to require two major things we're going to do a signup page SL signin page and then we're going to build out a actual function for it to run so the user's

[35:15] information gets pushed and then on top of that we're going to take all that relevant information of that user and save it to our fir store database so we can start doing queries that are specific to that user don't worry AI will help us out and I'll be here let's do it I just realized like everything I just sounded right there sounded super nerdy am I a nerd okay let's get going get started once we're here we're going to have the ability to choose a bunch of different options for this tutorial you'll be able to understand how to do email and Google but basically the skills you learn now you're going to be able to easily apply to the other one

[35:47] such as GitHub or Facebook or I don't know why you would do Facebook who if you plan on having Facebook as a login for your application let me know what you're building all right we're going to go ahead and start with Google actually let's start of email for email we're going to hit enable here and we're going to do enable here the reason we're doing this is that we are going to create an authentication process that is a password relist signin EG when the user signs up for our account they only provide their email and then they log in by getting an email from us that's like the login link why do we do this Corbin

[36:17] because of the fact that at least how Firebase off currently Works they don't really have good structuring and security around spam emails EG someone goes to your site puts in like 10 different emails and 10 different passwords for those emails those could all be fake accounts using this method though where it's sh an email link the account won't actually be created until that link is pressed therefore we circumnavigate spam sound good orless we're cooking with Spam hot Skillet want to crispy get some tobasco sauce black coffee

[36:47] save I have too much fun of this y'all add new provider we're going to do Google why are we doing Google Corbin because it's Google let's go and hit enable here I might blur that out but for now we're going to use our support email here contact at web cafe.com we're actually going to change this public facing name to uh backend Das is real cuz it's real it exist I know there's not a lot of content around it but it is real I'm going to go ahead and save save once we do that we have our two signin processes obviously if you want to add more providers add more providers here let's go ahead and do the next step Next Step here go to Google Cloud this is

[37:19] going to be part of where we do our function logic from now just go to Google Cloud you can get free credits $300 from now I'm going to say no select your project select your organization for me is going to be actual backend app now from here it wants you to set up a foundation which you can do and maybe I'll do a video on that that's not really relevant for what I need to do right now though going hit this navigation menu I'm going to go to API and services so far so good we have a couple different options here but what you'll notice is we're need to go to credentials and what you'll notice in credentials is that we have a couple of things that we just created here together ah I might have to blur this

[37:49] out so if I do I do only reason I say that is cuz it requires editing I don't like editing and no just cuz I say I don't like editing videos please don't spam my email saying you would edit my videos okay okay so for all this information though save this in a separate tab here once you're here let's go and proceed to The Next Step as a side note as well this is actually a very relevant page when dealing with external apis through Google's ecosystem EG trying to get Google Calendar API if you plan on using that in the software extremely relevant I mean obviously the API Keys is probably where you'll create

[38:21] it I may do some other videos on this in the future keep that in mind for that all set up here though we need to actually initialize our function go to build we're going do functions okay perfect now in order for us to do functions we need to upgrade to blaze but don't worry this is pay as you go you got all those credits for $300 this is all free upgrade project okay so it looks like I have to actually put this information in so let me do that I backed up a step there because it wasn't in the correct organization right now my organization weca ai.com just do put main building continue caffy fuel C

[38:52] details I'm going to put this information in now if all that connected here let's go ahead and actually enable that $300 cuz I don't have to pay start free oh okay well make sure that you do that before you put your billing in coming back over to Firebase I'm going to hit reload now that we've added our billing account here we're going to choose main billing budget amount we'll just say 50 this is basically giving me a notification of like hey something's happening something's not good you're about to go over your billing budget hit continue then we're going to hit link Cloud billing account and we have officially gone to the blaze plan we're blazing same situation as hosting make

[39:24] sure you install Firebase tools which you already did if you watched the previous episode and then we're going to deploy it specifically we're going to be deploying functions today all right get branch make sure we're in the right Branch here okay everything looks good Firebase in it scroll down here we're going to choose functions enter now what's really cool in this series is that I'm going to show you how to do this in Python and in JavaScript for this specific function though which is going to be an encorate off this is specific to authentication right now the documentation around a python function in this context is no good so just for this function in our application we're

[39:54] going to be doing JavaScript but this also gives you the ability to understand how it works in Java Java Java Java hit enter do you want to use es lint to catch probable bugs and enforce Styles no or maybe for yall say yes for me I don't like that you want to install the dependencies yes the reason I say for the ESN lint thing is like sometimes you get really dumb errors that aren't actually errors it's like too strict but that might be good you can use AI to help you out if you need help there we're installing you'll notice that this is going to show up right above here in

[40:24] functions amazing amazing amazing we have officially installed functions in our nodejs project let's go ahead and proceed here and because of the fact that we will only be using one function in the context of nodejs we'll proceed in the index.js to create this function now that we've installed that let's go ahead and get the front end going here provide this code and then the last step we'll do here is create the backend function that's going to initialize everything and actually before we do that let's go to initialize fir store as well so we can really put a bow on this and have it so when a new user is created we have a global dock of users

[40:56] then a specific uid unique identifier and then the relevant docs associated with that if that didn't make sense don't worry we'll jump into it therefore coming over to build here we're going to go ahead and do fir store database let's create a database we're going to do database ID as default choose your location uh if you're in the USA go with N5 this is going to be basically the best performance hit next we're going to go aad and start in test mode here but in theory when we launch to prod we'll go to production mode and we'll have more security around the rules certain files certain paths certain ways basically one user's information shouldn't be able to access another

[41:27] users information for now we're going to hit create perfect with this created here let's begin coming back over to cursor AI let's create a new file this file is going to be Google o. JS in Google A.J if we come back to our Google Cloud here or actually we might not need to do that go to Project we go authentication here actually what I was about to show you you can't do so right now the secret you need to actually copy through that Google Cloud that I showed you earlier so go to your Google Cloud this will make more sense we're going to go to credentials here and then in credentials this was autom automatically created from earlier here's the two

[41:59] variables we need to copy over this will be blurred out but we're going to be copying over the client ID and the client secret so this right here and this right here to make your lives easy let's go ahead and use cursor AI again cursor we want to just import our Google Cloud Cent ID and Google Cloud client secret in the file paste over this is going to be blurred out but all we need to do now y'all is we're going to hit command L again and we're going to Simply create the EnV version of this we're going to add the file of Firebase ORV EnV therefore we're going to say for the

[42:29] client ID in secret let's import from EnV enter perfect go ahead and paste that code over to your EnV and then you can reference it here so so far so good give a little bit more context of the client ID and the client secret this is the way we authenticate the authentication process in the sense of like do you actually own the app you actually own the Google Cloud processing like are you the owner this is how we access it this is how we tell Google that hey this is the correct app we have access we're going to go therefore coming back over here we're going to set our o or at least import our o and

[42:59] everything required for o and L include Google o as well okay we have Firebase authentication started we need to import Firebase off and Export we are looking to use email P password L signin and Google sign in hit enter if you couldn't tell this entire series is on the free cursor AI platform this is all free this code isn't bad but it's trying to do the actual logic of what a signin and sign out is and stuff like that we just want to export it so we're going to do this logic elsewhere if I'm going to say don't want to do the actual logic we just need to Import and Export all this so I can reference in a separate file

[43:31] enter there we go so with this code here we're going to just copy this line and then paste this line right here so what we're doing here is we first off let me get rid of all these comments we don't need comments All right so we are getting the ability to get o Google o provider sign in with link to email nice this is coming from the O of Firebase coming down here we see that we are doing it here so o is get off of app Google provider is new Google provider and then we're exporting this so we can use this in alternative logic as you'll see here pretty soon there we go so with all this information here let's go and

[44:02] just change something about my front end so it say sign in we do a separate page and we're going to have to do some react navigation which will make more sense here but for now we are good on the off and the Imports all right to do so let me come back over here I'm going to say sign up there we go give me a couple seconds I'll come back in 5 10 minutes I'm going to go ahead and just create a real quick react front end for the like the sign up UI you feel like Corbin I want to see that I want to see how you do the front end watch my other playlist it's like 3 hours and 11 minutes long that's for the front end this is for the back end so I've gone ahead and created

[44:34] our signin UI so simply click a button here and we're going to go either put your email there or sign in with Google and what you'll notice is that it actually works right now at least in the emulator side EG in the next couple minutes I'm going to show you how to launch the Firebase emulator which is a mock backend Local Host 4000 and this allows us to see a bunch of different stuff when it comes to later logic we'll be doing together what you'll notice is that at new account autog generate information sign in with Google and we're at the dashboard let's get going as I mentioned before all this is going

[45:04] to be available on GitHub for you to copy and paste as of now though I'm going to walk you through the chats that I had of cursor AI so you can get a fundamental understanding of how this all works and how it all connects first thing you want to do before we even jump into that is make sure that EnV I accidentally created it within the source file here go ahead and drag it out so it is on the surface level of this entire project repository I was running into issues where none of this data was being read I was like what's going on here realized that I didn't create it here so make sure you do that you will know whether it's in your source file or not if you close your

[45:35] source file and you see it there second thing I realized is that that logic I referenced earlier in this video which was setting up the functions and Fir store to actually save a doc associated with each user I'm actually going to do that in the next lesson because I got to the point where we have done full blown authentication therefore if you want to see that logic check out the next lesson where I'm going to show you how to create a doc when a user signs up and that's going to pair with the function logic that will set up with the node.js for now though let's just do authentication first off the files we created we already have firebase.com

[46:13] to good software development you'll make a sign up and a sign-in page those will be directed to two different URLs sign up sign in obviously what you need to know though is functionally when it comes to code whether the user signs up with that Google button or signs in with that Google button it's the same code same thing with the email password relist sign in therefore purely just to show you how to do off I'm going to do this all as one page here but you can easily do separate coming into o just to show you what it will look like and what does the O experience feel like I just real quickly made a dashboard. JS and.

[46:44] CSS to confirm that we are in the off version and all it says right now is welcome to dashboard don't worry I'm going to show you all the chats of how we got to this point so don't feel overwhelmed I'm just trying to give you like a overview of this like an umbrella when it comes to authentication the major thing you need to understand is how we render the application therefore when we render the app which incurs here we need to have paths that are available for unoff users such as sign up and dashboard or not dashboard homepage and then we need to have off paths that are

[47:14] only available for users that are currently logged in such as SL dashboard which what you identify is a private route first thing you may be asking is Corbin how do we know whether a user is actually or not that's why we're going to be creating a separate file here called o. context or o context. JS the only purpose this file serves is to confirm whether or not the user is logged in we then use this context import into our app.js to then do this logic what you'll notice is that the

[47:44] entire thing is wrapped in off provider which comes from our off context basically the purpose of off context is like are you logged in no then you can't access dashboard Etc okay with that all out of the way before we jump into the code you need to install two things the first line make sure you install Firebase so no issues incur there npm install Firebase the second one is going to be the browser router notice that comes from react router Dom therefore we need to do npm install react router Dom a lot of the times when you get air codes you'll be able to ask cursor AI

[48:16] like what's going on and it will tell you this anyways but keep in mind anything you import you need to make sure you install npm like another example of this is link which is still from the same dependency which is react reron but keep this in mind as for example for a lot of the UI I've done on the front end I've installed font awesome if you don't know what that is really cool way to get free icons for your software for now though kind of understand what you need to install to do the logic you're about to see also for anyone wondering what link even means and how that's used what that does is that if it's like I'm on the homepage I want to go to SL sign up I click this

[48:46] notice it's not a Reload rather it's just a redirect EG like there is no loading it just goes directly to it it's very fast component loading all right that's a brief overview I know this sounds confusing so let let's walk through this step by step and how you can do it in Chris AI hit command L control L I'm going to explain the best I can I'm going to walk you through step-by-step my thought process when creating this let's go and proceed first prompt I did now what you need to understand is the files to add to these chats so you get the best answers add fire base. Json add your homepage. Js firebase.com Js sign up. JS you might be

[49:19] like Corbin I don't have an o context. gs to add well guess what go and create one then and yeah just to create one new file type in a namejs you successfully created a JS file the first piece of logic I wanted just to touch up on real quick is to make it so that the CTA buttons actually worked so for this example this was like the let's get started I want to make sure it worked because before it just like you hit sign up and it went to a different part of the page to do so I wanted to use Link because I'm well aware of what link means in this context okay we needed so that the Uno people

[49:50] also when I say un off that means they're not logged in can go to sign up and sign in page also make it so the but in does the link to sign up B I click it it has to sign up in the URL make it so the navigation exists and also set up the relevant port code for the emulator in fireb base. Json you might be like what the heck did you just say Corbin basically for us to run the emulator like you saw earlier this is the sign up we need to actually reference the ports this is going to allow us to run this back in locally on our machine and what you'll notice is that we'll get our emulators here we'll

[50:20] get her off Port 9099 functions Port 5001 don't worry we're in the same exact logic here reference the Firebase Json and then reference that you want to basically have an emulator for o functions fir store hosting Pub sub Etc you'll see this in the UI when we run the emulator later on next we need to have it so when we run our off it actually shows an emulation like you saw earlier when I hit sign up with Google and we're able to put in our information therefore in our

[50:51] firebase.com emulator it gives us a line right here so typically the way it seems like cursor AI gives its outputs is it doesn't give the entire file you can obviously request the entire file here but what you will typically do in this context up to this point is you'll simply like copy this import line because this all for off and then paste it here and then for this line right here we need it so that when we're in the DV it realizes that we're in the development and we're connecting to Local Host 9099 connect off emulator this gives us the ability to make fake email accounts

[51:23] and a fake backend which will make more sense later on also one major fundamental thing for you to understand is that when you import Here sign in link to email you export there so we can use that throughout our other logic once we have all that information connected in the sense of being able to have the correct ports associated with our emulator Corbin why is it 9099 why is it Local Host 3000 these are just ports Associated for the local machine what you need to understand is this is going to be the meta promp this is a prompt you want to use for initially creating the relevant code for authentication so open up a new cursor AI chat here we're going to do app.js firebase.com

[51:56] off. context the one you created it it could be empty it's all good sign up. JS how we're signing up you know if you really don't know what to add it's better to add more than less but the idea here is add any relevant piece of information that has to do with off package.json just everything right from here put in this command now of course you can look at my repository for free in the description down below to check out how I did my code if you want to copy and paste it so here's how we do it and just for reference when you write out these prompts it doesn't have to be perfect English or perfect grammar at all you'll notice that that's kind of

[52:27] jumbled but the AI gets it create new files sign up. CSS sign up. JS make a simple signin page for now add the functionality of email password L sign in and Google sign in with redirect have it so I can enter an email and hit next and hit the button to sign up for Google import here. app.js therefore we need to create a new file. off context. JS so we can tell navigation wise whether we are oth or not and let's go to dashboard therefore dashboard. JS dashboard. CSS if logged in that might sound jumbled but the idea here is simple Within I'm going hit enter here while that is

[52:58] generating let me explain we need to set up this private route and what we know is that with off context which the AI is smart enough to understand what that even means we know that we can tell whether a user is offed or not or logged in or not so what this will start doing and the way you know whether your code is structured correctly is that you should have three fundamental Parts first one should be private route it's going to tell us whether or not the component dashboard. JS is off or not logged in or not once we do that make sure you import all the relevant areas of your applic the homepage the sign up page the

[53:29] dashboard those are being imported from here right so we got the homepage we got the signin page and then the O we have the dashboard naming wise notice how it says export default dashboard which means that here is dashboard and then the file path is slof slof which is the folder name SL dashboard which is the file name so from that code output you see here just copy paste copy paste copy paste which get gets us to the point that we see here so right now we have the ability to render the SL dashboard

[54:02] only if we're logged in so let's walk through this little sandwich here auth provider router routes what are routes routes are going to be the slash on the actual domain slash represents just the URL itself so it's apples.com it be apples.com apples.com signup that's going to be the component of the signup page and then obviously within the private route this is what we can see once a user is off so let's go ahead and launch our emulator here to ensure that you can launch an emulator you're going to come down to firebase.com

[54:56] oh it needs an S once we do that notice how the current project ID we're using is the correct one actual backend app if it's not the correct one simply copy the one you want to do and do Firebase use the application name actual backend app whatever your name is the reason I bring this up is that sometimes you'll run into errors that make no sense entirely there is a possibility you need to rerun that command line there for Firebase to actually realize that you're using the correct app Etc just little glitches here and there so do that before you do Firebase emulator start which is this

[55:28] command line right here you will run this every single time you want to laun your pseudo backend click once you successfully run you'll get this kind of end message here and this is where we can see all the backend logs for a local environment in order for us to see this simply go to Local Host 4000 you go to overview here you'll see every single one that's on and how do you turn one on as you saw earlier we are referencing these port numbers found here that we showed in the Firebase Json so coming over to the authentication tab right now no one's off no one signed in yet so let's walk through this code together first off you'll notice running in

[55:59] emulator mode that means that we are currently in the correct area let's get started let me walk you through this code here for sign in as I said earlier the logic for signing in or signing up with an email whether it's Google or email password signless passwordless if I can speak same exact logic so first thing you'll notice is that we're importing all of this information here from firebeast this is where we set up all our logic here for giving us the ability to actually do something so once we can actually do something coming back over to sign up here we're going to import it because then we're going to use it so scrolling down here let's

[56:31] understand what is going on so obviously in a return statement we have the enter email which you'll see in the UI here and then we have the sign in of Google so once they enter in the email here if they choose to go this route they're going to do the button of sign in with email and then obviously coming down here we have the sign in of Google which is going to do the handle Google sign in so let's do Google first Google is easier command F coming up here handle Google signin now what's great with AI that you don't have to understand everything to a you just have to understand logically what's incurring here so what you'll notice is that we

[57:02] are referencing off that we imported up here in our Firebase and we're referencing Google provider which we imported here as well now you have two ways of signing up with Google or signing in with Google it's either sign in with redirect or sign in with popup now what I've noticed with code outputs is that for some reason it likes putting in sign in sign in with popup which obviously means that if I click sign in with Google it's going to give me a popup I'd encourage against this is because some browsers you have security measures where pop-ups are blocked so I would opt for sign in with redirect which means that when I click sign in

[57:32] like this we're redirected to this page so watch this add new account Auto generate information sign in with Google we're in the dashboard we're good to go and then comeing over here if I reload this page we will see it right here we have successfully offed using Google you'll see the provider here as well now let's say we want to do the same thing with email all we need to do is obviously send link to email if you come up here we are doing all the email logic here when doing password list sign in that is why there is no password here so we'll just do apples gmail.com and as I said before let's say someone put a BS

[58:03] email there if you do password you enable password it will go through the system and you will get dead records you don't want that so do password this sign up therefore if a user does this and the email is not real they're not going to be able to click that link therefore they're not going to be able to actually create an account eg it doesn't exist yet there is no apples gmail.com because it's passwordless sign in therefore once once the user does have an account though in our emulator here what you'll notice is that we can go ahead and test it so this would be the email sent in

[58:34] the users email whatever they put in there would be an email sent with the link when testing it in Firebase emulator we actually just copy it from our terminal so copy the link paste it up there hit enter and we're logged in apples gmail.com has been identified as a real email now that that is all done I encourage you to check out my frontend playlist if none of this like react components kind of stuff made sense I go way more in depth about importing pages and understanding what every component even means but as a brief overview of what we covered right now here's the tldr app.js is where everything in your application will be rendered in app.js

[59:06] we have two options First Option what will show users that are not logged in second option what will show users that are logged in to identify whether or not a user is logged in we use off context. JS then we take off context. JS and we import it to app.js here is where we set up the logic of private route with the logic of private route we're able to basically put in relevant components that will only show and display to users that are/ dashboard and then we'll do other Pages as well but for now that is all we have that's the structuring of an

[59:38] O application coming over to Firebase .g anything we need for o we imported Firebase .js and we export out of firebase.com sign up sign in but all you need to know fundamentally is the actual logic to sign in and sign up are the same what do you mean by that Corbin I mean that the sign in with redirect that's used for a sign in or a sign up the codee's smart

**[01:00:08]** enough to know whether it's a first time user a or a second time user or a login user and then finally the dashboard. JS was purely just to show you an off logged in view I know that's probably a lot but now you know the fundamental logic associated with o use cursor AI to help you out actually one last thing extremely important fundamentally important don't forget about that Firebase Json and actually putting in the ports here if you don't do that nothing's going to work that covers authentication and in the next video here I'm going to go over authentication and specifically when a user is created we're going to be able to create a **[01:00:38]** specific uid so we can associate all further data with that user in any context sound good I'll see you the next video Welcome Back to the series where I'm showing you how to actually build out backends for your applications if you're just joining me now we've already set up our application we already set up hosting for application and we've gone as far far as setting up authentication therefore bye-bye off in today's video we're going over fire store and how to set that up in our backend now if you want to watch the first three lessons here check them in the description down below it'll be in a playlist called like **[01:01:09]** let's set up a back end with AI let's jump in here and actually build out a fire store or database for application up to this point in this series we have a react application that connects to a live website link and we have the ability for authentication EG let sign up a new user I'm signing in through Google add new account Auto generate information sign of Google go to a dashboard off context we've gone over this we've done this on to the next therefore before I show you how to do the next step here let me go and just draw on the Whiteboard what we're about to do here so you can conceptually understand what's about to occur so **[01:01:40]** right now let's just say we got Bob here and Bob's a new user or not a new user but Bob just arrived to the site we have no information on Bob other than Bob is Bob once Bob goes to sign in page and either signs up with email or Google this is where we come into play and what we're about to set up today so we got to do two things first thing we got to do is we got to set up a function which sole purpose will be an oncreate EG this function will only fire if Bob hello Bob how you doing today if Bob is a like **[01:02:11]** this is the first time they've ever signed up if Bob logs in again this function won't fire this is a very unique function to authentication when it comes to Firebase it'll make more sense as we get going here we'll have a function that fires off and within this function this function will go ahead and set docs within our database associated with Bob so we're going to have a global dock here this is going to be called users so I'll put you for now every user of our platform is going to be associated with users EG we come in here it's going to be this big **[01:02:42]** collection you'll see here with users here then how do we identify which user is which user so the way we're going to identify who is Bob and how we know who Bob is is what authentication does for us what's super cool about authentication which this is in the prod version so let me go ahead or QA whatever you want to call it let me go ah and show you in the emulator Local Host 4000 hit enter we set this up in the previous tutorial here if you go to authentication what you'll notice is that each user that signs up it'ss a user uid this is a unique identification number this is extremely important this **[01:03:14]** is the number or the string that's going to allow us to identify for example this user grass Olive everything associated with grass Olive subscriptions personal preferences authent like everything y'all so this uid is extremely important therefore when we set up our database we're going to reference that coming back over to our whiteboard here we got users which is a generic text of users users will then lead into the thing I just showed you which is going to be their uid the uid is going to be able to **[01:03:44]** basically identify this is Bob so user user Bob has this uid then from here this is where we set up docs so this could be a doc for settings a doc for preferences a doc for Value points that we provide them a doc for ETC what you'll also notice is that this uid is going to come very fundamental in the sense of further tutorials we do hear when it comes to uh functions storage uh basically everything else right this is **[01:04:15]** this is how we identify who Bob is so let's go ahead and find out who Bob is and begin this tutorial all right so coming back over here we got everything set up here but you notice we're still in the off Branch let me jump back over here y'all and let's begin here and before we jump a little bit further here if anything comes up during this tutorial where you're just like what the heck's going on I don't understand one side thing obviously is that this entire repository at the end of this tutorial will be available in the description down below for free you can copy and paste my code alternatively you could use a software like bump ups that allows **[01:04:46]** you to input a video like this and actually talk to it and then get the exact terminal commands or different questions you may have during the process and tutorial that you see here today let's go jump in first off we got to get out of this Branch because we are done with o so I'm going to do get Branch just to confirm we're in O here let's zoom in a little bit so y'all don't have to zoom in and then we're going to do get ad because it looks like there's a little bit of stuff going on here because there's a little asteris to the left here get ad get commit DM we'll just say off done for now and then get **[01:05:16]** push origin and then we will push origin to this specific branch which is just off enter oh no fantastic this is why I do the fact that I have multiple projects associated with a bunch of different GS bunch of different access let me figure this out I'm going ahead and fix that and just in case you run into that issue cuz this can be very frustrating you're going to basically put in this line right here and right where it says you know your token you'll put your token and to find that go over to GitHub and obviously make sure that the directory is the correct one so **[01:05:46]** mine's actual backend git yours would be whatever yours is so then you come over to your settings here and you go over developer settings and then come to personal access tokens find grain tokens go to the specific to token associated with project we set this up in earlier tutorials click it and then here just hit regenerate token copy it pasted it right there and then that should give you access back to your directory I just know I lost access because just trust me I have a lot of different projects in a lot of different areas and as I referenced before use BUMP ups that can help you out with the directions there as well okay let's actually get going here so now that we have finished that we pushed off here let's go ahead and **[01:06:18]** merge our Branch here and then create a new Branch for fir store in this video we're going to be doing a lot when it comes to fir store but also functions so this is kind of like a mesh one in theory the next video is going to be much more focused and dedicated towards functions and specifically functions that we can set up using an AI provider like open AI I'm basically going to show you how to actually call that endpoint of like chat completion or get an AI output within your software for now though we got to make sure that we have a unique identifier for Bob compare and pull request off done sounds good create pull request I might have to make a **[01:06:49]** whole video of just like how to navigate through GitHub to make all this look a little bit more simple for now though we're good merge Pro request confirm mer merge this is basically taking the code here and putting it to our main and the reason we do this is because if we really really mess up we want to make sure that we're not messing with the main branch because the main branch in software development is kind of like the don't touch this Branch this Branch breaks everything breaks so now we've merged that we can go ahead and delete the off Branch so we're going to do get Branch just to confirm that we're probably not in main there we go get checkout Main and then we're going to go **[01:07:20]** ahead and do git pull origin this is going to grab the code from the cloud or GitHub have it set to our main branch here there we go so what you'll notice that we're main now I'm going to go ahead and do get checkout or get Branch DD capital D off and over time y'all when you start developing more like you might be like yo how the heck is Corbin typing all this stuff out so fast off the top of his head it just becomes natural over time because you just remember commands you reference I know when I first started development I was like what the heck what what's going on **[01:07:51]** in terminal don't worry it becomes natural for now though we're going to set a new Branch here this is going to be for we're going to call this branch which is get check out B we'll say uh new user data that's actually a pretty good name okay we're get uh weing new user data always make sure you have the most recent main branch so you don't run into merge conflicts what a merge conflict is is that basically the branch code comparative to the main code there's a major issue we don't like those so don't do that for now though let's go Ahad and set this up yes I'm wearing a new shirt it's a new day **[01:08:22]** basically what just happened right there is right where that just cut off I got a slack message from my team and the software I'm currently developing we're getting extreme momentum right now we just pushed out a new update bump UPS that's beyond the point before we even get further into this video I want to kind of give a pretext of what we're about to do right now two major things I want you to know first major thing the topics I'm about to discuss right now are pretty complex so if you don't understand them right off the bat and you feel a little overwhelmed that's natural there's a lot **[01:08:52]** of new information and we're we're straight up developing software y'all this isn't like we're this isn't like we're creating a pot okay like a little Pottery pot we're creating software so if any of these Concepts seem overwhelming or just like what's going on that's natural the second thing here if you run into errors after this video and you hit walls it is extremely I've been developing since I was 12 y'all you know what the most common thing for developers is that like is very common is when you get an error and you will spend hours trying to solve that error **[01:09:25]** that's natural that's common that isn't like maybe coding isn't for me no no no that is natural you spending hours trying to solve an error and then finally solving it that's how it works and what's great is that once you solve that error if it comes up again you know how to solve it in the future and last little thing on that topic there's a little weird thing in software and coding it must be something to do with the brain who knows you get an air you spend hours on it you still don't solve it you sleep on it and then in the next morning you'll be able to solve it in like 10 20 minutes that's a real thing **[01:09:55]** sometimes you just got to step away okay that's all out of the way let me walk you through this cuz this is going to be a lot let's jump it so the name of the game right now is that in our dashboard I went ahead to set up some like easy front end code and what this is is basically we're going to be loading in two variables from the back end just to show you how it works with fir store we're going to be loading in a profile image and a user email I'm going to show you how to set up static profile images EG like stock ones um if you ever signed up for a SAS platform like Adobe or something like that sometimes you'll see like a little artwork for your profile I'll show show you how to do that it's **[01:10:26]** going to show you how to leverage fire store in the front end as well and then we're going to be setting up the function this is going to be the big one right here this is going to be the one that's like if you run into errors it's natural trust me this is a lot let's do it to best showcase how we're approaching this I'm going to show you a complete file and then we're going to do an entire file together here we go okay first major thing you need to know right now when it comes to Google Cloud functions there is V1 and V2 typically we want to opt for v2 as it is better for software development EG as you see here with the slv2 and specifically this **[01:10:57]** function here which is an HTTP request basically we're sending data to it and then we'll receive data from it that's fine that's all good there are certain functions that you can only run in version one of Google cloud and one of these functions is going to be our oncreate one which is functions off. user. oncreate this is not negotiable this has to be a V1 and we have to use a very certain version of Firebase why Corbin because it doesn't work in V2 this function is a gen one function only if you don't know what gen one gen two **[01:11:28]** is just put it this way everything past this is going to be gen two we're going to be making a whole separate folder that's going to be python based all Gen 2 we want to go that way but we are obligated to use first gen when it comes to just the function that fires only once when a user signs up there is a ton of implications behind what I just said there so let me just walk you through some steps here I'm going to walk you through some commands that you may need to run or may not need to run just depends I know that sounded a little weird weird but trust me when you start doing this process you're going to come back to this part of the video and be **[01:11:59]** like okay maybe I should run that one maybe I shouldn't Etc that is why I preference a lot of this because don't worry we all run into errors first major thing you need to know when we do a first gen function like this we need to ensure that we're using the correct version of Firebase in our package.json found in our function folder EG your dependencies here which is Firebase admin and Firebase functions we'll zoom in needs to be 5 . 1.1 for firebed functions but Corbin this isn't the most upto-date version I want to use 6.0 I **[01:12:31]** want to use 7.0 or whenever you're watching this video maybe 10.0 or maybe by then they actually fix this issue for second gen but beyond that no no no trust me use that one if you don't trust me then go ahead update Firebase functions to the most recent version and then tell me how it goes that's the first major one obviously When approaching this explain this to Chad gbt CLA cursor AI that is what needs to happen so you get the right commands but here is the command you need to use here first off just manually put in 5.1.1 I want you to do CD function this is going to put us in this function folder here I **[01:13:02]** then want you to put the command npm uninstall Firebase functions and then we're going to go ahead and save the new version we're going to do npm and then ignore the 5.01 to make that 5.1.1 where you do npm install Firebase functions that save to verify you did it correctly you're going to do this next command npm list list typically is just like what's the data showing Firebase functions there we go you should see something like that you see that you're on the right track so now that we're on the right track here we're using the right version of Firebase functions and you **[01:13:33]** just learned something new today using the most up-to-date dependency on every single dependency you install when I say dependency this is like external stuff you using your application like during payments when we install stripe here it's going to show up as a dependency so realize sometimes in more up-to-date versions stuff just doesn't work that is why specifically in the code we're creating today and that is why we're only doing one function within node.js because this doesn't work with python this only works with Gen one if you feel like I'm beating a dead horse here trust me there is a ton of forms on this topic and no one seems to **[01:14:04]** get the answer right on this okay beyond all that though this is how we do it so I put in this like HTTP function second gen just to give you context of how we reference V2 in node.js for us though we're not going to be doing V2s injs we're going to only be doing this one gen one in JS don't worry I'm going to show you line by line how we do this but first off let's just deploy it and just read some of the logs here I'm going to give you some troubleshooting abilities so first off let's go back to our head directory here which would be the head of the app now that we're here obviously **[01:14:35]** Firebase log out Firebase login make sure you're using the right project Etc if you want to know you're using the right project Firebase projects semicolon list list again you'll start learning these little terms uh actual backend app we're using the correct one okay perfect let's keep going here and we'll set up this index.js together here but now that we've done that just to show you you some debug logs you know we put in a line here Firebase deploy when I do Firebase deploy by itself this will deploy hosting fire store functions whatever you have in your application **[01:15:05]** will deploy the entire Firebase because we only care about functions right now just do Firebase deploy only functions which is self-explanatory hit enter so what this does is this is going to create the two functions you see here in our Firebase we have Hello World on user create if I come over to my Firebase here I go to functions you will see that they exist here there we go and you'll see that they're updating and no JS second gen first gen Etc if you want to learn more about that just type in fireb second gen first gen difference or Google Cloud functions **[01:15:35]** difference you'll be able to get a better context on that but like with anything it's like iPhone 10 iPhone 11 or I guess the better way putting is like iPhone 8 iPhone 12 obviously when the number gets higher it's probably better in most contexts obviously here we have to use first gen when running deployment especially the first time you do this is going to take a little while as it's like a cold start when you build out full-blown software and you have really big applications this is kind of like a runny joke uh when you're pushing to QA QA is like staging environment it's a duplication of your prod environment production is basically **[01:16:07]** production is what the user sees and user plays around with QA staging is like what you play around with but like as similar to the production environment as possible this will make more sense when I do the other playlist where I actually show you how to build a software from start to finish the idea is that when you deploy like this at very large applications it can take some time it can take five minutes 10 minutes I know software Engineers that it takes like 30 minutes so keep that in mind I mean early days don't worry it'll be fast so once we do that deployment complete here you'll notice we come over here obviously it will show up right here and we're going to go but you're **[01:16:37]** going to run into some issues trust me uh let me go ahead and give you some troubleshooting uh ways you can troubleshoot this what this will do is that if you get issues it will throw errors here um some errors are just like don't even worry about it example like unhandled air cleaning up build images this gets relevant obviously when you start building application but this is the early days we just need to get going here right so let me show you the first one that you want to use if you run into an error you'll get an error here but there may not be a lot of context around that error so what we're going to do here is going do Firebase functions log **[01:17:07]** semicolon log no not like the Anton a log you know like the celery with the peanut butter and the raisins on it okay maybe not maybe that was just a me thing hit enter and what we'll do here is we're going to get the entire log of that deployment I know this looks like a ton and you're just like Corbin what the heck I'm not going to read all that don't worry I'm not either so we can just go ahead and just drag my cursor here copy this entire thing and then put that into a cursor AI chat put that into a chat DBT chat and then simply ask like what went wrong and how can I fix this **[01:17:39]** give a little bit more context I'm using Firebase I'm trying to deploy Firebase functions this is the first time I'm deploying Firebase functions etc etc etc first troubles Sho let me help you out here there is going to be a chance here when you deploy you're going to get an air message that is relevant to a specific service account so if I come back here to Google Cloud as we set up in the previous tutorial here you're going to come up here to these three hamburgers or hamburger and we're going to go to IM am and admin what you need **[01:18:09]** to understand about Google cloud and what's happening in Google cloud is I would say like 80% of what you need to do when it comes to the back end we have a nice little user interface with Firebase it just looks nice but sometimes you do got to come back to Google Cloud here as there will be certain things that need to be set in order for things to work so one of the big ones is I am and admin permissions another thing that you will get very comfortable with is actually I can just show you through here so let's say I'm in a function here running air like yeah **[01:18:40]** what the heck just happen we come up here to these three ellipses we hit view logs you'll get comfortable with this view as well uh what you need to understand about this is think about this as like the dbug or the console log on a computer or what am I saying how do I say this so simple okay so basically like when you hit expect and then you know for the front end when you uh go over here and you go to console this is like the front end version of that but the back end that didn't make sense watch my front end series but the idea is like we're going to get messages here of everything that's occurring with the function for debugging purposes and also **[01:19:10]** just seeing your function run beond all that though the air you may face so once you put in that terminal command for functions log if it says something around the realm of let me going Zoom down y'all you're like Corin you're what are you doing you're too big my bad I scroll down here so if it's this says something it may not and that's kind of the beauty of software right but basically there's going to be a high probability chance here that it's going to say something along the lines of this is going to be your project number and compute and then developer. jserv account.com if it says that doesn't have access to XYZ thing you're going to come to this Google Cloud you're going to go **[01:19:41]** I am I can't say that I am am an admin you're going to do Grant access and then you're going to paste that line I'll just go and do it with you all real quick so for example copy this this would be showing up in your log you want to just have it here or if you do have it here then just add these roles right so you grant access here there we go and then the two roles that you are going to need to give access to is going to be editor editor and then the log one I'll be honest with y'all I've done software development for different applications **[01:20:12]** in the past I know and I'm aware that the editor role is relevant here but I was getting one that was requesting me to put the logs riter as well so I went ahead and just did it this is hit or miss you may need to do it you may not for once you've confirmed that you've done both things here I'm going to give you some general ways of approaching this so you don't get stuck in Loops of AI get frustrated and you're like you know what I'm done first thing this line right here functions. off. user.on create async user you may get an error that throws can't read user don't **[01:20:43]** understand what user is what does this mean uh let me see if I can get the exact error message cannot read properties of undefined reading user oh no that has to do with the fact that right now in your package.json and the way you're approaching this there's two things that may be incurring cure one you're not using node 18 alternatively you haven't actually done Firebase functions at that version if either of those two are not correct then you're going to run into that error I'm realizing in this series probably the more valuable stuff is going to be me **[01:21:14]** telling you how to troubleshoot errors rather than just giving you the code right like and a lot of tutorials like this would be like oh yeah here's the code have fun no no no no that's definitely not the way you want to get taught on this topic especially when it comes to coding cuz it can get very frustrating we are going to go and what you want to do is what I suggest you to do is I wouldn't even run this on your first go I would oh yeah to comment out it'd be either control actually I don't know it on windows so if you know on Windows let me know in the comments down below but at least on Mac it's command and then you hit a little slash here **[01:21:45]** this will comment out all the code and we're good to go uh EG as in this won't actually be run and we'll only run hello world if I were you and I'm just approaching this I would just start with this hello world function V2 import this like start with this why just get one function deployed correctly how do you know if it's deployed come to your functions here if you see it there there's no red okay you're good you got one now comes the next one which is the **[01:22:15]** en crate which is the actual one we care about then try that one another little po right here when it comes to deploying is that when you do deployments uh especially if you do fire be deploy basically the way that it works in order to ensure that uh when the application gets bigger you will deploy faster is that if there is no changes associated with the function itself it's going to skip it so I believe it'll show it in this example so it it Should Skip hello world here but because I add you know like an S to the comment it's going to **[01:22:46]** redeploy that one so this is very useful in the sense of like maybe you want to redeploy it but you don't want to change any of the relevant code just add a comment add an s just do something and then what you'll see here is that it Should Skip hello world but then redeploy uh generate or create new user so I guess it didn't Skip hello world the point being is that if you see that little there's like a little purple text where it'll say it'll skip the function you want to make sure it doesn't skip the function and actually redeploys it just add a comment comments in this context when you do two slashes here this is stuff that the program doesn't **[01:23:17]** actually read this is for you to read perfect let's go to do it then so all we really need to do what we need to do is we're going to command L here and I'll be honest if you cursor AI might not give us the correct code because what happens here these AI models will opt for the most upgraded version of these dependencies EG 6.0 here because they're just assuming that the most upgraded version is the best way to go therefore you're going to run into issues where you run into loops and that's kind of some of the pitfalls of AI when it comes to more tricky situations we're going to **[01:23:47]** go ahead and try this together if it's bad code I'll tell you how to fix it we are doing a gen one function here we want to do a oncreate function that when fires when a user new user is created and we set the database their email I know my English is not perfect in this context but AI understands so here we go I'm going to go to copy this paste it over and then let's play around with it this code isn't horrible but there's a couple things missing first thing that's missing is an async this allows us to make sure we set all the docs within our on create function so when the user loads in it isn't like bad EG no data **[01:24:18]** but this code for the most part gets you where you want to be right so we're using the right Firebase functions we're using admin here this is always important typically in code we're going to do an admin. initialize app this is relevant you're going to need this line this isn't just me playing around 100% need that line and then from there what you'll notice is that in the test file here everything set up perfectly and we'll just bring it over but this is just so I can write it out for youall make sure you do you know cross your te's do your eyes everything is set perfectly except the fact that we don't have an async here so make sure to add that async here this is very relevant **[01:24:49]** for the other parts though seem to be pretty solid here now if you're wondering uh basically you know how the heck does it know what the uid is or the email the way this works is since it's natively integrated with Firebase off what we did in the previous tutorial here user. ID is a specific variable that's able to grab during the creation of that user process same with user. email that exist uh this isn't like a you know where is it coming from Corbin it's just coming through the authentication and because it's natively integrated makes our lives a lot easier **[01:25:20]** to do this kind of function so now that that's done and as I said at the end of this tutorial end of the series you have all my code in that little git repository in the description down below it's not there yet okay I haven't finished yet uh from here though let's do it I'm going to go and delete this second gen function here actually you know what I'm going to keep it so that when I do share this code y'all can play around with V2 here in the context of no. JS I'm just going to comment it out because I don't need it for now though we have a couple things so console log obviously is going to show us consoles within the Google Cloud console SL on your emulator and then obviously we're **[01:25:50]** going to have to have an airor which is a catch air so if anything goes bad we know what's up now that we've done this though let me go and describe this this right here will make a lot more sense once I do one test run with you but for now all you need to understand is that there's going to be a global doc like I described earlier users then we're going to do specifying it by the user's uid this allows us to give very specific data to the user and then we're going to set a dock called user profile and then within user profile we'll do profile image user email I'm going to show you a little bit of storage play here from here though this is where we can set up other docs maybe there is a doc you want **[01:26:22]** other than user profile user setting other than user settings uh XYZ whatever is relevant these are the docs that we initialize on user creation these are docs that are relevant to our program basically if a new user signs up to your software and you're only setting the user email and the the user's profile image there's a chance that you're not optimizing the way you approach fire store in the context of obviously if you're providing value as a software you need to provide value points data uh stuff that the user cares about okay let's just go Ahad and run through this **[01:26:53]** so this makes a little bit more sense let's start the emulator as we saw in previous tutorials it's going to be Firebase emulator start enter emulator is running we're going to go anyone that's facing issues with that go to your Firebase Json here scroll down make sure you have emulator ports identified now that we've done that though we're officially launched you should see firestore emulator on you should see functions emulator on okay let's get started sign in with Google add an account sign in with Google right now it's going to be an error because we haven't set up the logic past this but what you'll notice is that as we did in **[01:27:24]** the previous tutorial we have off then on top of that in our fir Store look at that this is pretty cool y'all so we have the global dock of users all users will go here then we have the unique identifier for that user Bob I remember Bob and then we have a doc that is created through that function right off the bat user profile profile image user email now in theory you probably wouldn't want to do this as a map you'd want to do this as an additional dock uh in order for storage reasons but for now **[01:27:55]** I'm just trying to show you what's going on here so now that we've set up this and basically how this works is that in theory if I sign up again we can either sign up as orange or new account here watch this boom there we go new account new uid now let's make this work yeah everything looks good here we're going to close this and what you'll see in the next tutorial here is we're going to create a whole separate backend folder but it's going to be in Python it's going to be for the purpose of functions we actually run throughout our application and that is also why I said earlier of like well if you're going to do an on Create and create documents for **[01:28:26]** a user on a first time you'll probably have more than just user profile depending on your application and your use case maybe not coming over to our firebase.com for the entire project so we're going to come down here do K DB get fir Store app then we'll make sure that we reference this this Line's extremely important if you don't put this line nothing's going **[01:28:57]** to work connect fire store emulator at least nothing's going to work in the emulator DB Local Host 8080 once you have all that set up remember the rule of thumb when it comes to this fire base.js file is that whatever you import up there make sure you export down there so we can use it throughout our application other than like connect to fir store emulator and connect to ath emulator don't need to do that okay Step One is down that also means that if for example we do another piece of logic here in the future such as on Snapshot or on Snapshot here comma I would export on Snapshot here as well so we use our **[01:29:29]** application for now Step One is done step two we need to make sure that we have fir store rules that are within our project right now they exist in Firebase if I come to my fir store database here and I go to rules they exist here but they don't exist in our project yet so let's make sure we do that in order to do that we're going to do the lines of Firebase init fir store Firebase init fir store hit enter now I don't have to do this completely but you will need to do this all you need to do is hit enter enter and then all that is going to do **[01:29:59]** is create a file down here called firestore do rules so enter this is asking me if I want to overwrite the file that currently exists I would say no here but for you you just say enter enter you're going to go once you have fir store rules here here are some an example rules you can copy if you want to do so basically what I'm doing here is basically giving the user the ability to access their documents if they choose to do so so doing users their uid allow to read right Etc more context here just simply highlight command L control L back to CH gbt Cloud so once we do that **[01:30:30]** though we need to make sure I'm going go and just control C I'm going get out of that real quick what I suggest you to do just for good practice is go to deploy these fire store rules so do Firebase deploy only fir store rules just get them deployed for now though they should be showing up in our emulator what we can do to test that is if I come over here I'm going to hit contrl C I'm going to hit Firebase emulator start and then in order to ensure that they are working our emulator here if I come down to fir store rules uh right here let's just say uh let's go and do this real quick y'all **[01:31:01]** say we got this right here let's get it fully loaded up real quick what we should see here is that when I make a change here and hit save we should see like fire St rules updated so if I do this add s here there we go rules updated if you see that you're on the right track perfect so with all that set now let's go and jump over to dashboard JJs explain a little bit of this code referencing the ability to get data from fire store and the database itself we're doing Doc and get doc this is going to allow us to reference the doc itself when I say Doc this is like little data points get Doc is actually trying to **[01:31:33]** grab the data from set doc we can also set docs we can also have it so it's an on listener so if there is a change in the document then we do something different in the UI sign out self-explanatory we're going to have an entire button that is purpose out of off is to sign out the user so to show you what this looks like I'm going come over here to the emulator and then I'm going to Simply come over to let's get started here sign in with Google at account and here we go so once we log in welcome to dashboard we have the specific users email from the data base and then right now I just have like 10 random quotes **[01:32:04]** that just cycle through every time you log in and then if you hit log out here we're logged out hit it again sign in remember this is specific to the user therefore we should see auto raccoon really random Google I know Auto raccoon's email show up again click pretty good now let's go ahe and set it up so we get an image here and me explain a little bit more here so if I didn't inspect here me console before we do that what you'll notice is that I have this entire console log associated with the user's data so I'm going to make this make sense a little bit to you as well so where this is coming from is **[01:32:36]** if I come over to our code here scroll up I'm doing a console log of current user user this is all the data associated with the user so we can grab everything we'd want from that user but all we're grabbing in this context all we care about is our ability to reference the users's doc users Global users I'm going to be saying users a lot in this video fire store that's that doc right there okay so Global users oh uid so what is the specific uid user uid **[01:33:08]** okay so we're in this path now we're in the specific user ID path okay what do we want from the specific user then oh we want the profile image and the email so we're going to reference this doc now that we just outlined here we're going to get it like this from here we're going to go ahead and say user data how do we know if the data exists we're going to say data off the user profile referencing that data point and then when we reflect it in the front end of the UI we reflect it with the actual data points names EG user profile. **[01:33:39]** profile image user profile profile image user profile. user email user profile. user email autor raccoon two major things you need to know about that first major thing this is not optimized logic optimize logic in this context is that we would use some form of a local storage where EG we would store data on the user's browser so that every single time a user loads in we're not doing firestore reads which can burn cost at scale basically you want your application to communicate with the backend in any context as limited as **[01:34:10]** possible because this is what causes cost when you have a lot of users imagine you load in a user's profile fir store reads 20 different data points scale that up to a thousand different users loading in their user profile 20,000 data points being read scale that up 10,000 of those users or 500 of those users reload their page gets read again local storage is key I'll have to do some videos on that let's put a bow on this video though by showing you how to get a profile image which will kind of allude to our tutorial here when it comes to storage and what storage means **[01:34:41]** so coming over to index.js we going to set up some logic here where we're going to randomly select different images this is a little fun let's go ahead and get some images all right to get these playaround images here let's just create two profile picks cat or dog going say give me a goofy looking dog I'm going to do Square enter need to add it again enter okay I guess that's against their policy guidelines I'm not too sure why okay give me a dog on a surfboard let's try on a surfboard like a profile so **[01:35:12]** we're going to go ahead and go with square aspect ratio give me a dog on a surfboard like a profile picture sand idea here is that obviously we can give the user the ability to upload their own profile photo but any good SAS product typically has a like a filler profile photo that is on brand uh let's go with this one and then from here we're going to do the same thing we'll do it for the cats hit cat cat all right we'll definitely go with this one got a profile P let's rename them come back over here we're going to go to build **[01:35:43]** we're going to go to storage here in storage we need to get started so we're going to go ahead and just say starting test mode next done typically if you're in the USA you want to use n five because it's the central of the USA so we give the most optimized way of accessing functions to the nation once we do that let's go Ahad and just create a folder here we'll say default profile and if you feel like you've learned something up to this point make sure to leave a like it's completely free and we'll keep going here default profile I'm going to go ahead and add both those images so once we have these uploaded **[01:36:13]** here you'll notice that I called one the cat profile and then one the dog profile let's go ahead and set up some logic here so we automatically choose one for a new user now storage has security around as well of who can access what this is relevant for SAS development but for now just to show you logically how it's done simply click this little URL right here for both okay so now we have both here you'll notice It's associated with our actual application let's jump back over to the code here we go so in order to do that all we need to do is simply provide a variable that's going to be choosing between these two **[01:36:44]** different images so the entire URL here and then we're going to use a con here that's going to identify which one we choose So Random profile image which we'll then put here and this will set the uses profile image let's see if it works and also logically all you need to do is this command L I guess I could have just selected the file so let's just select the file simply provide both URL of images here and then just say have it so for profile image we randomly select between these two images and then you should get very similar code to what I just received here let's see if it works it's very simple are we a dog or **[01:37:14]** are we a cat let's get started send in with Google new account we're a cat all right just to show you how this works here though is so we have cat panda panda therefore if I log out that is unique data to Panda panda what you'll notice is that it isn't going to switch to dog right this is data that's already set with that oneoff go to Panda panda there we go cat email let's go and see if we can find a dog one though we'll sign up of a new account here new account sign up Google and we got a dog one off rip on the second one perfect **[01:37:45]** life is what happens when you're busy making other plans John Lennon okay cool let's see this in its completion quick side note for Firebase emulator here you'll notice that console logs that we put in our code EG new user created uid right there show up here as well useful to use if needed last thing when testing and developing sometimes you can get too much data get a little overwhelmed what I suggest you to do is go to your emulator here hit contrl C and then just simply restart it this is going to refresh all this data here start on **[01:38:15]** ground zero this video is going to be long I can already tell from how many segments I've recorded this might be over an hour I doubt it probably like 50 minutes 40 minutes maybe all right let's connect the dots we have successfully made it so when you sign up sign in with Google add a new account generate information make an account this creates a user with unique information such as their email a uniquely selected profile image that is reflected in our fire store here with user unique identifier user profile profile image and user email therefore from start to finish we **[01:38:46]** now have the ability to have users authenticated with accounts and on top of that create unique specific data associated with that user so if chicken raccoon logs out chicken raccoon logs back in we got the same data that completes this lesson this was a long one I know there's a lot of stuff going on here but this gets you pretty far into creating a software application at least in the sense of authentication which is very important in the context of software as giving unique information to each user is kind of the whole point unless you're building something else entirely different for a entire **[01:39:18]** different process make sure you leave a like it's completely free I'll leave more information down below and as I said at the beginning of the video as well check out bump ups.com if you run into issues as well you can put in this entire video and you can get like step-by-step directions on how to solve issues what I went over in today's video Etc sound good next video will'll be going over functions leveraging API specifically artificial intelligence API to get some AI outputs let's jump into the next video Let's Learn how we can use artificial intelligence to code out python based functions that leverages **[01:39:49]** open ai's API welcome back to the series where I'm showing you how to actually build out a back end and in today's episode we are checking out functions open AI actions this little yellow box therefore up to this point we've already set up our firestore database we've learned what a database is we've learned how to leverage databases and we've learned how to connect them in our cursor AI app does that sound good bye-bye I'll make sure I'll link the playlist down below as you already know or maybe you don't maybe it's your first video with me my name is Corbin I'll be providing all the code at the end of this playlist in a nice little git repo **[01:40:20]** that you can just copy all the code in addition there's a little playlist dedic dedicated to this this is lesson five I'm showing you from zero lines of code absolute scratch absolute NADA how to actually code out a backend and how to actually code out an app leaning on artificial intelligence because in theory this playlist could have existed 10 years ago but that's boring I don't like that let's actually code with AI and let AI do all the heavy lifting therefore in today's video we're going to be going over functions and specifically setting up a function leveraging open ai's API now what you're about to learn in today's video can apply to any type of function for **[01:40:51]** example this isn't just open AI AP this could be cla's API this could be you connecting to Gmail's API connecting to outlooks API whatever it may be you're going to learn best practices here when it comes to setting up python functions for an application and if you don't even know what a python function is put it this way when a user signs up for your software this is what's going to provide the value as the front end just makes stuff look pretty but the back end actually provides the thing that's going to make you money okay let's jump in here we go we are in our project here that we set up in the last five lessons here we're going to have to set up a new folder here in our functions this is **[01:41:21]** going to be a purely python based folder handle this kind of workload now before we do that though let's go ahead and set up a couple things first off navigate to your directory or where you've been building up this application for me it's actual backend app do mpm start let's go ahead and have the front end load EG this is the front end we're in Local Host 3000 we're going to go there now let's create a new terminal window here where we're going to set up the backend or fir store emulator this is our fake pseudo backend kind of like Local Host 3000 this is like Local Host 4,000 this allows us to do backend functions but not actually have it in the cloud but I shouldn't have to explain this as we've **[01:41:51]** already learned this but I like repeating stuff as that's how you learn right repetition so we got an our CD here this is the actual application let's do Firebase emulator start with that command in we're going to launch our Local Host 4000 right now it's loading up so we'll get this nice little message here saying nothing exists but it does just wait there we go from here this is where we set up all our backend logic and we can test in a bubble environment we've already set this up we learned how we set this up therefore let's go ahead and set up our function today coming over to our JS functions folder here this is where we created the **[01:42:22]** specific function of on user create to create a new authenticated user to put this more simply let's walk through an example I'm in my local environment here I hit let's get started sign in with Google add new account autogenerate information sign in with Google it is not found now it's found we're good just a little bit of latency there we go to Firebase emulator we come over here we go to fire store you'll notice we got a new Doc users uid and then the information here we get the user profile profile image that we learned how to set up in our previous tutorial which is a random situation here a coin flip you're **[01:42:53]** going to be a dog you're going to be a cat and then we got the user's email uh Al orange and then come over here algae orange now if you were wondering what that little error was where it says like user deck was not found that's because of the initialization of the underlying variables were getting set on that first run EG users collection didn't exist but on that first one we had to create it therefore there was latency so for example if I were to run this again we weren't run into that issue log out let's get started sign in with Google add new account Auto J information sign in with Google and there we go loaded in **[01:43:25]** perfectly so now that we're here and we're caught up to what we've done up to this point let's deal with open ai's API and for people that are binge watching this series right now and they're like Corbin I already saw that that the previous lesson I get it but the end of this is going to be like four hours long so some people are going to come in and out and maybe want a real quick reminder of what we did previously regardless here we go so we're going to our Firebase app here we're going to go to functions we need to set up a new function here and the purpose of this function will be the API so right now we the on user create looking nice if I come over here we're going to have to **[01:43:56]** initialize a new folder that's going be python based actually before we do that since we're in this branch called new user data and we're finished with this workflow we should do the big commands here so we're going to do get ad just to clean up this Branch get commit dasm uh cleaned go good to go get push origin and it's going to be the branch name again here we go new user data we go and then what we can do here is we're going to do check out main we're going to get branch again so the get Branch if you're like **[01:44:26]** why are you going so fast watch the other lessons we already did this DD and this is going to delete the local branch we don't need anymore there we go if we come over to main here we are going to go to our GitHub in our GitHub we're going to do compare and pull request create pull request and this is everything we already did in the previous lesson so we're going to do merge pull request confirm merge delete Branch okay we're merged with main main as you know is the branch we want to keep safe and don't want it to blow up therefore we're going to do G Poole origin main to grab the merged branch **[01:44:56]** that we just did there there we go looking good now let's go and create a new Branch we do get checkout DB and then the new Branch name since we are creating an open AI API oriented function we'll just say AI function there we go good Branch all right sweet now before we actually initialize our underlying folder here let's create some UI in the front end that's going to basically allow us to manipulate and do actions so coming over here we're going to do something very simple is my purpose is just to connect the dots and you'll do the creative stuff okay so all **[01:45:28]** I'm going to do in today's video is I'm going to create a little input box here that hit submit we're going to put in a prompt that's going to feed back to your API then we're going to get a response and view it here as well therefore connecting the dots between a front end and a backend and a full stack application so let me go ahead and listen to some Swedish House Mafia I'm going create this little front end change we'll keep going and as a side note if you're like wait I want to see you create this front end change that's not the purpose of this series or this playlist that is an entirely different playlists I have on this channel of let's build out a front end we're trying to build out back end back end is all that matters right now I'll see you soon **[01:45:59]** so we are back I'll go and give you a real quick update on all the user interface and what I basically established so far the idea that I'm doing here is I'll put in a prompt like hello how are you I'll hit submit and up to this point it's going to store the data of the user's prompts as you can see here specifically this is going to store this within fire store here to the specific user's uid here and then an array of prompts hello hello how are you EG every single time I log in as otter Olive I will always see this for example log out coming back in as otter Olive **[01:46:29]** here there we go they show up again so this isn't stored in the users's browser rather actually stored in our backend in our fir store database so now that we have this and we have our nice little UI let's walk a little bit through the code this box right here I'm importing into dashboard so I can just kind of edit the code in a separate file specifically user prompts and if we scroll down here you will see that it's imported here therefore the CSS oriented and the J 6 oriented with this prompt box is found in user prompts DJs and user prompt. CSS what simply notice how this placeholder **[01:47:00]** is what do you want to know had a bunch of s's right there if I come back over you will see them right here Sometimes When developing front ends that work with backends you want to compartmentalize and refractor your code or refractor your code so that you can easily adjust changes to it so for this example I refactored the code so that it's basically the submission box and all the logic that'll be associated with the submission box will be its own file what I want you to take away from that **[01:47:30]** is that when you are especially in the beginning very much so in the beginning opt towards refracturing your code into very specific segments that you import into a bigger parent file and the reason why is that one this helps with air mitigation as now you are associating every sector of your software to a specific component for example the the user prompts box here is its own separate component therefore if I ever have an air in dashboard. JS I know it's not going to be associated with that **[01:48:01]** specific component but something else in the code this keeps it clean and especially if you plan on doing more advanced logic this is just to go around and how you should proceed this is all set up though we have our front end looking good let's set up our back end real quick you might be like wait wait wait how'd you store that into fire store we did a previous episode on this but in this context we're simply referencing the path again of users UI the unique identifier and then we're referencing prompts which is going to be our array that we go ahead and use to reflect previous prompts that the user has inputed with all that done though **[01:48:32]** let's begin first off I'm going to make a real quick commit to this current Branch so if we mess up we can always roll back get add get commit DM front and ready get push origin and then we will do the branch name which in this context is AI function and there we go now that we've done that we have a clean Branch ready to to go I'm going to go ahead and open up new terminal window so we can start initializing the functions for Python and before I do that as a good rule of thumb here remember Firebase log out Firebase log in because we're about to do some back-end logic **[01:49:03]** here therefore we got to make sure we're logged in Firebase log in hit Y perfect once you're logged in you'll see that message this is the email that is associated with your Firebase project which we set up earlier now let's go ahead and initialize our functions Firebase init function in it functions plural so because of the fact that this is actually going to be creating a new function folder here that's python base we're going to do initialize for the code base just so there's Clarity between the function folder and this new folder I'm going to do python underscore functions hit enter subdirectory we'll **[01:49:33]** do the same thing hit enter for type of language we're going to do python obviously here we go you want to install the dependencies yes let it download once that is complete you'll come over here and guess what y'all we have successfully initialized our Python's functions folder in today's video all the logic that we'll do today will be in the main.py in theory though when creat applications each file should be associated with a very specific task for example maybe there is a task that is analyzing PDFs therefore you call it analyze pdsp in addition big tip here **[01:50:04]** big tip coming if you are creating a very complex application that will run a ton of python functions you're typically going to have a folder that's going to be a light python function folder and then a regular python function folder and what I mean by this is that each function when you're running it into a Cloud Server will have its own amount of memory associated with it whether it's 2 gigs 4 gigs 8 gigs and what this means in your context is that the higher amount of memory associated with a function the more expensive it will be at scale to put simply if the function **[01:50:36]** you're running only requires around 1 gig of memory you don't want to run that towards an 8 gig function this is stuff we set up in our Google Cloud this isn't necessarily absolutely needed when you're just starting application building but put it this way if you're too much down the road or just save this segment of the video or just write this down in your notes keep in mind that associating memory with functions does have implications at scale EG some functions will actually take a gigs of memory some will only take one and then depending on how you want to set up your **[01:51:06]** functions that is very pertinent so you don't spend extra money you don't need to to run a 1 gab memory type of function on an 8 gigabyte server don't worry if that didn't make that much sense as all you need to know for now is how do we connect to open's API so go to open.com go to their dashboard just simply hit start building once you're logged in simply go to API Keys make sure you have a credit card that is placed onto your account for building I believe they get free credits I don't remember entirely I made this account a year and six months ago all I can say for certainty is that the longer you **[01:51:37]** have an account and the more you spend towards an API endpoint the more advantages you get within open ai's ecosystem hit API key from here simply hit create new secret key and then give it a name that is relevant and that you'll be able to recognize I'm going to create a burner key today and the reason why is just to show you how to do this so permissions all and then we're going to say create new secret key once I click this go and copy it save it get ready to use it elsewhere in your project perfect we have our key this allows us to access artificial intelligence in our software application here now let's actually do it coming over to open A's pricing page let me **[01:52:08]** just walk you through why you would choose a specific model in your context I've done videos on this like probably too many videos on this so you can obviously search up my name type in like prompting with API this video I'm not going to go too heavily into the actual prompting of how to structure a prompt more the sense of connecting it if you want to see a video on that I'll probably leave in the description down below SL up there that shows you how to prompt with API here's the name of the game when leveraging these endpoints here are the models you're actually going to care about the first one is gbt 40 mini this is a very attractive model because of the fact that what this model **[01:52:38]** could do is be very cost effective at handling large amounts of data we're talking about multiple pages in a PDF like blocks of text use gbt 4 mini very cost effective gbt 40 is honestly in the same realm of being just as cost effective what I suggest you to do is first opt for the mini see if that provides the value you want if it works then congratulations you just got a very cost effective solution now if you're having issues and you're running into situations opt for gbt 40 see if it works in this realm yes this is more expensive but this is nowhere near the **[01:53:09]** pricing that we saw a year and six months ago for the amount of value you can provide an end user this is still a great option I mean in the past this used to be like $10 $15 for a million tokens so then the next question is okay if those don't work for you what's that that's going to come down to the 01 mini and the 01 preview now only certain accounts have access to this yet so if you have been using open A's API for a while you probably have access to it but if you don't have access to it don't worry they roll this out pretty slowly but everyone will get access to it and who knows by the time you're watching **[01:53:39]** this video they might have a new model called like o10 preview and I'm just like what regardless the same type of logic applies there's going to be a lower base model that's very cost effective very cheap for larger amounts of data then there's going to be these high level models models that are more for complex outputs they require more input and more thought around it when it comes to choosing between o1 preview 01 mini if you decide to use these models op for 01 mini it's more cost effective and reality 0 previews just Overkill unless you really think that's going to apply to your application so no Overkill here no road kill for 01 mini if you **[01:54:11]** actually need to use it these are very very very high level models here I mean this is extremely impressive stuff here but I assume if you're watching this a year or two years from now they' probably come out with a lot better but regardless this very very cool stuff from open AI here in today's video though we're going to be showcasing GPT 4 mini and the way you reference it in code is going to be right here so gbt 40 mini nice if you wanted to reference the other ones just simply come up here gbt 40 never really referen the ones with dates as those are going to be deprecated models for example like two years from now you'll never be able to **[01:54:42]** access that endpoint but probably this one Etc let's do it we're back at it I'm back you're like what just happened Corbin I got a bump up slack message it needed my attention and I needed to address it that's all done now different day let's do it wait Corbin I thought you were just a YouTuber no no no no I run an entire software company okay let's get going here so basically the first thing I want to do to make sure that everything works good and we've installed this correctly is we're going to uncomment the code that we have here let's just prove that we can even deploy to our Firebase project with no hiccups **[01:55:13]** to do so I'm going to Simply select all this command slash and this is going to bring the code live here now there's two ways we can test this first way is we can deploy all the way to our project or alternatively let's just fire up the emulator and see if it's there to fire up the emulator we're going to make sure we're in a directory we're going say Firebase emulator start we're going to hit enter here let's keep running looking good so far so we have initialized it as you see right here on request example here when it's green that means just good so we have both functions the first one we created in the previous tutorial for authentication and this one which is a HTTP callable it **[01:55:45]** looks like in respect to hello world which is a very classic it's a very nerdy thing nerds wear those on the shirt I don't wear that also if you can't tell I'm sarcastic a lot of the times that's just how I roll once we have that there let's just go and deploy it to our Firebase app as well so you can kind of see what it looks like in that context to do that we're going to just simply deploy our functions here we're going to do Firebase deploy only functions hit enter here and then we should see an initialization of that new function here and then just the redundance of the older function of a new user there we go **[01:56:15]** as you'll notice here it will skip it like I referenced in the earlier tutorial it give you that little purple Hue and then you will see since this is the first time creating this function it's going to be updating here and also notice it is a second gen function this is number two Numa post for reference it may stay there for a while this typically happens when you initialize a function for the first time so don't worry it's not broken just let There we go let it do its thing so once we get that successful deployment here we can come to a Firebase project if I go over here to functions we should see it boom we have on request example here and we have it as a V2 the reason we're doing **[01:56:47]** this is I want to set a baseline I want to basically prove to you that you can deploy a python based Firebase function so that everything past this in this tutorial you won't be like whoa whoa whoa can I even deploy a function like what's going on well at least we confirm that you can deploy the example one therefore now let's actually confirm the real one which in this context is going to be an open AI API endpoint which from what I remember of the purpose of this tutorial was we were going to put a prompt here and then get an answer here we also are storing it in our Firebase database everything looks good let's **[01:57:19]** proceed so we don't really care about this example one we can comment this out I'm going to keep it there so when you guys can grab the code from me you can just be like I want to test this as well as I will be putting this on a get repo for free at the end of this series not yet it's not it's not over yet maybe it is by the time you're watching it is November it's almost Thanksgiving let's eat some good turkey therefore let's open up a chat with cursor AI here we're going to hit command L control L and let's talk to our file here which is going to be main.py in theory you can set up different files associated with different functions which you'll probably do but for now let's create a **[01:57:50]** good prompt here that we can use to get us on the right foot this will be the prompt we start off with make sure in the main.py here we're going to say okay great let's create a new function make it an HTTP colable identifying the type of function here I will send the payload of user prompt from here I want to do an open AI API completion and then I provide example code from open AI documentation here's the situation I'm going to leave this in the description down below so you can reference it as when you are calling certain API endpoints within open AI they change it sometimes so sometimes you'll get bad **[01:58:20]** old code from AI because the fact that it isn't up to date with the current documentation so what I encourage you to do is go to the actual documentation so in this context it's create chat completion if you are connecting other external API same idea just go to their documentation find the most upto-date code and then just copy it and paste it into the chats so at least it knows it's working on the right foot and you aren't getting a bunch of dead code and when I say dead code I'm referring to code that's old and deprecated and just to clarify a little bit more what I mean by old and deprecated basically as software keep improving an API endpoints keep **[01:58:52]** going on EG we get the 01 mini 01 preview the way open AI provides this as a API endpoint for software developers sometimes they just change their documentation why do they do it I don't know I'm not part of open AI they just do it and so do other external API providers such as YouTube I mean they're on V3 right now used to be V1 so on regardless we're going to keep going here we're going to say also here's my API key just hardcode it for now obviously in production don't push a hardcoded API key in the file when I say hard-coded I mean like actually putting **[01:59:22]** the entire string of text right here I'm going to show you how to put this in a secure way using aemv which we've used earlier in this series for now though what I like to do is in the early days when you're brand new to coding or maybe you are good at coding and this is like a new idea for you just hardcode it it gets one little air out of the way that you could possibly run into so you can understand at least your key works and then obviously move it to aemv and then for testing reasons I went ahead and have it print out the console log which you'll see pretty soon here therefore let me show you the Finish product here **[01:59:52]** but then there is like three or four steps you have to do or you're going to run into errors so I'm here to help you so we got it loaded up in our emulator here I'm actually going to go ahead and move this side by side so you can see this a lot better here and you will understand what I'm doing here so basically obviously your emulator is going to be a little bubble for the backend functions we run if you're like what is all these messages this looks like it's broken don't worry that's just part of the game so here's the situation basically all I have it right now set up as is I put in a prompt here and I can an API response specifically as you see **[02:00:23]** above me all we're doing is identifying that you are a helpful assistant this is like the default messaging for open a API and then in addition to this the actual prompt itself the message that's going to be processed is just going to be what I put in now in theory this user prompt and how we can prompt API when it comes to creating software and creating value check out this video right here I'll make sure leave the description down below I go full-blown in depth my fstep guide in how to create a good prompt for API that sounded a little salesy it sounded a little bit like top five things but trust me there's five **[02:00:53]** steps to it you can check out that video if you want to learn how to do prompting I'm just here to show you how to connect the dots so for example here if I say hello what is the best way to eat a steak and I hit submit and with that question we'll get a response right here and sometimes you'll notice a function will be like beginning finished like really fast don't worry sometimes it'll false start like this this just happens in the emulator you won't be double charged but from that question of how to make a perfect stake here we got our five-step guide from open AI talking about the quality of steak cooking **[02:01:23]** method seasoning temperature and everything like which we then can store into our database everything by the board here but let me show you how to get to this point first things first we need to make sure that our Firebase Json is set effectively so this should have already happened naturally when we did the Firebase in it and initialized our directory of the Python functions folder but if you don't see this that's your first issue you should see the python functions python functions referencing our folder up here so far so good next come to your fire base.js remember this is where we're initializing everything **[02:01:54]** for this application authentication storage fir store functions therefore we need to identify that we are using a local function here EG the call is coming from Local Host 3000 Local Host 4,000 the way we do this is obviously we're going to import our git functions connect functions emulator and then come down here is we need this very specific line here we created this in the past tutorials for our off our fire store but now we also need it for a functions emulator this makes it so when you send a message to your backend in this little **[02:02:25]** bubble we have here we're not going to get a Coors air where it's like we don't recognize this this must be false no no no no there's no security issue here we need to identify that it's okay if it comes from Local Host 50001 as we are connecting this to specifically the context of a fire store emulator now for you you might be like Corbin how the heck do I even do this I don't want to type it out well one you can either get the G in the description down below when it's available or just cursor AI simply be like we need the following and then you would simply just put in like you could even go lay in and be like get **[02:02:56]** functions HTTP callables but in theory just simply screenshot this video or talk to Chad gbt you want connect firestore emulator and then we want the git functions as well with both of these set up and when we've already set this up in previous tutorials this is going to get you through that second area you might run into which is cores firebase.com get functions which in this context is the functions get functions app therefore we're just going to export **[02:03:26]** functions here round two done let me help you with what else you could run into the next area you'll probably run into has to do with open Ai and importing it there is going to be a high probability here it's going to say something along the lines of modu not found there's an issue etc etc this can be very frustrating as you've installed it it should be installed but why the heck is this going on your air should look something similar to this where we see no module named open AI the issue here is that we need to install this within the vinve of our python functions folder if that doesn't make that much sense don't worry just follow these **[02:03:57]** commands what's nice about this is that once it's installed once it's done you can move past this uh these erors typically don't show up again once you get them done so the first major thing you need to do is you need to go to specifically installing this to your python functions folder or whatever you called it for me I call it python functions for me we're an actual backend app which is our overall directory but then we want to go one folder deeper which is this folder right here by simp simply doing SL python functions I would save this to your cheat sheet your little cheat sticky note have this ready to go once you're in this then we do **[02:04:29]** Source vve bin activate and that's specifically this vve right here to know whether you're in you're going to see ven right here you're going to see python functions right here and then the next one you want to do is PIP install open AI this is going to put it in our requirements. text think of your requirements. text as the dependencies we'll use in our function what is a dependency we'll be putting stripe here you could be putting YouTube here you could be putting Google here like this is just stuff of the our ability to access external softwares you know when we're building software and open AI is **[02:05:01]** obviously an external software once we do that then we're going to do Pit freeze requirements. text this is going to collect open a and actually install it as you see here you should see all this and then you'll be good to go now let me go ahead and show you the next thing that you're probably going to have to do because of the fact that AI has not been updated as of recent when it comes to open ai's documentation and how to code in it and what I'm referencing is that your AI may have gave you old code here of open a. chat completion is is no good lucky for us they gave us a ways of going about solving this but personally the way I solved it was I **[02:05:31]** simply just did pip install D- upgrade open aai and this should bring you to the most up-to-date version of open Ai and then obviously what you'll see in the code here is that there's a way we reference this now for chat completion chat completion basically is just our ability to put in a prompt get an output that you saw earlier so since we're already here and we're already in this Vin V the python functions we might as as well just do our last command here this is going to allow us to access EnV files which is our security measure which will make more sense I'll show you what I mean but just do this line pip install python d.v perfect that's all **[02:06:03]** done this is a lot I know this is a lot maybe for some of y'all this is this is like light work and this is a walk in the park for some of y'all especially if you're brand new to this don't worry this is a lot that's the point that's why we're learning and that's why we use AI to learn more and more every single day this is why there is an entire Market segment that currently exist for no code SL hybrid ways of building out applications but for some reason you found yourself on this series and you're like no no no no I'm coding it out raw okay let me help you do it therefore **[02:06:34]** that's why a lot of these series and a lot of these videos at least in this series I plan on doing a whole another playlist where I actually build out a software with a value proposition and sell it there's going to be a whole separate playlist for this but this series specifically is just connecting the dots because once the dots are connected you can really fill in the gaps of what you want to do for your specific software with all that done let's do ourv here let's explain this code explain the front end code how it all connects and proceed open AI API key os. gemv openai API key this is where we store highrisk variables in other words **[02:07:04]** we are grabbing the API key found in ourv here so if I click this open API key it's named the exact same this is where you're going to paste your API key you get from the open AI dashboard once you paste it there and you made sure you installed that previous dependency this will work and notice how we reference this key in our chat completion over here all right I'm going to actually paste my key here so it keeps working so far so good and obviously what I'm going to do is I'm going always leave these little console logs here such as open AI key is not set in EMV file I'm going to **[02:07:35]** leave this in the code so when you grab the code you run into errors you'll get clear ideas of where the errors are incurring scrolling down here here is our current way of doing chat completions as of 2024 November client. chat. completion. corate the reason I say that and why I give a time stamp of the specific date is they may change this in the future but you already know how to deal with that go to the documentation see what the most recent one is and then simply you know grab this control L command L and then simply give the updated code right there to cursor Ai and then it'll give you the **[02:08:06]** better way of doing this if they change it in the future regardless I'm not going to go too much in depth on how to actually prompt for this here are some pointers system this is where you're going to give context of like who are you what do you do how do you want structuring outputs how do you want the AI to interact with the content coming in and then the actual content itself typically this should just be data coming from the front end with very limited fix text associated with it when I say fix text I'm referring to stuff like you are a helpful assistant no matter when we call this API end point that will always show there's no way this changes therefore fixed text should **[02:08:39]** rarely show up in the content it should always be a variable that is found in the front end for a specific value you're looking for any type of directions or ways or structuring outputs inputs everything should really be outlined in the the content section here as I referenced in that video earlier so watch that if you want more depth of how to prompt which I think is like I say in five steps we're good here though this is solid right now we have a fully functional backend let's look at our front end so coming over to our front end here is what you need to understand first thing typically when we are doing function calls to the back end **[02:09:12]** you will make this as its own separate component which we kind of already did here sometimes you take this one step further where you have Js files that are just completely dedicated to that specific backend function because you're passing a ton of data in and out in this example this is kind of like a melding because of the fact that we do have a return here of some visual element which for us is this right here this is our visual element sometimes you have the JS file just purely be the function from the back end that we're calling and sending data to in other times it's okay to put the function directly within the front end code as well basically there **[02:09:43]** can be a front- end element here with some type of calling of the backend sometimes there is just no return statement here and it's purely just a backend code that we import and use within another component or JS file all that will make more sense as you keep going here but all you need to know from here is that when we call a function in our backend we're always going to be importing get functions HTTP callable obviously if it's a callable uh callable in the sense of sending data receiving data then we're going to always initialize with get functions here and then we're going to get the specific name of our function that is found in **[02:10:14]** the back end so for us is generate completion how do we know what the name is simply come back to your main. Pi here def generate comple that's the name of it if I said like generate apples and I came over here I would reference it as generate apples so far so good and then what we do is that we're going to send data to this function user prompt input the input's coming from the front end notice how we're passing the data as user prompt and we're receiving the data here as user prompt finally I have some dead code here when it comes to setting fir store and everything about the board **[02:10:45]** there but so far you have a pretty good idea of how to send data towards the backend and receive data back so the last little step here that I want to do is I want to store the user's initial prompt EG what I ask and then I want to also store the output from open AI as right now I just have the output coming out as a console log like it shows up here and that's what you should do as well don't over jump the gun here have it work in the sense of a console log that doesn't really show up anywhere other than the console and then once you **[02:11:15]** have it worked there proceed to this next step last two things on this topic before we do the last step of today's tutorial which will be storing these values in our fire store database first thing if you run into errors you run into issues and you spend hours on this video today trying to get this to work completely understandable completely makes sense that's just kind of how it is especially if you're new to this that's how you learn to code the beginning is very much like you are hitting walls on walls on walls on walls I can't tell you when I first started **[02:11:45]** coding there would be times where I would have to solve one issue and it took me two and a half days to do it that's the point once you get through it the next time is a lot easier as you know how to connect the dots better all right let's go and wrap this up if you feel like you learned something so far make sure you leave a like it's completely free let's check it out let me go ahead and show you the finished product here and then I'll walk you step by step how I did what I did so obviously we are in the authentication phase here where we've created the firestore database of a relevant user with their unique uid and then their profile stuff over here in addition to this we have successfully made it so we **[02:12:16]** can contact an open AI API endpoint for AI value so for example if I ask what is a capital Texas and I hit submit we're hitting the open AI API endpoint and then we get our response right there now here's the best part not only did we successfully just integrate artificial intelligence into our software but we are also storing the relevant data such as the user prompt and the user output or the AI output and we're storing it here in the uid AI answers in Array prompts in Array now to be absolutely transparent if you want to do this at scale don't store it like this store **[02:12:48]** them as docks docks are going to allow it so that if the user has a ton of different questions a ton of different outputs it's a more scalable database I'm just here to show you how to connect the dots regardless let me show you how I did this right off the bat if you're dealing with a lot of data and a lot of testing I encourage you just to restart your emulator once you restart it you're good to go from here let me show you what I did first off I went ahead and took out the functions logic out of the user prompt. JS I kept this just as a return element in the sense of just a front 10 UI which then I took the real logic and just put it in my dashboard. Js just makes a little bit more sense **[02:13:19]** due to the fact that you come down here when we do handle user prompt submit this is where we're storing the underlying data of the user's prompt here with the user doc ref so we might as well just call the function as well which is the generate completion function that we talked about earlier one little side note I went ahead and commented out the little randomized quote section I'm going to leave this in the code though so when you grab this code from the git you can go ahead and enable it if you want to see it but for now it's commented out into to uncomment you simply just command slash and you'll get it back and if you don't know what I'm talking about I'm referencing this little box therefore we just went ahead **[02:13:51]** and combine the logic of saving the user's prompt in that specific dock path of array Union on prompts and on top of that sent that user prompts data to our backend using this logic right here therefore when we store the AI output though we're going to store that within our python function quick side note the reason I'm describing the code how I am right now is for you to talk to cursor AI if you need to with the command L and simply put in the words I'm using into those chats to really get the best kind of outputs for example the code right here when referencing the kind of path and how we want to store or earlier when **[02:14:22]** I was talking about a scalable database making sure that this data is stored as a doc rather than an array coming over to our main.py here everything will stay the same except for the fact that we will now add the ability to store this in our database therefore from the import we're going to also import fir store as well fir store is the database in the paths and then notice with the code I'm going to provide you with I give you these a little comments so you really understand what's incurring obviously same situation here we're going to reference the data path users unique uid and then we are going to take the assistant message Mage which comes from that chat completion request and **[02:14:53]** we're going to store it in AI answers therefore as you can see this emulator AI answers the answer we got from open ai's API request here's the deal when we access AI like I showed you in today's tutorial it's a little bit more nuanced in the sense of prompt structuring prompt outputs like this is new stuff to software a lot of the times when you connect external apis let's just say YouTube for example it's very much like input output for example if we're referencing YouTube and maybe we want to download or upload a thumbnail from YouTube's API it's very much so provide **[02:15:24]** the video ID get the video thumbnail I say this to make clear that when accessing other external apis it's a lot simpler the logic is a lot easier to understand artificial intelligence API endpoints though are a lot more nuanced and that's partly probably the reason that you're watching this entire series to begin with as this is a completely new market in software entirely our ability to prompt and get value through text is a big deal and obviously we can connect this API to other stuff open AI provides with whether that is going to be higher level models or alternatively **[02:15:54]** their whisper API D 3 API everything like that what I can say with confidence though is now you understand some troubleshoots and workarounds of issues you may run into and how to solve them so if you feel like you learned something today make sure you leave a like the next video in this series will be storage so I'll see you in that video Welcome Back to the series where I'm showing you how to actually build out software and it's back end if you're just joining me now in the last episode which will be in the playlist down below we did the functions ability and in that specific video I showed you how to create python based functions we went ahead and created a function that **[02:16:25]** connects to open ai's API therefore integrating artificial intelligence into our software therefore this is episode 6 and if you're confused you're like who what just happened I just land on episode 6 check out the playlist make sure to leave a like before you leave as we're done with functions a v Zen today's video we're going to go over the ability for storage in our back end storage is a very ambiguous term here this encompasses PDFs videos any type of file in this video I'm going to show you how you can have it so your user can reset their profile image therefore in this video you're going to learn the logic to set it up for images but this **[02:16:56]** applies to any type of file format therefore let's begin to start off here let's go ahead and log in create an account the purpose of today's tutorial is we're going to add a little icon here that's going to allow us to click upload and we're going to upload a new profile image that will store in the backend database obviously we have a user we have their unique ID their U ID which is this right here this is how we identify that this is the user themselves so for example for orange raccoon right there we know that this is their user identifier we're going to be leveraging this in the storage path that we'll create together as you'll see storage is a whole separate section here when it **[02:17:27]** comes to fire base first question might be is Corbin why is that that's because of the fact that when we store stuff here in the fire store this is going to be string based data URL links I like coffee chicken Olive like this is text based storage number based storage very much binary in the sense therefore when storing actual files or video files MP4s pgs. jpegs whatever it may be PDF you use storage check out episode 2 or three I believe this is where we set up our storage bucket and set up the logic to do like a coin flip whether the user is **[02:17:59]** a cat profile image or a dog profile image what we're going to do though is we're going to use the same storage bucket here but we're going to create a new folder and the purpose of this folder is for The Unique information associated with each user so what I'm going to do here is I'm going to just say profile image or profile picture so this is going to be your base folder it's like the global folder from profile picture this is where the next leg here is going to be the user's uid as the folder and then the image associated with that that will make more sense as we get to the code here but for now we've set it up how we want to set it up **[02:18:29]** that's in Firebase though we need to actually make sure it's running in our emulator as well therefore we got to come down here and what you'll notice is in our Firebase Json we got to make sure we add a storage Port here if you're not familiar of what I'm saying here remember when we launch our emulator this is like a own little bubble Local Host 3000 is like the fake little front end with no internet how we can create a front end our fake little backend is Firebase IM later start which are referenced by all these different ports therefore we need to create a port for storage let's start off by doing that then we're going to go ahead and open a CH cursor AI we're going to make sure we **[02:19:00]** select Firebase Json but also select your firebase.com [Music] export the storage so we can use it elsewhere hit enter and we should get a relevant code looks like I used up my free so we're going to have to do a smaller version of cursor which is cursor small so we got our Port here of **[02:19:31]** storage coming back over here we go to fire base. Json scroll down and we'll add it right here make sure you add a comma let's get rid of this comment we don't need that we're going to go there coming over to the Firebase dejs doesn't look like it outputed perfectly but we get the general idea here we need to get the storage and the functions here so we're going to add these lines let me go to sh down coming back over to Firebase .js here we need to import get storage connect storage emulator looking good this is like the other logic that we saw earlier with the functions we're going to paste that here nice and then we're **[02:20:01]** going to scroll down here we're going to make sure we initialize it with cons storage get app storage I like it and go and do that notice how we do this with all the other things get off get fire store get functions looking good so far and then finally we need to make sure we have this nice little line here to ensure we get no Local Host cords errors connect storage emulator if I can speak 919 9 not 911 and then finally the storage bucket storage right there good to go we did a lot of this in the past tutorial so this should start making more sense to you as you know the firebase.com **[02:20:50]** live we're going to go to our Local Host 4000 it actually looks like I forgot one step here which is going to be the Firebase in it for our configuration let's go and do that Firebase in it and I'm actually remembering I did forget that because what I did in the previous tutorial was I just referenced the links to those fixed profile picks of the dog and the cat I didn't actually initialize it yet so let's do that as we know Firebase in it allows us to access all the different abilities in Firebase we're going to go to a storage here we're going to hit space we're going to hit enter everything should just be default here enter and we're good to go so far so good start the emulator here we go loading in the storage rules **[02:21:22]** perfect coming back over to Local Host 4000 we should see it on there we go it is on and then if we go to storage here we have our storage bucket looking good here now obviously if you want to enable anything else such as realtime database emulator follow the same steps but reference that kind of terminology when importing it to your Firebase .js and. Json from now though we are going to go let's go to dashboard. JS and here's what we're going to do we're going to give the user the capability to import their own image therefore change their profile pick as someone might Lo in and be like you know what I don't like that **[02:21:52]** cat I don't like it so we got to change it let's do that to get this working we're going to have to add a couple files to this chat obviously we're going to need the dashboard. JS and we're going to go ahead and need the Firebase JS so it has context of where we're getting the storage bucket in addition let's make sure we add the dashboard. CSS now look at the prompt all I did was this I went ahead and pointed out the very specific piece of code that is the profile image that little circle right there that code that's associated with that I pasted into the prompt and then I simply said this we can upload a new **[02:22:22]** image and also have it so the max file size is 5 gigs also the storage path let's do profile picture which we identified before uid image name that's it hit enter get your code and of course you can get the code for free in the description Down Below in the GitHub repost so make sure you leave a like it's completely free it's right there so let me go ahead and walk you through this code though first major thing you may run into the eror right off the bat where it's like you don't have access to this this storage path you don't have access to don't worry to fix that we're going to come down to our storage. rules now right here is where we set up the rules of who has access to what **[02:22:54]** depending on their authentication and admin level for right now we're going to allow a user to read and write from this path I've went ahead and identified the path match profile picture uid notice how it's smart enough to understand that user ID is a variable image name perfect and then we're going to do the next line here which is going to allow a user who is authenticated to access this path this basically makes it so that they can upload an image and have no issues therefore coming back to the code here notice what we do from our Firebase yes we are importing storage that's where we referenced earlier coming down here I **[02:23:24]** went ahead and reimported the font awesome icon that we used on our homepage from earlier tutorial so we can get a nice little upload icon therefore allowing me to use the icon fa upload which you'll see pretty soon here and then finally we went ahead and imported the relevant things we need in order to actually do this ref upload bytes get download URL from firebeast Storage therefore in your output for your code if you don't see any of that something might have messed up not necessarily the icons more in the sense of the imports from Firebase now coming down here it's pretty simple on the logic the idea is that obviously we're doing handle file **[02:23:54]** change we're changing the profile image so maybe we want to do handle new image for profile whatever you want to call it scrolling down here the first important piece of code here is setting Max file sizes now this applies to anything whether we're talking about videos or PDFs everything in between you want this line here you want to do file. size and then identify the max amount of size you're willing to upload why is this important because the last thing you want to happen is a user uploads like a 100 Gig file not only is this extremely expensive at scale but also like why are they uploading 100 Gig file that's a lot **[02:24:26]** so whatever it may be in reality this shouldn't be 5 gigs for a profile image maybe Max of two maybe even Max of one just set limits you don't want to be overpaying at scale furthermore notice how we're identifying the specific path here profile picture which we made before the user's uid and then the file name whatever the file name is on their computer that's how we're going to store it from there we go ahead and get the download URL which we then reflect in the user's profile image which you can see right here now typically in this logic what it'll do is it will fall back to the original profile image of the dog or the cat if it doesn't exist and if it **[02:24:57]** does exist it will use the users specific unique image they uploaded let me show you this live so I've come back to my image here and I'm like you know what I don't like that cat I want a dog so to do so right now I have it set up where we have a nice little upload icon here I click it and what you'll notice is that by me clicking that it's going to pop up like this pretty nice and we're able to click the specific file we want for a profile image I also want you to notice how we set parameters on the file type so for example here I'm not able to upload a zip I'm not able to install cursor again I'm not able to **[02:25:27]** upload a video because I identified that in the code for your upload process if it's like only videos should be accepted or only PDF should be accepted identify that in the code how Corbin put it in a cursor AI chat be like hey I only want this size file and this type of file it's very simple for me though I want to change this to a dog double click and we officially have a dog profile pick that concludes this episode make sure you leave a like it's completely free helps me out here in the next episode we're going to be checking out analytics showing you how to connect this to Google analytics which is actually pretty prevalent for us to understand **[02:25:57]** one just how is our software doing but to for conversion metrics such as sign up and purchase but for now we set up the storage we're good to go and I'll see you in the next video let me show you how to connect Google analytics 4 to any type of web application or software you're developing connecting analytics to your application is extremely valuable so let's learn how we do it welcome back y'all in this video we're going over to one of our last blocks in this entire playlist here if this is the first video You're clicking on then you found yourself in one of the most In-Depth series on YouTube on how to build out an actual application with a **[02:26:29]** real backend so no this isn't going to be a 10-minute video showing you how to create some pseudo application let me show you how to actually do it in the previous video I showed you how to upload files to your application so we're done with files you can say bye-bye files this was leveraging firebases storage feature in today's video we're going to be looking at analytics and more specifically ga4 and we're going to set up a couple things first off we're just going to connect it so we can actually see it working following this we're going to set up very specific events such as sign up and purchase so we can add this for later tutorials here which I'm going to show you how to integrate stripe purchases **[02:27:00]** and then go as far as even showing you how to track conversions in a custom app like this so yes as the title of this entire series shows you let me show you how to build out a real back end so coming over to the application we've been developing here together this is going to be a pretty fast tutorial so don't worry it's not really that crazy what we have to do first off I got to point out some things to make sure that you just have the building block set up so you don't run into any errors so first major thing I got to make sure that you have is make sure to go to your project overiew here hit this little gear icon hit project settings in the Integrations tab make sure you have **[02:27:30]** Google analytics enabled once you have that enabled you'll be good to go coming over to our Firebase JS which we already set up in our previous tutorial here the relevant variable that's going to allow you to connect the Google analytics 4 to your app is going to be measurement ID we've already set this up together we've already done this therefore if you don't have measurement ID there so maybe you have API key all the way down app ID but you don't see measurement ID here's a situation when you were creating your Firebase project you didn't enable Google analytics 4 so now you're in a situation now where you have to enable it a little later on which as I showed **[02:28:02]** you is simply in your settings project settings Integrations so therefore if you are late to the party and now you're just enabling Google analytics in the latter half here don't worry once you enable it to find your measurement ID come down to the settings here cck admin in admin here hit data streams click your application name and then it's going to be found right here in the top right right it's blurred out obviously but you can see measurement ID you're going to copy this once you have that copi simply add the line measurement ID semicolon and then add process. EMV react app Firebase measurement ID and place your actual measurement ID in your **[02:28:33]** EMV which I've showed in previous tutorials that all set up and you're good to go and some of yall right now are like I already have measured ID all right chill coming down here make sure you have the lines of const analytics get analytics app with that done the next line is very simple come over to your app.js go to your top of your file type in import we do slash and we're looking to import Firebase not that incorrect Cher AI like that import. Firebase good to go we're going to go ahead and push this to our production **[02:29:05]** environment because right now in our Local Host this isn't really relevant Google analytics should only be communicating when we are in actual prod environment when I say prod I'm referencing an actual live website link anyone can access make sure you have these commands in your cheat sheet which you probably already do but remember remember it's npm run build and then it's Firebase deploy and actually before I do that I got to make sure I cross my eyes or dot my eyes and cross my te's Firebase log out Firebase login let's first make sure that we're in the right project we're deploying to the right project and that we are off Firebase log **[02:29:35]** out and we'll do Firebase login hit Y make sure to choose a specific account associated with your Firebase account like the email and then once you see that message we are successfully logged in that right there should be part of your workflow anytime you decide to start working your application you know it's a nice 10:00 a.m. you're drinking some coffee Firebase out Firebase log in proceed now to find out what your project is which you probably already know you can use this command as well we can do Firebase projects list I believe there's an S here I always get this command a little off okay I got it right that time so for me it's actual backend app and sometimes what you need to do is **[02:30:06]** basically do Firebase use actual backend app good to go everything's looking good now let's run those command lines npm run build entire front end fire dis deploy entire back end enter let's get some Google analy itics Google I love Google y'all don't realize if I say I love Google like five times in a video YouTube's algorithm picks up on it they're like hold up we got to push this video farther so two things just happened here that I want to point out first thing is that when you get little like warnings like package.json indicates an outdated version of Firebase functions don't worry it's like **[02:30:38]** not necessary for you to always update to the most recent version as you saw in previous tutorials and then this second area here is typically solved by just installing the dependencies again to that specific function folder so this has to do with my python functions let's go and try that Firebase init functions so it's going to ask me whether to initialize or overwrite or simply overwriting we're going to choose our python functions folder we're going to choose obviously Python and we're going to say no to everything except the last question here which going to be do you want to install dependencies now why not why is in why why is in yes with that **[02:31:10]** done let's retry our commands here and then if you're wondering like how are they showing up like that just use your arrow keys on your keyboard mpm run build Firebase deploy perfect once you see that message there deploy complete we're good to go let's jump over to our live website and see if we show up on Google analytics one thing I want to point out though before we do that is that if you deploy and you see a white screen that can be very annoying this is how you solve go to firebase.com **[02:31:50]** l or control L simply put in hey when I deploy to Local Host 3000 I see my react app when I deploy to an actual live website link it's a blank white screen if you're still running into issues coming over here though you can see we're currently at the live website I can go and scroll through AI automation code generation Our Tech stack and everything above the board and there we go you can see we're in actual backend app and we got two active users to prepare us for the next tutorial here let's set up some key events I'm going to go to admin again in admin scroll all the way down and go to events **[02:32:20]** the events page are either native events that are just seen in any type of website or alternatively our custom events will create and send to ga4 to do whatever so what you see right here at first view page view session start this is just standard stuff this is data that we just collect in the long term but the important thing here for you to understand is right here Mark as key event if I turn this on and I come over to key events here you will see the default event of purchase right here which I think we would assume is a key event and then we'll also see see the other one of first view which is marked **[02:32:52]** as a key event here's why that's important and here's what you can take away from this key events is where we're going to put in other types of conversion events so obviously first view that's not really a key event we we could care less if someone just goes to the website and then leaves what we'll put here is things like add toart sign up etc for now though you've successfully connected Google analytics to your web application so you're good to go the next two lessons here will be payment with stripe and how we track that with conversion code with ga4 these two lessons will be found EX exclusively on my school Community here so that'll **[02:33:22]** be in the description down below so you can check them out they're going to be full-blown in depth same style same way of teaching same everything I have no clue what that price is going to say when you watch this video but all I can guarantee is that whatever you see is going to be the lowest that ever is as this is going to increase over time if you felt like you learned something in today's video make sure to leave a like it's completely free and I'll see you in the next video ga4 has been connected Google two random videos that's my face I'll see you in the next video