Vibe Coding Explained for Beginners - Build Apps with AI

VIBE 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 Vibe Coding 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