How To Build Your First App with AI - Lesson 2
Let AI Build Your First App (No Experience Needed)📅 2025-10-30
Transcript
[00:00] using Google AI Studio. We're going to vibe code the entire front end and the value of an application together. This is episode two where I'm showing you how to vibe code a real software from scratch. In the previous episode, I showed you the building blocks and I explained it as simple as possible. So, bye-bye tech stack. In today's episode though, let me show you how we use Google AI Studio to build out basically majority of the application. The other parts of this series, we're simply going to connect the dots with the Firebase, GCP, and all this cloud deployment stuff. But today's episode is the big one. This is essentially we're building
[00:31] out 80 to 70% of the application. Everything past this, the only reason you couldn't do it is because of the knowledge deficit. But I'mma quite literally show you how to do it. So that knowledge deficit is going to be gone. Bye-bye. Welcome back, y'all. Welcome to the big playlist. Very big playlist. Make sure to leave a like right off the bat. And if you're here early, are you early bird within the first 48 hours? Make sure to hit hype. Doesn't cost you anything. We need some hype in the chat. In this video, we're going to be checking out creating the app UI in AMP value. Therefore, the objective is very simple. vibe, but we're going to be creating the landing page signup value settings. Don't worry, each one of these has a little thing. So, we're going to check it out together. But the last
[01:01] thing we're going to be going over is limitations. As of now, within the Google AI studio, you should be aware of as a completely fresh new vibe coder. To get started here, though, let's just put in a prompt to build Thumbo. And if you don't know what Thio is, that's going to be the end product of this entire series, the software we're creating, which essentially is going to help any type of YouTuber, or I guess anyone that wants to create a thumbnail use Thumbo. The steps and processes I'm going to show you today's video though could be applied no matter the time you watch this video. So if you're watching this six months later, you're going to learn fundamental development skills paired with Vibe coding. Therefore, you could
[01:33] basically execute and create anything. Because as we know, the biggest gap right now in the content market is no one's showing you with a developer background how to actually do this. We're going to go ahead and create this prompt. Here's the prompt. And I know this is going to look very familiar if y'all watched my earlier episodes, but we're going to say, I want you to build an app which entire purpose is to be my thumbnail editor. Therefore, all image outputs will be 16 by9. Nice little horizontal thumbnail. It will be optimized for YouTube style thumbnails. Nice. And it will be a chat back and forth system. Eg. Remove the background. You remove the background. Okay. Now, put me in space, etc., etc. One
[02:03] fundamental thing for you to know when vibe coding in this way. Right now, Google AI Studio is extremely optimized and extremely ready to go for any Google APIs. So this is one of the first limitations you're going to notice within this initial phase here is if you want to do a third-party application. What I mean by thirdparty is essentially an application that is not made by Google. That logic can still be done but it's going to be done later in the series. What I want you to do right now though since we're vibe coding together is first off just know what your value is. What application you're trying to
[02:34] build maybe literally try to copy me here and just build the same thing and choose a specific API provided by Google. API I care about is going to be nano banana and we're going to be using Gemini as well for the chatbot. So hit build. The best part about doing a series like this is that it is quite literally like wine that the older it gets, the better it tastes. Because everything I show you here, if you're an early bird and you're watching this now, like in the last couple weeks, you know, you're early, right? So, the tech is still a little buggy, still a little issues, but maybe by the time you watch this, Gemini 3 already came out, Gemini 4 already came out. It's just going to
[03:04] make this process so much easier. But you still got to know the developer terms, which I'll show you. Let's go and let this build. So, while this builds, let me show you what we're going to achieve today. My objective is to build out every single page in the book of this application. So, we need to do the landing page. Don't over complicate it. What do I mean by landing page? I'm just delete that. I don't like the V anymore. Landing page is going to be where the individual arrives when they go to that live.com.io.org.net, whatever you're putting your domain as. When they go to that website, this is going to be the first page they see. That's why it's called a landing page. The individual is landing from the search engine. There's a ton of ways to
[03:35] go about this. As your application gets bigger, you'll probably have more pages in unoff. When I say unauthor, I mean a user that has not signed up or has not signed into your platform. This is a software I've created. It's called bumpups. This is the landing page. There is a ton of other pages that exist such as pricing, such as enterprise, such as startup. The reason we do multiple pages when a user is not signed in is for search. So that if an individual is looking for AI video analysis and is an enterprise client, we made the enterprise page for that. I can dive deeper here, but for now, all you need to understand is we're going to build out that simple landing page where we
[04:06] have a top fold. Why is it called topfold, Corbin? Essentially, that is the first piece of content the individual sees when they log into your page. It's the top of the browser. This is fundamentally extremely important that you create a really good topful for two reasons. The first one is that this is what Google is going to prioritize when it crawls your website for SEO traffic. What is the first text that this is going to see other than the navbar? Number one, AI video model. Nice. In addition, the second reason it's most important is that this is going to decrease bounce rates. When I
[04:37] say bounce rates, that means when an individual clicks on your website and they found it through search or maybe a chatbot, now maybe AI model that found it. They don't click off right away because they're like, "Wait, wait, this looks sus." If it looks good and it's solid, it's going to keep the individual longer on the website. Lower bounce rate. Bounce rate is fundamentally important as well as that is the way when the search engines crawl and provide and show you in search how much they value your website. Eg. I search up AI video model. How high is it indexed on the relevant search? Is it number three? Is it number five? Is it number six? When you're scrolling down,
[05:08] obviously the way we translate that in the future is whether or not the AI model that you're chatting with for search, if that's how you search, like perplexity AI, decides whether or not your link is a good link. A big indicator of that is the bounce rate. This has great correlation with YouTube as well, right? So, if someone clicks on a video and leaves in 10 seconds, that has a negative analytical damage on the video. So, it's like I don't want to push this to further people. Next is the meat or maybe tofu if you're a vegetarian. Meat is like the content. It's the main stuff in the page. This is other stuff like FAQ. And then finally, this is the footer. Any website has a
[05:39] footer. Typically, when you're not logged in though, because there's no reason to show a footer. Example, the footer is usually the stuff at the bottom, right? These are like the links that you see at the bottom, the toos, terms of service, privacy policy. Every website when you're not logged in will typically have a footer that you can use and reuse as a component. When I say component, just think of it essentially as like if you ever played with Legos and you have a Lego block that's a 4x4 block that you can reuse for other parts of the building. Essentially, this code here for the footer, we can reuse it for
[06:10] all these other pages. But you'll notice that we don't actually use a quote unquote footer. And the reason it's called a footer is because obviously because the foot is the bottom of the body. Uh the reason we don't use a footer in the loggedin version of the website is because it's not necessarily needed anymore. Within the footer, we're going to provide three major pages here. the toos, terms of service, the privacy policy, and cookies, not the kind you eat, y'all. Cookies are the things that track you. There's a lot of legality around cookies. I'm not a lawyer. So, if you want to get more specification on how to handle cookies depending on your region, do that as that has real
[06:40] implications. Like, if you're in the EU, they want you to have that cookie bar. They don't play. All right, let's go back to Google AI Studio here. And we have our first initial phase here. Nice. So, my objective within Google AI Studio though is to just build the value and build these pages. The way Google AI Studio likes to operate is it'll jump us straight into the quote unquote value you provide the end consumer. We're going to first tackle the value or the reason why the individual is even on your website or software or app. And this is where peak vibe coding comes into play. So let's see if it works. We did our first prompt here. I'm going to add my thumbnail. All right, we're going
[07:11] to just do a quick test here. We're going to do remove background. Enter. We're just seeing if it works. Okay, nice. It works. Now let's actually start building. So we're going to reset this. We got the initial phase done here where the user can ask a question, get a thumbnail output. So, we're going to do a first prompt here. Can we have it so that the thumbnail upload, I can drag an image file. Also have it so the chat is on the right even if there is no thumbnail and make it so I can input text till the thumbnail is uploaded. I know that's a little crazy. Input text. Yeah, till the thumbnail is uploaded. But that's the point. That's the first thing you can learn about vibe coding. You don't have to use perfect grammar.
[07:41] Some of it can sound like a little bit of gibberish, but the AI is so good now. is able to contextually understand, oh, he means that if there's no thumbnail, don't allow the user to chat with it. Right? So, we're gonna let that process, but because the fact that the first page we're tackling here isn't the landing page, it's the value page. Let me show you what that is real quick. So, I'm going remove this. Bye-bye. This is what we're going to objectively create right now. It's going to be a nav bar here. That's what we call in software, navigation bar. It's going to have the underlying logo. So, we don't have anything right now, so we'll just generate something. It's going to have a profile tab here, thumbnail uploader,
[08:13] chat, and then history. Fundamentally, the value of my product is for the individuals to provide a thumbnail and we can chat with it, edit it, and make it look really cool. We're also going to want to store this as history. So, we're going to want to have all this information put directly here. Now, if the individual hits profile, this is going to get into the settings tab and why a settings tab is important so we can do other stuff within the app. For now, let's build this first. Then, we'll do the landing page. Now, here's something important that I'm about to do right now, which you might want to save into your notes or in a sticky note. But, I'm going to essentially say in this chat right now, for everything that requires real data, use dummy data. Dummy data is what we call in software
[08:45] placeholders. What I mean by that is that when we get to for example the user's profile and it needs to show the email associated with that user. Don't even worry about putting in the real users information. Just worry about putting dummy data. dummy@gmail.com. We just need to show visually in the UI right now where the data is supposed to go. The method I'm going to show you though is that by the time we are ready to push this to the next level, all this is going to be plug-andplay. All of this going to be dynamic. It's going to make it extremely easy to get this to production. When I say production, a live application that anyone could use
[09:15] on the internet. The best part about coding like this as well is that we can test as we go. And the UI is right here. So in real development, or I guess this is real development, it's the vibe code. But what's really happening here is in the cloud, they did something called localhost 3000, which you'll learn about later in the series. Right now, all you need to care about is just test and see if your application works. I'm going to upload a thumbnail. Cool. It was able to upload it. Nice. All right. With this saved, I'm actually going to update the name as well. Let's put the domain thumbo.com as this is where the software is going to go. That's all good. One other thing just as notes as you're building out the front end, if come over
[09:46] to devices, you can see what it looks like on mobile. You can see what it looks like on tablet. What's extremely awesome is I mean it's gotten so good to the point where it's actually optimizing for these different screen displays. Early front end development was very frustrating when it came to this. And when I say early, I mean basically what like a year ago where AI wasn't this good yet. So with this done, I'm going to start a new chat. To do that, I'm going to say reset conversation. What I want to do is that little dummy thing I was talking about. So, I'm going to go ahead and say for all the changes from here on out, if data is needed, just use dummy placeholders, etc. Ready? That line right there when you start a new
[10:16] chat, you're going to want to use that as what you'll notice later in this series is when we plug in real data, we're going to be doing that within cursor AI. So, I went ahead and did that as well. So, we get these little suggestions because a lot of these are actually pretty good. So, for example, improve, undo, and redo. We're going to want that. Enter. So your vibe coding what this phase is, what this episode represents to you is honestly use a ton of those suggestions. Build build suggestion build build suggestion build build suggestion build build suggestion
[10:47] build. That is this episode and this phase. Make sure you stay tuned though because I'm going to show you specific libraries you're going to want to install. What's the library Corbin? This is going to give us the ability to get maybe better icons here. Uh, also I'm going to upgrade this UI as this seems like a standardized UI that Google preset within their model. When I say standardized UI, I mean it seems like Google has opted to make this like bluish dark UI, but I don't want the bluish dark UI. It went ahead and finished that. So, what I want to do here is test it. Upload. I'll just say add a party hat. Now, to be honest with
[11:18] you'all, these outputs, like the image editing, might not be perfect right now, but I'm not worried about that cuz what I'm functionally trying to understand is does the undo and redo actually work? That's what's important to me right now. We got a party hat. I don't like it, though. Undo. All right. So, if I undo it and I say add a cowboy hat. Does that work? And if it does, then it successfully did that feature. I just realized y'all are going to get very used to this thumbnail. I'll get some other test data later on. All right. You're going have to look at me pointing to Sora. If you want to follow me at Sors at Corbin Brown. Nice. Both worked perfectly. Undo. If I want to redo, I go back. Boom. Boom. Boom. Boom. All right.
[11:50] Here we go. So, let's scroll over here. Next, which is very important, is save and export functionality. Let's add that. Enter. Build. Build. Build. # build test again. Upload. Add a party hat. Nice. And let's download. And here we go. Nice little file above me. And then we got our party hat. Corbin. Party hat Corbin. Actually, put the strings. Oh my god. W Nano Banana. And here's what's cool about vibe coding and noticing things as you build. I don't like how this is named. What this? Thumbnail editor dash a huge string. This is no good to me. So, let's set up logic. So, when we export a file, we
[12:20] rename it. Move the trash. And real quickly, let me go and save as we know that's important. So, go to save here. You don't want to lose progress. Let's go and do that. When I export a file, have it so the file name is the user's name- thumbnail. For now, use dummy data for the username. Add that we will change later. Dummy data will be Corbin. So, what I expect here is going to be when I download this file, it'll be Corbin- thumbnail. Obviously, in the future, we can rename this. Actually, one thing I got to show y'all real quick. Let me cancel this generation. It's actually pretty important that I add this. So we do dash Corbin, but we
[12:52] need to do this users name dash thumbnail dash random number. So you might be like Corbin, why are you adding that random number? That is because of the fact that at scale if a lot of people were to use this platform and you were making a ton of thumbnails on the platform, it would get very frustrating if you downloaded a thumbnail and then it said, "Hey, this image is already named this. Do you want to replace it?" So we're going to add a random string there or a random number there so that that ensures that you can download a ton. Uh, let's see if it works though. Seems like it is done. Same situation
[13:22] where it adds something. Add cool glasses. We got cool glasses. So, now hit download. And there we go. Look how it's named. It's Corbin- thumbnail-966. Now, what we'll do when we create this and connect this to a backend is we can actually cross reference this last number here. Or in theory, once we have a backend that we can reference data with, this could be an increment. So, what this could mean is that the first time a user downloads a thumbnail on your platform, it's one. The 30th time a user downloads a thumbnail on your platform is 30. There's other ways to approach this, but we have our nice
[13:52] little thumbnail. All right, everything's looking good so far. Let's see what else they got. All right, so the suggestions I don't like. So the next suggestion I want to do is add a history mechanism. So what I'm going to say is add a history below to allow the user to see past thumbnails. Rename them and we will call this section projects. As I stated before, I know the grammar is not perfect, but that's the point with vibe coding. You don't have to give it a perfect sentence. Don't worry, you're not getting graded here. also relevant time stamp of when created basically the date and then for now store it in local storage what this means this is really nice for you to know is if I want to store this in the
[14:24] cloud using Firebase that's going to be like online it will cost me money payer use I want to store this in the individual's actual browser on their actual computer that's what local storage is it stores it on the browser itself therefore the backend doesn't incur any cost there's benefits to this there's reasons to use this but for now all you need to know is that in this development phase use that termin technology. So, you get a built out functional app in this first phase. I'm going to hit enter. So, I went ahead and finished it. And honestly, I kind of like it set up here because there was a bunch of dead space here anyways on our website. Why not just put it to the
[14:55] left? Originally, my intention was to have it at the bottom, but you know, dubs to Google here. It went actually with a pretty good U. Okay, we'll actually adjust it for mobile. And this is a good thing that you just saw that right now as we're going to have to make sure by the end of this that this looks good on every single type of platform or device. I mean, for now though, let's see if it works. So, I'm going to simply drag my image here. Okay, we got project one here. Uh, add funny hat and let's see if I can rename this um apples. I like apples. All right, apples. Nice.
[15:26] Actually, change it up here as well. Okay, funny hat. The gesture. Nice. And then once that's done, all right, we need two things here. First thing we need is the ability to create a new project. The second thing I'm going to do is actually I am going to opt for this left projects tab to be under the thumbnail and the chat. And let me explain why. If I come over to a website like cursor.com, what you'll notice is that the width or what we like to call the viewport, which is the entire browser, seems to be shrinkedked in. The width is only this much, but there's all this dead space here and all this dead
[15:58] space here. And what they're doing here is pretty smart. The reason they're doing this is because of the fact that everyone has a different size screen. So, when I zoom this in a little bit, y'all, what you'll notice is that it fits pretty well. Goes in and then it will switch to mobile here, which is nice. And the way we go about this in order to achieve the same type of effect in our UI is we're going to set a max width of a 12,000 px or pixels. Think of it like creating a room in your home. You want to set up barriers here so that even on larger screens here, we don't
[16:30] care about this dead space because the user experience, all we care about is what's in the middle. Therefore, fundamentally, that's why when you saw it on mobile, it looked like trash. On here, it seems okay, but in reality, for scalability across different size screens, this is actually a bad UI. So, watch this. Okay, two things. Have it. So, I can create a new project. Also, I want the project component under the thumbnail, uploader, and chat. Project component is this. What is a component? Think of a component like a piece of the puzzle. The my projects is a piece of the puzzle. This entire thumbnail
[17:00] uploader is a piece of the puzzle. And this chat is a piece of the puzzle. And what this means in code is if you come over here, typically you will refractor or just have each one be its own specific file, but we're going to stay away from the code cuz we're vi coding, so we don't have to care about that. But knowing this, we're going to say therefore setting a max width for the viewport to 12,000px. Use terms like viewport if you want to identify the browser. In addition, we're going to also reference the mobile and tablet UI. Hit enter. When dealing with mobile and tablet UI, there is two different ways to approach it. The first way is setting
[17:31] it up so that in code there's a thing called columns and rows. And sometimes with the UI it's a very simple like oh just make it a column rather than a row. For example, this right here it'd be like the chat is a column. It's under the thumbnail uploader. Alternatively, what other softwares will do is that you'll have like one file that is all the code for the desktop and you'll have another file that is completely dedicated to a mobile view. This can be excessive and not necessarily needed when developing in this, but in theory could be needed depending on your use case. So now I've gone to a pretty good
[18:02] checkpoint here. I'm going to make sure I save the app here. When I go on those tangents like that, a lot of that you don't necessarily need to understand. I'm only bring it up to give you a deeper understanding of what code is. In reality, just vibe it. Just put it over there like this doesn't look good. AI Studio, step up your game. Make this look better. That's all you got to do. So it looks like we ran into an error here. And if you remember from my other video, all you need to do is do rightclick, inspect. And this is a very specific thing to Google Chrome. You want to find out how to do it on your browser, just ask the chatbot. Come over here to console right here, console. And then all you need to do is simply copy
[18:32] all of this. You don't have to understand any of it. Just copy it. You can exit back out and then paste it in the chat. That is going to be your way to troubleshoot, at least in this environment. I'll show you how to troubleshoot in later episodes in the cursor environment. And there we go. With me simply pasting from the console to here, we fixed the error. Now, we got pretty far here. So, I'm going to make sure I save this. I'm going to upload another thumbnail here and see if it works. So, let's upload a thumbnail. There we go. Automatically created the project. Nice. Add cowboy hat. And then we'll let this generate. First off, let's not get too crazy here. I'm not going to hit new project yet. Let's just
[19:02] see if the actual value works, right? We want to keep making sure that something doesn't get broken before we jump to the next step. As one drawback of the Google AI studio right now, they might have fixed this by the time you get to it, is version control is a little bit hit or miss here. You can't really use something like GitHub. I know there's that integration up here. Right now it doesn't work, but by the time you use it, maybe it works. It doesn't matter. In this series, I'm going to show you bulletproof way of even handling all this. All right, this works. It opened my mouth for some reason. Like I'm hollering. Let's see if we do new project here. All right. Okay. So, new
[19:34] project doesn't work. Or maybe it does. And the user experience isn't what I'm necessarily looking for. So, let me tell it that. Another thing I'm going to tell it though as well is that where the project thumbnail have the most recent image of the project be the most recent thing we did essentially. And here is my next prompt. Here are the updates. One, project thumbnail must be the most recent image in the chat. So, it'll be update to the last spot changes. Basically, what I'm saying here is this image right here. This is the last thing we did. Have that be the project one thumbnail. So, for context, when you're working on one and maybe you're working on it for 20 minutes, you'll be able to
[20:05] identify, oh, this is the project that I was working on. Second, number two, also when I click new project, make it so the upload part shows again and the chat refreshes. What you need to learn here as a vibe coder is that yes, you can do listlike formats for the AI to understand. This is good. In addition, obviously, you don't have to do perfect grammar like I always just keep harping on. Don't worry about that. Hit enter. So, here we go. It supposedly works. Let's try it. Right now, new project does nothing cuz it seems like it creates it on initiation. So, upload. There we go. We'll add something. Perfect. The first request worked correct. So, we got the black hat here
[20:35] now. And it's a black hat down here. So, we can identify easily. Now, does new project work? New project does not work. It causes it so the original thumbnail still stays there. So, we're going to identify that. And instead of me doing it in a text way, let's use the annotation draw feature here. Annotate app. There's a couple things I'm going to point out here. So, we choose our color. I like I like this color. This color looks beautiful. I'm going say remove this. I don't like this. Remove this black bars. And then for the thumbnail image, give round corners cuz
[21:06] right now it's like a square. I don't want that. So, do that. And I can kind of like use this little tool point right here. And then right here behind me when I say this, drag a little thumbnail right there. Say this does not remove thumbnail when I click to create a new project. Boom. So what I'm going to do right off the bat here is we'll add this to the chat. Add to chat. In theory, I could maybe describe the new project issue a little bit more, but let's see if Gemini is smart enough to understand. So I'm hit enter here. It has completed.
[21:36] Let's see if it works. I'm going to add my thumbnail. So the first issue here is that it doesn't maintain a 16 by9 dimension. But first we're going to just say add hat. We're going to just let it produce an image real quick. So then we can test if the new project feature works. What you're witnessing here though is the push and pull of vibe coding where you're going to run into errors, clarify, and also just ask for new features. What's really cool with Google AI Studio is they're leaning heavily into this. That's why this first episode here, we're going to basically be able to build out 80% of this app. All right, so add hat. It wants to do this black hat again. And so when I did
[22:07] that, new project not working again. Let me inspect here. Let's see what's going on, y'all. And that is why, y'all. So, what you'll notice is that even when I told Google, hey, there's an issue of new project, and I tried again and it gave me an error, it couldn't solve it. And that's because of the fact that an error was incurring that it doesn't even know is incurring. So, I'm going to copy this because this is obviously a clear issue. And let's do two things before we tell it to fix this and make it a 16x9 dimension. So it isn't like a zoom in of the thumbnail. Let's first just have it
[22:37] focus on the air we just saw. So I'm going to say solve this air for when I click new project. Paste the entire thing. Best part about vibe coding is quite literally you don't have to understand any of that. Literally just copy and paste and let the AI handle it. So I went ahead and finished. I went ahead and started a new chat here. Sometimes what I like to do y'all is start a new chat. If you're familiar programming with AI, it can go down rabbit holes and give bad code if you go too far down a rabbit hole. The alternative can happen as well where when you go really far into a chat, it could actually give really good code because a ton of context. But for now though, let's test that little bug. So, upload a thumbnail. All right, that's
[23:08] cool. For now, because we know this functionally works, we're just say new project. We're noticing a little bit of a click here. Watch this. New project. Add another thumbnail. All right, new project. And it seems to work every single time. Now, my assumption here is the reason we saw that issue when it did it the first time is due to the fact of local storage persisting. What I mean by that is that it was reading data found in the browser and it wasn't successfully clearing that data to be pushed here. Long story short, it works functionally good enough for me right now for me to keep adding iterations. But we'll come back to that and deal with that little bug twitch there that I
[23:38] don't like. Now, one thing I'm noticing here, let me try again. Okay, cool. It is creating enough projects here. Let me see functionally what happens if we add enough to go here. Perfect. It worked. So, this is the kind of stress testing we do with front-end development. In theory, if we had more than five thumbnails in a row, then what happens? It was able to snap into the next row here. So, it all looks pretty good here. We're getting pretty far here, y'all. I kind of like this. So, let's solve the next situation here where this right here isn't the 16x9 dimension. Now, to do that, we're just going to use the annotation app again. We'll go like this. Add the text box. Make image
[24:10] dimension 16x9. Enter. And then right here, say remove text 16x9. This is just hard text put in for the original creation of this app. We don't need that. All I really want to be put right here is just the project's name, which right now is project six as we see right here. So, I'm say add to chat and we're going to hit enter here. Now, yes, I didn't do that first prompt of like, hey, just use dummy data XYZ XYZ because I don't think right now we're going to be diving too deep into that. But, if I need to, I'll add it later in this chat. And there we go. Now, it is 16 by9.
[24:40] Nice. Now, let's go and check out some more suggestions here. Maybe a text overlay, a template library, refine, undo, redo. I'm curious what it means by this. Enhance the undo and redo functionality to provide visual feedback or a history change log. That sounds good to me. Enter. We're building. So, next feature here, better undo and redo. So, I'm going to go ahead and upload a thumbnail. Nice data. Original image. Wow, y'all. This is just extremely impressive stuff, y'all. Uh, make me wear a red shirt. I'm going to hit enter here, and we should be able to have a better idea between undo and redo here.
[25:10] That looks cool. Uh, let's say we want to undo it, though. Oh, wow, y'all. This is just extremely impressive stuff, y'all. So, we got the initial version. It actually gives the underlying prompt as well. So, let's do one more. Making the phone. Say like and subscribe. Have you not liked yet? You got to like this video. It's free. Also, let me know in the comments what y'all are building after you watch this entire series. Actually, don't reveal too much, but like a one sentence summary. Give me your elevator pitch. We're going to call it the elevator sentence of your app. Like and subscribe. Look at this. Undo.
[25:41] Redo. Really nice system. This is very intuitive. New. We're starting into this issue. So, when I do new project, it takes two clicks. Notice that it took me two clicks to solve that. So, let's tell Gemini that. First, I'm going to say when I click new project, it works on the second click, but the first click, the thumbnail stays. We got to play demo with AI. And maybe we could strengthen our case by doing inspect again console. And I could just be like, you know what? I just see this air. I don't know what this means. So, I could just be like, I see this air. Not sure if correlated. to
[26:12] kind of be like it's like one of those things where like your friend tells you advice, they give you advice for like 20 minutes and they're like this is just my opinion. Like I don't know if you should do it, but it's you know we're just telling the AI like there's an error. I'm not sure if it's correlated. So with that done, we can test it and new project. Looks like it works. You fundamentally understand the plug-and-play of this app creation. So now let me show you the last puzzle piece here. And the last puzzle piece here is just mega prompts. What a mega prompt is is you're just going to lay out everything. Okay, here's what we want to do next. Make a dark theme UI
[26:43] dark like Apple product UI for the top bar. Left logo and brand is Thumbio. Add a profile image to the right. And for now, simple drop down to settings. Boom, boom, boom, boom. Give it a big payload and let it just start updating everything. So, what I'm going to do here is once it does this big change here, we're going to work on the other pages. There is more functionality I'm going to add here, but it's going to be that same process of me looking at Google suggestions of like, hey, this is a good suggestion. You should add this. I'mma add it. And then if I run into errors, that console log method. For now
[27:14] though, let's do this big change here. And then the next objective will simply be the sign up and login UI. How do we do this? And then the settings UI. First thing we're going to tackle is going to be the landing page after we're done with this value page. And here we go. With that big prompt here, we have the ability to upload in a dark theme UI. So upload here. There we go. The profile icon was made with settings. This is good. It went ahead and shrink this down to thumbo. It assumed it was aio. It's not aio. So I'll clarify that and then we have our projects with dark theme UI here. Let's do the next thing that you need to understand on how to vibe code
[27:45] which is going to be multi- page. Before we do that though really ensure you save here. Now if you want to be extra safe for this next part here I would tell you to download the code. This is going to be some weird like version control that right now because Google AI studio is not good with version control like app v1 app v2 that situation. You can download the code and I'm going to do that. I'm just doing it just in case. From here though, because we're vibe coding, let's just do this, right? I'm going to screenshot this. I'm going to drag it into here. I'm gonna simply say this. Okay, this is our landing page design. Can you create it? And for now,
[28:16] just have a button that takes us to the thumbnail editor at slash studio. What do I mean by slash? What a slash is that if I go to a page on a website, you'll see it up here, slash enterprise. So, what I want to happen is going to be slash studio when it comes here. And the landing page will just be slash. What that means is that it's going to be with nothing after it slashno the homepage. So you could put slhome if you want with that screenshot that we got from the whiteboard here which is very viby top fold content footer. I can simply go like enter. I just learned something new about this studio that's going to be
[28:46] very fundamental for you to understand. Creating additional pages is actually very high risk because you could essentially lose all the code you worked on. So let me show you how to approach this correctly. Right now I got the landing page. If I attempt to go to the editor, it runs into errors. Essentially, this environment that we see with Google AI Studio, it wasn't built out to get to the point of having multiple front-end pages. I'm not worried about this. I'm going to show you how to build these out using Cursor AI, but I need you to understand this. Your objective then with this episode is just build out your value. So, first
[29:17] thing, let me do is I'm going to essentially tell it to revert its changes to take me back to the thumbnail editor. So, for some reason, if you found yourself like, "Oh no, I messed up." If you didn't save your changes, you can simply just go down here and be like, "Hey, revert changes." Let me see if I reload if it'll go back because I didn't save these changes. I never clicked that little save button. This is why I told you to download that code. Now, it did lock it in. This is no good. As you'll notice, when I go to a different page, it's unable to connect. It's just because of the environment we're in. So, this is not you, this is not a U issue. This is the limitations of this currently. What Google AI Studio is amazing at for vibe coding is the
[29:48] value you provide your end consumer. eg this right here, app value, which end of the day is important because that's how you get paid or get traffic or people even give a crap. So, let me revert this code. I'm gonna say remove landing page and just go back to thumbnail editor. If this doesn't work, I'm not worried. I downloaded the code for this specific reason, but let me just see if it's smart enough to navigate back and it was. But I show errors like this, y'all. So, you understand that if you're coming at this with like no development experience and you're completely vibe coding, you might think you're the issue, but in reality, it's probably the platform. This is a very common thing in
[30:19] tech. So you have someone like me to tell you and don't worry like it's not a you issue, it's a this is a Google cloud issue and Google AI Studio issue which will then bring us back here which actually makes for a really good transition to the limitations part of this video. Let me delete this. Your first major limitation that I've noticed using Google AI Studio. Now to be completely transparent yo by the time you watch this maybe 6 months a year 2 years from now they might have improved the platform or xyz xyz but the idea is fundamentally understand these are the ground rules when working and prototyping and creating your
[30:50] application within Google AI studio. Number one env. And what does that mean? Basically anytime you want to connect to any API like open AI's API Google's API the secret variable this cannot handle it. It just breaks. It doesn't want to show you anything. If we go to the code, go to Gemini service, this right here, it doesn't want to show you it. Don't worry, I'm going to show you how to get access to that and set it up correctly when we do the series later on here. EMV, no good. Other APIs, no good. You try to integrate Mailchimp here, it's going to freak out. No good. Version
[31:21] control, obviously, no good. As we just saw here with no GitHub, that will probably be solved very quickly. So, keep in mind, GitHub integration, I mean, they quite literally have it here. This will probably be solved pretty fast, but keep it in mind right now, it's broken, etc., etc., etc. I guess another example of something that was broken was the ability to do multiple pages. But to be real with you, the homepage, this page, the sign up and login page, and the settings page, I can do so fast in cursor AI when I show you that it's not even an issue. The real issue when it comes to software is our ability to create value. That is usually
[31:52] where you hit a wall because value has more intricacies when it comes to back-end logic, which is more difficult. Front-end coding, now AI can do everything. Oh, it can't do then. You just don't know how to prompt it. Just trust me yo, it can do everything. So the idea now is backend coding. That's where it gets a little bit more difficult. And that's why the rest of this series is very much like Corbin, how do we take this app, this value right here? How do we take this and add the fundamental brick laying things that we need in any app? And that's what I'm going to show you. So here is what I'm
[32:22] going to do and here's what I will tell you to do for this part of the series. Spend as much time in this phase as possible when it comes to creating value. What I'm going to do in my own time is I'm going to quite literally just upgrade the living heck out of this. I'm going to just keep doing improvements. I'm just going to make this the best value that ever existed when it comes to being a thumbnail editor. Whatever your use case is, do the same. Because what we want to do is we want to get this so good that by the time we do the other parts of this series, which will be signing users up,
[32:52] adding the database, adding the functions, by the time we even get to this, it's basically like, "Hey, here's a cake. Can we just add icing now? And that's what we want. Therefore, that concludes today's episode. All I want you to focus on after watching this video is create the value of your product, what people are going to pay for. What's important for you to understand that longterm for this product, Google AI Studio, it may give the ability for more functionality like creating these other pages easily. But don't worry, in this series, I'm going to show you how to do it anyways. And to be honest with y'all, I'm probably going to show you how to do it the better way
[33:24] because you're going to really own your code. like this code is yours rather than being kind of stuck in this little box of an environment. Make sure to be following me here on X description down below. Bunch of new updates, bunch of cool stuff. I love it. Also, check out the school community in the description down below. Completely free to join. Think of like a Reddit style form. A lot of people have been requesting a Discord. If I see enough demand, I might do a Discord, but it really just comes down to like y'all are just spamming the heck like Corbin, we need a Discord. Okay, I got it. I'll create it if there's enough demand. Also, make sure to follow me on GitHub as it's free
[33:54] source code. free source code every single week. So, that just about does it in today's video. That is the vibe coding of the value of your product. These next couple episodes in this series is going to show you how to connect all the dots so you can launch a live website or software or whatever you want to call it. But, as you want to know with these style of videos, make sure to leave a like. I'll see you in the next. Did Google AI Studio get so good that basically you don't even know how to code anymore? So, all you have to do essentially is just vibe code for the value of your product and then everything else I'm just going to show you how to do. Therefore, anyone in the entire world could launch a software product knowing zero lines of code type of video. Build build.