Tutorial: Build Youtube in Lovable

0:00 in this video we'll be building a 0:02 YouTube clone in an AI tool that has 0:05 blown my freaking mind more than any 0:09 tool ever has there's just something 0:11 magical about not having to know any 0:13 code and basically chitchatting your way 0:16 to an app that has login search upload 0:20 and even comments and likes it's crazy 0:23 this would probably take an engineer 0:25 days if not weeks to build out just a 0:28 year ago but in this video we'll do it 0:30 in 30 minutes let's get right into it 0:34 just go to lovable dodev and sign up or 0:37 if you're the moneys saving kind of 0:39 person you can use my link below to get 0:41 a 10% discount the next steps will be to 0:45 follow specific best practices for AI 0:48 building with lovable this is to make 0:51 sure that we get the best possible 0:53 outcome so make sure you don't skip 0:56 ahead here step one we need to stop and 0:59 think anytime we build something with AI 1:02 this is what we should ask ourselves 1:05 what are we building here while it might 1:07 not sound like it this step is 1:10 absolutely freaking crucial because the 1:12 better your instructions are the better 1:15 the AI will do his job because you will 1:17 encounter errors when building stuff 1:21 even with AI and although it's usually 1:23 as easy as clicking a fix this for me 1:26 please button we still want to avoid it 1:29 as as much as we can so how do we do 1:32 this well we create a little list of 1:35 requirements and if you don't want to 1:37 type it out yourself you can find the 1:39 promt template I'm using in the link in 1:41 the description below basically though 1:43 what we have is an app overview where 1:46 we're kind of just describing what the 1:48 app is about then we have list of pages 1:51 so all the pages we want to have in our 1:53 app we have functionality per page we 1:55 have the database requirements so we're 1:59 going to have use for example so we're 2:01 going to upload videos likes comments 2:02 Etc all of these things need to be part 2:05 of the database we have aesthetic and 2:08 visual preferences we have the sequence 2:11 in which we want to develop and we 2:13 usually start with UI and then we get 2:15 into connecting the database later and 2:18 lastly we just have some UI details for 2:20 the first pages of our 2:22 app all right so let's jump into lovable 2:26 I'm going to select the little text 2:29 field here or the input field I should 2:31 say and I'm going to paste The Prompt 2:34 that we had the next step for me is I'm 2:37 going to jump over to a figma file where 2:40 I've actually created this layout 2:42 beforehand this is going to be helpful 2:45 because it will give lovable a very 2:47 clear instruction on how I want things 2:50 to look with that said though it's 2:52 definitely not a necessity you could 2:55 just create it with a prompt straight up 2:58 and it's still going to yield very good 3:00 results for me I want a very specific 3:03 kind of UI that's why I'm using these 3:05 screenshots so I'm going to just take a 3:09 screenshot and jump back into lovable 3:12 and paste it in here now I'm going to 3:15 change this to be a private project for 3:17 now and then we're just going to click 3:21 the button and let lovable do its 3:24 magic now something I want to say here a 3:27 little 3:28 disclaimer that you might hate me for 3:30 but it comes from my heart here I love 3:33 this tool the first time I started using 3:36 it like 5 minutes in I just knew I had 3:40 to contact lovable and see if they would 3:44 be interested in a collab and it turns 3:47 out they were interested so this is a 3:50 sponsored video it's a collab video but 3:54 genuinely I think this is the best tool 3:57 of its kind on the market and you'll see 4:00 why with your own eyes just here so 4:04 let's let it load here and see what it 4:06 comes up with there we have the first 4:08 page like a pretty amazing job just out 4:12 of the gate here amazing now let's fix 4:16 the logo 4:18 type in the 4:21 center and the 4:23 navigation here it 4:26 is and I'm going to upload in the 4:29 attached section my logo type then I'm 4:33 just going to send that and there we go 4:36 we have the logo type here we have the 4:38 logo type here now some things I want to 4:40 add is I want the Navigation logo type 4:46 to always link back to the welcome 4:52 page if you're not logged 4:55 in and if you're logged in 5:00 we'll route it to the feeds 5:07 page also I want to 5:11 connect the sign 5:16 in 5:18 Button as 5:19 well as the get started button to the 5:26 sign in 5:28 page the 5:30 sign up links should go to the sign up 5:37 page okay so let's see get started takes 5:41 us to a 404 so that doesn't work sign in 5:44 as well sign up as 5:48 well and since we're already on the page 5:52 I do get a link indicator here so I 5:54 think that works now let's make sure 5:57 that the get start 6:01 Ed button is called sign 6:05 in and that it takes us to the sign in 6:11 page all right so let's see if this 6:15 works 6:17 nope and you see here we get a 404 error 6:22 but lavable doesn't see this so I want 6:25 to make sure to tell it as I click on 6:29 these sign 6:30 in button it takes me to this 404 page 6:36 please fix 6:38 that and while this is getting fixed 6:41 you'll run into these kinds of issues 6:44 with lovable with AI any coding tool 6:46 really where you have some kind of error 6:50 that is happening here and lovable does 6:53 it doesn't see it itself sometimes it 6:57 will know that there's an error and it 6:58 will even give you a button to fix it 7:01 right but in this case I had to provide 7:04 that context for it to understand that 7:07 there was an error and now it works so 7:10 if I click back here and I click sign in 7:13 that works if I click on sign in here it 7:17 also works if I click on sign up still 7:20 doesn't work so let's fix that let's fix 7:23 the 7:24 sign up link as well it gets 7:30 uh 7:31 4042 now if we try it sign up works as 7:35 well awesome now the next step we want 7:38 to get into is actually creating the 7:41 database for our project because if we 7:44 want functionality that is more than 7:47 just showing stuff on the screen here 7:50 that will basically disappear if we want 7:52 to have users if we want to have videos 7:55 if we want to have likes and comments 7:57 Etc we need to connect the into a 8:00 database and in lovable it's super 8:02 simple to do that so I'm going to go 8:04 here to super 8:05 base this is like integrated into 8:08 lovable which makes it super easy I'm 8:11 going to click on connect to a project 8:13 here my email address then I'm going to 8:16 create a new project in here I'm going 8:19 to say this will be 8:23 food tube with three O's very important 8:27 then we're going to have a random 8:30 random password and we're just going to 8:33 create this new project now while this 8:36 is creating itself I'm also going to 8:40 mention that if you guys like this kind 8:42 of stuff like me creating tutorial 8:45 content on AI um which I basically said 8:48 I wouldn't be doing but lovable just got 8:50 fire in me again for some kind of 8:53 tutorials if you like this if you want 8:56 to get more into the creative f future 9:00 of this AI world that we're living in 9:03 check out my newsletter where I 9:05 basically cover everything that is 9:07 needed to become irreplaceable in this 9:10 era of AI I have the link in the 9:13 description now some awkward silence and 9:17 then there we have it the project is set 9:20 up here in super base we don't really 9:22 need to think much more about that for 9:25 now if we go back into lovable this is 9:29 now set up here we're going to go here 9:31 though to the project and we'll see 9:34 active projects food tube and we can 9:37 connect it so I'm going to do that I'm 9:39 going to connect it we're going to get 9:41 this Modo click connect and now you can 9:44 see that it's connected to our project 9:47 this is important because now I want to 9:49 get into the creation 9:52 of uh basically users right I want to be 9:55 able to create an account so we can log 9:57 in in order to do that I'm going to tell 10:00 lovable 10:02 awesome now let's make sure that 10:06 authentication works I'm going to hit 10:09 enter and it gives me this SQL code here 10:14 that I can read if I'm not lazy which I 10:17 am so I'm just going to assume that this 10:18 is good and I'm going to click apply 10:20 changes and this is the cool thing right 10:23 if you're lazy like me if you don't know 10:25 a bunch of code I do know some code but 10:28 I'm not a 10:30 programmer or an engineer by any 10:33 means then this like we can now create 10:36 our own ideas like this as creatives I'm 10:39 creating a YouTube clone here just by 10:41 chitchatting right all right so now it 10:44 says to me that it should be set up so 10:47 let's see here if I add my 10:51 email um actually I was thinking of 10:54 having a username here as well so let's 10:57 add that 10:59 thanks 11:01 actually let's also add a 11:06 username to the sign up 11:11 page make sure it's added in the 11:15 database 11:17 too and there we go so now we have the 11:19 email so I'm going to use my email and 11:22 we have a username going to go with Tim 11:24 Gabe then we're going to add a password 11:28 I'm just going to paste some in there 11:30 and now the Moment of Truth success and 11:34 here it even says please check your 11:36 email to verify your account so it even 11:38 sends me an email to confirm my account 11:42 here so if I check for super base I have 11:45 the email here if I click into it you'll 11:48 see this it looks like it's broken it's 11:51 not though it works we haven't fixed 11:54 this page yet but that's fine we don't 11:57 need it because now we're validated 12:00 so if I go here you can see that it 12:02 automatically took us to login page I 12:05 take my email I take my password and I 12:09 sign in nothing happens all right we can 12:14 fix that so I'm telling it that the Au 12:17 works but the login 12:19 doesn't now though I want to show it my 12:22 next screenshot so I want to take a 12:25 screenshot of this which is the homepage 12:28 or the feeds page 12:29 when we have no videos which we don't 12:32 have yet right so I'm going to put that 12:34 in there and say this is the home/ feeds 12:39 page when we don't have videos 12:44 uploaded please make 12:47 sure that we end up here as we log 12:54 in also make sure that the login 13:00 works all right so let's try again 13:03 signing in and there we are I mean it 13:05 basically almost got it right from the 13:08 start here some things that we need to 13:10 fix like you can see here this is 13:12 supposed to be an avatar button the 13:15 search doesn't look quite right this 13:17 image here is not quite right so let's 13:20 say 13:21 awesome you 13:25 rock let's update the center image to 13:29 the one I upload here I'm going to 13:34 attach this image that I 13:38 have also let's make sure the search bar 13:45 is 13:47 rounded without any border lastly let's 13:52 make sure that the Avatar icon actually 13:57 has an icon and that it has a popover on 14:03 click that allows you to log 14:07 out 14:08 boom now I basically added a bunch of 14:12 stuff now into this prompt which could 14:16 become a problem we'll see sometimes it 14:18 figures it out sometimes it doesn't 14:21 again rule of thumb is that the fewer 14:24 instructions you give it the better it 14:28 is going to be at actually executing it 14:30 correctly however we also have limited 14:33 amount of tokens that we can use unless 14:36 we want to buy more of them so it's a 14:39 fine balance you have to find there okay 14:43 boom it got most of the stuff right the 14:46 image doesn't look quite right so let's 14:49 say 14:52 awesome let's fix the image let's make 14:56 sure the image in the center 14:59 fits within the container right now it's 15:04 getting 15:05 cropped groped 15:07 cropped and there we go now we can see 15:10 here that it still has this background 15:12 color from the container the image is in 15:16 so we could say remove the 15:19 background color of the container of the 15:23 image 15:26 please 15:27 also let's 15:30 tie it in up or let's make the search 15:35 bar 15:37 shorter 15:39 and add some add like six pigs or maybe 15:44 four PX more in 15:49 padding uh 15:52 horizontally and there we go I mean it's 15:54 not perfect it's not exactly what I had 15:57 here it's not looking 15:59 as crisp I would say but we could just 16:03 continue doing this and making sure that 16:05 it looks exactly like we want but for 16:08 now this is fine what I want to do now 16:11 though is I want to make sure these 16:13 upload buttons work I say great now 16:17 let's make sure that the upload 16:21 buttons trigger a modal where we can 16:26 upload the videos 16:30 include all the fields needed like 16:34 thumbnail 16:36 video title and 16:40 description now we got something here 16:42 saying unwanted changes so it basically 16:46 asks me to just ask the same thing again 16:50 but in a different way so let's take 16:53 what I just wrote and let's say let's 16:55 make sure that upload buttons trigger 16:58 model where we can upload the 17:02 videos going to keep it at that and see 17:04 what 17:05 happens all right let's see if it works 17:08 upload boom Works upload boom and it 17:12 works we have the title description the 17:14 thumbnail and the video so if we go 17:18 through this test 17:21 testing choose a file for the thumbnail 17:24 let's say that image the 17:27 video and we click upload nothing 17:30 happens yet so now let's say 17:35 awesome 17:37 again now let's make sure that the 17:43 upload actually takes place as we click 17:48 upload 17:50 video 17:52 granted we filled out all the 17:56 fields correctly 17:59 and uploaded the 18:03 items and there we get this SQL code 18:07 again that we just 18:09 apply also again it does help I would 18:13 encourage people to read these things 18:16 and to actually immerse themselves in 18:18 the code as much as possible because 18:20 it's just going to be easier for you to 18:22 debug and to create with AI overall but 18:27 if you are lazy like like me you're 18:30 going to get by still because the tool 18:33 just does the work for us all right so 18:36 we can see that the file is getting big 18:38 so it's asking us to or asking us if we 18:41 want to refactor and make it smaller for 18:44 better maintainability but before we do 18:46 that let's see if it actually works so 18:50 uh let's say homemade 18:52 pasta this is a 18:56 description that spend some thing like 18:59 one row then we have a 19:03 thumbnail let's take that and let's take 19:07 uh do we have any pasta I don't think so 19:09 but let's take this video Moment of 19:12 Truth 19:14 upload and it couldn't cannot read 19:17 properties of null reading reset and as 19:22 you'll see here now we don't get this 19:26 fix it button by lovable in this case so 19:31 if we want to go fancy and if we want to 19:34 investigate ourselves we can click or 19:37 right click and inspect we're going to 19:40 get this developer tools 19:43 menu and if I go to the console here 19:47 you'll see this little um what would you 19:51 call it these arrows up here you have 19:53 different kinds of um tabs basically you 19:57 choose console and you'll see the 19:59 console of everything that's happening 20:02 here with requests etc etc etc here we 20:06 can go in and copy anything that looks 20:10 red so that we can give some context to 20:13 lovable and tell it like what to look at 20:17 for fixes so I'm going to take these 20:20 down here I'm going to copy them and say 20:22 I get this 20:26 error can you help me fix it and also I 20:31 get this error as I try to upload the 20:36 video so give it context then we'll let 20:39 it 20:41 run all right so let's try it once again 20:45 let's do just test testing for the speed 20:49 cuz we're lazy let's upload a thumbnail 20:53 and a video let's give it another try 20:57 and now it seems like like our video has 21:00 been uploaded successfully which is good 21:03 the problem is that I don't see any 21:06 videos here so I am going to jump back 21:10 into my figma file here and I'm going to 21:12 take a print screen or a screenshot of 21:16 this 21:18 screenshot back to lovable I'm going to 21:20 paste it in here and say now it seems to 21:24 work I think the video is uploaded in 21:29 the 21:30 database however once we upload the 21:34 first video we need to display 21:40 it so let's change the layout to the 21:45 layout I submitted as a 21:49 screenshot once we've 21:52 uploaded uh 21:54 video all right so as we did that we 21:58 encountered a new error we can see here 22:00 that now lovable saw the error itself so 22:04 I'm just going to go to try to fix 22:07 it and here it gave us an option to 22:10 apply changes because it knows or it 22:13 thinks it knows what the issue is so I'm 22:15 going to apply the 22:17 changes all right so now it seems like 22:20 the videos are uploaded 22:23 here awesome it even made some of its 22:26 own design choices adding this watch now 22:28 Buton to each so that's good we have 22:33 that working I'm actually going to 22:34 refactor now so that it just stops 22:37 asking for that I mean no no shame on 22:40 the AI for refactoring it's a good 22:43 practice but you know we're lazy we just 22:47 want stuff to happen and it's happening 22:49 so quickly with a tool like this that 22:51 you just feel like I don't want to spend 22:53 time on that I just want to build more 22:55 stuff but anyways okay so it's done 22:59 refactoring now if I click on watch now 23:03 nothing happens right it does have a 23:05 quite a cool hover effect on each card 23:09 we have our videos uploaded now let me 23:12 try to upload again just to make sure 23:13 that it actually works as we want so 23:16 title uh let's see pancakes 23:20 Deluxe 23:22 this or these are the best 23:26 pancakes ever 23:28 thumbnail we actually don't have 23:31 pancakes so we're going to kind of um 23:35 catfish the people on here but no shame 23:38 in that in this case I think upload 23:42 video video 23:44 uploaded and there we have it I'm just 23:46 going to make sure that we now can 23:49 actually click into these detail Pages 23:52 here so let's say once we 23:57 click on the video 24:02 cards I want to be linked to the detail 24:09 page of 24:11 the the the the 24:16 video and let's jump back to figma let's 24:20 take a screenshot once 24:23 again let's paste it in here and we hit 24:28 enter 24:29 now let's see if this works if I click 24:33 we get the detail view that's awesome 24:37 all right so not exactly the visual 24:39 Aesthetics that I was looking for but 24:41 it's fine let's now actually make sure 24:45 that the comments and the likes also 24:48 work 24:50 so 24:52 thanks 24:54 let's make 24:57 sure that if I click like it adds a like 25:03 to the UI and in the 25:08 database the same with comments if I add 25:13 a 25:14 comment it adds it in the UI and in the 25:19 database Yad yadish yes apply changes 25:24 okay apply changes and apply changes and 25:28 this is the process right with AI you 25:31 will have 25:33 to get into these errors and then you 25:36 will have to apply changes and you will 25:37 have to fix stuff and you will have to 25:40 error handle but in the end with a speed 25:44 you're working at here like creating an 25:47 app in minutes instead of days and weeks 25:52 it's worth it 25:54 awesome 25:56 let's implement 25:59 the 26:00 commenting 26:02 functionality so basically what it did 26:05 here was changing a bunch of stuff in 26:08 the database and now we're ready to 26:11 actually start implementing it here in 26:13 the UI with the correct components and 26:16 everything needed to actually add uh 26:19 comments there we go we have a comment 26:23 section where I can add a 26:26 comment can post it 26:29 and we have a comment posted 26:32 successfully cool now if I click here 26:36 nothing happens 26:38 so great now let's make sure that we can 26:44 add a like 26:47 to to each 26:51 video when we click the like button 26:58 I want an 27:00 animation that shows a heart that 27:05 hovers up and Fades 27:09 out 27:13 seamlessly 27:15 also make the 27:19 heart that we 27:22 click 27:24 red 27:25 once we've liked a video 27:31 boom again have to apply changes we need 27:34 to change stuff in the database to make 27:37 sure everything 27:40 works and we encountered an error so we 27:43 show the logs pretend that we look at 27:46 what's the problem here and we say 27:49 gracefully try to fix it my friend thank 27:53 you all right so Moment of Truth here if 27:56 I click the like 27:59 lo and behold we get the 28:01 animation gets 28:03 red but we don't get the number to 28:06 change 28:08 so let's ask it to change the number 28:14 too let's give it another try 28:17 here 28:19 boom and there after some fighting it 28:22 works we have the likes we have the nice 28:25 little animation we don't have the video 28:28 though so let's make sure also first 28:33 thanks 28:35 man let's make sure that the 28:39 video 28:40 is displayed in the top instead of the 28:46 thumbnail there we have it now we're 28:48 talking we have the video here instead 28:51 of the thumbnail I like that 28:55 now let's go back to the video feed here 28:59 and let's click into these different 29:01 ones let's see looks like it's working 29:05 we can add a like 29:07 here and the video plays it even has 29:11 sound on if I go in here has another 29:15 video and it's showing the thumbnail 29:17 before the video starts playing which is 29:19 quite cool 29:20 too so all of this seems to be working 29:23 now the last thing actually the second 29:27 last thing we can see here we don't have 29:30 the correct number if we click in here 29:33 we have four comments and one like so 29:35 that's correct but here it's not yet 29:39 connected so let's quickly do that 29:43 awesome now in the video feed page let's 29:49 make sure that we also display the 29:53 correct values for comments and Li 30:00 in each 30:03 card and there we go now we have one 30:06 like four comments one like two comments 30:09 and here is 0 and if we go in here and 30:12 check indeed it is 0 30:15 0 awesome so that is now working the 30:20 last thing before I round this off 30:22 because I mean functionality wise we 30:25 have just one more thing UI it's still 30:28 not really there but the last thing 30:32 functionality wise to fix is the search 30:35 now if I search for pan nothing happens 30:39 so we want to connect the search right 30:43 so great thanks 30:48 again I'm going to go to the figma file 30:52 I'm going to take a screenshot of this 30:54 search 30:56 results and I'm going to go back to 30:58 lovable paste it in there and say now 31:02 let's make sure that if we type 31:06 something in the search 31:08 field and hit uh 31:12 enter it shows us the search 31:17 page with 31:21 results look at this 31:25 screenshot as a reference 31:31 and as we do that we get an error so we 31:34 try to fix 31:37 that 3 2 31:43 1 all right now let's check here if we 31:47 search we say what do we say we say pan 31:53 and I search and I get the results for 31:55 pancakes Deluxe if I go back and I 31:59 search for 32:01 home I get homemade pasta if I click in 32:05 and I click 32:07 like we get a 32:10 like it seems like everything is working 32:13 now we have built ourselves a little 32:17 YouTube clone in the span of again 32:21 minutes instead of days or weeks now if 32:25 you want to like get notified 32:28 whenever I discover something new when 32:30 it comes to creativity surviving in the 32:33 AI age becoming Irreplaceable as a 32:37 creative then check out my newsletter 32:40 again the link is in the 32:43 description with that have an amazing 32:47 everything and we'll talk soon