Let's Build A Full Stack App With Lovable.dev AI | Supabase, Auth, Database, API & More

0:00 all right so how cool would it be if you 0:02 can create a fully functional full stack 0:04 web app using AI without writing a 0:07 single line of code so the AI will take 0:09 care of everything like the back end 0:11 front end databases authentication API 0:13 routes and whatnot and most specifically 0:16 we are going to build an AI power recipe 0:18 generator app with a Twist so the user 0:21 can go ahead and capture a picture of 0:23 all the items that they have in the 0:24 refrigerator or arranged on a table and 0:27 they can send it to the AI or the tool 0:28 that we about to develop and the tool 0:30 will go through all the items that we 0:31 have and suggest recipes that could be 0:33 made out of it and upon clicking it it 0:35 will the tool will show the entire 0:37 recipe in detail okay now that's the app 0:39 that we're trying to build and for this 0:41 one we are going to use an AI app 0:43 building platform called as lovable 0:44 dodev and L.D is an AI powered platform 0:48 that you can use to build full stack web 0:50 applications by giving Simple Text 0:52 prompts in English so you could go ahead 0:54 and tell you want to build this kind of 0:55 an app this features are needed and 0:57 these other stuff that I want to do with 0:58 the app and the AI will go ahead and 1:00 write the code and gives you the output 1:02 and you can even deploy it and the best 1:04 part lovable. dev has integration with 1:06 super base so you can go ahead and add 1:08 authentication integrate databases and 1:10 take care of all that activities in a 1:12 single click and I'll explain more about 1:14 L.D and all the features that you has to 1:16 offer throughout this video and now 1:18 without was any further Ado let's jump 1:19 straight in all right so this right here 1:21 is lovable dodev and the first thing 1:23 that you going to do is to sign up for a 1:25 free account so you can go ahead and 1:26 click on the first link in the 1:27 description below and sign up for a new 1:29 account and and once you log in this is 1:31 going to be the interface that you will 1:32 see so as soon as you land on the 1:34 dashboard you will find a huge input box 1:37 where you can go ahead and give details 1:39 as to what kind of app that you want to 1:41 build and what are the features that you 1:42 want to include and all sorts of stuff 1:44 like that and now let me quickly 1:46 introduce the whole UI of lovable dodev 1:48 so up to the top you can find a section 1:50 called as templates and if you open it 1:52 up you'll be able to find a lot of 1:54 starter templates that you can start 1:55 using in a single click for example we 1:57 have the S startup landing page modern 1:59 business landing page and a bunch of 2:01 other landing page templates and if you 2:02 want to build dashboards they have a 2:04 professional admin dashboard crypto 2:06 trading uh dashboard creative portfolio 2:08 website and when we go to tools and app 2:10 section we have a modern chat 2:11 application UI Online Marketplace and a 2:14 bunch of others and if you want to you 2:15 can click on it and click on the start 2:17 building option and start using these 2:19 templates in a single click and now I'm 2:20 not going to use that and if you scroll 2:22 over you can find all the projects that 2:24 you've been working on and if you click 2:25 on the latest one you'll be able to find 2:27 the latest projects that other people 2:28 been working on and if you click on the 2:30 featured option you'll be able to find 2:32 all the featured projects in here and if 2:34 you want to access the same you can go 2:35 ahead and click on one of them and it 2:37 should open it up and you will be able 2:39 to see all the code and also see how 2:41 functional the whole website is so this 2:43 right here is an example of a web app 2:46 that is created using lovable and now to 2:48 quickly get started the first thing that 2:49 you got to do is to enter your app idea 2:52 and all the requirements in this input 2:54 field right here so I'll go ahead and 2:55 quickly paste my app requirements in 2:57 here so as you can see I want to build 2:59 an AI recipe generator website the user 3:01 uploads a photo of items that they have 3:03 in their refrigerator and click generate 3:05 the AI will analyze the items in the 3:07 photo and suggest a few recipes that can 3:09 be made using them as the user selects 3:11 the recipe a detailed recipe should be 3:12 shown on the screen and let's use open 3:15 AI API for this one and now this is the 3:17 prompt that I'm going to give to 3:19 initially start building the app and if 3:20 you want to you can go ahead and include 3:22 all the customized features that you 3:23 want and what are the exact types of uh 3:25 things that you want to include any any 3:27 if you want to give any directions to 3:29 the A you can go ahead and include it in 3:31 here and now if you want to attach an 3:32 image for reference you can go ahead and 3:34 click on this image option and upload a 3:36 image as well and now if you click on 3:37 this configure option you'll be able to 3:39 find the text tag that we're going to 3:40 use to build this app and in this case 3:42 it's we react shat CN UI tailin and 3:44 typescript so all I got to do is to go 3:46 ahead and click on the send button and 3:49 wait for the AI to complete the initial 3:51 version or code the initial version of 3:53 our app and you can go ahead and give 3:55 followup proms or and request changes 3:57 and make the app the way you want it to 3:58 be and now let just wait for the AI to 4:00 complete writing the code all right so 4:02 this right here is the initial version 4:04 of the app that lovable dodev has 4:06 generated for us and up to the top you 4:08 can find a title an instruction and also 4:11 a section to upload your image so you 4:13 can go ahead and either click on this 4:14 one to upload the image or simply drag 4:16 and drop the item so I'll quickly go 4:17 ahead and drag and drop a image and you 4:19 can find the preview in here and I can 4:21 click on the generate recipes option and 4:23 the AI will now for now it's actually 4:25 using Mo data but this is how things 4:27 will look and will actually integrate 4:28 the AI in a bit and if you click on the 4:30 generate recipes option it will show the 4:32 suggested items and we have two options 4:34 right here and if I select this creamy 4:36 mushroom pasta if I click on The View 4:38 recipe option it will now show me a 4:40 detailed you know kind of a recipe the 4:42 ingredients time servings instructions 4:44 and whatnot and now as of now it is 4:46 using a mo data it's not making any call 4:49 to open AI API or anything so I'll go 4:51 ahead and Implement open AI API for that 4:54 I'll go ahead and say uh Implement open 4:58 AI API and I can hit enter so it says 5:01 I'll help you implement the open a API 5:03 integration and ask us to enter our API 5:06 key so the next thing that I got to do 5:07 is to grab my openai API key for that I 5:10 can head over to platform. 5:12 open.com and then I'll click on this 5:15 settings API Keys create new and for 5:19 this one let's put it as 5:21 recipe uh project default one create 5:25 secret key so I'll go ahead and grab my 5:28 API key copy it 5:30 and put it up in here all right so the 5:32 API key is in place and I can click on 5:34 save so it says this project needs to be 5:36 connected to superbase to save secrets 5:39 and as mentioned earlier lovable. div 5:41 has a tight integration with superbase 5:43 and to connect to superbase all you got 5:45 to do is to click on the superbase 5:46 option and you'll be able to find an 5:48 option that says connect superbase and 5:50 upon clicking it you'll be able to 5:52 authorize access to lovable dodev and 5:55 for now I'll go ahead and click on 5:57 authorize lovable and now it says 5:58 connecting to Super base and hopefully 6:00 it should be done in less than 10 6:02 seconds and as you can see I have 6:03 successfully connected my superbase 6:05 account to lovable and if I want to add 6:07 authentication database third party API 6:09 calls or anything else I could easily do 6:11 it using superbase and to create a new 6:13 project all I got to do is to hover over 6:15 this option and click on the option that 6:17 says create new project and for the name 6:19 I'll put recipe next up enter a password 6:21 select a region and I'll click on create 6:23 new project all right so the project is 6:26 now successfully created so I can head 6:28 back to lovable click on the super base 6:29 option click on this one and select this 6:33 one so I can click on the connect option 6:35 and a popup like this will appear and I 6:37 can click on the connect option now this 6:39 way I can easily connect my superbase uh 6:41 account with lavable dodev and it says 6:44 I'm now connecting to superbase and 6:45 let's wait for a few seconds and as you 6:47 can see your app is now connected to 6:49 super base so now let's just go ahead 6:51 and try to sort of copy the API key I'll 6:55 paste it in here and let's say click 6:57 save and hopefully it should work this 6:59 time and as you can see the API Keys 7:01 have been saved successfully and I'm 7:03 hoping this will work now I'll go ahead 7:05 and quickly drag and drop an image again 7:07 this one right here click on generate 7:09 recipes so it says error failed to 7:11 generate recipes please try again so I 7:13 can go ahead and say when I upload the 7:17 image and click generate it shows error 7:23 failed to generate recipes and the AI 7:28 should take care of fixing all the 7:30 errors for us so let's wait all right so 7:33 it has found some solution first I 7:35 notice we need to create a table in 7:36 super base all right so to handle the 7:39 opena integration properly we need to 7:40 create a new table in super base and for 7:43 that we'll need to create a recipes 7:44 table first okay got it after you 7:47 approve these SQL commands I'll provide 7:48 the code changes to fix the recipe 7:50 generation functionality so it's 7:52 creating a new table called as recipes 7:55 it's adding RLS policies then allowing 7:57 public read access and only allow 7:59 authenticated users to insert so I can 8:01 go ahead and click on maybe copy this 8:03 one and click on apply 8:06 changes all right so lovable. Dev will 8:10 actually automatically run this for us 8:12 okay that's cool so I thought I I might 8:14 have to go to this SQL editor section 8:15 and manually paste the content and 8:17 execute it but no but it seems like 8:19 loveable has already done the migration 8:20 for us and now if I head over to table 8:23 editor I should be able to find the 8:24 recipes Table and there we have it all 8:27 right so that's really cool so lovable 8:29 has actually created the table and added 8:31 it to our superbase project so that's an 8:33 interesting thing so let's wait so it's 8:36 now changing the code to make the recipe 8:38 generation functionality to work so 8:40 let's wait this is an interesting one so 8:42 it says the index. TSX file is getting 8:44 quite long so after confirming these 8:46 changes work we should consider 8:48 refactoring it into small components for 8:50 better maintainability that's also cool 8:52 so let me quickly go ahead and drag and 8:53 drop the image again and let's click on 8:55 generate recipes and let's 8:58 see uh it failed again now that's 9:02 something okay what is 9:05 it all right so I'm not sure so I can go 9:08 ahead and click on try to fix it option 9:10 all right so it says I see the issue the 9:12 error occurs because we trying to call a 9:14 superbase edge function and it is asking 9:17 us to enter the API key again so I'll go 9:19 ahead and copy it again and hopefully it 9:22 works this time so I'll paste it in here 9:24 click on Save and let's see API key has 9:27 been saved successfully and it's says 9:29 couldn't deploy superbase functions all 9:31 right so that's an interesting one uh 9:34 let me click on try to fix it again all 9:36 right so let me quickly go ahead and 9:37 drag and drop the image again click on 9:39 generate recipes and hopefully things 9:41 will work now so let's wait it says 9:44 analyzing 9:46 ingredients and as you can see we have 9:49 got recipe suggestions and based on the 9:51 image that we uploaded uh we actually 9:54 have an error so we'll deal with that 9:55 later uh but as you can see the AI has 9:59 suggested us three uh recipes and as you 10:02 can see we have I guess mushroom uh beef 10:05 then we have a couple of other ve 10:06 veggies in here and the suggested 10:08 recipes are beef and mushroom stir fry 10:11 ginger beef skewers with grilled 10:12 vegetables and saory beef and vegetable 10:15 ceral okay now these are the three 10:16 recipes that the AI has suggested for us 10:18 and for now let me quickly go ahead and 10:20 click on the first option beef and 10:22 mushroom stir fry and click on The View 10:24 recipe option and there you have it we 10:27 have the ingredients the title the time 10:30 it takes the servings and also the 10:32 instructions to prepare the same all 10:34 right so we basically went ahead and 10:36 uploaded an image of all the items that 10:38 we have in a refrigerator and the AI has 10:40 taken all the ingredients and it has 10:42 given us the recipe and for let's say I 10:44 want to try a different one we have 10:45 another one here so I can click on The 10:47 View recipe option and it should show us 10:49 the recipe as easy as that so now the 10:52 core functionality of our app is indeed 10:54 working and this is exactly what I 10:56 wanted so now let's just go ahead and 10:58 try to implement authentic into our app 11:00 so that only authenticated users are 11:01 allowed to use our app so I can simply 11:03 go ahead and say add authentication to 11:08 our app and all I got to do is to press 11:10 enter and hopefully it will take care of 11:12 all that stuff for me okay so let's wait 11:14 all right so it says I'll help you add 11:15 authentication to the app and first let 11:17 me check if we need to store the user 11:19 profile data all right so it's creating 11:22 a couple of tables for example public. 11:25 profiles enabling RLS profile policies 11:28 create a new function all right so I'll 11:31 go ahead and click on this apply changes 11:32 option and it will automatically apply 11:34 the migration for us and after it is 11:36 done we should be able to see the table 11:38 up in here so let's we already have it 11:40 in here so the profiles table is up and 11:42 live so it has an ID username Avatar URL 11:45 created at updated at etc etc all right 11:48 so it says implemented authentication 11:50 with the following features so it added 11:52 a login page a log out button main route 11:54 to require authentication so the main 11:56 route is actually protected and only if 11:58 a person logs in in they're able to 12:00 access the app and first up let me go 12:01 ahead and click on this don't have an 12:02 account option I'll select my email 12:04 address and put a password as well let's 12:07 say a random password and I click on 12:10 sign up and there you have it I'm 12:12 successfully logged in and I have 12:14 temporarily disabled email uh 12:16 verification by the way so only people 12:17 within the organization can do that and 12:19 I just went to uh superbase 12:21 authentication settings and providers 12:24 and I disabled this confirm email option 12:27 but if you enable this option users will 12:28 be only allowed to use your app after 12:31 they have done the verification so a 12:32 link will be sent to their email and 12:34 user has to click on it and after the 12:36 verification they'll be able to log in 12:37 and if I go to the user section I should 12:39 find my newly added user right here all 12:42 right so let me quickly Go I mean I'm 12:44 already logged in by the way so I you 12:45 can find a log out button and yeah 12:47 that's it authentication is implemented 12:49 so let me quickly go ahead and log out 12:51 first and put my 12:55 email the password sign in there you 12:59 have it authentication implemented in a 13:01 JY and next up let's say I want to add a 13:03 new functionality so basically I want to 13:06 move the core app okay this part right 13:08 here I want to move it to Let's say/ 13:10 recipe and as for the root page I want 13:12 to convert it into a landing page 13:14 explaining or about our app and give a 13:16 cool design as well so I'll go ahead and 13:18 say change the main app to/ recipe 13:26 directory and change the the rout to a 13:30 landing page with some 13:34 important info about our app so I can go 13:38 ahead and click on enter and let's wait 13:40 so basically what I want is I want the 13:41 landing page or the uh root of our page 13:44 to be you know a page giving some 13:46 general information about our app and to 13:48 move the entire recipe generator to/ 13:50 recipe uh section so let's wait for it 13:52 to complete and reorganize everything 13:54 else so let's wait all right so there we 13:56 have it and let me quickly open it up in 13:58 a new tab so this right here is the 13:59 landing page and if I click on the start 14:01 cooking option it asks me to log in so 14:03 let me go ahead and put my email and 14:06 password and click on sign in and it 14:09 should Now take me let's say to the 14:11 dashboard and here I can go ahead and 14:13 upload image and generate recipes and do 14:15 all that stuff for me so that is how 14:17 simple it is to create a full stack app 14:19 using lovable dodev so we have 14:22 implemented authentication databases API 14:24 routes and created a landing page and 14:26 even the functional part and pretty much 14:28 every everything else is taken care of 14:30 by Ai and now let's say I want to modify 14:32 the app a bit more for example let's say 14:35 I want to change the entire look and 14:36 feel of the app especially the recipe 14:38 generator and I also want to implement a 14:40 feature where there should be a save 14:43 option and when I click on the save 14:44 option the recipe generated should be 14:46 saved to my saved section and I should 14:48 be able to access all of that by going 14:50 to a saved uh section page all right so 14:52 that is basically what I'm trying to 14:53 implement so I'll head back to lovable 14:55 and I'll say change the entire look 15:04 saved page all right so I'll go ahead 15:07 and click on enter all right so lovable 15:10 has started writing the code for the 15:11 same and it is now creating a new table 15:14 called as saved recipes on our superbase 15:16 project so I'll go ahead and click on 15:17 the apply changes option and that way we 15:20 should see a new table in our database 15:23 and what was it table editor and there 15:25 we have it saved recipes and now the 15:28 migration is successful and I guess it's 15:30 going to implement all other uh changes 15:33 now so let's wait till it is done all 15:35 right so it says I've updated the design 15:36 and implemented the save recipe 15:38 functionality so let me quickly go ahead 15:40 and refresh the page to see the changes 15:42 and as far as I can tell the UI hasn't 15:44 really changed much so let's see if the 15:46 saved functionality is implemented so 15:48 I'll go ahead and drag and drop a 15:50 different image this time so this one 15:52 right here click on generate recipes and 15:55 it says analyzing ingredients and let's 15:57 wait h H so we indeed see some changes 16:01 in terms of the visual aspect because we 16:02 can see a nice gradient effect and also 16:05 a nice shadow on Hover and we also have 16:08 this heart icon right here which we can 16:10 use to save the recipe to the saved 16:12 section as well for example let me go 16:13 ahead and say beef and bean taco bowls I 16:16 can click on view recipe and here we 16:18 have the entire recipe and if I click on 16:20 back to recipes we have it in here and 16:22 to save it all I got to do is to click 16:23 on the save option and it says recipe 16:26 saved recipe added to your saved 16:28 collection and if I go to Let's say/ 16:30 saved I should be able to find all those 16:33 uh recipes that I saved hopefully so 16:35 let's see all right so it seems like the 16:37 saved page is not working so I can go 16:39 ahead and say slash saved page is not 16:43 working 16:45 also add a Navar with link to/ saved 16:51 page as well so I'll go ahead and hit 16:53 enter and let's wait for a few seconds 16:55 all right so seems like the changes are 16:58 made live and as you can see we have the 17:00 saved recipe section right here all 17:02 right so it has generated the recipe so 17:04 I quickly went ahead and uploaded the 17:05 image again and here we have a couple of 17:07 recipes and I'll go ahead and let's say 17:10 save a bunch of them and to view it 17:12 obviously you can click on The View 17:13 button and now that I saved some recipes 17:16 I should be able to view that by going 17:17 to the saved recipes section so if I 17:19 head over to saved recipes well I'm 17:22 unable to see so 17:24 right if I refresh this 17:26 table it does not really work all right 17:29 so all I got to do is to say after I 17:33 click the save button I can't find the 17:37 recipe in the saved page please fix and 17:43 I'll hit enter and let's wait for it to 17:45 fix the error all right so the saved 17:48 functionality is now working and I added 17:50 a couple of these items or recipes to 17:52 the saved section and if I click on the 17:54 saved recipes option and if I refresh it 17:56 I should be able to find all the items 17:58 that has saved and if I want to view 18:00 that all I got to do is to click on this 18:01 view recipe option and it should show me 18:04 the entire step and if I want to uh view 18:06 the other one I can click on The View 18:07 recipe option and everything is in place 18:10 so we built an AI power recipe generator 18:13 app where users can go ahead and upload 18:15 a image of all the items or ingredients 18:17 that they have and the AI will go ahead 18:19 and suggest all the recipes and even 18:21 view detailed instructions as well and 18:23 if you want to deploy your app all you 18:24 got to do is to click on this publish 18:26 icon click on the deploy option and you 18:28 should be able ble to deploy it to a 18:30 custom domain from lovable. and if you 18:32 already have a custom domain you can go 18:34 ahead and use it and as you can see the 18:36 site is now published and is up and live 18:38 and anyone can access this website by 18:40 going over to this link and if I open it 18:42 up in a new tab I should be able to see 18:45 the app so there you have it and since 18:47 I'm not logged in I will be asked to log 18:48 in and you can take it up from there all 18:50 right so this is how simple it is to use 18:52 loveable dodev to create a full stack 18:55 application with databases 18:56 authentication front end backend API 18:58 routes and pretty much everything so as 19:01 you saw in the video I went ahead and 19:02 created an AI power recipe generator app 19:05 integrating open aai and doing all that 19:07 cool stuff like adding the saved 19:09 functionality databases authentication 19:11 and everything else now you can to go 19:12 ahead and start building apps like these 19:14 using lovable dodev and for that all you 19:16 got to do is to click on the first link 19:18 in the description below sign up for a 19:19 free account and start using the 19:20 platform so I hope you guys found this 19:22 video useful and if yes make sure to 19:23 subscribe and I'll see you in the next 19:25 one