Lesson 1 - Create React App

Create an App's Backend with AI📅 2024-10-24

Watch on YouTube ↗

Transcript

[00:00] you found yourself in 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 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

[00:30] 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 we'll be setting up hosting a real domain third video will be off 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 because as we

[01:00] 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 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 these 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

[01:31] 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 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 be like this I'm not going to walk through every single one again I just

[02:02] 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 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 back-end development which honestly seems like a very und understand at Niche within YouTube and content kind of

[02:32] makes sense a lot of people that do content probably aren't actual software Engineers no shade but if you want to know front end development and everything above the board in that manner and how I approach it personally check out this video right 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 front-end heavy if anything I'm going to give you some pointers here and there for frontend like good use cases and how to approach front end but the majority of this series is purely for back end which I already know some of you are like yes Corbin we need this I

[03:03] don't see this anywhere else on YouTube okay okay I got it let me show you how to actually build 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 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

[03:34] 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 could use the actual built-in version in the IDE here on cursor AI come down here and hit terminal I just like let me go 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

[04:04] 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 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

[04:34] end series that I referenced earlier you already know what this is about but if you haven't then let's go to 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 that little apple 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're 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 directory

[05:06] 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 base 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 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 Cor 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 just go to this original video

[05:38] right here also if you run into issues just talk to Chad gbt ask a questions let's build our react front and we're going to do the line npx create react app dot if this command doesn't work 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 that 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

[06:08] 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 chat gbt chats claw chats whatever it is and actually get more understanding from the 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 functions again don't worry you're going to have the files

[06:38] okay read me is self-explanatory that is just like what's going on with the project getting noore this is going to be stuff that we don't commit to GitHub for security reasons this will make more sense as 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 back end 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

[07:08] 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 front end it's not frontend it's just backend when we come down here index.js don't worry 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 right now 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 robot text whether or not we want it to be crawled by Google Etc but for now

[07:41] this is sufficient this is what we needed for our react application frontend therefore with all that set up let's go ahead and Commit This to GitHub set up our GitHub repo and understand how we 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 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 you don't lose your code doc choose your homework let's go ahead and create a repository here and proceed first major thing make

[08:11] sure you even have GitHub installed reference that Google doc I provided 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 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 to do private and just as a side note public obviously means that if you ever do commits with your code anyone in the

[08:42] 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 app perfect description is optional so we're not going to do it add read me file we're not going to do that add get no 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

[09:13] 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 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 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

[09:43] 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 back in the day we used to be able to do this with our username and password but you know G 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 not coffee feel bump expiration time I'm put 90 days and holy smokes y'all in 90 days is 2025 that's kind of crazy we're going to go and say

[10:13] 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 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 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

[10:43] 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 have to redo that entire process not fun in theory I could have made it so the token expired like a year from now but just giving you content 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

[11:15] 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 euro. is the repo you just created which is found right here for me it's actual 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

[11:45] do that now obviously I can't show you the entire block here because my Axis tokens in it but just from the first line you will see coffee Fu bump actual backend get so after some debugging I realized that I actually didn't get full access to that token I gave no access for the content contents which is very important so I'm going to go and change that to read and write I'm going save again I'm going update again and proceed therefore if you're running into errors and it's just like this doesn't really make sense of 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

[12:15] 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 generate 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 circumnavigate 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

[12:47] reason it's G me an air on like it already exists is because I already set this URL as the origin to do so that is in 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 C feel bump it's going to 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 control C paste it in there now that it's pasted

[13:17] 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 that Google doc proceed for for now though we have successfully pushed this repository to GitHub 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 back end with that done notice a couple

[13:48] 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 difference therefore asterisks let's go and push this we're going to say get add 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

[14:20] branch name so right now we're in the branch of main therefore we'll do get push origin main so will push us to our GitHub right here if I hit reload boom and then what you'll notice is that on top of that we have the nice little 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

[14:50] 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 step here where we're going to connect our backend 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

[15:22] 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 is isn't PR this is like development this is live therefore when you make changes or do development you're going to do separate branches this also is really clean for code 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

[15:53] therefore we're going to do get checkout dasb give it the branch name so for this we say Firebase ad cuz we're adding the Firebase enter so now we're in a new branch called Firebase ad this will make 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

[16:25] just to get you comfortable with the platform this gives us the ability to do fire store functions it's 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 go there is no fixed 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

[16:55] show you how to do some really cool stuff with that for the account we 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 a backend I know surprising for YouTu here we go let's head 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 have consistency my naming here so I'm just going to call it actual backend app we're also going to set up Firebase

[17:27] 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 felt like you learn something up to this point why cuz it's free Register App for these next steps I'm actually going to skip it because these next steps have to do 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 firebases way of giving you a custom domain and is actually really relevant in the context of the

[17:58] back end as when when we do function calls whether that that's through API request or HTTP cbles and this stuff that'll make more sense we need an actual URL rather than 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 your directory and just do mpm start hit 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

[18:29] allows you to really mess around so if you really mess up in the code you're not breaking something significantly and you're not really like getting charged to anything like obviously you're getting charged if 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 Engineers 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 instant anous changes as you'll notice

[19:00] 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 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 front end development this is really good for instantaneous changes and even good for local backend development as you'll see with the firebeast emulator therefore last little thing here is I'm

[19:30] 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 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 nice little CTA here scrolling all the way up

[20:02] here just actually build backend apps using AI now if you want a full in-depth tutorial a frontend development check out the other videos I'll walk you through some little pointers here and 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 you're rendering the landing page or the homepage in this context I'm going to Simply import it I'm going to store files or pages that don't require authentication in a folder called unoth for unauthentic privacy

[20:34] policy terms of service sign up sign in pricing page everything of this nature here I went ahead and set up my Js file 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 files or

[21:06] very long files as you will have very very similar UI throughout your application therefore you want to 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 called 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

[21:36] episode one here we have successfully created our react front end with its connection to Firebase let's jump to lesson two here where 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 it's time to host this website time to host it those are two random videos that's my face I'll see you in the next video