How to Build an App with Lovable AI in 30 Minutes

0:00 being a startup founder can be tough 0:01 you're competing with companies with a 0:03 ton of market share way more resources 0:05 than you and way more experience than 0:06 you but there is one thing that they 0:08 don't have and that's your ability to 0:09 move quickly and thanks to AI you can 0:11 now move faster than ever before hey 0:14 Daniel here from the founder Institute 0:15 and today I'm going to show you how to 0:16 build a prototype for your startup using 0:18 lovable so let's get started first 0:20 things first what exactly is lovable 0:21 lovable is an AI engineer that helps you 0:24 create web apps using plain text prompts 0:26 it's a lot like the other AI web app 0:29 Builders out there right now like bolt 0:31 and repet but there is of course a 0:33 difference in functionality creating an 0:35 actual account on lovable is super easy 0:37 head on over to L.D signup you have a 0:40 couple of different options here you can 0:41 use your email you can use Google or you 0:43 can use GitHub if you want to you know 0:45 manage store and like collaborate on 0:47 your code let's talk pricing real quick 0:49 with lovable the great thing is there's 0:50 a free tier here and the free tier comes 0:53 with five credits a day and 30 credits 0:55 in total a month and a credit is 0:57 essentially a message so you get total 1:00 of five messages a day that you can use 1:02 to build out your application now I 1:05 personally don't think that's enough if 1:08 you're you know intending to build out a 1:10 a full-on prototype and for that I 1:12 actually recommend the $20 starter 1:14 package with that comes about 100 1:17 credits a month and that's honestly a 1:20 lot better especially if you're 1:21 intending to create just the one 1:23 application we're logged into lovable 1:25 right now and what you'll see in front 1:26 of you is the main text box where we'll 1:29 enter in our promp PRP so that the AI 1:31 engineer can start building out our web 1:33 app and there are two other options here 1:34 right at the bottom one is attach this 1:36 essentially lets you attach an image or 1:39 diagram that you can use to guide 1:40 lovable on what you want your app to 1:42 look like or the functionality behind it 1:45 and then there's also the import from 1:46 figma button and this essentially lets 1:48 you take a figma design and turns it 1:51 into a full-on web app maybe that's 1:53 another video for another day let me 1:55 know if you want us to maybe test that 1:57 out okay so let's get prompting and and 2:00 today what I have in mind is a web app 2:02 for small hotel owners to mind check-ins 2:03 and reservations the UI should be simple 2:06 intuitive and easy to use as far as 2:08 prompts are concerned my recommendation 2:10 is always to kind of start off super 2:11 simple and I do think that you should 2:14 maybe also describe what you want the 2:16 app to look like because eventually what 2:17 will happen is when the AI engineer 2:20 builds out your app you would want to 2:22 make changes so I think this is kind of 2:24 a better way to manage the number of 2:26 credits that you have here's a bit of a 2:27 pro tip for you if you're not happy with 2:30 the prompt that you've created or if 2:32 you're not able to you know put what you 2:34 want into words you can always head on 2:36 over to chat GPT and ask it to refine 2:39 The Prompt so let's try that out okay so 2:42 what I have here is a pretty detailed 2:45 prompt I personally feel like this is a 2:47 bit much but let's try it out and see 2:49 what we get out of it so we hit enter 2:51 and loveable started creating our app 2:54 and as you can see in the chat here on 2:56 the left it's actually laying out the 2:59 entire PL plan for us in terms of design 3:01 features and all of those elements that 3:04 will be included and on the right it's 3:07 actually building out the app in real 3:09 time lobel's built out the app for us 3:11 and honestly looks pretty great I I like 3:14 the UI here but one of the things that 3:17 we need to keep in mind is because we 3:19 want to manage reservations we have a 3:22 ton of data that needs to actually go 3:24 into our app we'll have to have a 3:26 backend for it and for the backend what 3:28 lovable has is super base so I'll 3:31 explain how to actually work with super 3:32 base here great thing about super base 3:34 is that it's integrated right into 3:36 lovable so you don't really need to do a 3:39 ton of work other than actually having a 3:41 superbase account and creating a project 3:43 for that I'll show you how to very 3:44 quickly create a project for superbase 3:46 so now you're in your superbase 3:48 dashboard what you'll do is you'll hit 3:51 new project choose organizations you'll 3:53 have to create an organization I already 3:55 have one so I'll pick the existing one 3:57 the organization name name of the 3:59 product project I'll call this room 4:01 minder set up a password I'll come up 4:04 with a random password and I'll pick a 4:07 region uh because I'm based in Asia I'll 4:10 just go with Singapore and I'll hit 4:12 create new project so we created our 4:14 superbas project so what we'll do is 4:16 head back to lovable and we'll click 4:19 super base right at the top here and 4:22 then we'll connect the project to our 4:25 lovable project you go to the 4:26 organization you have room minder right 4:29 here so what I'll do is I'll hit connect 4:32 if you take a look at the chat on the 4:33 left you'll see that once we hit connect 4:35 on super base L will essentially 4:37 connected our superbase project to the 4:40 app itself and then we were given a 4:43 couple of use cases we have now that 4:45 we're connected to superbase primarily 4:47 be the use cases being being able to log 4:50 in with an email or password and then 4:53 storing data and then of course there's 4:55 like Edge functionalities kind of like 4:57 special functions such as payments and 5:00 notifications stuff like that and what 5:01 we'll do now is continue building out 5:04 our application the first feature that 5:06 will add is a user login and what I also 5:10 want to add is a logout button that's 5:12 somewhere on the user dashboard so let's 5:14 get lovable to do that once we hit enter 5:17 loveable created tables on the back end 5:19 on super base where we have all of this 5:21 loging data stored once all of that was 5:23 approved it went ahead and it created a 5:26 user login one way to actually create an 5:29 account to test this would be to go into 5:31 the back end and create an account on 5:34 super base what I wanted to do was also 5:36 include a signup option so I also have a 5:39 sign up option here so what I'll do is 5:41 I'll create an account here and I'll 5:44 test this out awesome so I have an 5:46 account created let's kind of test out 5:48 the actual sign in and awesome we're in 5:51 and we also have that log out button 5:53 that we asked for so this looks pretty 5:55 good let's test out the rest of the app 5:57 so what we'll do is we'll ask lovable to 5:59 to fix a couple of things I think the 6:01 best place to start is by adding some 6:03 dummy data so we last level to include 6:05 some dummy data but one of the things 6:07 that you see probably missing here is 6:10 the fact that we can't really add any 6:11 guests so that's probably the main 6:13 functionality we need to added what I 6:15 really like about lovable is that it's 6:16 really good at picking up errors and 6:18 fixing them in my experience 6:20 particularly when it comes to like 6:22 authentication and data bases these AI 6:25 Builders they tend to struggle and I 6:27 haven't really had that issue with 6:28 lovable and if there has been an issue 6:31 like right now when I was trying to 6:33 include dummy data into the web app I 6:35 wasn't logged in so lovable very clearly 6:37 told me that was the issue and it helped 6:39 me fix it in like a single prompt we now 6:42 have some dummy data on our dashboard 6:44 but we still can't add guests and even 6:47 though lovable did technically include 6:50 the ability to add guests through the 6:51 check-in option the button that you see 6:54 right here but what I want to be able to 6:56 do is actually add a guest by clicking a 6:59 button and entering all their details 7:01 and ideally I want them to show up in 7:03 the check-ins list so we finally have 7:05 our add guest button but as you can see 7:08 on the screen we have this calendar 7:11 hovering over our dashboard and that 7:13 looks super weird so what we'll do is 7:15 we'll fix this and one way to fix this 7:17 is by taking a screenshot and sending it 7:19 to lovable and asking it to fix the 7:21 issue so let's try out that 7:23 functionality and we'll send the 7:25 screenshot over this is what I see 7:29 please f I feel like it's always great 7:31 to say please and thank you to the AI 7:33 because you never know so while trying 7:35 to fix this hovering calendar issue I 7:37 noticed that I wasn't actually able to 7:39 add a check-in and checkout date and 7:41 that issue kept recurring so what I did 7:43 was I asked lovable to use a different 7:45 uh approach for fixing that and what it 7:48 did is it went in and actually changed 7:51 the entire calendar so what we'll do is 7:53 we'll now test it out and see whether or 7:55 not this works name ashra date fi do Co 8:00 dummy number dummy date collect a room 8:04 add guest and awesome now we can add 8:06 guest successfully now that I can 8:07 successfully add guest what I want to do 8:10 is instead of having a today's check-in 8:13 list on the dashboard I want like a 8:16 upcoming check-in list so what I'll do 8:17 is I'll ask lovable to add this feature 8:20 as you can see now instead of a today's 8:22 check-ins we have an upcoming check-ins 8:24 list here along with the dates mentioned 8:27 as well there's definitely a ton of more 8:29 things that we need to fix and add but 8:31 for now I think we're in a really good 8:33 spot so let's try to publish it so let's 8:35 hit publish and with publish you get two 8:36 options one is to publish it publicly 8:39 which also adds your app to lovables 8:43 page where people can actually look at 8:45 into the prompts and remix it as well or 8:48 privately which is essentially just for 8:50 you what I'll do is I'll go ahead and 8:52 deploy it publicly hit deploy and our 8:55 app is live so let's test it out see if 8:58 it works 9:00 I wrote my password wrong not a good 9:02 sign well you know what I was wrong it 9:04 is a good sign because our app is 9:06 working amazing I hope you found this 9:08 video useful and before I let you go I 9:09 just have one piece of advice and that 9:11 is to just start come up with the 9:13 startup idea come up with a prompt pick 9:15 out a tool like lovable and give it a go 9:17 the worst that could happen is that your 9:18 app might not work but honestly you'll 9:20 figure it out right now is the best time 9:22 in history to be a startup founder and 9:23 you definitely owe it to yourself to 9:25 give it a shot if there's another tool 9:27 like lovable that you want me to try out 9:28 feel free to let me know in the comments 9:30 or if you want to share what you've been 9:31 building you can do that too and if you 9:33 want to turn your startup idea into a 9:34 fundable business do check us out at fi. 9:37 I'll see you in the next one 9:39 [Music]