Full Stack Facebook Clone with Vue JS, Laravel, Inertia JS, Tailwind CSS, Pinia

right let's do this first off let's talk setup so let's quickly go over it you're going to need to install on your computer if you don't have any of this you're going to need node.js you're going to need composer if you have a Mac or a Linux machine you can install Homebrew to help you install all of this and if you also have a Mac you can install laravel valet but the simpler option would be zamp that comes with Apache mariadb and PHP so that's the simplest option if you don't have a database or PHP installed the database GUI I'll be using is SQL Pro this is unfortunately exclusively for Mac but I'm sure you'll be able to find other guise for other operating systems and for a code editor I'm going to use Visual Studio code right awesome let's go I'm going to open a terminal let's Zoom him in and I'm going to CD into my sites folder where I'll be keeping the project this is because I'm using laravel Valley if you're using Zam it'll be in htdocs and I actually have the laravel installer on this machine so I can say laravel new Facebook clone enter okay that is installed if you don't have the larabelle installer you're going to have to use this command composer create project larval forward slash laravel and then example app but you would change example app for Facebook hyphen clone and this documentation is actually on laravel.com so just come to installation and you can find that command there right next I'm gonna CD into the Facebook clone and then I need to compose or install laravel breeze so let me just clear this out and I'm going to paste in this command which is composer require laravel forward slash Breeze hyphen hyphen death enter awesome let's just clear that out again and the next command is going to be this PHP Artisan Breeze colon install view hyphen hyphen SSR and what that pretty much does is installs vue.js into our project and inertia so let's press enter awesome that is installed and if you want to learn more about laravel Breeze and inertia just come to the laravel.com site and look in the starter kit section and if you scroll down you can see the command right there and this is the other one how to install it awesome right now that I've done that because I've got laravel valet I should be able to say Facebook hyphen clone DOT test and press enter and I should see the project yes look at that beautiful easy as that right let's open vs code and now what I'm going to do is open the folder that I saved my project in so that's going to be in sites and where is it Facebook clone I'm just going to take this drag it in and drop it in to the editor like so awesome and in our side panel at the bottom you can see that we have a tailwind.config so we want Tailwind that's good and let's just jump into our end of the SEC just to make sure that it says yeah Facebook underscore clone for the database and my username and password is correct if you have a password configured on your database then you're gonna have to plug that in but I just have nothing awesome right let's close that right let's open a terminal and we need to install some dependencies so let's say npm I we're going to need Pina Pina plug-in persisted State view Advanced Cropper and again one of my favorite packages view material design icons let's press enter awesome that is installed okay in the side panel go into resources JS and inside this we're going to make a new folder we're going to have stores and then inside stores new file and I'm just going to call this general.js like just a general storage file enter right now this storage is extremely simple all it is is that and that's it so we might as well put this in now because it's so simple that doing it later is just more of a waste of time than anything so if I save that you'll see this persisted is set to true and that uses our pin your plug-in persisted State package so let's jump into app.js close the side panel a sec and all we're going to do for this is add four lines of code underneath this Ziggy and all that's going to be is this import create pinion from Pinya and then import pin your plugin persisted state from that package put create pineal into accounts and then say Pina dot use in your plugin persisted State and then scroll down and just after this use plugin we're going to say use Pina that's it let's save that and we're done here so we can close that and the same as general.js we can close that let's open the side panel and now let's go into pages and welcome we don't need so let's delete it delete move to trash and this dashboard I'm going to rename to post start view right inside post Dot View we can get rid of all of this except the head let's just call it posts and this authenticated layout I'm going to rename to main nav layout and we're going to go and create this now so if we now go into layouts and this authenticated layout I am going to duplicate the file and then say main nav layout.view let me just close this side panel right all these components in here I'm going to delete so we just have View and inertia.js view3 this variable I'm going to delete and also everything inside the template I'm also going to delete right this is for a div and add an ID called main nav and let's just add a class BG red 300 inside this I'm going to say cool and underneath this main div I'm going to add a slot like that right save that a sec and open the side panel and jump into roots and web.php right what I'm going to do for now is I'm going to delete the dashboard get rid of that all of this stuff inside the welcome render get rid of it rename welcome to posts this URL is fine it's the base URL and all the auth stuff I'm just going to leave as is Right save that right now if I jump back in post start View and we bring this main nav layout in let's close him up and inside I'm just going to copy what it is so we know it's working right let's save that now let's open a browser and hopefully if I refresh this we should see the Tailwind is working and that our main nav layout is actually working so let's refresh what's this unable to locate valve manifest oh and I forgot to say in the terminal in Facebook clone let's just say npm run Dev to start Veet and now let's go back into the browser and press refresh yes awesome there it is let's zoom in we have cool with a red background and Main nav layout so we know now that our slot is also working awesome right I think that's set up done we're ready to go right why don't we start with our main nav layout let's close this a little bit and I'm just going to replace this with posts I'm going to go into main nav layout and get rid of this BG red 300 and so we don't have to do this as we're going through it I'm going to import all of the icons that we need so from view material design icons now so this is what it's going to look like so we're importing magnify from view material design icons forward slash magnify Dot View so now if I import the rest of them that is going to look like that so in total we have magnify home home outline television play door front outline account group controller classic outline dots grid Facebook Messenger Bell and logout now what I'm also going to do is bring in our pinnia store so the general.js we'll just put this underneath all of these Imports that's going to look like that so import use General Store from stores General and then we want to convert the stores to refs put the General Store indoor cons and then get all of our variables from the store right next line I'm going to bring in our user for when we're logged in and that's going to look like that so this use page we're gonna have to make sure we bring that in from inertia so that should look like that and then finally underneath this we need a little variable that says show menu and that's a ref and it's equal defaults by default okay save that and let's just quickly see where we are okay we got this that's all we need right let's start let's format these and first we want a class and that's going to have fixed Z50 with full Flex item sender justify between h56 pixels VG white shadow XL and Border B let's just go and take a look you can see now our little shadow underneath there beautiful right this cool get rid of replace it with a Dev class and we're going to add into this Flex item sender justify start and width 260 pixels and just so we know where it is I'm going to add an ID because there's quite a few sections in this just just so we know exactly where we are I'm going to put in ID nav left next we want to add a link and this link is from inertia and at the moment I'm just going to put in href and that's just going to go to this page so we don't have any errors because some of the routes are not going to exist yet and inside this link is going to be uh our Facebook logo but we don't actually have it yet so for now I'm just going to put FB and also we're going to add a little class on this and that is going to look like that pl3 and Min width is 55 pixels now save it let's have a look FB why is that massive oh because I'm zoomed in at 300 let's reset that yeah there we go perfect awesome right under that link div class and this is going to be Flex item sender justify sender BG this color so e double F2 2f5 P1 rounded full h40 pixels and ml2 and what this is is the outer div to the input section so the next bit we're going to add in is our first icon and that is going to be magnify we're going to have a class of pattern one and then size 22 and a fill color 64 67 6B now save take a look there's our little icon but there beautiful right now end of her input we also want a placeholder and our placehold is going to say search Facebook like that above class it up open him and inside this we're going to add LG block hidden border none P0 BG e f f 2 F5 and then this placeholder color is the same as this magnify color up yeah this fill color ring zero and focus ring zero let's save it let's take a look and nothing has changed because we have this LG block and the rest of the time is hidden so if we start to make the browser wider you can see that there we go beautiful comes in and out just like that awesome right two divs down so one two let's make a space there div it right up ID nav Center classic hidden LG Flex item sender ml5 justify Center W8 slash 12 so 66 and mxw 600p now inside this another link and the same again the href is just going to go back to this page also classic um put a width full on there now inside that we need another div class it and for this we got Flex item sender justify sender h48 pixels P1 hover BG f2f2f2 with full rounded LG and cursor pointer now we're gonna have to put a dynamic class on this so let's just put it on a new line and just above we're going to add a colon with class and what we're going to use for this is our Global page object variable thing from inertia and what we're going to do is say page URL so the current URL if that equals to the home page so the hosts page add Mt 1.5 else nothing awesome right next inside that another Dev right now inside this we need two icons and the first one is going to be home with a class of MX Auto size 27 and a fill color of 18733 and what I'm also going to add to this is the same thing with a page URL so if page URL is the home page show it else show home outline and that's got a VLS on it with a class sim again MX Auto size 32 and the fill color 64 67 6B right now just outside of this div so under there flap another div in there open that up and again we're going to copy and paste this VF and we're going to put that right on there and then underneath it we're going to add a class and that is going to be order B4 border B blue 400 and rounded M and let's go and have a look at that let's save it let's go back we won't see anything because again we're in kind of mobile view but if we open this up you can see now we have this little icon which is beautiful a little bit of hover on him as well right now if we go back into our code and this bit is going to be nice and simple just underneath this link button open it up class it and then there's quite a few styles on this it is flex item sender justify sender h48 pixels P1 hover BG f2f2f2 with full rounded LG mx1 and cursor pointer but the nice thing about this we're going to copy and paste it another four times so first before we do that inside this button we're going to add another icon and that's going to be television play that's going to look like that and that's got a class MX Auto size 27 and the fill color is exactly the same as the one before up yeah awesome right save that and now you can see the second one has come in beautiful look at that gorgeous right for the next one copy this button paste it change television play to storefront outline let's save it let's take a look oh look at that beautiful right another button copy it paste it and inside this one there's a little modification if we just do the icon first so change storefront outline to a account group and then what we're going to do is just make a little space above it and then put in a span open that up class it and then we're going to add the styles of rounded full border 2 pixels a border the same color as the fill color and then P1 and just take this icon the account group copy it and paste it in save it let's have a look and you can see now we got our little rounded circle around our icon beautiful and actually it's slightly big just seems 27 to 22. there much better okay right last one we can take this storefront outline just copy that one paste it beneath and change this to controller classic outline and the size just bump it up to 32. everything's the same save it and there we go look at that awesome and now if we close this you can see disappears beautiful okay right underneath this button and underneath this div let's make another one div it up classic we're on the flex item sender just if I end with 2 12 and mr4 right now inside this we're gonna have another button and class it up and on this we're going to say rounded full BG E3 e6ea P2 hover BG gray 300 mx1 and cursor pointer and then another icon and that's going to be dots grid let's save it and have a look see it coming in now look at that working like a charm beautiful awesome right let's continue we're going to take this button copy it paste it and we're going to change the icon from dots grid to Facebook Messenger save it let's have a look there it is beautiful let's do it again take this button copy paste it change Facebook Messenger to Bell let's save it take a look look at it just awesome you've done one you've done them all now finally underneath this Bell button we're going to have a little div open him last it right up and we're going to check in this Black's item sender justify Center and relative now we're gonna have another button and we're gonna say at click show menu is equal to not show menu or the inverse of show menu so if Showman menu is true it turns to false and if it's false it'll turn it to true now inside this we need our little image and we also want to add a class to him so let's say round it full ml1 Min width 40 pixels Max height 40 pixels and cursor pointer now for this Source what I'm going to do is I'm just going to go in the browser open a new tab and I'm going to say pixam.photos and I think it is that right there let's try that yeah it's that so I'll copy that close that window and then in this Source I'm going to put in pick some dot photos ID of 8 and then the size doesn't really matter but before it I need to do https let's just change the ID to Sammy I don't know 120 like that let's save that and now we can see we've got a little image that is what is that there's nothing there man let's change it 87 let's try that there we go nice and pretty what actually is that oh it's a little bench by the Sea beautiful okay awesome right now what we need to do is actually build our menu so this is what this show menu is for so so underneath this button let's do a div open that bad boy up class and for this we want absolute BG white shadow XL top 10 right zero with 330 pixels rounded LG P1 a border and mt1 now let's just format this a bit and add another space because we need to add a vif with show menu so save that I think if we actually press it we might see something yeah you can start to see if I zoom in a little bit you can start to see it just coming in and out beautiful let's actually add in what we need to now so it does look like a real menu right first let's add a link same procedure again we're gonna have href going nowhere and we're also going to take this at click copy that and just paste it on so when we click on this link if we go back to the same page then it closes the menu right next div class Flex item Center Gap three hover BG gray 200 P2 and rounded LG and we need that image again so what I'm going to do is just come up here copy this image Edge and paste it right in there like that and instead of this being Min with 40 and Max height 40. I'm going to change this to 35 and 35 right underneath this image span it up and I'm just going to put it in the name John week's Dev save it and let's go and open it look at that absolutely gorgeous and then if we click it goes away beautiful right let's continue under this link we need another link and this is actually going to be the first real one so we're going to put href root and this is going to be a log out so if we save this and yeah we're not going any errors because the logout rule actually exists so let's just format this quickly because there's going to be a couple of other things on this right above let's just add a little class of widthful and then underneath this we need to specify what it is so we're going to say it's acting as a button and the method is post and now inside this link divot and class it with flex item sender Gap three hover BG Greek 200 px2 py 2.5 and rounded LG and inside this we're going to have an icon and a little span that is log out like so class pl2 size 30 and then the span is log out let's save it let's go and zoom a bit so we can see open him up yes absolutely fantastic right awesome and just to finish it off you can do this section if you want uh I I copied and pasted it from the actual Facebook menu so underneath the link just add a div with a class on it with this inside so text XS font semi build P2 pt3 border T mt1 and it's got privacy terms advertising ad choices cookies and meta and this little thing copyright thing with 2023 I just went into my Facebook page and then opened the menu and copied it from the bottom and then just pasted it in now if we save that gonna have a look see beautiful look at that zooming in nice little border on it looks absolutely spiffing right just a final check let's open them up and then close him yeah look at that awesome in and out all right okay now this may nav layout section is done let's move on and make our post page so we've got three sections to this we've got the right side all the post section and then the left side so let's go back in the code go to posts.view which is inside pages and again I'm gonna import everything I need in the script so we don't have to keep going up and importing it as we go through go underneath this head I'm going to say magnify television Play Store for an outline account group account multiple flag clock time two outline restore video image and dots horizontal and also under this we're gonna put a const of user and we're going to use page props of user and when we don't really need this now but it's better to bring it in so we don't have to do it later and this use page just make sure we copy it and bring it in from inertia and also make sure we got the link I'm just going to swap this around because it will annoy me the other way around okay cool okay let's begin instead of this post David classic fix with full height 100 BG F1 to F5 another div class grid grid rows three grid flow call with full Max W 1600 pixels mt56 site count 100 minus 56 pixels MX Auto and PX4 another div for an ID on him and a class the class is going to be Excel with 345 pixels LG block and hidden and the ID is left section right inside that div class tt4 MX with 320 pixels pr4 inside that link it up and then same as before just have a href going to the default page classic and for this put flex item sender just if I start with fall cursor pointer hover BG E5 E6 E9 P2 and rounded MD let me just put this on a new line because it's super annoying there we go that's slightly better right inside this link we want an image and we're going to add a class and that's going to be rounded full ml1 Min width 38 Max height 38 this alt get rid of that and for this sauce I'm just going to jump back in main nav layout and where is the input there I'm just going to take this pixel.photos copy that back in post and just drop that in there right underneath this image div classic text 15 pixels text grade Android font extra bold and pl3 I'm just going to put in this my name for now just like that let's give it a save let's go and have a look oh shh look at that freaking awesome man and if you make it smaller you can see there we go it hides and shows based on the window size okay awesome right under this link we're gonna have a button and once we've made this once we can just copy and paste the rest of the time it's classic we're gonna have Flex item sender justify start with cursor pointer hover BG E5 e6e9 px2 py 1.5 and rounded MD Now inside this button we want an icon and that is going to be account multiple size 40 and fill color 5B d7c6 now under little div class I'm just gonna put friends in there and the styles are going to be text 15 pixels text great 800 Font X well I mean exactly the same as that awesome Dave let's go and have a look yeah look at that man awesome right just take this button copy it paste use the icon to flag friends becomes Pages Copy the button again paste it blank becomes block time to outline and Pages becomes most recent take the button copy and paste it the icon becomes account group and the text becomes groups copy paste icon storefront outline groups becomes Marketplace copy it paste it icon becomes television play text becomes watch and the last one copy this paste it television play becomes restore and watch becomes memories right save let's go and have a look and look at that oh they're all the same color let's just quickly go change the color but still looking awesome right pages is f 2682c block time 2 is 21 double A F A account group is 289 FD don't run out line is 48 c0d8 television players 97 39 CF and restore is 32 B4 d0 Dave let's take a look there we go absolutely beautiful right and that's the right side done lovely right who lives underneath this button so one two make a space Dave check an ID on this and say post section and then class it up and say roseban 6 Max width 600 PX LG mx0 MX Auto and overflow Auto right what we're going to do just for now is I'm just gonna take this ID and I'm gonna paste it in the div and we're going to come back and do this later because this is the um post section and there's there's a couple of components in this so I have a post component and a create post box component so we'll leave this for now and we'll do the right side so just make a little div after this div ID it's going to be right section Placid with pl4 MD block and hidden and then div class max with 340 pixels Min with 250 pixels MX Auto and pt4 div class Flex item Center Justified between border border B grade 300 now inside that div and a class with font semi bold and just say contact like that under this div class Flex item Center another div with a class P2 will hover BG gray 300 rounded fall and cursor pointer and inside this we're gonna have an icon and this is going to be video image size 23 and fill color zero five zero five zero five now all we're going to do is take this outer div copy it paste paste change the second one to magnify and the last one too dots horizontal save and we can see that coming in right there very nice let's just open them up here we can see it disappears at some point awesome right now from this dots horizontal go three divs down one two three make a space divided right up class it and we're gonna have height calc 100 view height minus a hundred and 15 pixels overflow Auto and pt2 right now in this we're going to make one and then it's going to be a copy and paste job for the rest of it so div class and then Flex item sender justify start cursor point I hover BG E5 e6e9 py2 and rounded MD and then inside this image I'll get rid of that the class is going to be rounded full ml1 Min width 38 and Max height 38 and then for the source we're going to use our pixel again I'm just going to paste this in I've got ID 140 and again this size doesn't really matter right save take a look there's a little image ah hover on it as well there's no name where I forgot to put the name in so underneath the image divot glass it hex 15 pixels text grade Android font extra bold and pl3 and I'm just going to put in Andrew Smith to save that and there you go there's Andrew Smith right now if you really want to um you know you can you can make a seed for this and put it in the database and then Loop it out in a V4 Loop but honestly it just seemed like a bit too much effort so all I'm going to do is just grab this div that we just made copy it paste it a couple of times change all the names change all the pictures and then that is going to look like that so pretty much I just made one two three four five six seven eight I made eight and then I copied all of those eight and just repasted it again because then again we've got Andrew Smith so we've got 16 in total I changed the IDS so that's 140 this one's 141 142 143 save and then let's take a look and there we go beautiful easy as that nice little bit of overflow on there as well looking very good very nice indeed okay right let's go on to this middle section this post section and let's create a component called where is that middle section post section right there and I'm going to replace this with create post box and on this we're going to have two props first it's going to be image and again for this I'm going to scroll down I'm going to steal one of these images so copy that and paste it onto there just leave it like ah that'll be fine and the second one is going to be placeholder and what's on your mind John week's Dev so let's save that and now just quickly go to the top make sure we import it so underneath this main nav layout import it from components create post box and now open the side panel go into components and duplicate I don't know this text input let's just duplicate that so text input becomes create postbox.view let's save it and this script setup section just delete it out get rid of that and we're going to bring in what we need so first we're going to import 2 wraps from View and then import link and use page from inertia next we want all of our icons there's only three so video image image and emoticon outline then we want to import our pinia store so the general.js file that we made that's going to look like that and all we need is is post overlay next under that we need to Define our props so we're passing image and place all that as a string then pass those props into the two refs to convert them to refs and finally again we're going to get const user and the use page props so we're going to get our Global user so that'll be the logged in user but we're not going to use it quite yet because we're not logged in okay let me just quickly jump back to post.view and save this and then back and create post this template strip it out and say div ID create post box classic with full BG white rounded LG PX3 mt4 Shadow MD another div class Flex item sender py3 and Border B now we want to link href go point of the default again remember we're going to sort this all out when we actually have a logged in user and some roots and don't forget on this link add a little class with MR2 then inside this link image add a class rounded for ml1 minware 36 Max height 36 and the source is going to be from our props that we pass in so all we're going to do for this is say colon at the beginning and then image right let's save that and have a look and see what's going on Uh something's happening okay there we go there's a little image okay awesome right if I just shut this like down a sec so we can just see that awesome right underneath this link divid open this top div app put a class on it Flex item sender justify start BG e double f 2 F5 P2 or rounded full with full and cursor pointer and for this we're going to add also an at click and this is is post overlay equals true now remember is post overlay is coming from our opinion store so don't forget that we're just gonna add this in like this for now because the overlay doesn't exist yet but we will make that later on right inside this div another div class text left pl2 and all we're going to say for this is placeholder and remember again placeholder is being passed as a prop awesome right save and we can see it already look at that beautiful oh very nice very nice indeed look at that very nice okay let's continue so three dips down from placeholder so one two three make a space David classic Flex item Center py3 border B now again inside this we want a button and again we're going to copy and paste this open it class it and this is going to be Flex item sender justify sender P1 hover BG f2f2f2 with full rounded LG mx1 and cursor pointer now we're gonna have an icon inside this and that's going to be video image size 35 fill color F1 2848 and a little bit of text that's going to be in a div with Class Tech 6f 72 75 font bold and just say live video now take this button copy it paste it it twice so one two change the second one to image change the color to 43be62 and the text to photo forward slash video and the last one change to emoticon outline the fill color is f8 b927 and the text is feeling slash activity oh feelings right save and there we go look how fantastic that is oh beautiful that is awesome man absolutely awesome right now we've got that let's jump back into post.view and go back to where we made the component create post box and under this we are going to make another component and this is just going to be called post and this does accept uh props but for now because this is going to be past objects I'm just gonna leave the props off and hard code it inside and then when we have actually data coming from the database we'll sort it out then so let's scroll the top and under create post box import post from components post now let's open the side panel go into components and this create post box duplicate save it as post Dot View and now same thing again strip all this out this script and the first two Imports are going to be from View and inertia that's going to have two refs reactive and a link and a router next the icons so account multiple thumb up check and delete again the pin your store so that and then we're gonna have a reactive called form and that's just going to be comment null right now I'm going to put in the props I'm going to Define them and put up the refs but I'm just going to comment that out for now because we're not actually passing anything yet so just do that and for now that should be good now what we can do this outer div keep and everything else inside it delete so highlight all of this delete all that great post box becomes post and this PX3 and mt4 just get rid of it and just put my4 and now inside that div flash Flex item Center py3px3 inside that button and add a little class with MR2 now inside this Platinum we want an image get rid of alt we want to class it with rounded full ml1 Min width 42 pixels Max height 42 pixels and again for the source I'm just going to use the pixel link with an id87 all right save server lock there we go looking good right underneath this button div class Flex item Center Justified between P2 around with full and widthful inside that just a div and then inside this div another Classic on extra bold text 15 pixels and in this gonna put a name just going to put my name again like that underneath that another div and then a class with flex item Center text XS hex gray 600 and now we're going to use an icon inside this div and that is going to be account multiple class ml1 size 15 fill color 6467 6B and just before it for now just put 14 H little space like 14 hours let's save it uh look at that groovy baby okay okay so underneath this outer div another div class it with flex item center now inside this button class rounded for p 1 by 5 cursor pointer hover BG f2f2 F2 now another icon and this is just going to be delete and a fill car 6467 6B Dave you can already see it look at that beautiful okay so from this button let's go down three divs one two three make a space divot and class it and then put px5 pb2 Tech 17 pixels and font semi bold and this is where our text is going to be so just open this and I'm gonna pull in some Laura mips um I'll just go and guess um if I go to lorem ipsum generator and this will do just grab his text copy close that window and paste it in awesome save and you can see we got some text in there I mean that's probably a little bit long let me just delete some of it like that yeah that'll do awesome right under that div image don't let's get rid of that class MX Auto and cursor pointer and same again for this Source I'm going to use hixson.photos but this time this 300 just change both of them to 800. and I'll just change this photo to like I don't know 189 or something let's save it let's have a look yeah awesome let me drag this out so my face isn't in the way yeah nice look at that nice bit of scroll on him as well looking awesome man yeah let's put it back right underneath this image divot class px5 and I'll just add a little ID so I know what it is just say likes and then another div class Flex item Center Justified between py3 border B and then inside this div we want the thumb up fill color ID 72e2 size 16 and then under thumb div class text SM text Gray 600 font semi bold and for now I'm going to hard code five comments save I can see it right there my face is in the way though let me just scroll that yeah you can see it down the bottom with a little thumbs up beautiful awesome right underneath this likes div so under there new div for an ID of comments and a class with PX3 another div ID put on there create comment and we're gonna have a class as well with flex item sender justify between and py2 now in this div class Flex item sender with full now inside this we want a little link open it and again href go into the base with a little class on it that is MR2 and then we want an image inside this I'm just going to grab this image above copy it paste it in and the class I'm just gonna change to rounded full ml1 Min width 36 and Min height 36. let's save it yeah we can see it's starting to come together right under the link they've class Flex item Center just if I send it bgef2f5 P2 rounded for widthful now this is where we're going to have an input and text we can keep that because that is correct put it on a new line and just above it I'm going to say V model and I'm going to put form comment and if you remember if you scroll up we have this is a reactive form comment now after v-model we want to class open this up and we're going to add with full mx1 Borden and P0 text SM BGE double f2f5 placeholder 6467 6B ring zero and focus ring zero and after this class we want to play play solder with write a public comment let's save it yeah I can see it looking good let's open this up see it right down there very good okay let's continue underneath this input we want a button and open this top section up now just put on the type button and a class of flex item Center text SM PL to PR 3.5 rounded full BG blue 500 hover BG blue 600 tax white and font bold a couple of styles on that now we want to add an icon and that's going to be check with a fill color of white and a size 20 with send at the end of it let's save it have a look yeah you can just see we've got a little send button right over there awesome right now finally the little comment section so from this button three divs down so one two three open it div it up I'm gonna put an ID of comments classic Max height 120 pixels overflow Auto pb2 and PX4 another div class Flex item sender Justified between a pb2 another div glass Flex item sender with full mb1 now I'm inside this a little link open it class it with MR2 and same as usual href go into the default now again we want an image inside there so if I just scroll up and find this image we've got to say this link just copy it and paste it in there like that and actually the class is perfect so let's save that take a look yeah we can see it on the bottom a little bit of pattern on it lovely let's just add the actual X section so under link div class Flex item center with full div class Flex item Center BG e double f 2 F5 text XS P2 rounded LG with full and for now I'm just going to put dummy and say this is a comment and then under this div button and then on this button we're going to add a class with rounded for p 1.5 ml tool cursor pointer and hover BG f2f2 F2 and all we want in this button is an icon that says delete fill color 6467 6B and I'm pretty sure that is it let's save let's go and take a look let's open him up and look at that awesome now just to test it if you want to see what it actually looks like let's go into post.view and find where that post is and duplicate it a couple of times save it let's go back into this open it up and let's give it a scroll look at that that is fantastic actually that looks beautiful awesome right I mean the styles for this page now are done so now we can move on to our profile like user page so let's do that okay so let's go back into our code and open the side panel and inside Pages I'm going to make a new file it's going to be called user Dot View and that's just the base it tile we don't need to get rid of that grip ticket and put it at the top and now again we're gonna bring in everything we need so first import link and head from inertia next we want to get the main nav layout then we want to get our two components we just made so create post box and post now we want to import two little icons so that's camera and pen and then same again with our opinion stuff just bring that in we're gonna have is crop model and is image display and then Define props with posts and user but at the moment we're just gonna comment that out because we don't need it yet we're just going to hard code everything right in our template clear this div out and just put in a head with title user and then we want our main nav layout open that up and actually before we start this we should probably actually make a route for it because otherwise we won't see anything so let's go into a side panel and in Roots web.php and this default route just copy it paste it below and say user and a path is just going to be user like that right save it and now back in our browser if I just open this up and in the URL I say forward slash user and there we go our main nav layout is working right I just put that like that and now let's start close this side panel get rid of web.php right first div class it with whitful Minh height 100 VH pb20 BG f1f2 F5 divided with full BG white div class max width 1100 pixels pt56px MX Auto pb1 Now inside this div we want an image and that's going to have a class rounded bxl and then I'm just going to put in this image from pixelm got an idea 45 the width is 2 000 and the height 320. but I mean this doesn't I mean technically you could put it at 1100 because that's the max it's going to be anyway but I mean it doesn't matter now if we save that and if we go in and take a look we can see that it started to come in very nice so I mean it's Mega white why is that doing that well let's just continue for now it doesn't it doesn't matter we can fix it later and under this image divot ID profile info and then we want a class of flex MD Flex row Flex call Item Center justify between and PX4 inside that number div glass Flex MD Flex row Flex call gap for MD minus mt6 minus md16 and item center right another div classic for relative on it and then inside this we want an image and I'm going to put this in like that so the source is again from Pixel I got idea 200 500 by 500 and then a class rounded full width 165 height 165 border wide and Border 4 save and that is absolutely massive why is that so enormous something is wrong here let me just quickly go to my terminal there's no error I'm just going to open a new terminal close the old one so terminate it and then just say npm run Dev okay as we started let's refresh ah there we go I don't know there was some sort of weird error but now it's actually working awesome yeah it looks good man let's open it look at that beautiful okay awesome let's minimize this terminal right underneath this image button and first we want a add click and is crop a modal equals to true and remember member we're bringing this in from the storage our pin your storage and then underneath this we're gonna have a class absolute right zero top 100 PX BG gray 200 hover PG gray 300 P 1.5 rounded full and cursor pointer and then inside this button we're gonna have an icon and that's just going to be camera with a size of 25. let's save it and have a look there look at that freaking sick man okay one div below this button so this one make a new div classic MD mt4 tech center ND text left minus mt3 div class text 28 pixels font extra ball pt1 and this is just going to be the name I'll put in my name like that then underneath divot and then this is going to be something like 243 friends and then let's add a class with tech 17 fun ball text Gray 600 MB 1.5 tech center MB text left let's save it of a quick look yeah perfect right now under that div is another classic Flex MD justify start justify Center MD minus ml1 right right now inside this we are going to have an image get rid of alt again new line it and then add a class rounded full minus ml1 Z10 w40 pixels height 40 pixels border white and Border two and now for the source I'm just going to add in the pixel again just like that so ID 141 300 by 300 I mean it's way smaller than now but it doesn't matter and if we go and have a look at this save it and you can see now we have one image there all we're going to do now is take this image copy paste Z10 becomes z9 and image becomes ID 142 and minus ml1 becomes minus ml3 now what I'm going to do I'm going to take this image I'm going to copy it and paste it another five times so one two three four five and then Angel the Z index on it so nine is eight seven six five four and then change the image ID so that'll be one four three one four four one four five one four six one four 7 and let's have a save and take a look and there we go look at that beautiful and let's just make sure that's working in the mobile view yeah look at that oh bang very nice okay from this last image we're gonna go three divs down so one two three make a space add a link open this up a bit just add a href going back to nothing and then we're gonna add a class and that's going to look like that so Flex justify center with 7 12 MD width 160 items Baseline MD my0 my4 BG Greek 200 and hover BG gray 300 rounded algae and cursor pointer now inside this link add a button classic with flex item Center px5 py2 and font build and then we want a little icon in this which is going to be pen going to have a class minus ml2 mr1 size 22 and at the end just put edit profile let's save it and we can already see it but there look at that beautiful let's close it yes very nice indeed okay let's continue and the link go one div down make a space for a div class it Flex item Center which for Border t h 50px py4 and then inside button class width 85 pixels inside that another div I put a class on this with flex item Center text 15 pixels just if I send a height 45 pixel text blue 500 hover bgf2 f2f2 with full front bold rounded LG and cursor pointer and all we're going to put in this div is post let's have a lock save yeah very nice right just underneath this div we're going to add just another div with a class that has order B4 border B blue 400 and rounded MD save it it's gonna take a look see then we get this little border at the bottom and it's slightly out of line let me have a look yeah slightly why is that doing that on this div just before the button let me take out item Center and width full let me try that a sec yeah there we go that's better yeah just take that off awesome let's Zoom back out okay now underneath this button another class and quite a lot of styles on this so Flex I item sender text 15 just if I send a height 48 P1 hover bgf2 f2f2 with 85 font bold rounded LG mx1 and cursor pointer but the nice thing is we're just going to copy and paste this one let's just add inside this about and then copy paste it four times one two three four this one is friends this one is videos this one is photos and the last one is check-ins save let's take a look and look at that very nice indeed let's just close them a bit awesome man right okay from this check-ins we're going to go down three divs one two three negative classic and we're gonna say Flex calls MD Flex widthful Max width 1100 pixels justify between height calc 100 minus 56 pixels mdpx0px2 and MX Auto inside that another div ID left section add a class as well with full MD width 5-12 mt4 mr4 now inside this another div we're the class font extra bold pb2 text XL and just put intro inside it okay under that divot class pb5 inside that add a button class it with full BG gray 200 hover BG gray 300 rounded LG P2 and font bold and inside this we're going to put add bio and again all we have to do for this is take this outer div with the bb5 on it copy it paste it another three times one two three the second one becomes edit details this one becomes add hobbies and the last one is ADD feature and that's it save it let's have a look and there it is right there we're missing something off that what are we missing the background is not there why probably because I forgot to put it in a div so just underneath this left section div go in there make another div open this up class it add BG white P3 rounded LG and Shadow LG and now this intro and all the button buttons grab all of these copy remove it and then put it inside this div we just made like that let's save it take a look there we go much better you open them up yeah man oh look at that stupid stupid okay let's continue okay from this last button go down two div so one two open it up divot class it with BG white P3 mt4 rounded LG and Shadow LG now another div with a class of font extra ball pb2 text XL and just put photos in there under that div classic Flex Flex wrap item Center just if I start with full and just for now add the little span open that up add a class width one third and inside this we're gonna have another image again get rid of alt add a class to it aspect Square object cover P1 rounded LG cursor pointer and I'm just gonna scroll up and find where I put the other image let's just grab this that'll do copy it let's scroll back down and paste it into this sauce and let's change this image for like 78 and what I'm going to do is make seven or eight more let me just put this on a new line so it doesn't get confusing right copy it and paste it one two three four five six something like that now if we save it and we go take a look almost that is almost not wrong let's go back on this maybe for now if I remove this fan because later there's going to be a loop on it so we'll Chuck it inside that but for now if I just put it in that remove the width full remove the span and from the bottom let's just save that let's have a look no it's still being annoying and actually do you know what don't worry about any of that for now just revert it back to this so other span back in with a width of one third and make sure all this is correct just have one image because we're going to Loop through this anyway so we'll just leave it like that and save it and let's have a look and we've got a little photo in there perfect right okay this next bit is stupidly easy so go into the code and underneath this photo section go one div below that make another div slap an ID on it and call it post section then add a class with widthful mdw7 12 and overflow Auto and all we're going to do in this is go into post.view and this section the post section we're just going to grab all of this copy it go back into users paste it in go back into post.view and then at the top get both the Imports copy them go back in user go to the top and oh they're already there so we don't even need to do that so save it and there we go look at that there's all of the posts amazing and that is that page pretty much done style wise of course okay so now why don't we go to this GitHub repository go to github.com John weeks Dev and let's go into Facebook hyphen clone and I'm going to go into public and you can see there this folder images there is an icons file it's just a Facebook logo and Facebook logo Circle download all of that and if you go back one you need this as well use a hyphen placeholder.png so download those and then go into the code editor open the side panel go into public and we want to make a new folder called images and it's going to look like this just like that so images and inside it we have the icons folder with Facebook logo and Facebook logo Circle and then just in the images folder we have user hyphen placeholder.png that's it that's all we need okay let's close that and close public right go domain nav layout scroll to the top and instead of this FB we're going to add an image into this very simple it's going to be image with a class width 40 pixels and the sources images icons Facebook logo Circle dot PNG and let me just get rid of this image tag on the end that's wrong save that let's go back into the browser we don't need this anymore we can close this window and there we go there's a little Facebook logo looking good also now with user I'm gonna change this URL to forward slash login and now we're going to do the login page so if I just make this a bit smaller and I open the panel again go into auth login.view and then shut this and what are we looking for this guest layout actually let's go into that so let's go in guest layout.view which is in layouts and we'll just make some slight changes let's look this Min height screen 100 view light Flex Flex call is fine get rid of all this justify Center and item Center this PT let's change to 100 pixels SM pt0 get rid of that and BG grew 100 is fine also this application logo we don't need that we're going to replace that with image width 200 and images icons Facebook logo we can remove it from the import at the top get rid of that and everything else is fine oh no wait this link the href I'm just going to replace with root login right save that don't have a block there we go standard make a little bit of sense right now let's go back into login.view and this div with if status don't need that get rid of that text input there is good input labels get rid of that and we need to add one more prop to this text input just under the bottom add placeholder email and now if we go into text input and this is a component so go into components text input where it says Define props it says model value just add in placeholder like that and now if we scroll down underneath this ref input add placeholder equals placeholder save that go back to login.view go down to the next text input remove the label again don't need that add in another placeholder that's going to be password and this block md4 with the check box don't need that delete that now this Flex item sender justify end we're going to turn that to Center mt4 becomes My5 all of this class stuff on this link I'm going to replace with this so we have hover underline font Bowl text blue 500 Focus outline none Focus ring tool Focus ring offset to focus ring Indigo 500 and the text for this just say forgotten password now underneath that link we're going to add a div with a class and border border B grade 200. under that we want another div classic Flex item Center just if I send the pt6 and pb2 now inside this div put a link in it the href is going to be register and we're also going to add a class under this and this is going to be ex5 py3 text white bg42b729 hover bg37a621 hex 20 pixels font bold and rounded LG and all we're going to see inside this link for the text is create new account now take this primary button copy it remove it from that and then go up this input error for password under the div go under it make another div put that inside it now on this div add a class with flex item sender just if I said that and pt4 this class becomes with full and now let's go into the primary button and if you want to know where that is primary button inside components and there it is just loads of styles on this just get rid of all of them get rid of it open this class up and we're going to add BG blue 500 hover BG blue 600 text white font bold text 23p 2.5 and rounded LG right save it go back to login.view save it let's have a look uh nearly there this forgotten password and create new what's happening there oh I've just realized that underneath this link the Forgotten password take the two div sections just copy these two remove it from there and go outside of the div and then place it inside there right let's save that and take a look yeah much better these inputs are a little bit small so let's go back up to text input so we'll inside text input Dot View and I'm just gonna remove this class and I'm going to add border gray 300 Focus border Indigo 300 Focus ring Indigo 300 rounded M Shadow SM P4 text LG and font Sammy bold save it let's have yeah much bigger now that's better we need to Center this a little bit let's go into login again uh no actually going to the guest layout.view and we're definitely missing something what are we missing ah the very outdo div Flex Flex call and then just after that add in item Center save it and there we go look at that looking beautiful awesome when we close it absolutely beautiful right now if you're going create new account we go to register and I mean that's almost already done let's just fix this bottom area let's go into our code on the side panel and in auth go into register.view and again this input label we don't need remove it same again remove remove and last one remove it now let's scroll back to the top and we need to add all the placeholders to it so that is placehold the name next place all their email next place all the password and the last one is placeholder confirm password leave it let's have a look much better looking good right let's have a look at this bottom okay underneath this div for another div class Flex item sender justify end mt4 and we're going to take this primary button copy it remove it and paste it into that and instead of ml4 we're going to put width full now underneath this link change justify end to justify Center and we're going to change this class for something different so remove the default class and we're going to add in class hover underline font bold textbook 500 Focus outline and focus Ring 2 Focus ring offset 2 Focus ring Indigo 500 save it let's have a look and there we go look at that perfect if we click already registered we go back to login create new account go to register that part is also done so if we go back to user what we can do first is make our image crop model so when we click this button then an image Cropper will pop up and we can cut an image of the user's face and then it'll get saved and then shown I mean it won't get saved now because we haven't even said about database yet but the styling and a certain amount of functionality we can do that right now so let's go and make the Cropper model right let's go back into our code and for this we want to jump back into mainnav layout Dot View scroll to the bottom and underneath this slot we want to say Cropper modal and let's open him up and we need to add two things to this so it's going to be if is crop a modal and remember that is coming from our Pina store you can see it right there is Cropper model and while we're up here just underneath this log out icon we're going to add in import Cropper model from component scrubber model and now let's go and make this let's open the side panel go into components and this create post box just duplicate it and rename it to croppermodal.view save close the side panel now we're in Cropper model right let's delete all of this apart from the top import change that to ref we also want a router from inertia and we also want our view Advanced Cropper and bringing the styles for it as well so this and we need Cropper and circle stencil now under this we're going to bring in some icons we're going to bring in close and plus we also need to emit from this component so under that we're going to Define Emit and that's going to be show modal next we have to have some variables and that is going to be like that so we've got file input Cropper uploaded image and then a Cropper image data object with all of this stuff inside it so the information about the size of the image and then under that we're gonna have a cons and this function is going to be called get uploaded image and let's open him up we need to pass an event so e and then we need to say e dot Target dot files zero index and we're going to put that into a console file and then we're going to convert that to an object URL and put it into uploaded image dot value which is this this ref player and after that another cons crop and open that up as well now this is where we're going to get our Cropper result so we're going to say cropper.value.getresult and then pull out the canvas and the coordinates then canvas dot two data URL and then put it into croppedimage Data dot imageurl this is our object here and this is the image URL and now we need to make a form data object and append all of the coordinates to that data object so underneath we're just going to do this so create the new form data put it into a data variable and then we're going to append each one to image height width left and top and for now I'm just going to say send to back end and to finish this function all we need to do is emit show model false and that's it because if you remember on Main nav layout if we go back in and go to the bottom we have this emit show model and we set is Cropper model to false right let's go back in crop a model okay so all this stuff in the template we're just going to delete get rid of that and then say div open it class or in the a fixed Z50 and then inside this we're gonna have another div with a class and it's going to be fixed in set 0 BG white BG opacity 60 and that is the overlay so that is the background that will cover the entire screen now under that div class fix inset 0z10 overflow y Auto then inside this div another open it classic Flex Flex call Min height full justify Center and item center py2 now inside this another div and I'm just going to open this up because otherwise we're going to go too far across the page let me just add a class to that open it and for this we're going to put transform overflow hidden rounded LG BG white shadow 2XL transitional and Max width XL now again inside that div class Flex item sender py4 border B border B grade 300. again div classic text 22 pixels font extra bold whitfall tech center and all this is going to be is some text that says update profile picture save it and if we go back to our page we can actually see the overlay now you might not be able to see it so if you come to this image and you click this camera button it should open so just a test if I inspect and I go to application you can see down there is crop a modal is equal to true so if I clear this if I just do clear and then refresh now I don't have it I close this up a bit and now I press this camera yes awesome it is working so you should be good right let's close that inspect window go back to our code okay under this div div again class it absolute right three rounded fold P 1.5 BG grade 200 and hover B2 gray 300 and cursor pointer and we also need an at click event for this so let's just put this class on a new line let's just format this a little bit and then just above we're going to add an at click event that is Emit and show model is false so this is the close button and all we add into this is an icon call old clothes size 28 fill color iv6771 and we should have brought that in already I think I remember we did yeah right there awesome let's save it let's take a look now if we click this awesome work in exactly how it should cool right let's continue full divs under this close icon so one two make a space dividup class Flex item Center BG white PX4 and pb4 then inside this just a single div open that up and then inside that another div class my4 and now we want a label and that's going to be for image let's just format this and then add a class open it and then we're gonna add all these Styles Flex item sender justify Center bge7 F3 FF hover BG DB E7 F2 font bold P2 rounded LG text 1977 F2 widthful cursor pointer now inside the label we're going to add an icon that's going to be plus and the size is 20 and we're just going to have upload photos text and then underneath the label we want a little input the type is going to be file and then we're going to add a couple more things so ID image ref is file input class hidden because we don't want to see it and on change get uploaded image and remember this get uploaded image is this function right here so whenever it changes we get the information of the change cool awesome right under this div make another open it class it with 350 pixels and MX Auto and now this is where we're going to add our Cropper so we're going to put in your Cropper and this is going to have a class of object cover ref Cropper and remember that's above the stencil component is circle stencil and the source is the uploaded image so if you just scroll up to the top you can see our Cropper is there the circle stencil as well is in there and our uploaded image variable is there and it gets filled whenever our input changes awesome right let's continue well we might as well save it and take a look what's happening look at that or awesome if I press upload image we should see something nice let's try this what is this PNG that'll do let's click it oh look at that perfect zoom in and out awesome right all we need now is our buttons at the bottom so let's go back to the code okay underneath this div from the Cropper div again and we're going to add a class and a dynamic class to this and it's going to look like this so class Flex Gap 4 and then in this class if uploaded image so if there is an image pattern top four else nothing right inside this div button open it and we will open that as well because there's going to be a couple of things on this again we want an app click so this will be the cancel button at the bottom or a type of button and then afterwards class it open there and for this we're going to put in with full just if I send around it and the py2 text Gray 600 hovertex gray 800 Font bold hover Shadow SM hover BG green 200 Focus outline none and focus ring zero and because it's the cancel button at the the bottom we're just going to put in cancel like so let's save that and let's go and have a look you can see on Hover our little cancel button now and actually if I click that it goes away beautiful let's open it again cancel very good okay now let's do our submit button or crop image button let's go beneath this one another button open it same format as last time but we want to say if uploaded image has something in it show it click and call the crop method which we made at the top remember this crop right there again type button and then add a class open it and we're going to add with full rounded MD BG blue 500 py2 text white fontbold shadow SM hover BG blue 600 Focus outline and focus ring zero and all we're going to put in this is crop image beautiful right save that let's go back into our browser and if we upload photo let's pick this yellow one again we can see now we have our cancel button and our crop image and if we click crop image we're not actually going to see anything let's um inspect just to double check that this is definitely working look at that that looks that just looks awesome man going console let's go back to our code and in our crop function I'm just going to copy this cropped image data and I'm going to console.log it right after just to know that it's actually working so let's save that go back into this upload a photo to the same one again and then crop and there we go there is our blob awesome so that is working right close this inspect window and actually a nice easy one because we're going to be able to click on the photo as well so we might as well make that component as well so let's go back into the code go to mainenavlia.view scroll to the bottom and next we're going to create a component called image display and same type of thing a VF on there if image display is true or has something in it then display the image let's just quickly scroll to the top and bring that then put it under Cropper model import image display from components image display now let's open the side panel and make that we can actually duplicate checkbox this will do and change check box for image display.view save that a script just clear it out and the template clear that out and this is a pretty simple component all we're going to do is import the close icon and then underneath import all of our pinia stuff and all we need is image display that's it now in our template divot ID image display now class it with fixed Z50 top zero left zero widthful height full BG black and BG opacity ad now inside this we're going to have our icon open it up add a class to it which is going to be absolute right zero P1 M3 BG gray 200 rounded full on cursor pointer we also need to add a click event which when we click this we reset is image display the now so what we're going to use this for is this is is actually going to be the image URL or path to where the image is so we're just going to clear it out when we hit this close icon and then finally we're going to have a fill color of black and a size of 30. now under this close very simple additive glass it odd grid H screen Place item Center so it's dead center of the screen and then image get rid of that alt put a class on him page screen P10 object scaled down and object scale down is exactly what it sounds like if the image is massive this just makes it actually fit in the screen properly and then the source is going to be is image display and that is it this component is done save that go back to main nav layout make sure we save this as well to double check yeah we got it down the bottom awesome right if we've done this correct I should be able to click on this image and then we'll see it pop up let's try nope nope I don't think we added it so let's jump into our code again and go into post.view um where is it they're line 49 this image we're going to add an at click event to this and that's going to be is image display is equal to and remember this will be dynamic but at the moment we're gonna have to take this copy it and just paste it onto the end of this well it needs to be in a string so let's add single quotes and put it into a string and I'll just format it a bit so it doesn't look horrific just like that and we should probably take this as well copy it save this component and then go into user Dot View and find our photo section if I just search photo and yep there it is line 168. all I'm going to do is add on this image the same thing at click is image display equals this URL and I'm just going to change the ID from 189 to the actual image in the source right let's save that now let's try that let me click oh look on that this is just awesome let's click to see if we can close beautiful let's try this photo yes look at that awesome amazing this is just working fantastic beautiful now if we go back into the home page where the posts are this page we click this as well same again beautiful okay awesome right the next component and the last one I think is going to be this create post component so when we click this input at the top we want another pop-up to open up so we can put in some text and an image if we want to so let's do that now right create post let's go into the code open the side panel and there's three post box just duplicate it and instead of create post box it's going to be create post overlay dot view now the template just strip it out so delete everything and the same in the script just get rid of all of it right now let's bring in inertia and view so for view we want ref and reactive and for inertia router and use page next we need our icons which is going to be video image image emoticon outline close Chevron down Earth and dots horizontal again we need pinea so get the Js general.js bring in all this and then convert stores to refs and all we need is is post overlay we need to Define emits again and that's just going to be show model also get the logged in user for later on add a single variable which is image display and that's just a ref with an empty string we're going to add a reactive which is a form and inside is going to be text and image under that we're also going to have another variable which is just error and ref is null and then if we jump quickly into the Cropper modal.view we can actually take this get uploaded image function copy it go back into create post overlay dump that in and I'm just going to swap this around a bit I'm just going to take this copy that put it inside that delete it there and instead of uploaded image we're going to take this image display ref and pull it there instead and underneath we're just going to add form dot image equals e Target files zero index that's it save that and lastly we're gonna have another little function that is clear image and that's just the image display and the form image equal to null and that is everything for our script so now let's do the template let's do a div ID create post overlay and then class it with fixed Z50 top zero left zero widthful height fold BG white BG opacity 70. now inside that another Dave flaccid with grid height screen Place item Center and P4 inside that another div last with BG white with full Max width 600 pixels MX Auto Shadow XL and rounded XL again div and then class it with flex item sender relative my 3.5 and mx1 and now another div and this is going to be our header section so class it with x22 pixels font extra ball with full and tech center and all we're going to put in this is create post like that now we're not going to see anything because we haven't imported this so if we go into our main nav layout.view and we can see at the bottom then we've got all these you can literally just take this Cropper model copy it paste it above rename this to free post overlay and then the if and the show modal becomes is post overlay and same again and if we just scroll to the top and underneath this image display let's just add in free post overlay if we save that and we go back there we go we can see starting to come in now and again if you can't see it just go up to this top bit where it says what's on your mind click it and you should see the pop-up again if you go into the inspect and you check in application you can see there that is post overlay is set to true so that is why that's displaying and if I want to double check that it's actually working if I just clear that I refresh and then I click this yeah perfect working perfectly and I can see there is post overly set to true beautiful right let's close this and continue right underneath this tree post div another and let's open this one up a little bit we're going to have an app click event on this which is going to be is post overlay is equal to false and remember is post overlay is being brought in from Pena right there and we also want to class it with absolute right three rounded for p 1.5 BG gray 200 hover BG grew 300 and cursor point there and this is going to have an icon inside it and this is going to be closed so this is like the little X in the header let's save that and you can see it right there if I just click this goes away open it back up working beautifully right from this close icon two divs down one two make a space div It Up Add a class with order T border T gray 300 now another div class P4 another div class Flex item Center and inside this we got our image so image alt don't need it class it up with rounded full ml1 Min width 45 or Max side 45 now we need a little dummy image for this let's just jump into post.view and we can see there's a picture right there let's just grab that copy that go back into post overlay and just Chuck it in there for now I think it was 78 that we had and the size is fine I mean the Stars will change it so let's just save that let's have a look beautiful look at that okay right under this image divot class ml4 inside this div class with font extra bold and this is going to be the name just going to put in mine again like that let's have a look beautiful under that they've lasted up with flex item sender justify between with 100 pixels BG Greek 200p 0.5 px2 and rounded LG now we're gonna have two icons in this first one is going to be Earth with a size of 18. the second one is going to be Chevron down with a class PR 10 and pl1 and in the middle of this I'm gonna have a little span it's going to look like this you'll have a class font bold PL 1.5 text student in pixels and just put public inside the span if you save that you see we got our pretty little fake drop down over there beautiful okay right run this Chevron down we're going to go down three divs so one two three open it up div it right up class it with Max height 350 pixels and overflow Auto right now in this we got our text area I'm going to remove name and ID calls 30 is fine rows I'm going to set the three and then we're going to add three other things to this which is going to be V model so form dot text and remember form is this reactive right there and text inside it and then the class with full border zero mt4 Focus ring 0 and text 22 and then placeholder is what's on your mind okay awesome now under that div it add a class with P2 border border gray 300 rounded algae and relative and we're also going to add a v if which is going to be form image so if it exists show this and what this is going to be is our close icon let's just open that up we're going to add a class to him and that's going to be absolute BG white P 0.5 M2 right tool rounded full board that and cursor pointer we're also going to add an at click event like that which is clear image you remember we made this function clear image just sets everything back to null and then under this class you can add a size of 24 and a fill color 5e 6771 let's save it let's have a look we can start to type in there you can see but we don't see any image yet because uh we haven't made the upload section so let's make the upload section before I forget underneath this close you'll probably add the image I'll get rid of that this source is just image display make sure you've got a colon and let's get a bit of class on him rounded LG and MX Auto right now from this image two divs down one two space it divot and class it with border tool rounded XL mt4 Shadow SM Flex item Center and justify between inside that div glass with font extra bold and P4 and inside this we're going to say add to your post then under that div class with flex items Center and now here's our little label and the four is going to be image we're going to add a class to it with hover BG gray 200 rounded for P2 and cursor pointer let me just put this on a new line like that okay right now inside this we want an icon that is going to be image and that's going to be size 27 and fill color 43be62 save and you can see now this bottom bit looking awesome nothing happens yet I don't think yeah let's continue now under this label we need a little input let's just open this up and I'm going to add to this an ID of image class hidden because we don't want to see the input the type is file and we're going to put at input get uploaded image and just pass the event so again any anytime something is uploaded into this input it gets updated awesome right underneath that input button it up and class it with other BG green 200 rounded full P2 and cursor pointer and inside this we're going to have an icon time that there's emoticon outlined size 27 Phil Keller f8 b927 let's save that let's have a look we can already see it there beautiful I think now if we click this yeah we can actually see it if I click this PNG and enter yeah look at that how freaking awesome is that man and you can see if we want to clear it we want to pick another one press this close icon and we can choose another one let's do what is this one of my other tutorials beautiful look at that that is awesome man nice right this is very easy let's just copy this button paste it twice the second one is going to be video image and the color is going to be f12848 and then the last one is going to be dots horizontal and the fill color zero five zero five zero five save and look at that just stupidly easy okay right from this button put on two divs one two open it divid and for this you're going to say V if and this is where we're going to show our error right now inside this another div class it right up with whitfall BG red 100 text red 700 rounded LG mt3 and tech center and then all we're going to do inside this is add another div with error inside it and a Class E 0.5 and that's it we won't actually see anything yet because uh we need to get the error from the controller in the back end because it'll it'll push us back um an error if there is one but it doesn't hurt putting this in now and then all we have to do after this just make a little space is ADD our button to submit let's just open this up a little bit and I'll add a class onto him that is with full BG blue 500 hover BG blue 600 text white font extra Ball P 1.5 mt3 and rounded LG and all we want to put in this is post save it let's take a look and there it is beautiful okay it's just so fast it's just so fast now of course nothing is going to work yet because we even need an at click on this button or a function that will create later that is going to be called pre-post we don't actually have that yet but again when the back end is all set up and ready put it together and then we'll be posting like a psycho and look at that beautiful let's close it open him up stupid insane anyway now we got this we should probably move on to setting up our controllers and models in the back end and actually connecting our database and stuff so then we can log in we can get the user information create posts comments All That Jazz but I think probably the best thing to do is create all of the controllers now and then set up our end points so we don't have to keep jumping in and out and doing it you know every time we make an end point we can just do it all now so it's set up ready and then we can just smash this out so yeah let's do that let's go and create all the models controllers migrations and endpoints so we can get cracking let's do it right openness and it's over the side panel close all this resources for now we don't need that and let's go into app HTTP controllers and we can see we've already got all this old stuff okay we're gonna have to modify this register user controller later but we'll we'll hang back on that for now right open the terminal and the first one we can do is PHP at the Sun make post hyphen m d for model and controller and then hyphen hyphen resource let me just open that a bit wider so yeah you can see it okay so let's press enter and error make oh I forgot to put make model let's just press up clear this out a sec and press up and make add model post hyphen MC hyphen iPhone resource okay cool then we got our post controller with all the methods inside it awesome let's check in our models host.php awesome now go into database migrations and we should see there we go create post let's go into that and we can set this up now so we need to add a couple of lines into this we need some foreign Keys as well so this is going to look like this so we need an unsigned big integer which is a user ID and then that is a foreign key as well which references ID on the users table and on delete it'll Cascade so what that means is that if the user deletes their account all the posts will delete as well associated with that user awesome save that now if we go into models and post.php we are going to put in some relationships in this so the first one is going to be user so a post belongs to a user and then a second one which is going to be a post has many comments and we're going to order this in descending by created apps so again how this works is that it'll just match up IDs so one table which is the user table will have an auto incremented ID and the post table is going to have a user underscore ID and then it matches them together and then it finds it based on the matching ID the same as on comments so so a comment is associated with a post ID so on comments as well we'll have a post underscore ID column and then the post obviously the ID is Auto incremented and then again that'll match them up and then we spit it out again in descending order awesome to save that okay now we might as well make our comments model so let's clear this terminite let's press up and this time instead of post we want comment and the same hyphen MC hyphen iPhone resource we want all that and uh awesome now in the side in controllers we have comment controller and in the models we have comment also in database migrations we have create comment table let's go in that right so we're gonna have to add our foreign Keys into this which is going to be that so two unsigned big integers which is going to be a user ID and a post ID also add in that it's a foreign key referencing where it's from so it's an ID post table and it also needs the Cascade so when you get has deleted it deletes all the things on the other tables associated with that same in the user and then this text is the actual comment so let's save that and now go into models and comment.php now we have two little relationships in this let's make a space and the first one is going to be post and I have to read this is just a comment belongs to a post that's it and again how this links together on the comment migration we will have a post underscore ID and that's how we know it links to that post if we just look at this comments table quickly again we got this post ID and then we go to the Post table and you can see we've got this table ID which is an auto incremented ID so they link up okay let's go back to comment.php and we also need a second relationship in this which is going to be user so a comment belongs to a user so again same process on the comment record there will be a user underscore ID and that is associated with the Auto incremented ID on the user table awesome save that and now we need to make the user stuff so we've already got a user.php because laravel comes bundled with a user model but let's make a user controller so PHP make controller let's say user controller hyphen hyphen resource it's a bit messed up let me just take that so you can see the full line there we go so that PHP artisan make controller user controller hyphen hyphen resource we've already got a migration for this as well because laravel comes bundled with it so let's press enter okay now we have a little user controller which if we go in HTTP controllers user controller right there okay so now on the user model let's go into that user.php let's make this terminal a bit smaller right you can see we've got this fillable and we're going to add in another line that's going to be image because that's going to be our user image and will sort out the migration in a minute all this hidden stuff is fine this cast is fine now underneath this we're going to have our first relationship which is going to be post and again have to read this if we go and with the classes user so a user has many posts and how that works is that on the post table you'd also have a column that is user underscore ID and that is how you would get all the posts associated with that user and we're also going to do the same with comments so again a user has many comments and again on the comments table user underscore ID and the comment is associated with a user awesome save right now we're going to jump into migrations and this first one create users table let's jump in there and we can see we got a string with name we're going to duplicate that and we're going to call it image and that is where we're going to save the path to where our user image is stored so save that let's just close this side bit actually the migration is we can close now and I'm pretty sure at this point we can migrate our migrations to the database so as long as you have your end setup let's go in dot end I've got mine setup like this this is all I need make sure your connection's right and let me just open this terminal up again clear it right out and I don't think I even need to go and create the database for it I think laravel will do it automatically so if I do PHP at the sun my great and uh yes the database Facebook clone does not exist on the MySQL connect would you like to create it yes please explain yes look at that awesome that is Cirque right let's open SQL Pro and then connect choose a database where is it Facebook underscore clone and awesome there it is let's go and use this yes we got name image email password blah blah blah blah post there we go we got a user ID on there associated with a post and a text in an image comments user ID post ID and the text of the comment this is exactly what we need so now we can just minimize that for a bit and this terminal we can close for now get rid of this end and all these migrations we can get rid of this user.php don't need that it's comment dot PHP don't need that yeah I don't need easy to get rid of all this right and now we can go into roots web.php and we can sort these endpoints out so what we want this in is inside the auth we want everything inside the auth so let's make a space and the first route we're gonna add is going to be root get post controller and this is the index and we're going to take this inertia render posts and we're going to put it inside the post controller so let's make sure we've imported this so if you go to the top you should have use app HTTP controllers post controller so then you can use it there and if we take this copy it and then delete this route go into post controller and this index I'm just going to paste that in make sure we import the inertia so use inertia backslash inertia save it and back in web.php let's make sure we save that as well and I'm going to add a name to the end of this so just add name post start index save it now if I go back to my front end I mean the browser sorry yeah now because this has been put behind this middleware off wall we can't actually get to the post controller page anymore this base URL because it's being protected so we get redirected to login so before we actually register a use user what we are going to do quickly jump into the HTTP controllers off and then register user controller we're going to scroll down and in this function store there's a root service provider home I am going to go to that and it says home dashboard we don't want dashboard we want nothing so save that and in case you don't know where root service provider is next to the models file you have providers and then you can see root service provider.php it's in there now if I close this file and what I am going to have to do for this is in this user create when we create the user that registers we're also going to have to add a default image which is going to be this so image and everyone who registers at the beginning is going to have this default user hyphen placeholder.png which we brought in a while back so if you go into public images there it is user hyphen placeholder.png it's just that so whenever anybody registers that is the default image right close that and this save it now hopefully if I go back into the browser and I go in create new account let's sign up and see if we actually can register I'll probably John week's Dev email John m.com password one two three one two three one two three again one two three one two one two three right let's register yes let's close all this it must have worked because nothing broke let's go into our database and let's go on the users table yes there we go awesome so name email we've got our image in there which is the default placeholder we won't actually see this now because we're still hard coding images so if we actually go forward slash user you can see we still have this image so we won't see it yet we'll change all that soon but let's just carry on with adding our end points just so we can make our lives easier in future so we don't jump back and forth right let's jump back into our code and go back at the web.php So In Our Roots and let's close the side panel and now I'm going to put in all of our end points and that is going to look like this so we have three end points for our post controller so these a get a post and a delete and the delete we pass an ID because we need to know what record to delete on the comments we have two a post and delete and then we have user which is going to be two as well and we want to get by user ID and also an endpoint to update the image and that's when we use the image Cropper modal overlay thing now we also need to import these controllers so let's scroll up and underneath post controller we also want comment controller and user controller so save that so we can see now we got post controller comment controller and user controller awesome right now if we just do this from top to bottom we'll do all the methods for our post controller then all of our them for Comic controller and all of them for user controller so let's go into post controller and for this we've got three methods it was index or and Destroy so index we're going to keep this create we're going to delete this store we need to keep show we delete edit delete update delete and Destroy keep so index store destroy beautiful right so on this index method we need to add all of our posts and we need to get it by descending order so how we do that is like that so post model and then this get on the end is get all of them and we want to order by created at descending so get the most recent first and then inside this posts we are going to return a very big collection and that is going to look like that and this all post collection we are going to go and make it now so if we open our terminal and we say HP artisan make resource all post collection enter and now we open a side panel and inside HTTP we have resources open that you can see all posts collection let's open that and we can close this terminal get rid of that and the side panel close it right in this we're going to get all the data we need for all of the posts that are created so in this post controller we're getting all posts and then we're passing that into this all post collection and we better make sure we import that so we don't forget if we go to the top use app HTTP resources or post collection now inside this when we pass the post we can now create our response using uh eloquent relationships because remember in our models we've already set up relationships with a post belongs to a user comments belongs to posts and vice versa so what we're going to do with this get rid of this parent to array put in this collection map function opening right up and then again we want to return an array and the first thing we want is all of the posts they data so that's going to look like that and this item we need to pass it from here so item so again this collection this references to the post that we're passing in and then we Loop through it and then we have this item which is a post which is the post ID the post text and then the image for that post if there is one and also create it at and we've just formatted it a little bit so it doesn't look horrific right now under this we're going to have the comments associated with the post so let's add that in so we have comments and the item again which is the individual post and we can use that comment because again if we go into the models posts and we have this comments so we're referencing that and we get the comments in descending order now let's open this map up function open there let's just put comment in there and then we're gonna return another array and for this we're going to have the comment ID and the comment text what the comment actually is and then inside this return as well well we're going to have the user that made the comment and that's going to look like that so from the comment we want to get the user ID and again let's go into comment.php we can see that a comment belongs to a user and then we can access the user information through that beautiful let me just close these off so we don't get any errors and I think a semicolon there and I think a comma there and again the same thing we can take this user section we're going to copy it go outside of the comments map so this section just underneath and we're going to paste user again but that's not going to be from comment that's going to be from item and again item is post let's save that now where's this we've still got this little error maybe that needs a semicolon on there yes it does awesome right so that is exactly what our response should look like and because it's a collection all of the posts are going to have this so save let's go back to post controller and this section now is done save that let's go to the store now the store very easy first line validate text and text is required because otherwise you're just going to be posting nothing and then under that we want to create a new post and then because an image is optional we want to say if the request has a file called image we then want the check so we want to validate again if it's a JPEG or a PNG and next we want to do this and we're going to go and build this now so I've got this new image service update image and you pass it the post and the request so we're going to go and build this service now when we finish getting through this store method so pretty much what happens you push your request and you post into this it does whatever it needs to do pushes the post back out and then at the end of this the user ID is the logged in user and then the text is the text that you you've passed through and then finally all we do at the end of that is save it and that's it nice and easy right let's go and make this image service because this is very important right so let's scroll up this HTTP close that models close it providers close it now in app we're going to see a new folder services and then inside Services new file and this is going to be called imageservice.php now we need the opening HP tag a namespace which is going to be app services and then let's say class image Service open that up and then inside this we can have a function that is public function update image and we pass the model and the request and put some curly braces under that and now this uses intervention image so we are going to have to go to our terminal and we're going to have to compose or require image intervention so if we go back to the browser let's search for it image intervention intervention image I'll put on the laravel9 as well well what's this https image.intervention dot IO yep that will do nicely let's just open this up and what do we want read about laravel integration let's go to that there it is integration in laravel we just need to install it first so if I just grab this require intervention image copy that go back to the code editor and say composer require intervention image enter now that's installing okay that's done let's go back to the browser now let's go down to integration in laravel so it says here we need to put this in providers and this in Alias so let's go and do that go back into the code editor and I think it's in HTTP kernel this is middleware oh no sorry it's not in there it's in config app and if we scroll down yeah there it is providers inside this package service provider section I'm going to paste that in make sure we put a comma after it save that now I'm going to scroll down and I'm going to add the Alias let's just copy this copy go back to the code and paste that in there save that now go back to the docs and then this publish configuration in laravel let's copy all of that back to the code open our terminal and paste that in and enter cool that is done we can see now we got this new filing config called image.php right there awesome just close that and right now if you go back into imageservice.php we can start to build this out let's use the Alias so image which again remember this is the Alias image and then our first line is going to be image make request and then we're getting the file image and we put that into a variable then under that we're going to say if open him up and then add in if the image is not empty so remember this is a model so it's actually checking the database to see if it's not empty we are going to get the current image which is going to be public path concatenated model image and then under that we want another if and we want to see if the file exists which is this current image and if the current image is not equal to our default image we want to say unlink the current image so unlink is like delete a file okay right outside of that if statement we're going to say file request file image and then we want to get the original extension of that file and put it into a variable extension now we want to check as well if the request width is actually there because remember this deals with cropped and non-cropped images we then want to actually crop it with all of the data we pass through and then finally after this F we're going to say the name of the file which we're just going to add time and then concatenate that with Dot and the original extension we are then going to take the image and save it to the images folder by the name we just gave it and then we need to add the image path that needs to be saved to the actual little image column in the database and then lastly we need to return the model and that is it so now this should work for all of our image uploads so let's just save it and go back to post controller and now this image service we can import so if you go to the top you should have app Services image service and you can see here we got the post we're passing the post into this update image function with the request it does whatever it does and then it spits back out this post and we carry on and then we save all the data and that is our post saved awesome right let's do the destroy method and for this it's pretty straightforward I'm just going to change this so int ID name is this int ID all we want to do for this is say get the post by ID and then a little F with the same thing again if the post image is not empty get the current image and then if the file exists which is this current image delete so unlink and then after all that delete the post record from the database save and that is it that is this host controller done that's all it was three methods beautiful okay next we can move on to wait what was next it's going web.php comment controller so let's jump in the comment controller and we can close this terminal it's taking up space and there's two methods in this very easy create an index delete this show and edit delete and update delete and all we have left is store and Destroy and again this is Mega easy so store all we need to do is validate that a comment is actually being passed um that's just the text so that's required then create a new comment object add the logged in user ID to the comment user ID also add the post ID through the comment then add the text and then save it done that's it and then for this destroy I mean this is just so stupidly easy but in an ID on that change the param to Indian ID then we want to get the comment by ID and then delete and that's it all right save that's done beautiful look at that so fast right and the last one what is it user controller let's go into that and in this the index we're going to keep is create delete door delete show we're gonna keep edit delete this update I'm just gonna add an update image get rid of the ID and remove the param and Destroy we don't need so delete that so we have index show and update image right now for the index method we want to get all the posts with the user ID is equal to the logged in user ID and order it by descending and that's going to look like that so make sure we import the post model so use app models post right there and make sure you've got that get on the end because I get all of them that meet this criteria and then we want to render the user page using inertia like that and make sure we import inertia so let's go up and there you use inertia inertia and the same thing again we want to add our all posts collection for a little comma and then inside an array say post new all post collection and pass the posts and make sure we import all posts collection so they use app HTTP resource all posts collection that is that function Done Right Next the show what we can actually do for that is take this line copy that go beneath paste it in and we take this ID that we're passing as a parameter and all we do is this auth user ID we replace it with ID and that's it and then again we can take this return inertia render user copy paste it beneath and we're just going to add one extra line into this response array and that is just going to be that user find by ID and make sure you import the user model so go to the top app models user and that's it now this last one update image first we want to validate so make sure the image is there so it's required and that it's a JPEG or a PNG and then next we need to use our image service again and that is going to look like that so remember to import it image service let's just scroll up there we are app Services image service and all we're going to do this time is pass the logged in user and the request return the user and then finally save it and that is it that is everything that is all of our controllers done look how easy that was I mean it does help because we have now we have this image service so we can reuse it this all post collection you can reuse that everywhere we've reused it there and there so yeah super simple okay awesome now that we've done all that we can actually jump back onto the front end and like finish this up well I mean it's probably not going to be that quick but we can now instead of using hard-coded information like images and text and all that stuff we can actually start creating our own posts cropping images and then getting that information from the database so let's jump back on to the front end stuff so we might as well start in user.view so let's go in there and let me just pull this back a little bit this browser we can get rid of intervention image get rid of that and let's close this up a little bit okay right first if we go in the header section and this menu and this image let's hook that up first yeah let's do that so let's go into our code up on the side panel go into layouts mainnavlayer.view close the side panel and where is it it's probably somewhere at the end yeah there we go it hard coded so my name is hard coded and this image by a hard-coded same as this one there so now because it's all connected up if we scroll to the top of this file and at the top of the template if we dump out user and remember user is coming from this we should see our information let's save it and look at that here we go there it is freaking sweet bro that means all we have to do is hook it up and if you want to know where this is coming from actually let's just go into the side panel and if I search for inertia and what is this handle inertia request yes it's this so the file is handle inertialrequest.php let's have a look where that is okay in app HTTP middleware handle inertia request.php and this section auth user request user is where the logged in user information is coming from so this is all of this awesome right get rid of this user buddy close the side panel and let's go down to where our image is the first one which is this button section line 101 let's just new line it so we can see it okay and I'm going to replace this SRC with user image and make sure there's a colon in front of it now copy that go down to this link and again this image just sort this out a bit because it's all the way over the page and this SRC paste it there the same with John week's Dev in this span I'm going to say curly braces user dot name and now this link the href we can replace with root user dot show and then that passes a parameter which is the ID and I think that is it if we save that yeah you can see it already there is our default image because we haven't we haven't cropped an image yet and if we click this we go to user user with an ID of one awesome okay right now that we're in user let's add what we need doing this so where is it user Dot View which is in Pages we just open this up a little bit more and now the first thing we're going to change is where is it this line 30 this Source becomes user dot image with a colon in front and before I forget we also need to have these defined props this time so bring that back in Define props we need post and user and just in case you forgot if you go and use a controller this is the show by ID and we're returning posts and user so that is that there and then we can use it so there's user dot image and then the next bit on this button we're going to add a vif and it's going to look like this so This vif we're going to get the current logged in user ID from the handle inertia file that we saw earlier so handle initial request.php we get in this so the logged in user and we're checking it against the user ID so in this case this up yeah because remember we can have multiple users in this application because I mean it's a social network and if the IDS don't match then this camera is going to disappear because you don't want to be able to upload a photo on somebody else's profile you know so if we just go back into this um what else have we got to do I can see my name there that needs to be done Dynamics so that needs to be user.name and let's just scroll down a bit more this link we need to have a VF on that as well because this is the edit profile button so let's say VF if the logged in user is the same as the user ID show it and also this href now we can change to root profile dot edit now let's keep scrolling down and check what else all this is good all this is good ah this section okay now this is where we're going to Loop through our images from our posts so on this span before the class we're going to add a V4 Loop that's going to look like that so we want to get the post doc data and then say photo and then on this image we need to add avf just to check that it does exist and if it does show it and then instead of hard coding this image we're going to say photo dot image and we're going to say exactly the same in the source so that needs to be photo.image as well now if I save that we shouldn't actually see anything so let's save it and yeah perfect photos now there's nothing in it which is perfect so let's continue and here we go you have a little create post box right and for this again we want to add a VF same as before if the user ID the logged in user ID is equal to this page user ID show it and then this image becomes user image and the placeholder we need the modify to accept the user's name so that's going to look like that so what's on your mind whatever your name is you know let's save that that's cool right we can see the image there has changed and if we go to another like user profile then we won't see this box because the user IDs don't match because we'll be user one and then up on this if we go to another user that would be like user 20 or whatever so this will be hidden this will only be shown on your profile if it's you right now next this post we can delete all of these apart from one and we need to add three parameters onto this and this is going to be user post and comment and what we're going to have to do for this is check a div in it open it and on this add a V4 Loop like that so same again post dot data and then we got post and the key of post copy this drop it inside and now go into the post component and you can see we've commented this out from before we can bring these back all right and now all we're going to do is scroll through this and add exactly what we need to add I mean we're also going to add our functions as well to be able to create and delete posts so we might as well do that first so underneath this two refs the first function is create comment so this so create comment we're going to get router dot post and the endpoint is comment we need to pass the post ID and the comment which is text and we got this little thing in which is preserve scroll so if we're in a certain point of the page we don't click it and then it just jolts to the top of the page so let's just check to see if router is imported from inertia yes right there awesome right next one very simple is delete comment and that looks like that just root that dot delete comment pass the ID and preserve scroll again next one almost the same as delete comment this is delete post router delete post by ID preserve scroll and for this I've just got a final function that is called is user and we're going to get the user by ID and again all this stuff like user and post is being passed from this so it's being passed as a prop awesome right let's sort this out right first we have this button right yeah we're gonna add in and add click and that is the is user function right there and also the source on the image needs to be user image next we've got my name hard coded there that's wrong that needs to be user.name then we've got this 14 hour hard-coded that's wrong again we need to have of post dot created at and remember we formatted it as well so it looks pretty and then next this the actual text of the post needs to be just post doc text now we have this image and this is hard coded this is wrong we're going to replace that with post.image and then the source is also post dot image with a colon in front of it now underneath this thumb up icon we've got five comments that is wrong the five needs to be dynamic and that is comments.length now finally we come into our comments section and I can see this link needs to be replaced with this so the href is root use a show and the ID is the logged in user ID and the source is the logged in user image like that okay let's go down a bit more let's see this button we need to add an ad click event with create comment like so and then under that we have the section that displays the comments and just be before this ID comment I'm going to put a VF comment so if there is any show it if not don't and then under we got this little div with this class let's put that on a new line like that and under it we're going to add a V4 to Loop through all the comments for this post so we go comment in comments and the key is comment and then again on this link we need to change this for href root post dot index and then this image the source is comment dot user dot image and now this is a comment is wrong this needs to be comment dot text and finally this button at the bottom for this class on a new line and we're going to add a vif that says if the user ID so the logged in user is equal to the comment dot user ID so if you are the user that created this comment you also have the option to delete this comment so only the use of the create the comment and delete it you know okay that is the entire file updated save that right I'm pretty sure something's going to break now let's go into the browser refresh yeah that is broken let's go back to home yeah very broken so let's just quickly go and fix him up in user.view I didn't save that so let me save it ah that actually came back in look at that so that's perfect it's not showing because there's no we haven't made any posts yet so that's perfect let's go back into the main posts view and that is broken that is because we need to update the post component to like this so why don't we just take this copy it go back into posts.view scroll down see all these posts they don't have a they don't have any parameters so just get rid of all these and put this in and now if we just scroll to the top of this file just above this user we're going to add Define props posts and save that right let's go back and refresh this that is working again so that is a very good sign right as if I click this yeah this is all still working we haven't done this create right let's just carry on and see what else we can hook up it would be nice to create create a post so let's let's actually do that let's do the um let's do the create post stuff which I think is this create post box and that is the is post overlay create post overlay yeah this is still all hard-coded like this name and all that stuff okay yeah let's do this create post overlay so there's not really much to add in this there's just one function I think and then we just need to make the page Dynamic so under error can't straight Post open them up we want router Post open there and that's going to go to post we're gonna pass the form and then open that up and the form is this the reactive so we pass the text and the image if there is one and we wanna Force form data the true and preserve scroll so again preserve scroll so it doesn't go to the top of the page and now just in case there's an error and we want to say on errors errors and then open that up and then we want to say this say if errors so if this and errors dot text assign errors Dot text to arrow.value or nothing just an empty string and we're going to do exactly the same with image as well and then just after that if there's no errors we're going to have an on success and that's going to look like that so on success pretty much clear everything out and then emit show model and we want to close the modal at that point and I'm pretty sure that is it let's just make sure we got our yeah we got our router and you use page in there that is what we need okay let's go through this and make it actually function so I'm going to scroll down we can see an image there and a name so we replace this hard-coded image with user image then this name is username and we scroll down we've already got our V model in there perfect this is all done click clear image cool this done this input is done as well so we're uploading the image the error section we already did awesome I think it's just this button so all we have to do is just on this button or an at click like that that is create post the function we just made right save that and hopefully now let's go into our browser why don't we try and create a post so let's open this let's say this is a test post Pro and we're gonna shout it let's add an image let's add this little yellow coffee PNG and we can see it's in there right last click post and see if it doesn't error yes look at that awesome that is awesome man right let's try another one let's try it without the image let's say no image post yes look at that awesome this is working awesome right let's try a comment let's say first comment send try it again let's just put anything in there send yeah look at that this is working amazing can we delete this yes awesome we're about deleting it well before we delete it let's go into our user page and actually I've just noticed this um we need to change that as well that needs to be dynamic let's go back into the code and that is also on Main nav layout Dot View actually no it's not it's in post start view okay and actually let's create postbot we haven't changed that yet so let's do that again this create post box this image gets replaced with user.image and the placeholder is what's on your mind username let's save it let's have a quick look yeah now that's changed up there you can see awesome let's go and do this now let's scroll up and we got this link here with this image and divinsider you can see the name right there John wickstev we don't want that that's wrong so let's replace that with user.name and the image is user dot image and this link the href needs to be user show and we pass an ID to get the user by ID awesome save it a luck yeah you can see now that's changed if you click that we go to our page and you can see the photo is there in the middle and that shouldn't actually be in the middle let's quickly jump into our photo section in user Dot View and there it is line 72 I'm pretty sure we can just take this off this class on the span copy it remove that and just add it to the image class and now let's save it let's go on it yeah perfect now we should be able to click this photo and it'll show just like that let's close it let's hit this post look at it man just stupid okay close that and you can see all of our posts we have in here right let's try this Cropper image overlay let's press our little button press upload a photo and I got picks I got a pick of me somewhere let's try that let's spread him out get your face in it crop image nothing happened why did nothing happen let's go and have a look it's on the side panel doing components croppermodal.view and send oh we haven't even done it yeah we haven't even finished the functionality to crop it and send it back yet so let's quickly do that this is very easy this send the back end get rid of it and add in router post and then this is the endpoint user update image past the data and preserve the state is going to be false because we want to get the newly updated image and have we brought that in yes we got the router there I think that's it I'm pretty sure that's it save that let's just go through all this and we got updated image click crop at the bottom yeah let's try it man let's go back click this camera and then upload photo do the same again picture of my mug openness crop beautiful look at it and it changes there changes on all of these little images down the side because these poster hours at the top has changed as well it's changed in there let's go back under the post page we can click this little home at the top yeah you can see it's all changed there this has changed as well on the side right anyway let's make another post let's say cool add an image just add a picture of me or whatever and then let's post it look at it man that is just stupidly amazing let's close this let's see it in mobile view look at it absolutely insane let's go back into our profile look at that oh for someone in there with these photos that should Flex shouldn't there ah let's go yeah it's not flexing I mean it's still working like this but it needs to go over not under right let's go back to our code join user.view and if I just put this small so we can see it close this side panel let's pull that like that right I had to make a slight modification to this span so it's still all the same the V4 the key the class but I got a v show and a photo.image is not equal to null then show it else don't what else have we got left what about this edit profile can we click that profile that is broken what is that broken inspect what is this no idea what's going on there let's have a look let's go into side panel and profile we haven't even touched this actually the edit page it should be yeah we got the authenticated layout and that's wrong all we need to do is just Swap this for mainnav.layout so let's swap that for me nav dot layout and the top authenticated layout becomes main nav dot layout like that and make sure we do it there as well save that actually something working now cool let's open it uh it's a little bit messy let's just quickly sort him out close this side panel so on this py12 after we're going to put PT 20 so patent top 20 Max width 7xl just make that XL all the rest of this looks fine save that yeah there you go that's it done and all of this should work let's just put Dev one save that says saved let's have a look in this go back to yeah there we go John weeks they have one go back to edit profile take it off save go back to edit profile and there we go awesome okay that was very quick let's just open this have we done the login stuff can we log out yeah so if we log in I think it was John m.com one two three one three one three let's Press login that also works amazing get all the posts there um let's log out and make a new user so log out and create a new account let's just say Tim tim.com one two three one two three one three or one two three one two one three and then register yes that has worked we've got all the posts from the other user and you can see that him is logged in and he has no user image no profile image sorry let's go to Tim no profile image no posts as well perfect so let's go to Google and find I don't know a face pick this will do let's just screenshot that go back to this upload an image and where's that desktop there's a little screenshot and that'll do a crop image look at that awesome goes up there as well and now what if we click this where does this go do oh that redirects to the main page that's wrong let's quickly go into create post box I think that is so create post box and yeah this link is wrong I'm just going to change this href for root user show and the ID is the user ID save now let's go back click yeah and now we go to the actual user profile page because we see there we go user slash two because Tim's ID is two now let's make a post let's say this is Tim and let's just use that screenshot of Tim yeah that'll do it post awesome we've got a picture there now we can open close that let's do it and this photos as well I'll open it there now let's go back to the main post and you can see we got that in there with all of the other posts from the Joe Meeks Dev profile now if Tim leaves a comment on John week's Dev let's say this is from Tim send awesome look at that now if I log out as Tim and log back in as me so one two three one three log in now where is the where is that comment there it is I'll say yo Tim and then send look at this awesome amazing let me go into my profile don't make Dev you can see Tim's posts are not in here it's just mine let's go back into the main page let's click on Tim then we go to Tim's profile we can't do anything we can't change the image we can't edit profile from you let's leave a little comment cool comment send yeah this is that's it it's done it's finished oh wait let's just delete a post first so I'll delete this bottom one this coffee cup one this is a test post bro why don't we do this when we open the database and this is a test post Pro is number one let's add a comment to it so let's say anything slap it on let's put another one and one more send so we have three comments on there we can scroll through the bottom as well like that right let's go and have a look at our database refresh go in comments and we can see we got those three comments at the end from post ID one and that makes sense because that was the first post we made so now if we delete this we should delete this post and all the comments with it so let's press delete nothing happened just inspect right let's try it again delete nothing like nothing happens oh we probably haven't hooked it up let's go into the code and where is that it's in the host dot view of the side panel get some room and where's the link button button delete yeah okay just on this button we need to add an act click like that which is AD click delete post post ID and you can see we've got this delete post function right there let's save it right now let's go back close this inspect refresh just in case and I scroll down and let's click and it's gone awesome let's go on our database now if I refresh this all of these comments should disappear let's refresh they're gone beautiful so our Cascade works as well post yeah it's gone let's quickly go into the public file and check in the images to make sure that image was deleted what is this user image or poster image that's a user image and that's a post image it's being deleted as well there we go we finished

Channel: John Weeks Dev

Views: 10,219

Keywords: vue 3, vue js, vue, tailwind css, tailwind, vue js tutorial, uber clone, whatsapp clone, javascript, laravel 9, 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, vue advanced cropper, vue pinia, facebook clone

Id: NC1sU-LTrOk

Length: 133min 7sec (7987 seconds)

Published: Mon Feb 13 2023