Vibe Coding Explained for Beginners - Build Apps with AI

Key Takeaways

VIP coding has been the most viral trend in the world of AI in the last 12 months or so and it just keeps getting better and better and I actually spend almost half my time now when I use AI tools vibe coding. So what exactly is vip coding? Well, vip coding is when you use plain language to create real apps without using traditional coding. And I'm actually going to show you exactly how it works in this video with a real example. I'm going to build a real app from scratch in this process. And I partnered with a platform called Bass 44, which is one of the leading vibe coding apps available right now. And it's really easy to use, one of the easiest that's out there right now. And it's very capable at the same time. So, I want to show you some of the more advanced options they have as I go through this video. And I thought it was a perfect choice here for a vibe coding video. Here's a quick demo of the app I'm going to actually build. because I manage a lot of YouTube content on my channel. We actually have other channels too that includes idea scripts, filming, editing, publishing. Every tool that I use eventually forces me to work a certain way, right? Or it just doesn't work in the way I need it to work. So, I'm going to vibe code my own system instead. So, this app is going to have a dashboard where it's going to give me an overview of everything I have going on. Then, under the idea section, I could just add new ideas. And I also added AI here. So, I could type in an idea here and generate it using the top AI tools. And then under pipeline, after I generate a video idea, these are just placeholder video ideas right now. I could move them through from idea to scripting to production and so on all the way to publishing. And I added this page here to show me the details for each video. And I even add a script generator here that will help me turn a simple idea into a full script again using AI. And then it created this simple authentication page. So users, which is going to be internal for my team right now, they're going to be able to create their own account. So they could have their own separate dashboard from mine with their own ideas. And at some point, I'll probably create an admin account where we could cross collaborate to have a central place for all our ideas to be in one place. So inside of B 44, I'm going to actually type in my instruction or my prompt here to start building the app. But I usually just start here on this box with a blank slate. If you want to try this for yourself, too, I'll put a link in the description to base 44. You'll also notice you have a couple options. So, I want to show you a couple of different options that you can use. So, if you press the plus sign here, you could upload a file. Where that comes in handy is let's say you have a screenshot of an app that you want to use as a starting point. So, it will understand maybe the colors or the theme or the layout of that app. Well, you could take that screenshot and upload it. Or maybe it's your own website and you wanted to learn the colors, the fonts, the style of your website. Take a screenshot and upload that. For this example, I'm not going to do that. I'm going to let it decide on its own. But this is also a really useful option right here, this planning option. If you turn this on, it will help you plan your idea. This plan mode lets the AI create a detailed plan and then you could say, "Yes, I like this plan. Let's go ahead and move forward with it or let's make changes. Sometimes I start this way, but most of the time I have a prompt ready. So I'll go ahead and paste that prompt over here instead. And I also just wanted to show you if you're not sure what you can build with Vibe Coding. I'll show you here with the templates because they show you ton of different things that are possible with VIP coding. So this is a dashboard here for task management. It shows you all the different pages and if you do use base 44 you could use these as a template and you could view the app entirely here too. Here's another example. This is a financial dashboard here. So full stack accounting application designed for modern businesses. So if you come under this template section you could explore across these different categories across things like marketing, data analysis, content generation and get some ideas for your app. I usually create a lot of these internally for my team to solve problems here. And there are a couple that I've actually made available publicly, too. And I've made videos in the past about vibecoded apps that people can use, including people that watch my videos here. Now, let's go ahead and build our app here. And then I'll show you how you would revise it, how to improve it, how to publish it. And you'll type your prompt over here. So, mine says, "Build an internal creator operating system for managing my entire YouTube content flow. user should be able to sign up and log in. The only reason I have this is because I want each one of my team members to be able to create their own account. That is called authentication. When you could create an app where different users could have their own profile, their own history and things like that. And then it describes what the app should be able to do. Create video ideas, scripting, and so on. You should have a full workflow from idea to a published video. Now, if you're not sure how to come up with a prompt, again, I would recommend you turn on this planning option and just tell it in very plain language what you want and it will create a detailed plan for you. You could also use any other tool to help you brainstorm like chat GPT or Gemini, any type of large language model. You could go back and forth and ask it to give you a prompt for a vibe coding platform. You could even mention base 44 and it will give you a prompt you could copy and paste and bring over here. Okay. Now, as soon as I press enter to send out the prompt, this will go to work and it created a plan for itself that was not included in my prompt. It kind of used my prompt and then based on that prompt, it built this plan. Key features, dashboard, and so on. The flow, the design language, it should be clean, minimalistic. I had a little bit of that in my prompt. The different components that are required. Again, this entire time you don't have to look at a single line of code if you don't want to. Towards the end, I'm going to show you some of the more advanced options where you could dig into things that are designed more for professionals and developers. But right now, as an enduser, someone that's just vi coding, really all you need to know to get started is just to craft that prompt or use the planning or a different LLM to come up with your prompt after a little back and forth. Okay, so in a few minutes, we got our first version of the app here and we got ourselves a dashboard. This is the pipeline I asked for here where we have idea to research. So I could move these cards over as we make progress. And then we have our ideas tab where we could capture any type of ideas we have for future videos. And then dashboard just shows everything. If I click up here, I could see these different pages. So I could click here to go to those specific pages that is created for us which the dashboard also links out to. So this can create a single page website if you want or you could create more modern looking apps like this. And they're usually mobile optimized too. So you could look at it on mobile view just by clicking this right here. And this will refresh it every time you make a new update. Now I want to show you refinement prompts because with VIP coding pretty much every single time you generate an app the prompt especially if you didn't spend a lot of time crafting that prompt like this video. I did not spend a lot of time on that initial prompt. you're going to want to refine what you created. So, I'm gonna say make it more of a traditional dashboard with the menu on the left side instead of on top over here. And I also want to make this dark mode. But one thing I've learned actually vibe coding a lot, I don't like to send two separate completely different things in my prompt. Although it will most likely do both of those things, I like to tell it one major change that I'm going to make. This is change. This is going to change the entire layout. But I know I wanted to make it dark mode. But I'm going to do that in follow-up prompt. So right now I'm just going to type the change I want to make here. And then this is going to go to work here and start making that change for us. And when it's made a change, it will tell you what it's done. Added a traditional left sidebar with the logo, navigation menu, and users on the bottom here. So exactly what I wanted here. Now I'm going to ask it to make it dark mode. Okay, it's added our dark mode here. And it kept the toggle here to turn it into light mode. For this video, I'll just keep it to light mode here so it all looks the same for the video. Now, the next thing I like to do is put myself in the shoe the user here. Even though I haven't done too many follow-up prompts, I want to make sure I could see how this app works. I could click this and say act as an user. This is something specific with base 44 that they have, which is a really useful option here. So, if I'm using this app myself, what I'm going to do is I'm going to go to the dashboard and let's say I want to create a new video. I'll type in the title description here. Category is going to be tutorial and it's going to go into our idea stage here. And I'll press create. Okay, that moved it to our pipeline in the idea tab. And now I want to drag this over to research. And it looks like it doesn't have that function yet because I want to just move this like a card from place to place. These are the things that I find out as I use this as a user. So make the pipeline page more like cards that I could move from pillar to pillar. Okay. Now, if I grab this card and move it to research. Yeah, now that works like the way I want it to here. And I'll just move this down the line here. And if I go to the dashboard, I want to make sure that does change what's going on. So, the in progress now is showing one. And I'll also show you this right here. It also will show you suggestions. Okay. So, right now, if I click on one of these, it says add AI capabilities to the idea. So, it will allow the users to input a broad topic and have a suggest video ideas. Well, that could be great. It's not something that I just had on top of mind. Well, this could give you ideas like that. Or what about this one? Integrate basic analytics tracking for publish videos. So, this is where you connect to more advanced things like what's called API. YouTube has one called the YouTube public API that will show you analytics like views and likes and things like that from videos. Now, let me show you some other settings here when you are vibe coding. So, you have something called a visual editor where you could turn this on and just make changes by clicking on things like this. And you could literally edit any of these elements here by typing in a prompt and specifically change one portion of this. This also lets you do basic formatting and text changes. So, if you wanted to, you could just type in a text like this and not use the prompt box here. And all you have to do is press save when you make that change and it will save that change for you. If I wanted to make this green, for example, I could just use this. And I could literally use one of these simpler options like this and it will change it to green and then I could just save it that way. Using visual edit is one of my favorite options. It wasn't always around when you were vip coding, but it's an option here inside of B 44. And you could always turn on discuss. This is like the planning in the beginning. So, if you wanted to ask it anything about ideas or what's going on with your app or why something's not working, we'll turn on discussion and it won't go to work. Actually, it has a description chat with AI about anything without making any type of changes. And you have settings here. So, in base 44, it will automatically choose the best model in the background. You don't have to decide. But if you do upgrade to a plan that lets you pick a model, if you're a more advanced user, you can pick a model. Now, typically the models from Anthropic, those are the clawed models, they're usually the best. So, they're sometimes called Sonnet, Opus, those are the models they have. Gemini from Google, great models for coding. GPT5 from OpenAI, great for coding. So, as you get more advanced, sometimes you may want to decide manually to choose a model. In almost all cases, I don't do that and I let the AI model be set to automatic and he always picks the best one that's appropriate for the task here to make the change. Now, after a few more prompts, this is where I'm at with my app so far. And I got a little bit more work to do, but I wanted to show you some more advanced options here. So, if you go to the dashboard, there's a lot of things here that I want to point out. The first one is for users. This will show you all the different users when you add authentication. So if you have an end user, if you're an admin, they have different roles for different users, you'll see that over here. You could invite users directly here. And then you'll see pending requests over here. So useful page here to look at. You also have security here. So anytime you publish things that you're going to put out into the world, you need to run a security check to make sure there's no issues that will have your information leaked out there. Especially if you're capturing emails or have any AI capabilities, any type of those API keys that I told you that are private to you, you need to make sure you run a security check to make sure those don't get leaked out. If you are more advanced, well, they have this whole section where you could see all the code for your app or your website here. So, anytime if you wanted to do more advanced things, you could bring a developer to help you with that. Or if you're obviously you're a developer, you know what to do here. And they recently rolled out analytics. So after you publish your website, you could be able to see the traffic that's coming to your website, the users that are coming here based on their country here, what pages they're checking, and even sales overview. That's all available in the analytics tab. Obviously, very useful there too. And when you are ready to publish your app, you could just press publish right on top here. And as soon as you press publish app, it will publish your app and it will give you a link like this. And then you could copy and paste that link and share it with anyone you want. Now, it's not going to be a custom link. So, if you want to do that, you could just get a domain and connect it to a domain. So, you get the exact URL that you want for your app. Now, I also want to show you how VIP coding works as far as pricing and credits. So, VIP coding is typically credit based. So, you get a certain amount of credits and every time you talk to a VIP coding app like B 44, it will charge you credit. Now, when you initially type in a prompt and it creates the app for you, that will cost you some credits. And as time goes on and you do follow-up prompts, that will cost you credits. So, right now, this will show me how many credits I've used and how many credits I have left. And you usually get daily credits, too, that you could use that refreshes every day. Now, let me show you the pricing plan as well. Now, base 44 starts at $16 a month. So if you're not going to be heavy users, you could just start with that. Experiment with different things here with these amount of credits. As you build more and you want more advanced features, you might want to upgrade to this option. Some of the things I showed you require this option. For example, I need to have back-end function. What's backend functions? Well, if I have authentication, and you could be a user of my app, that is a backend function. If I use any of those secret API keys that I need hidden, I need backend functions. Right? If I want to connect to a domain, I need that, right? So, this is going to be the option that you want to upgrade to. And as you need more credits, you could always upgrade or get more credits. But these are the different tiers they have available right now. Now, one of the reasons I've been so obsessed with VIP coding is because this is literally the tool I wish I had years ago. I've been creating YouTube videos for almost a decade now. So, these type of tools are going to be flexible. They're going to let me add whatever I want. If I use any type of subscription off-the-shelf tool, well, the tool is what it is until that company decides to add the thing I want, which I wouldn't even know how to get them to do that, I won't have that feature here. I just vibe code my way into an app that is actually perfectly tailored to me and it fits exactly how I like to work. So, this is why I've been vioding all kinds of different app across all the different functions in our business. Now, if you want to try vibe coding for yourself and build your own app just using plain language, I'll put a link to Bass 44 below in the description of this video so you could experiment for yourself. Thanks so much for watching and I will see you on the next