Lesson 2 - How to Get Your App Ready

Create a Software with AI📅 2025-06-23

Watch on YouTube ↗

Transcript

[00:00] How do we code with artificial intelligence and set up our environment? In this video, I'm going to go over connecting your app to GitHub, a backend like Firebase, everything you need to know as if you have no coding experience, how to connect to all the relevant tools to actually start coding with artificial intelligence. Sound good? Let's jump in. Welcome back or hello again for those who are watching this in the longer format of this series. Today, we're going over lesson two here. Lesson one, I described this tech stack, the software we're building. In this lesson, we're going to actually create our code repository together,

[00:31] essentially where the code is stored, and we're going to connect all these different dots. So, step one here, let's log in and create an account for all these relevant platforms. First being Firebase and GCP. I'll see about leaving all these linked in the description down below. But first off, firebase.com. Go here and say get started in console. Simply create an account, log in, free to start frontend. Since this is an open source framework, we're going to actually install this locally. Don't worry, I'm going to make that make a lot more sense later on in this tutorial. But don't worry about the front end for now. There's no account we have to sign

[01:02] up with. In this series, we're creating a software where the user provides any YouTube link and can get timestamps for it. And to provide that value, we're doing bumpups. So for this, we're going to go to bubs.com. Simply create an account here. I'm going to go ahead and go to the settings. And in settings, I'm going to select API. And you'll notice a option here that says enable API. You're going to hit that. And then we're going to create our key right now. So I'm going to say create API key. For this, I'll say tube stamp as this is the software we're creating here. So, I'll say tube stamp. In theory, I could restrict this by the endpoint for just timestamps as that's all we're really

[01:32] doing in this series. For now, I'll just do all and hit create secret key. As a side note, if you're interested in adding bump-ups to your text stack, which allows you to analyze any video with AI, think of it like when you attach a PDF to Chad GBT, you can attach a video to bump ups in API. You can go ahead and get started with $5 for free. As you see right there, $5 of free API credits when you create an account. The next one here is going to be GitHub. Simply go to github.com, sign up with your email, and this is free to start as well. The last step here will be creating an account for monetization, which we'll do in a later episode. The way we're monetizing this software is

[02:02] going to be through Google Ads. But alternatively, if you plan on doing a subscriptionbased model, eg how we do it here at bumpups.com, where the user either pays $20 a month, $40 a month, or goes for an annual plan, then I suggest something like Stripe, which I'll create a whole another series on. For now, though, that is going to be the baseline of our tech stack. So, let's go and dive deeper into every single one of these. Now, before we can dive into the fun stuff, we need to install three major dependencies here onto our computer. I'm going to show you step by step how to do this as if you've never coded before, but it's going to be Node.js so we can use React. It's going to be Git so we

[02:34] can use GitHub and Firebase so we can connect with our back end. And before I get spammed in the comments like Corbin, where's the tutorial for Windows and Linux? I already did it for you. I got a Google doc in the description down below completely for free. I'm going to show you these commands with Mac, Linux, and Windows. So, whatever operating system you're on, proceed. Since I'm on Mac, let me show you step by step how to do this with a Macintosh. Step one, open up a terminal window. To do this on Mac, simply search up terminal. To do this on Windows, simply search up terminal, I believe. Before I dive any deeper on

[03:05] what I'm about to show you with these terminal commands installing these dependencies, a couple things. First thing, don't worry if you run into errors or you get confused. This is a little bit heavy on the complexity side when it comes to software development, but once you do this once, you'll never have to do it again. Therefore, any app you create from here on out that's different from what you're creating now, don't worry about these commands. You just got to do it once. This is just setting up our little brick layer so we have a baseline for creating software off of it. Second thing, if you do run into errors or you run into situations

[03:36] where like command not found duh, use a chat GBT chat, use a cloud chat, copy the entire terminal, paste it in there, and follow step by step from the AI model how to install this stuff as each operating system might have a little bit more nuance. Long story short, this is going to feel a little bit heavy when it comes to complexity, but trust me, just get through this part because the next part is going to be super simple AI coding. Let's just vibe. Let's jump back. Step one, we need to install homebrew. If you're on Mac, this

[04:07] is going to allow us to do very easy commands such as brew install node, which you'll do in the future here. But first off, just copy this entire line. You're going to paste it here, and you're going to hit enter. I'm not going to do it because I've already installed it, but you just hit enter, and it'll install Homebrew. Next, we need to add Homebrew to a path on our computer so we can call it within all these different commands. Long story short, you just take this exact line right here, copy it again, and paste it into the terminal with one change. That one change is going to be right here. Your name. Whatever your name is on your Mac, this

[04:39] is where you're going to put your name. So, for me, it's Corbin Brown. What it says right here. Yours might say something entirely different. I don't know what you name it. You might name it like dog computer or computers are fun. Whatever it says right here, that's what you're putting right there. Then you're going to copy this entire line, paste it into terminal, hit enter. The next line you're going to copy is going to be brew install node. Same situation here. Paste it in, install it. This is going to give us the ability to start doing React commands, which is then going to give us the ability to create our first app together through this, which will then

[05:11] be this line right here, npx create react app. The steps shown right here can be applied to Linux and Windows as well. And as I said in that little cut off right there, this part might be a little frustrating. I mean, we're trying to code out software, y'all. This is not going to be like we're going to a park. It is not a walk in the park. You might run into errors. Use the AI helpers to help you out for this very specific step. But don't do this line yet. Just do it up to here. Once you've installed that, we're ready for the next thing. Google doc in the description down below if needed. Next step here is we're going to create the folder that's going to

[05:41] store all of our code. So to do that, quite literally, just rightclick, new folder, and then with this new folder, name the folder of what you want to call it. So for me, I'm going to do tube stamp prod. That's it. Don't add special characters. Don't add capitalization. It might mess with some code later on. So just do all lowercase, no spaces, the name of your folder. You then take this folder right here and place it somewhere that you'll know where to find it. Again, I'm going to place it into my documents folder on my Mac. So once we do that, we come back over to Cursor AI here and I'm going to simply hit open

[06:12] project. Find your folder and open it. So we're here. We've opened up that folder. It should say right up there in the top left corner tube stamp prod. Now let's do the first step here because we've already installed Node.js and the react line should work is we're going to create a reactbase app. Now there is two ways we can access this specific folder in terminal. First way is that within the actual cursor AI itself or VS code or windsurf. You come down here you select terminal and we are inside that folder. Essentially these terminal commands what you'll notice is that it says tube stamp prod right here. That

[06:44] means that any command I do is communicating directly with that folder. This is important to know because if you do commands and you don't see your folder name here, you're just talking to the wind. Like you're just talking to the entire Mac or your entire Windows computer. You want to talk directly to your code folder. When I say code folder as well, it isn't like a special kind of folder. This is just a regular folder. I could throw in like dog images in there if I wanted to. But what I like to do in development and what you'll notice is this is going to be very useful especially as we get more and more into these series is we're going to open up

[07:15] multiple terminal windows together. So terminal again. So we have one terminal right here. On Mac it's command N if you want to open up another one. And then we're going to use these in order to reflect our application. What you'll notice here is that we don't see tube stamp prod on this command line. This means we're communicating directly with our entire MacBook which we don't want to do. So, what we're going to do here is we're going to set up a real quick terminal command that I suggest you save in notes. Whether you have a notes app or stickies or wherever it may be, this terminal command is going to be very important just for you to be able to

[07:46] copy and paste. Very simple stuff. So, for me, because I stored the folder in documents, my terminal command is cd squiggly lineocument/theolder name tube stamp prod. This is the line I'm going to copy. So for example, if you stored this on desktop, you would put desktop here and kind of proceed. This is going to be wherever. It's like the path of actually storing a file. So documents tube stamp prod. What I do is I hit boom. Boom. So now we're inside the folder on both terminal windows. If

[08:17] you're like up to this point, you know what? I'm going to click off. This is already too confusing. You know, I give up. Okay, don't worry. You don't have to do that little cd command. Just simply come over here, like I said before, click this, and you got your terminal window here. You're going to be able to add more like this. So, just do it this way. If you don't want to do it my way, I just don't like doing it my way because what you'll notice through this development phase process, this is going to be a lot simpler. For now, though, you can do the exact same lines here as well. And to really send home that point, this terminal window is the exact same as this terminal window down here.

[08:48] This is just like a UI version within the IDE. But now that we're inside the folder and you see your folder name here, we need to create a React app. So, we're going to come over here and grab this command line here and I will paste it here. Boom. This is going to send off a lot of messages. You're going to see like a ton of stuff. Don't worry, I'm just hacking you a little. You know, I'm just installing the best kind of malware in the industry. It's called the React malware. Don't worry, this is going to just install and create the Reactbased app. I remember when I first started coding, when I saw stuff like this, I was like, "Hold up, this is a little too

[09:19] much." But let this create the React app. You're gonna see all these files up here to the left. And we can keep going. Coffee America runs on Dunkin Donuts. So once you do that, as you can clearly see, I am hacking your computer now cuz it says happy hacking. I'm very sarcastic. So if you can't tell, this is not going to be your normal coding tutorial. You're going to get my personality. So I'm sorry if you're like I've I've gotten to comments in the past. They're like, Corbin, you're making too many jokes. I just want to learn how to code. I'm sorry. Click off then. So once we got our React app, we're going to have all

[09:50] these files up here. And honestly, kudos to you. If you got it up to this point, then you successfully got some cool code here. So let's go and actually run this code so we can see it live in a browser. So this is why I do two different terminal command windows because this is going to allow me to come up here and this is going to be another command line that you want to save into your notes or sticky notes. I like using sticky notes, uh, not physical sticky notes like on your computer. npm start. This is going to render this in localhost 3000, which if you're familiar with development, then you're very familiar with localhost

[10:20] 3000. This is going to be a website URL that you can't share a friend. So, I'm sorry if you got a really cool website or software. They're not going to be able to see it yet, but it's going to be able to render all this code live. So, for example, here, as you'll notice, it says edit app.js and save and reload. And then what you'll notice is that it quite literally says that in the rendering as well. Edit app.js and save to reload. And then up here in the top left you see localhost 3000. Pretty cool. And as a rule of thumb, what makes local development really fun is that I can add anything like bacon. Oh, and

[10:50] ham. Save. And boom, bacon and ham. Instant reflection. There's going to be some nuance to that for software development when it comes to actually pushing to a live website link. The delay there. But for now, what you need to understand is that when you make code changes here, you can see a live reflection within local host 3000. All right. For now, I'm going to remove bacon and ham. We don't need bacon and ham anymore. Let's do the next step here, which is going to be connecting this repository, making a private repository to GitHub. So, first off, let's go to our GitHub account.

[11:21] This right here is my GitHub. You can follow me. This is my public one at least. And we're going to go ahead and create a new repository here for the purpose of this tutorial. So, we're going to come up here to new. We are going to name this repository. What I like to do is I typically like using the exact same name for my code local folder as a repository folder. That is not required, but that is just what I like to do. So, we're going to go ahead and name this tube stamp proud. You can give a description. And because of the fact that we're creating an application, unless you want to open source it and be public about it. I'm assuming a lot of you that are creating software want to

[11:51] do private. So, we're going to do private. And then from here, we're going to simply hit create repository. So, now that we've created a repository, we got a couple of commands to do here. But the first major thing we need to do before we can even start messing around with this private repo is making sure that our cloud GitHub profile is connected to our local machine or local computer. I need to stop talking so Debbie your laptop connect it to your laptop so that we can do a bunch of commands between the two. Now in other tutorials I showed you how to do this with a private token. This tutorial I'm going to show you how

[12:21] to do this with SSH. Now SSH sounds very scary. Don't worry, it's not as scary as waiting in the line for DMV because it just takes forever. But SSH is going to allow us to basically create like a nice mutual connection between your computer and your Git profile that makes it so that it never expires and you can always do git commits, git pulls, and you don't have to deal with a lot of the BS that's usually associated with a private token. Private token is like a key that only works for 30 days and then it doesn't work anymore or 60 days, whatever you set it to. Let's set up our SSH. To do

[12:52] this, we're going to go to our settings and then we're going to come over here to SSH and GPG keys. Once we're here, this is where we're setting up our SSH key. What I'm about to show you is going to seem extremely confusing and complex, but I'm going to make it as simple as possible. Use AI for help. I could have went the easy route here and just done a private token, but I really want y'all to go full force on your softwares here. So, let's learn how to do it. We're going to hit new SSH key. So, coming over to terminal here, I'm going to open up a new terminal window. I'll make sure I leave all these commands in the Google doc as well so that you can kind of copy

[13:24] and paste and just know what's happening. For now though, I'm going to open this up and we're going to do this together. You're going to want to do it this way so that you never have to deal with all this get stuff longterm when it comes to private tokens. So, first things first, we need to create this key locally. So, to do this, we're going to use this line right here. Now, what is very important for you to understand about this line is this right here is your email. this email. Use the one that's associated with your GitHub account. From here, just hit enter. There we go. When you're prompted with this, hit enter again. And as you

[13:56] notice, I already have a key created, but for this tutorial, I went ahead and deleted the one in the cloud. So, I'm going to overwrite this one. For this, enter again. Enter again. I'm not entering anything there. Just hitting enter. I'll also have to delete this SSH key as well because obviously you're seeing it right now. So, keep that in mind. This is a high-risisk variable that you don't want leaked to the public. But for the purposes of this tutorial, I'm g show you how to do it. So once you have all this, we need our full key so we can actually leverage it in GitHub. So I'm g use this line right here. I'm g hit enter. This is my full key. Please don't

[14:26] use it. I guess like try to use it. We're going to go and take this line here, copy it. I'm going to come over here. I'm going to paste it. And then give this a title like MacBook key. It can be specific to whatever it is. So this could be anything. This could be rainbows and fairies. Make sure the key type is authentication. And then we're hit add SSH key. This is going to prompt you again to log in. Once you do that, you will see that it's right here. It hasn't been activated yet because we'll activate it right now together. But we're good to go. We've successfully connected our local computer to GitHub.

[14:56] We don't have to deal with the annoying thing of private tokens. We are connected. We are good to go. Now, if you've gotten this far up to this point, really pat yourself on the back because we're basically past most of the complex stuff when it comes to building software. Ironically, it's the setup phase that seems pretty complex, not the actual code itself. So now that we've connected our GitHub account to our computer, our next step here is installing GitHub. So with Mac, now that we've installed homebrew, we can just do brew install git. This is going to give you the ability to use git commands that we'll use throughout this entire series.

[15:28] Make sure to follow the same steps for Linux and Windows. So after you do brew install git, which quite literally is going to your project here, putting in that command, installing git, we need to do the next one here, which is get in it. And it might. So, we're going to type in the command get init. Hit enter. Once we do that, make sure you have this line right here. You're going to copy this right here. This is very important. And we're going to do this following line right here. Get remote add origin. And then that line we just copied. Hit enter. Make sure while you're doing all this, you're connected to two stamp prod or whatever your folder name is. Make

[15:59] sure that's showing. It isn't just showing like your initial little wording right there. So, now let's go ahead and do our first commit so we can connect our local code to the cloud. to do this. We're going to do these lines. Get add dot get commit-m first commit. I'm going to tell you right now, you're going to get so used to these commands. They're going to be like burned into your brain. So, you'll never forget these commands. When I first saw them, though, when I was just starting to code, I was like, whoa, this is too many. It gets easier. Enter. And then

[16:29] we'll do get branch- m main. Get push- origin main. I know that sounds like crazy alien language, but you'll get used to these commands as you keep going. Enter. It's going to do the push. We've successfully connected with our SSH key. So, we have the ability to access this private repo. Let's jump over to GitHub. Reload. And there we go. Is that not cool? Come on, y'all. You got to give me a like for that one. That one's a little crazy. He said, "Hold up. This guy actually showed me how to connect local code to the cloud." I did. So, let's just do a real

[17:01] quick branch push just so you can understand how to do a commit and then we're going to keep proceeding. So coming over here to the readme file which has no relevancy in the sense of like you can delete it. It's not going to break anything. If I just say that was cool exclamation mark and then go back to terminal here we can do get add dot getit commit dashm every time you make a change in the code that you want to push to the cloud. These are the commands. So write them down. Cool quotation mark get push origin main.

[17:31] Those three lines right there are very important. And the main is going to be whatever the branch we're currently in. Now, in typical software development, you're rarely ever pushing directly to main. Usually, we'll create a separate branch. I'll make this make more sense as we go through the series, but just for the example and just for showing you how this works. Get push origin main. You already saw what the readme originally looked like, which is this all right here. Watch me reload the page and we just see that is cool. That was cool. So, that knocks off two. We've successfully installed no.js, created a Reactbased application. We've now

[18:02] successfully also connected that to our GitHub in a secure way using SSH. Let's get to the last part here, which is going to be Firebase. So, coming over here to app.gs, we'll have an entire front-end lesson that you'll see later in this series. We'll dive deeper into coding in this context, but let's actually connect this to a live website link so we can see this and view this for real. So, coming back here, we're just going to go ahead and connect our Firebase project to this so we have a backend that we'll be able to use and leverage in later episodes. So go ahead and come to Firebase and we're hit create Firebase project. One thing to

[18:32] know about Firebase and what makes software development amazing is that a lot of software is pay-per-use. For example, you're not really getting stuck into a situation that by you using Firebase, you're going to have to pay $30 a month no matter what every single month. I would check out their Blaze plan that's pay. You'll notice it is extremely generous. You will probably never really get charged when developing in Firebase unless you get a ton of different traffic from a ton of different sources. Side note though, if you build out software infrastructure

[19:03] that's not that optimized, you could find yourself in a situation where there's too many reads, there's too many writes in the docs. This will make more sense as we keep going here. All you need to know is it's paper use. You're not locked into anything. Let's jump back. So, what I like to do is keep all my naming the same. So, for my local folder, for my git repo, I'm going to do tube stamp prod. And then we'll come down here and hit continue. If you want to join this program, you can. So, we hit continue here. Coming down here, we're going to enable Google Analytics and I'm going to show you how to set that up. So, I'm going to hit continue again. For the Google Analytics account, choose it. For me, I'm going to create a

[19:34] new account here. So, I'm just going to call it Tube Stamp Real. Save. I'm going to checkbox that. I accept Google Analytics terms. Create project. Google Analytics is amazing. It's a free add-on to a lot of Google products that allows us to see viewers, users, where they are per region, etc. We are creating our backend Firebase. Continue. In this series, we're going to be building a web app together, but as I got suggested in our builder console community, one of our members here was like, Corbin, you

[20:05] do a lot of stuff with web apps. Let me see something for mobile. So, I'll make sure I do another series that shows out how to build out architecture for a mobile app and see how we could do that in this step-by-step type of process. For now, though, we're going to choose web app. One significant advantage of web apps is that they're universally accessible across the world due to the fact that it's typically just a website link. For the app name, we're going to just go with the same two samp. And it wants us to set up Firebase hosting. So, we might as well just kill two birds with one stone. This looks good. Register app. Firebase hosting is what's

[20:35] going to give us the ability to deploy this to a real website link and on top of that add custom domains because the domains they give are a little crazy. I don't really like them. So, we'll keep going. So, now that we've created our Firebase project, we need to connect some dots between our local code and this new backend. So, as you can see, the first thing we're going to do here is mpm install Firebase. So, coming back over here, we're going to go to our terminal window and simply put in that line and hit enter. What's great is that since we've already installed Node.js GS and Node and all that shabbam. It'll be able to recognize that command and install Firebase for us. npm install

[21:06] Firebase. Make sure it's doing it in the correct folder. Once this is installed, I'm going to show you how to securely connect high-risk variables. That sounds very uh scary, I know, but don't worry. So, what you'll notice here is that we get an update here. Tam prod. Nice. Nice. Uh it installed the relevant dependencies of Firebase here. The next step here is going to be creating a file that will store all this information. The Firebase config is blurred out because obviously these are high-risk variables and I can't publicly disclose those, but you'll see them. You'll be good to go. Typically, your project ID

[21:37] will be quite literally the project ID you created. Right from here though, we're going to go back to cursor inside our source folder. We're going to click this new file, firebase.js. Boom. Inside our Firebase.js, we're going to copy this code and then paste it in Firebase.js. Once you pasted it into Firebase.js, js. We're going to create a new file here that's av. So say new filev. This is where we're going to store high-risk variables and then reference them in the code. The one thing you'll know aboutvs is that they'll never push

[22:08] to your git repo in the cloud because these are high risk. Therefore, you don't even want them to be circulated in the cloud. So we're going to create our secret variables right now. Another thing for you to know of how this even works is that you might be like Corbin, what is this git ignore? That is what GitHub will ignore every time we push something. So all I need to do to make sure it ignores this is EMV save and then it will never push this to the cloud. So right here I'm going to leverage cursor AI's little AI chatbot to help me out here. So what we're going to say is for Firebase.js, can you make

[22:38] each high-risisk variable in this structuring? I'm going to paste an example process.react app API key. This will make more sense. I'm going hit enter here. Then I'll explain. So this is pretty good. What you'll notice is that in Firebase.js JS once you accept the commits from cursor AI here it's going to structure it as follows process. Menv.react API key react app off domain and so on. When referencing data from this EMV file the way you reference it is process.v the file itself and then the name we give it

[23:10] inside the file. So as you'll notice here we're going to give the name here say equal and then give the actual value there. So simply react API key. When we set it here, it'll be able to read it right here. So I'm going to cover it up the best I can. But as you can see here, we have the exact naming here. This is our EMV file. Seven lines that are then referenced here. Connect the dots. And here is one troubleshoot that you can do if you're running into errors up to this point, which you shouldn't have because we haven't done anything yet other than

[23:40] just set up our variables. Add console logs. Console logs are your friend. That's why we even go as far as calling the community builder console log. add console logs here to see if it can read. How do I add console logs Corbin? Simply select this ask cursor AI add console logs for variables and see if they show up. So now that we've connected in a secure way our relevant variables, let's go ahead and install Firebase CLI. This is going to give us the ability to make sure that we can log into our Google account connected to our backend in our local code. Same situation here. Copy.

[24:12] We're going to paste this line. npm install g Firebase tools. Hit enter. Make sure you're in the folder that's relevant. When you get warnings like this, don't worry. It's not nothing's broken. This is just a standard practice in code for to give warnings like this or like nine vulnerabilities. Don't worry. Okay. So, with that done, next step. Now, we are going to actually deploy this to a live website link because we wanted to set this up with hosting as well. So, we might as well kill two birds of one stone. To do that, we're going to do Firebase log out. If this is your first time, you don't have

[24:42] to do this command, but just for general practice, anytime you're coming to your computer to code for this software again, Firebase logout, step number one, and then do Firebase login. This is going to open up another tab on your computer. I'm going to hit Y. Make sure to choose the email that's associated with your Firebase account. Enter the password. You're then going to be prompted here to hit allow. We're going to say allow. What we're doing here is we're giving the code that's locally found on our computer the ability to access Firebase our backend allow. If

[25:13] you did these steps correctly, you'll receive this message. So now that we've done that, we need to do the next command here of Firebase init. Before we do Firebase in it, let's make sure we're using the correct project. So we're going to do Firebase use and then your project ID. Your project ID is what we set up in the very beginning and what we called it. So for me, it's Firebase use tube stamp prod. Enter. There we go. It should say now using project tube stamp prod. If you're running into issues like it's not even showing the project for some reason, make sure you logged in and connected with the correct Firebase email. That initial CLI situation, make

[25:45] sure that email is the one that's associated with the project you created. Here though, all we need to do is Firebase in it. Enter. First thing we're going to do is do hosting. So, I'm going to do space here. Enter. What do you want to use as your public directory? We'll just go with defaults here. We'll do public. Enter. I'm going to say no for now. I'm going to say no again. And it's initializing. Screenshot that. Copy that. Proceed. There might be a change we need to do here because sometimes it overwrites some stuff that causes a white screen on rendering. But let's just see if it works. Here is the major command line that you're going to use

[26:15] anytime you want to build what you did in the front end and connect it to your back end. This is going to be npm run build firebase deploy. Enter. MPM run build is the command to build your React front end. Firebase deploy is to deploy your most up-to-date code to your backend. So what we should see at the end here is going to be two URLs that we can click. There we go. Deploy to two stamp prod. These steps are also outlined in setting up Firebase hosting. Simply go into hosting, get started. Next, next. Continue to console. So it

[26:46] may prompt you to go on the Blaze plan, which is pay as you go. But don't worry, as I described before, you're basically never charged unless you get extreme amount of usage. So we can just go to this like link here and paste it. Copy the link or simply just come down here to upgrade and we'll select the pay as you go plan link cloud billing and there we go. Done. With that done, I'm going to redeploy and confirm this works. In terminal to get access to commands fast, you can go up and down on the arrow key for all past commands. So for me, I'm going do npm run build again. Firebase deploy. As you build bigger and bigger

[27:17] applications, this deploying process takes a little bit more time. There's going to be a method and technique that software developers use where it's either between a monor repo or a polyreo. Simply said, either you have all your code in one folder, backend, front end, monetization functions, or a poly repo where you actually split it between the different folders. So, one folder is just the front end, one folder is just the backend. is a little bit more complex workflow. But in this entire series, I'm going to show you how to do with a monor repo, which longterm

[27:48] you could make into a poly repo. In addition, when I say repo, that is a shorthand way of saying repository or another way of saying where the code is in the folder. So once it's done, we'll get a deploy complete. Let's check it out. Copy this URL right here or simply come back to hosting here, reload, and we can click it right here. You'll notice your most recent commitment open. And then sometimes this happens. So, let's fix this. When you see something like this, this is associated with the fact that the React front end didn't connect to the hosting correctly. So, let's fix that. To do that, what we're

[28:19] going to do is that one of these folders got overwritten. Now, in this case, for some reason during initialization, it didn't create two fundamental Firebase files. So, we're going to manually create those together. This is good this happened, though, because if this happens on your end, you can simply use Cursor AI here to help you out to create these files. But, let's go ahead and write them manually right now. So, we're going to go outside the source file here. We're going to rightclick and we're going to say new file. The first new file is going to be firebase.json. Hit enter. And the second one is going to be firebase circ or firebase erc. Enter. If these don't

[28:51] show up during the initialization process, they should, but you know code can be buggy. Ask cursor AI to help you write these and just give the file names. Once you've gone through the process of initializing, you've deployed to a link, etc. So therefore, in our Firebase.json, that's where you're going to see this very fundamental line right here. public should go to the build folder. This folder right here. Pause this screen. Screenshot that if you need the code in the Firebase.sarch, this is where we're identifying the project. Simply putting projects and then your project name. So mine is tube stamp prod. With both these added now, we

[29:23] should be able to do Firebase deploy and it should work. So as you already know, npm run build firebase deploy. There's a chance here we get a white page, but if we do, we'll fix it. But I think this should work. Deploying to tube stamp prod with it done. Let's check it. And there we go. Reloaded the page and we now officially have our nice little URL. I'll scroll down here. You can see it right up there top left. Tubestampprod.webapp. We'll be able to make custom domains later in this tutorial as you'll see. But for now, we've successfully deployed this to a live website link.

[29:54] Troubleshooting real quick. Some of y'all are going to go through these steps and get a white screen. That white screen when you render it to a website that has to do with the firebase.json third line right here. It's going to say public. Switch that to build. That's going to solve that situation. So, make sure to leave a like if that solved it. All right, with all that done, let's do a commit. This is like us in Mario and we hit the checkpoint flag. We're going to be able to come back to this point if we mess up from here on out, but we're at a good stage here. So, I'm going to do get add dot get commit dash m

[30:24] Firebase get react. All set up. Enter. And then we're going do get push origin. And this is going to be the branch name. And we're still in Maine, but in these future tutorials, I'm going to create a separate branch and show you how to do PRs and more proper way of software development. But we're just setting up our environment right now, so it's not that big of a deal. We'll do get push origin main. Enter. Now, all this code, all this work is saved and we have a checkpoint. So, from here on out, if we mess up, we can revert back to this

[30:55] commit. Boom. That covers the Firebase connection. This tutorial was a lot, I know, but now you've successfully created a React front end. We've successfully connected it to a backend and we have version control of GitHub. So now that we've successfully created our environment so we can actually start coding, our next lesson here I'm going to go over frontend development. But I want to point out if you're new to coding and you have no coding experience. This tutorial compared to the rest is probably going to be the most frustrating because it has to do a lot with terminal has to do a lot with

[31:26] all this like Firebase use Firebase list. Oh get command here, homebrew here. Trust me, just get past this part. This might take a little bit of brute force, a lot of AI chats, but once you get past this part, now the fun begins and we get to start coding a real software. We set the baseline. So, as you already know, those are two random videos. That is my face. I'll see you in the next