Transcription
So, Base44 is getting a lot of hype, and for good reason. It's an incredibly powerful tool that's making a lot of people a lot of money. So, in this video, I want to show you how to get started for yourself. We're going to go through step-by-step, click-by-click, and you can follow along. So, by the end of this video, you'll have your own software up and running.
This is a very powerful tool that in the past, you would have had to spend a lot of time learning how to code and developing this stuff. And now, you can test websites or apps in a matter of minutes. So, in this video, like I said, we're going to go through step-by-step. I'm going to build an example. You can follow along, and we're going to talk about not just how to design it or what it can do, how to edit it, but also how to add payments and subscriptions, so you can actually monetize this and make a lot of money off it.
So, I'll have chapters down below, timestamps, so you guys can click around and get to the point that you need to go to. Uh but also, I encourage you to follow along with me, or at the very least, take out a notepad and take some notes so that in the future, when you're working on this project, if you get stuck, you can go back and remember how to do certain things.
So, we're going to start off with the very easy stuff, making an account. Making an account with Base44 is easy. We have a link in the description down below, uh and you can also type in santrelmedia.com/base44. This helps to support the channel at absolutely no extra cost to you, and it brings you to this landing page here.
Now, when you're deciding on what you want to build, there's a couple options. You could build a website, just regular website, but it's a lot easier to build with this. You could build an app, so that's what I'll be doing in this video, or you could have some combination of the two. So, for the sake of example in this video, maybe I am selling blue light glasses or something related to travel, and I want to build a really useful tool on my website, which is going to be a jet lag calculator.
So, all I have to do is write in my prompt here. And if you don't know what you want to make yet, I recommend going to Claude or ChatGPT and spending some time brainstorming. Just ask it to come up with 30 ideas, give it interests that, you know, give it topics that are interesting to you, and kind of iterate on that as much as possible. This is something that because it doesn't take a lot of time to build, it makes sense to just make whatever you can think of first, and then if you want to make something else later, you can do that.
Okay, so I have a pretty long prompt here. I'm going to highlight it all and copy it. Uh I recommend you do the same. You can always paste it on like a Word document or something elsewhere. And I'm going to say build now. Now, the longer the prompt, the better. Generally, you want to have a lot of details in there, depicting me depicting exactly what you want.
Now, we have to sign up for Base44 with an account. Makes sense. I'm going to click on sign up on the bottom. We'll put our email in there. I'll put a password in there, and verify I'm a human, and then say sign up.
So, that brings us to the Base44 landing page here. While it's working on this, uh it's going to take a minute or two, so I'll just kind of show you the layout of the land here. So, this big space on the right side, this is going to be where it shows you what your web app is actually looking like, your website. You can preview it. I'll talk about these other things in a second once it's fully developed. But on the left side, this is essentially like the AI chat. You can see the message I gave it, and then it kind of tells me what it's working on as it goes through things. So, you can read and keep up with what it's doing.
Also, it'll tell you like what the colors are if you like them, by the way. You can always highlight this and copy this over to another document. These are called HTML color codes or hex codes for color. And uh if you're working on logos and stuff, it's really helpful to have the exact color match between, you know, different things that you're working on. So, that could be useful to have those in the future.
You'll also see down here, this is where you can input, obviously, text prompts, but also you can add in, you can upload files, so maybe your logo, for example, uh or PDFs or attachments or anything you want to have on on the website, images, for example. We have the ability to dictate to it. So, if I just click on the microphone, I can do speech-to-text and just kind of talk and kind of in a natural language tell it what I want. And then we have a stop button. I'm not going to press that right now, but that would if essentially, if you typed in something, you hit enter, and you're like, "Ah, I didn't really want to do that." And you don't want to waste a bunch of time and waste credits, you can stop it, uh and it'll terminate whatever it's trying to edit right now.
On the top, we have, like I said, I'll talk about these in a minute, but over here, we have my account right here, which is, you know, just shows that I'm I'm in this. But you can also have collaborators, so multiple people can work on this at the same time. If you click add collaborator, you can enter someone's email, it'll give them access to this, and you can choose what their permissions are going to be. We also have the three dots here, so you can edit the files that are in this page. You can act as a user once it's done being built, uh so you can kind of interact with it and see what it looks like. And of course, we have the option to upgrade. Uh I'll talk about the plans that are available in a minute, and we can publish it once it's actually ready.
So, that took maybe four or five minutes. You can see our website is pretty well built out. very impressive, I think. Uh I'm going to change the name of it and stuff like that. I should have put that in my original prompt, but let's say we want to view this as a user. So, I'm going to say act as a user. Now, we're interacting with it, as you can see here. You can see we've got different pages, the calculator and the shop one. But let's say try jet lag calculator. Sure enough, that button works. It brings us over to the calculator. We can select our home airport. Oh, actually, that's very impressive. It has all of them. So, let's see if let's see if it has Philadelphia. It doesn't have that. So, it doesn't have all the airports. Um I might need to That's something we will have to add it, but let's say JFK, and let's see if I'm going to Tokyo. Tokyo I want to go to. Yeah, okay, it has That's correct. Typical sleep window, yeah, 7:00 a.m. Uh okay, so this is I want to make this editable for both sleep times, you know, the sleep and wake time, I mean. But let's say 10:00 p.m. to 6:00 a.m. Outbound flight, let's say maybe it's going to be on a on a Sunday, and I'm departing departing at like 8:00 a.m. It doesn't have my arrivals. We have to add that as well. And I can toggle these on. Say my way home is going to be Friday, and departure time for this. Okay, let's just say generate plan. See what it's able to do. I recommend going through all of this, just kind of get an idea of what it's doing. Um it has an estimate of how long the flight Actually, this is quite accurate. It is almost a 16-hour flight. That's very impressive. But you might have different layovers, so it might not be perfect here. Um okay, so your flight plan, it tells me when I should sleep and when I should be awake. And the times, though, it tells me I think this is just JFK time. Yes, I can hover over it, and I can see both. Tells me when I should wear blue light glasses, when I should be drinking caffeine, when I should be sleeping. All right, and then down here, daily protocols. This is actually quite nice. Tells me when to take melatonin, when I should be going to bed, uh or when I should be wearing blue light glasses and drinking caffeine. This is This is really close. I actually really like the way this looks. This is better than most tools out there on the market right now. And of course, we also have the shop button here. So, we've got our blue light glasses. We can edit these and kind of choose the, you know, what products are going to be listed there. But this is a really good start. I'm very happy with how this looks.
If we wanted to edit anything on here. Now, I'm not going to perfect it in this video. It's going to take some time, and and yours is going to be different. So, I want to show you how to edit, and then you can edit your own, um because like I said, you could just watch me doing small edits for hours um as I really try to perfect this. But there's a couple ways you can edit things. First of all, let's go back. Let's Let's exit user mode, clicking on the exit user mode button right there.
Now, the first way you can edit is over on the left side. You can either edit or discuss. So, if you want to discuss something, you can chat with the AI. It's using 0.3 credits per request. Or you can do in a full-blown edit and say, "Hey, I want to change this one thing. I want this to happen instead." So, let's start with an edit here. Um I'm going to go with a full edit. So, select edit, and I'm going to say for the for the calculator. Okay, so I have a bunch of things for it to edit. I'm going to hit enter here, and it's going to edit multiple things at once. Like I said, this is one way to edit. It's not the only way to edit, though. And there's another way that doesn't use credits, and you can actually change the text on here. I'll show you that once it's done. It's going to take a minute to do this.
All right, so you can see the edit worked. It now split up the bedtime and the wake time. And this is kind of where you'd split up how you're going to be editing your website. Anything that's more technical and back end, I just use the prompt. It's way easier. But for something simple like changing the name up here, you can click on edit, and then you're able to kind of hover around and click on certain things, and you can either edit the element using AI, or you can double-click on it and just type out different things. So, I want to call this jet lag calculator, or I don't know, jet lag calculator, jet lag planner, maybe. I don't know. Whatever you want to call it, you can change it. I actually like it being called calculator. But maybe instead of you want to make it like bold, or I don't know, you wanted to change, uh you want to add it underlined, bold, whatever. You can change the style of it right here, um and it gives you a lot of options for, you know, the margin, uh if you want to have opacity on there, if you want to change the color of that, the background color. Um there's a lot of things you can do for pretty much anything on here. You know, it'll tell you like this is going to be an H1 header. So, if I click on this, I can instead make that There's essentially on a website, as with like documents, for example, you've got H1, H2, all the way down, you know, quite a few numbers. And that's like different levels of header. H1 is going to be your biggest header. H2 is a little bit smaller, kind of like a subtitle. And it goes down to paragraph, as well. So, if you have something and you're like, "Actually, I really want this to be a header," you can change that right here.
Also, down below, you can change the images. So, if I don't want this image, I can replace it with either some generated ones, or I can replace with my own images. Uh I would recommend replacing images. That obviously makes a lot of sense. And we can edit pretty much anything else in that same fashion. Just click on it, and you're able to edit pretty much anything. So, we've got a little icon there. You've got the logo. You've got text, which is on the top. You can also click on entire sections. So, this is still using a section layout, as many websites are. So, if you go on the kind of the the widest view of things, so you've got all these little elements inside stacked vertically, but they're all within one section, one container, one whatever you want to call it, one banner. And you're able to edit the entire thing. So, you can change like the background color for this, and the background could be, I don't know, if you want to make it like that, for example. Um I was actually better not having a background there, but we'll leave it as it is. You can also check out what your website looks like on mobile and on desktop on the top right by clicking that drop-down there. And when you're done, you can click on edit again to disable that edit mode.
And now we can click on theme right here, the little kind of painter icon there. And you're able to change the theme for your entire website. You can change all of your colors right here, manually selecting them, like I said, and what I would recommend doing is essentially down here, if you click on where it says palette, if you have a logo already, go to HTML color code identifier, just Google that. There's a bunch of free tools out there. You can identify the exact hex codes for every color, and then you can just paste that in right here. And that way you have a perfect match between your logo colors and your website colors. You could also just, you know, ask this to change the colors to more of warm colors or reddish or green or whatever, and it can change all of that. I think this looks fine, so I'm not going to change the colors on this.
We also have multiple pages on our website. Of course, I showed you how to go between them if you're a user. You click on these. Uh you can still click on these, but there's a drop down up here as well if you wanted to navigate between them without going through the header. So, you can click on that and go to the homepage or the other pages you have. If you want to add new pages, again, you can just ask that in a little AI prompt on the left side.
Now, finally, we can go up and revisit this little spot up here. One really subtle icon is the version history. So, if I click on that, we can go back to different things. So, if you tell the if you tell the AI to change it and it breaks something or it does something you don't like and you're like, "Ah, it was better before." You can just click on that and go to previous versions of your site, and you're able to just restore them. It's basically the undo button, but you can undo, you know, quite a few steps back if you wanted to. If Also, if you wanted to edit or see the the website in more of a full view, you can hide the chat panel or show the chat panel again. And we've got preview, as I showed you before. We also have the code if you wanted to, I don't know, just edit the code more specifically. I think most people probably won't be doing this, but if there's something you wanted to add in or if there's something that you wanted to really specifically edit, you can do that within the code. Um or you can just copy the code if you wanted to. You do have to upgrade a plan to actually edit your code, but let's go to the dashboard real quick.
Now, in your dashboard, this is where all the magic really happens. So, besides just editing in the preview mode, the dashboard is where you can change like your logo, you can change the name of your website, uh and you can do a lot of things. So, first, before we can really do any of that, we're probably going to have to upgrade to a plan. Otherwise, we're not going to have a domain, we're not going to have any of the abilities right there. So, what I would recommend doing is on the top it I don't know why it's giving you a countdown. I kind of hate when they do that, but essentially, if we click on that, we can choose between the plans. I think most people are going to be fine with the starter plan. I think that makes sense for a lot of the very early on beginner websites. But, as you start to make more edits on there, remember if you converse with it, it's like point three credits. Otherwise, you're going to be using more to actually make edits. Uh so, having more monthly credits is very beneficial if you're editing your website quite a bit. Integration credits are going to be slightly different, so we are going to be needing those if we're trying to set up like payments on this website or uh users like accounts, for example. There's a lot of things we can integrate and set up, but I would recommend going to the builder uh for all of those things. And some people will eventually grow into the pro or elite tiers. Um they're obviously way more expensive, and I think you're really going to be an established business before that really makes sense for a lot of people. But, for the sake of this video, I'm going to go with the builder plan right here, which does give us a free domain for 1 year. So, that difference right there, at least in the first month while you're deciding, uh it's going to make sense. You can get your domain for free. It connects automatically. You can set it up on GitHub. You get You can share You can connect a domain right here, which I think is really important if you want to be professional. You've got back-end functions and unlimited number of apps as well. So, if you're building a lot of different websites, you want to keep testing it out, it's a great way to set up, you know, just unlimited number of apps right here.
So, let's say subscribe to builder, the builder plan. I will then continue to check out, and you can decide if you wanted to do monthly or yearly. So, monthly is going to be significantly more expensive. You're looking at $50 per month versus yearly. So, if you do the math on that, it looks like if you're doing this for more than about a six or seven months, it absolutely makes sense to go with the yearly plan. You're saving a lot of money by doing that. So, you know what? I'll just go with that for this video anyway. We're going to go with the yearly plan. I'll enter my credit card information, and I will then subscribe.
So, if I go to plan and billing within my account, you'll see it's telling me that it worked. I'm I have the builder plan. Now, I can go back to here, and this is Base44. In the future, if you go to Base44, it's going to sign in and it's going to look like this. Now, we've got home, as you can see, if you want to build something new, your recent apps are going to be down there. We've got all apps. You've got templates if you wanted to see something that is kind of pre-built and you want to work off of that. This could be very beneficial as well for any future apps you might be working on if you think, "Actually, I really like the way this one's set up and I want to build something similar." Maybe just a tool even for just yourself. I do this all the time, instead of just selling tools or or letting people subscribe, sometimes I make things that are just useful for my own business.
We've got integrations down here, and this list is growing tremendously. Honestly, since the last time I even made a video about Base44, we have a ton of new ones. So, Base44 is owned by Wix, and so they already do a lot of the back-end stuff for you, but it's nice to be able to connect to like Slack or Salesforce or Stripe, which is what we definitely will be doing uh in just a minute if you want to accept payments or set up subscriptions. That's a great way to do that.
So, let's go down to our app right here. It's called Circadian Navigator. Like I said, I want to change the name of that. So, in order to do that, we can click on dashboard, and from here, I can click on the pencil icon, and let's call this Santrel Sleep. Santrel Sleep. I'll say okay, and we can change the little tagline of this as well. So, this is the app description. Actually, whatever, I'll leave it as it is right now. We can change the logo. And walking down all the other things we can do in the dashboard, like I said, you can add users here as well, as you can see up on the top. We've got data. Not really a whole lot we're going to do with that. Analytics, in the future, you can see, you know, who's visiting or how you know, how much traffic you're getting. Social content, I pretty much never use this, but it it's it's new. It's probably going to change a bunch, honestly, even by the time you watch this. But, domains, we need a domain for this. So, we can buy a domain. So, timesyncpilot.com, no. You can connect an existing domain, and you might save a couple dollars doing this. So, if you go to namecheap.com, uh you could also go to like GoDaddy or so many other places you can get it. Namecheap kind of aggregates some of the best prices out there. And let's say it's going to be Santrel santrelsleep.com. We can search for it. It's almost definitely going to be available. Probably like $12 a year. Okay, $11.28 per year uh is what they're saying we have right there, and you can get that. You can add it to your cart, and then in Base44, you can connect an an existing domain, and it walks you through. You copy and paste a couple things, and you're set up. Uh you could also buy it directly from Base44. And if you get the 12-month uh business plan like I have, then you're going to have a free domain for the first year. So, I'm going to say buy domain, and uh it's going to, like I said, be free for the first year anyway. Let's say Santrel sleep.com. Let's see what the price difference is on this after the first year. I bet it's going to be 20 bucks on here. Oh, look at that, 20 bucks. Okay. Uh they want me to pay $1 for the first year. I thought it was a free domain, but maybe it's only a a $19 domain credit. I'm not sure why they have it set up like that, but let's see if I make it a worse domain like santrelsleeptool.com, if it's cheaper. No, still $20 a year. Okay. So, santrelsleep.com it is. I'll say search. I'll make this mine. It's going to cost me $1. I'm It's a little bit annoying, to be honest. I think if they say free domain, it should be a free domain, but I assume they want you to put your credit card in so that uh they're able to charge you, you know, in a year when you're actually paying for it. So, I'll say add to cart. And once you put your payment details in here, you'll say buy now, it'll automatically set up, and you can connect your domain. You'll just have to go to your email, and you'll probably have to click a couple verifications uh for Base44 and for the domain, um so it's set up properly there. But, like I said, I would probably recommend just going through Namecheap. You'll save more money in the long run, even though you spend a couple extra dollars in the first year.
Then we have integrations. I showed you integrations already, but what I want to talk about now is setting up payments or subscriptions on your website. So, this is a store that is really going to just be based on like it's a free tool, and then ideally we want to funnel people over to being able to buy our products in the shop section right there. But, if you wanted to add a subscription, let's say we want to add another feature on here. So, please make a new feature that is Okay, so let's say we're going to make a new thing that is, I don't know, um for meal times or whatever. Just an example. I think another example would be if you wanted to build a full web app here that was for like home inspections or something that the entire thing is held behind a subscription paywall, then that would make a lot more sense. But, I just I really want to show you guys this feature, so I'm going to kind of shoehorn one into this just to make it work.
So, then in a new tab, you can go to dashboard.stripe.com/register. I'll have that link in the description below. Um and you can just sign up for a Stripe account. Once you have your Stripe account set up, you can then go back over here. We can go to dashboard. We can go to integrations, and we can say use. So, it's going to allow us to connect Stripe. So, we can say, "Hey, let's set up a subscription for a pro at $9 a month." Whatever. They're going to give us prompts on how to actually do this. Um but, maybe click on this, and instead of $9 a month, it's going to be $5 per month, and I'll say go. And it's going to automatically set up Stripe. It's going to prompt us. We'll be able to connect our Stripe account to this. And that way, like it's handling all of that on the back end. You can make multiple tiers as well. So, a free one, you can also have like a pro and enterprise, for example, with different prices.
Now, it's going to ask for are your Stripe secret keys. If you have questions about this, you can always go into discuss mode here and ask questions, and it can answer more for you. Uh if you don't want to use up your credits, you can also ask in like ChatGPT or Gemini or Claude. Um but, essentially, you're going to go over to Stripe. You're going to find your secret keys. You'll be able to paste them here. You have three of them, and you can submit them, and then your Stripe should automatically be set up.
All right. So, after you set up your Stripe payments and everything, you can then also have it create accounts. And again, you're going to ask very similarly. You're just going to say, "Hey, can you make an optional an option for users to create their own account on here?" And that should be very easy to do. You can also set it up with something like Superbase, but like, you know, with Base44, a lot of the stuff is done in-house quite easily.
So, when you're finally ready, you can publish your website by clicking publish on the top right. You can see you can also make it a mobile app as well, but let's start with the web app. We're going to publish this. Right now it is public with no login required. You could have it login required if you wanted, but I'm going to say public no login required. Publish this app. And we are now online. We can also click on mobile app if you wanted to launch this as a mobile app as well. So, they give you three steps here. You're going to be able to run an app scan and see all right, does it fit the guidelines for apps for the Apple App Store and for Google Play? You can then set up your stores files and you can submit your app. It kind of walks you through the whole process right there. So, not only is this going to be like a web app that anyone can go to the domain and find, but being on the App Store is kind of cool that you can actually have that built right here quite easily.
So, then in a new tab we can go to our domain and try it out. It looks very good. We need that Yeah, okay. So, I'm going to swap out that image eventually, but we can try the jet lag calculator and let's see how this works. Say normally sleep from 10 to 6. Flight duration is going to be 17 hours. The outbound flight is going to be on Sunday. Not actually doing this. I wish I was, but I'm not. And the return flight is going to be on Friday. And then again, it shows us the local times. So, that's correct. That's what we wanted. We can choose when the adjustment's going to be. Yep, that all looks good. Caffeine planning as well. And let's generate a plan. Okay, so it shows us the flights. So, I'm going to have to make sure the flight is Maybe it's different on both ways. I'm going to edit that later. And then here, look at this. This is good. So, now it has the home time up here and the destination time on the bottom. And it does this for the whole trip, which is nice. So, pre-trip it looks like I'm going to want to start going to bed later and later. So, this is by no means done, but I hope this video is helpful. This is essentially how you'd build an app using Base 44. Oh, also, the download PDF. That's pretty sweet. We have that option right there.
So, Base 44, it's awesome that this exists. I'm very happy. I've been using this for so many different apps for myself. Also, you can make them and have people subscribe to them, make this a full-blown business, really make a lot of money off of this, and leave a comment below. Let me know what kind of stuff you're building and I would love to check out your sites. Thanks for watching. I'm Mike O'Brien with Santrel Media, and I'll see you guys in the next video.