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