00:00:00So welcome to Vibe Coding 101. If you're someone who doesn't know how to code but still wants to
00:00:04bring an idea to life, maybe a portfolio website, a side project, or just something you've always
00:00:10wanted to build, this video is for you. By the end, you'll be able to build a real working platform
00:00:15without writing a single line of code. And if you are a developer, this video will also be helpful
00:00:21because sometimes you may just want something done quickly without over-engineering it. So in this
00:00:26video, I'll walk you through the complete process of Vibe Coding, the best practices at each step,
00:00:32and we'll build a real project together. For building our app, we will be using Abacus AI
00:00:37Deep Agent. This is my favorite platform for any AI-related task because with just one subscription,
00:00:43you can build apps, websites, presentations, and almost anything. I mostly use it for Vibe
00:00:50Coding because I have noticed it produces fewer errors and is very affordable compared to others
00:00:54that I have tried. I've included the link in the description, so make sure to check it out.
00:00:59So there are five steps to Vibe code an app properly. Most people already know these steps,
00:01:05but the problem is they don't know the best practices inside each step, which is why they
00:01:09get poor and inconsistent results from AI. So let's fix that. So the first step is the
00:01:14ideation phase. This is where you decide what you want to build. It can be your portfolio website or
00:01:19anything else. If you don't have an idea yet, you can also use AI to get idea suggestions. The one
00:01:25I'm using is Abacus Chat LLM, and it works really well for this. It automatically selects the best
00:01:31AI model based on the task, so you get better results without having to think about which
00:01:36model to use. Once you have an idea, the next thing you should do is write it down. Just open
00:01:42Google Docs or Word and describe your idea in plain language. What you're creating here is called a
00:01:47product requirement document. Don't let the name scare you. For Vibe coding, a PRD is just a one
00:01:53to two page document that explains what you want to build. This document will later become your initial
00:01:59prompt. I'm using a simple PRD template from this article. Thanks to the author, and also check out
00:02:05the article if you want to learn more about this. And if you want a Reddit to fill template, the
00:02:09download link is in the description. So let's quickly go through the sections. In the one
00:02:14sentence description part, just describe your app in one sentence. We are building an expense splitter
00:02:20website for this video. Our description can be something like this. The next section is for
00:02:25describing who this product is for and what problem it solves. After that, you will include a few main
00:02:31features of your application. And no need to be technical, just write what you want in plain
00:02:36language, and only mention the main features. The next section is for mentioning what not to build,
00:02:41so your project doesn't go out of scope. And if you are not sure, you can skip this for now.
00:02:47Next is the user flow section, which explains the main flow of the application. And this is also
00:02:52optional. And the last one is the success criteria section. Here you just mention the success criteria
00:02:58for your features. And this is optional too. And that's it. If this feels overwhelming,
00:03:03one shortcut you can use is just fill only the one sentence description,
00:03:07paste the template into chatllm, and ask it to complete the PRD for you. Once that's done,
00:03:13you're ready for step two. In this phase, you will choose a vibe coding platform and paste your PRD
00:03:19as the initial prompt. So it is very important to choose a good coding platform because obviously,
00:03:25if you want great results, you will need to use a great platform. So I will be using Abacus AI
00:03:30Deep Agent. All you need to do is copy your PRD and paste it into the prompt box. If you want your app
00:03:36in a certain design, you can upload the design file and ask it to use it as a reference. But remember
00:03:41that you cannot directly upload Figma file. The next way is you can just describe your design in
00:03:47plain language. Now hit send and wait. After you send the request, the agent may ask some follow-up
00:03:53questions. It's mostly non-technical, so just write your preference. In case you don't understand
00:03:59something, you can just ask AI to clarify what it means. After you send your preference, the agent
00:04:05will start coding your application. This is my favorite part because I can just scroll through
00:04:10some reels while watching it generate a code for me. A few moments later. Okay, so I think our app
00:04:17is ready. Now we are ready for the next step. This phase is all about testing the app, fixing bugs,
00:04:23improving design, or adding features. And this is where most people mess up. Before talking about
00:04:28that, let's quickly go through our platform. So our app is working well. Now let's talk about
00:04:58what not to do in this test and refine stage. One big mistake most people make is that they
00:05:04list everything that needs to be fixed and dump it into one giant prompt. AI doesn't work well
00:05:09that way. The best practice is to fix one thing at a time and be very specific in your prompt.
00:05:15Let's say a button isn't working. Don't write prompts like this. Instead, you can use this
00:05:20prompt template to fix your issues. Next, let's see the process of adding an additional feature.
00:05:25You already described features in your PRD. Reuse that same format. For example, on our site,
00:05:32let's add unequal expense splitting. Currently, when we create an expense, the cost is distributed
00:05:38equally. But with unequal distribution, I can control the cost per person. So as per our template,
00:05:44I have created a description for our new feature. Now let's go back to our agent and paste it. But
00:05:50before that, make sure to add this line, and then you can paste your description. Now hit send and
00:05:56let's wait. So our new feature is ready. Now let's test it. And everything looks good. So that's all
00:06:17in this step. Add one feature, test it and repeat. So there are still a few things I want to add
00:06:23before moving to the next step. First is don't hesitate to revert to old changes. So reverting
00:06:29to old changes means you go back to an older version of your code. They can be cases where
00:06:33adding a new feature or fixing a bug can result in other consequences. In that case, just prompt
00:06:39the AI explaining that the new changes broke the code and tell it to fix. This will work most of
00:06:44the time. But in case it doesn't work, it's best to revert to the older version. So the next thing
00:06:49I want to add is feel free to add additional changes to the prompt templates I have given.
00:06:54So that brings us to the next step. Final validation. After all the features are added,
00:06:59you will need to do a final test of your application. So nothing complex. Just go through
00:07:04your platform and test every feature. Make sure that every output is correct and every behavior
00:07:09is as expected. If you see any issues, go back to the test and refine phase again. And that's
00:07:14pretty much it's all about making sure everything works before making it live. So the last step is
00:07:20deployment. With Abacus AI Deep Agent, deployment is just few clicks. So to deploy your application,
00:07:27look for the deploy button at the top. Click deploy and you'll see three options. Use an Abacus AI
00:07:33domain, a custom domain, or a custom subdomain. Picking the Abacus domain means your deployed
00:07:40site URL will follow this pattern. If you go with a custom domain, you'll need to buy a domain and
00:07:45point it to Abacus via DNS settings. A subdomain is simpler. If you own a domain, you can use
00:07:51something like this as a subdomain without buying anything new. For now, let's just use the Abacus
00:07:57domain. Now give your preferred name and this will be your website URL after deployment.
00:08:03And congratulations! Our first Vibe Coded app is finally live. You can share this URL with others
00:08:09so they can also start using your app. So before you go on and create your own app, there is one
00:08:14final thing I want to add. Pure Vibe Coded apps are not ideal for large-scale commercial products.
00:08:20They are best for personal projects, small tools, prototypes, and limited users. That's because there
00:08:26can be security issues, performance issues, and also scalability limitations. If you plan to scale big,
00:08:32you'll eventually need developers. And that's it. The five steps of Vibe Coding with best practices
00:08:38that actually work. Make sure to check out Abacus AI Deep Agent. The link is in the description.
00:08:44If this video was helpful to you, make sure to like, share, subscribe, and comment your thoughts
00:08:49below. And I'll see you in the next one!