How To Build Your First App with AI - Lesson 3

Let AI Build Your First App (No Experience Needed)📅 2025-11-03

Watch on YouTube ↗

Transcript

[00:00] You've officially created your app in Google AI Studio, but you might be asking yourself, what's next? Well, now I'll show you what is next and how we integrate with backends like Firebase, Superbase, Versel, and any other type of backend as the steps and processes I'm going to show you in today's video can apply to anything. Therefore, let's see how we do this. Let's jump in. Welcome back, y'all. And welcome to episode three of an ongoing series here. This is the finished software. We're not finished, but I did a lot of value here. Uh, one thing I want to point out real quick, if you see this, like you're currently offline, obviously this is very buggy still. So, Google AI Studio. I am still online. I can still make

[00:31] edits. Everything is okay. This is just a glitch. It's not a U thing. It's a Google AI Studio thing. This series, we've been tackling a lot of stuff. So, we did the text stack in episode one. We did the app value in episode two. And now, in episode 3, we're going to be jumping over to this app UI right here, right above me. My objective with today's video is we're going to build out the landing page. We're going to build out the UI for the signup and login. We're then going to connect that to our value page. And then finally, our settings page. Now, if this is the first video you clicked on on this series,

[01:01] you're probably like, "Wait, what's going on? Who's this Corbin guy? How how are we this far?" Just look in the description. Look at the playlist. For me to actually show you how to build out real software, it's going to require me to do multiple episodes. I might do something where I essentially combine all these into like a multi-our video. But keep that in mind. I'm showing you the real deal. I'm showing you actually how to do this. This isn't a quick 10-minute video how to build out a real app. No, no, no. I'm showing you actually how to do this. Therefore, this is going to be multi-less, multi- episode. So, before you click off, make sure you leave a like, check out episode one. But everyone else here, we're

[01:31] episode three. I love it. Numa dry. Now, before we dive into all the new cool features that I have on this little application, here's a couple pointers that might be frustrating you. So, while using the builder in its current state, I noticed a couple things. First thing I noticed over here, if I put in a prompt, sometimes it will just air out and I'm not able to retrieve that prompt. So, first thing that I would suggest you do is every single time you put a prompt down here, just copy it and then if it bugs out, then start a new chat, put the same prompt. Second thing here is that for little things like, oh my gosh, I spelled it wrong. Thumb.io. No, it's thumbio.com. And other features that I

[02:03] saw throughout the platform here that are so minor that it's not worth a prompt here. I'm just going to fix in the later steps here. All right, enough yapping. Let me show you all the new features. This took me around two days. I would say probably in total six or seven hours. And not because it's like, hm, what's next? Because when using this chat feature here, it does take time to code out some of this stuff, but it's really good. So, first thing, new project. I wanted to give the user the ability to enable AI analysis and suggestions. You might be like, what are what are you even talking about right off bat? What I did was I went the extra 20,000 yards, y'all. I told y'all in the

[02:33] previous episode, build value, build, build, build, build. Is this is probably one of the most impressive builders I've seen when it comes to building real value and not having any errors. So the first thing I added was like, okay, let's quite literally get vision context of the image. So if I drag my image here, it's going to analyze the thumbnail. Also, let's have fun in the UI. If you while this is going on, you could either cue a prompt or quite literally play a game. Like why not? Obviously, if you don't want to play the game, then you just switch back here loading bar and you can open up a new project and proceed. But coming back over here, it is analyzing the thumbnail. Therefore, now we're going to

[03:04] get contextual suggestions based off what's incurring in this thumbnail, y'all. And on top of that, I went ahead and created another mode here called ask. First things first, let me show you what ask mode does. If I go to ask mode, I can essentially ask for help with my thumbnail. But just to prove to you that this works, I could be like, what am I holding? Presenter here. And this chat has been laser tuned and fine-tuned to be specifically for YouTube data and YouTube thumbnails and the best way to approach them. So this ask feature allows the user to chat back and forth here and get different ideas for what

[03:35] they should do in the video. If I come back over here to edit, that's where the fun occurs. So, I can say, "Make me hold a pair." Added a super cool animation as well. When it comes to this front end development work in Google AI Studio, this is extremely impressive, y'all. This is some of the best. The only thing holding you back here is your imagination for me to make this little UI that you just saw here with the llama, 8bit llama going around and little sparkles and a little paintbrush. That was just me being like, can this do this? And it did. So, push it to its limits. I'm holding a pair. Amazing. Another thing I wanted to do was the

[04:05] ability to redo prompts. Furthermore, you can see these suggestions are specific to the original thumbnail. I could reanalyze here to get more specific suggestions to now the pair. Another good thing with software is our ability to do regions, especially in a thumbnail editing software. Therefore, I could go to my face here, add a prompt like, you know, make me wear shades. You know what? I don't want to do that. Or go over here to the monitor and add something specific to the monitor. If I click that, boom. whatever it may be. That is how we can do specific tools within the thumbnail editor. I also added a simple remove the background.

[04:36] So, I'm like, you know, move the background. What's really cool here is our ability that even if it messes up, I can redo this prompt and attack it again. And there we go. Now, I can download it. Do I want a PNG or do I want a JPEG? Your choice. Fundamentally, what I'm trying to show y'all right now is just build as much value as possible. This was all vibe coded. All these new little tools. I didn't even show you this one. This gives you specific templates for your type of thumbnail that you want to produce. I got a Mr. B style. I got a cinematic vlog. MKBHD tech. So, for example, I could be like Mr. Beast style and we preload a template that I created vibe coding and

[05:06] it'll add it to this thumbnail. Birthday burger, mega cheese explosion, mega. And it doesn't stop there. New project. Went ahead and chuck this in here. I can analyze the thumbnail again. I can play the game again. I went ahead and added the additional feature of folders here. So, if I come over here to the right, I hit folder. Now the user can be like, you know what, this is going to be for YouTube thumbnails or maybe, you know, for XYZ client. Let's just do that. XYZ client. These are all the thumbnails I made for XYZ client. Hm. This thumbnail I've been creating right now is for X

[05:37] that client. I'm going to simply just add this to that folder. XYZ client add XYZ client now has the relevant thumbnail. Are y'all starting to see the power of this? No one knows about this yet. If you're watching this, you are extremely early to the curve. There is quite literally zero barriers of entry to create an application now. And right now the sentiment for vibe coding or just creating apps from simple language is oh yeah cool front end but it can't really do anything. Uh yes it can. So just wait. This this information is going to go mainstream in a couple months cuz obviously it takes time but

[06:07] you're an extreme early adopter right now if you're watching this video cuz what I'm showing you right now is one of the most impressive workflows I've ever seen in any app builder. Hands down. XYZ client. Nice. Okay. I want to delete that. Oh, move back to home. automatically knows contextually to not delete the thumbnail, go straight back to home. Super nice. And the best part about this workflow as well is, you know, I go back original image, you know, I want to start from fresh again and can proceed. Furthermore, I wanted to add the additional ability for the UI. So you can drag these cards around and chuck it in a folder that way. Nice. So what I want you to take from this little project section here of new folder, home, and categorization of

[06:38] different value we provided the end consumer. So in this context, different thumbnails. How does that translate into your application? Because in reality, organization is fundamentally extremely important in any software. So you could really let the user become ingrained into your environment and your system. If I made this thumbnail software where it was just a one-off and you just kind of had a history log, yeah, it would be cool still. But because of the fact that I added the simple feature of projects and folders and the ability to categorize gives the user the ability to essentially get insane value out of it

[07:09] for something that took me to code or quite literally Vibe code for like two minutes. Okay, maybe like five because you know how this AI is. All right, the last thing I'll show youall before we take this code out of this environment due to the limitations of this environment that I explained in episode one is this. Also, look at this. It's glitchy. It's broken. Corbin, oh my gosh, I can't read what it says. Is everything over? Don't worry. We'll be able to fix that in cursor AI. Little bugs like that, don't even sweat it in this environment. But wanted to add this. Share feedback. Use this 100%. Use this in your Google AI Studio app right

[07:39] now. Pause the video. Go to it right now. Send the prompts. I don't care. Share your feedback is going to be a fundamental piece of your software that you're going to want. For me, thumbnail editor. Who are you? Are you a YouTuber? Are you an editor? Are you a developer? Next, categorization. Do you want a new feature? You want to report a bug? You want general feedback? And then finally, the ability for information. I'm going to show you how to connect this to a real database so we can collect this data. Why is this important? because of the fact that in reality when you build out software, you're going to be able to add new features every single day or every single other day or over time as

[08:09] you keep building out a software, new ideas are going to come very apparent to you. But using something like this, you are quite literally crowdsourcing what is the highest thing in demand for you to work on next. This is such a lightweight addition and feature to add to any application that I know when I add this I can in addition create a script that's going to automatically analyze all this data for me to let me know what's objectively the next thing for me to do. Long story short, this is me basically saying why go through the heavy lifting of trying to really do deep market research when you could

[08:40] quite literally have your users tell you what to build next. I have a ton of other ideas I could do a thumbnail. I was having too much fun in this builder but I knew how to make this video. So, you put the feedback here like hello, cool, amazing. Submit feedback and you'll be able to receive that data. So, here we go. I know that was a little long, y'all. But I wanted to show you all that so you could be like, "Oh, this is no joke." Now, I didn't even look at the code and I was able to get this far. What you're going to want to do next is you're going to want to download the app. Now, by the time you watch this video, there might be more options here for other integrations like Firebase or alternatively what it has now, GCP. Now,

[09:11] yes, in this series, I'm going to show you how to do this with Firebase just cuz it's a Google product. It integrates natively. let's just make it easy on ourselves. But if you're watching from the perspective of like Corbin, I don't like Firebase. I don't want to use Firebase. Let me use Superbase. You can still watch this series and do everything I'm about to show you. Therefore, first step, whether you're using Firebase, Superbase, Versell, whatever you're using, even if there is a native integration here, I implore you, download the app. Click download app. Once you download it, it's going to be this nice little zip. Double click. This is going to give you a folder. As you can see right here, this is where all your code is. What I want you to do with this is put it somewhere special.

[09:42] I'm going to put it in my documents folder on my Mac. Once you put in your documents folder, come to your IDE, integrated development environment. I'm going to be using Cursor AI. I don't know what you should use. Use whatever you like. I've been liking Cursor a lot lately, and they just pushed out a massive update literally today, 2.0. Amazing stuff. You're going to hit open project. You will simply navigate to where you just placed that folder I showed you. So, for me, it was in the documents, and it was called the exact same thing, thumb.com. So, once we do that, we have all of our information here. We got the env.local. It's

[10:13] actually really nice of them to leave it here for us. So once we do that, I want you to do two major things here. First thing we're going to do is let's create our Gemini API key. This is what gave us the ability to do all those cool features such as the chat, the nano banana, all of that. To create your API key correctly, what you want to do is you want to go back to Google AI Studio. You're going to go to your bottom left here where it says get API key. You're going to click it. The next thing you're going to do is simply hit create API key. Once you hit create API key, name it. So I'm going to name my thumbio. And then we can select our cloud project. So right now I only have one that is

[10:44] showing. I'm going to create a project. Project name. Do the same name. In reality I probably should have named the key maybe like thumbo burner cuz I'll delete the key anyways and then use a prod one for production. But for the sake of this series as of now, it's fine how I did it. We got choose on the imported project. Thio name our keyo. Nice. Once you do that, you're going to come to the right and hit copy API key. We're going to come back to our EMV file. And trust me, if you don't understand what this means yet or why we're even doing this, it'll make more sense as we get going here. But for now, all I want you to do is paste your API key here. It should start something with

[11:15] along the lines of AI and then just a string. It should be pink or I guess it's whatever theme your IDE is in, but it should be a string. It'll be pretty obvious. Once you do that, we now should connect this to GitHub. But before we even connect this to GitHub so we have really good version control, let me show you some vibe coding prompts. So I'm going to come over to agent here. I'm going to connect to browser. I'm do browser tab. So we can see our UI and website at this moment appear here. The next command I'm going to do is going to simply be run the app. What's going to occur here, especially if you've never

[11:45] developed in your entire life or have limited development projects, is it may need to install necessary dependencies to even run the application. And what I mean by that is, if you remember from episode one, the React framework and TypeScript, it may need to install React itself for it to be run locally on your computer. This is a long-winded way of me saying all that complexity you really don't even need to care about anymore. because when I say run the app, this is just going to know that and it's going to do it for me. Obviously, I don't need to do it because I already have those packages because I have a ton of

[12:16] different apps. But for now, we're going to hit enter. Now, this series is going to be very much Vibe Cody. I'm going to try to limit as much as possible the code files to not scare y'all. But what I'll do is here and there, I will interject real knowledge in the sense of development so you can start building those bricks. One piece of real knowledge, package.js, and I'm saying real knowledge, you know what I mean? Just like the developer fundamentals. This right here, scripts. You might be asking yourself, why is it looking at the package.json? Well, it's looking for available scripts. Where are the scripts? Line six. And what specifically

[12:47] is incurring here is npm rundev. npm rundev vite. This is our nice little dependencies that we had in our application, our tech stack. Remember the materials to build the app. I know this looks extremely confusing. Don't worry. This is like v.2.0. What that means is like it's the version, their version of their own little situation. Okay? It's like uh if you ever played like Call of Duty and you were on a patch before the new update, you're on an earlier version. Well, you need the most up-to-date version. Okay, so I went ahead and identified it's running here. But what you'll notice is if I go to that browser

[13:18] in Chrome or I go to that browser in the IDE, it failed. So, you know, maybe I can troubleshoot it by saying restart browser, it might still fail here. So, I'll load it again. It failed again. Oh no, we're done. I'm going to stop developing. In reality, all you need to do is simply do something like take a screenshot of this, copy this code, or I guess this error report, and just drag it into chat, hit enter. This is the flow. Anytime you run into an error, you have no clue what's incurring. Ask the AI for help, and it'll help. So, I'm quite literally going to keep troubleshooting this until it runs. My entire point of this series is I'm not going to look into this code and solve it. I'm going to let the AI solve it to

[13:48] prove to you that you can quite literally vibe code a software from scratch. That's the point of this series. So, we're going to keep checking it out here. So, this was my first shot. You'll know a chat is completed when it's like keep all, undo. So, I'll just keep all I'll act like I don't know what I'm doing right now. I restart browser. I put in the URL and it's not working again. So, therefore, let's try this because it's still broken. I tried local host 3000 as well. I'm going to say this. Okay. Don't stop coding till it works. And I can see my app at either localhost 5173 or localhost 3000. Is there too many servers being ran at too many different ports and is it causing a conflict? We'll find out. We'll let the

[14:18] AI do the searching for us. Boom. It went ahead and rendered it. Now, what I want you to know is you just added something to your toolkit for vibe coding. What was added to my toolkit, Corbin? Look at the prompt. Don't stop coding till it works. Turn on that browser feature. Allow it to see visually the back end or the front end behind me right now. By allowing it to see the front end, it will notice when errors are incurring or if it's not even running. Therefore, it doesn't necessarily get in loops. Rather, it actually starts self-correcting itself. Now, one thing I noticed here that's pretty interesting in cursor specifically is cursor seems to hide the

[14:48] env here. Look at this. AI features disabled file in cursor. Cursor ignore. So, I'm going to see how we stop that. So, I can just screenshot this. And once I screenshot it, I'll drag it to chat. I'm showing you this. So, when there's little issues within the IDE itself, you can use AI as well and simply say you can't see these variables because of the cursor ignore. I'll just solve that so you can see them. How do you know that, Corbin? Well, just hover over. You can see files in cursor ignore. Hit enter. My objective right now when you first download that app from Google AI Studio

[15:18] is, can we render it? Can it work? And once we confirm that, then we will connect it to GitHub. As I like having the V1, the very first push to GitHub, at least be clean enough where you could functionally use the app. So therefore, we can roll back to it as you'll see later in the series. Look at this. I'm going to hit accept. Went ahead and updated it for me. And the little message went away. So now we can actually read that. That is how easy it is, y'all. Genuinely, anyone can code an app. Question is, are you willing just to push through the errors that incur? I want you also notice if you want to really learn what's incurring here, you

[15:49] can read the chat. So, solution created ccursor ignore and then explicitly allow the envo. I'm going to say keep all here. And so far so good. If I go back to thumbnail editor, it should work. But let's find out. The one thing I'm going to do here is I'm going to switch to agent mode because the fact that we're vibe coding. It's a vibe time. So, we got to do a vibe code time. Vibe code. Put that up here. Nice. And then we have our nice little agents occurring to my left. Uh little chats. I mean, little chat pass. We got the the agent behind me. We can keep going here. So, I'll be in the middle. Another thing I'm going to add here is going to be the Chrome dev tool. This is are going to be our

[16:20] beautiful console log. So if any error incurs in the short term, we can read them here. #bitconole log. So if all this done, let's test it. I have no clue this is going to work, but we'll test it. Okay, here we go. This is another feature added, but for now, I'll just say skip for now, right? Let me get this a little bit bigger. Y so this UI isn't so scrunched. There we go. I love it. I love it. All right, here we go. So I'm going to let this analyze. Our first objective when you get to this point in the tutorial is make sure everything that worked in Google AI Studio works here. So for example, let's just do a

[16:50] simple prompt here. Uh make it a pineapple in my hand. My objective here is simply see is everything connected. Is everything good? Are the There we exactly exactly why we're doing this. So we got an error. Failed to get response. Fail to process image Gemini. So we see this. This is the steps y'all. You get an error. Go to the console log like I showed you how to copy all of it. And then what we'll do here is since this chat is pretty good and we've done a lot with just running the app, I can click new agent here and then paste this air. And then make sure you have the browser

[17:21] tab on so you can visually see this and then hit enter. What this will do is either request certain information from us in order for this to work. Eg like, oh, the reason it didn't work is because you didn't provide XYZ API key or alternatively it's going to look further into this issue and just solve it naturally. I'm so glad when things like that happen in videos, y'all. when I'm trying to describe a specific air case and then the air happens live. It's beautiful because as you already know vibe coding you're going to get errors. So if you know how to troubleshoot the errors then you can quite literally build anything. Now sometimes when copy and pasting it could be overkill if you just want to alternatively just read it.

[17:52] It could be very clear the air as well. But you'll notice here for me is air calling Gemini API API air code 429. I don't care what's the message. You exceeded your current quota. Please check your plan and billing. Oh duh. So, I just need to associate a billing account with my API key. To do this, we just go where our keys at and hit setup billing. This will bring you to your GCP and the relevant billing page. Make sure the correct project is selected here. For me, it was thumb. I'm going to say link billing account. For me, it's just my billing account. Setup account. With that done, you'll notice our tiers over here. And we're good to go. So, I'm

[18:22] going to go ahead and just stop this real quick and we're going to do is delete this. I'll just do a new chat, new agent. Also, I'm trying out GBT5 Codeex right now. I'm going to see if it's any good. I just noticed it's a new model added. Seems like they also added composer one as well. Therefore, I'm going to just do gvt5 codeex. See if it's any good. What I'm going to do here as well is we'll go ahead and reload this page. All right. Nice. And we'll do another prompt. Hit enter here. And let's actually bring up the console log back up, y'all. Hit console. And let's see what it comes up with here. Nice. We are quite literally holding a pineapple. I love it. Pineapples are really good, y'all. Although, don't eat too much because too much can be too much. But we

[18:54] got the pineapple, which means that the Gemini API has successfully connected and the issue was billing. Uh, I kind of jumped the gun there by reading the air message and then doing it myself. But in theory, the AI chatbot would have gotten to the end point of being like, "Hey, uh, you didn't set up a bailing account." Oh, my bad. My bad. But that works. Let's check out other features here. Come over here. Ask be like, "What am I wearing?" Cuz right now I want to test the vision whether the vision data is correct. So, it should say I'm wearing a red shirt. And let's see. I might have to adjust this UI a little bit. A cool white baseball cap. Oh, it's cool. A snazzy maroon or deep red long

[19:27] sleeve sweater. Yeah, no. Spot on. And then it says, "Looking sharp, buddy. Thank you, Gemini. Thank you." All right, so everything's functionally seems to work. Now, honestly, I could keep messing around here, y'all. But as you already know, you get the fundamentals. How do I solve this part? How you solve this part is simply use your application, build up your application. If you run into errors, use a console log, copy the entire air, put into a chat, proceed. What's next? What is next here is connecting this to GitHub for version control. You are going to absolutely fall in love with GitHub. It's just going to be your best new friend. like you're going to love him or her. GitHub is going to allow it

[19:59] so that when you were using Google AI Studio before and you would push out a little update and then it would absolutely cook your app, you couldn't really roll back effectively. Oh, I love GitHub. It's going to be able to do that for us. So, what you want to do is go to your repositories and you're going to hit new. You're going to give that repository a name. Obviously, I would name it basically exactly what you already created. So, for me, it's Thumbo. Uh, I would probably do private and then hit create repository. If you do public, anyone in the world can see your code. So unless you want to do an open source project, choose public. If you want to do a maybe you want to make some money project, do private. Create

[20:30] repository. So once you've created your repository, this is going to be what it looks like. Don't worry y'all that have already watched my GitHub video. I'm not going to dive into setting up your SSH key or alternatively, what is GitHub? How do you use GitHub? Don't worry about that. We'll do a little bit here. But like I said in episode one, y'all, you got to watch that 46 minute tutorial because I'm not going to be adding it into lessons like this. So, if you find yourself frustrated, this next prompt, you're like, "This guy didn't even teach me how to use GitHub. This is a joke. You didn't watch the 46-inute video." You got to watch some prerexs before you

[21:00] get to this point, y'all. All right, we're going to do this. First off, SSH that we learned in the other video. Copy it. So, here's the vibe coding prompt to connect to GitHub. Connect this code repo to this via SSH. That link we just copied. Yours will be different, whatever your project name is. So, make sure your project name's here or your repo name, I suppose. Make it so that the main branch and the make the first commit be like and subscribe. Smiley face. Have you not liked? you're not subscribed yet? And then hit enter. This I love this. This is the best part here, y'all. Y'all got to understand the missing puzzle piece is understanding GitHub. It's going to make everything

[21:30] easy. So, I'm going to do his thing. If this is the first time you ever ran a GitHub command, it's going to have to install Git itself so we can even run Git commands. If that doesn't make that much sense, don't worry. Or just simply ask an AI model, what did this guy just say? He just said something about if it doesn't have Git yet, it has to install Git. What does installing Git? What does git even mean, Corbin? It doesn't matter anymore. We're in the vibe coding age. You can literally build an app with zero knowledge of coding. Like, trust me, y'all. I don't even need to put out a crazy little X thread to prove it. I am quite literally recording it. So, I went

[22:00] ahead and said repo is now on main. Let's check it. I'm reload. And it's not. So, if I reload. Oh, I follow this guy's tutorial. It sucks. Okay. Then just simply do this. All right. Didn't connect yet. What are you talking about? Cursor. Screenshot it. I don't see it in my GitHub repository. Push it. So, I do. That simple, y'all. Enter. Sometimes these AI models, even though they're absolutely amazing, will hallucinate or lead you down a path of am I wrong or is it wrong? Part of the time, or maybe most of the time, it's wrong. So, you

[22:30] just got to tell it what to do. Reload. There it is. All right. This is amazing. So, we got our nice little like and subscribe. This is our first commit here. Why did you say main, Corbin? Because it defaults to master. I like using main better. So, this is going to be our main branch. And if you know that GitHub tutorial, then you're like, "Yeah, baby. We got the main branch now. Now we can do little little PRs. I love my PRs. Oh yeah, it's PR time. It's about to get fun. So this just relieved a ton of stress off my back. And that's because when using Google AI Studio, I quite literally felt like I was in a dark room trying to shoot a scary

[23:01] monster. And if I shot the wrong thing, then it would all break because Google AI Studio does not currently have version control. This has version control. So now that room is completely lit up. I quite literally have aimbot and we're going off. So let's do it. All right. All right. All right. So we're vibe coding. I'm g switch back to editor, y'all, because I need to give a little bit more context for myself. I I do love still seeing the files, okay? I'm old fashioned like that. So, here is the structuring of our product. I didn't even get a chance to look at the code yet. Let me look at this code. All right, so we got the components here and these are the components I was referencing. All this stuff here. So, for example, image uploader.tsx.

[23:34] I know that looks scary, but essentially all that is is this right here, this little UI component. Um, first thing that's obviously I don't like about this project is that it's not refractored effectively and it doesn't have good organization. Essentially, what I'm looking at right now is I'm walking into someone's room and it's dirty. Come on, fold your clothes. John, I'm talking to you, John. I don't even know if your name's John, but if your name's John, then you're just like, "Whoa, whoa, this is fourth wall." John, go fold your clothes. Your laundry's beeping. Let's make this code look good. I'm going start a new chat because we did something big in the earlier chat, which was to connect to GitHub. And now I am

[24:04] very, very excited, y'all, because now we can do the power of a branch. Now, for us to make a branch, a GitHub branch in a vibe coded way, we do this. I'm simply going to say make a new branch. Call it front end. Notice the semicolons here or quotation marks. And that's how we're going to name the underlying branch. If you don't even know what a branch is or what that even means, don't worry. This will make more sense as you go along with the series. I highly suggest you literally watch this video alongside with you while you're going through this phase right now. Cuz this first initial phase, I know it's a lot, but look it. I haven't coded once,

[24:34] y'all. I've literally just talked to it here. But I know what to say. That's what's key. All right, let's see if this new front end branch has been made. What you'll notice right off the bat is it's not going to show up at GitHub because it is only on our computer. But what you'll notice in the bottom left here is that we are in front end. Therefore, now what you've officially done is we can go crazy. If I completely mess up and this all goes to capoot, I can roll back to main and I have this nice little it works it works version of the app. Let's make a mega prompt. Says the processes for you do the same thing. Okay. I want you to look at my component folder and reorganize for scalabilities with the

[25:05] folders. So this is a component folder up here top left. Next let's create a folder for all the relevant pages. What I mean by pages uh /signup/loss settings the situation right now we just have the component folder but that is purely for the studio feature. Therefore that is the studio page. So I have gone about with my brain and decided you know what this is going to be the studio page. So slashstudio is how it's going to show up in the URL. For now I'm going to hit enter here and let's have it work its magic. So fundamentally what you learned right now is that the way Gemini provides the files here and the

[25:37] underlying architecture and the underlying structuring of your software may not be absolutely optimized. Therefore, use vibe cody terms. Can we reorganize this to make it more scalable? So if this app absolutely blows up, I'm not just cooked with a bunch of files and it just says components and it's extremely ambiguous. It's better to have these kind of cleaning practices early on so when you build an app that has a ton of traffic, you're not searching through this. I don't want to go to Alice and Wonderland. Okay, I don't want that little rabbit to point at the clock. If you don't get that reference, then my

[26:07] bad. So, there we go. With that prompt, it went ahead and restructured these pages. Look at this landing studio. We'll be able to add settings to this. Also, the login, log out, everything like this. Now, I want you to keep in mind, y'all, this took me like five, six minutes to do, but you just let the AI coding assistant just do its work. Back in the day when coding with AI, you'd put in a prompt like that and it would get it done in 30 seconds, but the code would be absolute trash. Now, you put in a prompt like that, it will take the six, seven minutes to do it correctly. So, what does this mean? What do we have

[26:38] here? Now, we have it. So, we have a repository that's going to be a lot cleaner at scale when I need to add a ton of different pages. Right now on the app, we're just rendering the studio page. But you'll notice is that right now it's slash no studios there. In addition in the app, this is where all the pages get rendered. That's why it says return studio page here. That's all that's being shown. What is interesting, I didn't even request this is it created a starting landing page here. So, we're going to try this out. If your prompt did not result in a landing page being

[27:09] created within the pages folder, just ask for a simple landing page to be added to the pages folder. Therefore, the next prompt will be this. Now that we have the landing page and studio, make it so we render. Render is like we show landing page at slash which is like the homepage and then studio at slash studio. This will make sense once I do it. Hit enter for context. Right now the slash the homepage is the studio page. But I don't want that. So what's going to occur here is you're going to be able to see real navigation. And honestly, let's do this. I'm going to say make it so when I click on a CTA call to action,

[27:41] those little buttons on a landing page, go to /studio. So we can see this all working together. Hit enter here. And what's really cool is cursor has a Q future that will be able to show it right away. Q Q. Why does that sound so weird to me? Am I saying that right? Q. We'll let it slide. Q. And look at that. It's It's going live. It's It's working. I also want to point out, y'all, if you see errors like this in console and you start freaking out like, "Oh my gosh, I got a 403 forbidden. Is everything broken?" Don't worry. You're going to get warnings. You're going to get errors. This is very standard. If you don't believe me, go to any single Stripe checkout, hit inspect,

[28:12] hit console log. They have errors in a Stripe checkout, which is a billion-dollar company. It's a real thing that just happens to software. A lot of times, this is on the user's end rather than the applications end when it comes to showing an error like that, but it doesn't break the underlying application. Look at this, y'all. I love it. Chat based editing, instant previews, project management. Why Thumbio? Oh, I got to That's okay. That's going to be my next update here. I'm going to show you how to do mass updates for very specific dictation used for me. It keeps saying thumb.io. It's thumbo.com. Come on. Uh, supposedly it is done though. So, I'm going to say keep you all here. In the MTX, we should expect

[28:43] two pages here. And notice the new thing you just learned right now, which you don't necessarily need to know, but it's good for you to understand this from a fundamental level. Route, that is the slash here. So, slash route landing page. Render the landing page. SLoutstudio render the studio page. What does that mean? When we come over here, that means that right now we're localhost 3000. Or alternatively, when I attach this to a real domain, it'll be thumbo.com. And theno.com/studio will bring us to here. And look at this slashstudio. Two things I want to do.

[29:14] The first thing I'm going to do is real quickly make a commit so that we can save this spot as we're in a really good spot right now. Not only did we structure this for scalability, but in addition, we've created the ability for multiple pages within an application. To do this, no longer do we have to use terminal. Make a commit call it scalable and multiple pages. And because of the fact that I am within front end here, you're going to notice that little asterk go away. Look at that little asterk. It's going to say bye-bye. Bye-bye. It's going to come again. So Aira Zen as you already know from Z Deutsland. So we're going to let that push here. And then what you'll notice is that finally it's going to show up in our GitHub profile as a potential PR. In

[29:46] theory, I don't have to necessarily pull that PR. I can just wait until I'm ready. So if I scroll over here, reload, we should see a second branch show up here pretty soon. It went ahead and stopped again a little early. It seems like right now Cursor doesn't want to push it all the way. So we're just going to say push it. You'll notice that when it says created all stage updates, let me know if you want to push it. So I'm going to say push it. For you, for reference, if you've followed my prompts and you're like, Corbin, it's not showing up at GitHub. Sometimes you need to just give the green light for cursor, it might be a little bit hesitant on whether or not to execute. And for all my Star Wars fans out there, execute order 66. There we go. And we'll deal

[30:18] with that later once we're done with the front end, but we're not done with the front end. So, the first thing I want to do is I'm going to start a new chat. We did a lot of stuff. It looks amazing. Uh, let me get rid of this annoying thumbio thing like this thumb.io Because trust me y'all, I already know one of y'all are going to be a monster and buy that domain and then just have some crazy stuff on that the the page. Okay, chill out. So, I'm going to add that as context. Also, I'm going to say this. I'm going to say, "Don't ever say anywhere in the app thumb.io. To be clear, my site is thumbo.com. Therefore, the branding is just thumbo." What I

[30:49] want you to understand here is that you can actually tell the agent here, look at my entire repository. Read every single file and if you find a very specific thing, remove it, add it, change it. This is awesome. We weren't able to do this in the past because of the fact of the limitations of context. What I mean by context, I mean the amount of data we could put into a chat for it to give you an answer. But the context window is so huge now. The amount of data we can put into a chat for it to understand your entire repository is so large now. and it's only getting bigger that it can do amazing things like this where it's

[31:20] reading all this. Now, in theory, yeah, I know I get it. I get it. All you all you old fashioned people like, Corbin, you could have went to the search bar here and searched it and changed it that way. Well, what if I just wanted to vibe it? What about if I just wanted to vibe code? Okay, so this push out. So, we're going to keep on. We should see thumbnail up there. Amazing. Looks beautiful. Next thing that's kind of annoying me is like thumbnail editor AI up here. And that has to do with your index.html. What is this, Corbin? Your index.html HTML is how this will show up in search. And what I mean by search is this right here. Google Perplexity AI shows up in chat. It's this hyperlink

[31:50] here and the underlying description. Therefore, what I'm going to do here is this. I'm going to create a new chat. I'm going to hit at index html. Now, we're referencing the specific file behind me. I'm going to simply say I like the UI as the coloring looks good so far, but change the title and metad description to match thumbnail and our purpose. Best YouTube AI thumbnail editor. What is your purpose? What is your reasoning behind your application? And let's just update this entire index.html. So when it gets crawled by Google, I noticed it said crawled in an earlier video, which probably sounds extremely confusing to some of y'all. Crawl is just another way of me. It's

[32:21] just Google's way of saying when their little bots look at your website and extract the title data like, "Oh, this is a thumbnail editor." That's what I mean by crawling. All right, looks good. Nice. Thumbo is the best YouTube AI thumbnail editor for creators who want scroll stopping visuals in seconds. I like it. So then if I come back over here, you'll notice that it shows up in the bar right here. So I like it a lot better. Nice. So here's what I'm going to do right now because fundamentally you've learned a lot in this tutorial when it comes to front end. Let's build out that login page real quick. I'm going to show you how to use dummy data here. And also I'm going to show you how

[32:51] we can build out a real quick settings page. Everything else when it comes to Corbin, how do I build a better footer? Very simple stuff. That's just vibe code in it. If you recall from earlier in the tutorial, we had these little vibecoded designs created. So let me just go over the objective, right? So, create a good top fold like I described in episode one or two, forget which. Get some good content there. What the heck does your thing even do? And add a footer with the relevant links that I described in an earlier episode. One big thing about the top fold that I suggest you to do, here's a nice little pro tip is use a recording software like Studio and just

[33:22] create a real quick demo. 20 to 30 seconds real fast. You don't need to be a professional. And when I say demo, y'all, we come over to my X. I'm talking about like one of these demos down here. Wa, super cool, amazing product. Like, this is literally 30 seconds. Do the same thing for your product. Show your product in under a minute. You'll get crazy better conversions. And then just put it here. You'll be good to go, I guess. Let me know in the comments if you want me to show you how to do a video like that. That actually might be pretty useful. I'm not too sure if you guys care about that, though. So,

[33:52] landing page, we'll just say it's done cuz I'll just do that on my own time. I don't want to waste any of your time right now. Let's just do the sign up and login real quick. All right. So, to do this, we're going to start a new chat here and identify that we need this page. So, here's a prompt. We need the login and signup page. Add it to the pages folder. This right here where the landing studio is. And for now, let's do email and Google login. Make it look like the attached images. And we'll grab those pretty quick. I'll show you what I'm talking about. And for now, the CTA goes to these pages. Sign up. Log in. And then for now, the demi data. And when I click Google button, it takes us

[34:23] to /studio. So, what are these screenshots I'm talking about? In theory, I could just have it program a sign in signup login page. But if there's a page you like, so if we come over to bumpups, I like this page. I could just screenshot it. Go to the signup version of it. Looks amazing. Screenshot again. I mean, this is how simple front-end coding has become, y'all. I will simply drag these in here. Now, to be fair, it might not be able to get this little Google logo, little images here, but it's going to essentially get everything I want in a signup page. So, let's see it do its work. I'm going to hit enter here, and it's going to proceed. Remember, always have that browser feature on. Always have this on. This is going to save you

[34:54] a ton of headaches. It's brand new in coding. Let's see what it looks like. It went ahead and finished that. Now, one thing I want to point out, y'all, as this was a very lengthy task. It took a couple minutes, is sometimes it'll get stuck, and if it gets stuck, I literally just said proceed and then hit enter again, and then it got unstuck and it kept going. I will admit, y'all, I looked at these results early. This blew my expectations. This did way better than it should have done. First off, get started for free. Yeah, it says bump ups. We'll change that, but don't worry. Look at this UI, y'all. Basically, spot on. It went as far as getting the Google logo on top of that. Oh, I already, you

[35:26] know, have an account. Let me log in. login. Beautiful as well. Important for you to identify. Look up here. SLO for the login page. Come back over here for the signup page. It's SLS signup. Now, why is that important? Because the fact that when we set up real backend logic here, it's actually going to be very important where we're calling that relevant information from in certain context. In reality, if you want to learn something really cool right now is that when a user in any platform hits sign up with Google or alternatively, hey, I already have an account. I'm logging in with Google. The code's the exact same. Actually, it doesn't matter whether you're signing up or signing in. uh when it comes to the Google off a at

[35:57] least. Now, let me just fix something real quick. What you'll notice is that because it literally copied that to a T, it has like bump AI, bump ups here. Let's just update that real quick. So, I'm going to go ahead and say any reference to bump ups or bump AI should be thumbo and thumb AI make selling points as well about AI thumbnail editing. Now, in theory, I could get way better copy for this landing page. When I say copy, I'm referring to just the underlying text here. I could get way better copy if I really wanted to and dive a little bit further. And what I mean by that is I would suggest you run

[36:28] a new chat and you would essentially tell it, hey, look at my repository. Understand the value I give my end consumer. Once you understand the value I give my end consumer, for me it is thumbnail editing with AI, my very specific copy for the landing page that's a little bit better, I suppose. You know, more features cuz yes, project management, instant previews here, and then behind me chatbased editing, but there's a lot more we can do within the studio right now that I would probably want to highlight. For now, it is going through. It's ensuring that everywhere there was bump ups is now Thio. Join thousands worldwide crafting AI powered thumbnails with thumbo. Generate scroll stopping thumbnails in seconds with

[36:59] thumbo AI. Upload. This is not true. Well, actually upload local or YouTube videos and capture the That's not true. That's from bumpups. But the idea is that I would kind of dive a little bit deeper here and obviously change the more specific about the copy. But look at this y'all. We quite literally created a signup and login page that looks good. And then we have the dummy data now where if I click this, it takes me to studio. Let's do the last part of the tutorial here where we set up the settings page. If you remember, our settings page was something along the lines of this. So, let's just make my life easy and screenshot it. They say,

[37:30] "Can we short Figma stock? Does Figma have a stock?" Cuz if it does, I would love to short it right now because you don't even need design anymore. Or maybe in certain industries you do, but for coding, not really. All right, so I'm going to do a new chat here. Uh, first off, I actually got to commit this because this was a pretty big update. I'm going to say commit this branch and push and call it login. Enter. And then in the front end branch here, it will push that little asterisk will go away. The asterisk means that something is different than what it saw in the cloud in GitHub when it comes to like there's a new line. That's why these files are yellow green. Green means it's completely new. Yellow means there's a

[38:02] change in a pre-existing file that is saw and it cross referenced with GitHub. And what you'll notice is here if we come and click our PR honestly actually we can just compare and pull request here. And something you can do, especially in the front-end development stage, is I can do screenshots like, oh, let's take this, let's go here, screenshot this. This is also really cool, y'all, when building applications, when you take screenshots like this, and you put them in a PR because three months down the road and developing your application, you can go to this pull request and be like, "Wow, this is what it used to look like. Great pull request

[38:33] front end. I haven't merged it yet. Just created it. It has my data. You'll notice that we have our commits here. scalable in multiple pages and login logic. And if you remember from the GitHub tutorial, that is where that little code is. That's going to allow you to roll back if you mess up. Let's jump back to cursor. With that pushed here, we're going to go ahead and do our last little settings page here with the vibe code. What I'm going to do here is simply go to here, go to the page. I'm going to screenshot this as well, so it has context of what I mean by when I click settings for my profile image. So, first off, we add context. We have our

[39:04] little settings from the whiteboard. Then, I am showing the relevant image of the button. We'll click here. I'm going to say when I click settings, take me to the settings page/ settings. So, you learned that already and make it look professional and like my sketch. But based on the features in my app, it'll read my repository. Add any additional features you think needed. We'll leave it a little open-ended because the thing with AI now is that it can really create really cool stuff. So, I'm going to just remove the guardrails and let it go off if it needs to go off. Go off. Go off Gemini. Go off, Claude. Go off. GBT5

[39:34] Codeex. That's what we're using right now. So, we got it. Our settings page is here. But one thing happened during this process which one really shocked me but is good for you to know. First off this thing went above and beyond. I mean you know with my simple request not only did we get multiple nice little components here we have the ability to upload branding. It is very specific to our platform which is AI image analysis on the thumbnail here turn on and off. And it took it one step further where export preferences. Let's say I know as a user I want to be a JPEG and I want it to be

[40:06] at 100% quality. It saves it and I go here, I export, it's there. JPEG 100% quality. We'll be able to connect this in a future episode to a real backend. So we're not just saving in local storage, but functionally this works. This is crazy, y'all. Now, real quickly in the process to create this GBT codeex just went absolutely bananas. It was quite literally coding for the last 10 minutes. It did get stuck. So all I did was simply create a new chat. And with that new chat, I switched it to a different model. So I did sonet 4.5 and

[40:36] just said proceed where the other model left off or something along the lines of you see all these files that changed. Keep going and fix the issue or just keep coding it out. that's important for you to know is that if you do really complex workflows and the AI bot seems to be taking a little longer than it should, you can always stop the chat right there, open up a new chat, select a different type of model, ask it simply, hey, continue the task. This is awesome, y'all. This is cool. What's next? So, with this done, let's do a push. So, I'm going to do commit and push this as setting pages created.

[41:08] Enter. And therefore, it'll show up as one of the commits here. Now, because of the fact that I plan on adding more features to my front end, I plan on really upping the homepage here, making the signup page look better, etc., etc., I'm not going to merge this front-end PR just yet. But don't worry, I'm going to do it on the next lesson here. I'm going to show you how to merge a pull request like this to your main branch. Therefore, you can attack the next step of your application. But that just about does it, y'all. That shows you fundamentally how easy it is to make frontends. I quite literally stole a signin and signup page. In addition, one simple prompt was able to create out an

[41:39] entire settings page. Let me know in the comments down below if there's any other specific front-end things that you're interested about, and I'll make sure to address it in the later episodes in the series. And last couple shout outs here. Make sure to follow me on next completely free description down below. And the next step in this series will be setting up that signup page. So then we can connect to Firebase. And then every episode from here on out should be very simple. Sign up, database, functions, storage. We're going to keep proceeding. Therefore, as you already know with these style of videos, I'll see you in the next. Has Google AI Studio been the last missing puzzle piece we've needed so we can create full stack apps that

[42:09] are absolutely amazing because Google AI Studio is really good at creating value. Therefore, all we need to do now is essentially just create a sign-in page and then integrate Stripe with it so we can start making money type of video. The missing puzzle piece is understanding GitHub. All right. All right. All right.