Your App Will Fail, If You Do This
Other Videos📅 2025-11-25
Transcript
[00:00] I'm going to show you something that's extremely important for your app not to break when you actually launch it. If you don't do what I'm about to show you right now, if you try to launch a real application that makes money, you are shooting yourself in the foot. As one thing with vibe coding is that yes, we can build apps with just human language. But make sure your app has this so you don't absolutely have a bulky, bloat, undesirable app. Okay, let's jump in. Welcome back, y'all. In today's video, I'm going to go over a nifty little trick here that you can start using when developing your app. That is pretty important as I had a lot of requests in
[00:30] our community here. What community, Corbin? Third link. Check it out. Description down below. And what I mean by bulky is like I know it's bulk season, y'all. I know it's winter. You know, maybe I can start getting bulky too. What I mean by bulky though is that when there is a bunch of dead code or alternatively when a file gets too big. So, for example, here one of my bigger files has to do with the studio page. So, if I come to my studio page, I got this amazing hair. What you'll notice is that there's a lot going on here. A lot of code is here. And what I mean by that is that if I go to this page, I'll go to pages here. Go to studio editor. Come down here to studio editor app. You
[01:01] know, we got a ton of different imports. And at the bottom of the file, we are looking at around 859 lines of code. Now, this is a lot, but originally when I was coding with AI, this file and this entire page was over 4,000 lines for one file. 4,000 lines of code for one file. Extreme red flag. How did this happen? Well, this happened because AI can give good code outputs, but at a certain point, it doesn't even realize it might be doing a bad practice. And the way you mitigate the AI from doing bad practices is learning things like this where you
[01:31] have to realize that yes, if you have a file that is 4,000 lines of code, that's not good. That's really bad. As what 4,000 lines of code does for you in a negative way is the first thing is that if you have an air, there is a bug. For example, I'm looking at this amazing studio page and let's just say, you know, I put in this prompt here and it bugs out. it breaks. If I'm trying to debug this, I'm trying to figure out, hey, why is it within the chat component, when I say component, y'all, I'm just referencing this little box here. Why is it when I put in a prompt here, it breaks? Like, you know, nothing happens. No generation. If I had the
[02:02] 4,000 lines of code file, it would have to scour through 4,000 lines of code. The AI model would. Alternatively, if we do something called refactoring, it would only have to look at the relevant file for the chat, therefore mitigating it maybe to 500 lines of code. Less is better when debugging. There is other reasons why we do this. As you'll notice over here, the studio editor is made up of all these different folders, y'all. This is no joke, y'all. But don't worry, let me show you how to do it. First off, I'll go to a different page, y'all. As I know this crazy hair might be kind of distracting, so I'll go to the settings. All right, we're in the settings. If I
[02:33] come up here, here is how we first off see if we have this issue. Choose a highle model here. So, we can use composer one. 4.5 is good. It's a little slow. I'm going to choose composer one here. Here is a promptable use. I'm going to make sure we're in ask mode here. Ask. And I'm going to say look at my entire repo. and find the top five files with the most lines of code. Hit enter. This is going to search through all of the code here. And what I want to do is first off, I want to see if there is any crazy files. I'm also going to show you a little trick here that it doesn't matter what text stack you're using, how to get context of whether or
[03:04] not the size of the file is too much. So, for example, here, you know, I'm going to zoom out and scroll up here. And we see number one is funny enough, the studio editor app page, which is 860 lines of code. When I initially went through this cleaning process and this phase that said 4,000 and then I think the settings page, which is not here anymore, that was like 2,000. Eg. What's behind me? Point being is that if you're using React and TypeScript, your upper limit should be like 1,200, 1,500 lines of code. I put mine down to 860. Even
[03:36] 1,00 1,500, you're you're kind of wilding out. It's still fine, but you're pushing it. In reality, my suggestion from my experience the last 10 years of developing under a,000 for React projects. Now your next question might be Corbin I don't use your tech stack what would it be for me what I would suggest you to do is simply ask the model hey based off my text stack XYZ what is a good amount of lines for me amount of lines for me hit enter now your next question after that question might be like Corbin I don't even know my text stack then ask the AI model again what is my text stack oh my text
[04:06] stack is react and typescript next question for a reactive TypeScript app what should the file size be now I think the answer from the AI model is like around 300 to 400 maybe 500 so you're like Corbin Why'd you choose a thousand thousand file? Because that's just from my experience and I personally know it can push to the upper limit is. But typically, rule of thumb, go with the AI models answer for your specific text stack because I'm not here developing a video game. So, I don't know how large your Rust file should be. So, what is next? You're like, Corbin, I've identified an issue. You've identified an issue. Perfect. Let's say, for example, if I wanted to refactor my studio editor app even more, what I would suggest you to do is take your
[04:38] number one file, you just copy it. You come down to your chat, you paste it. Okay? And we refactor it more. This guy doesn't know what he's talking about cuz he doesn't know how to say it. Get mad. Okay, can we refactor it more? And then what I suggest you to do is use a model like 4.5. You can use 5.1 C codeex high here. 4.5, 5.1, 5.1 high. These are all really solid models for planning. If by the time you're watching this video, you're like, Corbin, those are outdated models. Just go with the most coolest model. Okay, just go with the coolest model whenever you're watching this video. For now, I like 4.5 for planning. I've realized I kind of like how it approaches this kind of reasoning. So,
[05:09] what I do is, you know, can we refract a bit more? What would you suggest? I start in ask mode. And if you know this channel, you've probably already seen my other video on this topic. Ask, plan, execute. That sounds like good life advice as well. Ask to learn, plan the plan, then execute. So, we got this nice little idea here. So, what it wants to do typically, especially if you're making a TypeScript app, is you'll notice that there's going to be little folders here. What you'll notice is that you got like utils, you got hooks, you got domain, you got features. Some of these are custom folders like tools. Tools is a custom folder that I personally wanted to refactor my code.
[05:39] Oh no, Elite's lost on the dance floor. Let me help you, Le. There we go. And you might be saying, "What is a tool, Corbin? I've identified these as tools. Therefore, I want the relevant code for prop eraser, the relevant code for remove background to be its own specific file as we grow that list." So with that, you will notice that it's going to then tell you, hey, how much are we reducing it by? So it's like the main component goes down from 860 lines to 100 lines. That's a pretty substantial reduction. I'm in a separate branch here. You can literally see it in the corner for vid where, you know, I'm messing around. I'm playing around. If you know GitHub, I'm just in the YOLO branch where I could do anything. I
[06:10] could break the app and I don't even care cuz I got my other branch that I'm working on. So, what I'll do is for the purpose of this video is I'll show you this, right? So, I'm going to be like, you know what? This is an amazing idea. Yeah, let's do it. Plan it. I'm going to hit enter. While this is planning, what I want you to know, don't be too aggressive with this. What I mean by that is that let's say you do this little search here and you're like, uh-oh, I got a 8,000 line file. 8,000 lines. Uh, that little I have the agents on sound mode. Let me actually turn that off. It's turned off. And if you don't know what I'm talking about, go to the settings, type in sound. You can make the agents make a sound when they're done. But you have an 8,000 line file.
[06:41] You're like, "Wo, that's not good." And yes, that's not good. What we want to do then is don't be like, "Well, I saw Corbin did it where he took 800 lines and put it down to 100." Let's do the same thing. No, don't do that. Start building it down. And what I mean by that is that, you know, maybe your objective isn't 8,000 to 100 lines, but your new objective that you tell the AI model is like, "Hey, let's take 8,000 lines. Let's break it down to 6,000. We've successfully done it down to 6,000 lines. What's next, Corbin? Let's take 6,000 lines and break it down to 3,000. Do it in steps. By doing it in steps,
[07:11] you can retry your value, ensure that nothing's broken, and on top of that, you have the ability to roll back within the flow. So, let's say from 6,000 to 3,000, something gets absolutely cooked. Don't worry, go back to 6,000, reapproach the plan. Plans here. And what's really amazing, what I really like about Sonnet is it does these little ABC questions before doing a plan. Very smart. Which refactoring should I implement? All seven. Just the high priority ones. Start with one. Typically, you're going to go with A here. You want to just do it all. So actually what I need to do is need to copy the whole line here. Let me copy it. Should I preserve all existing functionality as is? Yes. Please don't
[07:43] break my app. Should we verify the refactoring works? I typically just go with manual testing. You know, I'll test it. Don't worry about me. Hit a here and hit plan. Let it generate. So 4.5 for planning. What model do we use for building Corbin? How do we execute? Well, don't worry about that. I have the most beautiful model in the world that you're going to love. And I just realized this model is only available in cursor. It's called composer one. It actually might be available in other one. So use it if it is. If it's not, then maybe your second best execution model would be something like 4.5. But I just realized Composer 1 is amazing at speed and code quality. But a big butt
[08:16] here. And that big butt is that it needs a plan. And that's why we're creating a plan with 4.5 a higher level reasoning model. So we can hold composer 1's hand and be like, "Hey, I know you're fast. Don't mess up my code, okay? Build based off the plan." And the plan is this little robot likes reading this and the robot's like, "Hey, number one, do this. Hey, number two, do this. Good job, composer. Build. Now, we're in the building phase. Here is what happens sometimes when you do this kind of execution flow. Sometimes, let me go back to the crazy hair. Some of youall might be wondering, Corbin, why is it showing 404? Uh, that's because I'm in
[08:47] the process of wiring the back end, and it just needs a very specific unique identifier there. If you don't know what I'm talking about, make sure to follow my mega series here where I show you how to build out an entire application completely through human language. What does that mean, Corbin? You remember the term vibe coding? Yeah, that thing. So what I encourage sometimes when you do refractoring like this is that you're going to get little errors that could appear and typically you know it's going to go down this little rabbit hole. It's going to execute the plan but at some point while the server is running locally on your machine you might get thrown an error here. It might be like XYZ file is missing. Oh no, it's broken.
[09:19] Or you know you open up your little dev tool here and show this real quick. We go to our cancel and some errors show up here. All I want you to do is don't freak out. Don't be like man I messed up. I got to restart this whole plan. All you need to do y'all, and I hope it happens. I hope I get an error here so I can show you. And I might even force an air so I can show you, is just copy the error and paste it behind me in this little agent and then it will fix it. Okay. One important thing for you to note though is that while it's executing the plan, errors might randomly pop up and then go away. That's just because this thing is just moving through a bunch of files. Oh, it's happening right now. It's happening. Oh no, I don't care
[09:50] because it's still executing, right? It's still moving files around of There we go. Um, should I buy a lottery ticket? I can tell the future. There's the air. I don't care. That's the point. Let it execute. Let it do its entire flow. Don't freak out. One thing you need to understand about developing in this age and even when I was developing years ago is that when an air shows up like this, your first reaction it shouldn't be negative. It shouldn't be like this is a this is the worst thing that's ever happened. No, no. Your reaction should be emotionless. I don't care. And the reason you don't care is because we have this AI model that can
[10:20] literally solve anything now. You just have to know how to use it. Now, I'll admit though, if that air showed up and it was like 10 years ago and I was coding still back then, I would have been like, I got to deal with this air right now, like you get a sunken feeling in your stomach, but now with AI, it doesn't even matter. So, my generation completed, but as you can tell, my app's not working. So, what we can do here is, you know, I'll go to console log. Oh, look it, there's an error. And I would simply just copy this and then I'd paste it here and be like, "Hey, composer, you did a great job, but you broke my app." And it'll see that error. And what you'll typically notice if you actually read the error, surprising, right? it
[10:51] will reference a specific file where the error incurred. And then on top of that, if you want to get really, really nerdy, it will actually reference the specific line that the error incurred. This is good stuff for you to know. So, as you get more technical and you build out your app further and further, you'll be able to read the error itself and really understand what's incurring. You can vibe code apps. You can build a million- dollar app right now, guaranteed, through vibe coding. Vive coding is a real thing now, and you can build out real apps. But do take the time when little errors show up to just read it a little bit. I don't even care if you don't understand it. Just read it. And then slowly over time, your knowledge is
[11:22] going to compound where you're going to be able to do things within software development that you thought you would have never been able to do. And it is truly one of the most rewarding experiences. It's done. It's refractored it. What you notice is that now we've broken down that 100 or 800 line file. If I click it right here, it says minus 659. That's all that code's gone. Look at this. It's all gone. I hit keep all. I scroll down and it got me down to 459 lines. Now, was that the original amount we were shooting for? Absolutely not. It was 100. But if I wanted to refactor even further, I could. Don't overkill
[11:52] it, though. I mean, part of the reason I'm in the for vid branch is cuz I'm going to delete this branch. This is purely just to show you how to do it. That just about does today's video, y'all. I know a lot of y'all watching this right now and you're like, Corbin, put out that episode 5 of that long series. It's coming, y'all. It takes time, okay? So, make sure you leave a like. It's completely free. And if you don't even know what series I'm referencing, then you're absolutely missing one of the most valuable series ever created on the internet. And I'll see you in the next. Did Corbin just show me a prompt that was able to find a file that was over 6,000 lines in my project? And I'm like, whoa, whoa, that is actually way too many lines type of video. This guy doesn't know what he's talking about cuz he doesn't know how to
[12:23] say it.