How to Build an App with Lovable AI in 30 Minutes

Being a startup founder can be tough. You're competing with companies with a ton of market share, way more resources than you, and way more experience than you.

But there is one thing that they don't have, and that's your ability to move quickly. And thanks to AI, you can now move faster than ever before.

Hey, Daniel here from the Founder Institute, and today I'm going to show you how to build a prototype for your startup using Lovable.

So let's get started. First things first, what exactly is Lovable? Lovable is an AI engineer that helps you create web apps using plain text prompts. It's a lot like the other AI web app builders out there right now, like Bolt and Replit. But there is of course a difference in functionality. Creating an actual account on Lovable is super easy. Head on over to lovable.dev/signup. You have a couple of different options here. You can use your email, you can use Google, or you can use GitHub if you want to, you know, manage, store, and like collaborate on your code. Let's talk pricing real quick. With Lovable, the great thing is there's a free tier here, and the free tier comes with 5 credits a day and 30 credits in total a month. And a credit is essentially a message. You get total of 5 messages a day that you can use to build out your application. Now, I personally don't think that's enough if you're intending to build out a full-on prototype. And for that, I actually recommend the $20 starter package. With that comes about 100 credits a month, and that's honestly a lot better, especially if you're intending to create just the one application. We're logged into Lovable right now, and what you'll see in front of you is the main text box where we'll enter in our prompt so that the AI engineer can start building out our web app. And there are two other options here right at the bottom. One is attach. This essentially lets you attach an image or diagram that you can use to guide Lovable on what you want your app to look like or the functionality behind it. And then there's also the import from Figma button, and this essentially lets you take a Figma design and turns it into a full-on web app. Maybe that's another video for another day. Let me know if you want us to Maybe test that out. Okay, so let's get prompting. And today what I have in mind is a web app for small hotel owners to manage check-ins and reservations. The UI should be simple, intuitive, and easy to use. As far as prompts are concerned, my recommendation is always to kind of start off super simple. And I do think that you should maybe also describe what you want the app to look like because eventually what will happen is when the AI engineer builds out your app, you would want to make changes. So I think this is kind of a better way to manage the number of credits that you have. Here's a bit of a pro tip for you. If you're not happy with the prompt that you created, or if you're not able to, you know, put what you want into words, you can always head on over to ChatGPT and ask it to refine the prompt. So let's try that out. Okay, so what I have here is a pretty detailed prompt. I personally feel like this is a bit much, but let's try it out and see what we get out of it. So we hit enter and Loveable started creating our app. And as you can see in the chat here on the left, it's actually laying out the entire plan for us in terms of design features and all of those elements that will be included. And on the right, it's actually building out the app in real time. Well, Laravel's built out the app for us and honestly it looks pretty great. I like the UI here, but one of the things that we need to keep in mind is because we want to manage reservations, we have a ton of data that needs to actually go into our app. We'll have to have a backend for it. And for the backend, what Lovable has is Supabase. So I'll explain how to actually work with Supabase here. Great thing about Supabase is that it's integrated right into Lovable, so you don't really need to do a ton of work other than actually having a Supabase account and creating a project for that. I'll show you how to very quickly create a project for Supabase. So now you're in your Supabase dashboard. What you'll do is you'll hit New project, choose organizations. You'll have to create an organization. I already have one, so I'll pick the existing one. The organization name, name of the project. I'll call this RoomMinder. Set up a password. I'll come up with a random password and I'll pick a region. Because I'm based in Asia, I'll just go with Singapore and I'll hit create new project. So we created our Supabase project. So what we'll do is head back to Lovable and we'll click Supabase right at the top here and then we'll connect the project to our Lovable project. You go to the organization, you have RoomMinder right here. So what I'll do is I'll hit connect. If you take a look at the chat on the left, you'll see that once we hit connect on Supabase, Lovable essentially connected our Supabase project to the app itself. And then we were given a couple of use cases we have now that we're connected to Supabase. Primarily be the use cases being, being able to log in, with an email or password and then storing data. And then of course there's like edge functionalities, kind of like special functions such as payments and notifications, stuff like that. And what we'll do now is continue building out our application. The first feature that we'll add is a user login. And what I also want to add is a logout button that's somewhere on the user dashboard. So let's get Lovable to do that. Once we hit enter, Lovable created tables on the backend on Supabase where we have all of this login data stored. Once All of that was approved. It went ahead and it created a user login. One way to actually create an account to test this would be to go into the backend and create an account on Supabase. What I wanted to do was also include a signup option. So I also have a signup option here. So what I'll do is I'll create an account here and I'll test this out. Awesome. So I have an account created. Let's kind of test out the actual sign-in and awesome, we're in. And we also have that logout button that we asked for. So this looks pretty good. Let's test out the rest of the app. So what we'll do is we'll ask Lovable to fix a couple of things. I think the best place to start is by adding some dummy data. So we'll ask Lovable to include some dummy data. But one of the things that you see probably missing here is the fact that we can't really add any guests. So that's probably the main functionality we need to add in. What I really like about Lovable is that it's really good at picking up errors and fixing them. In my experience, particularly when it comes to like authentication and databases, these AI builders, they tend struggle and I haven't really had that issue with Lovable. And if there has been an issue, like right now when I was trying to include dummy data into the web app, I wasn't logged in. So Lovable very clearly told me that was the issue and it helped me fix it in like a single prompt. We now have some dummy data on our dashboard, but we still can't add guests. And even though Lovable did technically include the ability to add guests through the check-in option, the button that you see right here. But what I want to be able to do is actually add a guest by clicking a button and entering all their details. And ideally I want them to show up in the check-ins list. So we finally have our add guest button, but as you can see on the screen, we have this calendar hovering over our dashboard and that looks super weird. So what we'll do is we'll fix this. And one way to fix this is by taking a screenshot and sending it to Lovable and asking it to fix the issue. So let's try out that functionality and we'll send this screenshot over. This is what I see. Please fix. I feel like it's always great to say please and thank you to the AI because you never know. So while trying to fix this hovering calendar issue, I noticed that I wasn't actually able to add a check-in and check-out date and that issue kept recurring. So what I did was I asked Lovable to use a different approach for fixing that. And what it did is it went in and actually changed the entire calendar. So what we'll do is we'll now test it it out and see whether or not this works. Name: Lion Ashraf. Date: fi.co. Dummy number, dummy date. Select a room, add guest, and awesome! Now we can add guests successfully. Now that I can successfully add guests, what I want to do is instead of having a today's check-in list on the dashboard, I want like an upcoming check-in list. What I'll do is I'll ask Lovable to add this feature. As you can see now, instead of today's check-ins, we have an upcoming check-ins list here along with dates mentioned as well. There's definitely a ton of more things that we need to fix and add, but for now I think we're in a really good spot. So let's try to publish it. So let's hit publish. And with publish you get two options. One is to publish it publicly, which also adds your app to Lovable's page where people can actually look at into the prompts and remix it as well, or privately, which is essentially just for you. What I'll do is I'll go ahead and Deploy it publicly. Hit deploy and our app is live. So let's test it out, see if it works. Español. Oh, I wrote my password wrong. Not a good sign. Well, you know what? I was wrong. It is a good sign because our app is working. Amazing.

I hope you found this video useful. And before I let you go, I just have one piece of advice and that is to just start. Come up with a startup idea, come up with a prompt, pick out a tool like Lovable and give it a go. The worst that could happen is that your app might not work, but honestly, you'll figure it out. Right now is the best time in history to be a startup founder and you definitely definitely owe it to yourself to give it a shot. If there's another tool like Lovable that you want me to try out, feel free to let me know in the comments. Or if you want to share what you've been building, you can do that too. And if you want to turn your startup idea into a fundable business, do check us out at fi.co. I'll see you in the next one.