How To Use Cursor AI To Build Software Full Guide

Let's learn how to use Cursor AI📅 2025-07-05

Watch on YouTube ↗

Transcript

[00:00] no coding experience and I built out this entire AI software and I'm going to show you how to do it as well. This works. Not only do we have a nice frontend where I put in a YouTube URL, it will show you the relevant YouTube thumbnail and title by connecting it to YouTube's API which I show step by step. In addition, I show you how to connect it to third-party APIs like chat GBT, Claude, Mailchimp, Bumpups API, and we can actually generate timestamps. And boom, we got real time stamps from the software we built. In this series, you're going to learn how to actually

[00:30] deploy this software to a real website link, tubestamp.com. Don't believe me? Search it. It's real. I'm also open sourcing the entire code. Look in the description down below. There's going to be a GitHub repo that's going to allow you to download this entire software end to end. And in this series, I provide free resources like this Google doc that shows you how to set up your development environment correctly. So, no more watching a YouTube video, you put in a terminal command for coding, and it just gives you an error. I solve everything whether it's for Mac, Windows, or Linux. My goal of this series was to teach it

[01:01] as if you've never touched a line of code in your life. So, I made it as simple as possible. This is the simplest it's going to get because end of the day, I know that if you watch this entire series and you build out this software with me, you're going to unlock parts of your brain that's going to allow you expand way past this and build really cool stuff. So, make sure you grab yourself a cup of coffee as I'm going to let Pasc Corbin take over here and start this entire series. Always check the description. Free Google Docs, free code, free everything. So, make sure you leave a like. I'll see you there. No coding experience is required

[01:32] to build out software. Now, I'm going to show you how to use artificial intelligence to build out a software from complete scratch. We're going to use AI to do all the heavy lifting. And for me to best showcase this, we're going to break it down step by step, lesson by lesson. So, by the end of this series, you will quite literally be able to deploy a live website link. A website link anyone can access on the internet and start using your software. Sound good? Let's jump in. As it says on the whiteboard right there, no coding experience, build software. What I'm about to show you in this series is going to be broken down into

[02:02] multi-steps. So lesson number one is we're going to go over a tech stack or in another way of saying this, the tools and apps required for us to actually deploy a real software to a website link that users can start using. The second lesson here is going to be the setup lesson. And I already know a lot of y'all are going to like this one as a lot of comments I usually get is Corbin, I'm getting errors in my terminal. No.JS doesn't exist. this lesson I'm going to go over how to connect this to GitHub, which I'll explain more of why we even do this, but essentially everything we need to do to correctly set up a

[02:33] developer environment. Third lesson is we're going to build out the entire front end together using artificial intelligence. Fourth lesson is we're going to build out an entire backend using artificial intelligence so we can provide value to our consumer. Our fifth lesson here is going to be how do we actually monetize this and start making money off the software. And the last part here is we're going to actually launch the software. And here's the best part cuz you might be like, you know what, I don't know if this is real. I don't know if this guy's actually going to teach me. Check the description down below. By the end of this series, I'm going to put the actual software we create together. It's going to be live and you're going to be able to use it. And then we have a nice little bonus lesson here that you can find in

[03:04] builder's console log. Check that in the description down below of pitfalls that I experienced when building out my own software bumpups.com. These are lessons that I learned while building out software of mistakes I made that costed the development process months. So, let me save you those months and you can learn more in that lesson. Today's lesson though is we're going to go over techstack and all the tools required to actually build out software. So let's check out this little diagram here. I've set up a nice little diagram. I I did some drawing, okay? And we're going to see everything we need to know. So first step in developing our software is how are we even going to code it, Corbin? Like what are the tools needed to code

[03:36] in this series? I'm going to show us how to do it with cursor AI and chat GBT. Saying this, I want to go over two major things here. So the question is why are we using cursor AI and chat GBT? to answer the first one. To be honest with you, I personally like developing a VS Code and I like keeping the IDE and AI separate, but what I've noticed with a lot of people that view this channel or ingest this kind of content, people tend to lean towards Cursor AI type of content. So, I'm going to use Cursor AI as the main IDE, but we're also going to be using Chad GBT for more complex code, which I'll explain more of why I do

[04:07] this. So, cursor AI will be the IDE, but as you can assume, you can use any integrated development environment. Windsurf, cursor AI, VS Code, all these will work in this tutorial and the skills that you'll learn can be applied to most of these app building platforms. So then it comes to the second question here of chat GBT. I personally am going to use in this tutorial 04 mini high 04 mini. I'm going to show you why you would choose either one. And by the time you watch this tutorial, those models might even be better. So regardless of whether you watch this 2 weeks after it got posted or 2 years after it posted,

[04:38] the skills that you're going to learn when it comes to prompting of AI will stay the same. Let's go and jump back over and see the actual infrastructure of the software building or another way of saying connecting the dots. Have a nice live website link that works. First things first, the front end. Everything you see right now on YouTube when you look around the nice little like button, you might want to click that like button just to test out the front end. The front end we're using in today's tutorial will be React. Everything I'm about to describe in this entire tech stack can be interchanged depending on your use case and your context. But this front end will be React. We love React.

[05:09] React is made by Meta. It's really good, very, very fleshed out library that allows us to create really nice UIs. So now that we know the front end we'll use, what is the value we're going to provide our end consumer? And that's going to be from bumpups.com. We're going to leverage BumpUps API here and specifically one of its API endpoints. What Bumbos allows us to do is put in any video found on the internet and extract value through API. Taking a step back, if you don't know what API means, it's simply this. We built out a nice little front end, nice little application. We need this little

[05:41] application to connect to something else on the internet to provide value for a consumer. So, the software we're building today is going to provide timestamps on YouTube videos. So, I'm going to take this current website here, refurbish it, and we're going to be making a freeto use AI timestamp generator for any content creator that will also monetize with Google Ads. To do this, we're going to be leveraging the API provided by BumpUps here of generate timestamps and calling this API call, which I'll show you how to do step by step. Mind you, this is the value that I'm providing in this software.

[06:11] This right here is going to be the value you provide in your software. So typically if you're building a software that needs to have CHGBT integrated into it, this is where you're going to have your Chad GBT API endpoints. Regardless of what it is, typically in software infrastructure, you'll build out custom pipelines for I'm speaking too crazy right now. Let me take a step back. I'm trying to speak as simple as possible. Essentially, in software, some code will be custom. So for example, the software I'm developing for bumpups.com, the code that's custom is how we handle that video file, extract the data, and then

[06:42] give the AI output. Whatever your value is, this is either going to be through connecting through a third-party software. So, for example, in this video or this series, we're connecting to this third party provider for the API, but in theory, you could build out your own version of what BumpUps does. It just requires a lot more complex code and a lot more work around. This is a long-winded way of me saying, yeah, you could use the chat GBT endpoint from Chad GBT, like the chat completion request, the API, or you could build out

[07:13] your own version of Chad GBT. Which one sounds easier? Building out your own version of Chad GBT or just leveraging Chad GBT's API? I think we're leaning towards the API. So, now that we know our front end in this tech stack, how we're going to provide value to the end consumer, what is our backend? Now to be clear, a backend is how we actually are going to be able to process all the requests in the software. When I say a request, that just simply means, for example, if you ever open up Tik Tok or Instagram, you're like, I'm going to create a new Instagram post. When you say create, that's going to be a request

[07:45] sent to the back end. It's functions. Translate that to just actions. What are the actions we're going to give our app? And the actions and the way we're going to give our app actions is going to be using Firebase and GCP. Your next question might be is Corbin, why are you mentioning both? Is because Firebase is a product of GCP. Firebase is a nice friendly user interface that's going to be very simple for you to understand as a new developer. These are interchangeable depending on your tech stack. I know there's a lot of people out there that love AWS and Amazon's infrastructure. Personally, I like

[08:16] Google when it comes to their GCP. I'm familiar with it. I go with what I know. So, now that we have that, this is like the major part of the cake here. Like our cake is going to be baked. I want to bake a cake. Coming down here, how are we going to have it so we have good management, version control, deploying this to an actual live website link? We need to use something like GitHub. And your next question might be, Corbin, why are you calling it cloud code? I'm going to try to use as simple terms as possible in this entire series. Therefore, when I describe stuff, I'll be giving analogies and just really trying to dumb it down to make it as

[08:47] simple as possible because in reality to build our software, as you can see, it's really only a couple puzzle pieces here. So the way I want you to think of GitHub and cloud code and everything we're going to do in GitHub together is this is our way of taking the code that is locally found on your laptop. When I say locally that means that the code exists in quite literally a folder like a folder that you hit command or rightclick new folder that's where your code exists and if you don't deploy this to something like GitHub if your laptop were to break get destroyed you lose the code forever. Therefore, we use GitHub

[09:18] to not only store code in the cloud, but also this helps with version control. When I say version control, let me give you an example. Have you ever played Mario before? You know when you play Mario and it's like level one and you get to the flag, you hit it and it's like I think it's a green flag and it's like checkpoint made or when you're playing Skyrim, this would probably be a better one. When you're playing Skyrim and you go to like Winterfall and you're basically about to wild out and attack everyone and before you do that, you like save like a little checkpoint in the menu. That's where GitHub comes into play. This is when we're creating applications and let's say we get to a checkpoint in our application that we're

[09:49] like, you know what, this is really good. I like this version. We'll save that as a branch and merge that into main and we'll be able always to revert back to that commit. What this allows us to do is code in a more free way so that if we're coding past that checkpoint and let's just say we absolutely mess up, which will happen in software development because one, you're coding with AI, but two, it just happens. You can revert back to this checkpoint in GitHub and not have to worry. Just like when you go to Winterfell, I think it's Winterfell. Let me know in the comments. In Skyrim, you do like Fra and you like

[10:22] kill half the village, you can revert back to the checkpoint before you started attacking the village. Does that make sense? Let's go back. I love Skyrim growing up as a kid. That was a lot of fun. And the last most important part here is going to be monetization. How are we going to make money? And the way we're going to do that today is going to be through Google AdSense. Now, Google AdSense is going to allow us to put those little banner ads that you see in the left, the right columns that you typically see on like blog sites. I think Stock Twits uses it as well. So, I'm going to show you how to leverage that. All in all though, this is the tech stack and I'm going to show you how to set up everything here as simple as

[10:53] possible. Trust me. Therefore, in the next lesson here, we're going to go over setup. I'm going to show you how to set up your development environment so you can start actively coding in the most secure and productive way. So, that goes over the entire tech stack. Everything we need to know about building software at a baseline, just laying the bricks out so we know the tools to use on how to build software. Make sure to leave a like. 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

[11:24] 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, 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

[11:56] 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. Front end, 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 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

[12:26] 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 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 tech 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

[12:57] 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 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

[13:28] 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 Noode.js so we can use React. It's going to be Git so we can use GitHub and Firebase so we can connect with our back end. And before I get spam 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

[13:59] 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 what I'm about to show you with these terminal commands, installing these dependencies, 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

[14:31] 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 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

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

[15:35] 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 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

[16:06] 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 be this line right here, mpx 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

[16:38] going to be like we're going to a park. This 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 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

[17:08] 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 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 NodeJS and the react line

[17:39] should work is we're going to create a reactbase app. Now there is two ways we can access this specific folder and 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 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

[18:10] 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 gonna be very useful especially as we get more and more into these series is we're going to open up 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

[18:41] 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 whatever it may be, this terminal command is going to be very important just for you to be able to copy and paste. Very simple stuff. So, for me, because I stored the folder in documents, my terminal command is cd squiggly lineocument the folder name tube stamp prod. This is the line I'm

[19:12] 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 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

[19:44] 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. 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'll paste it here. Boom. This is going to send off a

[20:16] 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 Reactbase app. I remember when I first started coding, when I saw stuff like this, I was like, "Hold up, this is a little too 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

[20:46] 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 gone 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 these files up here. And honestly, kudos to you. If you got it up to this point, then you've 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

[21:17] 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 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.

[21:48] 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 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,

[22:19] 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. 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

[22:50] 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 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

[23:21] 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 order tutorials I showed you how to do this with a private token. This tutorial I'm going to show you how 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 could

[23:53] 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 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 make it as simple as possible. Use AI for help. I could have went the easy route here and

[24:23] 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 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

[24:55] 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 of this, hit enter again. And as you 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

[25:25] 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 going to 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 going use this line right here. I'm going hit enter. This is my full key. Please don't 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

[25:55] 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. 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

[26:25] 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. 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

[26:56] type in the command get in it. 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 tube stamp prod or whatever your folder name is. Make 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

[27:29] 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 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

[27:59] 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 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

[28:30] 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. 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.

[29:02] 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 Noode.js, created a Reactbased application. We've now 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.js, we'll have an entire front-end lesson that you'll see later in this series. So, 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

[29:33] 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 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

[30:05] extremely generous. You will probably never really get charged when developing a Firebase unless you get a ton of different traffic from a ton of different sources. Side note though, if you build out software infrastructure 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

[30:35] tube stamp prod. And then we'll come down here and hit continue. If you want to join this program, you can. So, we 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 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

[31:08] 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 do a lot of stuff on 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 can 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

[31:38] it's typically just a website link. For the app name, we're going to just go the same to St. Prog. 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 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

[32:08] 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 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. Tamp prod. Nice. Nice. Uh it installed the relevant dependencies of Firebase here. The next step here is going to be

[32:40] 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 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

[33:12] 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 about is that they'll never push 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

[33:44] then it will never push this to the cloud. So right here I'm going to leverage cursor AI little AI chatbot to help me out here. So what we're going to say is for Firebase.js, can you make each high-risisk variable in this structuring? I'm going paste an example process.v.react app API key. This will make more sense. I'm going hit enter here and 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.vreact envreact api key react app off domain and so on when

[34:16] referencing data from this env file the way you reference it is process the file itself and then the name we give it 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 act naming here. This is our EMV file. Seven lines that are then referenced here. Connect the dots.

[34:47] 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 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

[35:18] 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. We're going to paste this line. MPM installg 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

[35:49] 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 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 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

[36:19] doing here is we're giving the code that's locally found on our computer the ability to access Firebase our backend allow. If 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 of what we called it. So for me, it's Firebase used tube stamp prod. Enter. There we go. It should say now using project tube stamp prod. If you're running into issues like

[36:50] 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 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

[37:22] 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 anytime you want to build what you did in the front end and connect it to your backend. 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 stamp prod. These steps are also outlined in

[37:53] setting up Firebase hosting. Simply go into hosting, get started, next. Next, continue to console. So it 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,

[38:23] 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 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

[38:54] is just the backend. is a little bit more complex workflow, but in this entire series, I'm going to show you to do with a monor repo, which long-term 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,

[39:25] 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 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

[39:55] 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 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 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

[40:25] 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 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.

[40:56] I'll scroll down here. You can see it right up there, top left, tubestamprod.app. 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. 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 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

[41:28] in Mario when 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 do get add dot get commit dash m 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 main, 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.

[41:58] 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 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 front-end development. But I want to

[42:29] 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 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. Let's use AI to code out our entire front end for application.

[43:00] Welcome back to the series where I'm showing you how to build out an entire software as if you have no coding experience. Let's jump in. Welcome back or hello to those that are watching the longer version of this video where all of them are combined. In this video, we're going to be checking out the front end here. Everything we need to know about the front end when it comes to creating the correct structuring, connecting with thirdparty APIs, and doing it all with the graciousness of AI. So, let's do it. So, here's what we're going to learn in today's video. First thing we're going to learn is how do we create a landing page? And more importantly, how do we create a landing

[43:32] page with good structuring? So, I'm going to show you how to build out front-end architecture that's scalable, refraracting components, and what it means to build a real website page that has code rendered onto it. The next skill you'll learn here is how we integrate third-party APIs into our application through the front end. In this context, this will be YouTube's API and Bumpup's API, but the skills and steps you learned here can be applied to any API provider. Following this, we're going to create it so that it is responsive. So, it works on our desktop,

[44:03] very large screens, on our nice little phone, mobile, everything we need to know about responsiveness when it comes to front-end development. And lastly, we're going to set up our search engine optimization metadata, our fave icon, or the little icon you see right on your little tab right there. the actual way it shows up in search and how we do this when creating our application in this way. Before we dive any deeper here, if you just clicked on this video, you're watching the third lesson in a multi-part series. If you want to see the first lesson, check out the playlist down below. Click it. The first lesson goes over tech stack. Second lesson goes

[44:34] over setup. Now, we're in the front end. So, don't leave those comments like, Corbin, what are you talking about? How did you even get a cursor AI project going? How is this on a live website link? You missed the earlier lessons. Let's build our skeleton. And no, no, not not the skeletons you see on Halloween. I like to call skeletons in front-end development of our overall structuring of how we're going to present our landing page. So, let's take our little pencil here and start drawing. So, a landing page is pretty simple as there's going to be probably three major parts to a landing page. For our landing page, we're going to have the top bar here, which we'll call the navbar. The middle part here, we are

[45:06] going to be doing the actual value we provide the end consumer, which will be providing that YouTube link that's going to then translate into timestamps. So, we'll do a little URL right here and our little submit button. S for submit. This we'll call timestamp component. Timestamp component. Now, what's great about this tutorial is I'm going to show you how we take Figma designs and then translate this into the web app. We're going to kind of scour through all their templates, find one we like, then we're going to convert that into code that we'll use on tubestamp.com here for the software we're creating. After the

[45:37] timestamp component, we're going to add another section here that's going to link off to bumpups.com. So I'll just add little cards here for now. This one we're calling bump-ups component. Coming over here, we shall call this bumpups component. Now this is twofold of why I'm doing this. First off, the way we're even getting the timestamps is using bumpups API as referenced in the earlier tutorials here with this timestamp endpoint. And in addition, this bumpups component is going to offlink to bumpups.com. So users that maybe want to get more out of video other than timestamps are going to be able to link

[46:08] off to the main site of bumpups which allows you to analyze any video and extract data out of it for whatever your context may be. And for anyone wondering like Corbin, who cares? You're just using the third party provider bumpups. Why would you link off to it? Well, that's just cuz I created bumpups. So therefore, we need to give a little promo to Bubbups. Give a little love to bump ups. Okay. And the last one here is going to be our footer. This is typically where we're going to put legal jargon. This is going to do off links to maybe social medias, everything of that nature. So, we'll go over here and we will call this footer component. This right here has successfully created a

[46:38] nice little landing page that we're going to now translate to code. Now, what you can do in your context is what a lot of people like to do is what they call them wireframes. Well, they'll actually build out their entire application in a visual way of doing this and then translate it into code. Let's go ahead and start off here by grabbing our Figma design that we want to leverage. So, coming over to Figma here, they have a bunch of free templates. Now, I'm not going to do this the traditional way that you might think. I'm not going to use some weird conversion software because I usually don't like those anyways. They don't really work effectively. I'm going to show you a method that I personally use

[47:08] if I like a design found on a front end and how I personally take that code. Now, scroll through here, find the design you like. Maybe you like this one, shopping website. Maybe you like this one, little toggle switches, or you like this travel website. Personally, the one I'm going to use here is going to be this positive landing page design. The reason I like this one is because typically when I develop frontends, I usually opt for like a dark UI because the fact that, you know, if it's like 1:00 a.m. at night and you open up the website, you like, you know, kills your eyes. I like this one though because this one is a light UI. And when I say

[47:38] light and dark, that just quite literally means the base template of the UI. Eg. Notice how this is white in the background and then Figma here is dark in the background. This is like a darker theme palette comparative to this is a lighter theme palette. I like this one though because of the coloring schema. So, I'm going to open up the project here. And the coloring schema that I like about this is this green. This is a nice green that looks cool. I do like how they have like the little highlight effect here. And overall, this is enough for me to work with to create our front end today. So, I'm going to go up here to desktop and phone styles. And as you

[48:09] can see, has all these different renderings here. I'm going to zoom in to the part that I care about, which is going to be this right here. So, before we start translating this into code, let's create our front-end structuring. So as you saw here, we have four major components. We have a navbar, timestamp component, bump-ups component, and footer component. When I say component, this is me essentially saying a JS file and a CSS file. A JS file is a language and code that allows us to give structuring that you'll see here. And the CSS file is what makes everything look pretty. When you go to a website

[48:40] and you're like, "Wow, this user interface looks amazing." Like when you go to bumpups.com, that's the CSS doing work. So coming over to our app that we created earlier in the series where I show you how to connect GitHub, Firebase, and our React app. I'm going to open up terminal. Now the first thing we're going to do so we can actually just see it rendered up to this point is I'm going to do npm start. And then we'll open up another terminal window here. npm start is going to load this in local host 3000. So we can see this code actually rendered on a website. And there we go. Up to this point, this is what our code looks like with the GIF. This is like a starter template for

[49:11] React apps. and then the nice little call out of edit source app.js. So now that we have that running and you'll know it's running when you see the success message over here, we are going to create a new branch in our GitHub repo. So first off, what I like to do is confirm what branch I'm in. Get branch. And you can also see that down here in the bottom left. Usually when working as well, go ahead and just have your GitHub open on a separate tab. So you're going to be able to see these requests. But since we're creating the front end and quite literally the entire front end in today's video, I'm just going to do get checkout-b. This is how you create a new

[49:42] branch and we're going to call it just front end honestly. So do front end and then now we're in the new branch of front end. Now what this means on a service level is that the main code that you just saw here is duplicated into front end. But now any change that I make in front end any addition is only going to happen in the frontend branch. And then once we're satisfied with the front-end branch, this duplication, with the additional code, then we can bring it back to main. And we're going to do that all in today's video. And you're

[50:12] going to see why we do this. Let's just go and start now. So, what I like to do is two major things when starting out a new application. We're going to create a folder called assets. And we're going to create a folder called unoff. Assets is where we're going to put stuff like images and gifs or maybe a gif. And then unoff is where we're going to put in all the relevant pages that happen when a user hasn't logged into our application. To be clear, in the software we're creating today, since our monetization is based off Google Ads, there won't be a login mechanism. I've done other

[50:43] videos on showing you how to do loginins, which I might link below. It's like an entire 2 hour and a half playlist on how to build out a backend. The purpose of this series though is to show you how to build out a software that anyone can access and get value out of. And when I say unauthor, that's just the user's not logged in. This is good structuring as when you create applications that are authenticated. When a user is authenticated, that means they're logged in and only they can see those pages. For example, if you've ever logged into your Instagram and you're looking at your Instagram profile, that's the logged in view. You couldn't

[51:14] look at that view unless you were logged in or as we say in software development, authenticated. For now though, since everything we're creating today is going to be unauthenticated, any person can go to the website and use it. I like to call the global folder here as unoff. And in unoff this is where we create subfolders of our structuring. Now in software development typically you're going to structure these folders especially for authentication as you know maybe this is the settings view and the settings view has multiple files within it. For this though since in

[51:46] theory we're just doing one main landing page and then four separate components. I'll call it this. We'll do a folder of components and then the parent file we'll just call landing page. New file here, landing page.js. And then we're going to do a new file here of landing page.css. This is going to be where we're going to render the child components found in the component folder. This will make more sense once we do it. I just want to build the structuring right now. So to keep building the structuring here,

[52:16] we're going to go ahead and do a new file here of navbar.js. and navbar.css. I'm going to go ahead and create the other files that you see here in that folder. So, we've already created the navbar here, let's create the other three. So, now that we've created all the relevant components here, let me explain what's happening. So, we got our components folder here. And then we got our landing page. The landing page here is going to be this entire thing. And then what you're going to notice is that for each component, we're going to render it onto our landing page.js. But

[52:46] then the actual code itself, that was a bad circle. This was not a good circle. But the actual component itself for timestamp component, this is going to be when we go to that timestamp component.js and the timestamp component.css. Therefore, this is a new skill you've just learned or maybe you already knew it called refactoring. This allows it so that for the landing page itself, we don't do all the code in one file. Rather, we separate the code by each separate component. Allows for very easy development, especially if you're new and using artificial intelligence. As we

[53:19] both know, if I were to make all the code relevant for this page on one file, this file would get very lengthy. And when you deal with coding with AI, you put in huge files into it. A lot of times you are more prone to errors, which we don't like. So, let's go and start creating this though. And what I like to do is first off, let's just structure this so we're actually rendering something. So, we're going to go ahead and add our CSS here as well for landing page.css. When you're working on a page like this, you'll include the JS file and the CSS file.

[53:50] And this is going to be our first prompt. Build a basic React page here saying hello landing page and give CSS as well. Enter. So, I'm going to go ahead and hit accept. This looks good. And then for the CSS, let's see if we get some nice CSS here. Hit accept again. This looks good as well. I'll zoom out a little. And there we go. So, save here. But what you'll notice is if we go to our application, nothing's changed. And that's because of the fact that we need to import this into our app, which is going to be found in our app.js. This is where this is like the metaphile. This is like this is the big file right here. This is where we render everything in the application. All the

[54:22] script everything. So let's go and do that. So what I'm going to do here is I'm going to add the app.js and I'm going to say okay. Now for the app.js import this page and just render it. And the page I want to import is the landing page here. So I hit enter. There we go. This looks like good code. And I'm going to accept this and I'm hit save. So, what you'll notice is that when I scroll back to localhost 3000, we should see the landing page here. And it should say hello landing page. And there we go. Hello, landing page. So far so good. Now you've learned how to render refractor

[54:53] components in your project. So here's what's cool though. The parent file, this is what we call the parent. This is where we're going to render all these different components that we created earlier. Keep in mind for the app.js, this is typically the structure you'll see. I mean, this file gets pretty big when you do bigger applications, especially for the software we're creating. This thing gets really big. But for now, you're going to see a very simple way to make a landing page with this. So, what I like to do, especially after completing a task like this, is we'll start a new cursor chat. And then we're going to go ahead and push this as our first commit to our new branch. So,

[55:24] to do that, we're going to do get add get commit-m landing page render. This is how we're going to know when we look at our GitHub what this commit was. So, we ever need to push back, we can do that as well. So, we're going to do get push origin and then I like to just to scroll up here, grab the actual branch name, which we called it earlier, front end. Hit enter. If you ever forget what you named your branch, you can either look down here on the left, or alternatively, type in get branch here, and you'll see all relevant branches you've ever created. So, now that we've done that, this has actually been pushed

[55:55] to the cloud. And this looks really crazy. Let me remove all these lines, y'all. No more orange. Get away orange. So, with that first commit, you'll notice it here. Typically in development, I don't need to do what I'm about to do right now until I'm really satisfied. But I'll just do it for the purpose of this video. So, we're going to do compare and pull request. And we're going to go ahead and just do frontend work. Create pull request. And this is going to be a live PR that is going to be currently operating and we're going to be doing all of our relevant pushes to it. Now, when I was referencing our ability to revert back to changes, that's where these commits

[56:27] come into play. And we might actually just do that right now so I can show you how to solve a mistake if it incurs. So let's say we like this. We're good to go. This is actually a good starting point here because now we're actually rendering the code. Let's just say I mess up, right? I come over here and what you'll notice is Oh, I guess I did some backspaces. Hold up. Let me do this real quick. So there's no asterisk down here. If there's an asterisk down here, that means there's a change based off the previous PR. The asterisk is still there, but I can show you functionally of what I mean when I say you mess up.

[56:58] So we come over here. Uh let's just say we go like this D and then you know the application is broken. You're like oh my gosh it's broken. What do I do? What do I do? So what you can do now and obviously this is like an obvious error to fix. But assuming you don't know how to fix it. You're like you know what? I need to revert back to the point where it just said hello landing page and everything worked. Let's revert back on a hard reset. To do that you're going to go back to your PR here. You're going to click this. Think of this crazy number here as your like save checkpoint. It's

[57:28] how you named it or I guess it's how GitHub named it. But the idea is this is your save checkpoint. So go ahead and copy this. And then coming back to your code here, you'll notice it's broken. It's no good. You'll see the asterisk in the bottom left. We're going to do get reset hard. You might want to save this in your notes. And then that specific string that we just copied together. And watch this. I'm going to hit enter. Boom. And what you'll see is that asterric goes away. And it actually reverted us back to our original saved checkpoint of hello landing page. I come here, error goes away. We've reset. This

[58:00] is what we call freedom in coding where don't worry if you go down a rabbit hole with AI and you stop messing up a lot, you have the free will to revert back to these checkpoints. What's important to note here though is that if you really start coding and you've done four hours of coding and you forgot to do one of these checkpoints, then at that rate, you're going to either have to debug or alternatively just get in the method and the flow of doing these kind of commits. So, you have multiple checkpoints to revert back to if a mess up incurs.

[58:32] Don't worry, it's infinite. You can do as many as you want. You're not charged on these commits. If anything, especially if you're brand new to coding and software, you're going to find yourself in situations where you just absolutely drop the ball. That's part of the game. Learn how to do these commits. So, now that we've done that, let's do our next step here where I'm going to import all the relevant child components. To make my life easy, we're going to open up another cursor chat here, and we're going to add all of our relevant child components here. So, we're going to go ahead and do bumpups.js, footer.js, js. Then we'll do navbar.js

[59:08] and timestamp.js. So we're going to go and say this. All these are child components of landing page.js. For now, just make a basic JS and CSS for all the files and import into landing page. Enter. So what I'm expecting here is our app.js will stay the same because this is our meta landing page, but our landing page itself is going to render every single one of these JS files in a nice little chronological order. so we can start moving around structuring. So, we're going to let Cursor AI do the work here. I'm going to render it and then I'm going to explain what's happening here on the whiteboard. I'll be honest with

[59:39] you all, it's been a while since I've used Cursor AI. And from what I'm seeing so far, this things has improved tremendously. This is really effective stuff here. I'm going to go ahead and let it just all output here. And then I'm going to hit accept all. So, what you'll notice here is that our JS has some simple code, some simple CSS, footer as well, navbar as well, and time stamp as well. And then our landing page actually effectively did exactly what we wanted. So I'm going to hit save here. And then let's see it in local. There we go. Our navbar component, hello landing

**[01:00:09]** page, bumpups component, timestamp component, and footer component. So what this means, and what you'll notice is that our navbar component, for example, I don't have to edit anything here in landing page.js. Where I make my edits is actually in navbar.js. Therefore, this allows us to create smaller files for specific components, which allows for scalability. So for example here, navar component and apples. Hit save and there we go. Navar component and apples. I didn't change anything here, just changed it within the actual rendered component itself. So functionally now **[01:00:39]** you're starting to understand it more. Now you're starting to understand that this entire thing right here is our landing page.js. This is we're going to set global CSS. And what I mean by that is we're going to do one quick example here where I set the parent width. When dealing with navbar as an actual component itself or time stamp as a component itself, you will still set CSS here. That's part of the game. But you won't set global CSS when it comes to max widths and everything of this nature. But as you saw earlier, this code is rendered in a separate file from this code and this code and then all of **[01:01:11]** this put into one nice little JS that we can use. So let me give you an example of what I would deem as global CSS. So I come over here, we got our global CSS of min height. But one thing that I like to do is set a max width. And what I typically like to set as a max width is around 1,200 px. And the reason I like doing 1200 px is that on most websites, and you'll notice other websites do this as well. This is going to be good for the viewport for responsiveness. So for example, what you'll see here with cursor AI is notice how there is a ton **[01:01:42]** of space in the column on the left here and the right. What Cursor AI is doing is they're doing the same thing. They'll have a parent file that sets the max width. To be fair, the the header here, the top fold definitely has a little bit longer width. So, they do some type of modification, which you can do as well. But the main column here, you'll notice is that there is a max width, which is good. And typically, the actual component itself might have a width of 100%. But since the component here, this right here is a child of the parent component, which is the page itself, we **[01:02:13]** can set that max width. So, which is nice is that come over here, we set our max width. Looks like we need to do a margin. Oh, actually, looks I just need to go 100% here. And let me actually center this so it doesn't look all crazy. What's happening here is that our app.js, which is the parent of all parents, maybe it's the grandparent, is going to override our landing page CSS. So, let's remove that. And honestly, let's just do some quick debugging together. So, what we can do is I can screenshot this. So, I'll screenshot this entire page. I'm going to open up a new chat. And then with cursor here, **[01:02:43]** we're going to attach that image. And then we're going to grab the relevant parents. So, we got our app.js, app.css. Then we're going to do our landing page.css and our landing page. CJS. So, in order to do that, we're going to say, okay, when I render the app, I see this. I just want the landing page to be centered and big on the screen. Hit enter. So you just learned something new as well. The second thing you learned here is how to communicate with files based off its structuring. And what you'll notice is that the parent and grandparent file, what is called the app.js the grandparent because it's like **[01:03:14]** the meta of all metas. They take role in structuring an application. What you also notice and what you also learn, so make sure you leave a like. It's completely free is we can add images for context in development. So I'm going to go and say yes, please make the updates. This workflow you're seeing right now where I'm talking to cursor AI in just regular English is going to be most of the workflow that you'll do when creating software of AI. As you get better at this process, you'll just naturally learn what the code means. Even if you have no clue what it's doing **[01:03:45]** right now, it just happens naturally. It takes time, but knowledge compounds. So, keep hitting your head. This is fun stuff. I mean, if you got to this point, you're like, "Hold up. We're creating something here. Something's happening." And I remember the first time I created software or just an app. Honestly, it was just like whoa. Text to render. I like it. All right. So, let's see if it worked. It supposedly updated the CSS with the correct code. And well, first off, I need to accept all. So, let me accept all. There we go. And boom. It worked. Pretty nice. And what you can do obviously with cursor AI is that during **[01:04:17]** this entire process it will give you context of what it did, why it did it, but obviously you can go ahead and ask questions about the code as well, like what really was the issue, why did this happen, and that just requires you just reading that text over there. But the fun part here is that you don't even need to do that if you don't want it. That's kind of like the vibe coding, right? We're vibing. Looking good so far, though. We got a nice application. So, we're going to do again because of the fact that we're rendering each component. It's centered and it looks good. Let's make another commit. get addit commit-m component rendered enter **[01:04:47]** get push origin and then we'll do the branch name. Those commands you're going to remember for the rest of your life when you start coding of AI address on that. So now that's done. I usually like to start a new chat anytime I want to do another task. So what we're going to do now because of the fact that everything's rendered is now we're going to begin the process of actually creating our landing page. Everything's connected. You know good structuring now. Now, let's learn how we can actually connect the dots here in the sense of UI design and start making this look good. So, the first one we're going to work on together is going to be the **[01:05:18]** navbar. I like this navbar. We'll keep this navbar. We're going to make changes to it, but for now, the process is simple. Screenshot the part and the component you like within the page. Once you've done that, we're going to go ahead and add our first image file. And the image file I'm going to add is going to be that top left little logo thing that you just saw, so that I can render it on my page. To add a file, simply drag it from your desktop and add it to the assets folder. Now, as a rule of thumb, you have three major files when dealing with front-end development. You got a PNG, you got a JPEG, and a webm. WebM is typically optimized for mobile **[01:05:48]** for loading. You can use JPEG as well. That's going to be a lower file size, but a PNG, this is going to be slightly higher in the file size due to the fact of the transparency of a PNG, but you can leverage this so that it kind of melds with your UI better. So, what we have here is tube stamp as a PNG, and I've added it to my assets folder. So, the next step I'm about to show you, in theory, we could use cursor AI to do this, but I usually like using a separate chatbot for this. So, use the AI model you like to use when doing more **[01:06:19]** complex code. Of course, you can still use cursor AI. You could even use Claude here. Personally, I'm going to show this with Chad GBT04 Mini High. So, here's what I'm going to do. First off, I'm going to attach that image of the navbar that we screenshotted from Figma. I'm going to load that in. You'll see it right here. And this is how I'm going to prompt it. First off, I'm going to give the code. So, right now, this is all the navbar has. So, navbar say here is our code. Paste. Typically, we'll add the CSS as well. So, I'm going to come over here, grab the CSS. There's not that much, but just typically. Actually, **[01:06:51]** because of the fact that this CSS is way off of what we want, I'm not going to include the CSS so I don't bias it. But for now, we're going to give general structuring of just our JS file. I'm going to go ahead and say based on the screenshot, give me the exact code for what it looks like. And for the logo on the left, use this image path. Assets 2v1.png. The image path is simply assets 2v1.png. Then I'm going hit enter. I didn't request a CSS as well, so I might need to do that. Let's see if it's smart enough to know that, though. So, here we go. We got our first code. Copy. Paste **[01:07:21]** it over. Don't look at it yet. It's not going to look good. See, it's going to look a little crazy. This is what happens when you don't use CSS. And cool. It actually gave us the CSS as well. So I'm going to go and copy that and then here, paste it over and save. Not bad. So obviously it messed up with the image. So let's go ahead and make sure it's on the correct path. But so far so good. We have a navbar. So I'm going to come over here to navbar.js. And it looks like it's not even importing it correctly. Okay, I don't like that. So let me do it correctly. Let's use cursor AI to help us out here. So what I'm going to do is let's import **[01:07:51]** this on the top of the file in the correct path of the image. I simply selected this and then I hit add to chat. And then let's get the file path. See if I can just find it like this. I can. Perfect. And then I'm going hit enter. So this looks good. What you'll notice is that when you import images, you're going to want them on the top of the file. And you're going to want it referenced like this. So I'm going to hit accept down here and hit save. And this should be good to go. There we go. We see it right there. So the next thing we could do here is obviously there is parts of this navbar that we don't care about, such as this right here. So I can **[01:08:22]** delete it. Coming down here, I could be like, you know what, I don't need all this information. Maybe I only need like three links. Delete those as well. Hit save. And there we go. So we have these three things right here. I'm going to go ahead and change some of the wording as well. So instead of request a quote, this is going to be do more with video. Something along the lines of that. This is going to link off to bumpups.com as we can do more video on bumbles.com other than just timestamps. And then right here, what you'll notice is we kind of have like a big situation here where when I go to 100% it's just super **[01:08:53]** small. Uh it's in the middle. So, let's go and like really restructure this so that this kind of fills out the entire viewport. And when I say viewport, the entire screen, the browser essentially. So, I'm going to take a step back here. Let's start a new chat and let's figure out what's going on. There's a couple ways to approach this. First major way would be essentially just kind of deleting stuff. Okay, this has to do with width, mid, height. Maybe I delete this. See what happens. All right, so it brings it up there. That's good to know. Stuff like this you can do. What you'll notice is that as we stated before, the **[01:09:24]** app.j JS and they have CSS is going to be our main file here. And this is going to be what really controls a lot of it when it comes to how it's rendered on a screen. So what we're going to do is we're going to create a new chat. Add the relevant files of app.js app.css and landing page.css as well. Make sure I'm fully zoomed out here. Then I'm going to screenshot this entire thing. Add that to the chat. So here's what we're going to say. This looks way too small in 100% view on web browser. Can we make it so that it all takes up more width and bigger on screen with the max width being 1200 px? Basically, my goal here **[01:09:55]** is just make this look like a regular website rather than having this little like box in the middle. And here we go. So, we got some suggestions here from the landing page content wrapper. And that's what's causing the issue also with some other CSS when it comes to the H1. H1 here is referring to stuff like this. This is like header one, header 2, header 3. Nice little tip for front-end development. H1 is typically when Google crawls your page or just looks at your page and tries to understand your page, it prioritizes H1 headers over H2, H3, H4. So, for example, if I was selling **[01:10:27]** cookies and I said cookie bakery store, you'd probably be incentivized to have that as your H1. Hit accept and see if this works. Sometimes you'll have to go to the file that it changed itself and hit save as well. And it kind of worked. It's not exactly what I want. So, let's keep messing around here. So this typically has to do with padding here and some stuff over here. So what you'll notice is if I'm trying to understand specifically what's being rendered here and that's the issue. So the issue here is that there is no CSS class here that makes it so there's a global styling **[01:10:57]** from the grandparent. So what I'm going to do here is I'm going to update that. When you see a JS file like this and you see the imported CSS and then you look at the CSS and you see all these classes but you don't when I say class I'm referring to this dot part. When you see that, but then you come to the JS, that means it's not being read because I don't see it here. It's not being read. Therefore, what we like to call it is dead code. No reason to have it. You might as well burn it. So, for this, what I want to do is say for the app.js, give me the brand new CSS based on our app. Give me the CSS class for overall **[01:11:27]** structuring with a max of 1200 px and components inside it. Start at the top. So, let's set our global styling of 1200 px and then start the components at the top so they're not centered here. All right. So, here we go. gave us some app structure container. That is fine. Sometimes it won't give me the ability to add the code. So I'm going to say give me new code for app.tjs and app.css. So what we'll do here because it's not actually just I guess I just hit it like that. Uh sometimes it has like an easier apply button I suppose. So we'll do **[01:11:58]** that. Save. And then we'll come to our CSS and make sure we save this as well for the new file. So we're going to accept this. Save it. And then let's see if it added this next part. It looks like it doesn't. So, we're going to go and make our lives easy here. Just copy this and paste it here. Save. Boom. What you'll notice is that the CSS class right here, app structure container, is referenced in here. So, it's actually being read. And we have a situation again. It's because the landing page is trying to take too much of the global. So, what I'm going to do is I'm going to **[01:12:30]** do this. Burn this. Burn this. 100%. There we go. And we are almost where we want to be. You might be like, Corbin, how the heck did you know to do all that? That's because of the fact that essentially right now the app.js and the app app.js and the landing page.js are fighting with each other when it comes to styling. But typically we opt to have the grandparent file have the last say here. So we'll make sure that this one is actually being listened to. So so far so good. We have our main rendering here. What we're going to do is make **[01:13:00]** sure that we keep going down this path. So do this this. Boom. There we go. So, we're getting near something. And just so I'm not moving too fast, y'all, what you're noticing is I'm removing the stuff that has to do with structuring at a top level. So, the width, the padding, these all have things that will affect later on files. So, it's important that we remove this kind of stuff in child components and lower chronological files. Save. To be fair, if you don't really understand what I was just saying there, just keep talking to Cursor AI **[01:13:31]** and it would have gotten you to this point, but this is to the expediate the process. So, what you'll notice is that now at 100% this doesn't look bad. We're getting somewhere. I'm going to come over here to landing page.js and we don't need this H1 anymore because end of the day we are just going to be rendering these four components. So, here we go. What you also notice is that there's a shadow effect and this kind of kind of visualize it a little bit better here where this component itself is going to be wrapped by the parent component right here which is the app.js is this and then this is going to be the **[01:14:03]** landing page.js. So therefore, since I can see there's shadow there, watch this. I remove this. I save. And that's the box shadow class here. And there's going to be no more shadow. Therefore, it melds better with the actual page itself. So the next thing we're going to do here, because of the fact that I want to make sure that our navbar looks good, is we're going to start a new chat. And with this, we're going to go ahead and come back to chat GBT. Start a new chat here as well. Make sure the correct model is selected. And to give full context when dealing with this kind of **[01:14:33]** chat, we're going to give all the files all the way down to the child component. So I'm going to give the app.js based on this code, we'll give the CSS as well. What's great about chat GBT chats is we can really frontload them with a ton of code. We're also going to give the landing page.js and the landing page.css. And then we're also give the navbar.js and the navbar.css. What did I just do right here? Let me show you on the whiteboard. Essentially what we did right there is that we know that when we render this application, **[01:15:05]** this is going to be like the big app.js. This is what renders the entire application. And right now we're rendering this entire landing page.js into this application. What I just did with Chad GBT and whatever AI model you use is I gave it full context of structuring of the actual application itself. It now knows that this is the top file, most important file when it comes to CSS. Then it also knows that this comes second which is the landing page.js. And finally it knows about navbar.css here and js here. So **[01:15:36]** therefore when it gives me the code here of what I'm about to show you it's going to have more context to give me accurate code. So now that it has all that code what I am trying to achieve is have it so the navbar the logo is on the far left and the relevant links are on the far right. Eg this right here far left and these right here far right. And the best part about AI is let's just ask. I'm going to say let's have it. So the navbar, the logo is far left and the links on the button are far right. Enter. So I'm going to go ahead and let **[01:16:07]** Chad GBT generate this code for the navbar. But we're almost done with the navbar. I'm going to get to the point where I like it. I'm going to keep teaching you these new skills when it comes to front-end development. And then what I'm going to do is I'm going to create the rest of the UI for this software landing page. and then we're going to walk through the files together and learn new things as I don't want to give you repetitive content here where every single component I'm teaching you the same thing. So what I'll do here is let me just show you how to render this navbar so it's perfect and then I'm going to go over all the different code **[01:16:38]** components and the nuances depending if there is any nuance for each different component. So, for example, I already know for the bumpups component, we're going to have some nuance there of showing how to add an external link to open a new tab. Let's jump back in. So, we got our code output here, but what you'll notice is that it does something that's very annoying that I typically don't like when getting code outputs from AI is it separates it into this craziness. So, I'm going to scroll all the way down here and I'm simply going to say this. Okay, give me the entire new JS and CSS file. Enter that line **[01:17:10]** right there. right there. You're going to love this is going to allow you so when you're working on all these different refractor components, you're able to just get the entire JS, copy, paste over the entire CSS, copy, paste over. Makes your life easy. So, I'm going hit copy here for the JS. I'll paste it. Save. And then the CSS, we'll scroll down here. We don't have to, but we'll just copy that as well. And what you'll notice is that it just didn't work. But that's part of the AI encoding of AI. Therefore, we need to give more context. So, what I'm going to do here is I'm going to screenshot this. Now, personally, I know why this is **[01:17:41]** happening. This has to do with the actual width being constricted. But here is a rule of thumb. If you have no clue why it's happening, more context is always better for these kind of chats. So, that screenshot is going to give it more idea of like what we're trying to achieve. Okay. Identify why I don't see the logo on the far left and the other buttons on the far right. It's still too close together. Enter. And because of the fact that we gave the app.js, the landing page.js, and now the navbar.js, JS, it's going to be able to know which one to change here. So, what you'll notice here is that it gives potential **[01:18:13]** fixes, but opt for the one, especially when it comes to really overall structuring where it allows you to let the parent stretch. So, I'm going to do this one. Say, okay, for this, give me the entire new JS and the entire new CSS. So, here we go. Copy the new JS for landing page. And then coming down here, we'll copy the CSS as well. Paste it in. And better. This is kind of what I'm looking for when it comes to stretching out each component. And now we're getting overall structuring here. Looks it looks like that cake I was talking about. We're baking the cake. And we're **[01:18:43]** going to kind of keep going from here. So, let me go ahead and give some last rule of thumbs here when it comes to everything else, right? The idea here is when we're copying designs from Figma. So, coming back to Figma here and you know, we come over here and we like this component for example. you do the method of screenshotting this entire thing asking for the exact replication and get your code structuring there. Now, a really good rule of thumb and what you saw before is that when you see things like this for components where there's **[01:19:13]** images associated with the component, then go ahead and provide a placeholder image for the code to use in your outputs. So, up to this point, you've learned fundamental structuring and ways of giving more context to AI models for better code outputs. So, what I'm going to do here is I'm going to create the full-blown UI here so you don't have to see it like an hour long of just repetition of this kind of logic and then we're going to go over the logic together of how I did different things using AI. So, I'll see you back here pretty soon or for you it's going to be **[01:19:43]** quite literally instantly because it's going to be like and we're back that fast. All right, so let me give you context of how long it took me to build out this entire landing page. I have some notes here as well and I'm going to go over fundamental skills that I learned in my past that I applied to this to build it out pretty fast. So, first things first, how long did it take me to build out this front end? It took me around 2 hours and as you can see with a nice little checkpoint method here, we had some PRs and some commits relative to what I was creating at the **[01:20:15]** time. Second important thing to note here, sometimes when working with AI models, you just get a gold chat. What I call a gold chat is a chat in which you can basically use all the previous inputs as context for future inputs. This is a very long chat as you can see with that scroll bar over there. I went ahead and did all the development in one chat which typically can lead to better outputs but sometimes you need to start a new chat if it starts like veering off left end etc. So let's go and teach some skills here and let me show you some stuff you want to know during this front **[01:20:46]** end development process. First thing, how do we move around components? So, what you'll notice here is that we have our navbar up here, timestamp component right here, our bumpups component right here, and then the footer component right there. I'm not going to do this, but in theory, let's say we wanted that bumpups component to be actually at the bottom of the view page. We're going to go ahead and all we need to do because we refractored the code is super simple. I can just copy this line and paste it above the bumpups component. And watch this. We've successfully flipped how the components will show on the page. This **[01:21:16]** is good for you to know as you can now leverage these components on different web pages. So for example, if I were building out a software with multiple pages, this footer component I can use on every single software page. And on top of that, now you know how you can actually move these components around in chronological order. The next thing you'll notice is that we have icons. This little upload icon, little chat icon. Coming down here, we have some like social media icons. How did I do this without actually having to upload these icons personally? Eg downloading **[01:21:48]** them from Google, uploading it to my code repo. This is a lengthy process. So, let's figure out how we do this fast. To do this, I leverage something called Font Awesome. Font Awesome is an open- source library that we can install directly into our application and start leveraging all of these icons. Now, to be clear, we can only leverage the free ones, so we don't have to pay, but there is plenty of free icons we can use in our application. So, in order to do this, if we just go to something like our bump ups right here, because I use a lot here, you can notice they're all imported here. So, how do we get to this **[01:22:18]** point, though? Simply go to one of your JS files in your components and ask cursor. We're going to say, can you give me the commands to install Font Awesome? Hit enter here, and then you'll get the relevant commands, each one starting with an npm. And here we go. This is the command right here for Font Awesome. We can go ahead and just copy this. And then, coming to our terminal, we can open up a new chat here. paste it, hit enter, and this would install the Font Awesome library. If you don't do this and then try to use code like this, you'll get an error saying like this doesn't exist. That's just because you **[01:22:48]** need to install the relevant library. So, simply hitting enter here, you'll be good to go. What this allows us to do is pretty cool stuff. So, what you'll notice is that we got FA arrow up from bracket. Usually, I let AI just code out the names for these different files, but for example, let's say we come over here to the upload and we're like, you know what? We don't like that upload icon. We go to Font Awesome. We can simply search upload, hit enter, and then maybe we like the cloud one. So we can click this. We can see the name is cloud arrow up. And then all I would do is fa cloud arrow up. And then we would grab this **[01:23:19]** code, replace it here, hit save. And there we go. We got cloud arrow up now with the nice little icon. Although I like my other one. So I'm going to I'm going to go back. This is good now. So let's look at some other elements in this UI that I've done here. I've got a cool little animation for the arrow on hover. I also have this animation over here on hover. Now, in order to get an animation like this with AI code, you don't necessarily have to say angle the arrow up, move it to the right slightly on hover. In reality, when I did this **[01:23:49]** code, I simply went to bumpups.js. I added bumpups.css as well. And then what you would do is obviously would do the method before with Figma, screenshot over the design, get the different nice little UI components of the rectangles. So in this context, I went ahead and just screenshotted these rectangles here. And that got me to a working point where I could start making how the UI looks here. But to make the arrow actually move with the code generated by AI here, I simply went down to the arrow, something like this, and we would grab it, paste it here, and use layman **[01:24:22]** terms. So, we can go as far as saying something like on hover, I want to make the arrow icon do a cool animation. Now, what's important to note here is notice how I'm using no developer jargon. It's purely just cool animation. So, what we can do here is that we can get our animation. We'll apply it. If we like it, good to go. If we don't, we can simply ask the AI chatbot like, "No, no, no. I need this animation to look a lot more cool." And then it will keep going. And you can kind of go in this back and forth with the AI chatbot. Another thing to keep in mind here, especially when it comes to color palettes and the way **[01:24:54]** animations are handled and just how the UI interacts on your application, is you can reference other applications. So, for example, here I went with a darker theme just because I realized that YouTube when it comes to time stamps, you know, it has like that light blue hue. So, I kind of wanted to do something similar. So, when a user clicks into tubstamp.com, they'll get like, okay, okay, this looks like timestamps and the hue looks correct. But mind you, to code that and to get this relevant UI for color palette, I simply said, "Give me the UI for YouTube **[01:25:25]** dark and use it here." Do the same for animations. If you like an animation that Chad GBT does, you could do something along the lines of for the arrow icon, do an animation that Chad GBT would do. And you can use this kind of logic throughout front-end development. So, here's another thing I like to do when working in this kind of code. So let's say I get to the point where I like a component and how it looks. What I like to do is give confirmation to the AI model. So I'll screenshot a component. I would come here and upload it and then I would say **[01:25:55]** something along the lines of, "Okay, looks good. Now ready to see what we want to do next." Then I would hit enter. What I'm doing here is I'm giving the chatbot context for future conversations within this chat of how I like the UI to look. Now, here is what's super powerful about this and what I did in order to expediate my workflow when I was developing this part of the website. This took a little bit of time due to the fact that I was really leaning into the kind of pallet I want to give the kind of UI that looks best in this context. But once I finished this part, **[01:26:26]** all these other parts were extremely fast to be done. And the reason why is because now what I can do is I can say a chat like this. Then I could say okay now we are working on navbar. I would give the navbar code the JS coming over here. I would copy the CSS and then I could say something along the lines of now matching this UI style make it look better. Now obviously right now it looks fine. It looks like it's part of the UI but when I originally did this **[01:26:58]** it had that white background. The button looked completely different etc. So what this does now is now the chatbot has a starting point with this original image. It knows that the user likes this kind of UI. Therefore, when we're tackling other UI components like navbar, footer, etc., it knows to mimic this kind of user interface, making your life a lot easier when developing future components once you have leaned in and understood the branding of your software. So now that we understand that, how do we do cool things like this? I put in **[01:27:29]** gibberish, hit generate, and it understands that this is an invalid URL. I put in a real YouTube URL, hit generate, and it understands that it's a real YouTube URL. This does not communicate with the back end. And now you're learning a very fundamental practice between the front end and the back end, where the front end's job is to mitigate calls to the backend as much as possible. When I say mitigate, I am referring to invoking an action for the application to do if it's an incorrect action. Eg. What I'm doing here in the **[01:28:01]** front end is I'm putting up a safeguard. So when people use this platform and they throw in like gibberish, we're not calling the backend and the back end is like, what can I do with this URL? I don't like this URL. To do this, you're going to use a very specific terminology in coding called reax. And as you can see here, YouTube reax. What this does is this identifies the type of data it expects to see in that input box. Now to do this with AI, it's very simple. I would come to where I would leverage something like this and simply put this. I want to create a rejax to only accept **[01:28:33]** YouTube URLs. Please output the code. And then your rejax would look essentially what we have right here. Very similar to what a YouTube URL should look like. Back in the day, we had to code these manually. And as you can probably tell by this line of code, it was not fun. It was not fun coding all this manually. This was no good. So luckily AI can code simple reaxes for us. Now, now coming back to structuring, how do we add proper spacing between the different components? How do we add cool things here like a divider bar? What is the best way to do this? Well, because **[01:29:03]** of the fact that we don't want to necessarily go to every single component and do what we call a margin bottom and a margin top. What that means is like spacing. So, for example, if we come over here and I went to this container here and I added like a margin top 50px pixels and I hit save, you'll notice the footer goes a little bit further down. But we don't want to do it like this because what we're doing here is we're creating fixed variables and it can get **[01:29:33]** really messy once we have all these different components and you have a more built out software. So the best way to do this kind of logic is always go to the parent file and in the parent file we would set something like a gap and the gap here if I put to six what you'll notice is every single component has way more spacing between it. This allows for symmetry easy reusability of this kind of logic in other parent files. So we'll go back to three here and we have our spreading. Now another thing you'll notice is that between the time stamp component and the bumpups component there's this divider line. One way of **[01:30:04]** approaching this would be using the bumpups component here, adding code specifically to the bumpups.js right here, and adding a divider line here. But this is not good practice. You want to add the divider line in something like the parent file. So what you'll notice is I created a whole separate CSS class just called section divide. Ask an AI model for a divider that's like dashed and lower opacity as you see here. And then I can place it between the components. So what this allows you to understand now is that we can in theory code within a parent file **[01:30:36]** as well. But to be honest with you, the real use case of a parent file is going to be the overall structuring on a bigger reason. It has to do with when we pass data. This would get into more of a complex tutorial, which I'm not going to go over right now. But when I say passing data, let's assume we're reading a database in the back end. And let's say the database we're reading is like, I don't know, it is passed to a YouTube URL. It's just a string. When I say string, that just means text. It's just a string that we read. What we do here is that if we wanted every single page **[01:31:07]** or every single component to render that data point, we would pass it into the component here. We would find it here. And then, for example, if I go to bump ups and we pass the data point here, we would then receive it here in these brackets and then leverage it here. That might have been a little confusing. Don't worry. For right now, all you need to understand is that parent files are for overall structuring like we've gone over before. And then when we want to pass data through an entire web page, **[01:31:37]** you don't always have to do it like this. Assuming that we use time stamp here and in our time stamp component, we only read this data here. We don't necessarily have to pass it through the parent if it doesn't seem necessary. So, let's go over a big one here, which has to do with importing files between different files. So for example, as you already saw, we're importing the landing page here. And then in the landing page, we're importing all the relevant components here. Notice the path components navbar components navbar. Now, what happens when we get an error **[01:32:09]** that's like we can't find your file, which is going to happen sometimes with AI because it doesn't have full context. Here's what we do. So, if we come over to our navbar here, what you'll notice is that I'm going to remove these two and I'll explain why, but assets tube logo.png. As we know, that's assets right here. And then tube logo.png is right here. When I give an incorrect path, when we go to localhost 3000, you will get an error like this. It cannot find the module. And then it will point towards **[01:32:39]** the direct thing that it can't find. First way of solving this is honestly you could literally screenshot this over here and we'll actually do it this way. This will make it as simple as possible for you to understand. So we'll screenshot our entire repo over here. Maybe even open up folders and honestly only screenshot the source, right? This is just front end. And then we would come up to a chat like this would add the file and then once we add that file for context, we'd go back to the air code and just quite literally just copy all of it. This is a good practice when **[01:33:09]** you get an error like this. give as much information. So, we'll just copy the entire error and then I paste it here and hit enter. So, obviously the reason I can't find this is because we are down one path and this is what it means. These little dot dot slash that means it's down inside a folder because of the fact that we're in unoff components. We're inside two folders. So, what you'll notice here is that it actually was able to catch this with that screenshot. I can grab this code here. I can paste it right here, hit save, and it's working again. Fundamentally what you learned here is that when you run **[01:33:41]** into errors that are module correlated eg I can't find the thing screenshot your source over here open the folders this is going to give context for the AI model the actual path that's real and then paste over the error codes over here we got three things left that I want to do together and that's going to be setting up the SEO metadata the fave icon and the way it shows up on search then I want to go over of integrating YouTube's API it's public API so we can actually start rendering real YouTube videos and you'll see what I mean by that with the thumbnail, the duration, everything associated with that. And the **[01:34:12]** last one here is going to be mobile responsiveness making it so when I do rightclick inspect and I click this up here and I go to mobile and you can notice that we can actually change it by port here as well. It looks good. So if I go all the way to, you know, pixel 7, it looks a little crazy right now. This is mobile responsive, but this top part is definitely not mobile responsive. So we will have to make that mobile responsive. And also this is not mobile responsive as well. Let's go ahead and do the SEO first as that's going to be the simplest. So in order to do that, **[01:34:44]** let me first off just push this branch and say we're essentially done with most of the front end. In these later tutorials, we'll add stuff like Google Analytics. We'll add the ability to make a call to a callable function in our backend. This will all make sense as we keep going here, but for now front end v1 is looking good. V1 and then push origin. Let me go ahead and open this terminal up a little bit. Push origin front end. Add that checkpoint before SEO index. And what I usually like to do **[01:35:15]** as well is I would have called it that commit like before SEO so that I know that if during this SEO process when I go to the index.html, as you'll see here, I mess up completely, I know to revert back to this commit as I identified it as before SEO. And when I say identify it, I'm just referring to how I named the specific commit as you see here. But since we are building to the build folder, as we see right here, we're going to go to our build here. We're going to go to our index.html. And this is the code we're going to change. **[01:35:45]** This code right now looks a little bit crazy. So the first thing we're going to do is just update the logos. First one being the fave icon.ico. If you don't know what a fave icon is, look up to the top left right here. This is the fave icon. And then the SEO we're going to change to is going to be how it shows up in the tab with the naming here and the underlined description. Now, when making a fave icon, specifically a ICO, all you need to do is make a 32x 32x pixel wise, export it as a PNG, and then go to like a cloud convert here to PNG to ICO, **[01:36:18]** upload it, and then export as ICO. When it comes to logo 192 and logo 512, this is used for example for Chrome. If you do like a Chrome app, you can download a Chrome app. And this would be the icon used there. 192 stands for 192 pixels x 192 pixels and 512 stands for 512 pixels x 512. So I'm going to go ahead and upload my relevant icons here. When I drag it over, I'm going to hit replace. And then my 1921 512. Go and name it the exact same. I'm going to hit replace again. Replace again. And that should be **[01:36:49]** solid here. Once you do that, go ahead and click through. You'll notice it all looks good here. And now we do the index.html. So for this, it looks a little crazy. For some reason, it just renders as one line. We're going to do multiple lines here. So first off, let's just ask for multiple lines so you can get a clearer picture of what's happening here. And to make it multiple lines other than just one here to say make this multiple lines and I hit enter. Now with that done, we're going to hit accept here. And we are so far so good. So this gives multiple lines. This was all that code that you just saw there, but it put it as one line. But **[01:37:19]** now we can get a clear idea of what's happening here. First one that you'll notice is the fave icon. That's what we just referenced. The next one you'll notice is the description of the actual website. So, we'll change that. Big one here is the title. That's how it's going to show up in that Chrome tab bar or just whatever tab bar you have on browser. And then the title here actually wants to change the tube sound. That's funny enough. We'll change that as well. You'll notice the logo 192 is used here on the Apple touch icon. But coming over here, let's go ahead and change some stuff. So, for the title, we are going to because it knows context of **[01:37:51]** our application. And let's actually give context here. So I'm going to go ahead and at the time stamp.js, I'm going to go and say based on this timestamp.js which has context of the platform being for timestamps essentially this right here. Give me a website description and also for the title let's do and I'm going to give fixed text here and just tell it what to do. We're going to do two stamp AI powered YouTube timestamps. Enter. This is fundamental. This is how it shows up in search. When I say shows up in search, this is what I mean. This **[01:38:22]** is the description used here. This is the link right here. So now for our application, it's going to be tube stamp- powered YouTube timestamps as the link that is clicked. The icon, the fave icon is this right here. It has given me the relevant information. I'm going to say yes. Let's go and update with this information. All right, here we go. I'm going hit accept and let's look at the code. So we got tube stamp AI powered YouTube timestamps. Perfect. We got generate in the description. Generate accurate AI powered timestamps for any **[01:38:52]** YouTube video in seconds. Keeps going. Keeps going. Keeps going. Uh what you'll notice is that for descriptions, it can be one line like that. That's all good. This is sufficient. This is how it's going to show up in search. Now, what you'll notice sometimes is that you come back to your React app and you're like, Corbin, nothing's changed. That's because we need to build and run this. So, I'm going to go over to the build here, which is this right here. And to exit out npm start, it's just C. And then I do npm start again. Now, sometimes there's conflicting builds when it comes to the folder or whether **[01:39:22]** it's public or build. So, what I like to do honestly is typically not only in the build folder will we make these changes, but also make it in the public. So, same changes. Let's proceed. index.html. It's literally just an overwrite. Command A, paste over. Good so far. And then for the fave icon and the logos, drag them over as well. And then there we go. Look up the top left. We got tube stamp AI powered. We got our fave icon and our full on title. Not bad. Not bad at all. So, now that we have an understanding of **[01:39:53]** how I got up to this point, this part of the tutorial, we're going to go over integrating a third party API, specifically YouTube. Now, what's nice about YouTube is that it's a Google product. So, this process is going to be pretty simple, but the methods and the processes you're about to see could be applied to any API that you want to integrate. So, let's go ahead and see what's up. The goal is simple. I provide a YouTube link here and we actually get the rendering of the relevant thumbnail title and possibly even the duration if we want it. So to do this, we're going **[01:40:23]** to go to our timestamp.js as this is where the logic's going to exist and we're going to work here. So first things first, since this is a third party API, we need to even get access to it. Now what's nice about Firebase here is that when you create your project, it will automatically create its GCP project. So, go ahead, go on Google, type in GCP, go to the console, type in GCP here, click this, and then make sure you're in the correct email here, and hit console. Once you're here, simply come up here and select the correct project. If it doesn't show **[01:40:54]** right away, just hit the tab that says all, and then you'll see all your projects. The project name is going to be the exact project name that we set in Firebase. So, for us, it's tube stamp proud. Now, with GCP, we have direct native integration with all API products provided by Google. So, if I go to API and services, you'll notice that you come to enable API and services. We have a ton to choose from, but for our reasoning, we're just looking to enable YouTube. So, I'm going to click this and we're going to search up YouTube. Once YouTube shows up, you'll have a bunch of different options. Usually, it's the most recent one. So, for us, it's **[01:41:25]** YouTube data API v3. I'm going to hit enable. Once we do this, YouTube data API, which allows us to get data from YouTube, be enabled in our GCP project. So, we're going to come over here to credentials and we are going to create a new API key. So, we're going to hit create credentials, API key. And as you can see right there, which you probably can't see because it's blurred out, but this is going to be your API key. So, copy this and save this somewhere. We're going to save this in that env file that we set up earlier. So coming over here, **[01:41:56]** go to your env file right there and create a new line. Hit paste here. Hit equal. And this is where you would put that string that you just saw, that API key that we just copied. What's fundamentally very important is that for every env variable that you create, you have to start with react app. React_app whatever you want to name it. If you don't start with this react_app, it's going to give you an error. So, always include this part. But I'm going **[01:42:27]** to go and paste this key over. So, once we do that though, let's go ahead and set up some restrictions to this key and rename the key. I'm going to click into it. The name of the key, I'm going to say YouTube API. The application restrictions, we can add a specific website address, but what's big here is restricting the key to specifically YouTube's API that we just enabled. So do YouTube YouTube data API v3. Hit okay. Hit save. So now that we've set that up, now that we actually have the ability to access this API from GCP, let's actually use it. So I'm going to **[01:42:58]** try to use cursor AI here. See if it's smart enough to know how to do this. But let's find out. So here's what we're going to say. And for reference, when handling third party APIs, always consult the documentation. Typically to find the documentation, you would just type in the name. So for me, it' be like YouTube API 3. for whatever yours is, Mailchimp API, you would just search in Google, go to the most recent link, and then this would bring you to the docs. And what we care about here is the references. This shows you how you're actually going to pass and receive data. So, what we care about in this context **[01:43:29]** is just listing relevant data so the user knows what they're about to generate timestamps for. So, we're going to use the API endpoint of videos list. Scrolling down to this API documentation, you'll have the opportunity to see all the different information you can actually grab from an endpoint like this. So for us, when we list, we're looking for the thumbnail and the title. You don't necessarily need to understand this or even know how to dive through this documentation. We can just use AI for that. Okay, we have our YouTube V3 API key found here in the EMV. We reference that specific area. **[01:44:00]** For this file, let's create the logic for when I put in a YouTube URL. it is seen below the input field and is centered video thumbnail max res and video title under that. Give me the entire new JS and CSS for this. I'm going to hit enter. The goal here is that I put in a YouTube link here and then we'll see the thumbnail here with the title under that. What you'll also notice is that within at least YouTube's API, there is a quota system. So each one of these calls will be one quota. That's actually free. And in order for **[01:44:30]** you to increase that, it just requires you to fill out a form in GCP saying, "Hey, I need more quota." And then you'll see if the GCP team is nice enough to give you more quota. Supposedly, it's done it. I'm actually be extremely impressed if it gets it right on the first try. So, I'm going to say accept all for the JS and the CSS. Everything looks good so far. I'm going to put in gibberish. Nothing. And it might only show it when I hit generate here. So, let's first off just provide a real YouTube link. Okay, so it might only show it here. Let's see. Okay, **[01:45:03]** video not found. There's an API error. So, it didn't work the first time. I'm not surprised. Uh, this is more complex logic. I doubt the AI would be able to handle that off rip. So, let's go ahead and try to debug with cursor here. Well, first off, let me just look at the code. So, we're getting an error here, and it's referencing this code block here, which says video not found on API error, but we don't actually see the error itself. So, let's go ahead and make sure we actually print the error, but we can see it right here. So, let's see. So, we'll just copy all this. So, I'm going to copy all that. I'm going to say, okay, got air, hit enter. And for any of **[01:45:35]** y'all wondering how I got to this area, as I see, it's a little cut off. Let me do this. You do rightclick, inspect, go to console, and it's right here. This is on Chrome. This is also where we're going to be able to see console logs on the front end. Console logs is ways for us to debug when errors like this happen. At first, it's claiming that the key is identified. That's not true. It is identified. So, let me see what else it's saying here. Let's go and say this, though, before we see if the API key actually is missing. We're going to say, can you give me a console log of the **[01:46:06]** payload? Payload is the data we're sending. So, in this context, the only data we should be sending here is going to be the video ID found in the YouTube URL. So, I'm going to hit accept here, and let's see what this comes out to be. I'm going reload my page, put in the URL. I'm right-click, inspect, go back to the console here, and let's see what the payload is. Okay, so we got an error here. API key is not valid. That's our error. That is actually perfect. Let me see why this is happening. I'll make sure I delete this API key. But let me do the first troubleshoot to clarify **[01:46:38]** whether or not it's the API key or the way it's being read in the code. To do this, I'm going to just say hardcode the API key in the JS file and then just give the API key. So I'm going to say accept all. And now you see it hardcoded. It's not actually being read from the EMV anymore. So, let's see if this works. Let me go to paste it again. Generate. And yeah. Wow, that actually works. So, we were able to debug the situation. For some reason, when it was trying to read from the EMV file, it just wasn't reading correctly. But what you'll see here is that we successfully got the **[01:47:10]** relevant thumbnail for this video and the title. I have an announcement. Wait, what is this video? This video comes from Builder's Console log, which is my community here. You can check it out in the description down below. If you run into issues, you run into errors, you can just straight up put a post here and I'll help you debug situations like this. Bunch of other cool stuff on this platform like different exclusive classes and on top of that an exclusive series where I talk about pitfalls and pivots I had to make in business and entrepreneurship when it came to leveraging this new tech. All right, so let's make it so this actually works though. So let me go back here and **[01:47:42]** figure out what's happening here. So, I figured out why this happened, and it's kind of a dumb reason, but when you add new secret variables like this, especially through the EMV, we need to restart our npm start development server. So, C npm start again. And I can guarantee you with this line, it's actually going to be able to read this code now. So, I've restarted the development server. I put in the YouTube link here. Generate. And here we go. We were able to get our thumbnail and the title for our video like that. So with that done, let's walk through this code **[01:48:12]** a little bit so you kind of understand at a base level what this all means. And on top of that, congratulations. You learned a new skill. You successfully integrated a third party API into your application. So looking at the top of this code, this is the reax. This is what denies links that aren't links. Eg. Coming over here, continue. This is not a real URL. Scrolling down here, you'll obviously have your little functions here. AI will handle most of this. The big thing for you to understand is that when you do complex logic like this, you're going to be understanding what's **[01:48:42]** happening when you click a button like this as this is where other code is aligned with. So I come down here and I can simply see generate if I can find it. And you might be asking what is this? This is basically it will always say generate unless it's doing the call. It will say loading like we see in the UI. But you come to generate here and then you're going to be looking for the thing where it's referencing a specific class which is right here. handle submit. I can hit command F here, control F and this will be able to make it so we understand what handle submit does which up here is handle submit. So **[01:49:14]** when I click this button, we do everything within this function. And what we do in this function is do that API call to YouTube's API v3. Now this logic itself has a bunch of cool catches. So for example, if there is an invalid video ID, it will throw that URL again or like that little error message. Coming down here. If everything looks correct, we'll do a try. We're going to try it out. We're going to load in our API key that we created in GCP on the URL. And on top of that, load in the specific video ID that we want the data from. From here, this is where it's **[01:49:46]** going to output all the relevant code. Now, there's two things you'll notice here. First thing is I need to remove this. First thing is that title is just snippet.title. You might be asking yourself, Corbin, why does it say snippet here? That's because of how it's referenced in the documentation by YouTube. So coming over here when I look at the documentation for it to reference specific variables it will use the beginning of snippet. Yeah. So as you see here it would say snippet. So snippet.title as you see here. Snippet.escription snippet. channel id. This is how we're **[01:50:19]** grabbing the specific data from YouTube. For us snippet.title is just snippet.title. But then you'll also notice it has max res high and default. Max res is highest quality of the underlying image. High is the second highest and then default's like the lowest quality. And the reason all three are being grabbed here is so that if this one doesn't exist, we'll fall back to high. And if high doesn't exist, we'll fall back to default. This gives a bunch of fail safes essentially. And then since it's a try statement, if all this fails, we're going to just set an **[01:50:50]** error here, right? Can't find the video. The API had an error, etc. We set up logic like this with a try and else or a catch so that functionally if an error does ever occur the entire application just doesn't break. We give it ways to exit. What you'll notice inside after development is you're essentially creating paths and every path has to have some type of finish line, right? Some type of like, yo, this didn't work. What do we do? The code's not going to be able to assume. You actually have to **[01:51:20]** tell it what to do. Everything else is pretty standard. And up to this point, I guess real quick on the return statement, this is the actual structuring that we see in the front end. Above return statements is going to be more of the logic heavy stuff we see in the front end. That's why you'll notice that all the variables that are identified at the top here are going to be referenced down here or alternatively used within logic like handle submit. So that covers thirdparty integrations with APIs on a front end in a secure manner. You can try to use that API key. it's **[01:51:51]** already been deleted. Let's do the last part of this video where I'm going to show you how to make this website mobile responsive very fast. So, let's wrap a bow on front-end development for this series here. Obviously, I'm going to do a lot more front-end development later on when building up this software, but for now, the last part we need to do here is make this mobile responsive. Inspect. Come up here to your little computer thing and zoom in. Let's see what it looks like as we get smaller. Now, what we'll notice is that the bumpups component section looks solid. **[01:52:21]** Footer section solid. Coming up here, though, the timestamp section, we got to do better. And then the navbar section, we definitely got to do better. So, let's do it. Well, first off, because we've made that huge change of YouTube API, let's commit it to our PR. Say get add.get commit-m YouTube API. Done. Enter. get push origin and we shall do front end here. Hit enter and then we're **[01:52:52]** going to the last part here which is going to be mobile responsiveness. As we saw earlier in our landing page, the navbar and the time stamp is our situation. Let's go and see if cursor AI can help us out here. So, let's do our navbar first cuz that was definitely the ugliest out of the two. I'm going to go ahead and do navbar here. Always add the CSS of nav so it has that as well. Let's go ahead and say, can you make this look better in mobile and tablet? Right now, the button looks way too big on mobile. Enter. And then I'm going to go ahead and explain the CSS and how you change stuff specific to viewport once it **[01:53:23]** generates this code. And I confirm it's good code. Hit accept here. And check it out. So save it. Scroll down. This is not bad. What you'll notice is that typically when asking AI models for specific responsiveness, it's going to choose a hard limit of the max width. The max width is how we understand how big the screen is. Typically though in software development, we want to ensure that the max width that we set for mobile is consistent across the different components. For now though, let's just go and see if this even **[01:53:54]** works. So I'm going to save this and check it out. And here we go. That's not bad. Although let's see if we can have tube stamp centered. To do this, I'm going to go to JS here and I'm going to say for this part and what you'll notice is that when I slightly click it, it's going to tell you where this entire thing kind of ends and closes or begins and closes. I copy this. And the way I know that this is tube stamp is because it quite literally says tube stamp right there in fixed text. How do I know that's fixed text? Because it's not **[01:54:26]** surrounded like it's not this, right? It's not like right here. It's just tube stamp. So if I change that add some DS you'll see some D's up there. I'm going to come over here and say okay for this part the part center the logo and name. Enter. I hope it interprets that as for mobile and it doesn't do it for all of them. But let's see real quickly. What you're learning here though is that when you see that app media max width, this is when we're dealing with responsiveness. Everything above this is **[01:54:56]** going to be what it's standardized to look like below these hard set limits of 900px or alternatively 600px. Now, this was smart enough to know that I meant just with the navbar on mobile. I'm going hit accept here and let's see if it works. And it did. U let's get rid of those D's. Coming over here, save again. There we go. So, now our navbar is centered and looks a lot better than what it originally looked like. And what you'll notice is that the other one that you saw with the 900px, watch this button get slightly smaller based off **[01:55:27]** that. Boom. Right here. When I scroll in, boom, smaller. And then mobile clicks in. Perfect. Now, let's go ahead and fix this situation. Now, the generate actually looks really good. I think the text size is what the issue is here. So, we're going to start a new chat. Timestamp.js timestamp. CSS. And we're going to say this. Okay. Okay, for this make the mobile look better, the text size needs to be smaller. There we go again. Was able to add the media port. So now you know this has to do with responsiveness. I'm going to go ahead and hit accept **[01:55:59]** file. Save. And boom. Looks a lot better now with it being smaller text than what it originally looked like. Now for the description, I'm going to add like margin bottom here. Let's do like 20 px. All right, that's a little bit better. I needed more space right here. And we got that more space. Let's do this. Airs looks good. So now you know how to functionally make your software more mobile responsive. Now some of this is going to have to do with the actual component itself. So for example, what we just did together was we went through every single one of these components **[01:56:30]** here and we went ahead and edited the CSS specific to navbar and specific to timestamp. When you're dealing with larger mobile responsiveness, so for example, the entire component itself, like the entire page being rendered, this is when you do the mobile responsiveness in the landing page.css. CSS or alternatively in the app.css, whichever fits better. So, two last things I want to go over in this tutorial is the first one, how do we make it so we open up new tabs when we click a button. This is pretty useful to know. And the second one is coloring and **[01:57:01]** the use of root in CSS, not Groot. We're not playing Marvel. I am Groot. That's a very fun game, Marvel Rivals. But we want to learn how to do external links this way. So, the best way to show this is honestly the navbar.js js because as you see here I click this it goes to bumpups.com all you need to do in this context is simply find your relevant button or where you want to have this kind of logic being done and be like you know what take the code and just simply say open in new tab to youtube.com **[01:57:33]** hit enter this is pretty simple logic here the two major things that you need to look for when doing this kind of logic is the following typically in the code it's going to say target_lank. This is what's going to open a new tab. If you don't want it to open a new tab, you remove this and it'll just load on the page itself. Now, for this, I'm going to reject this because we don't want that. And the second one is where it's going. So, this is going to be the href hurif of bumbos.com. That's the link it's directing to. Now, the last thing I want to show y'all is in the app.css and what the heck this root is. **[01:58:06]** So, root is really cool. This is where we can set variables specific to color. And what I mean by that is, am I saying what I mean by that a lot? If I am, then I'm going to say it one more time. What I mean by that is we can set variable colors. So color highlight is that blue that we see throughout this entire application. But when we create CSS like this, what this allows us to do is I can change the color only here and then the entire application will reflect the new color. Boom. And the way we do that is **[01:58:36]** I'm going to go back to the blue. But the way we do that is you use this line right here. You can command F it. And you'll notice it will show up in CSS throughout this application. So color highlight and it will start with var color highlight. And it's going to reference the specific color we identified in the root here. What does this mean for you? This means when creating your branding, you can set up different types of roots. Dark UI, light UI, company specific UI, whatever it may be. But the jargon you'll use when **[01:59:08]** talking to an AI model is, hey, I want to set up a root CSS class. Here's my color palette. And then throughout the entire development process, you'll reference these variable colors rather than just hard coding the color itself every single time. This is super cool. This is super useful. Make sure you leave a like if you feel like you learned something up to this point. This was a lot, I know. Let's go ahead and finally merge this PR. So, I'm going to do my most recent changes here. I'm going to do get add, get commit, and we'll call this mobile responsive. **[01:59:40]** Sometimes I mess up on my commits, y'all. It's a dashm, not equal m. E= mc^ squ enter. You all can tell this has been quite a long video for me. I've been doing this for hours, so we're getting a little crazy here. Get push origin front end. We're almost done. So, we push this. Most up-to-date code is in that branch. Coming over here, we can reload. Come down here. If we're happy with the code, that's what's currently being rendered. All we need to do is say merge pull request. Looks good. Confirm merge. Once we confirm this merge, this **[02:00:10]** is taking the all that code we just did today and pushing it back to the main branch. So I can delete this frontend branch. So coming back over to our header file here of main, you'll notice that it says coffee field bump front end. I mean, look how much code we just did. Plus 1,300 lines. That's a lot. So then all we need to do for us right now is I'm going to do get branch. I'm g do get checkout main and watch this. So I'm g do get checkout main and this is where we started. So when I come to main in my local repo you'll notice if I reload **[02:00:43]** this might take a little second to reload. Actually I might have to restart the simulation here. So not like the matrix like that we're in right now like the simulation as in like my little local host 3000. This is our main branch right now in our local repo. But now we're going to pull the code from the cloud from that recently merged front-end branch. And watch what happens. Coming over here and all we need to do is get pull origin main. This is pulling the most recent code from main. Watch this. There we go. Command **[02:01:14]** save. I like it. And look at the rendering now. Boom. We have successfully merged good code into our main branch. And we're good to go for the next branch we'll be creating together, which is going to be the backend branch. That's going to be quite the video and that's the next video in this series as you'll see and as you know now when it comes to GitHub this is why it's fundamental. Now with this main branch I have an amazing checkpoint. I've just created an amazing checkpoint where when I start going down this rabbit hole of the backend branch if I **[02:01:45]** mess up severely I can revert back to main here because main is stable. Maine is good. We love Maine. Let's proceed. So that concludes today's video on the front end. There's going to be more front-end work as we keep going on this series, but that covers most of the fundamentals of what you need to understand when it comes to front-end workflow. Now, we're going to be diving into backend workflow. It's a whole different ball game. We're basically we're going from basketball to soccer or something like that. We're using our hands. We're using our feet. Now, who knows? AI coding and backends. We are **[02:02:15]** going to code out an entire software's backend just using artificial intelligence. And yes, you heard it correctly. If you have zero coding experience, I'm making this as simple as possible. and we're gonna have AI do everything. AI is our new developer. Does that sound good? Let's jump in. Welcome back to the very long series here where we are diving in building a software from complete scratch with no coding experience. Today's lesson is the big one. This is the back end. There's not a lot of content on this topic, so we're going to dive really in depth here. I'm going to try and make it as simple as possible as this can get very complex, very fast. It's raining where I'm at right now, so I hope you don't **[02:02:46]** hear the little pitter patter in the background. There's like a little storm going on. But let's find out what we're going to learn in today's video. So, here is what we're going to do in today's video. First thing we're going to learn together how we create cloud functions, how we deploy cloud functions and understanding what this means logistically when it comes to pricing and calling this from the front end. Secondly, we're going to go over firebase emulator. I want you to think of this like how we think of localhost 3000 where that renders the entire front end. This is going to give us a nice little sandbox of a backend that's going **[02:03:16]** to be at localhost 4000. This will make more sense as we dive deeper. Following this, I'm going to go over when creating these functions whether you should use Python or JS. It actually does depend on the use case of what you're trying to achieve and I'll explain further on why JS would be used in certain context comparative to why you'd use Python in certain context when it comes to coding out backends. Next, here we're going to go over debugging and cloud logs. So, this is going to be our version of setting up a console log that you see in the front end. Now, we're setting up console logs or cloud logs for our **[02:03:47]** functions. And finally, together we're going to actually integrate a real API here of bumpups for that timestamp value that we provide our end consumer. But as you already know the steps and processes you're going to learn when integrating a thirdparty provider, you can do the exact same for whether you want to do Chad GBT's API, maybe you want to do Mailchimp's API, maybe Sen Grid's API, whatever it may be, you're going to learn how to integrate thirdparty APIs into your application. So let's go ahead and begin. So, coming back over a project here. We created the front-end **[02:04:18]** branch. We merged the front-end branch in the previous episode. So, make sure to watch that. If you're in the longer version of this video, I have no clue how long it's going to be. Might be like two or three hours. Then you already saw that and you're like, "Let's get going here." What I like to do in the development process though is right off the bat, open up a new terminal. Let's just do npm start and see what our front end looks like so far. Don't do it there. Do it here. npm start. Hit enter. Based on the skills, you already know how this goes. We're going to open up a front end here. local host 3000. The SEO looks amazing. We got our fave icons. We got our metadata. We got everything. **[02:04:49]** Typically, when doing npm star, it will open up a new tab in your browser. If it doesn't, just go to the URL localhost 2000, and it should render here. So, here's what we have for our front end so far. Everything looks good. Now, we're going to add real functionality here. So, we actually call the bumpups API and then provide the end consumer with those timestamps. Therefore, if we're going to start leveraging functions within our app, we need to enable that in Firebase. What you'll notice is that Firebase has a bunch of cool tools over here. So we can do a ton of stuff when it comes to our application. One very important one would be authentication for example **[02:05:20]** whether we want to use the fire store database as well when we store different strings or if we want to store actual files that would be using the storage right here. In this video we're going to set these functions. So I'm going to click functions here and what you'll notice is that it's waiting for a first deploy. We're going to hit instructions. Typically you've already done these commands but you know it's always good practice to ensure that you are starting on the right foot. We'll just redo these commands together. So, we're going to go ahead and copy the first one here of npm install Firebase tools. All right. So, then coming over to the terminal here. We're going to go and paste it. But it does give this weird dollar sign in the **[02:05:51]** beginning we don't need. So, I'm just going to delete that. Grab the line right here and paste it right here. Enter. Once we do that, we'll hit continue. And this is going to be initiating it in our project. We're going to do Firebase init and Firebase deploy specifically for the functions. So, we're going to let this install real quick. All right. Looks good. Now I'll do Firebase in it. And this workflow and process you're seeing right here is how you would initialize any of those different functionalities. So for example, maybe I don't want to do functions right here. I wanted to do storage. Same process, but we're doing **[02:06:21]** functions. So we're going to do spacebar here. We're going to hit enter. And look at that. We actually got an error here. And it's good that happened because let me show you one other thing that you should do every single time you log into your computer and you want to start working on your app again. This is just good practice is we're going to do Firebase logout and then Firebase login again. The reason we do this, and it's a little redundant because you're like, Corbin, I literally logged in yesterday. It's just how it works when connecting the CLI here with Firebase. You just got to reauthenticate yourself to confirm that you actually own this project. So, I'll do Firebase login again. I hit no to this and then hit Y to the one allow **[02:06:54]** Firebase to collect CLI. Make sure you chose your correct account here. Hit allow. And then if you did it successfully, you'll get this message right here. So, now that we've done that, we can do Firebase in it again. So, do Firebase init. Come back to our functions. Here we go. Enter. We're using the correct project there. Tube stamp pro. That is the project we set. And now we're getting prompted here of what language we want these functions to be. So why do we choose between JavaScript or Python? Now typically when developing any application, you're going to lean towards Python. It's just a better framework, especially if you plan on integrating artificial intelligence **[02:07:25]** within your application. A lot of the OpenAI API calls are native to Python. So keep that in mind. You're going to typically opt for Python, but why would we ever use JavaScript? And there's actually a very specific reason why. So what you'll notice is we have the ability to do authentication. Allow a user to sign in with email. Allow the user to sign in with Google or GitHub or Facebook. There's a bunch of different options here. And the use case of when to use JavaScript is when the action itself actually requires the code to be written in Node.js. And a very real **[02:07:56]** example of this is authentication. Now I created another playlist here which you can check out on my channel. It's like let's build out an apps backend. In this playlist, I go over setting up things like the authentication with signup. There's a 27minute video for that. I also go over the fire store, setting up a fire store database in addition integrating OpenAI's API and uploading files like PDFs and videos in this entire series. This is a separate series that I have on this channel. I'm pointing this out because in the current lessons you find yourself in, we're not doing authentication, but I go over in **[02:08:28]** this video right here why we're using JS, what version of JS we're using within that cloud function invocation and all of the implications of that. For now, in this series, we're just going to do it in Python for all of our functions because functionally that's all we need to provide the end value point of time stamps for our consumer. This is great as well. This is a 2hour and 30 minute series really covering up the entire ecosystem found here in Firebase and how to connect everything. So in our context though we can go ahead and opt for Python. So I hit space here or enter. **[02:08:58]** There we go. Do you want to install the dependencies now? Yes, definitely. You'll get errors if you don't. And boom, we've successfully created our functions folder with main.py. So what we want to do now is we can do Firebase deploy. And this is going to launch this to our Firebase project. do Firebase deploy as right now this is local on our machine. I also realized we needed to create a separate branch called backend here. So after I do that we're going to merge this current code to main. There's already an issue. So we'll figure this out. But let me first off merge this current code to main. As you know in **[02:09:30]** soft through development practice that's what you're supposed to do. So let me actually delete my previous branch here of front end. We don't need this anymore. And don't worry if you delete front end here in your local code and you delete it in GitHub when you say delete after merge you can always still find the branch. it isn't completely deleted. So, let's just clean up this branch here real quick because we've deployed it or we haven't deployed it yet because there's a little bit of error that we'll fix together. But now, since our branch is clean, let's do get branch or get checkout dashb and then we're going to name this one **[02:10:00]** backend as we're doing the entire backend today. Boom. Get branch backend. So, let's go and do it. I went ahead and did Firebase deploy again. And when we get that error, I'm going to leverage cursor AI because I'm going to approach this entire lesson together as if I don't know what I'm doing. I'm new to coding. So we can kind of walk through the airflow and troubleshooting together because that's going to be extremely useful for when you tackle your backend work. So we're getting air here and we're like what's going on? So what I like to do is go to like your main pie. We're in that in the chat. Honestly, up to the point of maybe even referencing **[02:10:31]** the entire folder. See if we can do that. We'll do functions here. We can do that. Cool. Now we got full context for cursor AI here. So what we're going to do here is I'm going to simply grab this, copy it, and then paste it into here when I try to do the command Firebase deploy. So what's key and what you just learned here is when doing chats like this, give the information of where all this code is actually stored. So for us, functions **[02:11:01]** is stored in functions. I think that kind of makes sense with the naming. and let's see what it says. So, it wants us to go to the functions directory and run this command. So, let's do that. Let's see if cursor is good enough where Okay, no, it's not good enough to do that. So, we're going to open up a new terminal window here and it wants us to go to this directory. So, I'm going to simply ask, can you give me the CD line for this directory so I can put in terminal? Now, you might be saying, Corbin, what the heck is a CD? CD is a command that **[02:11:33]** allows you. So you open up a terminal window. It's fresh. That's your entire Mac. And then once you see stuff like this in terminal where it says Tuesday prod, we're in terminal but in our folder. We're communicating and doing command lines and conversating. Oh, I'm going to say conversating. Some of y'all got really triggered with my cursor AI video when I said that. I'm going to say it again. Conversating. The point is we're communicating direct. Some Some of you are like, "What is this guy talking about?" Don't worry about it. All right. It's one of my bigger videos like 500k views. People really like to nitpick random words. I don't know why, but **[02:12:04]** we're communicating directly with tube stamp prod here. But what it wants us to do based off this cursor output here is it wants us to communicate directly with functions here and run this command. So we're going to do that. Therefore, when I get this new CD line here, this tube stamp prod should say functions. I'm going to grab this, paste it. And now that it says functions, here's what we're doing. Originally, we were communicating directly on the top level here in the top left here of the entire codebase with tube stamp prod. But now, when you see functions in the terminal line, that is where we're just **[02:12:36]** communicating to the functions folder here found in our codebase. So, coming back up here, we're going to run this command that it asks us to run. And we got another error. So, I'm going to approach this as if I don't know what I'm doing. So, I'm okay, I got this error. This is kind of weird. Okay, I run Python D. I run this line and get this command not found. Enter. So, first it's asking to see if Python even exists. So, **[02:13:07]** we'll do that. So, we do have Python here. And based off this output, what I like to do in these situations instead of jumping to the next step here is just give more context of what we saw. So, we see this. I'm going to add that here and then see what it says is the next best steps for what we should do. Okay, supposedly we can run this line here and try. Looking pretty good so far. We're directly in the functions folder. We're running this relevant line here. And then it wants us to activate the virtual environment. This is standard practice when dealing with functions, especially **[02:13:37]** Python. You don't really have to do this for Node.js, but Python's Python. We're going to activate the VIN and then install the relevant dependencies here. And this is going to be the pit. And you might be asking yourself, Corby, what the heck is a pit? Essentially, this line right here where it says requirements.ext install. This is going to go to requirements.ext here. Install all of the relevant lines found here. So, right now, we're going to install Firebase Functions here. So, I'm going to do this line pip install. And then, let's install. So, we're getting this error here. So, we'll go and just paste this over here. And this makes sense **[02:14:08]** because I mean, honestly, this functions version doesn't really make sense over here. So, let's see what it says to do. So, it wants us to replace this line right here with the GitHub URL to download directly the functions version there. And then wants us to rerun this command. Let's see if this works. Make sure you hit save as I didn't hit save before and it wasn't working. So, make sure to hit save. You'll know whether it's saved or not when you see the little yellow file. That means that it's actually registering that. And now we're installing the relevant dependencies here. Now, one thing to keep in mind is **[02:14:38]** that during this kind of workflow, you can sometimes find yourself in rabbit holes of AI. There could be a situation here where it starts going a little crazy and at that point, that's when we do the checkpoint logic where it's like, okay, hold up. I've installed too much stuff. I've done too much craziness within the repo. Let me revert back to the checkpoint that I made where I knew this was still stable. Keep that in mind for this process, especially for the back end. This is going to be a little bit more complex in the front end, but you use the checkpoint method. When you get to savable areas, eg for me, a **[02:15:10]** savable area was when I first just initiated the functions, that's all good because that's like template vanilla. We're good to go. But anything past that, if this works now on deployment, I'm going to make another checkpoint. Checkpoint. Checkpoint. Checkpoint. All right. So, we're going to try Firebase deploy here, even though I don't think it's going to work. We might do Firebase deploy only functions as well to see if that helps. But let's try this. I'm going start a new chat here and proceed. So, we're getting another error here. So, we're just going to hit command L, hit enter. And this is the process. This **[02:15:41]** is the workflow, especially if you're new. Find the error, talk with the chat, see if it works, and keep going back and forth in this manner. So, now that I kind of showed you some troubleshooting steps and how to do it, let me get it actually working now. So, here we go. I'm going to make sure I leave all the terminal commands you're about to see right now to set this up correctly as a Google doc in the description down below. So, make sure you leave a like, more free value. Let's see how I do this. As an overarching theme, when it comes to coding, especially in the back end, you're going to notice this a lot. It's very much like math in the sense of **[02:16:11]** 1 + 1 equals 2. It just does. 1 plus 1 equals two. Therefore, the logic that we set in the backend, it has to be crisp. It has to be right on point of exactly what you want the functions to do, the backend to do, and the cloud to do. And this will make more sense of why I'm even bringing this up as you'll see how picky it is when it comes to versions and everything of that nature. So, probably what's going to happen for you is you're going to get two different types of errors. First one's going to be like, did you forget to run this command line? It's like, no, I didn't forget to do it. I did it. Why is it not **[02:16:42]** listening? And the second one's going to be a mismatch with the underlying version of Python. So, in order to run Firebase Functions, our Python needs to be 3.12. Therefore, the first line, and we'll do it together right now, is going to be brewin install Python at 3.12. This is from the homebrew. If you are on Windows, you want to switch up your command depending on what the Windows command is, and I'll make sure I put that in the Google doc as well. So, open up a new terminal here and just copy this line and paste it. What this is going to do and I've already done it when you hit enter here is this is going **[02:17:13]** to install Python 3.12 on your computer so you can reference it everywhere. So now that we have the correct package we've hit enter there. This is when we do we did earlier Firebase in it. Go down the logic of getting the function set up. For us it was Python. We got our functions folder. We've already done that. So then the next thing we need to do here is now we got to dive into that functions folder as we described earlier. So we can do CD functions right here. And there we go. Once we do that, we're going to do this next line here. Opt homebrew bin Python 3.12. We're going to launch this virtual environment **[02:17:44]** in Python using the correct version of Python. So, paste that. Enter. As a side note, when you're installing these dependencies or when you do a command like this and it kind of just freezes for a second, you got to wait until you can see this kind of line show up again. That means that whatever request that you requested into terminal has finished its process. So, I know it's finished its process because there's nothing going on here. And I simply see this kind of line again. So this would be whatever your name is, your computer, and then we're still in the functions folder. So now we done that, we're going **[02:18:16]** to activate our VIV activate. And you'll see Vim right here. This confirms it's currently being activated. The next thing we'll need inside our functions folder is going to be this Python version. You're going to rightclick new file. Name it exactly as you see here, Python version. As you see right there, just python- version. Do that. it already exists. So, it's going to give me the error there. And then once you do that, we want to make sure we reference the correct version of Python, which is going to be the 3.12.11. **[02:18:46]** And then, as you saw earlier, requirements text, we're going to update it to this git repo that's going to allow us to install the most recent version of Firebase Functions here. And this will show up in the Google doc as well. Following this, we'll do the line of pip install requirements.ext. And all this line does is I'm going to hit enter here. I'm just reinstall it. Might as well. and it's going to take every single dependency that we put here and install it into our repo. Okay, looks good so far. This process is very similar to that lesson we did on the setup phase with the git repo, the **[02:19:16]** Firebase, React app, installing Node.js. This is just like laying the bricks out. Once you've done this for this project, you won't have to go through this workflow again as I know it can be very annoying. But once we set it up and you have a function live, then we can dive into the fun stuff of coding. From here, we're going to go to our main.py. And what Firebase does for us, or Google, I suppose, is it'll give us like a dummy function that we can test. So, right now, it's commented out. How do I know it's commented out? And when I say commented out, that means that when I run this, this code's not being read. **[02:19:48]** This is purely for what you see. For example, welcome to Cloud Functions for Firebase for Python. That's only for you to read. And what you can do sometimes is you can actually comment out code. This is actually a very useful skill to have. For now though, we're going to uncomment it. It's going to be command slash uncommented. Now, this code is live. Now, if I deploy this, it's actually going to be able to read this code. So, make sure your code looks all pretty and colory, and we'll be good to go next. So, the next thing that's very important that is quite frustrating, especially if you're new to coding, and **[02:20:19]** this is what I talked about, oneplus 1 equals 2, is you want to come down to your Firebase.json here, and you want to make sure you have the following code. Obviously, functions here. This is the functions we initiated. You'll see all this and then specifically what's very important here is the runtime. Now one error I was running into that I'm just like wait what's happening is earlier this was 311 which is the wrong version of Python based off this. Therefore for this to work this needs to be Python 312. So it matches this version right **[02:20:49]** here. Quite literally I had set this up perfectly. Everything was correct except this one line right here and it kept breaking. So keep that in mind. Firebase.json. Make sure this is the correct version comparative to this using cursor AI. Open up a chat. Add this file or just the entire functions folder. Also add firebase.json. Ask these kind of questions. Use the kind of jargon I'm using right now and it will understand to give you the right code. Once that's all done, we can open up a new terminal window here. And then **[02:21:20]** this is when we can do Firebase deploy. This is going to deploy our function. And then we're going to be able to see it in Firebase high level here. And I don't know why I didn't mention this before up to this point of this entire series. I think if you're watching the longer version of this series, you'll know within the first 30 seconds, but I forgot to mention this. All this code I'm doing right now, this repo is going to be open source. You're going to be able to grab all this code. I'm going to make sure I leave in the description down below once this entire series is done. The best part is that you quite literally are going to be able to grab this software I create, plug in your **[02:21:52]** variables of maybe your bumpups, API key, your Firebase project information, and then you'll be able to launch a software like within what 30 minutes essentially. So if you ever run into errors from here on out, just grab the repo and clone it, which I've shown in other videos, or just simply just look at GitHub and there'll be a public repo that has the entire codebase for you to essentially copy and take and use. So, don't worry. I'm not like, "Buy this software template, $500. Buy this software template. You get a full-blown **[02:22:22]** software. Just pay me the one price of $500." No, no, no. The price is free. Completely free. So, once we've done all that though, we're going to hit Firebase deploy. And this is where the magic happens. Very important. When you uncomment this, save the file so it actually renders it. This first deployment is going to take some time. And that's because of the fact when you launch fresh functions like this for the first time of invocation, it needs to create the entire infrastructure and have it set up. Once you've already deployed it once, it deploys a lot faster after that. In addition, at a **[02:22:53]** certain point during this deployment, it won't show it on this one because I've already answered the question. It's going to ask something along the lines of how often do you want to clean the cloud or something along the lines of like cleaning the code. And it's like defaults to one day. Typically, you can set that to like 30 days. This is a way for optimization of cost associated with deploying a function. Long story short, put 30 days for it. If it shows up, you'll be good to go. Also, just ask cursor AI if you get to that point and you're just like, whoa, whoa, what's happening? So, using the command line of Firebase deploy, we're going to be deploying hosting and functions. If I wanted to just deploy hosting, I would **[02:23:25]** do Firebase deploy hosting or Firebase deploy functions. But for now, this should all work. So, you'll see it right there to my bottom right. It's currently accessing the specific function of on request example. And the reason it's named that is because we named it right here. On request example. So we can name that anything. I can name it apples and cheese. Cheese and apples. This can take some time especially for larger applications. So that's why in larger applications we do a poly repo where we would create multiple git repositories **[02:23:56]** depending on the functions folder themselves. Typically what we could do here is that we have the functions folder but then maybe we have the monetization functions folder which just handles all the functions relevant to purchasing processing of payments etc. This is where we can start granularizing our backend as well kind of like how we did our front end here with multiple folders. This is obviously a little bit more advanced code work but as you already know in this channel I make it super simple. So let's do it. So once you see that that means it's deployed and we can see it in Firebase. Coming **[02:24:27]** over to Firebase. If you don't see it, reload the page and you'll see right there. It's pretty nice. We have our first function, which means that you have successfully launched your first function. Some of you are like, Corbin, I've already launched like 30. My bad. I'm giving a shout out to those people that have done some pretty complex workflow with just AI. It's pretty cool. Now, one thing you need to know since the entire Firebase project is associated with GCP. When looking at logs and kind of understanding more what's happening here, you go to these three ellipses over here. Click it. view logs. What this is going to do is this **[02:24:59]** is going to allow us to add console logs within back-end functions. And this is kind of the UI for logs in this context. So, this is going to open up. It looks a little crazy at first, like what the heck's going on. For the most part, you don't really have to care about any of this information. You're just going to be looking for the logs when we actually send requests, which we'll do later on. And then these little bars right here is anytime that anything's hit it before. So these got hit because every time you do a deployment, it's freshening up the code in the back end. Essentially, it's **[02:25:29]** kind of like how we do our local code for the front end. When I push it to main, it's freshening it up. When I mpm run build and I'm pushing that to hosting for the new front end of the website, that's freshening up the code on the live actual website. Freshening up, I'm using in a way of essentially just updating the code. Not bad though. This is actually really solid. Remember Google Docs is going to have all these terminal commands here. Let's move on to the next step here which is going to be creating our HTTP callable. Well, actually before we do that, let's set up **[02:26:02]** our Firebase emulator. So all the logic for setting up our Firebase emulator, which you'll understand more of what the heck the emulator is once we set it up. We'll be done in our Firebase.js. So the situation is this. When we want to leverage different tools within Firebase, functions, authentication, databases, we're going to initialize them here and export them from here so we can use them throughout our entire code repository. So, I'm going to go and just paste over the code that is the correct code when handling this kind of information for functions, get functions here and connect functions emulator. The **[02:26:32]** reason I'm pasting this code over, and you can just grab this from my GitHub that I put in the description down below, is because cursor AI is very hit or miss when it comes to this code. I don't know if the model's just not up tod date, but this is the correct way to do it. So, right off the bat, I left some comments in here for like if you wanted to import off, fire store, everything like that. But what we need to do is simply do get functions connect functions emulator. Get functions is what we're going to be able to use in our live website when we actually make a real call to the HTTP callable. Callable **[02:27:04]** is just another way of saying like, hey, I can just I can call it. I'm calling it hello. And this right here is that if the window says localhost and the EMV is local, which honestly we don't have this logic set up here personally, we'll just leave it there for good practice. Then we're going to connect to the functions emulator. So what this means is as you see up here it says localhost 3000. That means when we're rendering the application and it reads this firebase.js, it recognizes that hey we're in localhost 3000. So, what we need to do is make sure we connect to **[02:27:36]** functions emulator and localhost at this port 501. So, that's pretty solid. And what we can do now is we're going to launch our emulator so we can see what this actually looks like. Now, to launch the emulator, you're going to want to save this line here because you'll use it a lot is going to be Firebase emulator start. Come over here and I'm going to put in Firebase emulator start. Enter. Or emulators. There's an S. It will identify what emulators aren't currently connected. So for example, we don't have author right now. Fire store reference that 2our 30 minute series if **[02:28:06]** you want to see those be done. But for now as you can see we are running currently functions and hosting because that's all we've set up in this application. So what this does for us is this creates a nice little UI that we can start leveraging uh by GCP here. This is really nice. This allows us and this is by the URL up here of localhost 4000. And what we can do here is this is a sandbox. So if we ever had authentication, fire store, storage, we could quite literally just create a bunch of dummy accounts and then when **[02:28:37]** we're done with the account, we can delete it here or just end the terminal command or end the simulation essentially. Fire store. If there's a bunch of data found in here, we can clear the docs as well. This is all for testing here. For the most part, because of the fact that we're using functions, this isn't as relevant because we'll be calling the other endpoint anyways. But as you can see right here, functions emulator is on, extensions emulator is on, and then our hosting emulator is on. Not bad. Not bad. For now, I'm going to go ahead and add a new terminal here. **[02:29:09]** Let's save our checkpoint. Let's make a checkpoint because we've done a lot up to this point. So, we're going to get add get commit dash m. I'm going to say python works and emulator set. So now we can roll back to this for the next step here when we're creating our Python function if it absolutely is horrible. We have a checkpoint. All right, here we go. This is where we proceed. So now let's go ahead and connect our third party **[02:29:39]** provider here that's going to provide the value bump ups. First thing we're going to do here is we're going to do something similar that we did to the front end is we're going to create an EMV file. So we're do EMV. This is where we store high-risk variables. This isn't pushed to the cloud. So when you clone my repo and download all this code for free, you won't see these secret variables. You'll need to set them yourself and then just reference the code to see how I name them essentially. We're going to do bumpups API_key **[02:30:10]** and then equals. And then let's go ahead and get that. To get your key, simply go to bumpups.com. It's completely free. You go to your settings here and then we're jumping over to API. Anyone that starts an API account with bumpups here, we're going to give you $5 of free credit. See if you like the value we provide and then you can use it in your applications. We also are partnered with Zapier. So if you are familiar with Zapier automations, you can integrate bump ups into that flow as well. As we already did in an earlier video, our key is right here. So I'm going to go and **[02:30:41]** copy that and then I'm going to paste it here. Obviously I can't show the key, but we'll paste it here and we'll be good to go. So, if that key pasted, you'll notice that each key starts with bump up stash. We're good to go. Now, let's go ahead and see if cursor AI is good enough to code this out or we might have to lean towards using chat GBT or clawed in a separate chat. So, we're in our main.py. We've set that context up here and here we go. So, first thing I like to do, especially when dealing with thirdparty providers, is copy the relevant code in the documentation that we're going to use. So coming over to **[02:31:12]** bumpups here. We go to our API docs API reference and I'm going to scroll down here to the timestamps endpoint. And there we go. Now in theory I could copy paste over copy paste over but let's just be lazy here and just quite literally just copy everything on the screen. Copy. And then I paste it here. I'm just going to first say understand this. I like starting these prompts with okay first I just want you to understand this. Nothing else. Don't start rambling. Don't start going down a little rabbit hole. And then I pasted all that information. Hit enter. It will **[02:31:42]** give you like a brief summary of the situation, but now has context of what bumpups is and the relevant API endpoint of timestamps. So knowing this, we're going to first tell it where we stored our secret variable. I'm actually going to add that to the chat as well. So I go over here and we'll just add the whole folder. This is make our lives easy. So we'll do functions here and we're going to say this. So this is how we'll phrase it. Okay. My API key is Bumpup's API key. exact naming that I use in the EMV in the EMV in our functions folder. What API provider are you using? How are you **[02:32:14]** naming the API key? That's your first sentence. So the second line will be can we make an HTTP callable function that will do the timestamp endpoint. Taking a step back, if you're familiar with web hooks, this is very similar to that post, put request. So for this example, we're doing a post, which means we're sending data to bumpups API and expecting data back. If this was a git, we're trying to receive data from bumpups. This wasn't a post up here and this was a git. This would be a kind of an endpoint where maybe we're dealing with a weathers API and the API is simply we're just calling what is the **[02:32:45]** weather and SF and the endpoints SF. That would be a get and then the SF weather would be returned in the statement. For now though, all you need to understand is for a post this is when we're sending data over. And from this documentation, we can clearly see that the only thing that is actually required in the payload, there's a bunch of cool little preference stuff we can do such as making the time stamp style long or short. the underlying language. But all we care about for now, and I might add this functionality in future videos, but all we care about for now is passing the URL of a YouTube video. So therefore, I **[02:33:16]** say the expected data from the front end will be the YouTube URL, and that is specifically for this part of the post request. Let's hit enter here. I'm going to be extremely impressed if this gets this spoton on the first try. I highly doubt it will, but who knows? Maybe AI is it now. Maybe AI is all about it. So, what's cool here and what I'm noticing is that it was actually smart enough to know for me to one read an env variable in a back-end function, we need this in our requirements.ext and also knows in order to do request, we need a request **[02:33:47]** in our requirements.ext. So, for now, I'm going to hit accept all and let's check it out. So, we'll come over here. It added the two new relevant things in requirements.ext supposedly added our function here. Be very impressed if this works. So keep in mind just like how we saw in the front end when installing font awesome with all the different icons we needed to do npm install and then the line for font awesome when we do new lines in our requirements we need to install these as well. I went ahead and just asked for the relevant lines here. So we're going to our functions folder again. So I'll start a new chat **[02:34:19]** or a new terminal. Go to our functions folder. When you see functions that's good. Anytime we want to do install commands within a Python folder the next line will be activating the vin. So do source vin bin activate. You'll notice vin is here now. And then finally we just do the simple line of of pip install and then the requirements text enter. So now this is going to install the logic of and the ability to do request within a backend function. I'll walk through deeper on this Python code and how to read it. But I want to add a couple things here. First thing I want **[02:34:50]** to add here is just going to be some console logs so I can kind of show you how to read console logs in the back end when you do your logic. So let's do that. I'm going paste this over and say add console logs. And then the second thing we're going to do together here is let's go ahead and just set this up in the front end and try to make a call in a live website link. So I'm going to go ahead and accept all these prints or just say accept here. There we go. I'm going save. And then coming down to our unoff going to our landing page here. Let's do some magic. I'm going to go to the timestamp.js. This is where all this **[02:35:21]** information is being handled. And now you're going to learn how to set up a callable function within the front end. So in this chat, because it's already lasered in and it has context of the function itself, we're going to add timestamp.js. Let me see the naming that I gave the function real quick. I'm going to go to main.py and they named it on brand generate timestamp. So that looks good. So we're going to copy that. Come back over time stamp.js and say, okay, I want to now call this function generate timestamps. Then we're going to go ahead and say from timestamps.js. So it knows where to call this function. Do it. So **[02:35:52]** the first button we show the image and the title of the video. We already set up this logic with the YouTube API key in our front-end video. And then I'm going to say and then once this second button shows up saying generate timestamps. It's a little broken English but basically first we're going to confirm is this the correct video. Click the button. Nice thumbnail. And then once we confirm that then we're going to click generate timestamps which is going to call this function. And then I'm going to have it. So for now we're not going to reflect it in the front end. I'm just going to print it as a console log because we first just want to get these dots connected to see if it even works. Enter. All right, this is **[02:36:24]** actually looking really good, y'all. Wow. Cursor AI, you've improved so much since the last time I've used you. So, I'm going to go and save that. And then coming over to our local host, it's not going to work because you're going to get like a cors error of like you can't invoke from local host 2000. So, what I'm going to do is let's go and do npm run build firebase deploy and go to the actual live website link that this exists at. So, I'm going save this real quick. And just to show you what I'm talking about, let's go ahead and just add a YouTube link. So, I'm going add this YouTube link here. And then it should just show the image here. Okay. **[02:36:55]** So, it's a little broken. It shows up over here. Uh, we're going to have to add some CSS, honestly. So, let's do that. So, what I like to do is then I'm going to say timestamp.css down here. This is the correct naming with and then we'll just grab the exact line here when the title and thumbnail shows. I don't even think we're going to need CSS here, but it might do something cool. I'm going to inspect this while we wait for that. I'm going to go to console and we're about to find out a really annoying error. If you're asking **[02:37:25]** yourself, Corbin, what the heck is a corors error? Coors error is security that your browser has. So what a coores error means is that typically especially when working with software when you try to do invocations from unknown URLs you're going to get thrown errors because it's like we don't recognize this. So this is just for safety reasons. There's ways to get around this uh using different extensions just for development reasons. But for now let's just first get the CSS looking good. So I'm going to say accept here. Save. And then I don't think it added CSS. Okay cool. So just a JS. So let's add our **[02:37:57]** YouTube link again. anytime as well that I say something that you don't know what I'm referring to or it's a little confusing, just use the exact words that I use, put it into a chat and you'll be able to get more context that way. Cuz to be honest with you all, sometimes I do gloss over technical terms without even realizing that they're technical and kind of confusing because the fact that I've been doing this for so long now. So I'm going to generate here. Didn't work, but let's just see if we get our error here. Or maybe not. Maybe it actually will go through. Let's see. One thing that I like doing in this context as well is I like giving a console log of the payload, which didn't **[02:38:28]** happen here. So, I have to make sure I do that. So, let me do that real quick. I'm going to come over here and I'm going to grab this and be like, give me a console log of the payload. And when I say payload, this is the data we're sending. We just, this is like a fancy term just like all the data we're sending in like a little text block to the back end loading. Obviously, I'm gonna have to fix this. generate timestamps as this is way over here. But we should see a payload. Nice. So, this is the data that's being sent to that HTTP callable. Would you look at that, **[02:39:00]** y'all? You can't tell me that's not cool. That is That's so cool. What the heck? Okay, this is awesome. We got the payload. The timestamps are here. Introduction to codeex workflow. I mean, you can clearly see this is a codeex video. Yeah. All the different timestamps are here that we can go ahead and then leverage and show that to the front-end user. Wow, that's awesome. That's really cool. Eureka moments like that happen in software development and it's one of the best feelings. I feel like when I was first creating my first app, there were so many situations where it would take me 3 days to solve a **[02:39:31]** problem and then I would finally solve it and you'd be like, "Hold up, new toolkit in the arsenal." That's awesome. Walk through the series, get to that point, and that's going to unlock so much in your brain because now you're like, "Hold up. I really can use AI to code software. This wasn't a joke. This was not clickbait. Make sure to subscribe. I already know I have statistics. Four-fifths of you haven't hit that subscribe button. 80% of y'all. That's too many. Let's go back. So, let me go ahead and show you how we can actually read that from the back end now. So, we got all this information. **[02:40:03]** How do we read the logs of everything that happened while that front end was just saying generating timestamps? So, we're going to come over to our Firebase here. I'm going to reload. So, we see our generate timestamps flow. And I need to actually deploy the Firebase functions. My bad. The reason that worked, by the way, is because we're currently running localhost 4000, which we set up earlier in the tutorial for development purposes. So, here we'll see the logs, but I don't want to show you the logs here. Let me show you the logs **[02:40:34]** in like the real production environment. Production QA, what do they mean? QA is an absolute replica of production. Production is developer jargon for what the user uses. Eg, you launch your software, 100 people are using it in England. They're using the production version of your software. QA is a duplication of this version for us to do testing before we push stuff to production. And then local is the baseline that we've been working with up **[02:41:04]** to this point. See, I'm catching myself now, y'all. I've been doing this for a while now. So I I get used to all those comments like this guy didn't explain this, this guy didn't explain this. I'm catching myself. I'm I'm explaining it now. Okay. So let's go and deploy this function as this is good to go. And then we're going to do a another test here where we're going to deploy actually let's deploy everything so that we can see this as a Google function log. So as we stated before, this is the lines of npm run build firebase deploy. npm run builds your front end. Firebase deploy deploys that to hosting and every **[02:41:36]** relevant tool that you're using in Firebase, whether that's functions, authentication, etc. Another tip for the front end, it is good practice that when you're done developing and using these console logs for debugging, just remove them so they don't show up in the production environment. Now, to remove them, you don't have to completely burn the code. What I typically like doing is simply selecting the code here, command slash, and just commenting it out so it doesn't show up in the next request. For now though, I'm gonna leave it because we're still in the debug phase here. And to be honest with you all, by the time **[02:42:06]** you see this code in the repo, you'll be able to access all these console logs as well to help you out. Kind of cool though because you're getting an out of package software that you could straight up run and deploy and start marketing towards and making money. That's actually kind of cool. So here we go. You'll see that it's creating the generate timestamps function. When it's creating it, this will take time. When it's updating, should be faster. creating will only happen on the initial first deployment of that function with the new code. So, it's been fully deployed and you'll know that when you see that over here. I'm going to go **[02:42:36]** ahead and just follow this link to the live hosting URL. I went ahead and entered the video again in our live website link, which you'll see right up there. This is live. Although, by the time you click it, it's going to go to tubam.com. Hit generate timestamps. It sent the payload and we got the results. Now, we're in a situation of how do I see what the heck even happened in the back end? Coming over to your Firebase, you're going to reload. You're going to notice your new function here, ellipses, view logs. A really useful thing for you to understand though is always make sure that you're at the most recent logs. You'll see them all the way to the far right. You can adjust timing up here, **[02:43:08]** like last hour. But look at that. Right to my left here, we have our console logs. So, coming over to the code real quick, we see receive data. We see the payload API response status. And this is all the relevant code that we requested in our console logs. So, coming over to our main.py, PI. You'll notice that it's going to print this. Well, actually, it won't print that because it's not missing the URL. But coming over here, it will print the API response status, API response body, and then do response.ext response status code. And that's what you see here. API response **[02:43:39]** status 200 payload headers, everything we requested to show up in our Google console log. So, what I'm going to do on my own time is I'm obviously going to fix this little button situation here. Make the UI look a little bit better. I saved that all for the front end series. So, the methods and practices and the ways I'm going to go about fixing this will be the exact same that you saw in the frontend tutorial. But to be honest with y'all, we've really gotten to the point here where you successfully now know how to connect in a secure manner third party APIs into your software application and provide value. So, **[02:44:09]** here's what I'm going to do. Let me go ahead and just code out this front end a little bit so we get it to the point of reflecting this data. Let me show you how we reflect this data. eg when we get that little console log. Obviously, we don't want the user to come to the site, generate timestamps, and then the only way they see timestamps is that they'll have to inspect and go to console log over here. Let me actually just make a real quick UI that will reflect the timestamps and allow the user to copy the timestamps. So, as you already know with editing magic, big magic here, I'll see you pretty soon. And we're back. And **[02:44:40]** yes, it's a lot darker. I work day and night. You know that kid cut song. I work day and night. So, we're going to finish up this video here. Here I'm going to show you what I did and the different steps I took to make this nice cool little front end you're about to see. So I did a couple of things here and we're going to walk through everything. First thing I did was I added this history thing. I added a nice loading UI. Also I made it so that if they put in invalid URL or just random text, they can't obviously submit. This is going to mitigate bad calls to our HTTP callable which at scale will mitigate cast. So just to see how this **[02:45:11]** workflow looks now paste the URL in nice loading UI. We get our thumbnail to show up here. I hit generate timestamps. Look at that. We got a little hammer moving. Pretty cool stuff. So, I'm going to show you how to do that as well. What you'll notice is that these free open source icons, we can do a bunch of cool animations like that. So, we're going to let this generate here. And then once it generates, it's going to boom pop up with the timestamps. There we go. I'm going to make this UI look a lot better. More of like a time stamp UI to be honest with you. And I'm also going to show you how we can link every single **[02:45:41]** one of these timestamps to the actual original video itself. and it'll open up as a new tab. That'll be in the future. For now, I can copy all and just to show you that it works. I can paste it over. And there we go. We got our timestamps. So, what I also did here is I exited here. So, it allows a user to put in another video. When they're ready to go, they can hit the reload button right here, and they'll have an entire history of their past timestamps that they generated with us. Now, what's key here is I'm actually not using our backend to store this data. I'm using the user's browser, which is cool. And that's **[02:46:11]** called local storage. This also gives the user the ability to hit view timestamps here and copy again, which long-term mitigates multiple calls done here with the generate timestamps because the user can just simply, you know, click this and they don't have to do the call again. Now, what's really cool here and got me thinking a little, it would be kind of cool if I did store this in the back end and then I had like a global timestamps thing where every single user of the platform would be able to look at a list of all past generations. That's possible. Honestly, that's something y'all could build out once you get this free code. But let's see how I did this. So the first thing **[02:46:42]** we're going to do is I'm going to move over here and I'm going to reorganize this folder real quick. So because of the fact that now we're dealing with a more complex component of timestamps.js, I went ahead and made a whole separate folder here called timestamp comp. Basically stands for time stamp component in this workflow that you just saw here. This is a component. This history I've made as a separate JS file. So it's a separate component as well. And then the popup itself is a component. So we got three major components all working handinand. And we're using the same kind of flow here of the parent child. So the parent is **[02:47:12]** going to be the overall timestamp component and then the child's are the stamp pop which is the popup that we saw and the video list which is the list of videos of past videos generated. This is what's cool. What you'll notice here is that when we get this information of the user's timestamps using this callable right here, we're going to pass all this data. So coming down here, what you'll notice is that in stamp pop, we are passing the data of the time stamp history, which is what we're storing in local storage now. So taking a step back, what do I mean by storing in local **[02:47:44]** storage? So what you'll notice here is that local storage is being set. And what we're setting local storage as is timestamp history. This is just a variable that we're sitting in the actual user's browser, which means that every single time they'll generate a video with us, we're going to store to this specific variable. This also means though since we're storing in the user's browser and for you to translate this logic for your own use case when you're talking to cursor AI or Windsurf or whatever you're talking with, you can leverage this local storage variable for **[02:48:15]** really anything when it comes to front end. Typically, you know, we're going to be leaning towards the back end with very important data. But you can use this local storage to render stuff faster as we're grabbing the data directly from the user's browser rather than grabbing it from our Firebase Fire Store. The drawback though using local storage is that since it's stored in the user's browser, if the user were to use a different browser or alternatively hard refresh the page and clear their cache completely, they'll lose all their history. But that's not too relevant for us because end of the day, this is going **[02:48:46]** to be a freeto use AI YouTube timestamp platform. This is just a nice little thing that we give the user to get their information fast. So for example, I load this up in Safari here. And what you'll notice is that we don't have the history of that video we just generated because it's a whole separate browser with its own local storage here. So that's the first thing you understand local storage. When doing application development, typically if the user's logged in, we'll typically lean on local storage, some type of hybrid approach where we'll do local storage and Firebase reads, but we use local storage **[02:49:17]** to mitigate reads, which will mitigate cost, but I want to organize this folder real quick. So, I want to do it live because of the fact that timestamp comp is going to encompass everything that has to do with the time stamp logic. I'm going to move this inside here and see if any errors show up. So, I say move. I say yes. And then we got to make sure that all the paths are correct. And what you'll notice is that cursor AI is nice and sometimes it'll just update the path automatically for you. But sometimes when you're moving files around in this manner, you might get random errors like module not found. But remember from the front- end tutorial how to solve that **[02:49:48]** when dealing with those kind of paths. For now though, coming back to local 2000, it loads. It's good to go. So we got a time stamp comp. We got a regular component. Let's keep going. So I'm going to go ahead and show you the exact dictation I used to make the time stamp pop up and make it easy for me. Eg this situation here. So what I know is that in our parent component timestamp, I know that I'm grabbing the data for the timestamps here, right? Because we're doing handle generate timestamps. This is our callable. And on top of that, I know when I receive the payload, the timestamps, the data that comes to me, I **[02:50:19]** know how it's going to be structured. Now, there's two ways you can find out how it's being structured and sent to you. either you put a console log and you just copy it directly from the console log or alternatively you can come back to the documentation and you'll notice for a successful request it will give me how the payload structured I simply can copy this in the documentation and then we're going to use this in the code so here is how I made the popup very easy and even passing data with it I said okay see this code I grabbed the entire timestamp.js JS. I copied all the code in JS. I copied all the code in CSS. **[02:50:50]** Pasted it in the beginning of the chat. And then scrolling down here, this is what I said. Let's make a new file.js.css. This will be a popup. Call it stamp pop.js and CSS to make your life easy, especially when copying and pasting over code. Give the exact name that you want to use in your repository. I'm going say use same color and UI style. And its purpose is to show the data from console log timestamps results result. In addition to that console log that we set up earlier for that generate function, I also just gave how the payload should look when we receive the data and allow users to copy it. Mind you, make it look **[02:51:21]** like the timestamps and how the data is received here. And I pasted this which if you remember came from our original documentation here. So now the AI model knows how to map the data correctly when it receives it. So once I did that, I was able to get the entire stamp popup and the entire stamp pop-up CSS right here. copy paste over making these two files right here. So then next what it did is like okay so you got your nice little popup and here's how you import it to time stamp.js but as you can see here it gave it to me in like fragmented code we don't like that. So in order to **[02:51:52]** ensure that I can simply just copy and paste over very fast to timestamp.js I simply said give entire code with it imported here I repasted the timestamp.js js the entire code in that file and requested it. And then what you'll notice for the output here is that it went ahead and added it correctly. And then all the relevant variables that are associated with this, it added it up here on the top of the file. With that simple back and forth, I was able to easily not only create a popup, but also reflect real data in the popup. So that was pretty cool. And it **[02:52:23]** honestly knew how to do the copy function as well, which is pretty simple. So the next part was, okay, so now that I know how to do that, I was able to refresh the URL. Also, when I close the popup, this exits as well. How do we give a history catalog? Well, up to this point, I'm in the same chat. It has a ton of context of what we're doing. So, adding the video list JS and the video list CSS was a very simple add-on. Same situation. I identified the parent file of timestamp because this is where we're getting all the original data. I asked specifically, hey, I want **[02:52:54]** to store this in local storage and reflect it to the user. If you're a new coder, the terminology of local storage and saying it in this manner, that just comes with time and experience. But over time, what you'll realize when especially when coding of AI is that you can get really good code. You just got to know what to say. With video list.js, I say pass that original data that we have in the popup, but also I want to reflect the video title and thumbnail grab from the YouTube API. Just clearly set it. Then I said pass this data to video list. Now, what's cool here is **[02:53:24]** that the way it did this is it's not actually passing it within the video list. Eg how it's passing it here. The video list can just leverage local storage by just grabbing that specific variable found in the user's browser. Eg this line local storage get item time stamp history. Remember timestamp history we set on that original call up here which is right here. So this is local storage get item and then we got local storage set item. This is when we're setting the data. This is going to be a record of every single timestamp **[02:53:56]** that was generated by that user that we can then leverage here and grab and reflect this data. When leveraging local storage, what is super cool is that once you have the data stored in the user's browser, this doesn't cost me every single time I reload the page. This doesn't cost me YouTube API calls anymore. This doesn't cost me BumpUps API calls anymore because all the data is stored in the user's browser. So, if I hit reload here, boom. This is good to go. Now, the last thing I want to go over is going to be the loading UI here. **[02:54:26]** Click generate. It does a nice little hammer thing. Another thing that's cool is that little thing where it does the spinning wheel. So, let me see if I can show you that real quick. Actually, let me just show you a cool little trick. So, if you're working with loading UIs, which can be frustrating where it's like, okay, it only shows up when a YouTube link is put there and it's grabbing data from YouTube API. But what you'll notice is that once it kind of caches that data, it's very fast. So it's like right there. Boom. But what happen if you really want to work on that loading UI to make it look better, you just go to your logic. So for me **[02:54:56]** it's in timestamp.js. And then you scroll down and you find where this is happening. Now you can use context like placeholders, loading states, and sooner or later you'll find where it's at. I know that when this loading UI shows up, it does that little spinner thing. And what you'll notice is that each one of these are based on conditional stuff, right? So if there's no video has valid ID loading, this is when we're going to show this. But what we can do here is that we can change the logic. So for example, if it's not loading, hit save. Exclamation mark means not loading. You can ask cursor AI as well for help with **[02:55:27]** that. And then we can also say, you know, has no valid ID. We just put exclamation mark there. Essentially, you want to just keep messing with these different booleans here. Booleans true, false, till you can see it rendered in your UI. So based off those changes here, you can see it's always persistent and it's always showing. Therefore, now when I'm coding with artificial intelligence, I can really just mess with this CSS here until I get what I like. This is really helpful because the alternative way would have been like to keep putting in a YouTube link until you get it right, but you only see it for **[02:55:57]** like 10 seconds and it's gone. This is nice. Now, if you're confused about which bullies to change and everything of this nature, what I would do is simply go to cursor AI and be like, can you make it so that the loading UI is always showing? And then just work from there. The other animations that you saw there was the gradient UI where the gradient was moving back and forth here. You also saw the little hammer moving. Now to do these animations, it's actually extremely simple and things to notate in the code is going to be stuff like shimmer here, animation key frames. **[02:56:30]** This is the gradient animation. You'll notice this kind of structuring here. The idea being though that for you to do the same thing, you want to see stuff like that for you to understand that like, hey, this is the animation's happening. For me to actually do those animations, all I simply did in the AI model was two things. For the gradient loading UI, I quite literally said when there is a video that's pulling YouTube API data, use a gradient loading UI and then have a spinning wheel from Font Awesome. Notice I'm using very specific **[02:57:01]** dictation here and I'm asking for a very specific thing for the little hammer emoji effect that we saw up there. That was really cool and that was really simple for that. You just go to your code, go to where it says generating or whatever functionality you're trying to switch up. Generating here and I'm like, okay, where is the generating dot? There it is. And then what I did was I simply grabbed the relevant code here and then came down here for the actual button itself. Grabbed this code, put that into chat. I said to the left of this button, add a hammer icon and make it look like it's doing the hammering motion. And **[02:57:32]** with that simple verbiage, I was able to get a cool little hammer animation. It's getting late here. Let's wrap up this video. Let's go ahead and get add, get commit, and merge the back end. We're going to say done. There is more work to be done, of course, when it comes to the back end, but this completes today's video. The next video we're going to be going over monetization, which should be fun, specifically with creating ads and overflow ads as well. You already know the workflow here with GitHub merge pull origin main and you'll be able to push that code from main. So there you go. **[02:58:02]** That was an in-depth video on backend connecting third-party APIs. But I think the bigger thing here that you learned is how do we set up functions within Google Cloud and basically deploy your first function and it actually works. That's probably the most frustrating thing in this tutorial that a lot of y'all are going to get stuck on is the part of like Corbin, I can't even get the first function to deploy. Don't worry. Once you get it done one time, everything else is free ball. Everything else is fun. I mean, you literally saw how fast we created that bumpups API **[02:58:33]** endpoint and provided value to the consumer. I think that literally only took me like 10 minutes. Monetizing our app is actually a lot simpler than you would think it would be for our software in this entire series. So, in this video, I want to go over three major things we're going to do to monetize our app. First one is we're going to set up our custom domain so we can actually point the ads to the correct domain. Second one is we're going to set up Google Analytics so we can see traffic coming into our software. And the third one, most importantly, we're going to add actual ads to our website. Sound good? Let's jump in. Welcome back y'all **[02:59:03]** to the major series here. We're jumping over everything we need to know from building a absolute monster of a software from complete scratch as if we've never coded before and letting AI do everything. In this video, we are scrolling up to monetization. So, here are the three major things we're going to go over today. the custom domain, G4 connected and Google AdSense. What I realized in the process of adding ads to my website was how simple Google has made ads. Now, to give context of the kind of ads we're going to create today, it's going to be what you see here on Stock Twits where over here you see an **[02:59:35]** ad right now and then these little blocks right here. This is typically where ad placement is done. So, we're going to do the same thing for our site and Google just makes it extremely easy with their auto ads feature. Before we do that, we're going to go ahead and make sure we merge our branch from the last tutorial here, which is our backend branch. And something funny happened where the PR actually went away. So, I'm actually going to show you how to restart a PR if this happens to you. So, to restart a PR, assuming that you come to pull request, you're like, Corbin, I still have that second branch. I still haven't merged it. No problem. Come up here to new pull request. Then, what you'll notice is that we're going to **[03:00:06]** have the branch that you named it right here. So, for me, I named it back in. So, I'm going to click it and then I'm going to say create pull request. Going to give it a name here. So we said added timestamp functionality function and hit create pull request. So now that we've done that, we're going to go ahead and just merge this back. So as you already know the steps here, we're going to merge pull request. Confirm merge. We're going to delete this branch. Clack over here to our repository. You'll notice that it is merged right here. And then all we have to do is simply do get branch. We're going to do get checkout main and then get pull origin main. And **[03:00:38]** this is going to be our most up-to-date code that is now in our main branch. So what you noticed is I actually got an error here and this can sometimes happen when you have multiple SSH keys on your computer for different git profiles. You'll notice that repository not found could not read remote repository and you just don't have access rights. So to solve this you just need to do two lines. The first line you'll do is that in the bottom left and simply ask cursor AI chatbt, hey, how do I list out all my SSH keys on my local computer? And you'll get the same command line. So do this first line right here. Hit enter. This will list out all your keys. And **[03:01:10]** the next line you're going to do here is right here. SSH add squiggly line SSH and then the ID name. This is going to be the name of the key itself that you'll be able to find with that first command. If you don't know which one to choose, simply copy the output, put it into an AI chat, and say which one is my key to do this command with. Once you do this, we're adding the rights and our ability to access a repo again, which then allows me to do the command of get pull origin main. And as you can see, we got all of our updated code now. So, that's a nice little troubleshoot there if you ever run into that error, which can be frustrating because you're like, **[03:01:41]** Corbin, I set up the SSH key. Why is it not working? Now, it's working. All right, I've main merged. Let's go ahead and just clean up our local branch. Get branch again. We're do get branch, capital D, and then we're going to delete the local code back end because we've already merged it. Boom. Now, let's add our new branch here. Our new branch here, we're going to do get checkoutb. We'll call it money as this is purely for the monetization tutorial. There we go. get branch. Confirm we're in it and we're good to go. So, the first thing I want to do is let's make sure we connect this application to a custom domain. So, **[03:02:13]** go to your hosting here and what you're going to do is simply hit add custom domain. When prompted with the domain, obviously go purchase a domain, find your provider. I use Squarespace domains. I'm going to do tubestamp.com and then we're going to hit continue. Once you hit continue, you're going to get this request to add this to the DNS provider to verify you even own tubstamp.com. So, how do we do that? Simply go to your provider, whether that is Squarespace domains, GoDaddy domains, wherever it may be, you're going to go here. You're going to go where it says DNS. Once you're here, go where it says custom records, and hit add record. This **[03:02:44]** is where we're going to put this information in. So the first one is a record type of A. And then we got our value right here, but it's going to be an IP address, and your record type is A. So copy the IP address. Post we're going to do as at. This is going to just be the URL2stamp.com itself. The type is going to be a as identified before. And then the IP address is what we just got from Firebase. So paste that here. So with that saved and pasted, we need one more record. This is going to be a text record and we're going to copy the value right here. So host at again type is text and then the text will be what was **[03:03:16]** requested by Firebase. So paste that there. There will be one last record we're going to add here which is going to be a record that allows it to run on www.tubamp.com. So do www came and this alias data. Let's find it. This is going to be this data right here. This link. Hit save. What's very important about this link right here is don't add the HTTPS. Just simply do it as it is shown right here. So once you do that, hit verify and then you should get a message like this. Now, one big disclaimer here. This can take some time. I've seen it take 30 minutes **[03:03:47]** to an hour, but anything over two or three hours, that means you did something wrong and you should retry this logic again. For now though, the custom domain has been set up successfully and it's minting certificate. Sooner or later, we're going to be able to click this and see our live website. Pretty cool stuff. What's really cool is that sometimes it works instantly. Click it and boom, tubam.com is a live website, custom domain of our app. So, we've successfully connected tubes.com to our application. Now, let's add some analytics so we can see the traffic that **[03:04:18]** is going to this website. to add analytics. It's actually pretty simple due to the fact of what we did originally when we were creating the Firebase project. We have a measurement ID already created and associated with it. But let's just say and let's just assume you didn't enable that checkbox. So assuming you didn't enable it on creation, come up here to settings, project settings. Go to the tab that says integrations and make sure this is enabled. Once you see it as enabled, that means we've successfully connected a Google Analytics account to your Firebase project. But you're going to need the measurement ID. So let me show you how to get that. We're going to go **[03:04:48]** to our analytics dashboard, say view more in Analytics or Google Analytics. You're going to come down here to this gear icon and hit admin. In admin, go to data streams. Once you're here, click the relevant site. And it's right there. Measurement ID. I know you can't see it, but it's my measurement ID. You're going to simply hit copy here. And let's put it in the code. We can also enable cool things like enhanced measurements by hitting this little boolean switch here. So, that's turned on. So, coming back to the code, you simply add measurement ID here and then react app measurement ID. And then as we done in earlier tutorials, we go to our env file and **[03:05:18]** then set the variable there. The real variable should start with a g- something. Another important thing to ensure that it works is importing git analytics here. Firebase analytics and then doing this line of const analytics get analytics app. So far so good. You'll also notice we are exporting analytics so it can be used. Next, how do we make sure it's actually running and operating? Sometimes this step is not necessary, but I've noticed it's helped people out when there's issues where it's not persisting. So, we're going to do import, and we're going to just import Firebase. And there we go. Import Firebase. That's it. I've seen **[03:05:50]** situations where it works without doing this line. This is just to help you troubleshoot if you're running into situations still. Now, with all that done, let's go and deploy this fully to our live environment. Remember, standard practice, Firebase logout and Firebase login. Make sure you're logged into the correct email associated with your Firebase project. Once you do that, you're going to be able to run these commands with no errors. We're do npm run build firebase deploy. Hit enter. We may get an error here when it comes to the functions. We need to reinstall some dependencies here, but we might not. So, **[03:06:20]** let's just see if this works. So, once we successfully deployed, you'll get deploy complete with that nice little check mark. Two things. This deployment might take a little bit of time, especially for me, it took me around 10 minutes because the fact that I was initiating with new functions as well. On top of that, if you find that it's just sitting there for way too long, hit control C, exit out, and then just rerun the commands. I went ahead and did that. It was stuck at one part for a little too long. For now, though, this is fully deployed. Coming over to tubestamp.com, straight above, we have a live application that actually works and **[03:06:52]** users can start using. Let's see if we are connected to analytics as well. And there we go. We are connected to analytics. As you see, there is one live user and that is correct. I am currently in Indonesia. So this is perfect. Our analytics is now connected to our software. So that's successfully connected here. Before we do this commit, this very first one saying that we've successfully connected a custom domain and also Google Analytics. I want to add some code here in our public folder and build folder that's going to help you out when we have all these different types of Firebase domains. **[03:07:23]** Specifically, when we come to hosting, what you'll notice is that we have other domains we can access the website from. But in reality, when serving this website, we only want to serve it from tubestamp.com. So, how do we do that? Go ahead and open up your public folder and your build folder here, we're going to go to the index.html, and we're going to add this script. The code we're going to add at the bottom of this index html file, which is script right here, script right here, and the last part will be HTML is going to have it so that we redirect from the Firebase URLs always **[03:07:54]** to the tube stamp URL. Now to do this of cursor AI you would simply command a all of this you would ask in the chat here to do simple logic here in the sense of if what's seen in the current domain name is either these URLs as referenced right here with these URLs we're going to change the location to tubest.com and if you just want to copy this code directly I'll have the entire repository on GitHub for free all the source code so you would just jump through the git repo go to index.html HTML and just copy from here. I'm going to add this to the build folder as well. And then I'm going **[03:08:25]** to show functionally what this means. My build folder is a little weird. So I'm going to just go right here, paste it, and this should be good. Let's go ahead and redeploy this. And then I'll show you what this logic does. npm run build firebase deploy. One big thing I want to point out in this deployment is notice how when functions don't have any code change, it's just going to skip it and then keep going. This is going to allow for faster deployment for functions longterm that you don't change any of the code with. Deployment's complete. And watch this. Traditionally, if I were to open up this URL, this would lead me **[03:08:57]** to the web.app. But now, when I put this URL in my browser, it's going to redirect to tubestamp.com. So, boom. I put it in my browser. I hit search, it says tubes.com. Pretty nice. So, all these dots connected. Now, let's do our get add. Get add dot get commit. And then we shall do money. Money, money, money. Now, let's jump to the tutorial where I show you how to put ads on your site. I originally thought this part was going to be very lengthy, but man, has Google gone the extra mile now to make **[03:09:27]** monetizing websites extremely easy. So, let's do it. To monetize your website, simply go to Google AdSense, click this. I've already created my account, but the first thing it's going to prompt you with is signing up and creating account. And then you'll see something like this. When I first created my account, I simply said I don't have a site yet. So, I'm going to show you how to add your site after you create your account, but simply checkbox all this different information and say start using AdSense. So, once you come to your account, you're going to see the homepage like this. We're going to hit add site. And the site we're going to add is Tube Stamp. So, I'll do this tube stamp. **[03:09:58]** Save. Next, we're going to hit explore. And watch this. This is amazing. So, back in the old days, we used to have to do custom code for all the ads, but now we can leverage Google's auto ads. I'm going to turn this on and apply to site. So, once I hit save, let's go and preview it. So, I'm going hit edit again, and here we go. This is going to grab the actual website. This is super cool stuff, y'all. And you're going to be able to see it in mobile and desktop, and it's going to show you where the ads would possibly show up. I mean, look at this. This is actually amazing. So, what I'm going to do is we're going to set it **[03:10:28]** up like this. And then, in theory, I'm probably going to create another video on the topic of creating custom manual versions of these ads. Eg. user puts in a YouTube link, there's a popup ad. Press in 5 seconds to skip that situation. For now, though, I mean, look how cool this is. It actually knows where to place the underlying ads. So, here's what we can do. We can actually tell it where not to put the ads. If we're just like, hold up, this is going to be a bad user experience. To do that, we can simply click this. So, this is an excluded area on our website. We can **[03:11:00]** even add areas or remove areas. So, is this an excluded area? Is this an excluded area? So for maybe I don't want it here, I would click here and keep going with the areas I don't want ads to show up. And we can even view in mobile as well. So let's kind of click through this. Let's see where it'd be like. Okay, definitely don't add an ad here. This would not be a good area. This is area is fine. Maybe don't want double ads here. Scrolling down. Maybe don't add an ad under the footer here. Keep going here. Don't add an ad within the **[03:11:31]** footer. This seems fine. I'm going to remove it here. I kind of like having ads kind of below elements. So, you know, one ad right here is fine. And this should be good here. We'll have an ad above here. We have an ad right here. And I've excluded everywhere else where I feel like it'd be too redundant or just too much. With that done, I can say apply to site, which I'll jump over here real quick. Scroll up a little. And we'll hit apply to site. Save. And that's it, y'all. That is how simple it is to add ads to a website. I was flabbergasted when I figured this out. I **[03:12:03]** was like, hold up. Okay, this video is going to be a lot shorter than I was expecting. For now, though, we're going to connect your site to AdSense. We're going to say let's go. So, we're going to go ahead and add this code right here, which I know you can't see for security reasons, but you're going to hit copy here. AdSense code snippet. And specifically, what it's looking for is in the head. So, the first thing we're going to do is we're going to create a helmet in our React application in our app.js. What a helmet is is this is code where we can put little like tracking code like this in, but also we can set titles and subtitles to web pages as **[03:12:35]** well. And what I mean by that is that look at your browser right now. You see YouTube tab that is open. Hover your mouse over where it says like YouTube and whatever the name is. We can actually adjust that depending on the page using this helmet logic. I'm going to see if Cursor AI is smart enough to know from this limit amount of context what to do. It might not be. So I might have to adjust the code. And to be honest with you, it actually looks like it was smart enough. So we are going to run this first command here, which is actually installing React Helmet. It's smart that it actually gave me that as well. While Cursor AI has improved **[03:13:05]** tremendously, we're going to run this so we can actually install the ability to use the helmet command within React. What you'll notice is when using React, we can use different functionalities that are out of the box that are really cool. One being helmet. There's another one called links which allows us to jump to different pages in a more effective manner than reloading a page depending on what you're on. This will make more sense as you dive more into development. I'm going to hit accept here. Hit save. And this looks good so far. And this is what I was talking about with the title. So we got tube stamp, the easiest way to create YouTube timestamps. But what I'm **[03:13:37]** going to do because of the fact that I want to use the title that we set in our index.html, which if you go to public index.html, html. I'm going to have it fall back to this title. So, what is happening here is that for the files in app.js or even if you go to like a separate page like a contact page, you don't set the title in the helmet like this, like we saw before, you don't set it here. What the application is always going to do is it's always going to fall back on the title you set on index.html. So, right **[03:14:07]** now, anywhere you click within the app, even though there's one page, in theory, if there was multiple, it would always fall back to Tube Stamp AI powered YouTube timestamps. For now, though, this is good. And we're going to put something else in this helmet right now. Remember the AdSense code. I know you can't see it, but it's right there. Copy. So, all we simply need to do is go to our app.js and say, "Okay, in this helmet, please put my AdSense code here." This is where you paste your code. I know right now it just says code in quotation marks. That's because I'm going to paste it after I explain it, **[03:14:38]** but then we're going to say also make the high-risk variable an inv react app AdSense. So paste your code right here that you got from AdSense and then hit enter. So with that done, we're going to hit accept. I'm going to say no to that. Try to add the title again. I don't want that. And here we go. Here is our AdSense code. We got our script. We have the entire URL that you'll see. And then the high-risk variable is right here that we need to set in our EMV right now. Simply grab this, copy and then paste your EMV that is right above me. **[03:15:08]** So this code added now and I put it in my EMV. Remember anytime we are referencing secret variables like this, we need to rerun our emulator. So do another npm start to see if it works or alternatively redeploy to our Firebase application. So knowing that we're going to make some spaces here and we're going to do npm run build firebase deploy. Enter. Successful deployment. Let's see if it worked. So, coming back over here, I'm going to say I placed the code. Verify. And sometimes you're going to **[03:15:39]** get this. So, I got it working. But actually, we need to place this code somewhere else. So, to be honest with you all, when I do these tutorials, I'm doing it live. So, I'm just doing it based off my experience. I'm going at it. I leave stuff like I'm about to show you in the video cuz this helps you troubleshoot. For context, this script doesn't need to be in the app.js. In reality, the React app AdSense, this isn't even a private variable. We can actually have this public facing. We don't need to put the script in our app.js. The only reason that I'm going to leave this in the video though as well as this will be useful for you to know is that if you ever do Google Tag **[03:16:11]** Manager, which allows you to track very specific actions, eg someone signing up, someone doing a purchase on your website, this is where you're going to put that in the helmet code. I've done a separate video on that which I'll link in the description down below as well that shows you how to track events like signups and purchases within your application. This is where we leverage that in the helmet code. Where we put this Google AdSense script though is in the index.html. Simply go to index.html here. Paste over that code that we got from Google AdSense and just say, "Hey, add this to **[03:16:44]** my index.html." And then it should add it like this. This looks good. Paste it into your index.html in your public and in your build. Then run Firebase deploy again. And everything should be connected. I guess you just got a nice little lesson on helmet react part of this video as well. So, make sure you leave a like. is free. With that done, the site is verified. Now, we're going to request review. Next, it'll prompt us to give a consent message for EU, UK, Switzerland. We can do that another video. For now, I'm going to say remind me later. So, once that's done, you'll notice that the review process itself will either take a few days or up to two **[03:17:14]** to four weeks. So, what I'm going to do is I'm going to check out the website later today, see if the ads are running, and if they are, we'll do a continuation of this video, and you'll be able to see the ads live. But that concludes this video on how to add monetization to your application. And real quickly, if you don't want to mitigate your earnings when it came to the consent screen where there was implications around Switzerland EU, choose one of those options that you saw down there and then hit submit. So, now that it's done, in the next episode here, we're going over launch. I'm going to polish up the car a little bit, make the UI look better, make sure everything's connected, make **[03:17:45]** sure everything's secure. So, make sure to check out that lesson so you get a full grasp of how to fully launch a software from scratch. And then I got a very special lesson which you can check out my builder consoles law community in the description down below which I go over pitfalls and things not to do in software things that made me lose months when developing software. We are going to be launching the app today that we've built step by step. All code was done by AI. In this video I want to go over very fundamental stuff. security for your app, how to market your app, and **[03:18:16]** everything you should know when launching a real software in a production environment where people around the entire world can start using. Does that sound good? Let's jump in. Welcome back, or hello again if you're watching this on the hourong version of this series. We are near the end of this entire series, y'all. This is the last episode of all these different episodes we've been doing together. We are tackling today launch. Here's what we're going to do in today's video. First thing, we are going to secure this app. this securing of the app. I'm going to show you step by step how to do this. There's essentially no content on **[03:18:47]** YouTube around this topic. A lot of times YouTubers are like, "Oh, here's a cool app." And then they let you have it without giving you the proper way of securing it to mitigate risk when it comes to bots, headless scripts abusing your functions and everything that we need to know about when launching real software. So, this is fundamentally very important for you to watch. Following this, I'm going to give you tools and marketing strategies for when you want to get users for your application. Then I'm going to go over the importance of search engine optimization for your application, when setting up metadata, **[03:19:17]** when setting up your helmets, as I discussed in previous lessons, everything about your application when it comes to actually showing up in search and getting free traffic. Following this, I'm going to go over how you take that nice little repo in the description down below, that GitHub repo where you click the link, you see all this code, what happens when you download it, the implications of it, because when you download it, you're going to get errors, and I'll tell you why you get those errors and how to solve them very easily. And finally, I'm going to go over personal mistakes I made when creating software that's going to save you months, if not years of your time when developing real software. **[03:19:49]** Let's go ahead and secure this app. As a high level, when securing an app, what we're doing is any functions that we have in the backend can't be called through external sources, eg a random script that hits the exact endpoint or an alternative app. The goal here is that the only way that this function gets called to generate timestamps even occurs is if the user is actually at tubestamp.com and it's a real person. So there's two ways we can do this. And we're going to add these two different checks. So here is your application that **[03:20:20]** we have here. And here are the two security checks we're going to have. Have one, two. The first security check we're going to do with Firebase O. So I'm going to put O here. And what's nice about this security check is we're going to be able to set this up through an anonymous user, but we're going to be able to generate a unique identifier for when that user comes to our website to confirm that, hey, this person is actually at our website and is using our Firebase app. The second one is going to be a capture. So, I'm going to go ahead and just shorten it by saying cap. But capture here is going to be a V3 version **[03:20:51]** of this capture. This will make more sense as we get into this, but what this does is this works in the background of your application. It runs some logic to ensure that the thing that's on your website is a real person and not a bot. Only once the user has gone through O and our capture can they start leveraging the value we provide on our application. So let's go and set this up. First thing you need to do go to your Firebase app and go to build. And there's going to be an option here of authentication. Once you're in authentication, simply hit like get started for the initial screen. Then **[03:21:21]** you're going to go to the provider. Hit add new provider here. And the one we're going to add here is going to be anonymous. So select that, turn it on, and then you will see it enabled here. Some things to know. If you're like Corbin, I want to know how to set up email and password in Google. Check out the description down below. I did a whole 30-minute video dedicated to how to set up authentication in this way. And you can take the steps and processes there and apply it to all these other different native integrations. For now though, select anonymous, turn it on. The next thing we're going to add is something called app check. To do this, we're going to go to build and it's the **[03:21:53]** first option here, app check. What you'll notice is that I've already created an app. So, you're going to say get started here and in your apps, you're going to notice a option for your web app here. Click it. And then you're going to also notice an option for recapture here. So, we're going to add that right now. So, once you click recapture here, you're going to want to go ahead and create one. So, to do this, let's go to Google recapture. I also have no clue if I'm pronouncing this correctly, so let me know in the comments if I am, but simply type in Google recapture on Google and click it. Make sure the email that you're using here is the same one as your Firebase. You should see Google Recapture in the **[03:22:24]** top left. You're going to hit add new site. Create. Right here is where you're going to set up everything relevant. So for this, I would give the label what you call your software. So for me, I'm just going to do example because I've already created one. So you do example, you're going to do a V3. This is pretty cool stuff you're about to see here. And then the domains, add two. The first one's going to be local host. This is going to allow you to test this in a local environment. NPM start. And then the second one is going to be your actual domain. So whatever your domain is, domain.com. Mine's tubestamp.com. So I'm going to add it there. What's really **[03:22:56]** cool is that if you've set this up correctly and you're using the exact same email that you've used in your Firebase project along with what you see in Google Recapture here, make sure that the Google Cloud platform it's associated with is your Firebase project. So as we named in this series here, mine is tube stamp prod. Once you do that, hit submit. Once you do that and hit submit, you're going to get two keys. Your site key and your secret key. With that secret key, copy it. Come back over here and then place it right here for token time to live. Do one day. This **[03:23:28]** is default by Google. And then hit save. Looking good so far. So, what this is going to do, and we're going to set this logic in the code, is this is going to be able to check whether or not the thing that's on our website, I keep saying thing because I should just say the bot or the person. Basically, are you a human or are you a bot? That's the purpose of this recapture. The purpose of us setting up anonymous sign-in method is this is are you a human and actually on our website. So those are our two security checks there. So with that done, we need to set this up in our code. Make sure to have that site key on **[03:23:59]** hand from the Google capture because we're going to be using it pretty soon here. We're going to go to our Firebase.js. And in our Firebase.js, we're going to have to export two things now that we're using them. This is going to be the authentication and the capture. So the prompt we're going to use here is as follows. Update the source firebase.js JS to include Firebase authentication with anonymous signin and on off state change and Firebase app check with recapture v3 using process. We identify that secret key we're going to use here or sorry the site key we're going to use here because the secret key is set in Firebase app recapture site key and is token autoer **[03:24:32]** enabled true ensure these services are initialized and exported while retaining the existing Firebase app initialization analytics and functions with emulator connection. Now remember, you can always click that repo down below and see the source code here. So you can just see what the Firebase.js looks like up to this point. So you can kind of copy that Firebase.js as well. In addition, I think I'm going to have a Google doc in the description down below that shows you step by step how to set up app security. This is a very underserved topic on content, so I might as well create a Google doc. So this is very simple for your specific use case. For **[03:25:03]** now, I'm going to hit enter. So with that entered, we get our new code here. Here's a couple things you need to notate. First thing, this is our app check. So right now I left some console logs in here so you can see whether or not this is being initialized or not. For now what you'll notice is that the app check is what's initializing our recapture v3 provider which is recognizing whether or not the user is real or not. On top of that notice that we are referencing the relevant site key right here. And as you've seen in previous tutorials right above me in the EMV file simply put this exact text here **[03:25:35]** equal your site key. I've already done that. Proceed coming down here. Everything else is standard. You'll notice that now we're exporting O as well as we're going to be leveraging this in our application now. So this is our Firebase.js. We are purposely now using O for the anonymous user. And now we are also using the recapture v3 provider for the two security checks. When it comes to the front end and the timestamp.js, we actually don't have to put really any logic here that's different as we're already leveraging within our function here an HTTP **[03:26:06]** callable. Now, what's cool and what you should know right now when it comes to HTTP callables in Firebase Functions is sometimes you'll get a very annoying air of cores. And typically, if you're already leveraging Firebase correctly within your Reactbased application, the cores should be handled within the passing of the data itself of Firebase. Long story short of me saying this, if you ever receive a corores error, don't go down the rabbit hole with an AI model about how to solve the corors error when it tries to import cores. Weird import **[03:26:36]** this fix URL. Don't go down that rabbit hole. Pivot. There's another way of doing it to circumn your corors error. Corors cos. Now, if you haven't faced that yet, that sounded like complete gibberish, but if you have faced that, then you're like, okay, Corbin said not to do this, so don't do it. What we actually need to change here is going to be in our functions folder in our main.py as this is going to be the logic that will handle the request. So, first thing we're going to want to do here is go to our requirements.ext here and add a new requirement to install. Because now we're leveraging authentication, we **[03:27:07]** need to install Firebase-admin. So, once we've added this line here, come down to a new terminal window and simply put in cd functions. This is going to bring us to our functions folder up here. remember cuz we want to run this command directly into our functions folder. And then because it's a new line in the requirements.ext, we need to actually install this package. This is going to be a line you use a lot, but it's pimp install-r requirements.ext. Hit enter. And now we're installing Firebase admin, which then allows us to use this kind of logic here in actual Python code. So **[03:27:39]** functionally, what you just learned right now is if you're ever using an AI model and you see an update in your functions requirements.ext hex file, that means you need to run that line because if you don't, it's not going to work because it functionally can't even access what you're trying to reference here. So, as you'll notice, import request and then request are here. Now, with all that done, this is where the magic happens in the main.pie and we're not talking about apple pie. I like apple pie, although peon pie can be really good with some coffee, you know, like a really good peacon pie that hits. So, this is where we're going to put our **[03:28:10]** security functions of O and the recapture. what we drew before. We're going to put in the code for this and this. So, in order to do that, we're going to simply put we need to update generate timestamps. I'm referencing the specific function right there. So, it knows not to mess with on request example. I'm going to say we need to enforce app check is true and offguard and app check guard. And then based on the logic we set in Firebase.js, cursor AI should have enough context here to understand what I mean by this. So, let's go to generate. So far so good. It added the enforce app check is true. So, I went ahead and accepted some of the changes from cursor AI. It wasn't **[03:28:40]** perfect, so I had it updated a little bit. Check out the repo down below to get this code exactly how you like it. But here's what we got. First thing we're doing is that we're first off checking to make sure this is the correct app and it has the valid app tokens that we set in Firebase.js. Next thing here is I put in a bunch of prints here. So you can check in the back end when we run a function. And we're going to do that together so you can see it live what happens when you are correctly authenticated. When I say UID here, this is a unique identifier. And all it is is a unique string. And all a unique string **[03:29:10]** is is just a bunch of letters, just a bunch of numbers. And what this allows us to do is identify a user by their browser and by their location. So you logging in from Singapore, I have just associated a UID with you and I know you're anonymously signed in. When creating workflows, that's Google signin or email and password signin. We create a specific UID that's typically associated with the email as well so we can connect the two and persist data. That's a separate tutorial. Check out the backend series. For now though, **[03:29:41]** offguard has been set. App check guard has been set. This has to do with the recapture. Make sure that they're not a bot. And then we have our existing logic here that we've already set. Now, one important thing that you should note here, and I'm going to increase this right now as well, is that the time out is how long we let the backend process a request. This is set to default at 30 seconds, but I suggest you give this a minute, maybe two minutes. This is typical standard practice. 30 seconds for a request is very fast for API. It works sometimes, but if you're doing like a chat GBT completion request that **[03:30:13]** requires the AI model to really think on something, you're going to want to increase that to at least 120, which is 120 seconds. This is how long we allow the backend to run the request. If we get over 120 seconds, the function will stop itself, cut out early, and air out. So, with all this done, let's go and test this in a real environment, actually at tubsam.com. See if the checks are incurring and see if everything works. So, what I've gone ahead and done is I've real quickly set up this in a security branch, took that **[03:30:43]** code, and moved it over to a separate branch. I realized I was working in main the entire time, but as you know, standard practice, always work in a separate branch. Keep Maine untouched unless you want to merge. So to see all these changes effectively remember Firebase log out Firebase login correct account and then run this command npm run build firebase deploy enter. What we're going to show right now is it working in a secure way. I'm also going to show you the logs associated with this so you know how to read the logs. And no we're not talking about ants on the log. You know the celery sticks, the peanut butter in the middle, the little **[03:31:14]** raisins, those were a really good snack as a kid. If you don't know what I'm talking about, look up Ants on a log. I think it was called that. I hope it was called that. Shout out Ants on a log. Is it actually called ants on a log? Okay. Yeah, I'm right. Wow, that just unlocked the memory. Now, if deployment fully set up here, deploy complete. Let's check it out. Coming over to our website here. We're going to hit inspect. Grab our console logs here. See if anything shows up. And let's enter a YouTube video here. So, I'm going to put in a YouTube video right here. Got a nice little YouTube video with that API token from YouTube. If you remember, generate timestamps. Boom. So, what this is doing **[03:31:47]** is that I'm a user. I'm on the website. It's first checking my Firebase anonymous ID. Okay, cool. He has an ID. The next thing it does is going to do the recapture in the background. What you'll notice is that since it's a V3, also cool little time stamps over there. What you'll notice is that since it's a V3 capture here, this isn't like the traditional one where you have to hit the check box and then, you know, do a little puzzle. Google's getting more advanced and it's gotten to the point now where that can all work in the background to ensure that the requests are not coming from a bot. Don't act **[03:32:17]** like a bot, okay? Don't be a bot. With that done, let's check the logs. Coming over to our functions here, you'll notice our fully deployed function. I went ahead and deleted the example one. You can go and add that back. That's very easy with cursor AI. For now, we're going to hit view logs. So, coming over the logs, you're going to notice two major things. First thing, these little bars up here. That's an actual request coming in. That's someone actually clicking that button and the function saying, "Hey, there's something going on." Also, what you notice is that these are like our version of console logs down here. Generate timestamps, receive data. The data received was a YouTube link. Nice. It passed the O here of the **[03:32:49]** UID and this is a unique identifier number that is of the anonymous user. And then app check is passed. App token info is good. This is blacked out because some of this is high risk. But the idea is that it is identifying that it's correct coming from the app. We're good to process this request. And as we know, we got our timestamps shown in the front end. That little UI of Google Cloud, think of it like when you're developing in the front end and you hit the console log up here. That's your version of a console log for the back end. In Python, to get a console log, **[03:33:20]** it's not console.log. It's just print because you're printing like printing paper. Pretty nice, y'all. You set up security for your application. Now, there's some nuance here. If you're setting up a software where there is a login method, the authentication process and securing HTTP callables is a little bit different. On top of that, every single different tool that's available in Firebase such as fire store or storage, they have their own rules you can set within those as well. Eg for fire store for a data path only certain **[03:33:51]** types of users can access this data path. This comes useful in the context of maybe you're creating a software with an admin panel or alternatively a free user panel. Whatever it may be, there's more nuance to security. But in creating this type of software, this is what we can do to set it up so that we're not getting absolutely spammed by bots. I don't like bots, okay? I hate bots. No more bots. Let's see the next part here where I go over marketing strategy. So, funny enough, coming over to my school community here, I actually got asked this direct question of how to acquire your first 100 users from Aryan here. **[03:34:22]** And I hope I'm pronouncing your name correctly. I'm really bad of names, okay? I'm really good at faces. Like, if I'm in public, I'll recognize a face, but man, am I horrible of names. So, if you ever meet me in real life and I don't remember your name, it's not out of disrespect. It's purely just because I'm better at faces. But beyond that, how do we acquire our first hundred customers? And here's a great use case. So, you want to use like fundamental tools like Loom, for example, to record demos and very short demos to get to the point of your value you're trying to provide your end consumer. and then you **[03:34:53]** can reach out to your potential customer or what you'd think at the time is your potential customer that's primed for your application. So the application we were looking at here is copywift.io, a software that allows you to create Facebook ads in a more frictionless way. And through conversation that we had at our school community, we've came to the consensus here that really the best way to show the value of this software would be running a Facebook ad campaign of the software itself using the software's value and showing it works successfully. **[03:35:25]** Since the use case and the value of this software is to make Facebook ad campaigns perform better, what better demo than a two to three minute demo? Keep them short. A lot of people don't like wasting time for 10 minutes to see a potential new software they'll use in their business. They want a short and spiffy two, three minutes show a demo of a Facebook ad campaign working successfully with a software which purpose is to run Facebook ad campaign successfully. Quick two-minute demo least to high conversions. And the best part here is you get an evergreen asset. **[03:35:55]** When I say evergreen, that means that the video will be still relevant a year from now, two years from now, three years from now. And we can use this video asset not only on the landing page of the website but also when we are sending it to potential customers. In the beginning, acquiring your first 100 customers comes down to the exact value you provide. Which means that comes into parlay with creating an application that's very specific at solving one very big pain point in an industry. So for us, the application we created today is **[03:36:25]** for YouTubers that want AI time stamps. So, my target market here is simply providing a free AI YouTube timestamp tool that any YouTuber could use to get timestamps to add to their video. That's a very specific market that can cater to this kind of value. I think a big thing though when it comes to marketing strategy is really understanding who your consumer is. Understanding who your potential customer is is going to lead to better conversions long term for the different strategies you use. And it's better for you to use copy in your ads and the way you communicate your software, not in general terms, but very **[03:36:58]** specific terms. So to give an example of that, this would be like tube stamp is made for YouTubers that need timestamps on long videos. Laser in on a direct market. This topic though really grants a further in-depth series on how to properly advertise software, which is another underserved market on YouTube. So, I'll have to make another series on that if I see enough demand in the comments and just from the community in general on how to really push out software, advertise it correctly, and get your consumers. The next topic I wanted to go over is SEO importance. And **[03:37:28]** this is specifically on how you structure your application. This goes back to what we described in an earlier tutorial with the helmet variable that we can leverage throughout our application. So, coming over to index.html, this is going to be your fallback. If you don't use the helmet within the actual page itself, it will always reference the top tab as tube stamp AI powered YouTube timestamps, which is fine for my use case. But if you have multiple pages, especially in an unauthenticated version of your website, what do I mean? So coming over to bumpups here, for example, enterprise, you'll notice that up here **[03:37:59]** it changes. That's because I'm changing the helmet code. This says bumpups for enterprise teams. If I go to pricing, it changes up here as well. Compare plans, features, and cost. Bumpups.com. Every single one of these pages when the user is not logged in has a very specific header element added on top of that. The H1, these big bold text and the smaller text here is a very quick description of what is on the page as when Google crawls this. When I say crawl, that's Google's way of looking at your website **[03:38:30]** being like what the heck is your website and how do I show this as a searchable link when someone just searches something on Google. Therefore, be very specific. video management with workspaces. Upload, organize, and interact with your video content, whether it's from YouTube or local files that shows up on search that could have a good click-through rate. So, what I suggest you to do is obviously your title here in your index.html got to be on the money. This has got to describe your product very effectively so people know exactly what they're clicking. But everything else when it comes to creating your actual application, having **[03:39:01]** multiple pages, go the extra mile here of adding this helmet element with a description and a title. Using this, then you can leverage better SEO and showing up in search better. So when it structures it, you have like nice little click offs where it's like tube stamp and then like under that is like a subclick pricing toos, whatever it may be. Leverage this. This is actually pretty important. Tube stamp itself as a URL. That used to be a live URL. That was actually where I began my software journey at least for web apps was a tube stamp. I got the thing up to like fourth **[03:39:31]** in search for AI YouTube timestamps and it was pushing. Keep in mind for search this actually has tremendous relevancy for free organic traffic. So let's get to the last part here which might get a lot of viewership just randomly just because this part is going to go over how do you actually take the software we've created in this entire series and use it. So what you're going to do is you're going to simply click that link down there. You're going to see a public version of this repo. I'm probably going to rename it, restructure some of this stuff, add a lot of cool stuff in the readme just for more resources. But for now, all you really need to do is simply **[03:40:03]** go up to the public repo and you're going to clone it. You can simply go to https here, hit get clone, and then this URL, whatever URL that is. I've shown how to do this in another video, which I'll reference down in the description down below. But here are two major things you're going to get when you download this repo and try to run it. You're going to get errors. And let me tell you why. So, the first error you're going to get when you download this fresh repo, like all this code that I've done, so make sure you leave a like. It's completely free, all free code. You can actually launch this software within a day. Basically, the first error you're going to get is going to have to do with like project ID doesn't exist. You know, **[03:40:35]** different variables don't exist. Specifically, this kind of stuff or anytime we've used React app ID, even when we used it up here in main.py, bumpups API key, these don't exist. And the reason they don't exist, if you remember, is that these are found in the EMV file. EMV here and EMV here. And remember in the git ignore, we set it so that the EMV is never pushed to the cloud, which keep that logic. So what that means for you is that you can use this exact code, but you need to go the **[03:41:05]** extra mile here of right-clicking right here, hitting new file, and creating that. Once you create that, that's when you're going to load in these variables here. So you're going to do like React app API key equals and then your actual API key that you get from Firebase when we created that Firebase project together. So that's the first situation. Create your EMV files, associate them with your variables that you get in the creation process. All the variables y'all all the way down here to React app recapture site key anything. Now to make your life easy, all you need to do is **[03:41:36]** this. Copy this react_app go to search. Put in react app same string here. And then you'll see everywhere that it's referenced in the application. And make sure you've associated a variable with each one. So the second error you're going to get is going to have to do with certain things not being installed. It's going to say something along the lines of this doesn't exist. For example, I believe we used font awesome here. Yeah. Right here. So as you notice, we used font awesome. So it's going to be like font awesome doesn't exist. All this requires you to do is simply copy all those errors, put them in a cursor AI chat, **[03:42:09]** and simply put, give me the install commands for all these. Once it gives you the install commands, put that in terminal. Hit enter and you'll install everything needed. Same process, same method you got to do for the main.py here and the requirements.ext. You just got to install everything. Everything I've shown you up to this point, just need to install. And then once you do that, it should work. Which brings us to this lesson. Don't do this. Here's what we'll learn in this lesson. What we're going to learn in this lesson, oh, how to do it to them. You can find out what we learned in that lesson. Check out the builder console logs community in the **[03:42:39]** description down below. Click the link. It's only 20 bucks. It'll always be 20 bucks for life. Just hard set price. I want to make this as accessible as possible. And I can tell you right now, that's going to be the cheapest 20 bucks you ever spend in your entire life because the situations, mistakes I made in software quite literally costed me months of development. I've been running bumpups.com for the last two years. If I didn't make these mistakes, we would have been already 6 months to a year ahead of where we're at now. So, you can go ahead and check out the community in the description down below. In addition, there's also exclusive content where I **[03:43:11]** only do it in this community as shown here or very specific episodes to series that I have here. So, you'll find that don't make this mistake episode here. And as you saw earlier in this video, you can ask me questions and I'll answer them directly. And on top of that, if I think the question is a good suggestion or like really cool, I'll make a whole video on it and possibly even a whole series on it if it seems relevant. That's it though. We've successfully created software from scratch. absolutely zero lines of code all the way to full-on deployment, full-on value, full on everything. In that **[03:43:41]** readme, in that git repo, you're going to click down there. I'm going to include links to the tech stack. I'm going to include links to all the Google Docs I discussed in this entire series. And of course, the repo itself. You're going to be able to download start right away. I hope you enjoyed this series. This took me days to make hours of content. I mean, we're talking about there was one the front end one that was like four hours of unedited content compressed into an hour and 15 minutes. Crazy stuff, y'all. Without further ado, make sure to follow me on X, Instagram, **[03:44:12]** and subscribe. If you watch this entire series and four-fifths of you are not subscribing, I guess it is what it is. I'll see you in the next