Lovable Tutorial for Beginners (Best AI App Builder?)

0:00 today we're taking a look at lovable 0:01 which is a brand new AI powered app 0:03 builder now I've tried a number of these 0:06 in the past and I haven't been 0:07 particularly impressed with any of them 0:09 up till this point and I've gravitated 0:11 more towards code Centric tools such as 0:14 cursor and wind surf but after I tried 0:16 lovable I was actually pretty impressed 0:18 so let me show you what it's all about 0:20 and some of the features that really 0:21 make it stand out as with most of these 0:23 tools you're going to start out by 0:25 typing a prompt in here that describes 0:27 what you want to build in this case I'm 0:29 going to be building a note taking app 0:30 that allows you to write a note and 0:32 upload an image and then be able to 0:33 share that note with other users via a 0:36 unique URL it should be somewhat similar 0:38 to Google keep all right so we'll send 0:40 that off and now it's going to start 0:43 doing some thinking and planning on how 0:45 to actually implement this for me all 0:48 right and we see that it's making some 0:49 assumptions it's going to start using 0:51 Tailwind to do some of the styling here 0:54 we got typescript files I think that's a 0:57 good call and it just starts 0:59 implementing all these files for me so 1:00 it looks like it created seven different 1:02 files so you know it's a pretty sizable 1:04 scope that it's working on here okay and 1:06 now it's rendered this preview for us 1:08 okay so it looks nice very well 1:11 formatted um and we can actually take a 1:14 look at the code here very cool so one 1:17 cool thing about lovable is that you can 1:19 hook it up to your GitHub and it will 1:21 actually save all of this code to your 1:23 GitHub which is going to make it much 1:24 easier to then edit the code locally on 1:27 your computer or to share it with 1:29 somebody El else and I think that's a 1:31 really powerful feature that sets 1:33 lovable apart because other tools will 1:35 often times just kind of hold the code 1:37 in their system and there's no way that 1:39 you can get your hands on it to start 1:41 iterating on it from there but lovable 1:43 actually will just commit it to your 1:45 GitHub and that makes it a lot easier to 1:47 work with so I think that's a really 1:49 nice feature now we're going to have to 1:50 connect it to GitHub for it to do that 1:53 but before we do that let's just see if 1:55 this thing works at 1:57 all all right got a little note there 2:01 all right let's try to upload an 2:04 image 2:07 okay all 2:10 right okay so clearly the notes are 2:12 being created I wonder if I refresh this 2:16 if they're still going to be there no 2:17 they're gone so we're going to have to 2:19 actually hook this up to a database 2:22 which is another thing that I think is 2:23 really powerful about lovable is that it 2:26 is deeply integrated with superbase so 2:29 you can actually store all of your 2:30 application data in a real database and 2:33 it's not going to just disappear when 2:34 you reload we we'll have to prompt it to 2:37 actually do that but for now let's go 2:39 back to the GitHub portion of this and 2:42 make sure that we actually save this 2:44 code and can access it from somewhere 2:48 else so in this case I'm going to click 2:50 on this edit code button transfer 2:53 repository I already added my GitHub 2:56 account in a previous project that I did 2:58 with lovable so I'm going to click on 3:00 that um and if you haven't done this 3:03 it'll just walk you through an ooth kind 3:05 of you know sign in with GitHub account 3:08 kind of thing and then you'll be able to 3:10 do the same thing so now let's just 3:13 check it out on GitHub we see it right 3:15 here here's all of the code that it has 3:18 already created for us and the thing I 3:20 love about this is that like I said 3:22 earlier you can actually download this 3:24 and then be able to see it on your 3:25 computer so now when I go to GitHub 3:28 desktop I can clone this 3:30 repository and I'm going to have it 3:32 available locally then I can just open 3:34 it in uh cursor and be able to change my 3:39 code and just to show you the whole flow 3:42 I can then modify this code so let me 3:44 change the button to look a a little bit 3:46 different and then I can commit this 3:51 code so I'm going to commit it I'm going 3:53 to push it and then when we go back to 3:56 lovable it actually knows that we made a 4:00 so it's going to go ahead and update uh 4:03 its current state and you see this 4:05 button is now you know the same color 4:09 all right I changed it back so now it 4:10 looks like that again okay let's keep 4:13 going with lovable though I'm going to 4:14 say this is a great start but we 4:16 actually want to save the notes and 4:17 images in our database can you do that 4:19 using 4:20 superbase okay it's going to it's going 4:23 to confirm with us that we want to use 4:24 super 4:27 base all right it ran into an error I'm 4:30 just going to click that try to fix 4:32 we'll see what 4:34 happens it's asking us for some specific 4:38 API Keys let's see if we can hook it up 4:43 over here this is what I did the last 4:45 time so I'm going to go ahead and create 4:47 a new project with super 4:50 base all 4:54 right so to give some more color to 4:56 what's going on here is that superbase 4:58 is going to be our database it's going 5:00 to persist all of these notes and files 5:03 and it's going to keep them saved so 5:05 when somebody opens our app they're 5:07 going to be able to see their data 5:09 because just building frontend logic 5:11 isn't going to be able to actually store 5:14 that data anywhere that's why we need a 5:16 database involved and the other thing 5:18 that superbase is going to do is 5:20 actually provide authentication for us 5:23 so that we can differentiate users from 5:25 one another so if you log in you'll see 5:28 your notes if I log in see my notes and 5:30 then we'll be able to share them back 5:32 and forth okay so I created that new 5:34 project let's see if I click that here 5:37 now 5:40 connect all right so it created this 5:42 message let's see if it can natively 5:44 connect without me pasting these keys in 5:46 here okay so it was able to 5:49 connect and now it's saying enable sign 5:52 up and login with options yeah that 5:55 makes sense and then we want to store 5:58 data and yeah okay so now it's connected 6:01 now let's try to fix that 6:06 error okay fantastic so it is writing 6:08 SQL here which is going to get executed 6:12 in the database when I click this button 6:15 so let's go ahead and apply those 6:17 changes so it's going to essentially 6:19 create the relevant table here for us 6:22 and now it's going to create a storage 6:23 bucket for the images so again we're 6:26 relying on super base in a number of 6:28 ways here first to store the notes in a 6:30 database and also to store the images in 6:33 a storage bucket but let's see it says 6:35 build 6:36 unsuccessful um let's see if we can have 6:39 it automatically fix this issue as well 6:41 so to go back to GitHub for a second one 6:44 cool thing is that as it makes changes 6:46 it continues to commit them to GitHub so 6:48 you can actually go back to previous 6:50 versions and see how your code evolved I 6:52 think it's a really clean integration 6:55 okay so the errors have been fixed now 6:57 let's try to take a note 7:01 okay we created a note I'm curious to 7:04 see if it's going to appear in our 7:06 actual database 7:11 now okay so if we go to 7:14 superbase check it out we actually have 7:17 a table that we created by running the 7:19 SQL that lovable wrote for us and here's 7:22 my note so now if I refresh 7:26 this we can actually see the note that I 7:28 created so it is being 7:30 persisted now let's try uploading an 7:36 image okay now it had an error let's see 7:39 what the problem 7:41 was probably had to do with the storage 7:44 bucket okay so we need to create a 7:46 storage bucket for it that makes sense 7:49 overall I just like how smooth lovable 7:51 makes things because you're basically 7:53 just in that chat and it will explain uh 7:56 things for you and it will generate code 7:57 to run so you're really just these very 8:00 simple interactions for things that are 8:03 pretty complicated under the hood you 8:04 know setting up a database creating 8:06 tables managing different types all of 8:09 this stuff usually takes a lot more 8:11 effort okay so we should have that 8:13 bucket now let's try this 8:16 again all right create a 8:19 note all right hey check it out it was 8:22 able to save a note with our Blue Duck 8:25 here and if I 8:28 refresh it's still there so this is 8:31 looking really good now let's just 8:33 iterate on the UI a little bit all right 8:35 so it reloads now I can click it'll show 8:39 me I guess the picture this isn't quite 8:41 what I expected so let me just ask it to 8:43 change that this is something that's 8:45 kind of interesting to see it observes 8:48 that note card and edit note dialogue 8:50 are getting quite long so it's 8:52 suggesting that we refactor them which I 8:54 think is a quite important thing to do 8:56 working with these AI tools because once 8:59 your files get really long uh the AI 9:02 just struggles to do a very good job at 9:04 changing them so it is a really good 9:07 idea to refactor proactively and so the 9:09 fact that this actually notices this and 9:12 lets you know proactively uh is a really 9:14 good thing all right now we can see the 9:17 full duck 9:20 here and if 9:22 we okay when I tried to submit the 9:25 change it didn't quite work so let's try 9:27 to fix that 9:34 okay let's try it 9:36 again so it failed to update the 9:44 Note it seems to be getting kind of 9:46 stuck on this point so this is probably 9:48 a moment when I would go in and dig into 9:51 the details of the code which thankfully 9:54 with lovable you can go and do because 9:56 it is so deeply integrated with GitHub 9:59 but I'm just going to skip over this 10:00 issue for now so that we can talk about 10:03 the authentication which is another 10:05 thing that is important for real 10:07 applications that some of these tools 10:09 don't really support but with lovable 10:12 being integrated with superbase we 10:14 should be able to implement that so 10:16 let's go ahead and move on to that 10:17 feature so I'm going to ask it to add 10:20 authentication and login for the app and 10:22 we will use superbase off okay so it's 10:25 asking for some clarifications about 10:28 what kind of user data we're going to 10:30 store and then I'll just say we want 10:32 users to be able to log in via email or 10:35 Google okay so it's got some SQL for us 10:38 so we can store our users in the 10:40 database we'll run 10:43 that all right it's telling us to go to 10:46 the off providers again pretty smooth 10:48 that it just takes us here and we can 10:50 set it up if we enable Google I think we 10:53 need to take some extra steps to set 10:55 that up let's just skip that for now 10:58 we'll just go with the email signin 11:00 approach and hey look at this this is a 11:02 really nice sign-in screen let's sign 11:10 up okay check your email for 11:12 confirmation all right check it out 11:14 confirm your sign up I'll confirm my 11:19 email okay I guess it's uh redirecting 11:22 me to Local Host um which is a bit of a 11:26 problem 11:27 here let me go head and just paste this 11:30 into lovable and see what I should do 11:33 next 11:34 okay so if I go here what is my apps 11:39 URL I think it's this uh lovable URL or 11:43 wherever I'm going to end up deploying 11:44 it but right now I think um this is the 11:48 correct URL and then I wonder if we just 11:51 go there with the access 11:55 token okay it's taking us to the login 11:58 let's see if I I can sign 12:01 in all right there we go I was able to 12:04 log 12:05 in excellent I can log out I'll just 12:10 mess up the password and you see it it 12:13 has uh it handles that properly now 12:16 right now both of these notes are not 12:18 actually associated with my user so it's 12:20 just showing me all of the notes so 12:22 let's have it update this so that it 12:25 when it stores notes it stores the user 12:27 ID and when it retrieves notes it only 12:30 retrieves the notes for that 12:32 user okay so I explained that I wanted 12:35 to associate the notes with my user and 12:38 then when I share the note it should 12:39 have a public link so that anybody with 12:41 that link can actually see 12:44 it okay so we got some SQL here nice to 12:47 be able to interact with all the layers 12:49 of our app from one 12:53 place okay so I no longer see those 12:55 notes because they're not associated 12:56 with my user all right so we'll write a 12:59 note note successfully 13:02 created here it is then if 13:08 I then if I log 13:10 out and let me create a different 13:12 account so we can test this out okay so 13:16 here I am signed in with the different 13:17 account and I don't see the note I can 13:20 create my own notes here but I don't see 13:23 this note 13:34 okay but now if I copy this link and I 13:37 just go to it out here in the 13:40 open Tada we can actually see the note 13:44 even though we're not signed in as that 13:46 user so this essentially meets all the 13:48 requirements that I was looking for 13:49 right being able to create notes they're 13:52 associated with my user being able to 13:54 publicly share them and I was able to 13:56 get all of that working in about 45 13:58 minutes so that really shows you how 14:00 quickly you can start new projects with 14:03 this and the cool thing is because of 14:05 the Integrations they have you're able 14:06 to then pick it up and keep building it 14:09 from there okay so now that I'm finished 14:11 working on this app um one other cool 14:14 thing about lovable is that it's really 14:16 easy to then deploy this so I can just 14:18 click this publish button up here and 14:21 make it public hit 14:23 deploy and it's going to you know put 14:27 this app online so that other people 14:29 people can actually use it here we go 14:31 not snapshare lovable app and we can log 14:34 in and and start using this thing and 14:36 they also have some support for custom 14:38 domains here I haven't tried it out uh 14:40 just yet so if I wanted this to be like 14:43 notes share.com or something like that 14:45 then you know I would be able to do that 14:48 um and that's a really smooth process so 14:50 they'll handle that for you the things 14:52 I'm not totally certain about are how it 14:55 handles like totally backend sort of 14:57 things like if I need to do a bunch of 14:59 web scraping or something like that um 15:01 and how it actually handles these 15:03 deploys and whether it's going to be 15:05 able to autoscale servers for me that's 15:08 something I'll investigate as I continue 15:10 to explore the platform so lovable 15:12 definitely seems like a powerful way to 15:14 start new projects especially if you're 15:16 okay with using superbase and GitHub and 15:19 relying on common Frameworks like react 15:23 uh it's going to actually do a really 15:24 good job of getting a project started 15:26 for you I'm curious to test it out on 15:29 larger code bases to see how it performs 15:32 I do think it's geared a little bit more 15:34 towards getting projects off the ground 15:37 but I will try it with a larger code 15:39 base and see how it performs and then 15:41 give it a more complete review so one 15:43 thing to keep in mind about lovable is 15:44 that it is more expensive than some of 15:46 the other options that are available so 15:49 with the $20 a month you only get a 100 15:53 requests uh for the course of that month 15:55 and so this demo took me I don't know 15:57 about 105 requests 15:59 so you know you're not going to be 16:02 working in this thing all day every day 16:04 like you are with something like cursor 16:06 or wind surf that has unlimited you know 16:08 slow queries you're definitely going to 16:10 hit those limits a lot quicker and you 16:13 know it gets pretty pricey uh pretty 16:15 quickly that being said I think the 16:18 superbase and the GitHub Integrations 16:20 and just the fact that it works very 16:22 smoothly really set it apart from some 16:25 of the other options and I really think 16:27 they've done a great job with the over 16:28 over all user experience it's definitely 16:30 simplified but also because of those 16:33 Integrations it's capable of doing quite 16:36 a lot now lovable isn't the only AI app 16:38 builder out there so check out this 16:40 video to see what I thought about some 16:41 of the other ones as always thanks for 16:44 watching and I'll see you in the next 16:45 one take care