Auto-generated transcript So a couple weeks ago, I started doing jump rope every single day to improve my cardio and my fitness and everything. And I couldn't find a good way to track my performance. I'm a geek, I like to track my performance. I like to see whether I'm improving every single day or not. And I could have built some sort of a spreadsheet and tracked it over there, but I decided I would put my programming knowledge to good use and I would build an app to track my jump rope performance. and that's exactly what i did the only difference is that i wasn't the one who wrote this app it was ai i just opened up google anti-gravity and i just gave it prompt after prompt after prompt after prompt and it just built an entire functioning application for me now obviously building this application requires me to have knowledge of software development so i can guide the ai properly right because otherwise if i was if i was vibe coding this application and i know what the title is that's just clickbait don't fall for it if i was actually wipe coding this application i wouldn't even look at the code right i would just let the model run which is dumb obviously but that's what that's what the definition of white coding is what i actually did is i obviously used ai to write all the code but i made sure to review it and guide the ai properly and that's what this video is going to be it's going to teach you how to write code with ai but also guide it so that it's writing good, clean, fast-performing, secure code and not just sloppy, wipe-coated trash, basically, right? I'll put some recording of me using this app on my phone or something so that you guys can see what it looks like and how it works. But let me just make something absolutely clear over here before we go any further. I did not write a single line of code. And I wish I could type as fast as I can speak, but I did not write a single line of code for this application. Everything was written by AI. All of it. Every single line of code. This is like more than 7,000 lines of code and all of it was generated by AI. So let's talk about how to build a production-grade application like the one I just built using AI to write all of the code. This video is both for the vibe coders who don't know how coding works and they want to learn it and also for the software developers who have not yet embraced AI and all the good that it brings. I'm going to teach both of you people to use AI to write applications much faster and much better than what you were previously building. So the very first thing I need you guys to understand is that you need to always start by planning your project. There's just no way to skip this part, guys. You need to always plan your project first. Now, what does this mean? It means you write some sort of a document or markdown file or something that has all of the features, the functionality, the other product requirements that this app is going to have, right? You write some sort of a document that has all of these details. And I did the same thing down here. I wrote two things, basically. First of all, I wrote this entire document which is the entire plan for this application. It has all of the features, the functionality, the screens, the pages that I would have in this app and so on and so forth. It is a long document, almost 600 lines and it has everything I had to build in this application. Now you can use AI to write this document and I did use AI to write this document but you need to make sure you go through all of the different questions and edge cases that may arise. And before we go any further, I also wrote a style guide over here, which basically notes down all of the styling rules for this application, the primary colors, the accent colors, and so on and so forth, the typography, what font you want to use, the type scale, the other, you know, properties that go into a good design system. Guys, one of the things that people complain about AI code is that AI is not good at front-end code. And that's obvious because AI is primarily text-based. It is really easy to write AI code that is text-based. That's why it performs so much better in backend code than frontend code. But the way to fix that is to use some sort of a style guide like the one I just wrote over here to teach the AI in text how to design good frontend UIs. What I do is I've already written this style guide, right? Again, with the help of AI. But by having this detailed style guide I can just go over to my little agent over here I can tell it to design whatever component I want over here, right? Whatever whatever it is right some sort of a card component or some button or something Whatever it is and i can just say follow the style guide over here that all i need to do and then it will just follow all the rules in this style guide and make sure that it designs a component that looks like my app right it's not some vibe coded slop it's using my design system my colors my fonts and it looks like it's actually meant to be a part of my application right that's how you use AI effectively, especially on the front end. But yeah, make sure to write a long detailed plan like this. Make sure to write a style guide like this one. And you can use AI to do this for you. Just go over to your favorite AI chat app. I recommend Claude, but you can use whatever you want, obviously, as long as it's not Chat Jeopardy, because that thing is trash. And just explain your application to the AI, right? Ask it to ask you clarifying questions, right? Ask it to ask you clarifying questions. Why can't I type and speak at the same time? Also ask it to come up with edge cases that you have not thought of, but you need to consider potential security concerns that may arise and how to implement the major features in your app with high performance, ideally, because you don't want a slow application. You want something that performs fast, right? And once you've went back and forth with the AI asking it answering its questions and asking it to come up with new questions and so on and so forth you're going to finally ask the AI to generate some sort of a summary of this entire discussion and then that summary will be your technical product requirements or plan or whatever you want to call it you're going to save that in a markdown file in your project like what I did over here and then you're going to use this in your project to guide the entire application design process, right? And when I say design, I also mean the coding part, all right? So that's the first step. You need to always plan your project. You need to have all of these things written down somewhere so that you can reference them with AI later when you're actually building the application. The second thing you need to make sure that you get right, you do not one-shot your applications, all right? You always build one feature at a time. You build feature by feature, all right? That means no one-shotting applications. As tempting as that might feel every now and then, you do not one-shot applications. Because let's be honest, if you're one-shotting an application, it is such a simple app that nobody's even gonna use it, including you. You're not even gonna use it. One-shotting apps is literally just for Twitter people to get an audience, all right? To make their post go viral. It is not something that real developers are going to be doing. What you need to do is build your application feature by feature and again that is why you go back to step one and plan your project plan your features and functionality and write a detailed plan for them start building your app feature by feature describe the feature to ai use this plan document that you've built over here and have the ai come up with some sort of an implementation plan now i use google anti-gravity for my agentic coding and they already have this feature right so i can just go over here select the planning mode and and it's going to write a detailed implementation plan of whatever feature I describe to it, right? And I'm sure Cursor and all the other vibe coding apps have similar features. So make sure you're using them. Describe your feature, let the AI write an implementation plan and then review that implementation plan, all right? You don't just let the vibes take you, you read the implementation plan and see if the AI is on the right path, right? And if you need to change something in the implementation plan, then you do that. Now, I found that as long as you get the implementation plan correct, the AI is able to write some really amazing code for you. Obviously, make sure to review the code that the AI generates. But really, as long as you get the implementation plan right, you can basically just let the AI code. And it will, in most cases, write some amazing code as long as the implementation plan is right. That is why I stress this so much, guys. You need to read and review the implementation plan that the AI generates for your features. And you need to get that part right before you let the AI jump into the coding. You do not just go straight into the code. You plan first. And there are plenty of cases where you need to do your own research. So make sure you do that. A couple examples. When I ask an AI to build a very complicated multi-step feature, I'm going to first discuss that feature with the AI and have it recommend the best options to me for implementing that feature. It's going to give me a bunch of different options and I'm going to review each and every one of them and decide myself Which one is best for my application right which approach is best for my application and this is where experience comes in You need to have some experience as a software developer So you can pick the right option for your application Because AI as good as it is it not always going to be good at making decisions That part is still your job as a human Another quick example of this when I was building this application, there were plenty of cases where I needed to go install some third-party packages to implement some functionality, right? For instance, charts, right? I have a bunch of charts in this application that display my performance in my workouts and everything right over time these charts are there to show my workout performance over some period of time and i had to install a bunch of third-party packages to build these charts right and i asked ai it gave me like three or four options what i did was i went and researched each of these three or four packages and then read their docs a little bit and just understood how they handle things right and then and only then did i tell the ai hey pick this option implement this charting functionality with this package so you need to be able to do your own research over here as you're building features especially complicated features that require new dependencies and stuff because a lot of the times ai is going to because they have a knowledge cutoff date right all these ai models they don't have direct access to the internet their training data is cut off at some date and because of that a lot of the knowledge that they have becomes outdated right so ai is not going to recommend you the latest and the best option for building some sort of a feature it's going to recommend you something more outdated right and sometimes when you're dealing with fast changing fields it's going to recommend an old deprecated outdated package instead of the latest one so you need to be able to do your own research in situations like this And a little sub point over here, similar to doing your own research, learn to use the AI with up-to-date docs. So let me explain what this is. Basically, I had a little problem in my application over here where the AI would use the... I had a little issue in my code over here where the AI was using the old deprecated file system API of Expo to update my user image, right? My profile picture. right here on this page. If you've used Expo file system before, you know that the latest and greatest way to work with files is the file object and the paths object and the directory object over here. I can show you this on the docs as well over here. You can see if you go directly to the Expo docs, they're using the same objects over here, right? That's the latest way to handle files in Expo. But there's also a legacy deprecated file system API down here. And this is what AI was using when I was trying to implement this profile picture change feature, right? And I tried going back and forth with it, but it just wouldn't fix it, right? Why? Because AI is trained on this old deprecated data. And so the way I fixed this is if you go up here to the expo docs, you have a little button over here to copy the page. You can copy it in Markdown or you can open it in ChatGPT or Cloud. I just copied it in Markdown, went into my editor, opened up my agent, told it to implement this feature and then I just pasted all of the docs in here right I literally just pasted all of these docs described my feature and then it was able to use the right APIs the right code to implement this feature so AI has a knowledge cutoff date and you need to make sure that you can feed the up-to-date docs to AI now in Expo you can basically copy the page and mark down directly from this button over here that's really convenient but a lot of documentation out there doesn't have this feature so you need to just copy the entire thing and just paste it in but the main thing is learn to use the ai with up-to-date docs a lot of times the ai is using outdated docs and if there's a new feature you want to use in a library or a framework you need to be able to feed the docs to the ai and this video is starting to get really long so i'm going to wrap it up but one last thing i'll say over here is learn to use git and search source control i cannot tell you how important this is, especially in the age of coding. I cannot describe it well enough. I would not be doing it justice. Git and source control is extremely important, especially when you're using AI to write all of the code. The way to use Git, the best way, in my opinion, is to create a new branch for every single feature you're implementing, all right? Create a new branch for it, commit often. Every time you have some working code, you build some new stuff, commit it to the source control. And then once you've written an entire feature, you've tested it out, you've wrote the tests, you've cleaned the code, all of that's done. And this new feature is ready to be shipped to production merge into the main branch This way you never going to be in a situation where you have some broken code in your AI application and you have no way of fixing it right This is a super simple Git workflow All you do is create a new branch for each feature You start using AI to build that feature. You commit often every time you have some working code. And when you're done, you merge into the main branch and then you start working on the next feature, right? You just repeat this process. Make sure you're using Git when you're building applications especially with ai i have a lot of other thoughts to share on ai coding as well but since this video is starting to get really long i'm gonna stop over there i'm gonna make a new video about how to use ai to write code better and it's going to include a bunch of other tips as well so make sure you stay tuned for that but in closing but before we end this video i just wanna i just wanna talk about one last thing could i have built this application if i didn't have software engineering experience. In other words, can vibe coders build this app too? And that's a good question. And I don't think they can, at least not right now. And at least not without a ton of frustration and going back and forth with the agent saying, please fix this, please fix this again and again, right? That's their prompts. Basically, I don't think vibe coders can build this app as fast as I have. And at least definitely not without a ton of frustration, because I was able to build this app only because I knew exactly which frameworks and which packages to use, what kind of code to write. I know what good code looks like. I know what security vulnerabilities I need to handle. I know how to write fast performing code. I know which kind of algorithms and approaches to solve different problems are good and bad. I can differentiate between those things and that is why I was able to build this application so much faster. That is also why my prompts are so much more detailed and better than these wipe coders out there who don't know how to prompt because they don't know how software works and this just comes back to the general consensus of ai tools which is ai is not going to replace software developers it's going to augment them it's going to improve them it's going to make one senior developer worth a hundred of them because one good developer can accomplish what 10 other developers had to do in the past that's what AI is going to do and that is also why you as if you're a vibe coder or if you're some sort of a junior developer you need to make sure you learn the fundamentals not so that you can write with them I'm not asking you to learn the code just so you can write code yourself I'm asking you to learn the code so that you know how to write good prompts for the AI so that you know how to guide the AI to write good code for you all right anyway that was my experience building this application. It was really fun and it basically just sold me on AI coding as an idea. From here on out, AI is writing the majority of code in all of my projects and I'm just the one who's guiding it. That's all for this video. Thank you for watching. Like, comment, subscribe, all those wonderful things. Thank you for watching guys. And as always, before you guys leave, quick self-promotion plug from me. I'm a freelance developer. I build mobile apps and web apps for people. And if you know somebody who's interested in this or if you yourself are interested in this and you want to work with me to build something cool, top link in the description, guys. Book a call with me. Let's talk. Let's get this done. Other than that, thank you so much for watching as always, and I will see you in the next video. so Thank you. you