Vibe Coding Fundamentals In 33 minutes | Tina Huang

0:00I learned how to vibe code for you. So here's the Clifnotes version to save you the hundreds, actually probably at this point, thousands of hours I have spent watching YouTube tutorials, taking courses, but honestly mostly just like trial and error as I'm developing my own applications through vibe coding. Vibocating is seriously a game changer and has fundamentally changed the way that I code and develop apps, which is why in this video, I'm going to be focusing on the fundamentals, the frameworks and the principles of good vibe coding. That also teaches you how to apply these principles of vibe coding with any tool. As per usual, it is not enough just to listen to me talk about stuff. So throughout this video, there'll be little assessments, and if you can answer these questions, then congratulations, you would be educated on vibe coding fundamentals. Now without further ado, let's get going. A portion of this video is sponsored by Brilliant. Alright, here's the outline of today's video. First, I'm going to define vibe coding, then we're going to be talking about the principles of good vibe coding. I'll then show you some examples of vibe coding in action, using Replet, WindSurf, then finally I'll end with some very

1:01practical tips to help you along your vibe coding journey, and to make sure that you don't end up as one of these people from X and Reddit who really fucked up. I do not want that for you, so please pay attention until the end. Let's now define vibe coding. I'm sure many of you have heard of term vibe coding a lot of times by now, and this is a term that was coined by Andrea Coparthi, who among many of his achievements is one of the founding members of OpenAI. On February 3rd, 2025, he made a post on X that says, there's a new kind of coding I call vibe coding, where you fully give into the vibes, embrace exponentials, and forget that the code even exists. It's possible because the LMS, for example, cursor composer with Sonnet, are getting too good. You basically just tell the LM what it is that you want to build, and it would just go ahead and build it for you, and some people literally just speak to it, like talk to it. Also, I just talk to composer with super whispers I barely even touch the keyboard. For example, you can just prompt it with something like create a simple React web app called daily vibes. Users can select mood from a list of emojis, optionally write a short note and submit it. Below show a list of past mood entries with the date

2:03and the note, and yeah, that's it. Give it to the LM and it generates the code for you, and voila, that's what you get. Seems very, very simple, crazy, right? You can see how it fundamentally changes the way that you code and and and build things. But without being sent though, it's not like black magic and vibe coding will magically just work for everything. There are still principles and order in this chaos, in how it is, you ask it to build these things. So, without further ado, let's actually cover these principles. The best course that I found that covers the principles, the fundamentals of vibe coding is a course called vibe coding 101 with Replet. It's a nice little free course that's created by Replet, which is a platform for vibe coding apps in collaboration with deep learning AI. The course explains that there are five fundamental skills in vibe coding, which are thinking frameworks, checkpoints, debugging, and context. You need to thoroughly think through exactly what it is that you want to build and then communicate that with the AI. What we mean by think thoroughly is actually four different levels of thinking. Say, for example, you want to program a computer to play competitive chess. The first two levels of thinking are probably really obvious,

3:04and it's just like very intuitive to you. Logical thinking is just what is the game, and in this case, the game is chess. The next level and a little goal thinking is asking a question, how do I play this game? What is the main objective the goal of the game? Now, the third level is computational thinking. You need to figure out how to fit the logic of this game into a complicated set of problems and configurations on the chess board. You also need to think about how do you enforce these rules? And finally, at the top level of thinking is procedural thinking. This is when you ask the question, how do I excel in this game? Not only do you want to play this game, you want to play it well. So you need to think about what are some strategies that you can use? What are the boundaries that you can push so that you're able to program your computer to be able to do well at the game? Then, of course, you need to translate this natural language that we described and communicate that to the AI to build. Now, for whatever it is that you're trying to build a game or web app, whatever, you also need to go through these four levels of thinking to truly properly define what it is that you want to build. Honestly, this is where most of our coders have the most opportunity for improvement. Because oftentimes, because you're using natural language, it's to describe what you want to do.

4:06You don't really actually think through what it is that you want to build, what it is that you want your final product to look like. And that's actually kind of unfair because if you don't even think through exactly what it is that you want, how do you expect the AI to be able to figure out what it is that you want to build? And actually, the best way to make sure that you go through each of these levels of thinking and communicate it clearly to the AI is to create something called a PRD, which is a product requirements document. This is an actual PRD that we define with one of our clients. It is an AI powered personalized nutrition plan for diabetes level one of thinking, which is logical thinking defining what it is that we want to build. So this is as part of the project overview. We wrote that the goal of this project is to develop an AI powered system that creates personalized nutrition plans for individuals with diabetes. The system will take into account various health related factors such as medical analyses, weight dietary habits, calorie consumption, and more. The next level of thinking, the analytical thinking, is encompassed by the skills section. So this is where you list out what it is that you need in order to build the thing that you want to build. In this case, we wrote Python, healthcare, data processing, open AI's API, image processing for

5:10visual plans, and UI development. You can also go into more detail about this if you want. If you're very, if you're more particular about which specific packages you want to use, which kind of front-end, which kind of back-end that you want to use. But this is good enough to start. For computational thinking, I like to express this by having a key features section in the PRD. This is where we can clearly define and have a plan based upon what we want to show up in the application. Here we have a divide into mouse number one and mouse number two. The first one is a generalized personalized nutrition plan engine that includes specific metrics like individual health metrics and socio-economic factors. The level two is where we want to give more contextual customization, specifically considering people's literacy and education levels and making the application adaptable and more accessible to different types of people. For example, people with lower literacy. Now, for procedural thinking, the highest level of thinking thinking about how do we make this application the best that it can be. This is exemplified throughout the PRD just by adding as much detail as possible.

6:11For example, defining exactly which factors are individual health metrics like medical analysis and dietary intake data and socio-economic factors such as income location and local food availability as well as what types of contextual customization. The best way to think about it is the more detail you can go into thinking about your target audience who you want to be using your application and that experience that they should get and all the factors that go into it to make it the best experience possible. The clearer your vision is and the clearer the PRD is and the better results you would get from the AI. Also, just by the way, you don't need to come up with this PRD all by yourself. I'm actually going to put like a prompt on screen right now for you to take a screenshot of this. This prompt will work with you and ask you the right questions for you to be able to come up with a well-defined PRD to build your app. I highly recommend that you spend a significant amount of time at the section. It is always so much easier to have a clearer vision of what you want as opposed to build something, figure out that as not exactly what you want and then try to fix it halfway. The next principle of vibe coding is to know your frameworks. Whatever it is that you

7:12want to build. Chances are somebody has already built something like Kate or something very very similar to what it is that you're trying to accomplish. And since AI is trained on all the pre-existing solutions that are already available, if you're able to direct the AI towards the correct framework for building what you want to build, you're going to have much better results than asking you to just try its best to come up with something from scratch. And the easiest way to do this in vibe coding is just to list out the frameworks or the packages that you want the AI to use to implement a solution that you want. You're kind of just like pointing it in the right direction. For example, for your web app, you can specify that you wanted to use a React backend and a CSS and HTML JavaScript front end and specifically maybe tell when CSS is already styling for this specific type of application. Or say that you want to be creating animations. You can specifically say please use 3.js, which is a very popular package for creating animations. Okay, so the question you might be thinking right now is like Tina, but what if I don't know what is the best way of implementing this thing? No problem. You can actually ask AI to help you figure it out first. For example, if you

8:15want to implement a drag and drop UI, which is a very common thing to implement, you could say, could you help me come up with some React frameworks to implement drag and drop into this application and then implement it? What is actually the key thing here is to be open to learning about these different frameworks and how all of these components fit together. With vibe coding, it's not necessary for you to exactly know how to implement each of these things yourself, but it's still really important to have an understanding of the structure of what it is that you're trying to build. Like if you're making a web application at the very minimum, you should be aware of what a front end is, what a backend is, how the friend and back can communicate with each other, and what are certain frameworks that are very popular or commonly used for different and the backend. Think about it as building and developing and learning with the AI at the same time. This will make you a much better vibe coder in the long run. The next principle of vibe coding is to always have a checkpoints and version control. Things will break. That is a fact. You do not want to end up like this guy, for example, who lost all of his work because he did not know about version control. It is a cautionary tale. He posted on x. Today was the worst day ever. The project I had been working

9:19on for the last two weeks got corrupted and everything was lost. Just like that, my sass was gone. Two weeks of hard work completely ruined. But I mean, he is trying to stay positive here. He started from scratch, but Boba Blondt is going to rebuild everything from cursor. At least he's remaining positive. But anyways, the point being that please always have version control. There are some software like Replay, for example, that has pretty decent version control that's already built in, but for the majority of software and it's just like generally best practice, is to learn how to use Git and GitHub. Which I'm actually going to give you a crash course on right now. If you already know how to use Git and GitHub, consider this a quick low refresh. So first of all, Git is the version control software itself. While GitHub is a website that allows you to store your code to repositories on the cloud so that you're able to have it save somewhere else and also so that you can share it with other people. So first thing you didn't install Git and you can do this by either downloading it from the website or you can go through your terminal slash command line or honestly you can just ask your AI code editor software where that be like Replay cursor, or when serve whatever and just directly say like please download Git for me. Now, assuming that you want to start a new project from scratch and

10:23you're in that current folder, the command that you wanted to use is Git init, which is initializing Git. Now let's say you start adding some things you might want to add a read me where you know, you just start like vibe coding and now you have a bunch of files that are there. And if you use those command Git status, it will show that you have a lot of files that are on track. So in order to track these files, you use the command git add. You can do git add like readme.md or whatever files that you want to start tracking or you can just do git add with a dot. The dot means just track everything. But you're not done with just adding these files and tracking these files. When you actually want to save a certain version of it, you use the command git commit. This is where you would explicitly commit the changes that you made to the files and you can also type a message that explains what you changed in the code base or otherwise known as the repository. For example, your first commit could be git commit.m with initial commit as the comment. And that's it. Actually, if you just do this, you would be tracking your changes, saving your changes by committing it and you just keep on doing that. And if you ever want to look at the changes that you made, you can use a command called git log. And if you want to roll back a commit,

11:25then it's git reset. Okay, so after you made a bunch of changes, did all your things and maybe you want to share your code now on git hub. You can go to git hub.com, create a new repository and initiate it, copy the remote URL, then use the command git remote at origin and then the URL. This will link your local repo that's being saved on your computer to get help. Then you might want to rename your branch, which is the current repository version that you're working with and all it means. So you can do git branch, m main, then finally, you can push everything from your local repository onto git hub with the command git push dash u origin and main. There are obviously like a lot of other little nuances and commands and like things like that, specifics that you can go into a lot more detail about. But just knowing what I explained to you that entire workflow, that should be enough for you to have a good understanding of what version control is supposed to look like and what the flow is supposed to look like. And even though I did cover the exact commands that you should be inputting using an AI code editor, you actually don't need to know these exact commands. Like as long as you know what that structure is, you can just directly ask the AI

12:25using natural language. Like you can just say, um, use git to commit these changes, push it to git hub on this branch, roll back to previous version, merge everything together. I hope that makes sense. Overall, I hope you can also see that the key to vibe coding is to understand these like high level structures, these high level components and the flows of things so that you're able to direct the AI in the implementation. Implementation is where AI excels at. The next important skill of vibe coding is debugging. Whatever it is that your building is going to go wrong, it's just the matter of when it's going to go wrong and how it's going to go wrong, which is why debugging and fixing the thing is just as important as the actual building itself. This is a skill that is drilled into engineers with many, many years of training. But for many vibe coders, though, especially those who don't have an engineering or coding background, debugging might be something that they don't actually have a lot of experience in and is very important to learn this skill. The best type of debugging is very methodical and thorough. First, you need to identify where the problem is and what the problem is. Then you need to apply different solutions to try to fix the problem. Sounds super simple, right? But do not underestimate the

13:28art of debugging. In the case of vibe coding, when you realize that something doesn't work, I actually find that the best way is to just point it out to the AI and then let the AI come up with the solutions to fix it itself. For example, I recently did this live stream where I was building this application and then it kept on coming up with an error. I basically just copy-pasted the error message and went like, there is an error. And the AI responded with like, oh, let me try to fix it. And then it comes up with like different solutions to try to fix the problem. And really all you have to do oftentimes is just to accept the changes. And if it still doesn't work, it might just go through like a lot of cycles of this. Just gotta be patient and just, you know, keep pointing it out, letting it do its thing. And oftentimes it resolves itself. But in the off chance that it doesn't resolve itself easily, it is really, really helpful to have a basic understanding of what you're building. Like, for example, I kept on getting the same error over and over again. But since I understand file structures and how the files are working with each other, I was able to point out which file was probably causing the problem and which section was probably causing the problem. And the AI was able to go and fix it. Another example was when I got this overlapping UI

14:30component, which I didn't like. I was like, this thing is overlapping. I sent it to the AI and then it like made some weird changes and the whole thing just disappeared. And then I was very patient and was more specific about exactly what it is that I wanted. I'm looking at the code. I could tell that it was just statically trying to input like a certain dimension so that depending on the orientation of the website, sometimes it would overlap and sometimes it wouldn't. And then I just pointed out that I needed to be dynamic so that it's not overlapping at any point. And then fortunately, it was then able to fix it. And finally, the last principle of vibe coding is to provide context. The general rule of thumb is that the more context, as in the more information and detail that you can provide to your AI, to your LM, the better the results are going to be. And context can come in a lot of different forms. It could be that the original prompt or the PRID that your inputting has a lot of details in it. You can even provide it with like mockups of what exactly you wanted to look like or you can be providing it with examples where extra data that can help it build the application details about your app, your environment, your preferences, as well as errors. Instead of

15:32just saying this thing doesn't work, you can actually copy paste the full error message and a screenshot of what exactly doesn't work and provide that to the AI. Okay, so here's a little in the mona that I can help you potentially remember these principles of vibe coding better. The friendly cat dances constantly, thinking frameworks, checkpoints, debugging, and context. Which immediately comes in handy for you now because here's also your little assessment, which I'm going to put on screen right now. Please answer these questions and put them in the comments. To make sure that you're following along with the things I am talking about. I'm now going to show you some examples of vibe coding starting with Replit. Replit is a platform where you can use AI to vibe code different applications and deploy them really, really quickly all on the cloud. It is super beginner friendly. All you have to do is log on to Replit and they have some free credits that you can get started with. Let's start off with the PRID for a very simple app that displays SEO Metatax for any website that is inputted. Okay, so to get started, the first thing I'm going to do is actually use ChatGPT to help me really think about what I want this application to

16:35look like and generate a PRID for it. And I'm going to use this prompt over here, which is a variation of the prompt that I showed you guys earlier. And I also link an example PRID for ChatGPT. So it just says how me to make a PRID for an MVP app. I'm looking to vibe code. So an interactive app that displays the SEO Metatax for any website in an interactive visual way to check that they're properly implemented. The app should fetch the HTML for a site, then provide feedback and SEO tags in accordance with best practices for SEO optimization. The app should give Google and social media previews and then thinking through these questions, what is this app? How do I use the app? What are the patterns behind the app and how do I make the app the most useful for the target audience and including a PRID example here? And it helps us generate this. So SEO tag visual inspector MVP PRID project overview and it shows all of the key features that are here. So input, you are field HTML fetching and parsing, SEO tag extraction and visual feedback previews. And there's also a nice to have a section. All of this looks pretty good. I do want to have a key feature of actually

17:39displaying the total score out of 100. I also do want to get rid of these nice to have to over here because it's always best to start off with the very, very key features and then add on to that. So I'm going to ask you to refine it with for key features. Could you include a total score out of 100? Also remove nice to have. Great. So visual feedback is over here. Awesome. So this looks pretty good to me. So I'm going to write is could you make this into a prompt to build an app using replete? So that's what we're going to use. Great. Wonderful. And on top of this, I'm going to say generate a image mockup or inspo. I'm going to download this. Here is a replete. And what I'm going to do is just copy paste the prompt and chat to be T and also link the inspo. And click start building. All right. It's going to be called SEO text out. And it's asking me if I

18:41want these like additional things that are here. And I'm just going to say no because we can add these additional features later. So we can improve and get started. As is generated, you can see that is really designing the visuals. And it's also populating the files over here as well. So for replete, it already does have pretty good version control. You can roll back pretty easily here. Although for best practices, you still really do want to be using Git at some point. While it's finishing up building everything over here, what I really recommend that you do is you can go over here and actually add an assistant and use the assistant. Ask could you explain to me the file structure in this project? You don't have to do this, but it's one of those things where if you're learning about the frameworks that are being used while you're vibe coding, this is going to significantly improve your skills as a vibe code because you're going to be able to understand what's actually happening and how the files are going to be interact with each other. We can see over here that on the client side, under client, you have the main React application code in the source, the client source. And you can see where the UI components are as well. And on the server side,

19:44it tells you where the main service entry points are like index.ts. And here's the code for that. And then roots and things like that as well. Just understanding the files over here and how they're interacting with each other to produce this completed app is already going to give you a huge leg up. And if you really want to dig into like some of the actual code, you can always right click over here and then you can say like explain with assistant, for example. This is very, very optional, but it is a really, really great way for you to learn what the code is actually doing if you're interested. Alright, it looks like our app is now finished. It's actually tested out. So let's try www.lonelyoctopus.com. Check. Oh, that didn't work. So what I'm going to do is there is an Err, like a true vibe coder. We're going to hope that it fixes itself. Okay, let's try to have something out again. Lonelyoctopus.com. And cool. It seems to be showing something. The title is shorter than recommended, meta description, blah, blah, blah, all of these things. And we can

20:46you should see that the here's the Google preview. Here is the social media preview, Twitter card previews, and raw data tags. Okay. I just want to make sure that the like number actually changes depending on the website. So let's try something else like the website called the useless website.com. Okay, so it's also still showing 86. How about this other website? Okay. Alright, so the number is changing depending on what it is. So like this is not visually appealing. Make it colorful. Yeah, make it colorful. I also don't like how the raw data tags are here, but it's not specifically specifying like what the title is shorter than recommended. Like was that actual title? I want that to be showcased. And I'm going to do that in the next round of edits here. Another key thing to remember is that it's best to when you're pointing something out, like something that you want to be changed, doing it one at a time as opposed to like a laundry list of things that you want to change because that could potentially confuse the AI. Oh cool. I guess it did that already without me saying anything. Oh, it's like showing little icons. So that's nice. Let's try this again. Lonelyoctopus.com.

21:53Okay, I like that. This is much, much better. Another thing that you can do over here is that you can actually click here and then there is a dev URL that you can directly look at from other devices as well. So all you have to do is scan the QR code. So you can actually see what it's like on other devices too. So if I were to type lonelyoctopus.com, you can see what that experience looks like on mobile as well. So this is an example of what it would look like to be web coding using Replet. And once you're done, you can take this and deploy it when you want to. But if you do want to create something that is more complex and that's also more scalable, you will at some point want to migrate to a AI code editor, something like Windsor for cursor. So I'm actually just going to show you what that is like using Windsor for example. First of all, regardless of which of these tools that you're using, the principles that we just talked about for vibe coding, like the skills that it's self is pretty much the same. So don't worry about that. It's more the fact that after you get through the beginner stages, most people want to switch over to AI coding editor like cursor and Windsor because it's more robust, has more functionalities and also

22:56allows for greater scalability. Of course, with these types of things, there's always a tradeoff, like with Replet, it is a lot faster, really easy to use. Everything is based on the cloud. So you don't really have to deal with setting up your environment and deployment process. While for cursor and Windsor, there are a lot more functionalities that are available. These code editors are built for full-scale development. So you're pretty much able to do any type of development and be able to tweak things and fine tune things to the exact way that you want it to look. Of course, the downside is that there is a higher learning curve. You need to learn how to set up your environments, properly, how to debug issues with your environment. A lot of issues come because of not setting up your environment correctly. You also need to learn how to deploy things, how to monitor things over time. So this is the Windsor from environment and over here is Cascade where you can type in what you want the app to build. In this case, we're using Cloud 3.7 on it as the model. So I'm actually going to put in the exact same prompt and then also the image as well. On Windsor, this is going to be a local development environment. So it's going to start off by setting up a bunch of

23:57things locally. You can see that the files are populating themselves over here as well. All right. So this is running a terminal command. Then we can accept this. You can disable and the asking and you can just let it auto run. But I have trusted shoes because it's on my local environment instead of like replay words in it's like own isolated thing on the web. So I do like want to make sure that I am accepting things and not doing random things to my local environment. So I'm just going to click a sub to all of these. You can see that it also takes a little bit longer because it's setting up all these environments and selling all these packages and stuff. All things that don't need to be done if you're using replete. Okay. Cool. It looks like it has something done. It says feel free to try it on the browser preview. I've opened for you. Open the browser preview. I don't see a deep browser preview. Could you open it for me? Okay. Open preview. Cool. We see that it has some of these very smaller elements here.

24:59www.lonelyoctopus.com for example. Check. Oops. Need to add an HTTPS. Okay. This actually looks way better than replets first version I gotta say. It actually looks really really similar to the inspo that we provided it. Like here's the inspo that we provided and here's the actual thing. It looks really similar, right? It looks pretty good. So SEO tag analysis. Yeah. This looks pretty good to me. Let's try something else. Maze.toys.sash. Maze.sash.mini.sash.dali. It's just like a random website. Okay. SEO tag is 25. So the numbers are actually different between replet and when starts as interesting. Something I probably want to dig into asking like how it's calculating these SEO tags. But overall it looks like it's working pretty well and I quite like this. So I'm gonna ask it to change though to improve on this a little bit. I'm gonna say I did a screenshot here and be like

26:01make it so that you don't need to type HTTPS before the URL. Also copy paste is not enabled. So I'm gonna preview again. So try this again. www.lonelyoctopus.com. We also do need to center this and it still doesn't work. So I'm just gonna write. Still doesn't. Let's try again. Lonelyoctopus.com. Okay. Cool. So that works now. Obviously there's like other things that we want to fiddle around with a little bit like things that are not centered. I want to change these colors a little bit. But I hope this leaves you a good idea for how it is that you can start building using Windsurf as the experience. And so in this case you also definitely just do want to start using Git and GitHub Hub as well. So what you can do is be like initiate Git for version control and just type that in. Accepting everything here and then Git is gonna be initialized. Everything here turned green which means that it's untracked. It asks you want to get add everything. We can accept, get add everything. And it's asking us if we want to commit as well as our initial

27:05commit. So we can accept we can get commit too. So great. Now everything is being tracked as version control. And when you're ready you can also get push and you can actually see everything now on GitHub. But regardless of what you use remember the principles that we went through for vibe coding do keep those in mind and apply them regardless of what kind of tools that you're using. I'm gonna put on screen now a little quiz. So please type the answers in the comment section. And now let's go on to our final section where I'm gonna give you some more tips and tricks and frameworks and mindsets that will help you along your vibe coding journey. The first one is very much a mindset. If you're already an engineer you know you probably already think this way but if you're someone who maybe doesn't come from more of a technical background always think about starting small and working your way up. In other words whatever it is that you're creating always think about it as the minimal viable product which is what are the minimum amount of features that you can put into your application for a two function. After you get the thing to actually work then you can iterate and put on like additional features and functionalities on top of that. This is the correct vibe coding mindset as opposed to you coming up with like the most lavish you know thing

28:07with all the details I can possibly think of in like a million different features. No no no I can already think of all the errors and issues that you're gonna get from that and then just you like ripping out your hair because you can't figure out what's going wrong. Always start with the minimal viable product and then iterate on top of it. Get the thing to work first. Next up is a framework that's also from the vibe coding 101 course which I think is really really helpful. It shows that when you're developing or building an app when you're vibe coding there's really only two modes that you're in. You're either implementing a new feature or you're debugging errors. When you're implementing a new feature what you want to remember is to provide context relevant to new features, mention frameworks, provide documentations with explicit details etc and then making incremental changes and doing the checkpoints and and version control etc. And when you're in debugging errors mode what you want to keep in mind is firstly figuring out how things work. Do you have a good understanding at the structure of your project itself? If you don't you know ask AI and and actually figure that out because it's going to be very helpful to figure out what is actually going wrong in your application and when you figure out what's wrong think about how to get that information to the LM to get unstuck and this is where the final principle context is helpful. Just try to

29:11provide as much context and information as possible to guide your LM to fix to fix the problem. Give it like screenshots of what's wrong. Give it the error message pointed towards the right file to be looking at too. I really love this framework so take a screenshot or something and whatever you're getting frustrated we're not know where you're supposed to do just try to remember which mode that you're in and what you should be doing in which mode. Final tip that is a little bit more advanced and these are writing rules for documentation. This is kind of like a system prompt that you're giving to your coding agent and this is where you can list out like certain things that you wanted to do or to not do. For example some of the best practices that you probably want to put in your rules include limit code changes to the minimum when implementing a new feature we're fixing something. This is because AI sometimes has its tendency of like changing a lot of different files unnecessarily to fix like a very small thing and then it could potentially break other issues. Rate limit all API endpoints this is just to make sure that you're not like calling in API and incurring like multiple times and incurring a lot of cost. Enable capture on all

30:12all throughs and sign up pages so for security reasons and yet there are a lot of other rules that I can put into this file. You can also find online like people have written these rules that are specific to like certain types of apps or certain languages that you're using as well that you can put into your rule file as well. And you can take this rule file and give it to replete a work cursor or one surf tube. Especially if you're someone who doesn't come from an engineering background where like a development background I really recommend that you actually look into the rules that are specific for ensuring like safety and security in your apps like putting it in your at least like learn things about like API keys and the why it is that you shouldn't be exposing your API keys and while you're learning these also put your rules into your rules file so you're reminding your AI to be abiding by best security practices as well. So you don't get hacked. All right there is honestly like a lot more that I can go into detail about like for example like having styling documents that you can reference how you should be refactoring your code using something like MCP servers if you're building something like AI agents and you want to give your AI agents like more tools and functionalities. There's just like a lot which I don't have time to

31:14cover in this video right now but please do let me know in the comments if you want me to make a follow-up video where I will go more in detail about exactly how it is that you should be vibe coding and giving you more specific advanced examples for AI code editors like Windsorf or cursor as well. But for now we have come to the end of this video. I really hope this by putting fundamentals video is helpful for you to get started doing it correctly like vibe coding with best practices in mind. And as promised here's the final little assessment which do answer these questions and put in the comments to make sure that you retain the information that I just covered. If you're watching this video and interested in vibe coding chances are you're probably also interested in learning STEM subjects. So if you are interested in learning STEM subjects I highly recommend that you check out Brilliant, the sponsor of this portion of the video. Brilliant is a STEM learning platform that helps you get smarter every day with thousands of interactive lessons in math, science, programming, data analysis and AI. What I love about Brilliant is that it helps you build critical thinking skills and deep understanding of subjects instead of just memorizing things.

32:15Brilliant incorporates little quizzes, analogies and just little dopamine hits that really help a lot when you're getting bored or discouraged. It's shown to be six times more effective than just watching video content. They also have a great mobile app so you can actually dig into a quick little session and learn something new when you have a couple minutes instead of just mindless scrolling. Brilliant's programming courses are some of my favorite courses. They help you build a foundation of coding and teaches you how to think like an engineer, a skill that is still crucial in the age of AI and the age of vibe coding. Speaking of which, they also have great AI courses too. That can help you gain a deep understanding of how AI models work and their applications. Brilliant courses are super high quality and taught by award winning teams of teachers, researchers and professionals from Stanford, MIT, Caltech, Microsoft, Google and more. To try everything that Brilliant has to offer for free, you can visit Brilliant.org, stash, tina, Huang or just scan the QR code on screen. We can also just click the link in the description. If you use my link, you also get a 20% off the annual subscription. Thank you so much, Brilliant, for sponsoring this portion of the video. Now back to the video. Thank you so much for

33:16watching this video and happy vibe coding. I'll see you guys in the next video where live stream.