Lesson 3 - How to Create Your App’s Frontend

Create a Software with AI📅 2025-06-25

Watch on YouTube ↗

Transcript

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

[00:30] to learn is how do we create a landing page? And more importantly, how do we create a landing 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

[01:02] this, we're going to create it so that it is responsive. So, it works on our desktop, 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

[01:32] the first lesson, check out the playlist down below. Click it. The first lesson goes over tech stack. Second lesson goes 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, landing page is pretty simple as there's going to be probably three major parts to a landing page. For

[02:04] our landing page, we're going to have the top bar here, which we'll call the navbar. The middle part here, we are 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

[02:35] going to convert that into code that we'll use on tubestamp.com here for the software we're creating. After the 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

[03:06] bumpups.com. So users that maybe want to get more out of a video other than timestamps are going to be able to link 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

[03:36] nature. So, we'll go over here and we will call this footer component. This right here has successfully created a 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

[04:07] don't like those anyways. They don't really work effectively. I'm going to show you a method that I personally use 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 of 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

[04:38] eyes. I like this one though because this one is a light UI. And when I say 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

[05:09] end today. So, I'm going to go up here to desktop and phone styles. And as you 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

[05:40] the CSS file is what makes everything look pretty. When you go to a website 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 2000. So we can see this code actually rendered on a website. And there we go. Up to this point, this is

[06:11] what our code looks like with the GIF. This is like a starter template for 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

[06:43] checkout-b. This is how you create a new 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

[07:15] that all in today's video. And you're 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

[07:46] 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

[08:17] 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 views has multiple files within it. For this though since in

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

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

[09:50] then the actual code itself, oh, 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 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

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

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

[11:25] 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. Here we go. This looks like good code. And I'm going to accept this and I 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

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

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

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

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

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

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

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

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

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

[16:42] 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

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

[17:43] 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 where 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

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

[18:45] 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

[19:16] 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 like 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,

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

[20:17] 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 with 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

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

[21:20] 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 add dot getit commit-m component rendered enter get push origin and then we'll do

[21:52] the branch name those commands you're going to remember for the rest of your life when you start coding of a dress 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 navbar. I like this navbar. We'll keep this

[22:23] 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 for loading. You can use JPEG as well.

[22:54] 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 complex code. Of course, you can still

[23:25] 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 because of the fact that this CSS is way off of what we

[23:56] 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. png. The image path is simply assets tov1.png. Then I'm going to hit enter. I didn't request the 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 it over. Don't look at it yet. It's not going to look good. See, it's going to

[24:27] look a little crazy. This is what happens when you don't use CSS. And cool. It actually gave us a 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 this on the top of the file in the correct path of the image. I simply

[24:58] 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 delete it. Coming down here, I could be like, you know what, I

[25:28] 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 small. Uh, it's in the middle. So, let's going to like

[26:00] really restructure this so that this kind of fills up the entire viewport. And when I say viewport, the entire screen the browser essentially. So I'm going to take a step back here, 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 app.js and the app.css is going to be our main file

[26:31] 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 and 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 is just make this look like a regular website rather than having this little

[27:01] 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 cookies and I said cookie bakery store,

[27:33] 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 from the grandparent. So what I'm going to do here is I'm going to update that.

[28:04] 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 structuring with a max of 1200 px and components inside it. Start at the top.

[28:35] 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 just going to say give me the new code for app.js and app.t 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 that. Save. And then we'll come to our CSS and make sure we save this as well for the

[29:06] 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 do this. Burn this. Burn this. 100%. There we go.

[29:40] 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 sure that we keep going down this path. So we do this this. Boom. There we go.

[30:10] 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 and it would have gotten you to this point, but this is to the expediate the process. So, what you'll notice is that

[30:40] 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 landing page.js. So therefore, since I can see there's shadow there, watch

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

[31:43] 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, this is going to be like the big app.js. This is what renders the entire application. And right now we're

[32:14] 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, the 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 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

[32:45] 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 Chad GBT generate this code for the navbar. But we're almost done at the navbar. I'm going to get to the point where I like it. I'm going to keep

[33:16] 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 components and the nuances depending if there is any nuance for each different

[33:46] 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 right there. right there. You're going to love this is going to allow you so

[34:17] 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 happening. This has to do with the actual width being constricted. But here

[34:49] 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 lenny 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 fixes, but opt for the one, especially when it comes to really overall

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

[35:51] 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 images associated with the component, then go ahead and provide a placeholder

[36:21] 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 quite literally instantly because it's going to be like and we're back that fast. All right, so let me give you

[36:53] 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 time. Second important thing to note here, sometimes when working with AI models, you just get a gold chat. What I

[37:24] 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 end development process. First thing, how do we move around components? So,

[37:54] 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 is good for you to know as you can now leverage these components on different web pages. So for example, if I were

[38:26] 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 them from Google, uploading it to my code repo. This is a lengthy process. So, let's figure out how we do this

[38:57] 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 point, though? Simply go to one of your JS files in your components and ask cursor. We're going to say, can you give

[39:27] 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 need to install the relevant library. So, simply hitting enter here and you'll be good to go. What this allows us to do is pretty cool stuff. So, what you'll notice is that we

[39:58] 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 code, replace it here, hit save. And there we go. We got cloud arrow up now with the nice little icon.

[40:29] 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 code, I simply went to bumpups.js. I added bump-ups.css as well. And then what you would do is

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

[41:31] 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, you 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 palette and the way animations are handled and just how the UI interacts on your application, is you can reference

[42:02] 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 dark and use it here." Do the same for animations. If you like an animation

[42:33] 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 something along the lines of, "Okay, looks good. Now ready to see what we want to do next." Then I would hit

[43:04] 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, all these other parts were extremely fast to be done. And the reason why is

[43:35] 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 it had that white background. The button looked completely different etc. So what

[44:06] 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 gibberish, hit generate, and it understands that this is an invalid URL.

[44:37] 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 front end is I'm putting up a safeguard. So when people use this platform and

[45:08] 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 YouTube URLs. Please output the code.

[45:39] 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 of the fact that we don't want to necessarily go to every single component

[46:11] 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 really messy once we have all these different components and you have a more built out software. So the best way to

[46:42] 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 approaching this would be using the bumpups component here, adding code specifically to the bumpups.js

[47:14] 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 as well. But to be honest with you, the real use case of a parent file is going

[47:44] 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 or every single component to render that data point, we would pass it into the

[48:15] 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, you don't always have to do it like this. Assuming that we use time stamp here and in our time stamp component, we

[48:47] 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 that's like we can't find your file, which is going to happen sometimes with AI because it doesn't have full context.

[49:18] 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 the direct thing that it can't find. First way of solving this is honestly

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

[50:20] 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 into errors that are module correlated, eg I can't find the thing. Screenshot your source

[50:50] 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 last one here is going to be mobile responsiveness, making it so when I do rightclick, inspect, and I click this up

[51:22] 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 me first off just push this branch and say we're essentially done with most of the front end. In these later tutorials

[51:53] 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 as well is I would have called it that commit like before SEO so that I know

[52:23] that if during this SEO process when I go to the index.html, 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 into our build here we're going to go to our index.html html and this is the code we're going to change. 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

[52:55] 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 underlying 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, upload it, and then export as ICO. When it comes to logo 192 and logo 512, this is

[53:28] 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 ahead and name it the exact same. I'm going to hit replace again. Replace again. And that should be 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

[54:00] 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, just 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 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 thing you'll notice is the description of the

[54:30] 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 our application. And let's actually give context here. So I'm going to go ahead and at the timestamp.js

[55:01] I'm going to go and say based on this timestampjs 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 is the description used here. This is the link right here. So now for our application, it's going to be tube stamp- powered

[55:33] 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 ahead and update with this information. All right, here we go. I'm going to 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 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,

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

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

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

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

[58:09] 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 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, will be enabled in our GCP project. So, we're

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

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

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

**[01:00:12]** 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 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 **[01:00:43]** 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. 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 **[01:01:14]** 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 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. **[01:01:44]** 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, 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 **[01:02:16]** 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 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 **[01:02:47]** 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 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 **[01:03:18]** 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 going rightclick, 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 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 **[01:03:48]** 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. I'm going to go and 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 relevant thumbnail for this video and the title. I have an announcement. Wait, what is this video? This video comes **[01:04:20]** 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 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 **[01:04:50]** 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 a little bit so you kind of understand at a base level what this all means. And on top of that, congratulations. You **[01:05:21]** 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 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 **[01:05:53]** 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 when I click this button, we do everything within this function. And what we do in this function is do that **[01:06:23]** 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 going to output all the relevant code. Now, there's two things you'll notice **[01:06:53]** 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 grabbing the specific data from YouTube. **[01:07:24]** 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 is 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 error here, right? Can't find the video. **[01:07:55]** 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 tell it what to do. Everything else is **[01:08:26]** 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 already been deleted. Let's do the last part of this video where I'm going to **[01:08:57]** 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. Footer section solid. Coming up here, **[01:09:28]** 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 going to the last part here which is going to be mobile responsiveness. As we **[01:09:58]** 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 generates this code. And I confirm it's **[01:10:29]** 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 works. So I'm going to save this and **[01:10:59]** 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. But 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 surrounded like it's not this, right? **[01:11:32]** 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 going to be what it's standardized to look like below these hard set limits of 900px or **[01:12:05]** 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 that. Boom. Right here when I scroll in, boom, **[01:12:36]** 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. Hey, 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 file. Save. And boom. Looks a lot better **[01:13:06]** 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 here and we went ahead and edited the **[01:13:36]** 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 a new tabs when we click a button. This is pretty useful to know. And the second one is coloring and the use of root in CSS, not Groot. We're **[01:14:07]** 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. Hit enter. This is pretty simple logic **[01:14:40]** 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 here 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. So root is really **[01:15:10]** 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 I'm going to go back to the blue. But the **[01:15:41]** 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:16:12]** talking to an AI model is, hey, I want to set up a root CSS class. Here is 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:16:43]** Sometimes I mess up on my commits, y'all. It's a dash m, not an 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 **[01:17:14]** 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 gonna do get checkout main and watch this. So, I'm gonna do get checkout main and this is where we started. So, when I come to main in my local repo, you'll notice if **[01:17:46]** I reload this, it 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 **[01:18:17]** 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 **[01:18:49]** 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? Two random videos. That is my face. I'll see you in the next