How To Build Your First App with AI - Lesson 4 β
Let AI Build Your First App (No Experience Needed)π
2025-11-08
Transcript β
[00:00] How do I take the app that I completely just viodated in Google AI Studio and not exaggerating y'all in one day was able to build out the entire landing page, choosing your elite, classic elite, cowboy elite, neon elite, setting up monetization with how much it costs to use the platform for thumbnails, effectively setting up price tiers, setting up the login and signup, building out the entire front end for the value of the product, such as uploading this thumbnail and being like, put me in COD in the background, Call of Duty. We got Leit working on the image. Boom. Call of Duty burger battle. Furthermore, I went ahead and created the settings page. This is no joke,
[00:30] y'all. Account, elite, lab, billing, usage, capabilities, connectors, privacy. It's not done yet. There's more. This is like Oprah Winfrey right now. There's more. Upgrade plan. I built this entire thing in one day. Let me show you how. The video you're about to watch right now, I don't know how long it's going to be, but it's going to be one of the most in-depth valuefilled video when it comes to frontended development you will ever watch in your entire life. And I am this confident saying this because I can see how much push back I'm getting in on this series where it's like, "Oh yeah, totally vibe coding." Trust me y'all. I'm going to go
[01:00] over three major things in this video that's going to give you a clear idea that you are quite literally one of the earliest of the earliest movers in this new age of coding. The three main things will be context of how long what I just showed you would have originally taken. Second thing, how to approach front-end development in this new age. And third thing, all the lessons and methods I use to get code outputs like that. Completely vibing with it. So, if that all sounds good, make sure to leave a like. Make sure to give hype right off the bat if you're within the first 48 hours. Let's jump in. Welcome back, y'all, to episode 4 of this series. I had the original intention of moving on
[01:33] to signup page next, but I'll be honest with y'all. When I was coding out this front end and I was building this with cursor AI, I just genuinely came to the realization this is leap years ahead of what I originally thought this series was going to be like. I knew with Google AI Studio, we would be able to vibe code the value, which was a breakthrough. The value of an application is how you get paid or give a reason for someone to go to your website. This was cool. This is why I started the series. Somehow, whether it was Fates or the lines got crossed, but Cursor 2.0 0 came out
[02:06] literally during the creation of this series and I found myself using cursor 2.0 and these new methods and you just saw from the beginning. I didn't even show you everything I created in a day, y'all. This is no joke. There's no way this guy created it in a day. Uh yeah, pull request. Go to the front-end branch we created. You can quite literally see if I jump down here, I had 15 commits. All of these commits were yesterday. I don't know the exact amount of time I worked on this. Did it take hours? Of course it did. I think to get to this stage, it maybe took me eight hours of just focus, deep work, maybe even 10 or
[02:38] 12. I'm not too sure on the specifics. When I work, I just work. I don't get off until like 9 or 10 p.m. Therefore, the first thing I want to go over in this pretty big video, y'all, you guys are getting secret sauce right now. Essentially, what I'm giving you all is the opportunity to buy a,000 option contracts in a pre-IPO stock company that you know is going to hit $10 a price and the option contracts a dollar. Therefore, every dollar above that for a th000 you're making a h 100red grand. Look that up on AI if you don't know what I'm talking about. We are just super early. So therefore, let me give you context of how long that would have
[03:10] originally taken me to build out all these pages and have all these mechanics. Here's the context, y'all. I ran another software company and this software company was bumpups.com AI video model. I coded this out with a partner of mine and we did it the oldfashioned way where you had to write out the code, get a little help with AI and proceed. Am I glad I did it this way? Of course I am because that gave me the ground level to be able to teach this kind of stuff in a very dumbed down way so y'all can really grasp what's occurring here. This is me. I got fire in my hand. These are five engineers I
[03:41] worked with. We ran an internship program where quarterly we would onboard different people where quarterly we would put out job posts on LinkedIn saying, "Hey, we need front-end engineers that are interested for an unpaid internship. We need back-end engineers that are interested in unpaid internship." Side note on that, we got thousands of applicants. It's kind of crazy, but the point being is by the time we created the whole vetting process, gone through the entire interviewing process, and was able to lock in contracts with these individuals, this was a skill that I gained. What was the skill, Corbin? The
[04:12] ability to associate labor for an app to individuals. EG or IE. I I see y'all comments. Okay. I.e. EG. I'm just going to keep saying Eg to piss you off. [laughter] Just chill out. Okay. Point being though, I would give labor to this person. So, E. So, for example, we go to the settings page. Let me show you the settings page here. This setting page. So, login, continue. Don't worry, I'm going to show you all the methods I got to this point. So, the the idea be like, hey, we need to revamp the settings page. I need you to code out a new settings page to make it look like this. This may have taken either two engineers
[04:44] and even if it was one engineer, maybe could be done in two weeks if we were lucky. In reality, that would translate to a month of work. Granted, yes, these interns were unpaid. Therefore, this was much more of an experience learning situation rather than like, hey, I'm giving you a W2, you're getting paid. Get the work done fast. But what I can tell you in software development, we do something specifically called sprints. What a sprint is is that we would identify a task for example build out this setting page UI make it look better. So settings UI this is this would be a task and a sprint in software
[05:15] is two weeks of work. So what happens here is that as an engineer in a team and you'd use a management software like Jira uh Jira allowed you to tabularize these kind of task. So the task is setting UI. You'd give it to an engineer. Hey engineer, and they would have two weeks to tackle it. And then the typical workflow is this engineer, I should have made them, I guess we're all cowboys, wild west. Uh this engineer would communicate with me if they ran into issues, needed education, or essentially a fundamentally needed to know how to do a certain thing within
[05:46] the code. Having interns was a great experience as part of the value you get out of interns is like you learn from each other. It's really cool working with other people and exploring their creative mind. I love that. But what I can tell you is for me to request that exact same settings page that I did here using that method, it would have been 2 to 3 weeks of downtime. And I created this in like 30 minutes using this method. I don't want to harp on this topic too much when it comes to the original time and the new time. Now, let me leave you with two last things on this topic. The first thing is that a
[06:16] lot of y'all are asking yourself right now, Corbin, if this is true, what is the real skill now when it comes to coding? The real skill is being this person right here, the person that knows what the next task needs to be. Let me just send it home with y'all what I mean by that with this expost I created yesterday. I went ahead and said something along the lines of that we're in a new era of coding because genuinely we are. And if anyone tells you different, what's happening right now is a lot of developers have ego associated with being a developer where it's this weird kind of gatekeeping thing where it's like no one everyone can't code
[06:49] because if everyone can code I'm not special. That's what's incurring right now. But it's fine cuz at least you can access this information a lot earlier before mainstream people realize that hey wait anyone actually can code. I do this though. Look at this response I got on one of my other exposts. Can you give an overview of what task you gave it? That would help a lot. Boom. That's it. That's the missing puzzle piece. Understanding how to basically be a senior engineer and knowing what to task the app to do next. That's all. And the
[07:19] old way to learn this kind of skill set would be that you've developed for years. So you just really understand from a full stack perspective what is next. Or alternatively, you were in a position where you ran a team of five engineers, three engineers, 10 engineers, and you know how to distribute labor. You have my experience. So, I'm going to tell you how to approach creating the front end in an objectively smart way so that when you do start tackling the back end later in this series, you are going to be flying. Because what I can tell you with absolute confidence, you are going to want to spend as much time in the
[07:50] front-end phase to build out your entire application as early as possible because of the fact of what that leads to next, which is legacy users. What does that mean, Corbin? What that means? Actually, I know a good way to show this. So, let me come to my app here, Thumbo Studio. Um, also as a side note, some of y'all that are watching up to this point like, "Okay, this guy's just yapping." I I know I'm yapping, but I need to give this information for you to really understand what you found yourself on. Don't worry. In the lessons and methods, I'm going to show you all the prompts I used in vibe coding. I'm going to show you all the methods. I'm going to show you everything. You just need to understand from a foundational level
[08:21] what's incurring here so that you are just going to be golden. The advice I'm about to give right now, I would have not have given to someone a year or two years ago, but now I'm inclined to. The advice is this. You want to build out your app where the baseline of your software architecture can handle growth and you're not shooting yourself in the foot when it comes to legacy users. Now, let me give you a very specific example of that cuz I know that sounds like a bunch of developer jargon and you're like, "This guy is just sounding very ambiguous." Right? Now, when I originally was going to create thumbnail, if I scroll down here to choose your llama speed, right? You got
[08:52] three different tiers. And I can do a whole another video on this monetization. Actually, there will be a whole another video of Corbin, how did you find yourself at the price of $192 and $24 of Workspace, which may change when I do some more math, but I'll do a whole another video on that. Don't worry, it's later in the series when I I will dive deep in the weeds with you so you know how to price your product. That's not the point of this video. Point of this video is legacy users and what that even means when building out our front end. Originally, I was building out this application to be one individual, could either be free, studio, or agency. As I kept building, I realized, well, if I ever wanted to
[09:25] expand this where an agency on Fiverr, Upwork is like, yo, this platform is beautiful, but I need like five seats for all the different editors in my team and my business, like full-blown businesses using this software. I realized, oh, I need to build this to handle a thing called workspaces or the ability to handle team plans. To make this a little bit more clear, if I was building out this software architecture just to handle one individual on free studio and agency. So I log in, continue with Google, I'm here, but I don't have
[09:56] the UI of workspaces up here, the ability to create different workspaces, manage workspaces, create a workspace, add a new seat, have it so that creator lab is three different editors I work with and they all have a shared access to the data of all the different thumbnails. If I didn't approach the beginning of my front-end development with this logic and I did it with just an individual, eg there was no workspace feature. There was no ability to add seats. It was just me jumping over to Thumbio and I'm just creating a thumbnail. For me to add this additional workspace feature if it was just an
[10:27] individual at first, that individual who was a legacy user, it would be extremely painful for me to migrate them to handle the new type of data structure to handle workspaces. So, if I originally went with version one, building this out without the idea of what a legacy user is, what that means, where one individual would choose between the three different plans, plan A, plan B, plan C. And just because it's basically around Halloween, ABC, BC, C, it's orange. It's orange. What I'm about to say right now, if you're coming from no
[10:57] development experience, is going to sound very confusing, just stick along with me. I need to explain this to you. So, if by the end of my explanation here, you're still confused, then what I want you to do is like your TLDDR is like, would you need something like seating for your price subscription model? Would you need these extra layers? What I'm trying to say here is MVP1, the advice I would have given someone a year or two years ago is bare bones it. Just get a product out, just show value, push. No, no, no, no, no. With this new way of coding, I want you to build out your full product because
[11:28] of how fast you can do it. Now I built out that whole front end in a day y'all. Therefore the original path would have been this. This is how we store data. Okay. So we have a global doc uh top level. It would have been UID a unique identifier. So what you need to understand what a UID is is just a random just a bunch of random text. And how we associate with our user here. So they sign up with Google. I love Google. They sign up with Google. Not only do we have a UID created when they sign up but also their email. So another way of looking at a UID is an email because no
[12:01] two people can have the same email. Therefore, we know that we can store data down this path because we know this individual is this individual because of the email and UID. Point being though, unique identifier means that if you have 50,000 users in your platform, all 50,000 are going to have its own custom random string automatically created. You don't have to worry about that code. It'll be automatically created. UID and then you know we would just create the relevant docs here that's fine it's amazing beautiful the docs when I say docs that's just another another way of me saying like a data point that stores
[12:32] something okay point being if I went my original route where's a single user single user on studio I would have been cooked the reason why is I want you to notice something look at this URL workspaces WSC client drops studio what you'll come to realize is that each workspace is going to have its own specific data point associated iated within the docs which means if I went with the original path here of just slash studio which was exhibits numer it
[13:04] would have been an absolute headache because now what might incur here is that I don't have to transport this legacy user to the new data path here which would be data path 2. Now I'm just spitballing here. I don't know the specifics on the data path yet. We're going to have to work on that together and I'll explain why I do what I do. We still have the global doc of user UID so we know who Tim is over here. Hey, what's up Tim? You like Kathy Tim and UID, but this path is going to be entirely different. Entirely different. It may start with a top level of workspaces and dive in from there. And
[13:36] we'll just keep going. TLDDR, build out your entire front end. Take time on this because in reality, the work that I just showed you here, if I was going to code this out the old way, everything I just showed you here, man, I don't even I can't even give you a number. It's hard to gauge. I would say at least a minimum of three to four weeks. And that's you having a fullblown understanding of front-end coding and really knowing how this all interconnects. I did this in under 12 10 hours around that range. We're in the new age. That just solves that one. Uh TLDDR like legacy users, if
[14:07] you don't understand what I said there, don't worry. What I basically want you to take away from everything I just yapped about is build out your front end. Take time here because the last thing you want to do is in the future of your application, how do I know this? How does this guy know this? Because trust me, with bumpups, we went through three or four different phases of essentially needing to migrate legacy users, thousands of developer accounts or sorry, thousands of bumpups accounts. We had to migrate them to the new data path structures. Not only does that break your front end, you have to
[14:37] restructure the front end. Not only does that break your back end, you got to restructure your back end. You have to write a custom Python script in order to even handle all the data move. It's it's not fun. So approach this first phase with complete clarity of everything you think you'll need in the front end. Yes, you're going to miss some things. I'm going to miss some things. But by the time you miss that thing and need to migrate a legacy user, potentially you would have been so far down the rabbit hole of developing an app, you'll be like, I got this far. I might as well learn the next step. All right, let's get to the meat. Lessons and methods. How did we do this? It is absolutely
[15:08] insane. So while I was in this development phase yesterday, I went ahead and just took a bunch of notes. I got a sticky note right here. I'm going to go over all my notes here step by step here of the different methods I used. One thing I want to say y'all is that let me know in the comments. Let me know on the school community description down below free. There may be stuff where I'm showing you one of the things I wanted to show you and you're like Corbin, how the heck did you do the popup here and then the little lead and all this different stuff. I may go over stuff that in my head is really not that deep but for you is pretty deep. So let me know in the comments. Now let's jump
[15:39] into it. First things first, icons and restarting your development environment. So, first thing I learned is what's an icon? You know, this little X up here, that little icon up there. Scroll down here, these little arrows. Keep going down right here for storage. You little storage icon. How do we get these? So, if you remember from the earlier lesson here, we were able to access open- source libraries that were completely free to us, and it's the same deal. Now, before I want to show you how to download open source icons, which literally means you will never be charged for them. It's just half free
[16:10] code. Let me show you how to run the app because I noticed when I was using cursor AI here and I told it to run the app, it would work sometimes, but it was running into errors that were just dumb. So, we're just going to go ahead and come down here to the bottom left, hit terminal, and simply put npm rundev. Just remember that command, click it. We're going to run it. Now, it goes to localhost 3000. Everything is fine. That's what I suggest for now. Obviously, you know, a year from now, they'll probably fix the weirdness around that, but keep that in mind. Now, next, these icons, I'm going to turn cursor AI into a nice little ask. And watch this. I'm going to simply put in this prompt. I need open source icons that are completely free. What are some
[16:41] good libraries for a professional app? What I want you to notate here is notice how I say opensource. This is going to be a valuable term for vibe coding when you want to integrate a third party API or an alternatively a library like this and have the implication that if you use it, there's no strings attached. Another great example of this is something called Y Finance I believe is the Python library. It allows us to get stock data uh across the entire markets for free, which is super cool. You know, we all love free things. Another thing I want you to notice is libraries. You don't have to use this terminology. Completely
[17:13] free. Not exactly 100% needed, but once it gives you a result, use this ask mode. This is very powerful. And ask those questions you're wondering. Ask those questions like, "This seems like really cool. Are you sure that they won't come after me if it becomes a million dollar app?" And you get your answers. Look at this. You know, for example, the one I'm using is Lucid and it says current. Pretty smart, right? And I essentially just said, "Install Lucid icons and replace all." Hit enter. But obviously, you need to be in agent mode, right? You can't just be an ask. And it did it. But one thing you need to learn is that when you install libraries like this, uh whether it's open source
[17:44] icons or a third party API, which will make more sense as we begin this series, you need to restart your development environment. And what your development environment is is that localhost 3000. This thing being ran locally on your computer. If you're ever wondering what the heck locally on your computer even means, that essentially means that if your computer were to blow up right now, the server would be dead because it's running on your hardware, your actual computer. No internet. I could be coding this in an airplane because I don't want to pay for that Wi-Fi. That still seems to be too expensive. Just give us free Wi-Fi on the planes. Okay, give it free. What you want to do though is when you
[18:15] install a package like this, you're going to go to that terminal that you just opened and created and npm rundev. You're going to hit control C. We're going to stop the server here. Reload. it's broken. Use your arrow keys on your computer, go up and click npm rundev again. Restart the server when you've installed the package. And the reason you're doing this is that anytime you rerun the server command of npm rundev, you're essentially rebuilding the packages. What I mean by the packages is you scroll down here, package lock.json, package.json. When you install a new
[18:45] thing like Lucid React or icons here, you can see that the versions here and Lucid Reacts here. These are your icons. Essentially, you're trying to play Call of Duty multiplayer, but you didn't install the update. So, install the update and then you won't have any errors. Fundamentally, what you just learned right there is going to apply to any type of open-source library that you ever install in your application. What I encourage you to do is take the time to search up what an open source library is. What does open source mean? What are the potential things you can use open source in your specific application?
[19:15] Like, literally, what are you building, Corbin? I'm building X. Okay, take that to an AI chat and be like, "Hey, I'm building X." What open source libraries would probably be a good fit here. What you realize was really cool as I built out other applications is that a lot of stuff that you pay for online can be integrated into your application for completely free. So what I mean by that is that a lot of times when an individual is paying for an API service like OpenAI's API for example, if I want artificial intelligence integrated into the app, in theory I could run my own server. In theory, I could download that
[19:46] model and run it locally in my server or then alternatively use something like GCP and run that LLM that I downloaded to GCP and hit those endpoints cuz I own that model. Why don't people do this, Corbin? Because of the fact of how much these AI companies have scaled up their API infrastructure so that if your app does blow up, you can lean on OpenAI's tech. It's like, why is there no AWS GCP competitor really? Because they've already built all the server rooms. There's no reason to. Just stand on the shoulders of giants. The next thing we'll learn here is how I approach pricing. And I'm just going to give a
[20:17] very quick, very fast why I approach the pricing like I did because we'll have a whole other episode dedicated to this. Simply put, you just need to understand your underlying cost. Therefore, what you do is you go to ask mode. Again, my series is going to be around Firebase backend. Therefore, I am connected and correlated with Firebase pricing. Are you using Superbase? Are you using AWS? I don't know what you're using. Whatever you're using, you need to clarify that. you know, I will be using an XYZ backend. Once you do that, you get context. For example, I come over to
[20:48] Firebase pricing here. You know what's really cool about creating software products because these big cloud providers are highly incentivized to get to have you use them because in reality, all they got to do is just run a server. They're just paying for the energy, y'all, which is crazy. And obviously, they have a bunch of infrastructure built around it so it can handle things at scale. But there is a reason why things like Firebase, there is no cost on the Spark plan and it's insanely generous. You scroll down here, you get access to things like 50K reads a day, which you might not understand what that means right now, but you'll understand
[21:19] what that means pretty soon here and you'll be like, "Wow, 50K really, Corbin?" In reality, what you need to understand is that at a nocost plan of Firebase, for you to run an application that probably pushes maybe like 5,000 MMR, maybe 6,000. It really depends how heavy you use the back end. I mean, we're looking at a cost maybe of like a $100, $150 in cloud processing, even if that. So, you got to understand cloud processing and this backend stuff. People like always be fighting over Superbase, Firebase, like the real people just build. But I don't care. Choose whatever you want to choose. Use whatever you want to use. I'm using
[21:50] Firebase in this tutorial, in this entire series because the fact that we started at Google AI Studio and Google AI Studio is obviously a Google product. Therefore, longterm in this series when you watch it, you'll see probably an easier integration. But I encourage you not to do that easy integration in Google AI Studio. I encourage you to bring it out to an IDE like cursor so you actually own the code. So once you've identified what backend you're using, then you got to identify the services you'll be using. What that means is, you know, when we're building out a Google AI studio app, we're going to assume you're using Gemini's API. How are you using Gemini's API? If you don't
[22:21] even know how you're using your Gemini's API, then simply do this. We're going to put the prompt, I want you to look at all the APIs I'm using and get the relevant cost for them. Once we know that want to know the cost to do one edit with the assumption of drive space, function invocations, etc. Now, I don't know what your app does or what value you give. But what I give is that we have a nice little hail bale system. Originally, it was credits, but honestly, credits have such a nasty name to them in software. I'm not going to start it like if I'm vibe cutting this thing and I'm having fun where you can quite literally choose your lead. If you
[22:52] don't even know who lead is, hold on, [laughter] hold on, hold on, hold on. There's a reason this sweater is out. All you OGs that are watching this, they know this sweater. All the new people that have just found me right now. Oh, this is a big sweater. If it's a llama sweater in the video, it's a big deal. That's Le the Llama. He's an OG. Okay, look at my channel banner on YouTube. Leit's on my shoulder. Side note, you know, his costumes and what's cool is that, you know, you streamer Elite, Streamer Elite will edit the video for you. But I don't want any credit. I don't care. I'm doing Hey, uh just like how Zapier does zaps, just branding. One hay bell equals one lead image edit. one
[23:23] lead image edit cost me money in the back end. It is a Firebase invocation to actually run the function for me to call GCP and be like, "Hey, I need you to run some code for me." Firebase invocation. This costs money with the Gemini image editor, Gemini Flash image, Gemini API flash, whatever the model's called. They just call them crazy stuff nowadays. That cost me money. So, I ran the numbers. I understand that essentially what's the burn rate for one edit? Therefore, I need to find the value of what one hay bale will be for the consumer. Your margins here, what do we
[23:53] understand about margins? Therefore, let's say one lead image edit cost me 1 cent. Everything taken to account of the implication storing of the potential data from the thumbnail. That's why I bring up gig space. That's why the tiers even identify gig space. You might not even need storage for your platform. The reason I need storage is because I'm going to be storing image data. Cursor, not right now. No, don't don't tell me to give me an update right now. Okay. Later. Point being though is once you understand and you go through this little thought process with the AI model that's going to be able to contextualize your entire repository. Corbin, what's a
[24:23] good model to use? Oh my gosh. Is it Christmas? Is it my birthday? Is it I don't even know. Something amazing. Look at this model, y'all. You can use auto, you can use claude. I have been having insane results with GBT5 Codexi. So, you ever run into issues? Switch to that. That thing is crazy. Idea though is you're looking for margins here for your underlying value. Therefore, if one lead image edit after finding out all this information is going to cost me a cent, then work your margins around. Uh, do you want to charge 10 cents per hell? Do you want to charge 5 cents per hell?
[24:54] What's a healthy margin, Corbin? To be honest with you, it really depends. I would encourage you if this is your first time running and creating an app, you don't have to shoot for the 90% 80% margin here. Shoot for the 60. Shoot for the 50% margin. You just want to create enough value to justify someone using the application. So for me, the margin I'm shooting for, I think, is around, if I remember correctly, around 70% margin. Therefore, there's a whole credit system, right? So the user could pay me 20 bucks a month and then for 250 hay bells, which equates to around 31
[25:25] thumbnails, I did I did the math. They could also be like, you know what, I just want to be on the free tier. Free tiers are always important. You got to give the user, especially in software, the ability to just try out the product because they might try it out and be like, this is trash. And if they paid for the product, you're going to get an annoying, very annoying refund email. So, you might as well just let them use it. Let them like code themselves or vet themselves out of the whole system. Last thing you need is a bunch of emails saying, "I need a refund." Just use the $0. It's all good. We also have a little elite hay bells. This is onetime purchases. I'm going to take a step back from some information I said a year ago
[25:55] when it came to the difference between subscription and onetime. And maybe you should just prioritize subscription. The step back I'm taking is prioritize tiers, prioritize clarity, but do give the option of one-time purchases, but just make it extremely clear the intention behind it. 60 days, these hay bales expire. They're gone. They're they're burned away. Lee can't eat them. Hey, Lee, yummy packs. Uh Lee can't eat them. And the only reason I'm adding this is cuz in reality, a lot of people might be scared to subscribe for 19 bucks. I know that's a scary number. So,
[26:26] I know a lot of people are going to use this for free. And I already know from my experience of using it because I've been making thumbnails for 2 and 1/2 years. I'm like, wo. You know a product's good when you'd use it. Just put it simply like that. You know a product is good. If you're coding out your software and you ever get to a point where you're like, "This is kind of good, but I don't think I would use it. Maybe I'm not the target customer." You've already messed up. You've already messed up. You want to build out a software product that you would use because if you would use it, you can probably find a thousand other people that probably want to use it. That's your canary in the coal mine right there. Your canary is dead if not even the developers willing to use the product. I was using it and I was like,
[26:57] "Yeah, this is next level." Uh, for my two and a half years of experience of making just thumbnails, this is next level. Therefore, I know a lot of people are gonna be on free. They don't like subscriptions, but they're definitely going to pay $8 for 50 Hay bells or 25 for 200 because they know that maybe they don't need to do 30 thumbnails, but maybe they want to do 12, but they don't want to buy a subscription, they just want to pay me eight bucks. The way you do package though, which is very important if you ever do a one-time purchase service within your software, is you want to overly price these. You want to disincentivize onetime purchases. The purpose of these is just to grab money that would not have
[27:29] existed because the user was already turned off by the subscription. Therefore, if I remember correctly, I think my markup on this is like 120%. It's some ridiculous number. I do that on purpose because I'm like, "No, don't buy the quick fix pack. Just pay 20 bucks and you'll be good to go." Keep that in mind. Let's go over the next little lesson or method. So, what you'll notice is if I scroll down here, some of the components here have a placeholder. Placeholder frame one, placeholder frame two, etc. You'll also notice up here is that yeah, there's a thumbnail now, but originally this was a placeholder. So,
[28:00] what does that mean for you? That means when we code here, and I highly suggest as well, if you plan on doing very big task, I'm going to show you some crazy agent workflows pretty soon here. You do really big task, always talk to the model first. Don't let the agent just get going. Get context. Really understand what you're about to tell it to do. The idea is that if you tell the AI model to code out your entire landing page, code out my entire landing page and then, you know, just vibe code it. I want to make it look like Apple or give me a dark theme or make it look like bumpups.com. Like whatever it is, vibe code it out. What is fundamentally extremely important you do though is add
[28:31] this to your prompt. Anything that requires an image, text, etc., just use placeholders and dummy data. If you don't add this line, what the AI model would do is it would approach a card like this and be like, "Oh, this would be a good card." Uh, we can't do it though cuz we don't have the image. Literally, let this thing go crazy. Let it out. Like, take off the leash. By leaving this line here, it's going to give you these insane type of UIs and it is going to give you these user interfaces because of the fact that it knows if it runs into a situation like this for example where it's like we
[29:03] would have originally coded this out but we can't because we don't have the relevant users image. Well, now it's going to code it out and just to give it a placeholder. And then how do you add to the placeholder? Well, add an image to your project. What I like to do is create a folder called assets, images, organization, and put the relevant image in there. And then once you have the image, then you would essentially come back here, take a screenshot of this right here, and be like, "Hey, for placeholder frame one, frame two, frame three, go ahead, and I can literally show y'all. Go to this folder images."
[29:33] Uh, images. You see the ones named XYZ? Use these for See the ones named XYZ. If I can type y'all XYZ. Use these for frame one. frame two, frame three. And what's actually really funny now that I bring that up is someone asked me on X like what is the fundamental skills that we should be learning now? And I kind of went over that in this video, but the idea is like if you really just want to be a monster, then learn how to code without AI and you would just be like off off the chain. Isn't that a saying? Off the chain. I don't know. But the big thing, the other thing that I thought was funny is that even even if you don't
[30:04] want to do that, the next best skill is learning how to type fast. Because if you can type fast, you can shoot these agents off crazy. like July 4th in the fireworks. So, what you just learned right there is use and leverage dummy data in your front end, especially in the beginning. And this is why I've told y'all multiple times, really take your time on your front end here. It's going to make the backend process so much easier. Let's learn another thing. The next thing we can learn is this right here. Now, personally, I'm doing leaps. I'm doing the llama. There's a bunch of other cool stuff I've added to this
[30:34] software. Why am I doing Leap the Llama? Because I can. And that's part of the fun of what vibe coding is now. It's all about creativity. In reality, big companies probably want to opt to have this kind of crazy branding because you're working with multiple engineers and right off the bat, your first issue is if you're working with six engineers, six engineers might have six different ways they want to approach the branding. If you're one person, a one engineer in this new age of coding, you can do whatever you want. You are the executive decider. Therefore, this is probably going to be my icon. This is probably
[31:05] going to be the little character. Leth the Llama is what it is. One thing that was funny is I was the under the original intention of you know I got Leth the Llama. I want to add Leth the Llama through the out the entire application the login page etc etc. But the way I wanted to go about it is like give Leit different costumes like the party costume. So I went over here and I essentially just said make a dummy component. Give me like five different costume designs for Le the 8bit llama and just let me see them. It did that and I was clicking through them and when I say dummy this is what I mean. So what
[31:35] you'll notice is this is one example, right? So I was like, you know, I need different variants of the cowboy hat. I made this component. I had AI made this component purely for the purpose of me just to kind of look at it and be like, okay, I like variant 3. Let's go with variant 3 throughout the entire application. Now delete this code. I literally just created this code just to pick the cowboy hat for lead. But that is something you can learn. Every single piece of code doesn't necessarily have to be in your final product of your application. you might go down rabbit holes where at one point here I was going down a rabbit hole of finding my
[32:07] user interface color palette. Therefore, I would do something like agent or ask. I'd be like, "Give me five different color palettes I can try." And what I mean by color palette, y'all, is, you know, this purple, this dark blue, like all this coloring, right? It gave me five different options. It was like a neon one, a lighter theme. I literally just went down the rabbit hole and I was just like, "You know what? Try theme three." It recoded the entire UI to show me what theme 3 looked like. I was like, you know what? That looks like trash. Roll back. It rolled back. That's how
[32:37] you plug and play, y'all. So, that's how you get your coloring. Now, let's go over an important lesson that can happen when vibe coding that you need to know about so you can mitigate this. And one thing I was noticing that it was doing is that, for example, for the landing page, it had put all of the code in one file. So, in reality, the original landing page here wasn't 75 lines. I think it was like 800 or 900. And what I mean by this, I'm sorry if I keep saying what I mean by this. I'll just keep talking. I'm just going to keep talking. But the idea was that the entire file
[33:10] was each component component via all put into one component. Now, this can be very clunky at scale for multiple of reasons, but what you need to understand is a term called refractory code. So, originally, because this was all in one file, and I even took a screenshot to prove it to you, it was just landing and landing page.tsx. No good. Every single time I would want to make a new update to the landing page, it'd be very slow. You're more prone to errors. And the reason is
[33:41] because when the AI is coding with this many lines of code over like 700 800 I know this says 75 but the original file it has more code to deal with and more context to deal with which can be good in some cases but really bad when I am coding out a front end and I just want you to focus on the llama mood and wardrobe. So how do we solve for this? First off, what you'll probably already notice over here is components and look at that. It took all that code from the original page here. where now it just renders the component. Watch this. If I
[34:13] go to feature selection here, scroll down, it says export default feature selection. Now it's just rendering the code. And feature selection, which is this right here, I believe, is just one line of code in landing page. Now, which means when I want to attack something like elite wardrobe section, the AI model doesn't need to go through 800 lines of code. rather the AI model sees it exists here and then it goes to the specific file which is 83 lines of code. This is refractory. And this is
[34:43] fundamentally one of the things that's missing of a lot of vibe coders that causes, you know, all those like pretentious developers like, "Oh yeah, yeah, you guys can code of AI. Yeah, just wait until you can't make a scalable architecture. I'm sorry. Just teach them then." And I'm teaching you right now. Refrator. It'll make your life so much easier. So, how do we do this? You go to agent mode or maybe you want to start ask. I would encourage you all to start off ask to be honest with you because if you don't know what you're doing or not as experienced, you don't want the agent to start running something and then you're like whoa whoa
[35:13] whoa what just happened. When I use terms like refractor or make the code size smaller use those kind of terms in your vibe coding it will understand. But the idea is like I notice the and then I do at landing page.tsx it has all the code. Can we make it so we have a separate folder called components and refractor the code shoot off it goes it flies. You want to use a higher level model for this. So you do something like GBT5 codeex and this will take probably
[35:44] 20 minutes 15 minutes but by the end it's done. And now anytime you want to do further updates to the landing page it's going to be very easy. and you just did something else which is very amazing is because of the fact that you were able to now make it so that our nice little elite wardrobe as its own file. I'm going to be able to easily transfer this kind of code to another page. A better example this would be the footer the footer code. I'm not going to rewrite the footer code in five
[36:14] different pages. I'm just going to use that one file and import it to all five. What you need to understand in vibe coding is that means that when you want to import a specific component and if you don't know what the file is and you're like Corbin I don't even know what the file is how did you even know it was Elit's wardrobe screenshot put it into chat and be like what file is this code associated with it'll give you the file once you have the file then you have the power because now you could be like oh I really like Leach's wardrobe can we add this to the pricing page can
[36:45] we add this to the blogs page boom easy boom done three lines of code imported. So now you learned how to create better architecture for your front end. Next thing to learn is going to be your toos privacy policy and cookies and data privacy. Everything I'm about to say right now, I am not a lawyer. This is not legal advice. This is just coming from my experience of running another software company. So take of a grain of salt. Literally, if you want to skip this part of the video, you can. But I'm going to tell you from my experience. Terms of service and privacy policy
[37:15] non-negotiable. You need it. I made my terms of service and I made my privacy policy. But the way I made this is I've already put down the money to hire a lawyer through my other software company Bumbos here. So I know what needs to be put into these toos and privacy policies for my specific application because I put down the money for that legal work to be done. I'm not going to tell you how to run your company. Some people like more risk. There are companies out here that don't even have business assurance for whatever service or product they provide. Crazy stuff, y'all. This is real thing. A lot of people assume that as an entrepreneur or as a business owner, they must they
[37:46] assume all eyes and tees are crossed. But in reality, some people just like more risk. I'm very risky. I'm an entrepreneur. When it comes to legal things, that is one territory I don't like messing with because you don't want to get sued. You don't want to deal with that headache. So, an additional thing I'm going to have to code on my own time is going to be a cookies banner. And then an additional thing that I coded here was the settings because one thing that has happened in the tech industry in the last 10 years that it was not like this when it was the 2000s and early 2010s because at that time it was
[38:17] just all rainbows and sunshine is data privacy is a real thing. Now yes in America it's not as strict as it is in Europe. Europe if you're watching this from Germany, Deutseland, if you're watching this from France, UK, I don't know. Point being, know your country because data privacy is not a joke in Europe. They take this stuff very seriously. I mean, there is so much stuff around that topic. I'm not a lawyer though. You got to look into it. What I'm going to tell you, what I'm going to do is I'm going to do things like, "Hey, do you give me consent to
[38:48] know what city you're from? Hey, do you give me consent to let me analyze your prompts so I can train the model to be better?" Give these options. This is important. Now, let's learn some additional prompting. I know that was a little crazy. You're like, Corbin, why are you so serious? Because legal is no joke, y'all. Yeah. I used to run a very high-risk business. Business I used to run. You can look it up. It's called Lou. It was a vape company. I ran that thing for three and a half years, y'all. Yes, you heard me correctly. A vape company like the like Jewel. I ran a
[39:19] company like that for three and a half years. Extremely high-risisk industry. Long story short of that, I got overregulated and kicked out of the market. But what I can tell you from that experience is that obviously every business has risk. But because I was quite literally in one of the top brackets of most it got so bad with that business that the US government was trying to identify my vape which had no nicotine into it as a cigarette. Oh no. You you don't want to be a startup founder and then find out the government
[39:49] is like, "Hey, by the way, what you're selling online is a cigarette." No good. So, keep in mind that's why I get a little bit more serious on those topics. So, let's find out how I made my settings page, which might seem very scary as a vibe coder, but in reality, I was able to make this very easily. What I want you to do is find user interfaces you love. I don't even care if you make a bookmark folder where you just have like five, six different sites you love. Now, Claude here, it has bits and pieces
[40:20] that I like. One thing I like about Claude is their settings page. So I come over here to settings. Looks familiar, right? Privacy, how we use data, general. Yeah, what you're thinking is what I did. I took every single one of these pages and just screenshotted it. Screenshot general, screenshot account, screenshot privacy, screenshot billing, screenshot usage. Also, what I mean by screenshot is like take a picture and just get the image of it. Right? With all of those images, I chucked eight or nine images and loaded it up into an
[40:52] agent. First, I went into ask mode. Let me clarify what I'm looking for. And what I did is I essentially identified saying essentially a lot essentially essentially essentially. What I did was I told the AI model, I want you to copy these exactly. So, what would incurred was that when it started going at the settings page, it added tabs that I didn't like or it added options I didn't like. I didn't care. Just code it all out because by the time it reached its end product, I was able to click through and be like, you know, this section
[41:23] right here, I don't like this. Delete this. And it did. That is how you go about this, y'all. Elite Lab. Obviously, Claude doesn't have a section called Elite Lab. So, I created Leit Lab, which allows you to choose any of your your llama designs. Oh, you want to be launch? You want to be Western? You want to be Afterparty? Neon Drift. I got to get raver in here. Okay, we got to have a rave. I love ED DM. Swedish House Mafia. I love it. Point being is I went ahead and created Elite Lab. Amazingly, that is how you create these more intuitive UIs that seem intimidating at first. You just take someone else's UI and then just make the changes you want to make. If I come back here to back to
[41:53] studio, the other one that I messed around with was upgrade plan. Boom, done. Was able to find a platform that I really liked how they showed the plans you go with depending on how you want to upgrade and I was able to make it here. Very simple stuff, y'all. Don't over complicate it. That is why I encourage you to really take your time on this front end because once you start connecting the back end, you want to make sure that the infrastructure you build here is rock solid. So when you connect the different data points, you're not going to have headaches. So I'm trying to mitigate as many headaches as possible. Here's a quick lesson on React routing. And what I mean by that
[42:23] is localhost 3000. If I hit this, you know, we're going here. If I go to login, we're going to localhost login. One thing that you're going to need to add just as a quick line because the AI isn't smart enough to understand it yet. So, if you go to your application right now and you go to your emulator and you type in localhost 3000 and then gibberish, it's going to essentially break. Click this. For me, I've already set it up. It's a 404. What this does is in software development, if the route doesn't know where to go, and this is incurring in your app.tsx, if it doesn't know where to go, whether it's SLworkspaces, whether it's SLS
[42:54] studio login, if you don't add this line of code, it's going to break. Lucky for you, all you need to do is go to a chat here and say this. You can start off ask, go straight to agent. For any page that doesn't exist, go to a four page. And there we go. On top of that, Lee is on the dance floor. Let's go, Lee. Let's go, Lee. Lee lost on the dance floor. On the on the on the dance floor. All right, cool. If you stayed up with me up to this point, then I have an absolute Christmas tree for you. As what I'm about to show you right now, I had a
[43:25] massive breakthrough. And I'm going to make a whole other video on this topic. What I'm going to show you right now is this agents mode. Now, when I did the cursor 2 video, I didn't necessarily rave too much about this. But to be honest with y'all, what I realized is that I need to switch my brain on understanding what this even means. What this agent mode even means is what I was doing over here when I was managing five front-end engineers. These five front-end engineers just turned into my
[43:56] five agents. So that is why and even in the earlier in the video I said the issue of coding now isn't the actual ability to code. It's knowing what to code next. So let me just show you a very simple workflow. We're just going to run off two agents. In reality when I was coding this out because mentally I knew every single thing I needed to do in this application from my experience building out applications in my entire life. I knew it. Toss privacy policy 404 page. Uh okay we don't do workspaces. Okay, if we're going to do workspaces, then I know I need to restructure to the data path so that the individual can
[44:27] then share the workspace. Like I just knew I knew I knew I knew I knew I knew and that comes with time. But so in reality, when I was running this, I was running five agents at the same time. Here's the two major things you need to understand about running multiple agents. The first major thing, especially if you're a beginner, this is what I encourage you to do. Don't run an agent on the same page. So what I mean by that is, and I'm only saying this so that you run into the least amount of risk. I'm saying that is that you know we got a landing page. Nice. Maybe have the agent do one task on the landing page. Oh, Corbin, it's running. What do
[44:57] I do next? All right. Uh, do you have a signup page yet? No. All right. Maybe have one agent work on the signup page. All right. Do you have a settings page yet? No. Okay. Maybe have one agent work on the settings page. Now, let me show you a live example here. So, this just becomes absolutely crystal clear. First agent. I'm going to switch to GBT 5 codeex high. I'm also going to show some tips pretty soon here on how to make them give really good outputs. But for now, first agent, let's say I come over to the login page. I'm like, "Oh, okay. This kind of looks boring." If I go to like the free page, we got Le over here dancing. I like that. But the login page
[45:29] seems a little bland. First agent, what's your test? Okay, on the login page login, how do I know up here? Can we make it more fun? Have Le in different costumes saying hi or telling the user welcome back. This is the most vibe coding prompt I've probably ever made in my entire life. Enter. Do I just sit here and wait? Nope. New agent. Okay, what's next? Uh, let's go to the homepage. You know, for this feature right here, the issue with this is explore feature. I'm not going to create separate pages. I don't need that. So, I'm going to go like this. Uh, can you remove the explore feature here? Uh, enter. All right. What's next? Okay.
[45:59] Scroll down. You see what I mean? We're in the new era. And people that have been developing for years, they don't want to admit it. And the ones that do are already taking advantage of it, like me. We're in a new era. It's not about knowing how to code. Knowing how to code fundamentally extremely helps because it allows you to use the terminology that you're learning in this series. But once you break that, the real skill here is knowing how to manage a team in software. Now, this skill can be gained through just building. Once you build out your first app and you understand zero to 100, your next app will be able
[46:30] to be completed extremely fast. When I build out bump ups, where did it get to where it is now? Those two years of work for me to build out that exact same application. Give me four weeks. This is what I'm talking about, y'all. This isn't hype. This isn't me trying to get clicks. This is just you came extremely early to genuinely a new revolution in coding. These are going. Look how long they're taking. I like that it takes long because while these are going, I am just shooting off more things that I know I need. I go to settings. I go to elite lab. H maybe I want to add another costume here. Maybe I want to add surfer elite. You know what? Let me add surfer
[47:02] elite. That's a good idea. Screenshot. Okay. Um you know here, can we add a costume for surfer elite? If I showed myself this when [snorts] I was 12, it would it would have been it would have been too much fun. You y'all y'all really don't know the pain it was before AI and coding and how long it would have taken just to code out such simple files. It's not even about like, oh, you don't know how to code. No, no, no. You would know how to code is the issues that you literally have to type out 100 lines. Every single character you're
[47:32] typing out, it's not a knowledge thing. It's not like I don't know how to code that file. It's like I know how to code that file. I need to type it out. like typing an email or typing a Google doc. But if you mess up on one character, you miss one semicolon, you miss one bracket, the entire application breaks. People just don't like this is insane, y'all. Okay, remove explore feature. Did it work? Let's see. Let's go back to login here. Scroll down. Okay, cool. It did. So, this is one of the main points. All right, I like that. Keep all. All right, next. Is it still working? Let's
[48:03] shoot off another agent. This is the workflow. This is going to be your massive unlock. This is what no one knows about yet. This is the 6 months, 12 months runway we have. So, I'm going to let these keep cooking and they're done. I don't even care that that took nine minutes. I don't even care that took four minutes because I know functionally what to do next. So, I probably have six or seven agents just going. And I'm not over exaggerating, y'all. Once you code more, learn more, build more, you will know what I'm saying is true. And you will be like, "Wow, I'm glad I got into this so early before this all becomes mainstream. It's
[48:34] going to be an absolute mess a year from now." And when I say absolutely mess you, I want to be very clear about something. Every single market has an opportunity. Amazon FBA, your golden years was like 2011, 2012. What is Amazon FBA? If you ever used Amazon, it says Prime. You're using their fulfillment center. That was golden years in like 11 and 12, 13, 14, 15, 16. You enter a little bit later. Okay, now it's just an absolutely oversaturated market. You don't even want to touch it. I don't even want to touch you over a 10 foot pole. This you are getting Amazon FBA 2011, 2012 right now. Just wait for
[49:08] this to be oversaturated. I don't know how long it's going to take, but it will happen. All right. Make login page more fun. You know, I go to login. Oh, cool. A shuffle fit. You know what? I don't like this. I can literally just come over here and be like, undo all. All right. Bye-bye. Coach's dead. Uh, let's go to this other one. Add surfer costume. Leit. So, you already know Le He loves surfing. I want I want that um those like garlic shrimp in Hawaii. Northshore. Or if you don't, if you know, you know. Oh, those garlic ship shrimp are so good. Put that lemon on
[49:39] it. Put the butter on it. All right, settings. Where is my surfer elite there? Where is he? It says it's here. Am I just not seeing it? Maybe I messed up. So, what I do is this. Maybe I reload. Let's try that first. I don't see Surfer Elite. What occurred here is in my assets and where I have Lee avatar. It did create Surfer Elite. But the issue is that it didn't render it on the settings page. And the only reason I know that is because I know how these all connect. But if you didn't know that, all you would need to do is simply be like, "hm, I asked for Surf Elite to show up here, but it didn't." I'm going to drag that image I just took a
[50:09] screenshot of, and literally just Vibe Code in the settings. Where is Surf Elite? And then what's going to occur here is it's going to be like, "Oh, my bad. I created Surfer Elite, but I didn't add Surfer Elite to here." So, let me add Surf Elite. And watch this. It's going to play next move. Going to click in. And what's great about this is that these are the little shootoffs. Uh this is very familiar to territory for me because of the fact of when running those front-end engineers, each one would have its own pull request and each engineer would provide me with code and I'd have to ensure that it wouldn't conflict with the main branch, it
[50:40] wouldn't break the main branch. And in addition to that, I had to ensure that the actual underlying PR was good code. So knowing this kind of information, you know, simply that the issue with the code output here wasn't that it messed up, but rather it was misguided. What I mean by that is that maybe in my original prompt I should have been more clear that to add it to the pick your llama fit/ settings. This is what I'm talking about when people say AI coding is trash. No, your prompt is trash. All right, with that done, we got Surf
[51:11] Elite. Oh, wow. Surf Elite's awesome. Sunchasing wave rider Ulawatu Bali. I love it. All right, we're going to accept. All right, last couple things here y'all. If you're about to run a really massive task, uh, an example of this for me personally was when I was building out all the UI for workspaces and the infrastructure for handling the database in the back end in the sense of paths. I didn't touch the back end yet. Don't worry, we'll get there. You want to essentially tell the agent to read the entire repo. Read the entire repo and understand it. What I'm saying here
[51:42] when I say repo is all of these files, all every single one, read every single file here and just understand it. Put it in ask mode. Hit enter. It's going to maybe take a couple minutes, but once it's done, it's going to be like, cool, I know what your app is. What do you want me to do? You switch it to agent mode and ask for that really big change. You know, maybe this is as simple as the settings page, but you use that methodology for really, really big changes you're about to make to your application because you want to tell the agent everything about your application.
[52:14] Now, one thing that people might harp on is look at that context window. 272K context window. What that means for you is simply how many files of code can it understand before it breaks and needs to reset? How much data? 272K context window. If you want to have an idea of what that means, 2022 September, I believe that's the date. Check me in the comments if I'm wrong. Jet GBT 3.5 came out April of next year in 2023. I've been doing this for a
[52:44] while, y'all. GBT4 came out. You want to guess how much context window that had? 4K. Just four via We're at 272K now. So, I can guarantee you by the time this stuff becomes mainstream, you have a very large application. There'll probably be a million context window, maybe two million. This tech is exploding. Here's the last thing I'm going to go over. Check out my other YouTube videos on my channel here. I'm going to go over other things I learned in this process. I just don't want to make this video too long cuz I can already tell this might even be an hour.
[53:14] I don't know what this is. But here's the last thing, last two things. First thing, if you use a problem like this, read the entire repo and understand one really big task you could give the AI model when you've gotten to the point where you've added a ton of files, do your commits, etc., is look through my entire code repo and make sure it's scalable. And at first, it can be a little general, but I would dive into a really deep ask conversation of what that means for your specific application because I don't know what scalable means for your app because I don't know your
[53:44] app is. I know what my app is. So I know what scalable means in there. I'm telling you though in a vibe cody way is talk to the model and really try to understand what that means for your app. Now one version of scalability that you saw which was pretty cool was taking the landing page here and going from 900 lines of code to refactoring them all into different components and now nice now it's a cleaner codebase. I'm able to attack it better etc. The second thing I want you to take note of which is extremely unique to our current
[54:15] situation is how AI softers work. So you'll notice when using your value point there might be little issues with it. Like it's good, it works, but you know maybe the output could be better, maybe the thumbnail could be better. Here is a thought process I want you to go through that is only specific and unique to AI software. This didn't exist before the AI software world. Wasn't there for iOS apps, wasn't there for any
[54:45] software pre-AII that gave AI as the value point. And what that is is for my example, the objective is simple. User comes to my platform, they're going to be able to make really good thumbnails. The AI model associated with the image editing from Gemini, over time, this will become cheaper and this will become better. So, what you just realized here, and I'm going to save you a ton of time. I shouldn't even be giving this advice to be honest with y'all. This is like in an extreme competitive advantage, but I'm nice. Point being is when you need
[55:18] to decide what to do next for your app, prioritize more features. But when it comes to very little things about the actual model output, don't necessarily care too much. as in reality, if I were to go down a rabbit hole here with the thumbnail and I'm like, "Ah, this is good, but I can't really do the text that well, why do I care?" In a year from now, when they release the new AI model for image editing, it's going to be able to do text way better than the type of bandage
[55:50] solution that I'm going to try to come up with. So what's really cool is that just takes you going to one line of code or quite literally vibe coding and being like hey you know the current AI image model that we use can you flip it to Gemini image flash V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V3 or something like whatever they call these things. Flip it to this one. It flips it to it. You use your product and you're like that just got 50% better. I have a very real example of this bump buffs. We built out pipelines that are very specific to analyzing a video. These pipelines
[56:20] exist. By us just switching to a higher level model, the value we gave to an end consumer was instant. It took one line of code. This is unique. And I mean, someone else must be talking about this, but at least in the AI influencer space, I don't see anyone talking about this. That was a long one. That was a very long one. So, let me actually finish here y'all with just the PR. I usually don't let PRs get this big cuz this was a ton of code. But, I wanted to do it so that you you all could really see the power of this. So, I'm going to go and merge this. Merge pull request. Confirm merge. All right, that's fine. and delete branch. Come back over here and
[56:52] we'll notice is now main has been merged with front end. So I come back over to my code right over here. Let's go to editor so I can see this better. Uh all the commands I'm about to do right now just simply use the AI vibe way to do it. Be like hey this guy on a YouTube video did AI check or did get checkout like or just follow along if you want to learn this. I think learning like simple commands like this is important in development so you can have some understanding when it comes to connecting with GitHub. The idea is like, okay, I'm in uh get front end. Oh, I kind of messed up. I guess they did make a change. What I'll do here is
[57:22] this. I'm just going to be like, burn all my local changes so it matches the cloud. Burn all my cuz I've already merged it. Very vibe. I could really remove the asterisk from the branch. Well, this doesn't go too much down a rabbit hole. I probably should have clicked into a smaller model because it's a simple git command. But I guess you learned something new. Idea being that the changes we made together, surfer elite, I'm just going to remove it. So, you know, hard reset. That's nice. So that when I do this, I don't get any stupid warnings from GitHub being like, "Oh, there's unstached changes." So get branch get check out main. This is taking me back to the main branch. And the main branch is going to
[57:52] be like, "Wait, what happened, Corbin?" Exactly. So just one day of coding, y'all. This is what's just insane. One day of coding. My application went from this, not even having a settings page. When I do get pull origin main, we're just going to grab all that cloud code, which is the code that we just merged in GitHub here, the frontend PR. Boom. [sighs] We're in a new age of coding, y'all. You might be like, Corin, why is there an error? That's because quite literally, look how many files on the left over there. It's adding. Thousands upon thousands upon it's just too much, man. It's fine. We're the early birds. That just about does it, y'all. Make
[58:23] sure to leave a like. It is completely free. Make sure to leave hype. This series is really just beginning, y'all. I've realized that quite literally anyone can code now. And we are so early to the pivot of Cursor 2 and Google AI Studio that yeah, this series might be multiple hours. This might be a 5 to 6 hour series, but who cares? Anyone that's watching this series is going to have a significant competitive edge compared to everyone else in the market right now. I'll see you in the next cursor 2 just quite literally put out an entire front end that would have originally taken a month for one engineer but maybe even longer for any engineer that was inexperienced type of video. Players go elite le lost on the
[58:55] dance