Full Stack Instagram Clone with Vue JS, Tailwind CSS, Javascript, Laravel, Inertia JS, PHP

right let's go let's talk setup if you don't have anything installed on your computer yet you're going to need some of the following so no JS you definitely need and if you want the simplest way to run a PHP or laravel application on your computer you could use this Zam so it comes with everything you need so you've got Apache mariadb which is a database PHP as well it's all pretty straightforward to set up and um if you have a Mac there's another option so you can install this called Homebrew I'm sure you can do this on a Windows machine as well there's probably there probably is a hack for it then once you have Homebrew installed you can install this laravel Valley and yeah this is only for Mac but maybe there is a hack I still haven't locked I should have a look but the simplest option is zamp if you don't want to mess about too much now for a database GUI I'm going to use SQL Pro and for the code editor vs code awesome right let's get cracking gonna open up a terminal and I'm going to see the end of the folder I'm going to save this file which is going to be in sites you save it however you set up your machine and because I have the laravel installer all I have to say is laravel new Instagram hyphen clone but if you don't have the laravel installer you're going to go to Chrome and then inside laravel.com we're going to go to installation right there scroll down and this section composer create projectile example app copy that get rid of that a sec and you'll have to paste this in and change example app for Instagram clone like it says there okay so I'll just press enter cool that is done let's go back into the lateral documentation and now you want to go into this section that says starter kit and let's go to installation and we got this composer require lateral Breeze copy that open your terminal let's clear this a sec and now we want a CD into Instagram clone and then paste that command in enter call that is done let's go back to the docs and scroll down down a little bit more so we get to this section where it says server side rendering and this one with Breeze install view hyphen hyphen SSR we're going to take that copy it back in the terminal paste that in press enter and that has been installed awesome right now I'm going to put in npm I just to make sure everything is installed and now put npm run Dev and it's giving me this local and app URL I'm going to use this app URL because I have laravel Valley on this computer but if you don't if you're using xampp you're going to have to do this you're gonna have to open another terminal in the same file so the Instagram clone and you're going to have to put in PHP I understand serve like that and then you'll press enter and it should give you a URL that is HTTP localhost 8000 something like that and then you can go to it and you'll see your application so I'll just close this one and if I go to this in the browser let's just paste that in insta gram clone and there we go there is our default application awesome right so let's sort this out a bit let's just put this over this side a little bit minimize this terminal open up visual studio code like that let's Chuck it on the side like that and all we're going to do now is open up the folder where our Instagram clone is so mine is in sites and I can see it right there Instagram clone I'm just going to grab this and drop it in and there we go there is our application awesome right while we're here just open this terminal and we're going to install two packages now so we don't have to do it later so inside this terminal we're going to say npm I and my favorite package view material design icons and view three Carousel press enter awesome that's installed right let me just zoom this in a bit like that that's a bit better okay now let's quickly jump into resources JS Pages this dashboard we're going to delete so delete that and this welcome we're going to rename to home and let's just jump into that home dot viewersack everything inside this just strip out get rid of everything in the script and at the bottom all of this style stuff you can just delete that get rid of it all this template stuff you can also delete I'm going to leave the head in there like so and for that yes I'm just gonna put a div with class BG green 500 and I'm just going to put home dot view in that and change this welcome to home save that now I'm going to jump into a roots and then web.php and most of this stuff inside the top one we can delete so just get rid of all of that change welcome to home and then this dashboard one delete save uh let's just make sure that it's not all capitals home yeah okay we can start to see that this is coming through and now let's jump into layouts and this authenticated layout I'm just going to duplicate that file and instead of authenticated I'm just going to say mainlayout dot view save it right now we're in main layout let's get rid of all the things we don't need so all of these components we can get rid of this const we can delete all of this stuff in the template we can also delete like so and now in the top in this script we're going to import all of our icons that we need for this page very simple it's just going to look like that so we have magnify hard outline home outline Compass send outline Plus account outline Chevron left an account plus out line from view material design icons and under this I'm just going to add a little variable called show create post which is a ref and by default it's false let's just save that open our side panel back up now in this template I'm just going to put div open it check an ID on there call it main layout and for now just put a class BG red 600 now inside that add a div just put main layout in there and underneath it we're going to put a slot that looks like that right let's save that and now if we go back into home Dot View and in our script if we import main layout from layout all we have to do then is use it in our template our main layout I'm going to take this div copy and drop it inside of the main layout like so save it and yeah awesome you can see now we've got our main layout and also being printed is our home view so that is working perfectly cool so we are all set up and ready to go and actually before I forget let's quickly just jump into GitHub let's open this a bit and if you go to forward slash John week's Dev and look at that 48 followers amazing yeah follow me on GitHub if you want um if we go into repositories and there it is Instagram clone we're just going to jump in the public and there's three files that we want so we want insta logo small insta logo and user placeholder if you download those and then we go back into our code open the side panel go in the public and all you want to do is drop them in like that you can see in public now we got insta logo small insta logo and user placeholder that should look like that that and that and also what we're going to do because we're here inside public put a new folder called file and we are done in there so close that up close all these pictures and let's get cracking right in this home Dot View I'm just going to comment that out for now save that and let's go back into main layout Dot View and let's start right let's get rid of this slot inside this for now get rid of that this BG red take it off and for a class you want widthful and height screen now this div with main layout remove main layout and add a class like so and that's going to be fixed Z for the MD hidden block with full BG white height 61 pixels border B and Border B grade 300 and we're going to add an ID on it we're going to say top nav home and this MD hidden so if the window size is medium or above then it's hidden but if it's lower than that we display block so we show it and we're also going to add a VA F onto this and we're going to say page URL so if it's equal to the default so the base URL then we want to show it okay inside that another div open them up class it Flex item sender justify between an H4 so height full now we're going to add our first link with an image inside it and that is going to look like that so this is our insta logo the class is width 105 pixels ml6 and cursor pointer let's save that let's go and take a look and if we close this we can see there look at that look how lovely that is so we have a little top nav or some let's continue right under this link David open him up and then class it with flex item Center and width 50 then inside that another div open him Place him right up Flex item sender with full BG gray 100 and rounded LG now we're going to add our first icon and that is going to be magnify you want a class pl4 fill color is that and the size is 27. let's just save it and have a quick Gander yeah you can see it's starting to come on the side but there beautiful okay underneath this magnify we want input we also want a placeholder of search and we also want a class on it that is going to be BG transparent with full placeholder this border zero ring zero and focus ring zero now if we save that and go and have a look you can see that looks fantastic beautiful right now and just to finish this off underneath this div all we're going to add is heart outline with the class pl4 and pr3 fill color black and size 27 so save it and you can see it right there spiffing darling but look at that nice and easy just so easy beautiful right from half outline go down three divs so one two three space It Up additive open it up and then open this top section up now what we're going to do for this is add a VF page URL is not equal to the base then we want to show it we won't see this yet because this is on this is for the user page but we might as well do this now because we're in main layout so also let's add an ID with opnav user and also a class on it with MD hidden fixed Flex item sender Justified between z30 with full BG white height 61 pixels border B and Border B grade 300. now inside this very simple first we just have a link we've got a class of PX4 an icon Chevron left which is size 30 and a class cursor pointer next underneath this link we're going to have a little div that's going to look like that class font extra bold and text LG and I just put name here because this is obviously going to be dynamic later and now underneath this div we're going to have an icon that's going to be account plus icon size 30 cursor pointer and PX4 beautiful that's it now we're not going to see that yet because we don't have another page but we'll do that a little bit later on so now if we continue and actually do the side nav area with all of our menu items so let's take this div we just made go underneath div it up again open it let's check an ID on it of side nav and we also want a class that is fixed height full BG white XL width 280 pixels so when the size is extra large or bigger it's going to be 280 pixels the width of the side nav else the default size is 80 pixels and then we got MD block hidden border R and Border R gray 300. now next inside this very simple again we're going to add a link like that and I'm just gonna have two images inside it and the source for these is insta logo small and insta logo so how this works is when the screen size is XL the insta logo small is hidden and the normal one is displayed and then vice versa when it's under XL the small one is displayed and the other one is hidden so if I save that and we go and take a look let's just open this up a bit you can see there beautiful look at that awesome and then we open it a bit more and you can see right there it opens right up so full size little size gone awesome let's just open this like that for now because we're gonna have to see all the menu items in there cool let's continue right under this link we've just put in div it up and class it with PX3 and now this is where we're gonna make our first component this is going to be menu item and we're going to wrap this first one around a link and let's just put that in it's going to look like that there we go on icon string as a pro up which is going to be home and the class mb4 so if I save that it's probably going to break no it didn't break very good okay but what we do want to do is scroll to the top and under all these view material design icons we're going to import menu item from components menu item now we want to go and create that so open the side panel go into components and let's just get anything this checkbox duplicate that file and rename checkbox to menuitem.view save that and let's clear out all of this script stuff change computed pull refs like that we also want to import inertia and we want to use page then we got some more icons we need to import and that's going to look like that so home magnify Compass send heart Plus account and menu now next we need to get the props that we're passing into the components and that is going to look like that so if you remember we have an icon string that we're passing as a prop now underneath this we're just going to get the use page and we're going to get the logged in user but that is not actually going to work yet because we're not logged in so I'm going to comment that out for now so we don't have any errors it's just so I don't forget to put it in later and then we're going to have a little variable underneath that which is just going to be icon equal to null and now a couple of if statements after this and the logic is dead simple so I'm just going to dump this in right this is very easy so this icon string prop we're passing if that icon string equals home we assign this icon variable this home outline icon and the same with search same with explore so very simply if iconstring is home the icon is the home outline okay let's go down to our template and we can just delete that right out of there okay first thing we're going to do save it right up open it check class on it and that's going to be with full XL inline block Excel hover and then BG gray 100 P2 to rounded full transition duration 300 easy and out in cursor pointer right again David open it class it up with flex item Center and then inside this we want image like so let's just get rid of alt that doesn't matter sort this out right on this we're going to add a VF icon string is equal to profile we want to show this image we're also going to have a dynamic class with pretty much the same thing but if this is equal to profile we add a bit of margin right we're also just going to add a normal class with rounded full ml2 pixels with 30 pixels and cursor point there and just for now I'm going to hard code in this so https pick some dot photos id8 and changes to whatever you put in like id50 and then this 30320 that doesn't really matter too much now if we save that and go back to main layout and we save this let's take a look in our browser a sec no we didn't go anything yet oh because we actually are not just displaying anything because it's passing home okay let's just go back in the menu item and under this very simple underneath image we want component and that's a VL so if it's not profile we show the component and then we pass it the icon that we've already assigned using these if statements and watch this fill color black and size 36 and under this we're going to have a nice little span with the icon string and on this the class is Excel block hidden text black font extra ball text 18 el2 and Mt 0.5 now XL block so if the page is large you show the string else hide it and that should be that page done so if you save that and you have a look yeah there we go you can see it look at that hover beautiful and now this is super easy we go back in the main layout underneath this link for menu item we're just going to add more items with search explore messages notifications we also need to add a profile one let's just save and take a look look at that beautiful and now just underneath this div we're going to add one more link and it's going to look like this so we want a href going to Nowhere pretty much last absolute bottom zero PX3 with full and the menu item is log out and that's it now if we save that and we're going to take a look you can see right at the bottom there we go I'll let the log out button awesome man and if we make this a bit smaller you'll see all the text disappears we're left with just our icons and again we go in a little bit further and that gets hidden and our top nav shows look at that absolutely awesome yeah man sick okay let's move on to the next section and this is going to be where our slot is so if we go from this link we go 1 div down so underneath this add another div open it add a class with flex LG justify between BG white H4 width 100 minus 280 pixels XL PL 280 pixels LG PL 100 pixels and overflow Auto and all this is is different amounts of padding based on the size of the window okay next in that divid open it and we can open this little top bit as well we're going to add a class with MX Auto mdpt6 and pt20 and then we're going to add a dynamic class and that's going to be if the page URL is the base URL we want LG W8 12 so this specific size and the width of that to be full else if it's another page we want Max width 1200 pixels and then inside this div we're just going to have Main and inside there just put the slot now if we save that and we go back to our page we don't see anything yet let's just do back into home.view and uncomment this and save yeah we can see now that that is getting displayed and if we open it and close it a bit yeah we can see now how it changes sizes based on the width of the browser awesome right let's continue go back into main layout.view now from this main you want to go one div down make a space add another div open it and we're going to add an ID that is suggestion section we're also going to add a VF the page URL is the base URL and we're also going to class it up with LG width 4 12 so that is the remainder of this the width 812 LG block hidden text black and mt10 now inside this we want a link from inertia open that up let's add a href just go into the default for now and also we're going to add a class that is flex item sender justify between and Maxwell at 300 pixels then inside this link div it open it class it and put in the blacks and item Center and now inside that we want an image and that's going to look like that so the class rounded full Z10 with 58 pixels height 58 pixels and the source we're going to hard code at the moment and if we jump into this menu item we can just grab this pixel.photos but yeah just grab that copy it so back at the main layout and paste it in the source save that and let's quickly have a look yeah you can see right there that the image is displaying perfect let's continue now under this image we want to add a div with two divs inside it like that so the additive is pl4 and then the top one we got text black and font extra bold I've hard coded in name here same on the second one but this is text Gray 500 text extra bold and text SM let's just save that and yeah we can see that right there looking beautiful okay last little bit for this very simple just a fake little button underneath this div and that is going to be button with class text blue 500 hover text green 900 xxs font extra bold and just put in the switch and then save that let's go and have a look it's a bit close together I think when we put the rest of the stuff in it'll widen out and then we should be fine so don't worry about that for now okay underneath this link add a div open it up add a class to it that is Max width 300 pixels Flex item sender justify between and py3 then inside that a div with hex gray 500 font extra bold and just put in that suggestions for you and then under that a little button again text blue 500 hover text Gray 900 pretty much exactly the same as this button we put in already except inside it the text is see all let's save him let's have a quick look yeah you can see it right there this switch hasn't gone any wider we'll ignore that for now don't worry let's continue right now underneath this div add another inertia link open that up out of class Flex item sender Justified between Max with 300 pixels and pb2 and for now just put the href as base URL inside that div open him up add a class with flex and item Center and honestly for this I think we can just scroll up and we can steal this section actually I've just noticed this button with switch I don't think it should be inside that div let me just copy it remove it and put it just under before the link now let me save that yeah there we go our switch has moved over and all we can do all of this inside the link just grab it copy it and just paste that in there save and look at that just a couple of little modifications we need to make so instead of width and height 58 that's going to be 37 this Source the ID I'm going to change to I don't know 200 and finally the switch we're going to turn to follow so let's save that and there we go beautiful now underneath this link one div down open it up and I'm just going to add in like the terms and conditions action like that I literally I went into Instagram and I just copied and pasted all this out of it the same as this copied and pasted added some Styles put it in a div put a Max width on it and it looked good so save let's take a look oh we're outside wrong one let's just copy that remove it from there and put it under the link like that right let's save that and yeah there we go beautiful that is perfect and then later on when we have multiple users we can just Loop through this section and spit out random users from the database awesome okay right go one div from the bottom so there open him up divot open it and then we're gonna add an ID of bottom nav and a class of fixed z30 bottom zero with full MD hidden Flex item sender justify around BG white border T py2 and Border T gray 300. now inside this is very simple it's kind of the same concept as the side nav we're just going to add a link with an icon inside it this is home outline Bill Keller black size 33 and a class with cursor pointer on it very simple now under this link we're going to add a couple more it's going to look like this so we've got campus send outline plus an account outline all the same size got a cursor pointer on it except this plus we have an at click event which is show create posts equal to true and if you remember we scroll to the top we have this show create post variable that is default false so let's scroll back down now the very bottom of this just add another inertia link just check a href of the base URL and inside it we're going to add an image that's going to look like that so rounded for width 30 cursor pointer and then again the source is this dummy image so if I save that and we go take a look let me just put this in the sender if I put this into mobile view we should see yeah there we go beautiful look at that right at the bottom beautiful all our little icons and our user icons as well cool and actually in this side nav the plus item is missing so let's just go and add that in quickly let's open this up and let's scroll up to the menu item stuff right there and yeah just before profile add another one that's gonna look like that exactly the same but it's got icon string create and an ad click event show create post is true awesome save let's take a look and there we go we can see create right there beautiful again actually while we're here this profile we just want to put this inside a little link let's open that up drop that inside and then link is going to be href and for now just put it to the base URL just like that just so we don't forget later right awesome now we can actually make our first overlay component so we can make the um create post overlay so let's scroll at the bottom and outside of the div we're going to add this so create post overlay and if show create post is true display it and we want to emit this close so when this is fired we close the overlay and then that is equal to false so if we go to the top of a script section under this menu item component we're going to add in that create post overlay component from components we can open our side panel let's just duplicate check box rename that to create postoverlay.view clear the script out and the template like so let's add the basic things that we need so first we need to import from view ref and reactive and from inertia router and use page then we're going to go and get our icons that's going to look like that so that's close Arrow left map marker outline and Chevron down I'm going to bring this use page in but again I'm going to comment that out like I did before because we don't actually have a user yet so just comment that out like that we want to Define our emit so remember we need to Omit out of this component for when we want to close it so let's add that in in we're just going to say constant equals Define emits and just put close in there now we're going to have a reactive for our form and that's going to look like that very simple just got text and file in there equal to null and then under this we have a few more variables that are all refs so is valid file which is a null file display text area and an error ref with an object inside of it with text null and file null right I'm just going to add one more function at the bottom very simple this is close overlay and I'm pretty sure you know what this does I mean just clear it out all the information and emit out of this component to the parent so then we can close this overlay so that is just that awesome right let's start with our template so div it up open it and add an ID in a class that's going to be ID overlay section the class put fixed Z50 top zero left zero with full height screen BG black and BG opacity 60 with a P3 save that now I'm pretty sure if you go back into this and we press create we should see the overlay come up just like that beautiful how awesome is that right refresh this just so it goes back to normal okay let's go back in our code now inside this we got a little button so let's put button open it up and add a class absolute right three and cursor pointer then we're going to add an at click event which is going to call our close overlay function which is this so we can emit this close so we can close it and then finally inside this button we're going to have an icon that is close size 27 and the fill color is white let's save it and then let's go and have a look what happens when we press create so let's open it up beautiful you can see at the top there our little close if we press that we should emit out to our component where we set it back to false let's click it beautiful easy as that okay right let's continue menu under the button David open him up add a class with MX width 6xl height count 100 minus 100 pixels so what that means is that you'll have a height of a hundred percent but you take away a hundred pixels and you always have like 100 pixels of margin no matter the size of the height of the screen and then MX Auto mt10 BG white and rounded XL awesome inside that div that up plus it with flex item sender justify between width for rounded T XL so rounded top XL A3 border B and Border B grade 300. now inside this we're going to use another icon and that's going to be Arrow left with a size of 30. fill color is and then again our ad click event which is close overlay so we emit out again underneath there very simple just a div with class text LG font extra bold and new real and then finally under that we want to have a button with class xlg text blue 500 of a text screen 900 and font extra bold and again and there we go a little bit of text with share for the saver and if we go and open this now we should actually see something so let's press create look at that beautiful that is beautiful and if we press this back button we should close it because it's emitting out so let's click beautiful man look at that awesome right let's sort them out underneath this button go one div down open him up give it open it lassit with with full mdflex height calc 100 minus 55 pixels rounded XL and overflow Auto then again inside that div it up open it class it with flex item Center BG gray 100 with full height full and overflow hidden right now in this divot add a class with flex Flex call Item Center and NX Auto we can add a VF onto this and it's going to be if file display is empty we want to show what's inside and what we've got for this is a label like that so we got label four file and the class of a BG blue 700 BG blue 500 rounded LG P 2.5 text white font extra building cursor pointer and inside that just put select from computer save that and go and have a look and you'll see when we open it we've got a little button right in the middle right there right let's go back now under this we're going to add a little input like so so we go the ID file which is for file this section is linked up with this a class of this is hidden because we don't want to see the input the type is file and this app input we have inside it this function that we haven't made yet so if we quickly just finish this little section we'll go up and we'll make this function so after this input very simple another div with if there's an error and error file add a class with text red 500 text sender P2 and font extra bold and inside there you want error.file and underneath this almost something similar if file display doesn't exist and is valid file is false we also want to display an error which in this case is just hard coded to file not accepted and all the class I think is exactly the same right finally from this file not accepted Dave go down one and we're just going to add in our image to display the upload and that's going to look like that so image with a VF and this is literally just the inverse of this so if there is a file and it is a valid file class Min with 400 pixels padding 4 and MX order and the source is file display right save that and we are going to quickly make this function so we can actually upload an image locally right let's go to the top the script section and let's do underneath all this stuff let's do cons get uploaded image open that up and we want to pass e which is going to be the event right now the first line is going to be we want to get the file that is uploaded and we want to put that into form.file which remember form and then this is the file next we want to figure out what the extension is because we we don't upload something that is stupid like a PDF or something we just want PNG JPEG and that's it so we need to get the extension so we're going to get form dot file name and substring it and then after this dot we're going to get the extension so if I just add a console login after this and save it and we go back to this and I open our inspect go to console and watch this head there's a little arrow we can ignore that for now don't worry about that let's open our overlay and then select from computer beautiful let's pick a screenshot what's this yeah Instagram and I'll do it press open and you can see there we have the extension which is PNG that's good we won that so let's go back into our code and underneath this let's add if else and then open that up and we want to say if extension equals PNG or jpeg or jpeg is valid equals true else is valid is false now finally after that we want to take the uploaded image and we want to create an object URL and then assign it to the variable that is going to have the file URL in it and that's going to look like that so URL dot create object URL ask this event Target files zero index and then assign it to this and then after this I'm going to add in another little bit of code which is going to be this set timeout get element by ID text area section and then scroll to view and then Behavior Smooth you're not going to see what this does at the moment but when we do add the text area in you'll see I mean we're going to do that in like two minutes so if we save that and we go back into our code now if we select from computer again and we just upload the screenshot press enter and there is a little image awesome now we should be able to if I close this and we'll open it again select from computer and I tried to upload something stupid like an MP3 let's have a look what happened there that broke that's not supposed to do that um oh let's go back in this and after is valid file equals false just add in return so we stop the process so save that like that let's just refresh this let's open that back up select from computer and then again try to upload an MP3 and we can't file not accepted perfect okay awesome let's do our text area section now the one div under this image let's open it up divid we want to add an ID and a class that's going to be text area section and the class is going to be maxed with 720 pixels with full and relative now inside that divot open it flash it with flex item Center justify between and P3 now we've got a nice little div in this and that's going to look like that so A div so an outer div with flex item Center and then inside image rounded full with 38 and height 38 the the sauce is just this dummy again and then we're going to div with the name here which will be dynamic later and that's ml4 font extra bold and text 15 pixels right save it let's have a quick look let's close this a sec you can see there coming on the side beautiful let's continue right we've got a little error section after that so two divs beneath open them up and we're gonna add a div with if error and error text we want the class again text red 500 P2 and font extra bold just Chuck error text in there and now underneath that divot open him up place it with flex with fall Max height 200 pixels BG white and Border B right now inside this is our little text area so let's add text area and let's just get rid of all this in here for now and open this top bit up and we need to add some things to this so we're gonna have a ref of text area a v model which is form.tex a placeholder of write caption and the rose is going to be 10 and we also need to add a class on it because there's quite a bit of styles and that is going to look like that so place all the gray 500 which full port of zero mt2 mb2 Z50 Focus ring zero text Gray 600 and text 18 pixels so save it let's have a look and you can see it there we have a little right like ah look at that beautiful right now under this div we just have stuff just for a bit of show so check it Dave in open it flash it with flex item sender justify between border B and P3 and inside this very simple Dave text XL font extra ball text Gray 500 add location and then we've got an icon of map marker outline and all we're going to do with this is copy it paste it once and paste it twice the second one becomes accessibility and Chevron down and also this third one becomes Chevron down as well but add location becomes advanced settings and then finally on this page for this last bit go underneath the div and just add in this you're going to David tax grade 500 mt3 P3 and text SM and then I've got all this text in here which I think I stole off the Instagram page I just copied and pasted it so if you want to put that in you can put that in so let's save that and let's have a look there we go look at that that is sick man there we go let's just go nuts yeah look at that beautiful let's just clear that out so what we can actually do while we're still here just to finish this off we can actually scroll up and we might as well make the post function We're not gonna have an end point for it yet but we might as well do it now because it's not that complicated so if we just say can't create post func let's open him up first off we're gonna have our errors and we're going to clear them like so so if they are displaying when we next click the button we take them away so we clear them and then under this we're gonna have rooter.post and this is from inertia so it's this inertia JS router and the end point is going to be post we want to send the form of Jack like that so we're sending this form object and if you really want to get into the nitty-gritty of how this works if you come to inertiajs.com and this is on the manual visits section so manual visits you can see all of this it tells you everything all this stuff by uh how to use it all the info so anyway let's close that let's continue in this top bit I'm going to add in Force form data because it is an image upload and preserve scroll to true and then we're going to have our error section so if it is an error we want to assign the error to where it needs to be like so so we've got this error value text which is this error ref text and the same with the file error file or on success we want to close the overlay and emit club we don't actually need that so just get rid of that cool save that because in this close overlay we already at the end are emitting close so it's pointless awesome right that is that component pretty much done so save it let's have a look at it yeah look at it beautiful awesome so right now we might as well move on to this this home Dot View and in this we're going to make our Carousel and our posts section so let's do that right so this div inside main layout just remove it for now um we need to get some import so in our script above main layout we need to add a ref on mounted and two refs from View and we also need to import the head link and the router from inertia then we need to bring in our Carousel stuff so that's going to look like that so view three Carousel disk carousel.css and we want the carousel the slide and the navigation we also want an icon and that's going to be the dots horizontal and next we need a couple of variables so underneath dots horizontal we're going to put in width so window width current slide current post and open overlay and then under this we need to Define our props and that's going to look like that that so we got posts and all users now we need an unmounted and that's going to look like this so this on mounted we have an event listener and we're listening for the window resize and whenever it does we're going to assign that inner width value to the window width variable that is here this one awesome right we can leave that like it is for now if we just save that and now we can jump into our template and actually this title I'm just going to change to Instagram and right let's start inside main layout divot open that up add a class with MX Auto LG pl0 so when the window size is large or more the padding left is zero and then for the medium size the pattern left is 80 and then the last one pl0 so everything else is pattern left zero now this is where we're going to use our Carousel so if you remember we imported that right there this Carousel copy and he's standing there like that open him up and open this top section up and this is all the things we're going gonna add to it so V model which is current slide which is two-way binding a class of Max width 700 pixels and MX Auto and this items to show so if the window width is greater than or equal to 768 pixels you want to display eight in the carousel else you want to display six items to scroll for wrap around true transition 500 and snap align start okay awesome right next we want to use our slide so let's bring that in slide close that off open him up and by the way if you want to see the documentation for this if we go into view 3 Carousel it's a GitHub page you can see uh you've got all the examples you want examples there and actually we're going to use slide now so actually we can take this copy that and let's go back in there and just paste over this slide that's just intended and this div inside we're going to change this for link an inertia link open that up and we want to add href just the base URL at the moment and then we're going to add a class to it and that's going to look like that so relative MX Auto Tech Center mt4 px2 and cursor pointer right if we save this are we actually going to see anything let's close this we don't need to see that no we're not going to see anything yet let's continue right we need to do a little bit of magic yeah so we're gonna have a div open a map and we're going to add a class to it and this is going to be the background and uh colored Circle for the actual image in the carousel so if I add the class there's quite a lot on this so it's going to be absolute Z minus one minus top 5 pixels Left 4 pixels rounded full rotate 45 with 64 height 64. contrast 1.3 now BG gradient to top means the color is going from the bottom to the top this is how the gradient works and then from yellow to purple and in the middle is red so if we save that and we go and have a look let's refresh you can see something maybe we need if I I just force the size of this slider a sec maybe last height 60 yeah so now you can see it that is what it's going to look like the background but we're going to add another layer on top of this and then on top of that we're going to add the image so let's do that so the layer on top of this is just going to be plain white and it's slightly smaller than this outer div so if I put this in it'll be rounded full ml3 mt3 with 58 height 58 and bgy then you can see the outer width and height is 64. so if I save that and we go and have a look refresh you can see now that we've got that white bit thrown on top so it just looks like a multi-colored ring right anyway let's finish this off underneath this div we want an image let's open them up get rid of this alt and we're going to add a class and that is going to be rounded full with 56 height 56 and minus margin top 1 pixel and for now we're just going to put a hard-coded endpoint in this so let's pick some photos again just change that I don't know 54. save it and underneath this image a final div for this Carousel and that is going to look like that so Tex XS empty tool with 60 truncate text Ellipsis and overflow hidden and just put in the name here now save that let's go back and let's refresh and you can see look at that look how awesome that looks now we can go back in our code this class h60 take that off remove it save refresh and there we go there is our little Carousel we can drag this as well awesome okay final bit for this Carousel is we actually need that make the buttons visible so at the bottom of the template we're going to add in a style and that's going to look like that so it's just Carousel previous and then prevent x with hover we've got a color background color border radius and a margin and that's it if we save it and oh actually my bad I forgot to put in the navigation so just under this slide open that up and drop in that template add-ons navigation now let's save it up let's take a look let's refresh and there we go you can see these little buttons on the side you can click these and our Carousel is working beautiful right let's carry on let's do a post section okay under Carousel make a little space divot and we're going to put an ID and a class on this the ID is going to be posts and the class PX4 Max with 600 pixels MX Auto and mt10 now inside that another div open it Placid with flex item Center justify between in py2 then again inside that divot class it with flex item Center then inside this div we want a link and we can open that up class it up with flex item Center and just before let's put a href just go into the base URL and inside this we're going to add an image and a div and that's going to look like this so we've got an image with class render full with 38 pixels and height the same and the SRC is a hard-coded picture and then the bottom div ml4 font actual golden text 15 pixels and that is name here so I save that let's have a look you can start to see it come together up there beautiful okay underneath this link div it up open it and class it Flex item Center text 15 pixels and text Gray 500. then inside there you want to put a span with class minus mt5 ml2 mr5 pixels hex 35 pixels and just a little dot in there just like that like a full stop or a period and then under this span div and for now just put a date here save that and there you go look at that beautiful okay right from the date go two divs down one two make a space now we're gonna add an icon and that's gonna be dots horizontal just with the class of cursor point there and a size 27. let's save it let's go take a look and there we go we can see a top section login awesome right under this dots horizontal one div down let's open it div open that up and put on there class with BG black rounded LG with full Min height 400 pixels flex and item sender and inside it we we want an image like that with class MX order with full and again a dummy image let's save it take a look look at that beautiful very nice okay let's continue right next we have our likes section and this is a component and that is going to look like that so like section let's just scroll at the top and under main layout import like section from components gonna have to go make this so copy that open the side panel and this check box just duplicated again rename it to like section.view save it and again all this script stuff strip it out same with the template strip that out and let's bring in all of our Imports and the first two is going to be computed and two refs from View and use page from inertia next all of the icons so heart heart outline comment outline send out line and bookmark outline then we need the Define props which is going to look like that so it's just a single post also need to Define emits because we need to emit out of this component and that's going to be called like and again I'm going to import a user now but I'm just going to comment it out just so I don't forget about it later awesome right in this template David lassit Flex z20 item Center justify between again divot class it up with flex item Center then inside that button open it up it's going to be class with minus Mt 14 pixels and inside this for now we're going to add an icon called heart outline and that's got a class of pl3 cursor pointer and the size is 30. now just underneath this button we're going to add another icon which is comment outline duplicate it rename that to send outline and then copy that I go beneath this div and rename this to bookmark outline and all of these the class is exactly the same pl3 and PT 10 pixels let's save it let's have a look is it working can't actually see anything oh because home I didn't save the page let's save it take a look yeah there we can start to see now all of our icons down the bottom beautiful and that'll do for like section now we'll make it Dynamic later but for now we're just going to do all the styling and stuff so let's continue next after that like section we want to add a div like that so text black font extra ball and py1 just hard code three likes for now and then beneath that a div with a span inside it and some text and that's going to look like that so A div right there band with class text black font extra ball with name here and just some text at the bottom let's save it let's take a look yeah you can see it right there the bottom looking good now under that div just add a button open it up class it up with text Gray 500 font extra bold and py1 and all we're going to add in this is view all four comments I mean later the number will be dynamic but for now this is fine save it let's have a look there we go you can see it on the bottom it's a bit tight right let's just add a class at the bottom one div from the bottom add a div with a class of pan in bottom 20 save it roll up there we go awesome right that is kind of the template stuff done for the home page so I think now we can actually move on to the user page but first we have to make it so let's go on the side panel and why don't we just duplicate home View and rename it to user.view all the style stuff at the bottom delete the main layout section we can keep that but everything else inside it just get rid of like that and everything up to main layout just delete so that's all we got left and in this view instead we want reactive and two refs the inertia stuff is fine we do need to bring in some icons so underneath we need Cog grid play box outline bookmark outline and account box outline and then we are going to have two reactive variables and that's going to look like that so data and form inside data we got posted inside phone we got file again we need to import our props and later on so underneath that props Define props and we got posts by user because this is the user page and the actual user itself and for now that is fine so we need to open the side panel go into roots web.php and this we're going to copy it paste it to forward slash user and then home becomes user save that now go back to use the dot view and in our main layout we can start so we're going to start this with a div with nothing in it just a class of pt2 and mdpt6 and under that another div and actually the reason for this is just for a bit of space at the top now this div beneath we're going to class it with Max with 880 pixels LG ml0 MD mled and then mdpl20px4 and width 100 view width so VW and then again in that div open it up glass with flex item Center MD justify between and in this we have an image upload that is kind of the same thing as before we did with the label so if I just drop it in it's going to look like that so if I just put this on a new line so we can actually see what's going on yeah like that so label 4 file user and we go the ID file user there inside an image with class rounded fill object fit MD with 200 pixels and then the default width is 100 pixels with cursor pointer got this dummy image and then we got this yet uploaded image function again which we can probably take from uh home actually why don't we just go and get it so let's go to home.view scroll up oh no sorry it was in main layout was it oh no actually it's in the component create post overlay where is it yeah there we go get uploaded image just copy this function copy all that go back to user.view and underneath paste it in and honestly this one is super simplified most of the stuff stuff in this we don't need so all of this up to extension delete and under this all we're going to put is router.posts so we're posting so this end point the form and the form is only the file so as soon as we upload the image it gets sent to the back and saved as well I mean this won't work now again because we don't have a back end but it's so simple we might as well just do it now so anyway save that uh let's go to the front and I'm going to put in forward slash user let's have a look there's a very big image for there if we shut this actually yeah we got a little header at the top that's what we made in the main layout earlier that was the little section I think it was top nav user anyway awesome let's continue right next underneath the input divid open it and class it with ml6 and with full let's close this side panel that's annoying me and then again div open it up Placid with flex item Center MD md8 and B5 then inside that div we want another div with a class of mdmr6 MR3 rounded LG text 22 pixels just put name here for now then under that we've got our nice little button which is going to be edit profile button and it's got class MD block hidden mdmr6 P1 PX4 rounded LG tech 16 pixels font extra bold BG gray 100 and hover BG gray 200. now under that add a little Cog it's gonna have a size of 28 and class cursor pointer now we do have this button again underneath but there's a slight difference in the class so that is going to look like that so it's going to be MD hidden mr6 P1 PX4 Max width 260 pixels widthful rounded LG tech 17 pixels font extra bold BG gray 100 and hover BG gray 200. awesome save that SEC let's have a look yeah starting to come together a bit but let's continue okay underneath this button div open it last set with MD block and hidden and then inside that div open him blasted with flex item sender and text ADM pixels now inside this we're going to have a div with a class mr6 and inside a little span with font extra bold where it's just a hard-coded number and at the end of it post now if we save that and have a look you can see now we've got posts underneath awesome okay let's continue all we can do for this now is just grab it copy paste and paste this post becomes followers and the next post becomes following let's put that as one two three and four five six save and there we go looking good the thing is I don't know why that image is so big let me just change this set to 200 and 200 let's try that I mean it is a bit smaller right let's do the next section so from this span that says following we're gonna go down six divs so one two three four five six the very bottom okay so open it up put another div classic with MD hidden and then inside that another div open it blast it with widthful flex item sender justify around border T border T gray 300 mt8 and then inside this we're going to have a couple of blocks that look like that so we got tech center and P3 and then inside two divs the first one font extra bold just before for now and the second one Tech screen 400 font semi build and minus Mt 1.5 and all we can do is copy this paste it and paste it posts becomes followers for let's just put us 43 and the last one following let's put that as 55 that'll do for now let's save it let's have a look yeah something like that okay let's keep going now from following two divs below one two open it up divided with wood full Flex item sender justify between bonity and Border T gray 300 and it's the same type of thing again we got a couple blocks the first one is class P3 width one fourth Flex just if I send ability and Border T grain 99 Road and inside we got an icon that is grid size 28 fill color is that and the cursor pointer now I'm just gonna paste that below and all the Border stuff I'm gonna take off and the grid I'm going to change to play box outline then copy it and then the fill color we're going to change to that ADA d a d then all we're going to do is copy this paste and paste change this one to bookmark outline and the last one to account box outline now save that let's go and have a look and if we close this yeah something like that I mean that's not right something's wrong I mean for now we can just ignore it we'll fix it up when we've finished all of the sections right so from this account box outline go three divs down so actually the very bottom again make another div open it up and we want to put an ID and a class on there so the ID is content section and the class is mdpr 1.5 LG pl0 and mdpl 90 pixels then inside that another div open it up class it with ND block mt10 hidden border T border Tigre 300 and then inside that another div class it with flex item Center Justified between Max width 600 pixels MX Auto Front extra ball text Gray 400 and text 15 pixels now we've got the same thing again we got just a little block of markup that's going to look like that so we got a class with P 17 pixels width 1 4 Flex just if I send the item sender border T and Border T gray 900 and inside the icon grid size 15 fill color black and cursor pointer and then this little div at the bottom ml2 minus mb1 pixels Tech screen 900 and post now all we're going to do with this copy it paste it beneath remove all the Border stuff get rid of that change grid through play box outline and the fill color becomes a d-a-d-a-d post becomes reels and there's two more and for these last two I'm going going to paste it in because they're practically the same just slight modifications we got saved and tagged the icon is bookmark outline and the last one is account box outline save that let's go and have a look let's open this yeah something like that I don't know why it's doing that that is really annoying let me just open my terminal a sec and open a new tab close this one so terminate the process and then just do npm run Dev ah there we go awesome I don't know why it does that sometimes it's really annoying yeah I know you can see that's much better if we close this up oh look at that beautiful awesome dude okay we've got our last little bit with a component and then most of this markup for this page is done so from this span we're gonna go three divs down one two three open it up div it right up open that and then class it with grid MD Gap four Gap one grid calls three and relative and then inside this we are going to have a component that's going to be called content and overlay and you can see how this will work is that we're going to have information passed into it so a prop and an emit as well but for the moment I'm just going to take those off and I'm going to put it like that so we don't have any infusion we're just going to do the markup so now if I scroll to the top and under main layout I'm going to add an import of content overlay from components and now let's go and make that so let's go into components this checkbox duplicate again rename it to contentoverlay.view and uh and then the script again clear out template clear that out and this component is super simple there's not much in the script I'm just going to put it all in because it's really simple it's only that so we'll Import in ref and two refs we have two icons we Define emit we get the props and there's one variable which is hover which is a ref defaulted false awesome right in the template divot open it and we need to open this big time because on this is going to be three things that is going to be Mouse Ender now sleeve and the class the class as Flex item sender justify sender cursor point on relative and in this mouse Ender hover becomes true and then when we leave it becomes false now inside that another div open m and open this as well because there's a couple of things on here we have a VF a dynamic class and just a normal class and that's going to look like that so if hover is true show it and the dynamic classes if hover is true BG black BG opacity 40 else nothing and then the normal class is an absolute with full height full Z50 Flex item sender justify around text XL text LG font extra bold and text White NOW inside this divid and then class it with flex item Center justify round and width 50 and again we've got another block surrounded by a div that's just going to be something like that so Flex item send and justify sender on the outer div with an icon hat color white size 30 and then this div pl1 and three just hard coded and underneath we're pretty much going to do exactly the same so just grab this and paste it beneath strange heart to comment and three I'll just turn the five right now final bit last div before the end there we're gonna put in an image and it's gonna look like that so it got a class aspect Square MX Auto Z zero object cover cursor pointer and then the source again a dummy picture I've just put this as 800 by 800. I'll change the actual image let's put in like one two three something like that now let's save it go and have a look and look out it is working I mean that is absolutely black on there um let's give it a refresh yeah there we go awesome look at that beautiful let's just open him up yeah look at that very nice awesome okay because it's nice and easy we might as well quickly do the styling for our login and registration section so let's do that right for now let's close all this and open the side panel go into wolf register and actually I think we need to modify the guest layout first yeah and this is very simple all this stuff this div with the link in it delete all that and these styles on the outlet div just get rid of it and change it to Min height screen Flex Flex call Item Center and BG gray 100 and then this class get rid of that SEC and we're going to change that to windfall Max width SM mt6 px6 py4 border border gray 300 PG white and overflow hidden and all this in the script we can just delete just get rid of that save cool what's that page done right now let's go into login and all this stuff in the script is fine this section that says status delete that and replace it with an image that has a class of MX although PTA pb10 with 200 and the source is the insta logo cool right now this input label you can just delete and get rid of that and on this text input add a new prop that is going to be placeholder and and that is going to be email like that and then the next input which is the password get rid of the label and on this text input placeholder again with password right now this primary button grab it take it from the bottom copy that remove it from there let's go up and underneath this input error the div paste it in like so change ml4 to mt4 and let's go into this button so go into that component and we're going to change the class on it there is loads on this so just delete all of it get rid of all that and add on to it that so BG this color and then hover BG this color with full rounded LG P 1.5 text y text LG and font extra bold save that now why don't we quickly just jump through the login page let's go log in oh look at that coming together at least we can actually see it now okay this primary button we can close we're back in login what else is there this check box section delete it don't need that and then this link section everything is fine except the underline take that off let's save that let's have a look yeah very good except this justify end is actually justify sender like so let's have a look beautiful and then all we're going to do now is grab this entire section copy paste it beneath and inside this div above the link we're going to say don't have an account the text becomes sign up this root password request becomes register and all of the classes before rounded MD we're gonna take it out and we're gonna add in pl1 font bold and text blue 600 and that's it save that let's go and take a look and look at that beautiful nice and simple if we click sign up then we go to the sign up page now we need to modify this so this is register so let's do another side panel open register.view and same procedure again under this head with register we're going to add in an image class NX Auto pt8 pb6 with 200 and insta logo then under this image a div with a class text Gray 600 text Center font extra ball text 22 pixels mb4 and then now we're just going to say sign up to see photos and videos from your friends okay save let's have a lot to come in together nicely look at that okay next bit the actual form section this input we can get rid of and then on the text input we're going to add a placeholder that's going to say name next input label delete and then add a placeholder that says email get rid of this next input label delete this placeholder is going to be password and then last one this confirm password input label delete and add a placeholder that is confirm password and then same type of thing again scroll down this primary button copy it remove it from there go up to through underneath the last input field make a space Chuck it in there and instead of ml4 that's mt4 like so oh and actually I've put that above confirm password let me just grab this a sec remove it from there take it out of there make sure we put it at the bottom there underneath the bottom like that paste that in and there we go we can see it coming together now awesome and then again already registered remove the underline off this get rid of that and we want to justify Center instead of end paste that end center now we can see that is in the center and all we're going to do is grab this copy it paste it beneath and same procedure again with the class everything before rounded MD remove and add in pl1 font bold text blue 600 above this link add in some text that says have an account already registered becomes login and the root is login so that is perfect so now if we save that and there we go that is done looking beautiful so we got our register page and our login page looking beautiful and actually no we've done that we might as well hook this up to a database and actually register and get some live data yeah let's do that right let's jump in the back end open the side panel all this front end stuff for now you can close all of those close resources and let's go into app HTTP controllers and quickly jump into auth and this that says registered user controller let's go in there we need to slightly modify that right what we're going to do for this is add an extra field when we create a new user so under name we're going to put in file and the default image is going to be user placeholder and that's the one we brought in earlier from GitHub if we just go into public and you can see the userplaceholder.png that just looks like that so whenever you register every user will have that awesome right save that because that's all we need for this controller close that and then go into the models right there user.php and we need to add something to this fillable so under name we're going to add file because we want to be able to update the file column cool let's save that okay next let's go into our database folder are right there and then migrations and then this first table create user table now all we're going to add to this is underneath the name we're going to add another column called file so if we save that and that is done so we can close that this we can close that and now I think we need to set up our end maybe it's done already let's go into dot end and Instagram yeah for me this is fine so what I'm going to do now is open a terminal and just so we can test that this actually works let's do PHP add the sun let's close this side panel migrate and it should set up a database for us automatically so if I press this Instagram clone does not exist would you like to create it yes please that is created and it's run all the migrations which is perfect so now if I open SQL Pro and I go into Instagram clone there we go all the tables users and if I go back in this project and if I register if I sign up I put in John week's Dev John and a little password and then register 404 not found that is probably because the redirect is going to the wrong place so let's jump back into this open the side panel go back up into registered user controller and we want to go into this root service provider so go into that file and if you don't know where that is that is in app providers and you can see it there the home is forward slash dashboard all you want to do is remove dashboard save that now let's go into our database refresh it has actually worked so if we delete this user again delete row get rid of that and then go back to this refresh and then let's re-register I'll just put in anything password now let's register we should get redirected back to the main page let's register yeah there we go successful I think let's open our database refresh beautiful there we go awesome okay now we know all that's working all register stuff let's finish up all our components for the front so that is done and then we can make all the controllers for the back hook it all up and then we can actually start using some live data so next let's make the display post or show post overlay let's go to our code and we can clear all this close all this up close all this and this public and it's doing resources JS components and we're going to duplicate this check box View and we're going to call this Joe post overlay dot view and clear this script out clear the template and let's add in our Imports so first at the top we're going to need ref and two refs from View and use page from inertia we're also going to have to import our likes section component we also need a couple of icons so close dots horizontal and emoticon happy outline then we need some variables that's going to be three that's going to be a comment a delete type and an ID and that's pretty straightforward we'll we'll go over what that is when we actually use it we're also going to import the current logged in user which now we can actually use because we just registered we also need some props for this component because we need to pass through the actual post that we want to display so we need to Define props post and then convert it to refs and there's quite a few emits on this component there's going to be four so that's going to be a close overlay and add comment update like and delete selected but when we get to that I'll I'll show you how that works because all this kind of intertwines together and also we've got a little function called text area input and what this does it's very simple is that the text area dynamically sizes based on how much text you actually have inside the text box it's very simple it's just that awesome right let's do our markup in the template so open the div and we need an ID in a class and it's going to be ID overlay section and then the class is fixed Z50 top zero left zero with full height screen VG black BG opacity 60 and P3 then inside this we have a little button with an icon inside it and that is going to look like this so it's absolute positioned with right three and we have this little click event that is an emit so when we click this button we emit to close overlay which closes it from outside of the component and then inside we have a little close icon which is size 27 and the color is white and actually before we continue let's just actually add in this PO show post overlay where it needs to be so we're going to need it in the home layout so if you're going home and in this top section underneath like section components add in show post overlay from components and then at the very bottom of this file underneath main layout we want to add in show post overlay like that but actually we don't need that end one we can just close that off once and then open this up and this is all the things we need to add onto this component so first we want a VF and if open overlay is true we should show this so if you go to the top we can see we got open overlay by default is false and then we need to pass it an actual post and we're going to call this current post which again we have up here we got a current post variable right there which is default null and then just for now we're going to add one Emit and that's going to look like that so when we click the button inside show post overlay that is emitting close overlay this if we go and look at this in show post overlay we can see it right there emit close overlay and we've defined it right there if we go back into home view now we can see that when we click that open overlay we set back to false so it closes the overlay and there is more emits for this but we're gonna get to that later let's keep this simple for now right so save that and right this button let's put a class on a new line and we're going to add an app click and it's going to look like that so on click open overlay is equal to true so if you say save that and we go back to our page and this at the bottom this view all four comments if we click that it should open like that perfect and if we click this this is the emit and we close it beautiful right so let's open it again and let's finish the styles for this show post overlay we'll put some dummy information in it right so underneath this button another div open it and check a class on that is Max with 6xl height calc 100 minus 100 pixels MX Auto mt10 BG white and rounded XL inside that a div blast it with widthful MD Flex H4 overflowed or unrounded XL and now in this we have a little div with an image inside it and that's going to look like that so we're going to class on the other day Flex item Center BG black and with full and then the image is rounded XL Min width 400 P4 and MX Auto and I've just pulled on this a dummy image let me just put this on a new line like that so we can see if we save that time to see something look at that okay beautiful coming together beautiful and this 300 by 320. I'm going to change that to 800. anything Gonna Change no it stays the same oh there there we go cool okay awesome right let's continue okay so next bit underneath this div dip it up again place it with MD Max with 500 pixels with Fallen relative then inside that a div with a class of flex items centered justify between P3 and Border B David class with flex and item center now inside this we've got a couple of things so first we want an image with class rounded full width and height 38 pixels and this dummy image next a div with the class nl4 font extra bold and text 15 and I've just put name here for now and then finally we want another div with two things inside it and that's going to look like that so the outer div is flex item Center text 15 pixels and tax grade 500 and then we grow a little span with these styles on for the dot or the full stop or the period and then this little div with date here now if we save that and take a look you can see this top bit look at that coming together very nice we still open close yeah look at that beautiful very nice okay let's continue okay right under this section we're going to add a button and that's going to look like that so A Button inside it an icon which is dots horizontal cursor pointer and size 27 pixels we save that yeah we can see it right there beautiful let's carry on okay from this button go one div down open it up div that blast it with overflow y Auto and height calc 100 minus 170 pixels inside that div open it class it with flex item Center justify between a P3 then inside that divid open it classic with flex item Center and relative now we need another image for this and that's going to look like that so class absolute minus top one rounded for with 38 and height is the same and we got again this dummy little picture let's save it let's take a look we don't actually see anything yet that's fine let's just continue right now under this image divot and class it with ml14 and then inside this we need two little spans that is going to look like this like that so the first span inside that is named here and we've got on extra ball text 15 and MR2 and then the bottom is text 15 Tech screen 900 and this is a comment so dummy for now save that let's go take a look yeah you can see it right there awesome looking good right next bit from this span go three divs down so one two three open that up divot add a little class to this that's going to be P3 so padding three then inside that div open him up class it Flex item sender justify between then inside that divided where with flex item Center and then inside this we need an image and that is going to look like that so class rounded full width and height 38 pixels and then again dummy now just underneath this image we have another block which is going to look like that so ml4 font extra bold text 15 pixels and inside we got name here with a little span which is font light text Gray 700 and text SM and that's going to be where the date is so if we save that and take a look you can see now we've got another one and this will be for all the comments awesome right underneath that so from this span two divs down one two open it and for this we need an icon and that's going to be dots horizontal and that's just class with cursor pointer and the size is 27. save it let's have a look you can already see it right there beautiful and then one div down from dots horizontal so underneath that another little block which is that so class text 13 pixels PL 55 and this comment section so save that and you can see now we got a little comment for that beautiful now we just need to add a little div underneath this just for some spacing so two divs down one two open them up and add a div with a class that has pb16 and MD hidden awesome right next bit is the like section but we've already made the component for this so if we scroll up yeah there it is like section component beautiful let's bring that in all we need to do for this is one div from this MD hidden go down open that up and this like section for now needs to look like that very simple just a class with px2 border T and mb2 save that let's have a look we can see it right there look at that awesome and now finally underneath this we need our input section so we can actually write a comment so underneath this like section additive open it class it with absolute Flex border bottom zero with full Max height 200 pixels BG white then overflow Auto then we need a little icon that is is emoticon happy outlined class pl3 PT 10 pixels and a size 30. then we need our little text area I mean let's have a look how that looks first yeah okay there's our little base down there beautiful right let's add this text area so text area and remove all this audio for now and open this top bit up because we're going to add some things onto this we're going to add ref text area on input text area input that function V model comment the placeholder is add a comment and the rose is one so it's small and then we're gonna bang a class on this and that is going to look like that so whitful border zero nt2 and B2 text smz50 Focus ring zero texture 600 and text 18 pixels save him go and have a look look at that on the bottom we that looks awesome man and how easy was that beautiful right all we have left to do is the little button so underneath text area let's just add a button open it and this is going to be post then open this up and we're going to add a couple of things so we need a VF comment so if there is a comment display the button and also a class that's going to look like that so text blue 600 font extra building pr4 and later on we're going to add an add click to this because when we click we want to emit information out of the components we'll be able to add a comment but for now we don't need that so we'll just save this and then we go and have a look we can see right there there's our little post and if we delete all of this it goes away uh my face is probably in the way let's do it again there we can see our little post and then finally I get rid of it and it's gone beautiful awesome okay that component is done right cool so inside this component we just made is another component so this one is called show post options overlay so if we go to the very bottom of this component underneath the last div we're going to add in this show post options overlay and for now all we're going to add on to it is a VF delete type and remember delete type app yeah is that right there is no and we also need to remember to import this so just in our script section above the like section let's import this options overly from components and we need to make that so open the side panel and then again just copy check box rename it to show post options overlay.view and again clear the script clear the template and this one is a little bit more simple so I'll just dump this script in the top because quite easy we just need an import two refs Define emits this two so this close and delete selected and then we have two props which is that which is delete type and ID and we convert that to refs and then in our template we need to add a div opening and let's open this up and we're going to add an ID in a class and that's going to be show post options overlay for the ID and the class is fixed Flex item Center Z50 pop zero left zero with fall height screen BG black a BG opacity 60 and P3 now inside that another div and open it and class it up with Max with SM widthful MX Auto mt10 BG white rounded XL and Tech sender now what we need inside this is a button so let's put button open it and class it with on extra bold with fall text red 600 P3 text LG border border B grade 300 and cursor pointer and inside this nice and simple we're just going to add delete and then underneath this button we're going to add a div which also is going to have an emit on it and that's going to look like that so the class P3 text LG and cursor pointer this is going to be cancel and when we click this section we're going to Omit close and that is going to close this overlay component awesome right save okay right I go back and show post overlay and I set delete type to True like that we should see the overlay let's save it yes there we go look at that awesome so there is an overlay on top of an overlay which when asked okay let's just put that back to now for now and because we have all I think that is all of the components that we need for our front end so I think that's everything at this point I think we can actually start creating all the controllers and migrations and all the stuff we need on the back end to actually start putting all this together so let's shut all of these windows we got open close them and open the side panel close all these resources for now and go to app HTTP controllers right what have we got we've just got profile controller we don't really need that but I'll just leave it anyway right first thing we're going to do is make the post controller so let's open the terminal close the side panel and we're going to say PHP Addison make model and this is going to be post and we want hyphen M for migration C for controller and then hyphen hyphen resource so we have all of the methods pre-made in our controller and now we're going to press enter that has been created let's open the side panel post controller let's open them up you can see in there we've got index create store show beautiful and let's check if our migration was created as well what I say this last one yep create post table let's go in there now we need to modify this we need to add columns into it and this is going to look like this so we want an unsigned big integer that is going to be a user underscore ID and that is a foreign ID so it references the users table and we have a Cascade on it so when if we do delete the user then this post will be automatically deleted because the user doesn't exist for it and also we have a text column and the file and that is all we need for this so save it and let's open the side panel and there is going to be relations to this because it'll have one the many and belongs to and that type of stuff but we'll do that when all of them are created let's just focus on creating a post now now so close this migration close this database section up and let's go in post controller I close this and we need three methods for this so index we need create we do not so delete that store we need show we do not delete that edit delete update delete and Destroy we keep so we got index store and Destroy beautiful and actually I'm pretty sure we don't need index either so actually just get rid of index take that out and we just need store and Destroy okay right so let's do the store so first we want to create the new post object and then we want to validate that we're passing the information in the fields that we need and we're going to do that with request validate we need a file that is either a JPEG or a PNG and we need text as well so that's why it's required okay so the next bit we need to create a service for this we're going to create a file service now we can pass information into and it'll upload the image for us so then we can dependency inject it and use it in multiple locations we're going to use this for our user image upload as well so this is going to look like that so we have a class called file service an inside file service a function called update file and we pass these parameters so what we're going to do open the side panel an inside app this we're going to create a new folder called services and then inside Services a new file called fileservice.php like that and we need the PHP opening tags we also need the namespace set so it's going to be app services and then we need the parts class file service and then open that up and then we need to write our function so let's close this side panel that is going to be public function and this is called update file and we pass a model the request and the type let's just open this up now just to help us a little bit we're going to use a package called Intervention image so if we go to the browser I think actually it's image intervention right there yeah intervention image um what is this read about laravel integration and watch this installation awesome there's require so copy that go back to our project open a terminal gonna say composer require intervention slash image install it awesome that is installed okay next what else do we need let's go down to integration in laravel we need to add this line to config.app right there so let's go in this open this up we're in config app.php and scroll down to this the providers and what does it say package service providers let's drop that in there make sure we add a comma to it and what's next add the facade so grab this copy that and let's go a bit further down glass aliases facade inside this drop that in like that save that that and what else then we need to publish the configuration so grab this copy and in our terminal paste that in and press enter that has been published and if you look in the config we can see image.php right over there awesome right now this config we can shut and this page we can actually share it as well so get rid of that right close this app.php I know enough file service and the namespace we go into use image like that and right the first thing we're going to do is rnf we're going to say if and then whatever we're passing whatever model we want to check that the column called file on the database is not empty so if model file is not empty we then want to get that file so with the public path and then put that into this current file variable and then underneath this we want to say if the file exists and the current file is not equal to this because this is our default image for everybody whenever anybody lines up they get this image we do not want to delete that if it isn't any of that then we delete it awesome right now after that after this if we want to say file equals null and then we want a little if else that is going to look like this so we're passing this type up yeah so if the type equals user we want to get the file and resize it to this 400 by 400 else if it if it's anything else we want the original size awesome and then next line we're going to get the extension of the file that's what that EXT is so extension and that extension we want get client original extension so that's where it is and then put that into extension and then rename it with time and then once it's been renamed save that through the path that is file so that's in public file and then the name we just created right there and then finally we want to save that through our database and then all we do at the end is just return the model and that is is it so we save that and then if we go back in the post controller and import this file service so import and then at the top you can see we got this app Services file service we're returning the model which is going to be post then underneath that we say the user ID is the logged in user the text is going to be text and then we're just going to save that to our database and that is it so save that and then because we yeah we might as well do the destroy so destroy remove this just put in this ID and we're going to say post find by ID and what we can do for this is go into our update file function steal this section copy that go back to post controller and underneath this paste that in and the model is post the same as this post we can get rid of this end bit all we need to do is figure out that the file exists and if it does exist delete it and then after if post delete that's it done beautiful nice and easy also awesome right now we should be able to once we've made the front end logic we should be able to create a post so let's jump into our side panel let's go to resources.js components and what is this create post overlay okay and actually we've already got this create post function that we've already done a while back so that is ready so let's just make the end point because we can't forget that otherwise we're gonna do nothing so let's go into roots web.php and let's make our little endpoints and all it was was a a store and a destroy so if you go inside this middle way off we open that up well actually I mean we can just comment that out and then we add in root post which is posts and that comes from the post controller and we need to make sure we import this controller at the top so right there use app HTTP controllers post controller and we need the store method and I put a name on it post store and exactly the same with delete and we pass an ID because we want to find the post by ID before we delete it destroy and post start destroy right save that and let's just go nuts and see if we can create the post let's just click that select from computer let's grab this screenshot upload and say this is a test and then share nothing happened let's have a look at our database oh we forgot the migrated oops all right go back in open this bottom and we want to say PHP Addison migrate free post table has been migrated right let's do it again let's press share and let's have a look at our database refresh there's post nothing in there let's have a look in our create post overlay close this a sec and we've got a create post function let's find no we don't so we need to find where that button is where this is close and there it is button share all we need to do to this is add an ad click event like that which is create post thank which again is this right here so now let's save it go back to the front and let's press share what just happened let's open this refresh there it is beautiful right let's just check the image is uploaded let's go into the side panel lock into public file what is this yes beautiful awesome we just successfully created a post so okay because this is going to get reasonably complicated from this point on um because there's quite a lot of stuff going on there's lots of emits components and components there's you know it gets confusing it's probably better if we do all of the back end stuff now all of the functions all of the migrations all the models all that stuff all the endpoints finish off all that and then finish up the front end because if we're going back and forth so if we're doing one controller and then doing a bit of the front end then another controller a bit more of the front end it's going to be hell so the best idea I think is to just do everything in the back so let's start making the rest of our controllers models and migrations right close this up close this as well this file service just close it post controller we're done with that for now close that right let's open the terminal first off we're just going to make a controller we're going to say PHP Addison make controller and this is going to be home controller enter what's this add this all right sorry artist San Ender okay there is our home controller let's open that and inside this all we're going to have is a function that is index like that and we want to get all posts ordered in descending order by date and let's just import this post model so they use app models post and then after this the return is going to be this so make sure we import inertia like that so use inertia inertia now we need to return a all post collection which we need to make and that's going to return everything so all the posts with all the associated comments all the likes the user that made the comment it's a giant object and make sure we import user as well so the user model there we go app models user and now let's go and make this all post collection so open up this terminal again and this is going to be PHP Addison make resource all posts collection enter right open the side panel and in HTTP you're going to see this new file called resources let's go into all post collection and we have this and how this is going to work is that we are going to join everything together all the likes the posts users comments using eloquent relationships so one the one want the many is belongs to all our Jazz we're gonna do it like that and then we're going to spit it out in a giant object so let's get rid of this parent don't need that and first off we need to say this collection map because it's a collection that we're passing in because as you can see this a collection and then inside the map function this is going to be a post now let's open this up right then we need to return what's inside here open this as an array and the first part of this is going to be this so post ID text file and the created act and we're going to format that so it's actually readable uh let me just close this off with a semicolon same as that semicolon so we don't get any errors and watch this where's this error in this array just get rid of that okay right next comments and under this so we're going to say comments and that's going to be related to a post and then we want to map it and then we want to say function and out of each one we want to get the comment let's open this bad boy up and then again we want to return array and then all we want to pass back for the comments is an ID and text but we also want to know who created that comment so underneath we're going to say user and inside that user we're going to have ID name and file and that's going to be comment user ID name and file so you can see now how it's all interlinked using the relationships okay right let's just make sure we got the semicolons where we need to on that and this is going to be a comma because next we need likes and that's going to look like that so from a post we get all the likes associated with that post and we need to put a function let's open them up and in this we're going to say la like and then inside return open array and inside this we need the return the ID the user ID and the post ID from like awesome okay close that off and put a comma after that now finally at the end of this we need the user so user who created the post and then open an array and for this we're just gonna have the ID the name and the file and you can see we're going from post user and then getting the user ID name is name same as file right that is the object we want to spit back so let's just save that we can close this now because that has been created let's import it here so all post collection from use app HTTP resources or post collection and let's make sure we save this home controller cool so next let's do the like controller so open the terminal and put PHP actually just press up I think no it's not there let's just put it in so PHP at the Sun make model like with a migration a controller and a resource enter open the side panel so we've got our light control over there let's go in models there we go we have our like and our post from before and we need to go into our database folder migrations and with likes table right there let's go into that let's add the columns we need which is going to be foreign keys so two unsigned big integers which is user underscore ID and post underscore ID and then the foreign key of each so with a Cascade on it so if they get deleted then a like associated with it also gets deleted so let's save that and close that now we're going to jump into our light controller so let's get in that and we only need two methods for this so the index and the create just get rid of it the store we're going to keep and then show edit and update delete get rid of them and Destroy we keep so just store and Destroy and for the dry just past the ID like that right this is very simple in our store we want to validate the request make sure there's a post ID in there and if there is create a new like and then assign the logged in user to the user ID the post ID is going to be whatever you pass into it and then we save it and that's it beautiful save that now let's do the destroy method and this is even easier we're passing the ID we find the like by ID and all we're going to do is do a little if statement like so we're going to count how many likes there are if it's greater than zero delete that's it save awesome nice and simple right now let's do the comment controller so if I press up and I change post to comment we also want a migration in the controller and resource so enter and let's close this for now this should be fairly straightforward as well we open comment controller oh wait let's go to migrations for there's the comments table open there and this comment table is practically exactly the same as the likes except there's one extra column and that is this at the bottom the text so what the comment actually is so again we have two unsigned big integers which is the user ID and the post ID again we have them cascading because they're foreign keys so if anything gets deleted then it all gets deleted what if it's associated with it and again this little text which is the comment beautiful right save it and then close that right now we're in comment controller and again all we need for this is the store and delete so index and create delete it like that and the show edit an update just get rid of them like so delete all that so all we have is destroy and store and again destroy we're just gonna pass an ID right now in store we need to validate that the request has a post ID a user ID and a comment and if so we're going to create a new comment and then we are assign all those values being passed onto the new comment object like that and then all we do is we save it and that's it beautiful how easy is that save that and let's do our little destroy and this is stupidly easy two lines so the first get comment by ID and then delete it that's it awesome save it and I think that is all of our controllers let me just double check oh actually no we have one more controller which is going to be a user controller so let's open a terminal because we already have the user model because that comes as default with laravel so all we have to do is say PHP Addison main controller user controller hyphen hyphen resource enter okay it is on the side panel and where is that user controller right there close that up and minimize this a sec and we need two methods in this we need show and update so everything else delete so it looks like that show just get rid of the string an update all we need is the request like that beautiful right now for the show very easy first get the user by ID and let's make sure we import user so at the top use app models user and just as a safety measure so we don't get any errors if we are in an ID in our URL that doesn't exist we're going to say if the user equals now return the main page so we want to go back to the index route of the home and then if everything is good next you want to say get all the posts by user ID and let's make sure we import post so at the top app models posts and we want to order these by most recent and this get is just get all of them and then finally we want to return inertia to the user page and let's just import inertia and this is our nice little Old Post collection object that we made collection sorry import that and make sure that's in there yeah so import resources all posts collection beautiful so we're returning the user by ID and all the posts associated with that user and then finally this update function this is going to be to update the user image so first off we need to validate that the file is either a JPEG or a PNG and then if it is we can use our handy little file service that we made earlier which is going to look like that so let's just import file service let's just check there it is file service from Services beautiful and we want to pass the user so that's essentially the model the request and what the type is and the type is user so if you remember inside this function if the type is user we resize it 400 by 400. let's close that and then super simple after that we just save it and then we have a little return redirect to root user show and we want to return to that route by ID and that is it beautiful and I think that is all the back end stuff done which is awesome so yeah before we forget let's go to web.php and create our end points for all of that so this profile stuff just delete that we're not going to use it and the first thing we're going to do is these two routes outside we're going to delete them get rid of them and we're going to do everything inside this middleware this off so first line is going to be the default which is going to be home controller index and the name is home.index and if we go in home controller which we actually need to import so let's import home controller right there like that home controller from controllers let's then go into that controller and we can see the index method is this awesome right next we have our users so let's do that underneath the home controller that's going to be like that so let's import user controller so the first one is get user by ID which is show and the second one is a post user and I thought this is update because that's the one that we update the user image awesome save that did we import user controller yeah right there okay cool now post controller we already have it next is going to be comments and that's going to look like that so we got a post and a delete let's make sure we import comment controller so common controller right there and for this we have a store method and the destroy and we destroy by ID right there make sure you get all these names correct on all of them as well and finally the last endpoints are the like so that's going to look like that with a post and a delete again import the likes controller let's check it there we go light controller right there and again store and Destroy and the destroy is by ID so save it now we need to make our relationships between the models so open the side panel and scroll up to where is it not http models right let's start in from top to bottom so comment.php right first we're going to say every comment belongs to a post so that's going to look like that so how I'd read this is every comment there belongs to a post that we just call it post there and then the next one every comment also belongs to a user so again we have comment so every comment belongs to a user awesome save that that is done and remember how this links together because we've got IDs foreign keys on each table if I give you an example this would essentially look something like ID use user ID so that is how it links it together and it would be the same for post so if I put that in and I put post that is how it knows what to get so if I just revert that because that is how it does it by default that's why you don't have to specify it but again if you want to learn more about it just go to the louder documentation and type in belongs to or want to many relationships the documentation is quite thorough anyway let's continue next we have like.php this is very simple it's just one we have a like belongs to a post that's it beautiful save that now in post so first one a post belongs to a user so post belongs to a user because a user creates a post second one is going to be a post has many comments and we're gonna order that in descending order so we want to get the latest record first so if you think about it you can have multiple comments on one post awesome and now finally a post has many like because you can have multiple users that like a single post so that is how that works save it now last one user.php scroll down first one so this is user.php so a user has many posts awesome them save it and then second one is going to be a user has many comments simple as that beautiful save it and there we go that is our back end done right let's jump back on the front end and try and hook this baby up okay let's jump back on the front then let's close all this back end files up a sec close all these you don't need them anymore close this terminal and this app section close your map database close the map public close it right uh we probably need to migrate all of the migrations as well so let's do that let's just do a PHP at the sun migrate awesome the likes in the comments table has been migrated now let's shut that okay right first let's go into Pages home Dot View and what does this say is this delete what is this older member function map on now let's refresh there we go okay yeah because now it exists awesome right now technically because we've made all of the controllers and the endpoints we should be able to get some live data so or if you're going to be a post let's grab that copy it and inside this main layout at the top let's dump out posts and see what we get yes look yes amazing so we're in business right go back into the code get rid of this post and let's go through this bit by bit now so we've got all users and posts okay so let's start here on this slide so instead of 10 we want all users this link we want to change for the real root and that's going to be root user show and the ID is passed so you have users forward slash whatever ID and that is slide dot ID and then we want to put the real image of the user so let's put that in and also the real name of the user so let's put that in save it right there should only be one there's just me so if we go back to this and I press refresh oh there's two I was there two cool let me go into this users there's only one user what the how is there two let me dump this out a sec copy all users just in main layout there's paste star there and see what we got yeah there's only one there's only me why is there two oh I know why because yeah items to show is eight and items to scroll is four so it's it's duplicating me twice okay I understand now so yeah that is actually that is actually okay yeah okay fine let's continue okay next we got this posts ID section and on this we're just gonna add a V4 with posts and posts.data and the key posts remember at the top we're defining props posts as an object now inside this we need to make some modifications so this link is also going to be root users show and then the ID is post.user.id the source needs to be dynamic so that is going to be like that the user image and the name is going to be post user name like that and also we can't forget the date so date here becomes host dot created at and if you remember in our object our collection we formatted it so it's actually readable awesome let me save our SEC let's have a look yeah you can see now that that's changed and actually my name is coming out we got this little data there and the default image awesome right let's continue next bit's very simple this image you just need to make Dynamic and that's just going to be post dot file save it let's have a look wait look at that looking awesome man that is lovely right then next on our like section we need to add two things and that's going to be post as a prop and this emit which is like right next on this like we are going to pass a prop which is going to be post like that and we might as well do the emit as well because this is going to Omit to a function called update like and we pass the event into that we won't make this yet we'll just leave it as it is and let's continue for now so next this likes we need to check the length so post dot likes dot length that would be zero at the moment because there's no likes the next is the name and that is going to be post.user.name and then the actual text of the post so remove that and put post dot text and then finally in this button where it says at click we are going to add current post is equal to post and what that does is when we click it we're assigning the post we click to this current post variable which will mean then it gets passed into this post object to show post overlay and it displays that post and actually this view all four comments that needs to be dynamic as well that needs to be post dot comments dot length now if we save that let's have a look oh yes look at that that's beautiful so we got name date and image the main post image the like stuff zero likes then name and post text and then view all comments what if we press this let's have a look no this isn't Dynamic yet but we can do that now so let's close this and let's go back into our code let me just take that all users object out of the top of this main layout get rid of that save it now inside show post overlay let's get in here inside show post overlay awesome you can see we're passing the prop post all we need to do is hook that baby up so first thing we need is the actual image so get rid of this and put post dot file let's save that let's go take a look now if we click this view all zero comments let's click it and there's our little image look at that beautiful close that do once it starts going it is just so easy man go back in the code next we got the image for our user and we can just replace this with post.user.file make sure there's a semicolon before it let's save it let's have a look open him up yes there it is right there our default user image next we got our name where it says name here we just replace that with post.user.name and again the same thing date here replace with post doc traded at save let's have a look there it is beautiful look at that now if we just scroll to the top a sec yeah it's already in there awesome this button let's just open that up a sec we're going to add a VF like so so if the user ID the global user ID is equal to the post user ID display this button and also we have an act click event like that so we have a delete type and an ID ID is obviously the post ID that we want to delete and the delete type is a post because we have a function that can either be a comment or a post you'll see that shortly but we'll put this in now so we don't forget it does get reasonably complicated just know that okay cool let's carry on next is this little image this is wrong let's replace that with host.user.file awesome then this name here replace it with post.user.name and then we got this text which is going to be post dot text and then we have this little section which we need to add a couple of things on this because this is where the comments are so we need to Loop through them let's just indent this right first off let's add a VF host dot comments and we also want to add a V4 and a key so comments in post dot comments and then Loop through each comment right now inside this image the source needs to change it needs to be comment.user.file and then this name here needs to be replaced to comment.user.name and then the same as the date replaced that with postdoc created that right I save it let's have a look nothing in there but this has changed so awesome that is working right also on this dots horizontal we need to add a VF like that so if the user ID the global logged in user ID is equal to comment.userid show this icon and we also want an at click event on this that is going to be the delete type so we assign in comment to delete type because we want to delete the comment and the ID is comment.id awesome right next this comment section replace that with comment dot text David we should see nothing yeah because we currently have no comments but the fact that it's not break in is very good and then on this like section let's add a VF post and again we want to pass the post as a prop and the same thing as before we have a like emitting and then we have another emit off this emit so it's emitting to emit something else yeah again it gets quite complicated and confusing so just remember that so take your time and if you do get stuck remember there's always the repository the reference so yeah let's continue right let's scroll down right finally on this button we're gonna have an app click event and that's going to look like this so there's two things in this we're emitting through add comment an object with other objects inside it a post a user and a comment inside an object and then after we've omitted that we set comment back to an empty string beautiful and now this is where things get serious let's put this on a new line because this is going to get slightly complicated now next we need to pass a delete type like that then we need to pass the ID of what we want deleted so remember a delete type can be a comment or a post so we pass the ID next we want to emit out of this component what we have selected to delete and that is going to look like that yeah I know so we want to Omit out of this component and then emit again out of this component which is going to be delete type ID and post and then after we've emitted it we want to set this back to null and the ID back to null and then finally we have just a simple emit which is close and the delete type is null and the ID is null so when we clear that we close the overlay yeah I know you're looking that is heavy you know so anyway let's just save that let's go back in this what's going on nothing yet I mean still nothing is broken so that is superb right let's jump into this show post options overlay just to make sure we've got everything in this correct and let's have a look at this button we're missing an emit off this button so put this on a new line like that and above we want to do at click and then emit the delete type and the ID and also inside this button add after delete we want to display the delete type so delete whatever this is post delete comment delete like awesome right save it and I think we're good with it so we can shut this component now right what are the components are there this likes section let's go in this and make sure this is fully functioning I don't think it is right let's uncomment this user and we need to make a function that is going to be a computed so let's do is heart active component and that's going to be computed open this up like so and first we're going to say let is true equals false so by default we want this to be false right let's add a for Loop and just put I so what we want to do now is replace this array with host.value.likes DOT length and we want to count how many likes there are for the current post and after that we're going to say like is equal to post.value.likes and then I whatever index that is and then we're going to see if like dot user ID so like as in this is equal to user.id and user.id is this the current logged in user and the like post ID is equal to post.value.id we are going to set is true to true and then return it so let's make sure we import computed oh we've already got it there cool okay now inside this template this hard outline we need to replace with this so if is hard active computed is not because we got this in front of it so if it's false the user has not liked the post so we show Heart outline and then VLS we show the full hat with the color red like that so save that at and you also need to make sure on this button you add an at click event like this because we are going to emit out of this component the post object and the user object like that so make sure you get all of this right all right save that and nothing is broken again which is wonderful let's just open it again beautiful nothing's breaking okay so let's jump back into home and because we've got all those components emitting something let's just add the rest onto this show post overlay component because lots of stuff is being emitted out of this after post we need to add component emit which is going to go into a function called add comment the next one is update like which the function will be called update like and then lastly we have a delete selected which is going to look like that and that is going to be delete Funk and then after that open overlay is set to false so it closes this component so yeah I know I like there's there's loads going on right anyway scroll to the top and watch what we need to do now is make our components and we should probably start with the easiest one which is add a comment it's very easy so underneath on mounted let's say cons add comment equals and then open this bad boy app and remember we're passing the event into this ad comment so we need to pass object with a lower case o like that object and we're going to say router post forward slash comment and router is coming from router right there from inertia and then comma open this up and we need three parameters which is going to be host ID user ID and comment from this object so there you can see the object and then very simple to finish this off we're gonna have make a space at the end of this comma object and then on finish update post and pass that the object let's make this update post function so under add comment cons update post equals an object and then write object in there because we're passing that as a parameter now inside this we need four Loop and let's just replace that with I like that and we are going to Loop through all of the posts so array dot length so post dot value.data dot length we want to know how many posts there are and then this const element let's just put in the post because We're looping through and getting this by index and now we want to say if host ID so this post ID is equal to the object post ID we want to reset the current post value to that post right save it okay we've done a lot let's actually try and make a comment because this should work right let's go in yeah view all comments unless I'm assuming at the bottom and say this is a test unless post and hopefully it doesn't break oh it's working there we go look at that how awesome is that wait what if we press this oh look at that see delete comment how awesome is that can we delete no we can't yeah okay but that doesn't matter we can make a comment so if you press cancel we get rid of that beautiful okay and now let's close this awesome we can see in there view all comments with view all one comment so it is actually counting it as well awesome so the comments is working very good and it's like no we haven't done that function yet so let's just jump back into this right let's do that like function so what was this called there it is update like so let's scroll up to this script again and just under add comment to cons update like and let's open him up and now let's pass the object and we're gonna need two local variables for this and that's going to be delete like equals false and ID is null and right we're gonna have to Loop through this again so if we do a for Loop like that let's put that to I and what we need to do for this is in the object because we're passing back the post and the user and just to double check that let's go into our like section right there and let's go in and we can see there emit we're emitting out the post and the user inside this object so when we go back to this home let's go back to our function we want to look through object we want to get the length of object post likes length we want to see how many likes are there and then this line we're going to change to const like and we're going to Loop through the likes and in this we're going to say if the like user ID is equal to the user ID being passed back in the object and if the like post ID is equal to the post ID in the object we want to set delete like to true and then assign the like ID to this ID variable right there that is now so then after that we can say if delete like is true which if it is in this it will be we want to say router delete and that's going to be like forward slash ID so what id we want to delete and then let's open this up and then when that is successful like on finish we want to update the post we want to call this function right here and then we'll have an else as well so else if it's false we want to say Rooter dot post and this is going to be likes again and we don't need an ID because we're making a record and what we want to do is pass the post ID from the object and then once that is successful at the end of this on finish update post exactly the same as this awesome right save that and let's give it a try let's go back to this page let's refresh just in case oh we're logged out let's log back in log in and hopefully now if I press This Heart it should turn red and the like should go from zero to one let's press it yes look at that now if you press it again goes away beautiful look at that that is working perfectly so if you look now in our database and I go into the likes table we can see there user ID 2 post ID one and if I just get rid of this and then open this database again and refresh it's gone let's like again go back to the database refresh it's back awesome so that is working beautifully right awesome actually let's try with their view comments oh it's working on there as well let's click it yes awesome that is freaking awesome man wild so what about this comment can we delete this let's press it delete comment no we haven't done that yet so okay let's do the delete comment let's cancel that close this look at that man that is wild beautiful right let's go back on our code so now let's scroll down and see what we got in here right show post overlay we have this delete Funk because we've made add comment we've made update like all we need to do now is make the delete Funk so let's scroll up and let's put above update like let's say const delete Funk equals open him up again we're going to pass object and we want a local variable in yeah called URL which is an empty string and this function is very easy it's just a little if with an else and all we're going to do for this is say object dot delete type if that is post then the URL is going to be updated to be posts forward slash the ID of that post and then else if it isn't a post it's a comment so then it would be comments and then the ID of that comment awesome and all we're going to do is finish it off with Rooter dot delete and then the URL which is one of these and then once that's been deleted on finish update post perfect save it and now let's go back to our browser let's refresh just in case now let's open this comment let's make a new one let's just do whatever and then say post we've got our new post there now let's try and delete that delete uh what happened there it says comments one so oh it did delete but the overlay closed as well um let me just double check this code let me scroll down oh because this open overlay is equal to false let me just take that out to their SEC copy and just remove it for now let's try again let's delete this one delete ah okay put in a new comment uh let's just Chuck a couple in there just so we can test it let's put three in there awesome let's delete one delete okay perfect right close this for a sec now you can see we have two comments in there beautiful what we're going to have to do is scroll up and I think we could possibly put it inside this we could say after router delete well let me just say if and then put that inside there the open overlay dot value equals false and then just take the object and if that equals comment save no sorry no comment it is post so save that like that and then let's go back in this open it up let's delete awesome that didn't go away now technically we should be able to delete this post so let's just click this top one delete post let's click it yes awesome let's check our database refresh like is gone host is gone comments are gone because they're all Cascades user there's one user left okay let's create the new post select from computer let's do it again let's do that Instagram and then just put whatever in here just get it right in there and then share there's our little post like awesome view comment make a comment post yes this is awesome very nice right I'm pretty sure this post section is pretty much done we might as well do this side section now and actually get some live data so let's go to the side panel and go in through layouts main layout and yeah you can see in here we got quite a few things to do let's go to the top right close that side panel and let's go from top to bottom so let's scroll through this and have a look this link is going back to the default yeah that's correct this Chevron left yeah that goes back to this page what's this name here okay yeah that needs to be this so the logged in username so page props off user.name now what else is there got some of these menu items and we got the href there that needs to be modified to what is that log out okay so we're gonna put in the root log out and that needs to be as a button and the method is post and then there's one above what's this link profile files so that needs to be user show like that root users show and we need the ID for that as well and the ID will come from the globally logged in user okay let's keep having a look there's a link right there and that is exactly the same that is users show from the logged in user so that and we got this image that is going to be a logged in user like that so page props off user file got this name here that is going to be that and the same as this one beneath that's going to be that as well and now what else have we got ah right this section okay this is where we Loop through all of our users so this entire link section copy it remove it put a div open it up and inside paste that link and then on the outer div we need a V4 with that so page props Rand users and where we're going to get this from is the inertia glow Global class so if we open the side panel and I search for uh handle inertia class handle inertia okay and this is inside app HTTP middleware handle inertialrequest.php just in case you don't know where that is and we're going to scroll down and all we're going to add into this is one line and it's going to look like that and let's make sure we import user let's just check that yeah there we go app models user so we call this random users we want to get users in random order limited to five and the get because it's a collection awesome save it and I'll jump back in main layout close the side panel right and for this href on the link we want to modify that to root users show and the ID is going to be randuser.id so we're getting that from the loop the source is going to be Rand use dot file and the name here I'm pretty sure where you can guess what that is Rand use dot name and this bit underneath this name here that should actually be suggested for you so save that let's jump in to this and what is all this we can see that has changed all of this let's refresh and there we go we're starting to get some information but remember we've only got one user which is us so at the moment we're only going to see that but we know that's working because it's being displayed so that is perfect and what else is left this bottom nav for mobile view well this is good what's this this link this needs to be updated to root user show and it's the same again we're going to the user Page by ID and the source is going to be page props or if you use a file that's it save it now if I make this window smaller gonna collapse we can see all that we can see our user there can we create a post yes beautiful we can scroll all this as well look at that that is awesome man go back let's click on the user image yeah we go there we're gonna have to come and do this page as well in a minute let's go back yeah this is looking awesome man let's just jump back into this a sec and we go this line at the end this is perfect it's I think this page is actually done so main layout is finished we can close that home I think as well is finished we can close that get rid of this inertia request and the show post overlay get rid of that get rid of that now let's open user Dot View let's close the side panel and all we have to do now is this page and honestly there's quite a lot of functions on this page that are almost exactly the same they're identical so some that we can actually just copy and paste over is we can go into home.view and this add comment we can grab that copy that and we're gonna paste that in under the Define props and I mean you can extract these functions out if you want them put them in separate files so you don't have to copy and paste them over reuse them and all that but for this project it's fine I mean there's only two pages so it's not that urgent and then we have the delete function on this home page we're going to grab that as well so grab this copy it go back in the user paste it in we're going to make some slight modifications this end bit where it says overlay dot value false just delete it and just inside when it says post at the end of it we're going to add a set timeout with data post equals null and just 100 milliseconds and that is it for that function save that and then we also need the update like function let's just grab it copy that go back to user add it under delete Funk paste that in and yeah this function is exactly the same so again you can you can try and put these into a separate file and reuse them if you want so you don't have any duplications but again for now this is fine and now we also need the update post function and this is slightly different so we're going to grab this function copy it go back into user and just before they get upload image paste it in in and we just need to change post to posts by user and the same there posts by user and this current post dot value becomes data dot posts and I think that is it so if we save that we should now be good to update our template add the live data and finish this up so let's go through this and add what we need to add in right first off this image needs an image from the database so change that to user dot file and user is coming from this the Define props so we got user in there as an object here let's scroll back down we're also going to add a vif to this input and we're going to say if the user ID is equal to the logged in user ID we want to display the input so we can update an image else we don't want to because we don't have this on there we'll actually update other people's image I think okay also them right let's scroll a bit more got a name here that's going to be a user.name and then what else have we got this the posts we want to count how many we got so that's going to be host by user.data.length just to check how many is there and if we scroll down we can do that again right there so that four we change to post by user.data.length okay let's keep having a scroll and it's just this content overlay right so there's two props on this content overlay if we open this first one is going to be host by user and we're going to pass that post by user but first before we do that just above this content overlay jacket div in it and on this we want to put a V4 Loop and loop through all the posts by user and then put it into this variable post by user and let's make sure we take this and drop it inside there so we're actually looping through that component and we also want to emit from that component as well and that's is going to look like that so it's going to be data dot post and then we assign the event being posted being emitted out of the component into that let's continue underneath this I'm gonna have a little div just say pattern bottom 20 save that and that is the end of the component the only thing we have to do now is bring in the show post overlay and because we've pretty much made all of that already we can just underneath main layout put this in so actually let's go to home.view scroll to the bottom I am going to grab this copy it go back to user paste that in and there's a couple of modifications this open overlay false becomes data.post equals null and this open overlay data dot post and the same as the post data dot post and I'm pretty sure that's it we just need to make sure we import that so let's scroll to the top and underneath main layout paste in show post overlay from components save that and let's go take a look right let's click this link on the side John weeks what is this why is that still showing that all of this is correct the post is correct can I click this oof yeah that's working we'll test that later let's get this image displaying first let's go back to our code I think we need to go inside of content overlay and yeah there's the okay this SRC we need to change to that so post by user dot file and you can see this is what is being passed into the component as a prop and what else we got in this we got this comment section that is hard coded to five that needs to be comments.length and naturally the one above needs to be like start length and now this outer div just underneath this class we need to add an at click event that is going to be an emit with selected posts and that is going to be the post by user so we can see there we've defined the omit selected post okay let's save that let's go back and take a look yes with standards here we can see all of our numbers on it as well what if we click this oh my God look at that that is awesome can we like it from there yes beautiful this is insane well if we delete this comment beautiful look at that awesome well and actually I've just noticed on this profile bit there that image is still a dummy one so let's go in to our code let's go to the side panel and in main layouts I think that is let's search for HTTP no we can't find it so let's scroll down menu item profile let's do in that menu item and let's have a look yeah there's the SRC and yeah we need to update that to that user dot file and let's make sure in our script we uncomment that save it and now let's go back and have a look yes it's changed beautiful so we've already done the functionality in the back end in our controller to do this image let's see if it actually works let's click that okay and let me find a picture what's that this will do let's press open well if it is working why is that like that weird let's pick another one just in case let's pick the top one ah there we go okay that other image is weird I don't know why but that is working you can see there it's updated there and it's updated on this profile as well so now if we go back into the home that should have updated everywhere so let's click home yes look at it there there all on the top bit this bit as well let's open this post we can see it all there let's create a post just put anything in yeah post it it's there as well awesome Matt I think this is actually done let's click the heart the heart is working yeah I think now we can actually just give it a test so what do we close this log out and sign up with somebody else let's just put in Fred Fred m.com put in whatever password register okay we got Fred logged in and we can see Fred at the top as well let's profile awesome Fred has no posts let's add the new image for Fred let's pick anything let's go and picks or logos and watch this a coffee image enter that is updated beautiful cool let's create a new post and let's just close this to make sure that the mobile view is working look at that beautiful can we scroll in yes oh there you can see on this section we've got name here and the dummy image so let's go into the code and what is it in components create post overlay and we need to get this uncomment this user line and then scroll down and we need to look for the image there it is image and name here so this SRC needs to be user.file and the name here needs to obviously be user.name okay let's save that now let's go back to our browser and check it we can see there that now it's been updated we got Fred awesome let's make this bigger again and let's select an image from computer let's put in this this will do beautiful and then let's put in anything for this let's just slap it right in there and then we're going to press share oh awesome hover no comments no likes let's open it Chuck a like on it Chuck a comment on it let's just bring this over and then post that yes beautiful now let's close it go back to home we can see there we got two posts amazing now if I scroll down to my profile John week's Dave you can see that there's one like but the heart is not red because this user hasn't liked it so let's like it there we go two likes and it's red beautiful let's do it again let's log out and sign up with someone else let's do Sam sammail.com and then again whatever password register awesome let's go in Sam New Image what's this an icon just Chuck that in beautiful less create a post this time from the home page let's do create write a caption whatever select from computer what's this Google Maps PNG let's slap it in there share look at that awesome this is working very good let's like that let's like this one and let's like this one awesome let's add a comment to Fred and we'll say this is Sam Post awesome there is Sam and actually if we make another one and we post and we try to delete it let's see if that works delete comment yes amazing and you can see we can't delete the post because it belongs to Fred awesome right let's do it one more time let's log out and make one more user so sign up Sally at m.com whatever password register Sally's in there let's go to a profile add a new user image let's check that lightning icon in there beautiful create a post select from computer watch this Google task open write any caption share we got it there we can open it we can look at it let's check in a post beautiful let's like it from there close him down go back to home displayed right there we can unlike it like it unlike it on Sam we can like that and we can see in our Carousel at the top now that's full awesome we can have a scroll through there that's looking good and let's actually try and delete this post from Sally so let's go to view it and let's click this button at the top delete post and it's gone there we go I think we have officially finished let's just have a quick check on the mobile view make sure everything's looking good look at that that is sick man that is super sick let's click on my profile open this up oh my God look at it it is filthy add a comment post it let's add another comment post it yeah man look at that close that you can see now we've got three comments on there let's click this button at the bottom the home button it's doing Sally's profile we haven't got any posts well let's make two new posts that'll do enter and then write whatever Chuck it in there share it awesome let's do one more select from computer let's check this one in there another one Chuck it in there share look at that beautiful and just to make sure that it is wrapping correctly let's add another one let's Chuck that in there yeah that seems to be working good one more just to make sure that it falls underneath uh what's this Quasar PNG let's do that things some text in there and there we go look it's wrapping round as well how amazing is that let's open it up full this image is a bit small because that's how big it is well let's just test it let's delete that delete that post get rid of that now let's read another one that is actually big enough let's get this EV charge map again chuck whatever in it sure awesome look at that amazing and now if you go back to home yeah we can see all the posts that we've made come in that is it we are done

Channel: John Weeks Dev

Views: 17,660

Keywords: vue 3, vue js, vue, tailwind css, tailwind, vue js tutorial, uber clone, whatsapp clone, javascript, laravel tutorial, amazon clone, inertia js, inertia js laravel, vue 3 composition api, laravel vue js, youtube clone, laravel inertia vue, tailwind css tutorial, twitter, spotify, spotify clone, spotify clone vue, eloquent relationship in laravel, one to many relationship in laravel, intervention image laravel, instagram clone, instagram, web development, php, php tutorial

Id: MjkamZQJY_8

Length: 151min 2sec (9062 seconds)

Published: Mon Mar 06 2023