Transcription
Hey, I'm Matt, and in this video, I'm gonna show you how to use Base44 to build a real working app, even if you've never written a single line of code. We'll start from a completely blank account and build a full app together. You'll plan it, generate it, customise the design, add user logins and payments, and put it live on its own custom domain. And early on, I'll show you the one free step most people skip, the step that stops you from burning through your credits before you've even finished building. You don't need any coding or technical background. You just describe what you want in plain language, and Base44 builds it for you. Also, be straight with you about what it does really well and where it still struggles, so you know exactly what to expect. And if you're wondering whether Base44 is worth committing to, it's backed by Wix. So this is a serious platform, not some small side project. By the end, you'll have your own app live on the internet that anyone can use, not a mock-up, not a demo, a real application. So let's open up Base44 and build your first app.
I've got a link on screen and in the video description that'll take you straight to Base44, where you can start building for free. No credit card needed. Go ahead and open that up so you can follow along with me step by step. When you click on that link, you'll land on this page here, or something very similar, and you'll see right away that there's a chat box asking you to describe your app. Now, this isn't actually a real chat box. We need to register an account first. To do that, simply click the "Build Now" button. Then go through the process of setting up your Base44 account by following their instructions. I'll meet you on the dashboard.
And here on the dashboard, we can see a real chat box that we'll use to build our app. Now, before we go any further, I want to point out that this might look a little bit different by the time you're watching this video. AI moves very quickly, and software updates regularly. So if the interface doesn't look the exact same, don't worry. Just try to understand the concepts I'm showing you today and apply what you've learned to the interface as it looks when you're following along.
Before we start building, I want to show you something that will make a big difference in how your app turns out and save you money in the process. On the upper left side, click the workspace drop-down. And here, you can see Base44 uses a credit system. On the free plan, you get five message credits a day. Now, these aren't one-to-one. A simple change might use only a fraction of a credit, but asking the AI to build a whole new feature will use more. The free plan gives you enough to generate your first app and try some changes. But here's the thing: if you jump straight into building with a vague idea, you'll burn through credits fast trying to get what you want. So instead, we're gonna plan first. Base44 has a built-in feature for this called "Plan Mode." When you go to create a new app, you can see this little plan toggle button. Go ahead and click that. Now we're in Plan Mode.
In Plan Mode, we can type a simple description of what we want, and Base44 will help us to refine the prompt that AI will use to build the app. So I'll simply type, "movie recommendation app," and hit send. Then the AI will ask you some guided questions to help understand what the goal is, who's the audience, what are the core features you want, design preferences, that sort of thing. Here it says, "Who's this app for, and how will it be used?" So I'll say, "general public." "What's the core way recommendations are generated?" We'll say, "based on ratings." "And what's the visual vibe you're going for?" Let's say, "dark and cinematic." Just answer the questions it asks you, and when it's done, it'll come up with a plan, and you can click "Read More" to see all the details. You can scroll through, see everything it wrote, and if you want to change anything, you can simply type in the chat in plain language and ask the AI to make updates. The best part is Plan Mode doesn't use any credits. You're just having a conversation with the AI, getting your ideas organised, and building a detailed blueprint for your app, all for free. Credits only get spent when you click "Start Building." Look at what we've got now. We started with a rough idea, and the AI turned it into a structured plan with clear features, user flows, and design direction. This is what Base44 is gonna build from. The more detail you put in here, the better your first result will be and the fewer credits you'll spend refining it later. Here's a quick tip: if you're not sure what you want to build yet, you can use a tool like Claude or ChatGPT to brainstorm ideas before you even open Base44. Think of it as a conversation with a friend before you sit down to draught the blueprint. But once you know roughly what you want, Plan Mode is where you'll turn that into something that AI can actually build.
All right, our plan looks good. Let's click "Start Building." And right away, Base44 gets started building your app. You can even see the files it's writing in real time in the left sidebar. This process can take a few minutes, so just be patient, and when it's done, you'll see something like this. This is CineMatch. Base44's first draught of our app. Right at the top, we have a search bar where we can search for specific films. We have tags where we can filter by different film type. As we hover over the different films, there's some nice interactive movement happening here. The image grows bigger, and the movie gets highlighted. At the top, we have different tabs for "My Ratings," where it looks like, if we log in, we can track ratings. Same thing for a "Watch List," where we can save films, and then "Recommendations" for the user based on their preferences. Overall, this is a pretty good start. Base44 created a full front-end application. If you were coding this from scratch, this could take days, but there still are some problems we might want to address. For example, these aren't the actual movie posters. We'd probably want to fix that. There's an option to sign in to get your ratings, but I don't see a way to sign in yet, so we'll want to add user authentication. And personally, as I'm seeing it, I'm not a huge fan of this serif font here for our headers. I think it would look a lot better if we had sans serif fonts.
So next, let me show you how to make changes to your app. The first version is never perfect. The real skill in vibe coding is knowing how to guide the AI to make it better. There are a few ways to do that. Let me show you. First, the "Theme" panel. Click the theme icon. That's this palette button at the top of your editor. This is where you set the colours and fonts for your entire app in one place. Pick a primary colour, a background, choose your fonts, and those changes apply everywhere instantly. This is free, and it doesn't use any credits. For example, let's maybe change this primary yellow colour here to a different tone, a different hue. We'll set it to maybe this vibrant orange colour here. That's pretty nice. And if we click "Save and Apply," we can see that the app colours have been updated everywhere that yellow colour was used previously.
Next, "Visual Edit" mode. Click "Edit" in the upper left of the toolbar. This lets you select specific elements on screen and adjust them. You could change the colour of one button, tweak the spacing on one section, delete something you don't need. It's like the Theme panel, but for individual elements instead of the whole app. Also free to use, no credits. For example, maybe we want to change what this text says. We can click on it and then click the "T" to change the text content. We'll change it to say, "Rate what you've watched to get personalised recommendations." Then, if we click "X" on this toolbar, after a second, the app preview updates, and the change has been locked in. Between the Theme panel and Visual Edit mode, you can do a lot of design work without needing to touch the AI chat at all. Save your credits for the stuff that actually needs AI: adding features, changing functionality, and fixing logic.
One thing to keep in mind as you make changes is that Base44 keeps a "Version History" of your app. You can access that up here in the left side with this little clock icon. So if you make a change and something breaks, you can always roll back to a previous version. Like, we can click on this older version here, and it loads the version that had the yellow colour instead. This is like an undo button for your entire app, so it's super handy.
For anything that goes beyond visual tweaks, like adding new features or changing how something works, fixing a bug, that's where the AI chat comes in, and this is where the credits get used. Here's my approach: I just go through the app and talk through what I'm seeing. I use the voice mode to take notes as I go. Those will all show up down here, transcribed. So when I'm done talking through and just thinking out loud, I'll turn off the voice mode, and then all of those can be turned into one message with all the different changes requested that I can send all at once. And that way, I'm getting five or six changes for the cost of one message instead of burning a credit on each change individually. That's the core of vibe coding. You describe what you want, and the AI makes it happen. Let me show you. I'll click the microphone icon. "Okay, so I like how the app is looking so far, but at the top in the headers, both the CineMatch and the 'Discover Films, ' I don't like how those look as serif fonts. I think they would look cleaner and more modern if they were sans serif fonts. Also, in this top section of the app behind the 'Discover Films' header, I think it would look a lot better if we had some sort of image, maybe pulled in from the movies. Something kind of like how Netflix shows the movie recommendation, with a nice wide banner behind this with an overlay. Also, with the movie thumbnails below, none of the thumbnail images actually correspond to the real movie poster. I think we should pull in the real movie poster as opposed to using these stock images, or maybe these are AI-generated. Either way, we should pull in real images related to the movies." When I'm done, you see I click the microphone icon, and it transcribes everything I said. Now we can simply send the prompt, and Base44 will begin making those changes.
And after a few minutes, we have the updated app, and you can see here at the top it pulled in the movie's backdrop for the hero section. This is great. It also looks like we have a bunch of movie posters now for our thumbnails, although it is missing the thumbnail for "The Godfather." So that tells me a couple things. We need to figure out how to actually get it to pull in those images consistently, harden that logic, or create fallback images somehow. But generally speaking, this is how it works. So as I'm reviewing the updates it made, I could simply turn on the microphone icon again here and talk through what I'm seeing, and then submit those changes back to the AI chat. You can do this over and over until the app is working and looking exactly like you want it to. If you'd rather not use voice mode, you can always, of course, just type like you normally would in a chat box. And if it's helpful, you could even take screenshots and upload files to help the AI understand what it is you're looking at and what you're thinking about.
Now, before we go any further, let's check out how this app looks on a phone. In the upper right, there's this breakpoint drop-down that shows the icon of a desktop computer. You can change it to see how this app would look on a tablet or a mobile device. So let's check that out. And this is looking pretty good. It collapsed the items in the header to these simple icon buttons, and it collapsed the multiple movie posters that you have in a row down to just two, so it's easier to view on a phone. Base44 generates responsive apps by default, so it should adapt to whatever screen size your viewers are using, but it's always worth checking. If something looks off on mobile, add it to your list of changes for the next AI prompt.
So far, everything we've done has been on the free plan. You've built an app, customised it, checked how it looks on mobile, and you haven't paid a cent. That's the beauty of vibe coding. You can go from an idea to a working prototype without spending anything. But here's the thing: every vibe coding platform has a free tier that lets you try it out and a paid tier that gives you the features you need to actually turn the prototype into a real product. Things like user accounts, payment processing, custom domains, and code export. That's true whether you're using Base44, Lovable, Bolt, or really any other tool. The free tier is where you learn and experiment. The paid tier is where you build something real. For Base44, that's the Builder plan at $40 per month. And for that, you get 250 message credits, backend functions for things like payments and email, custom domain support, and GitHub integration. Basically, everything you need to go from what we've built so far to a real launchable product. To put that in perspective, a few years ago, I paid a developer over $20,000 to build a simple MVP, and it took months. You're doing the same thing today for the cost of a single dinner out.
Once you're ready to upgrade, click the Base44 icon in the upper left, then click "Upgrade Your Plan." On the next page, follow the prompts to upgrade to the Builder plan or higher. You'll get an option to choose between yearly and monthly payments. Personally, I recommend yearly because that'll get you a free domain for a year. You'll also save money over the long term. But if you want to start with a smaller commitment and go with the monthly plan, that's fine too. Choose whichever works best for you, then follow the prompts to check out. I'll meet you in the following step.
Now that we're on Builder, the platform really opens up. Let's start with user authentication, feature that turns us from a demo into a real app. Right now, anyone who opens your app sees the same thing. There's no way for someone to create an account, log in, or have their own personalised experience. Authentication is what changes that. It's the system that lets users sign up, log in, and have their own data. So one person's information stays separate from everyone else's. It's what makes an app feel like their app, not just a website. And one of the things that makes vibe coding platforms different from using something like ChatGPT is that this kind of feature is built in. You don't need to set up a separate authentication service or figure out how to store passwords securely. You just turn it on.
In the Base44 Editor, click the "Dashboard" tab in the top toolbar. Then click "Settings" to expand it, and then click "Authentication." Here, you can see Base44 gives you a set of authentication methods you can toggle on. The simplest is email and password. Your users create an account, set a password, and log in, but you can also enable social login with Google, Microsoft, Facebook, and Apple. I'm just gonna keep on email and password and Google because those cover the vast majority of users. Authentication methods are available, but we still need to ad the pages where users can sign up and log into our app. Let's go back to the chat and do that. I'll click "Preview," and then in the chat we'll say, "Add sign up and login pages so users can create and manage their own accounts. Also, ad a logout button that shows up in the upper right for anyone who is logged in, and make it a sign-up/login button when they're logged out." We'll submit the prompt.
And when it's done, you can see that Base44 just set up a full authentication system. There's a logout button in the upper right. After I click it, we get a login page. I'll go ahead and log in. Now we're logged back in. We have a full authentication system, secure password storage, session management, the login and signup pages, all from a couple of toggles and a single prompt. If you were doing this with traditional coding, this alone could take days. You can also set up different access levels. Under the dashboard, you can click "Users," and you see my role right here is set to admin. Admin users can see everything, and then regular users can only see their own data. Base44 handles this through something called row-level security. You don't need to understand the technical details right now. Just tell the AI what each type of user should see, and it will set it up. I know it might seem like a lot is happening behind the scenes, but the whole point is you don't need to understand all of it right now. The platform handles it.
Now that users can log in, let's talk about the thing that turns an app into a business: getting paid. But this section is actually about something bigger than just payments. What we're really doing here is connecting your app to outside services: payments through Stripe, emails through a service like Resend, text messages through Twilio. These are called third-party integrations, tools that already exist that your app can talk to. You don't have to build a payment system from scratch. You just connect your app to Stripe, and Stripe handles the money. That's the power of integrations.
So let's start with the one everyone wants to know about: how to get paid. To add payments, we can just ask the AI. In the chat, I'll say, "Connect Stripe so we can charge customers a monthly subscription for premium movie recommendations." We'll submit. It'll come back asking us to allow it to instal Stripe or reject the request. Let's click "Instal Stripe." After a few minutes, it comes back and says everything is wired up. It created a premium page to show off the new premium subscription plan. It created a bunch of backend functions to manage the checkout and subscription and product, and it created all the technical stuff we need to manage the product and subscription. It also provided us with instructions for how to test that. So it says, "Click subscribe and use this demo card." Let's do that here. If we click "Subscribe Now," we get this popup saying that we have to do this in the published app. Now, we don't actually have to publish the app yet to do this. We just have to go to this URL here. So I've copied this URL. Go to a new tab. And this is a preview URL. So here, we'll go "Premium," "Subscribe Now," and here we've been taken into the Stripe sandbox checkout. Let's plug in that demo card, and we'll click "Pay and Subscribe." And there we go. The checkout flow is successful. That's it. One prompt to connect payments, one prompt to connect a product. We've got ourselves a working checkout. Base44 sets up Stripe in test mode first so you can try it without moving any real money. Now, if we go back to the dashboard and go to "Integrations," when you're ready to go live, there's a setup guide here that walks you through connecting your real Stripe account. Now, I'm not gonna walk through every Stripe setting right now. That's its own whole rabbit hole, and Base44's docs cover it pretty well. But the point is you've just added payment processing to your app by simply asking the AI. That's vibe coding.
Now, you'd probably want to add some additional business logic here to make sure that your premium customers see something different than the free users. Maybe you'd also want to send a thank you email when somebody signs up. Let's tell this to the Base44 AI chat. I'll use voice mode again. "Please ensure that free and paid users see different content. Also, send a confirmation email to new premium subscribers when they sign up." And we'll send it. When it's done, you can see it decided to gate the AI recommendations behind the premium subscription, and it also added a confirmation email in the webhook for the Stripe checkout. So up here now, we have a "For You" tab, and we can see that this is now locked as a premium feature. Now, this particular user that we're using in the test environment doesn't have a subscription yet. So in the background here, I've created a test user that has a subscription. The cool thing is you can see how different users experience the app by clicking these three dots at the top, clicking "Act as a User." Then we can say, "View as," and change to this other test user here. Now, if we click on the "For You" tab, we can see that the gate has been unlocked, and now this user can get custom AI recommendations. In just minutes, we've gone from nothing to an app with user accounts, payments, and custom logic, and we haven't written a single line of code.
Before we publish this app, let's talk about what to do when things go wrong, because things will go wrong. That's completely normal with vibe coding, even with regular coding, actually. So let me show you how to fix the most common issues so you don't waste time or credits. Apps in their files are super interconnected. Changing one thing can affect another. So you should test after every change, not after 10 changes. Commonly, if something goes wrong and there's an error in your app, Base44 will identify it, and you can simply click the "Resolve with AI" button. And it says here, "This action won't deduct any credits from your account." So you can simply click that button, and the AI will figure it out, and it won't cost you anything extra. Just like that, it figured out there was a typo in the import path for this particular element, and it fixed it. Remember the Version History we talked about earlier? This is where it saves you. If a change breaks something, you can always try rolling back to a previous version.
Now, another common issue is that the AI doesn't understand exactly what you want. Here, I asked for it to make the header look more cinematic because I want it to feel more like Netflix. And here, it gave the hero a cinematic upgrade. This isn't what I was looking for. Here's the framework you should use in these situations. Use the "what I expected versus what happened" format. So, for example, say, "That doesn't look right. What I expected was that you upgraded the header section to look more minimalist and sleek. What happened was that you updated the hero, not the header/nav. Please refer to change made to the hero and update the header based on my initial request." Let's send that. And here, it fixed the issue with the hero, and it gave the CineMatch title a nice, big, bold look, much more Netflix-like. Okay, now here's the part where the magician reveals his secrets. That change you just saw, that egregious looking Netflix banner, I actually told it to do that so I could show you what it looks like to fix it. I just have to mention that because I don't want to give you guys the wrong idea, thinking that the AI is gonna make bad mistakes like that. The examples that you'll encounter with your own real vibe coding will probably look less atrocious than that. There'll be much more subtle issues, and that "what I expected versus what happened" format is super helpful for getting out of them.
Base44 also has a feature called "Discuss" mode that's really useful when something's not working and you're not sure why. You can click "Discuss" in the chat, and now you can talk to the AI about your app without it making any changes. And this only costs 0.3 message credits. You can ask it about what might be going wrong, brainstorm solutions, and think through your options. It's like having a conversation with a teammate before you actually jump in and start fixing things. Because it only costs a fraction of a regular credit, you can go back and forth without burning through your balance. I just implemented a daily movie recommendation feature for this hero section where it rotates through multiple movies, but I'm not totally sold on how it looks. So let me show you how the Discuss mode looks in practise. I'll use voice mode again. "Our hero section here seems to be cutting off people's heads in the images. They're showing up tucked away, hidden a bit by the header. Can you figure out why that's happening and fix it? Also, the 'Schindler's List' featured movie doesn't seem to have any images pulled in. It's just dark. Can you look into that as well and put together a plan for fixing it?" There's the prompt. Now we'll send it.
After a few minutes, Discuss mode comes back with a response showing that it read and reviewed the files and identified potential causes for both issues. It proposed a plan to fix each of them. And so now, to fix it, all we have to do is turn off Discuss mode and say something like this: "Yes, please, go ahead and implement those proposed fixes." And there we go. It updated the padding at the top so that people's heads aren't cut off from these splash images here. But it doesn't look like it actually pulled in a fallback image here like it said it was gonna. So this is when we'd want to iterate again, explain what we expected versus what actually happened, and then let the AI figure out a way to resolve the issue. The most important debugging skill in vibe coding isn't technical. It's communication. If the AI got it wrong, the fix is almost always a better prompt.
Here's a problem you'll run into if you use a tool like Cursor to build an app. You finish building it, you're really excited, you want to show someone, and the app is running on localhost. It only exists on your computer. Your friend can't open it. Your investor can't see it. It's like building a house that only you could walk into. With Base44, that's not a problem. Your app can be shared live to a public domain in just four clicks. To publish your app, simply click "Publish" in the upper right. Then change app visibility to "Public no login." Then click "Publish App." And just like that, you'll get a confirmation saying your app is published and live online. If we copy this URL, open a new tab, and paste it in, we're taken right to our beautiful new app, live on the internet and ready to share.
But if you're gonna share this with real users, you'll probably want your own domain. This domain is kind of ugly, but since we're on the Builder plan, we can get a custom domain really easily. Back in the Base44 Editor, we're still using this temporary name, CineMatch, for our app. So let's see if we can find a .com for that. We'll click "Publish" in the upper right, then click "Get Domain." It loads the temporary domain in the search field. We'll replace that with CineMatch and click "Search." That's not available. That's okay. Our app is still young. We have time to change our name if we want. Let's try something else, like plotpair.com, and it's available. It's $1 for the first year. Let's claim it. This will brought us to IONOS, where we can add it to our cart and click "Continue." Then simply follow the checkout flow to claim the domain. After completing that, when you return to your app in Base44, if you click the "Publish" button, you'll see that instead of your temporary domain, you've now got your custom domain loaded in, and the next time you publish your app, it'll be pushed to your custom domain. However, we just changed the name of our app. So let's update that first. We'll simply ask the AI, "Please update the name CineMatch to PlotPair everywhere that CineMatch appears." After a minute, the name has been changed. We can click "Publish," copy the custom domain, and then, when we visit the new domain, we might see a DNS error. Don't worry. You didn't do anything wrong. DNS changes can take a few minutes to propagate, sometimes up to an hour. So don't panic if it doesn't work immediately. Eventually, it'll load, and just like that, you've got a real app on a real domain. This is not a demo anymore. Now anyone in the world can open this right now.
Base44 also lets you turn your app into a native mobile app for iOS and Android. Here's what you need to know. To publish on Apple's App Store, you'll need an Apple Developer account. That costs $99 per year. For Google Play, it's a one-time fee of $25. The process works like this. Base44 packages your web app into a format that app stores accept. You don't need to learn a new programming language or use a separate tool. The app you've already built is the app that gets published. Now, a couple of things to be aware of. Apple's review process can take some time, sometimes a few days, and they have specific guidelines about what apps can do. So don't expect it to be instant. Google tends to be faster, but they have their own requirements too. The result isn't identical to an app built natively in Swift or Kotlin, but for most use cases, especially the kinds of apps you'd build with vibe coding, it works great. I'll link Base44's mobile publishing guide in the description so you can walk through the full process step by step. But the key takeaway is that the same app you built on your laptop is now in someone's pocket.
Next, I want to be real with you about where vibe coding is right now. For validating a business idea, building an MVP, creating internal tools, there's honestly nothing faster. I've personally built a SaaS product this way, a marketing platform for audio professionals with paying customers using it right now. These vibe coding platforms aren't just toys, but there are real limitations. Complex apps with lots of moving parts, apps that need to handle serious traffic, deep customization, you'll hit walls. Then there's security. You'll hear people online call vibe coded apps "AI slop." And honestly, if you're not careful, they're not wrong. When AI generates your code, it might handle things like API keys or user data in ways that aren't secure. So always make sure that each user can only see their own data. Never put sensitive keys directly in a prompt, and run Base44's built-in security audit. Those basics go a long way. None of that means you shouldn't build. It just means you should build smart. And the next thing I want to show you is actually the answer to most of these concerns.
If you're not familiar with GitHub, it's where developers store and manage code. Think of it like Google Docs, but for code. It keeps track of every change, lets multiple people collaborate, and it's the standard tool that professional developers use. Base44 has a GitHub integration. When you turn it on, all the code behind your app, everything Base44 generated, gets pushed to a GitHub repository, a place that you own and control. Let me show you how to connect it. In Base44, click the GitHub icon. That's the one next to the three-dot icon in the top toolbar. Then click "Connect to GitHub." In the popup, click "Connect GitHub," and then you'll get a popup window that appears. You can either sign into an existing GitHub account or create a new one. I'll continue with Google. Then simply follow the prompts to get set up. You'll be directed back to Base44 and prompted to create a repository. Go ahead and end your repository, then click "Create." In the upper right, we now have a green dot on the GitHub button, and we can see that it's connected. That's it. Your app's code now lives in GitHub. And from here, the sync works both ways. When you make changes in Base44 in publish, they show up in GitHub automatically. And if someone pushes code changes to GitHub, Base44 picks them up.
Now, here's where this gets really interesting. Let's say you want to make a change to your app, but you're struggling to get Base44's chat to do exactly what you mean. You could clone your repository to your computer, open a tool like Claude Code, which is an AI coding agent, and tell it directly something like this: "I'm having an issue where the 'Schindler's List' movie doesn't seem to be pulling in any images for the display. Can you evaluate and fix that?" It goes in and edits the actual files. You push those changes to GitHub, and Base44 picks them up automatically. You don't need to do any of this right now. You just built your first app. That's the win for the moment. But I want you to know that this is here because the real power of vibe coding isn't any single tool. It's that all these tools work together. You use the builder to go from zero to a working product, and when you want more control, you bring in more powerful tools or collaborators without starting over. I'll link Base44's GitHub setup guide in the description so you can explore this when you're ready. Vibe coding isn't gonna replace professional software development anytime soon, but it doesn't need to. For figuring out whether your idea actually works and getting it in front of people, there's nothing faster.
All right, you just went from zero to a working app with user accounts, payments, and a custom domain by just describing what you wanted in normal language. The best way to get better at this is to build another one, brainstorm a different idea, open Base44, and see how far you can take it. Use the link on screen or click the first link in the description below to start vibe coding for free. Thanks for watching, and I'll see you in the next one.