Transcription
In this video, I'll walk you through exactly how to use Base 44 step by step, even if you've never built an app before. I'll be breaking down how to use Base 44 step by step and show you how to actually use it the right way.
In this tutorial, we're actually going to build a real app together with Vibe Coding from start to finish. I'll walk you through the Base 44 dashboard, explain how the system actually works, how prompts are structured, how page and logic connect, and how to avoid the common mistakes that waste people's hours. So, by the end of this video, you'll understand how to use B 44 properly. So party people, let's get started.
Now there is a link in the video description. This will take you to base44 and this is where we're going to vibe code your first application. So this is b44.com and this is essentially where we can build applications by just enabling prompts. Now once you get here here at the top, let's click on start building.
Now the great part about b44 is you don't need to spend any money. So they give you up to 20 free credits in the free plan and that is pretty much enough to build any kind of app that you want. So once you get here you'll go ahead and sign up and make an account. Now here I'm going to log in with Google and I'll just use a Gmail account here. I'll go ahead and sign in.
So once you log in and make an account, it'll then redirect you to the base 44 dashboard. And here we can create applications using prompts. Now scrolling down right here, any app that you create will be displayed right here in the recent apps. Also, there are other templates that you can explore from the community. People actually also sell their applications where they'll develop some sort of application and they'll sell it. So you can always do that in the near future. But I don't recommend buying anything right now. Let's just go ahead and start with the basics here and create an app from scratch.
Now, the first thing I highly recommend to do is to go to chatbt. The reason why is because humans generally don't write the best prompts when it comes to AI vibe coding apps. So, we're going to go to chatbt. Now, the first thing that we're going to do is ask it for some ideas. What are some interesting app ideas for B 44? I am in the tech industry. Can you give me some ideas?
Now, make sure that you put base 44. The reason why is because I'm sure many of you watching this have used applications like maybe Lovable or Blink or Bolt and Base 44 works actually very different from those applications. So if you're coming from Lovable and you enter the same prompts, uh you're going to get something very different.
So now here we have some application ideas. We have a website risk and trust score. Number two, we have some uh AI SAS readiness checker. Number three, an API health monitor for non-developers. and number four, illegal coverage converter and so on and so forth. So, what I recommend to do is you first need to actually get some ideas based off your specific niche. So, whatever niche you're in, just let them know right here and they can give you some ideas.
Now, once you pick an idea, I'm going to go ahead and let Tai GPT know. So, over here, I like number one, can you create a detailed prompt to create this app with B 44? Now, I'm going to press enter here. I'm not going to run the prompt yet.
Now there are some things that I want to let you know. I've been using this app for the last few months and I've noticed that if you typically enter in one large giant prompt, sometimes the AI builder might get stuck. It might make mistakes. So, me personally, I do like to break it up by sections. So, I want you to break this up into sections for the app builder. Now, I'm going to press enter two more times. And there's also one more thing that I want to let the AI know is I wanted to actually create follow-up prompts. Follow-up prompts essentially will fix any bugs. It'll fix anything that uh you might have an issue with. So, I'm going to ask it to create follow-up prompts also. Can you create four follow-up prompts my app to fix it and debug it? Okay, just like that. So, I'll go ahead and press enter.
Now, me personally, I feel like this is probably the best way to go. My personal experience is if you enter in one large giant prompt, you're typically going to run into mistakes. So, it's better to break it up into smaller sections. So, after you run that prompt, you're actually going to see right here that the AI actually recommends that we use this method because it has the highest success rates. I've seen so many videos where they take one large giant prompt, they put it in the app builder, and then they spend like like half the video just fixing errors. And if you do it this way, you're going to reduce the errors as much as possible.
So, the first thing that we're going to do is we're going to take this first prompt and we're going to copy and paste it into the app builder. So, over here, we're going to go ahead and copy all this. All right. And the next one you'll see is prompt two. Now, we're not going to enter that in just yet. So, we're first going to enter in prompt one. Okay. Go back to base 44 and we're going to paste this prompt in here. All right. And then I'll go ahead and run this prompt.
Now, after we actually run these three prompts, we're going to then enter what we call a follow-up prompt. This is typically going to fix any bugs, errors, and any common issues the apps usually create on their own. So, at this point, we're just going to go ahead and wait it out. Now, I'll be honest with all of you. I do think B 44 is a little bit slower than other vibe coding applications. However, if you use this the right way, I do believe that B 44 will give you a lot less errors than other vibe coding apps.
And after waiting about a few minutes, we now have the application. So, uh we can just test it really quick. So, right here, start a free audit. And I can enter in a website. I'll just put apple.com. Here, I'll click on run audit. And after we run the audits right here, you'll see it has an audit history where it gives apple.com this specific score and it does explain why. However, we haven't really officially added the logic to this application just yet because that is the very next step.
So, let's go back over here to chatbt and now we're going to enter in prompt two. This is the audit logic, scoring, and the risk categories. So, we're going to go ahead and take this prompt now and now we're going to give it the logic. So, we're going to explain how to actually use the application. So over here, let's go ahead and copy this. And then we're going to further develop this application. So now let's go ahead and go with phase two and create the actual logic. So here, I'll go ahead and press enter. And then this process might take about 3 minutes.
Okay, cool. So after you run that prompt, you'll now see it has a little bit more logic. So the app is now kind of understanding what we're trying to go with here. So it implemented a scoring system. Here it also shows risk levels. Here we have a free and pro differentiation and we also have new components like a category score and enhanced audit results. So that was the second prompt.
Now before I walk you through exactly how to use this app, let's now enter in the third prompt. Let's go back over here to our AI and we are now going to enter in the prompt three which is report monetization and polish. So we're going to take all this and we're going to copy this and I'm going to paste this in. And there is one thing I also want to add. So feel free to add in a little bit more. Feel free to alter this prompt however you would like. So I'm going to say next, let the free users have 10 full audits a day. So let free users have 10 total audits a day. So I want users to have the ability to run an audit at least 10 times on the free plan. Okay.
So after we ran that prompt, now we actually have a full developed application. Now let me just walk you through the actual website here to demonstrate how all this works. So let's go back to our landing page. So here is our landing page. Now here I'll click on start free edits and let's say for example a user wants to go ahead and you know test out their website. So I'm going to put my website darylwilson.com and then click on run audit. Now you'll see it's analyzing the website and this might take a few seconds. And after you run that audit right here you'll see that we have our completed score. Now it's actually rating the score out of 30. And we probably have to adjust the app a little bit. So once you actually run those prompts, you're going to see small hiccups here and there. But it looks like our website is quite secure because it's ranking it out of a score of 30. And then below that, it talks about legal coverage. And this actually is true cuz I don't really have a terms and conditions on my website. And then here we have technical health. And if we were to click on this on the pro version, it would explain exactly what we need to do in order to get a higher score. And here it also lists uh top issues. And then here we can unlock more in the full version with the pro version. So as you can tell the application it's working and it actually adds the pro features in a really clever way.
Now also here I'll click on the admin and this is for the admin point of view. So right here you'll see all of your users. You can see how many users you have, how many times people are running audits. You'll also see the conversions and money that you're making. And then if I click on audits right here, you'll see a list of all the audits ran on your websites.
Now over here we actually have our own custom dashboard. So this is actually really convenience. Now I have used other vibe coding apps and actually connecting databases and admin dashboard is actually a quite a struggle. Uh but with base 44 it actually simplifies the process. It creates a database for you and it creates this backend dashboard really easily.
Now the next thing I want to do is up here you'll see that we have this tab and this is where you can view all the pages on your application. Also, if I go over here and click on a dashboard, this is the actual dashboard for your application. So, essentially, think of this as your database. This is where all the information is stored and this is where you can get more into the technical part of your application. So, here we have users. So, all the users that register on your website will be displayed right here along with also pending request. Here you have data and these are essentially the audits that are being ran on the actual websites. You have the analytics. This shows how many users are coming to your website and what pages there are going. So I do like this compared to other apps. So here they're actually explaining everything about your application without you having to add thirdparty integrations or you know whatever else. Here we have the domains and we'll talk more about this in just a bit. The next is integrations and this obviously is in the pro version which we'll talk about. Next you have the security which allows you to run security checks on your application. here is if you want to take a look at the full bare code of the website, you can go ahead and take a look at you know the pages and everything else. So if you are a developer, you have full access to all the code on your application. Here we have agents. With agents, you can essentially allow agents on your application websites and also in the settings under the app settings, there is a lot more features and uh things that you can do with your application. And the next one is authentication. And now what's really cool is um with other vibe coding apps, you would actually have to take the API from thirdparty websites like Google or Microsoft, but if you have the pro version, you can actually go ahead and sync up Google authentication on your app so people can login directly with Gmail. They can also do this with Microsoft and also Facebook, which makes things just really convenient when you're building an app.
So, so far in this video, you got a good taste of what this does. I literally built an app website with no errors in just three simple prompts. And as you can tell, we can add users. they can, you know, sign up and make an account and it makes things really simple to use with Base 44.
Now, I'm going to go ahead and walk you through the plans and we're going to finish this application. So, if you like what you saw so far, if you like the application and you feel like you want to give it a shot, let's go ahead and take a look at the pricing plans. So, here I'll click on upgrade.
So, Base 44 offers four unique plans. They have the starter, the builder, the pro, and also the elite. Now, I personally think the starter is completely useless and that's just because you cannot use all the features and also you cannot add in custom domains. If you want to have all the features plus adding custom domains and also get more credits, I recommend the builder or better. So, with the builder plan, you get access to connect this to a domain and you also get all the back-end features that I just showed you all earlier. So, I do recommend to upgrade to the builder plan or better. It really just depends on what's a best fit for you.
Now, I know many people watching this video might be thinking to yourself, well, you know, that is kind of expensive. Well, here's the thing. If you were to hire a web developer and ask them to create this application from scratch, it's not going to cost you 50 bucks or, you know, a few hundred a year. It's going to cost you thousands. They would probably charge you at least like $5 to $10,000 to build this app from scratch. So, I do recommend to sign up for a plan and build it yourself just to save you time and money.
So, over here, let's go ahead and go to the builder plan. And I'm going to click on subscribe to builder. Now you have a few options. You can choose yearly and also monthly. So next we have two different plans. We have the yearly and also monthly. I've used these apps long enough to know that once you use it for a little bit, you want to sort of keep practicing with it. And if you get yearly, you'll just give yourself a lot more leeway in credits where you can build more apps. With the yearly plan, you also get a large discount. You get a free domain for the year and you get 25 free credits to give to a friend. You also save yourself 120 bucks, which is essentially 2 and 1/2 months of free.
So, after you select a plan that fits for you, you'll go ahead and click on continue to check out and then you'll pay with card. So, here I'll go ahead and sign up. Once you enter in all your credit card details, you'll then click on subscribe.
All right, cool. So, after that, you'll now see that we are on the builder plan and this is our current plan. So, let's click on the base 44 logo and we're going to scroll down and we're going to go back to the app that we were creating. So, right here under recent apps, you'll see that we have the website risk score app. Here, I'll open up the app.
So, now let's go ahead and talk about all the controls. Now, here at the bottom left, you'll see that we have this setting. This allows you to actually change the actual AI model. So, if you want to go to any other AI model like Gemini 3 Pro or ChatgBT5, you can go ahead and switch the model right here. However, the automatic is probably the best one, and this will actually match it with the best AI according to what you're trying to build. The next is this plus icon. This is essentially where you can upload images to help give the AI ideas of what you're trying to create. So, for example, you can upload some sort of image and say, "Hey, can you add this as our logo for the actual application? To give you an example, I'll go ahead and upload a logo. So, right here, I have this placeholder logo. So, I can go ahead and upload this." And then I can instruct the AI to do something with this. So, here I'll put add this as my new logo. All right. Cool. And what's also really unique about this application is right here, you'll see that it actually changed the color to white. And that's just because it's on a black background. So, it'll automatically adjust the logo.
Now, let's say, for example, you uploaded the logo and you're like, "Wait a minute, I don't really like that." Well, here at the top, we have this version history. You can actually go back into any part of when you're building your website. So, if you actually wanted to redo something, you can just go ahead and click on this and it'll take you back to the previous step. And right away, you'll see that the logo is back there. So, this is a way you can always go back and check revisions when you're building your application.
Now, the next is visual edits. Now, let's say that you're on your application and there's something that you want to change. And instead of actually asking the AI to change everything, you can just say, I only want you to change this one specific section. For example, here I'll click on dashboard. Then I'll click on edit elements. Now, I actually want this to address the customer. So, I want to say hello whoever the customer is. I want this to say hello and then I'll put brackets customer when they log in. And then here I'll go ahead and run this. And look at that. I mean that is a lot cleaner, right? So it says, "Hello, Darl." It's addressing the customer right when they log in.
Now you can also do this if you want to change specific sections. So for example, if you want boxes to be bigger or smaller. Uh for example, right here, I'll go ahead and select uh what should we do here? We'll just select these boxes here. Click on edit elements. And then I'll put make these boxes larger and give them a gradient border. Okay. So you'll see it made the boxes a little bit larger and it also added this gradient. Now I probably should have specified which color of gradient I wanted, but I think this will work just fine.
Now let's take a look at our homepage. So here I'll go to landing. Okay, so we have our app and it's somewhat working. Now instead of actually trying to guess what to do, we can actually ask the AI. So here at the bottom we have another option called discuss. Here I'll click on discuss and let's just ask the AI. What is the next step when building this application? Do you have any ideas? And let's see what the AI recommends.
Okay. So now let's take a look at what the AI recommends. Based on the current state of your app, the next step would be to implement Stripe integration for handling pro subscriptions. This is a critical part of monetization strategy and that's true. We do not have Stripe API integrated. They also recommend to enhance the PDF report generation as this is a key difference for differentiating the paid tier. Let's do that.
Now, in case you are brand new to Stripe, so Stripe.com is a free service. It does not cost you anything whatsoever. There is no credit check, no monthly fee. All they require is a bank account and they're going to take a percentage of every sale. I think it's like 3% which is like standard for most merchants out there. So, once you get to stripe.com, you'll go ahead and sign in and make an account. Now, I personally use Stripe for all of my businesses. So, I'll go ahead and log in with my account. So, here I'll click on sign in. And here we go. So, here is my business.
Now, what I'm going to do here is once you're logged in, you're going to click on your business up here. And here we have switch to sandbox and let's just run this in test mode first. So, here I'll click on test mode. And now the application is running in test mode. Now, Stripe is running in test mode. Now, under here under search, just type in API. API. Okay. And then click on API keys. I'm not really sure why they moved APIs. It used to actually be right here in the sidebar, but they moved it for some stupid reason. So, here is the API keys that we need. So, we have the publishable and the secrets. So, let's take a look over here and see which one they're asking for.
Now, in order to enter the API key, it does recommend a few features. We do need to enable the backend functions in the application. So, let's do that. Over here, I'll click on dashboard. So, here's the back end of our applications. And alls we got to do to enable Stripe is go over here under settings and click on app settings. Then, we're going to scroll right here all the way down and we're going to activate the backend functions. So, right here, I'll click on activate. And that's it. So now we can let the AI know. So over here, yes, we have enabled backend functions. Then I'll go ahead and run this.
Great. So now they're asking for the Stripe secret key and also the web hook. Now the web hook is required if you want subscriptions. So the Stripe secret key will actually just take the payments, but if you want people to be charged every single month, then you need the web hook, and I'll walk you through how to do that. So let's go ahead and go to preview and get out of that mode. So, let's go ahead and go over here. And the first thing I'm going to do is take the secret key and copy this. Go back over here. And I'm going to let them know this is the secret key. Here is the secret API key right here. I'm still in discuss mode. Oops, my bad. So, I got to uncheck that and make sure we're out of discuss mode. So, now we actually want it to implement changes. So, here I'll go ahead and here is here is the Stripe secret key. Okay. I'll go ahead and paste that and I'm going to press enter here twice and also here is the web hook secret.
Now let's go ahead and get the web hook secret. Let's just give it all at the same time. Now in order to get the web hook secrets over here under search we're going to type in web hook and click on web hooks. Okay. And we're going to make a new web hook. So over here add destination. Now the first one that we'll select is my account. We're going to make sure that the API is the latest version. And then here we have events. Now, I actually recommend to ask the AI which specific event they want. Usually, it's just charge. So, right here, we'll just select all charge, but sometimes it could vary. So, it's always important just to ask the AI just so that you don't have any API issues. So, over here, I lost the AI. Which events do you recommend to select for the events for the Stripe web hook? All right. And here we go. So, it's giving us the four events to select. So, here we have checkout session completed, updated, and also deleted. So over here under checkout, let's just go ahead and select all the checkout events. I'll go ahead and collapse that box. Now we're going to go to invoice. Scrolling down right here under invoice, we're going to make sure that we select the right one. So this was invoice payment succeeded and also failed. So invoice payment succeeded. Right. There we go. And also failed. There we go. Okay, got it. And I think that's pretty much it. So we'll collapse that. and then I'll click on continue. Next, we're going to click on the web hook endpoints and click on continue. Now, we're going to put the name of our application. So, this was the uh site risk checker whatever thingy. Now, we're going to ask it for the endpoint URL over here. Let's go ahead and ask it for the endpoint URL. Okay.
So, now it created the web hook link for us and it's actually in our dashboard. I don't know why they don't give it here. Other Vibe coding apps just give you the link, but we actually have to go to our dashboard to get it. So over here under dashboard we'll click on code. Next it says click on functions. So I'll click on functions and then here we have the stripe web hook. And right here I'll click on API and this is the link that we need. Right. I don't know why they put it there. Maybe next time they'll just you know put it in the chat. Makes it easier instead of digging through all this uh code. So let's go back to our app over here. And now we're going to go to Stripe and we're going to paste that right there. Okay. And then description. So just explain what this web hook's for. I am taking subscriptions on my website here. I'll click on create destination. Okay, cool. Done.
Now, here this says endpoint URL. We do need to give this to the actual application. So, I'm going to copy this and then we're going to give this to the AI and we're pretty much done. So, here is the endpoint URL. Go ahead and paste that. So, at this point, we are just basically connecting Stripe with the actual application. We're also making sure that it can take subscriptions. So every time someone uses the credit card, it'll constantly charge their card automatically.
All right, cool. So now you'll see that the integration has been integrated. Okay, cool. Now you'll see that Stripe has been integrated successfully. Now in order to launch this application, there are two things we need to do. Number one, up here under dashboard, we need to make this public. So right here, you'll see this require login to access. This essentially is making it so people must log in to the actual website first before they can view the website. And typically people don't do that today. So if you actually go over here to the actual website, people will just be brought to this login screen where they can't even access the website. So we want to disable this. So to disable this right here, you'll just click on require login to access and then we can click on publish and click on publish app. And here we go. So now this is a live demonstration of our application.
Now, when you're actually going through this website, there's some things that you're going to have to modify and tweak. The AI rarely does everything perfect on the first time. So, you're going to have to go through here and find out what's wrong, what's not working, and so on and so forth. So, going back over here to ChattBT here, I want to actually debug and I want to fix everything. I also want to make sure this is fully SEO optimized and ready to go. So, think of this as like the cleanup prompts. We're going to try to clean this up as much as possible. Going back over here to base 44 here. I'll go to preview and we're going to enter all these in. And then we'll go ahead and run this. Now a sitemap is essentially going to uh index this website for Google and a llms text that's actually going to notify AI search engines like chatbt and Gemini about our website. So after we run these prompts, we're going to make sure the app is working.
Okay. So now that we've actually debugged the application, we now need to add products for our pricing. So over here we have view pricing and we have the free and then we also have the pro. Now we need to create this pro version inside of Stripe so people can check out on our website. So let's go over here to our dashboard and what we're going to do is we're going to create a few products. So let's go ahead and get out of the workbench. And on the left side you're going to see product catalog. Let's click on product catalog and let's create a a product. So right here create product. And this is going to be pro subscription. The next is the image. And I do recommend to put an image that represents your brand. This will help people understand what they paid for because sometimes they just might forget. So here I'll put an image. And next we have pricing. Now since we're charging a recurring price, we're going to put $29. And this is going to be build monthly. And then right here I'll click on add product. And you're going to see this is active. Okay. So here's our pro subscription. Now right here I'm going to click on the price. And right over here we have our price ID. I really do wish Stripe would make these things a little bit easier to find because it can be somewhat challenging. So now let's go back and enter this in the base 44 prompt. So here is the price ID for my pro plan. Okay, here I'll go ahead and paste this in and then run this prompt.
Okay, perfect. So now you'll see that the Stripe ID has been configured. Now let's run a test transaction. So I'll go ahead now and save the application. I'll publish the app and now let's test this out. So over here, I'll click on view pricing and we'll purchase the pro. So I'll click on get pro. Okay. So let's test this website out and make sure everything's working. So right here, I'll click on view pricing and I'll scroll down and here we have the pro plan. Now if I click on get pro, this should redirect me to Stripe, right? All right, there it is. $29 per month. So it's going to charge your customers a subscription. Now here, this is in test mode. Now, if you want to take your website out of test mode, all you got to do is go over here and uh click on the actual logo and click on exit test mode. And then after you do that, you're just going to enter in this API key or I'm sorry, this secret key right here. And here is the secret key. So, you're just going to copy this and give it to the actual AI. So, all you got to do is just make sure that you give them that uh you know, secret key when you're out of test mode. And you can tell the difference right here. that starts with SK live and the test starts with SK test. So that's how you can tell the difference.
So going back over here, I'm going to go ahead and put in my credit card. Now, if you are running test mode, all you need to enter in is 4242 all the way across. You can make up any random month and any random CBC. And then here I'll put Darl Wilson. And then I'm going to click on subscribe. Okay. Okay. And after we've done that, you'll now see it redirects me over here to the dashboard where I'm on the pro plan and I have unlimited audits where I can just keep running audits. And over here under pricing, you'll now see that we are on the pro plan, which is the current plan.
Now, at this point, this app is stable and ready to go. And it also accepts payments. Now, after you've created your application, there are some things to consider. You're going to have to go fine-tune it. you're going to have to spend a lot of time going around tweaking everything, making sure everything works to your liking. And I'll be honest, to have a fully stable application, it's going to take you time. So, just give yourself like maybe like 20 hours to work on your application. And after fine-tuning it and tweaking it, everything should work properly.
So, in the next section, let me show you all how to connect this to a real domain. So, let's go over here to base 44. And we're going to go over here to publish and then right here, I'll click on get domain. Now right here you'll see connect your domain and also we can buy a domain. So click on buy domain and we're now going to search for our domain. So this is going to be Wilson sitechecker.com. Here I'll click on search and this is available. So here I'll click on add to cart and then I'll click on continue. Next I'll go ahead and click on continue. Then I'll fill out my billing information. Okay, cool. So now you're going to see that we'll receive an email confirmation from Ionus. So right here I'll click on finish. All right cool.
Now you'll see that the domain is now active. Now it does take time to propagate. So just give this like 10 to 15 minutes, you might see an error like this where it says it cannot provide a connection or an SSL's problem. Uh but after you actually wait just a little bit. It will then propagate it onto your new domain. So at this point, you now have a fully functional application that allows people to come to your website and register and you can potentially make any kind of app you want. Now I've actually made other kinds of apps like this crypto app right here. This is actually an affiliate marketing application and I'm going to walk you through how to do this in another video. So, make sure to subscribe and stay tuned.
[music]
If you have any other questions for me about B 44 or anything that we talked about, let me know in the video description and I'll do my best to answer all of your comments.
[music]
My name is Daryl Wilson and I will see all of you party people.