🔴 Let's build Facebook 2.0 with REACT.JS! (Next.js, Tailwind CSS, Image Uploading, Facebook Login)

what's going on guys welcome to the stream all right no tech issue is gonna defeat us today all right smash that thumbs up button we're gonna beat all of these tech issues we're gonna get through it it does not matter okay guys all right we are building today facebook 2.0 with next.js with terroin with next authentication with facebook login are you guys excited let's go papa fam check this out guys we're going to be building this beautiful application right this is a fully responsive build today right we're going to have all the functionality that you're after it's going to have a look at this nice little scroll right the top header is sticking to the page go ahead and smash the thumbs up if you're excited for this guys i know we face loads of like we thought about to get to this point right but we're gonna win this battle the papa fam never fails okay we're not gonna stop for nothing today all right guys check this out so you can post a message over here so let's go ahead and type in what's up papa fam what's up papa fam and then you can go ahead and hit photo video and this is gonna allow you to select any image that you want okay and then it's gonna pop up here as soon as i hit enter boom you'll get it come up into your feed right it's a real-time feed connected to firestore right you can see lazy loaded images right everything is working as we expect it now let's go ahead and check out the responsive functionality okay check this out guys if i go ahead and resize this now pay close attention all right watch as the different elements on the page start to respond to the screen slides right look at that look at the left side oh that's just beautiful right guys we don't let any of this you know tech headache stop us but look how beautiful that is right so look whether we're on desktop whether you're on mobile everything today is gonna get built and covered and i'm gonna break it down for you so it's gonna be super simple right this does have facebook authentication behind it let's go ahead and log out you can see when you reach sunnysanga.com you're going to get to the facebook login page once you click login with facebook i already have an account but you guys can go ahead and check it out as soon as i hit sign in with facebook it knows that i'm logged into facebook and it's gonna sign me in and then you're gonna see my details on the screen boom it pulled my picture pulled my name everything that we need is now available to use look at this guys we've even got animations over here so this is incredibly incredible this is just this this is crazy builder i had a lot of fun with this one and uh i just want to go ahead and say that thank you for sticking with the papa fam and as a result of you guys always being loyal always kind of punching through any tech issues we have i'm gonna be delivering a five day secret challenge okay the first link in the description guys is your key right so reserve your spot right because there's not it's a limited number of spots in this secret challenge okay guys this is the sign up page hit that link in the description tell me you are reserved tell me in the comments right now and say i have my spot in this five day secret challenge okay it literally starts in less than four days okay it's gonna be ten thousand pounds worth of prizes it's gonna be one hell of a party guys so i want all of you to be there it's completely free and i'm gonna be breaking down how you can take your skills land clients freelancing gigs everything you've always been after in the developer field i'm going to be pushing heavy we're working overtime to do this okay so i can see loads of people reserving their spots we can see shireta says she reserved the spot vikram there we go he reserves the spot to niche in poison code there we go uh abhishek says you're slow down you're going anywhere don't worry guys i'll pump this energy back up right um nerud it says i'm already registered let's go that's what i'm talking about guys that's the energy that i'm after today right so this is what we're building you know how it is let's go ahead and jump into this build today guys let's do this we're going to be using next.js in this build okay so the first thing we want to do head into your directory that you want to work in so i like to use documents for slash builds i recommend you keep your directory structure very clean i'm gonna and then we're gonna do mpx create react oh no we're not doing react we're gonna create next app today okay and then what we're going to do is give it an appropriate name so i'm going to say youtube clone uh oh no sorry it's not youtube it's um facebook clone and i'm going to do dash youtube because it's for youtube on my computer so make it very simple for you to find and locate okay that will go ahead and create a starter template for me in the meantime we're gonna be using something called tailwind css today now this is very close to the css we know and love okay guys so this isn't gonna you know this isn't like bootstrap where yes it makes a website responsive but you kind of have to learn this whole new responsive way that bootstrap works tailwind on the other hand if you already know a bit of css you're going to be best friends with taiwan okay so they introduced something called utility classes and i'm going to be using that in today's build to make it as responsive as you just saw now it's incredibly easy to set up we're going to go ahead and do it right now check this out guys all right look at that guys i love how everyone's registered already we just broke 100 likes on the video after all the tech issues come on guys let's pump that number up right let's get that number back to the hundreds and let's get show everyone what the popper farm's about let's go guys so right now what we're going to do is we're going to go ahead and do cd facebook clone dash yt and then we're going to do code dot this is going to pull up our code editor so vs code should get up and running in just a sec while it's loading guys i'm going to go ahead and type in tailwind css.com for slash docs right so here we go here's our lovely vs code our trusted tool right so today's a heavy one guys i'm not going to lie to you i want your full energy i want coffee whatever you need to do to make this happen get this thing get that energy back right we're not gonna quit until this thing is built even if it takes me four hours i will stay here until this thing is built right i am not going to sleep today until this app is built right so let's go ahead and click on pages click on index.js and then this is the home page so whenever you're using next.js right your basically your website is going to be structured in a way so it correlates to your the pages your users see so for example the home page is called index.js and then if we add forward slash search it would simply be search.js okay so this is called file based routing right so typically we use something called react router but now we're going to be using nextgs inbuilt file based routing okay so this is our entry point for the application so this is where we're going to typically go ahead and start off so i'm going to do a bit of cleanup but before we do that i'm going to get set up with tailwind css right so i'm going to go ahead and firstly run this application so you can see what you get in the template and uh let's go ahead and change up the songs a bit there you go nice i like this song all right so now i'm going to go ahead and do yarn run dev all right this will go ahead and spin up the template that we just started all right so this starts up on a localhost 3000 and uh what we should be able to see is it pop up in just a second over here right so next yes slightly different to what we're used to with curry reactor but if you've done any of my next gs builds previously then you know how it is guys it says extremely powerful tool it allows you to do amazing incredibly powerful things like server side rendering okay and image optimization is going to be your best friend if you want to get high on those page rankings on youtube on google right because it boosts your seo right so incredibly incredibly powerful stuff today right so you can see here next yes our servers up and running it's built our homepage and we should be able to see this in just a second so i'm going to go ahead and do localhost 3000 and this is the template that you get when you start it off okay test account says hats off to your dedication thank you so much dude i appreciate you man all right so this is what we do let's go ahead and bump it up to 200 likes guys come on i know we can get the momentum back i know we can keep on pushing this thing right yes we're starting exactly from the beginning and we're going to keep on going right so now i'm going to go ahead and you see here it says create next app right so something i love about nextgs is it has this next head component okay now this allows us to inject code into the head of the html document so i'm going to delete this stuff for now but the title is the interesting part because here i can go ahead and say facebook and then if i go ahead and save you're gonna see over here that this will change in a sec to facebook that's awesome right that's very powerful allows us to inject our code into the head of the um the html document wherever we are right so as you can see there's a bunch of styling here i don't want any of it i want a blank slate so i'm going to grab everything from the main down right and the footer and i'm going to delete it all right i'm going to do h1 and you guys can see and i tried to record this video you know by myself without you guys but i just couldn't do it guys i need you guys behind me i need the pop-up i need the energy that everyone has and that's what the whole family is about man let's build facebook awesome and this is going to be an h1 tag right hit save and then we should see this look extremely simple now okay the next thing i want to do is i'm going to get rid of the pre-default styling so we're going to get rid of that i'm going to get rid of this code and get rid of the image component okay hit save nice there we go the final thing i want to do is you can see that the styles are starting to look a bit bare minimal okay i'm gonna go over to my styles okay i'm to click on home.module.css and i'm going to click on move to trash okay the next one is globals.css so here i want to go ahead and do con command a delete everything i don't want anything in this project okay and this allows us to set things up quite easily with tailwind so now we have a nice starting point for introducing tailwind let's click on tailwind uh start learning and then when you see integration guys so you can see a bunch of stuff over here okay you see next js create react app and all this goodness um i will zoom in in just a sec right and then we're gonna click on next js okay now here it says setting up tail in css so i'm gonna go ahead and install the dependencies now i like to use yarn so instead of using npm i'm going to go ahead and use yarn today okay so as you can see i'm not sure what that's about but let's go ahead and create a new um terminal and then here i'm going to go ahead and say yarn run oh yawn add sorry this and it's going to be dash d because it's a developer dependency okay hit enter and i'm gonna go ahead and then delete my package lock because i'm using yarn okay so if you're using npm it's package lock if you use yarn it's yarn.lock okay so something important to know about okay um there we go eyeball designing developer thanks dude do not spam otherwise you're getting blocked okay um jay go ahead and moderate the chat dude there we go right so and now what we're going to do is we're going to go ahead and do the next step which is create your configuration files so once this is installed the dependency we can then proceed and carry on again now guys 160 likes let's push that to 200 there's 200 people watching right now so i believe we can do this right there we go subramane sorry subramanya just got a internship because of me right that that's what the papa fam's about thank you for your donation dude really really thank you so much is there a advantage to using yarn over npm yes i mean in my opinion it's a lot cleaner right so we just done it right we just got this up and running and then we're gonna do mpx tailwind init uh tailwind css and then dash b this will introduce two configuration files into the project okay what we need to do this will help basically tailwind a function inside of nextgs the most important part here is telling tailwind the important folders where it needs to do its cleanup so where it needs to purge the unused css or basically check for the utility classes that we're going to end up using okay so what i'm going to do here is go ahead and copy this and go over to my file directory tailwind.config.js and i'm going to go ahead and paste it inside of this right here okay and then the next step is we're going to use the latest and greatest and it's basically called jit just in time compiler okay so this is a really powerful feature of tailwind that they've just released which is extremely important uh that i think you should be using right and it introduces a lot of power i'm not gonna go too far into what just in time compiler does but if you check out their website they explain it great in a really nice little video i'm gonna change the music a bit there we go if any of you og's know you know where this is coming from so go ahead and hit that thumbs up button and we have the proper farm now who are absolutely crushing right so guys let's keep going all right so i'm going to go ahead and close this and then the next thing i want to do is that first terminal i had open because we've just gone ahead and changed a bunch of stuff i now need to rerun my server okay but before i do that i need to go ahead and include tailwind in my css so i'm going to go over to my global so where has it gone uh styles globals.css css and then basically just paste it there we go all right so here you can see we've got all of our sort of stars in place now what you're going to notice is i'm going to restart this server right and then what it will do is firstly we'll get a message about the just in time compiler that's okay remember it's a new feature which means it's still in the experimental phase it's all good guys the first time i used firebase it was an experimental phase now look where we are okay so it's a very powerful function uh feature and here you can see you have enabled the jrt engine which is currently in preview that's all good guys don't worry we're gonna we're gonna use it anyway and then you're gonna see that this where it says let's build facebook it's gonna lose its styling in just a sec okay it's about to lose its styling in just a second and the reason being is because tailwind starts off with a sort of uh blank canvas approach because what they want is they want a blank canvas that way when you're coding you decide irrelevant if you're using an h1 h2h3 you're the one who decides how an element looks and to me that's actually pretty genius right i personally agree with this approach i think you should always kind of you know have start from a blank slate and kind of progress further as you kind of get uh as you kind of want to style your app otherwise you're constantly fighting with some stars okay so let's go ahead and check out how we're going to build this so the first thing i want to do guys is i actually want to go ahead and get this top portion built right so this is the header component right and then we essentially have all of the rest of the application okay so this is basically the main portion of the uh the build so the header is the top part and then we have these three sort of sub components underneath this one right here is going to be the sidebar this right here is the feed and this right here is our widgets section is what i'm calling it okay and um there you go oh i like the song right and then we're gonna go ahead and uh build this out so what i like to do whenever i'm starting out a build just so i know what i'm doing next right is do a little bit of marking so here i'm gonna mark out what i'm gonna do so i'm gonna build a header first and then i'm gonna have the main section of the app and inside the main section i'm going to have a sidebar i'm going to have a feed and i'm going to have a widget section okay so this will be the overall structure of the application now i don't need the h1 which says i am facebook or let's build facebook sorry i just need to start building my header so the first step that we're going to do is we're going to head open uh head over to our file directory and instead of pages i'm going to go ahead and create a folder called components okay now this is where all the reusable components will sit remember the pages are going to be the specific pages across our website the components are the reusable components that we're going to be using okay so here i'm going to go ahead and say header dot js now we are using react snippets so you need to install the es7 react redux extension snippets extension and it's incredible because it allows you to do really cool stuff like this right underscore rfce and that's a lovely little trick that you can do when you're using it now let's go ahead and actually pull this in so as we all know when we're using react you can pull in your components so let's go ahead and pop this in here so we got the header there we go and then i'm going to go ahead and import my header like such right so we can go ahead and remove my marker now if i code inside of my header so for example if i was to say h1 header we should be able to see this put on the page nice okay so this is exactly what we're after right now and uh we've got a few questions um you should put the sidebar and widgets outside the main tag um so we can but in this case i'm gonna keep the structure very simple i'm gonna have the header and then the rest of the main body of the application okay so that's how i like to sort of structure this one um but what i'm gonna do guys i'm gonna actually switch on the papa fam playlist right now so that way you guys can get you know you can get inclined to um what we offer over at the proper fam right so you guys can get full access to this playlist if you do want to it's completely free all you can do is check out the link in the description and everything will go ahead and get sorted for you so you just need to sign up to the newsletter and we'll send you the papa fam playlist so let's go ahead and chuck that on right now guys you ready for this i love this this is actually one of my personal sort of coding playlists so i actually listen to this when i'm coding and uh it gets me in that zone right so now let's go ahead let's go ahead and get very serious now guys right so i know we had some technical issues i know we had some headaches um but we're not gonna let this be us right we're gonna get to this focused state and build this out right now okay thank you so much sun meat for that donation appreciate you dude right we just hit over 200 likes as well right let's aim for 300 now guys smash the thumbs up button we were at 700 before the stream went down so let's go ahead and get those numbers back up okay so we're gonna build the header first now the header how do i get this done let's go ahead and break this down and uh get this thing working the way we need to all right so the first thing in the header is we're going to have three sections inside of our header component okay so in fact what i might actually do is this seems to be completely slimy out but if we if the music kind of kills us we might have to end the music right but we're gonna have three sections inside of our head all right we've got the header left we've got the header center and then the header right okay so the first thing i want to do is go ahead and actually fix this out so i'm actually going to go ahead and guys i'm going to cut the music because it's kind of glitching out the computer a bit all right we've got we've got some music we can go ahead and use this one that's all good okay so we've got the header left had a center header right okay so the first thing we want to do is mark this up in case we're going to have our header left and then we're going to have the center let's go ahead and say center and then we're going to have the right okay this looks good everything looks nice and clean um so now what we're gonna do is we've got 327 people watching thank you so much guys for tuning back in i appreciate all of you god damn it this is what it's about honestly it gets my energy back up there thank you so much guys right um so here we do this we're gonna go ahead and say for the left section right what do we have we have this facebook icon plus we have this over here now this is a custom input photo we're using hero icons to get all of the icons in today's application so we're gonna have a little icon here followed by an input field and we're gonna style it with some tailwind css okay so i'm gonna move fairly quick now i'm gonna go ahead and say we're gonna have a div and inside of this div i'm going to use something called an image component now this is not the normal img image component this is a special next image component and what this does it guys is it actually optimizes the image so that it loads a lot quicker it does lazy loading which means if it's not on the screen it will not be shown until it's scrolled upon uh and it also delivers a webp version which is a highly compressed new format so if you can use the image component from xjs 100 user okay it's going to make your app incredibly quick right it's gonna and it's a very good thing to be doing okay now all the links that i'm using today i've actually helped you out i've made them shorter links so you can pretty much go ahead and copy them a lot easier guys so this is going to be the facebook logo you can go ahead and copy that if you would like to and we're going to set a width here of 40 and a height of 40. right so we're going to say a width of 40 and a height of 40 as well width and height of 40. nice and then we're going to go ahead and say the layout is fixed now these are just some predefined things that attributes which exist for the image component okay nice cool now we're going to get an error when this happens right so i'm pretty sure now wait for it wait for it some error is going to come out and scream us and then what it's going to say is the host name is not has not been added to the configured list of host names inside of nextconfig.js now what this means very simply is that in xjs if we're going to use the image component we have to actually tell um an xjs what sort of domains that we're allowing the images to come from and that's just a security procedure right so it allows our app to be a bit more secure and allows next year to kind of optimize what it's doing so what we're going to do is add a next config and inside of our next config all we're going to do is pop in the following right so i'm going to add a few domains in here because what we're going to try and do here is actually white list a few different domains that we're going to get pictures from today so some of them that we're going to use is links.proper react.com this is actually the facebook sort of uh where facebook sort of store a lot of their pictures so this is going to be one of the white listed areas and then also firebase storage okay so we are going to be using firebase storage today right so we are going to be covering um i didn't even mention we're going to be covering firebase firestore so real-time database functionality and we're also going to be using for the firebase storage sdk right and the file picker api so everything is going to be really really powerful when we kind of combine it together but we're going to white list all of these directories so that we can pull images from them in the future if we need to now when you do change the configuration you're going to see here it's going to say found a change in nextconfig.js all right so when you get this error i want you to go ahead and you've got to shut the server down and restart it it's as simple as that right all you have to do is shut it down restart the server and then you can go ahead and get it up and running okay nice initiate says thank you sunny for posit uh posting amazing clouds explaining every point i'm new to react and all your videos help me a lot to understand and react just creating different applications thank you so much dude i honestly really appreciate comments like that it helps me continue to explain things sometimes i think am i doing it too slow but thank you so much dude i appreciate you right so we can see that the server has now restarted and we see our beautiful facebook image loaded onto the screen right amazing stuff this is lazy loaded by the way so it loads after the page actually pops onto the uh after the rest of the page is loaded so what we're going to do now is we're simply going to go ahead and let's check out the header quickly so inside of our header what we're going to do is we're going to have the next section which is the input this is a custom input right so we're going to have inside of this i'm going to have another div and inside of this div i'm going to have an icon and then an input field remember so an icon and then an input field so the input field that we the input was very simple right we can just simply do an input field and uh we're gonna have a placeholder placeholder and this placeholder simply says search facebook okay so this will say search facebook all right guys we are almost at 300 likes we have 300 people watching that means somebody hasn't smashed that thumbs up button go ahead and smash it if you're enjoying this content right now all right so we're going to go ahead now you can see we've got this nice little input field now i want to kind of combine this with an icon so what we're going to be using today in today's build is actually called hero icons so head over to heroicons.com and you're gonna see this right now this is actually built by the guys over at tailwind css and if you need an icon you just simply type it in and you can see you've got a solid variant or you've got the outline variant so you can see here there's differences between the two so we're going to go ahead and install this into the application how we do that is simple we go ahead and say mpm install hero icons react but in my case i'm using yarn so what i'm going to do is do command j and then i'm going to go ahead and pop open my second terminal and i'm simply going to do yarn add hero icons react whoa thank you so much shagan sharma it says love you sonny guys i love you all too i appreciate your support thank you so much we just broke 300 likes yes guys that's what i'm talking about that's what i'm saying even when it bloody even when the tech issue is here we still crunch through i i absolutely like cannot explain how grateful i am for everyone thank you guys so much that's incredible all right i'm not even sure what that what that little error is but but let's ignore it right ctrl c let's cut this off and i'm going to go ahead and restart my server wait for this wait for it wait for it and where's it going i'm just going to do johann one devin hopefully we'll wait for that to kind of kick start in a sec right so why this is happening let's go ahead and check how we use it so all you need to do is simply import the icon and you can go ahead and pop it in now what's amazing is that the class names you can pretty much use tell in css these are utility uh classes that come from tailwind css and they work perfectly well with this component so it's a really nice fit right so what we're going to have inside of our header component is some of those icons right so i'm going to go ahead and pull in a bunch of icons right now all right so i'm going to pull in quite a few different icons and these are going to be used throughout the header themselves right so we're going to have some from the solid variant and some from the outline variant okay let's go ahead and do that right now so i'm going to go ahead and pop this in over here oh there we go paste so you can see right now we've done a bunch of imports from the solid variant bunch of imports from the outline variant as well right included in that is the search icon okay so while that's happening what we're gonna do is oh we've got the left section over here we're gonna jump down into our left section and uh let me go ahead and let me change the music a bit there we go nice right so we've got this here now what we're going to do is go ahead and pop in the search icon okay so we're going to say search icon your energy is epic thank you so much all right we're going to open this up now we've got our nice beautiful page back now if i go ahead and pop in the search icon and i go ahead and style this out so i'm going to say class name right then i'm going to say inside the class name what do we want to be right so in this case what i'm going to say is and guys what i'm actually going to do is i'm actually going to close my my other browser so we free up some of the cpu and i want you guys to tell me when we hit 400 likes and when we hit 500 likes on when we hit 600 all right so i want you guys to be the eyes and ears when we're doing this right let's go ahead and do this so i'm going to go ahead and pop this open so we've got a class name and then here what i'm going to do is simply go ahead and say a height of six all right so now what we should see is a lovely little um search icon glass container pop-up so let's go ahead and check on our server right now and we can see it's built the page out as we needed to and there we go right so it's pretty big right so we need to make that a lot smaller right now in order to get this to work the way we want it right so the first thing we actually need to do is where we have this surrounding div i'm actually going to go ahead and apply some stars to this now the first thing i'm going to do is i'm going to go ahead and say that this is a flex right so it's going to be flexed out and the reason why this is going to be flex is because it's going to i want it to be next to the input field okay so i want these two things to be next to each other as opposed to one in front of the other right and then the surrounding container we're going to go ahead and apply some stars here i want this to be a flex box and i want the items to be placed in the center now this is going to go ahead and apply some here um some tailwind rules into the mix okay so we're gonna have some nice little tailwind rules being applied now and uh let's just double check something right now because we don't seem to be getting our our height being applied here right now so let's have a look what's going on okay so everything seems to be okay on this end let's just double check let's do a little bit of a debug right now so we've got the search icon we've got a height let me just check this out we've got a height and width and let's just try and change even the text color and let's see what's happening here guys let's go ahead and say oh seems to be getting a bit slow valencia let me go ahead and actually i'm wondering if i can okay let's change this to a different set there we go okay cool so it doesn't seem to be applying the styles okay so it doesn't seem to be applying the styles that we're looking for um and what we need to actually get working in that case is let me go ahead and hit command j and let's actually restart our server right so we are using just in time compiler which means that it should have been hidden even even normal tailwind this should have been working uh if we go ahead and hit refresh we should see ourselves dead okay that's good we want to restart the server from scratch and get it working nicely now what we can do in the meantime is continue to build out the applications we've got our image nice we've got flexbox with the items central to each other we're gonna have this one which is flexed out now what i can do is i don't want this to touch the image so i can say margin left and i can say it to right now this is really nice because you can just constantly apply these uh sort of utility classes here and it goes ahead and stacks up on each other okay so we're going to hit items center like so nice and then here i'm going to say rounded 4 because i want this to be a nice rounded div all right let's go ahead and check if this is nice and up and running okay so it doesn't seem to be pulling in let's go ahead and debug this a little bit more guys so let's go ahead and check out our index.js and this seems to be all good let's check out our app.js and we seem to be pulling in the globals and if we go to our global.css we seem to be pulling in our base utilities okay so everything seems to be working it's just a case of actually getting it to appear the way we want so let's go into our header and let's actually see if any of our tailwind is being applied the way that we expected it to alright so here if we say class name if i wanted to make this text a little bit bigger let's go ahead and say text let's just say 6xl right does this get applied if it doesn't then it means our tailwind configuration is not correct okay so the tailwind config is is not correct let's go ahead and debug that quickly because we're going to need that to work perfectly before we can continue on right let's go ahead and hit on install tailwind and let's double check what's going on here guys so we've got the purge correctly set up we've got jrt just in time compiler everything working nicely we have our post css configuration let's double check if we've got that nice everything seems to be good in that directory we have installed everything although what i will do is do another install just to be sure okay so just to be on the safe side just to make sure that we are not you know we're not randomly doing a bunch of stuff without actually using it let's just make sure that we've successfully installed it into the correct directory so here i'm going to go into yarn add yarn add there we go and let's do an install and it could oh it looks like we didn't install it guys right so super interesting so always double check your dependencies okay so always double check your dependencies in this case we just saved the correct dependencies back in and now we should be good to go okay so now let's go ahead and double check what's going on and now we need to do yarn run dev so that was most likely the issue happens to the best of us guys okay now what we're going to do is i'm just going to pull up a little bit of a screen so i can actually see what you guys are typing to me because i haven't got it on the screen or right now okay there we go seems to be speeding up a little bit nice awesome stuff okay we've got 368 likes guys let's push on to let's get that number up and i think we can hit the beautiful the beautiful 400 okay now we're back so let's check out what's going on interesting enough it's still not applying it oh it's being stubborn guys all right so we're in the facebook clone youtube everything seems to be fine we've got the tailwind configuration let's double check this out we've got our purge correctly set up and nice everything is working the way we want it now interesting when we when we run yarn dev we don't seem to be getting our tailwind error message pop up okay so this is not what we want we do want that tailwind error message to pop up right so in this case we have a slight error somewhere so what we can do is let's go ahead and first double check our purge configuration and what i'm actually going to do to make this a little bit easier is i'm going to copy in a configuration of my own right so i'm going to go ahead and chuck this in like so and we're not going to use this just yet okay hit save and then what i'm going to do is go over to my post css config we're all good next config is looking good and then we have inside of our globals we import nice okay so now let's do yarn run dev we'll get through this guys do not worry [Music] all right we're almost at 400 likes guys smash that thumbs up if you want to see us push past that boundary right nice you have enabled the jit engine which is currently in preview okay awesome so you see how before we did not see this error message so most likely a typo and hopefully we should be good to go once this page loads up right [Music] wait for it guys there we go nice now we have our styles being applied this is what i'm talking about guys so it's all worth it right it's worth pushing through sometimes and we can get past those trouble points right so what we're gonna do now is we're gonna go ahead and get this working out right so let's go ahead and pick up the speed again right so now what we're going to do is i'm going to change this to get rid of the header we don't need that header anymore we've got the image working the way we needed it to and then i'm going to go ahead and get the let me go ahead and pop open my header we're going to go ahead and pop in the styling that we're after okay so what i'm going to say is i'm going i want a background to be gray right so if i want the background to be gray it's very easy until in css we just say bg gray 100 okay and then i'm gonna add a padding of two all around as soon as i do that check this out right so it's gonna go ahead and pop in that style do you see how nice that is guys right and then what i can do is i can go ahead and apply a transparent background so let's go ahead and go to our input and here what i want to do is i'm going to style this a bit so i'm going to say class name equals and then i'm going to say um we want this to be a flex it's gonna be a margin left of two because i don't want it to be touching the icon on the left and i want this to be central so everything's centered and then i want it to be bg transparent right so this is going to be a transparent background as soon as i hit save now can you guys see how it's starting to look a bit nicer right sides look a lot nicer now so it's look a lot more like what we saw previously right now you can change the placeholder text very simply by doing so you all you need to do and you can also see when i click this right i get this little square blue sort of outline i don't want that right i really don't want that kind of you know blue outline so what i can do here is i can say outline none placeholder gray 500 and then hit save on that right so let's go ahead and pop this in right here nice hit save and there you go so now what we should see in just a sec is the outline disappeared so that looks really nice that actually looks very clean right now what we want to do is if i want to apply the uh sort of same color trick to that search right so i want that search thing to look a bit gray so it's kind of on this level right then what we're going to do is i just simply need to go to my search icon class and i just add in the text and here i just say text gray 600. remember i said it comes in shades right so here we have text grade 600 and notice how this shade will now switch to a gray there we go it's very subtle but that is now a gray okay so i get a few questions um this is awesome stuff guys love the sort of positivity that you guys are dropping in and i think we just popped over 400 nice guys that's what i'm talking about 400 in the house right that is awesome stuff guys thank you so much just keep on moving right so we've got the top left section kind of handled now so i want to handle this middle section okay so for the middle section it's actually pretty cool what we're going to do right now so i'm going to go ahead and apply a div so i'm going to chuck in the div and then i'm going to have again a another div inside of it and now i'll explain what we're doing here afterwards but the first div i'm going to apply a class right and the classes here is i want this to be a flexbox i want to justify all the items in the center right because i want all those different icons to be centrally aligned and then i want this center part to grow okay now what does that mean it means that this center point this center sort of box should take up the most space so it grows if it's able to right if there's extra space i want it to grow right oh nice thank you thank you so much for the donation hey saying just love your work i'm also a reactive i'm kind of weak on redox just went to uh we'll be using redux in this development redox is not being used today no but we will be most likely maybe using it in the secret challenge so first thing in the description sign up guys it's going to be a hell of a lot of fun all right so we have this bit set up on the top left now the next thing we're going to do is we're going to actually go ahead and style this inner div okay so this inner div right here we're going to do this one is actually it's pretty cool what we're going to do here okay so we're actually going to create a header icon component so all of these individual ones are going to be reusable components okay so i'm going to go ahead and say a header icon and this one as a prop so in react we can pass a component props so that way we can reuse it okay thank you yappie kang i appreciate that dude smash the like button if you guys haven't already and let's keep going guys so i'm gonna go ahead and pass in an actual icon to each of these right so remember we've done a bunch of imports at the top before right so what i'm actually gonna do here is i'm actually gonna sort of pop in a bunch of icons the first one i'm gonna say home icon okay and then let's go ahead and build this and uh and then we'll see how this looks okay so i'm gonna go ahead and actually build out the header icon right now so i'm gonna open up components header icon dot js hit save this is looking good underscore rfce to pull this in nice okay now once this is up i'm gonna go ahead and say this took some props right the props come through in here and react but we can do es6 d structuring to pull out the icon okay now with the icon how do we go ahead and make this look like for example this icon right here i want to get that finished right so how do i do that let me go ahead and firstly i want to zoom out a bit because i think i'm way too zoomed in right now um okay so i'm going to go ahead and for this icon we're going to go ahead and render the icon out now because it's capitalized right because i'm passing in an entire component we can simply actually render the icon as such right but that's only because it's a capital letter right so if it's not then you have to be a bit careful the second thing i'm going to do is i'm going to give it some class names right so the first thing i want to do is i'm going to make this text central so i actually want to show you guys this in practice first so let's actually render the icon out first so i'm going to go ahead and actually import this right now um okay so our nice little trick's not working which is fine we have to sometimes do things manually it's all good it's all good right um so i'm going to go to the top and then i'm going to go into my header and then here we're going to go ahead and get guys today we're at a little bit of a slower pace because the computer is battling it it is bad it's having a battle here guys but i think we're good with the pace okay i think we can do this so i'm going to go ahead and get the header icon and then save okay now what we should see here now is a header icon pop onto the screen okay so if i go into my header icon over here and then i go ahead and pop this in sudash thank you so much you missed my previous super chat please read that i can't go back and read them i'm afraid so i'm really sorry about that dude but once it's gone it's really hard for me to do it especially in the middle of a build right so i'm going to class name and then i'm going to say h5 for height so let's go ahead and pop that in and we should see there we go guys look at that the header awesome all right so what i'm actually going to do is i'm going to go ahead and copy and paste this a bunch of times right but what i'm going to do instead is pass in a different right so i'm going to pass in a different header icon icon prop okay so what i'm going to do here is i'm going to pass in the following so we're going to have the header icons and here we're going to have home flag play shopping cart and user group okay so i'm going to hit save on that and then we can see all of them jump in here okay so now we're going to transform that we're going to transform that into this and you're probably wondering how the hell are we going to do that and it's going to be fun and we're going to i'm going to show you how we do it step by step okay so in header icon over here the first thing we're gonna do is we're gonna say this should be right so firstly the container let's sort this container right here this container right here is the one that's holding all the elements so it needs to be correct in how it does it right so what i'm going to do here is i'm first going to say class name last name and this class name is going to be flex so it's going to be flex and we're going to say and i love this trick right now guys check this out as soon as i do flex it will apply a flex box so everything will go into a flex sort of a row okay by default that's how we know and love flexbox but what if i want a like a sort of space between each component then all i do is i do space dash x on the x axis i want a space of six and here you can see it renders out to this right so if i go ahead and do this as soon as i hit save now check out this little gap that it gives between those components that's awesome right really really nice now what i can also do is i can say okay when we get a bit smaller on the smaller screens i want to change that right so on the bigger screen it's going to be a space of six and then when it hits a smaller screen i'm going to do no so sorry on the smallest screen because it's mobile first it's gonna be uh space of six and then on as it kind of grows on it's gonna say space x of two okay and there's a reason why we do this it will look really nice afterwards okay so now we have this looking pretty pretty nice um so what i'm going to do now is actually style out the each individual header icon component themselves right so once i'm inside of here right so we have this little header icon so first thing i'm going to do is go ahead and check in let's do class name and then i'm going to say let's do um oh nice thank you so much i got a job of 600 cares of fresh credits to you right i think that might be rupees unless that's if that's in dollars wow holy that's that's incredible if thousand dollars right i think we're nearly at 500 by the way let's go ahead and check out wow dude we're nearly at 500 likes let's go all right so now at the top what we're going to do is i'm going to say i want this to be a cursor pointer right now so when i hover over it right now it's like a boring cursor right so here i want to say cursor pointer so i'm going to say cursor dash pointer okay and then i'm going to go ahead and say i want this to be um we actually want to give this kind of a nice color behind the the top right so right now you know when i hover over them it gets a nice kind of background color right so the first thing is we need to give it some padding okay so the padding i want to give it i only wanted to apply padding once we hit the medium break point so to do that i just say md right because on small devices i don't want this padding right so i'm going to do md and when i i'm going to say pixel like sort of padding on the x-axis of 10 okay so now we should be able to see a padding on 10 be applied to the x-axis okay let's go ahead and make this a bit bigger there we go right so now we've got the padding being applied and then what we're going to do is we're going to go ahead and say on the small devices okay i want to do a height of 14 right so i'm going to kind of you know this is going to be responsive remember right so on the small devices this is going to be a height of 14 okay so after the small it's going to be a bit bigger and i think right now that's a bit too big right now i've kind of messed that one up so it should be a um let's have a look right so first thing we do is i'm actually going to say flex let's go ahead and do oh sorry i've done it wrong this should be in the top right this should be over here my bad guys going to do this there we are nice and i'm going to say after small i'm going to give it a height of 14. okay and then what i'm going to do is say we've got a cursor pointer so now you can see a nice holo hover over it now when i hover over it okay when i hover so you can use this hover active state i only want to apply the hover state by the way on the medium so on the small mode mobile device it doesn't make sense to have a hover state i want to say apply a background grey right so bg grey 100 now if you check this out right so when i apply the hover now can you see that that looks really nice right so there's a little trick here i want to center each of these elements so what i do is i go to the parent i say flex and i say item center and what this will do is it will flex and it will sort of centralize these icons inside of this container so this is looking pretty good right now right then what i'm going to say is i'm going to do rounded excel because right now those borders were kind of you know they were kind of nasty right so now if you see boom we get these nice kind of rounded borders almost at 500 this is incredible stuff guys thank you so much just keep on pushing i think let me just double check we are at 475 with 311 people watching that's incredible thank you all right let's push the 500 smash the thumbs up button if you're enjoying it right so rounded xl the next thing i want to do right is i want to have when we click it i want to give it a little bit of a background border okay so you see when i click this i firstly when i hover the actual text changes to blue okay and when i click it it gets a little underline right so how do i get that happening right so here what i do is i go ahead and say active and i say active oops i say border bottom so border dash b of two okay and then we say active border oops border uh blue 500 nice and now what this will do is when i click it it will get a bit bigger now i'm gonna make my uh sort of second screen a little bit bigger so that way my eyes don't die of sort of looking too hard okay so now if i check this out and if i click you see that guys nice so when it's active for example when i click right check this out look we get the little additional sort of feature at the bottom so that looks really nice code design says sony are you going to use react router dom we don't need to in next yes because the page ring is actually built in uh to an xjs so it's actually really clean in that sense okay now when i hover over it how do i get that to work right so when i hover over this i want the inner element to change color so the way i do that is i apply something called a group right so what i'm saying is this whole div is a group and then when i sort of hover over so let's go ahead and go into the inner component i'm gonna say okay when i hover over the entire group right so group hover then what i want to do is change the text to be a blue and the shade is the 500 shade okay now look at this guys when i hover over it wait for a sec there you go see how nice that is right so you can see how the blue kind of pops in really sleek really clean right and we have the little clickable functionality as well okay now the next thing i'm going to do is i just want to change a little bit of the styling here okay so i'm going to apply a few things i'm going to say text center i'm going to give it a height of 7 which you've already done so let's go ahead and do text center right now so i'm going to say wait for it guys um okay so computer is so slow right now it's painful text center right and then we're gonna say on the small screens i don't want it to be a height of five oh sorry by default on the smaller screen a height of five once we break the small break point then i want it to become a height of seven because i want it to grow a little bit okay i want mx auto which means it's going to go ahead and actually sort of space itself accordingly okay and then i want to go ahead and say uh my we can leave now so now obviously this doesn't look right right this looks a bit this looks a bit weird right now okay thank you samuel i appreciate you dude so this looks weird right now okay the way the way that we fixed that is we go down and we check out what's happening over here now if we have a look at this right you see this just doesn't look right okay something's wrong here isn't it right something is definitely definitely wrong now if we check out the input if we add in something called a flex shrink danny james thank you for the five pound donation that's so kind of you thank you so much let's do a flex shrink here okay so flex shrink uh there we go nice all right and there's gonna be a reason for that in a sec reflection um it takes a while for the the page to actually save and load and everything to change and kick in so it's a little bit frustrating on that end but let's keep on going guys okay so now with that said what i'm going to do is i'm going to go ahead and maybe it's my page over here so what i'm going to do guys i'm actually going to go ahead and we've already seen this right and how it can be responsive so what i might do for now is go ahead and actually create a little screenshot of that and then what i'll do is i'll exit out of this for now okay maybe just to save a little bit of space there we go that's a little bit less intensive on the computer okay so oh no it's going to come up on my screen that's fine okay let's just cut let's just carry on okay so we've got the header that we're going to that we're trying to fix right so in the middle what we're going to do is we're going to go ahead and sort of organize this appropriately okay so for the header right i actually want to just style this right now so we can save ourselves a little bit headache okay so at the top i'm going to go to my divs oops i'm going to say class name equals and i want this to be sticky remember how the header was sticky right here if i say sticky and i want it to stick to the top so we say top of zero right then what i say is a z of 50 because when it goes over other elements i don't want it to kind of come under the elements as i scroll okay we need to give it a background of white so that way it sticks right otherwise it you would see through it right now the top element will be a flex element and this will push everything into lines okay there you go you see and then what we're going to say is items should be central so let's go ahead and do item center so items center and i'm going to give it a padding of 2 and then i'm gonna say on the larger screens so once we hit the larger breakpoint padding on the x axis additional of five okay and then underneath all of this the way that we give it a shadow is i simply say a shadow of m d and watch this guys shadow of md gives it a beautiful looking undershadow that's incredible right we just went from literally looking at something which wasn't that pretty to look at to a page which is actually pretty gorgeous right already right that looks amazing already now what i'm going to do is i'm going to pop this open on the screen because i do actually need that oh no don't don't don't don't ah sometimes max a little bit the struggle today the struggle all right let's go ahead and pull this over here right so what i'm gonna do is i'm gonna go ahead and get out of this full screen come on my mac needs to help me out today all right pop this into the next screen there we go bear with me guys and then at least when you're watching it back you'll be able to skip past this it's all good right we're gonna do localhost 3000 cool right actually this should be uh sunnysanga.com oops sunny sangha.com nice okay so this is looking pretty good thank you so much pankaj appreciate you dude right and i think we just broke 500 so let's keep on going guys it's going to be a long one i can tell it's going to be a haul today but we can do this we can keep on going oh we're two likes away from 500. let's go ahead and push it so whoever when we get there there we go valencia 500 likes amazing stuff thank you so much dude that's incredible even after all the sort of you know the fighting that we've done today with the the tech issues right so what i'm going to do now is i want to pop this over now for the header icon okay what i want to do is i want to apply the text to be by default gray okay so by default i want this to be gray so i want to say text is going to be gray 500 by default okay so you see now the text will go slightly gray okay awesome stuff now look at that that looks really clean all right now over here you can see it looks amazing right now if i want this to be active what i can do is i can pass a prop in called active and what we can do is we can say okay if it's active all right so what i'm actually going to do is i'm going to do some string interpolation so i'm going to introduce some backticks in the game and now i'm going to say okay after all of this right if active is true then i want to go ahead and introduce the class for text um let's go ahead and check in text blue of 500 okay now obviously no class got passed no prop got passed through with an active state so i want to make the first one the home one with an active state of true so this would mean that this one would then turn blue because we're going to be on the home page which makes a lot of sense right so we're going to go ahead and chuck that to be the blue one that's looking awesome guys so well done we just done the left section we did the center section and now we're moving on to the right section uh ar key says where to learn react you can go over to papariak.com and we teach uh all of the skills that you need to know to go ahead and understand everything that i'm doing today um so don't worry guys we're gonna have you covered over on that side we have a zero to four stack hero over there guys we have our free five day challenge first link in the description do not miss it uh and you're gonna be able to then react over on that side okay so let's go ahead and do the right section of the header right now okay so the right hand side of the section we're going to go ahead and introduce a div okay so we're going to introduce a div here and i'm going to pop in an image tag right so this is gonna be an image tag and for this image tag it's gonna take a bunch of different props now what we're gonna do here is firstly this will be the user's picture okay now we don't have the picture yet because we don't have the login page yet at all right so we're gonna do facebook login today like i mentioned right so we're actually gonna leave this picture up for now right so we are gonna have let's just say the profile pic will go there okay now the next thing i'm gonna do is have a p tag right oh nice someone actually donated appreciate you guys right so here i'm going to go ahead and say let's introduce a p tag and this will have the user's name okay so right now we don't have the user's name so i'm just going to type in sunnysanga but we will change this with the users login details soon okay so once we have that details what we're going to do is we're going to have a class name and this one will go ahead and i want this to be a semi boat so i'm going to say font is going to be semi-bold and i'm gonna give it a padding on the right of three because it's going to be next to an element and i don't want the uh i don't want any wrapping to occur right so what i say is i say white space no wrap okay now as soon as i hit save on this we should be able to see now look at this you see that guys it comes up on the right hand side now you can see look what happens right it kind of we get this weird kind of overflow issue going on this is because it's not responsive yet right so obviously we've we've already made the middle bit a tiny bit responsive but what about that input right we never made the input fully responsive so what i'm going to say is for the input i'm actually going to hide a few things here right so i'm going to hide the input when we are on a small screen so by default it's hidden so because remember it's mobile first where you apply your mobile styles first and then you go up so we're gonna do hidden then i'm gonna do when we break past the medium sort of screen size i'm gonna change it to an inline flex okay so if i hit save now look what happens guys right so if you can see now the minute we get small look how the input changed right the input disappeared right so that allows us a bit more breathing room to kind of work with right so that's looking pretty good already right so now what we're going to do is we're going to start out the rest of the right hand side so on the right hand side for this div i'm going to go ahead and do class name and then for this class name it's going to be flex with item center yes tab 9 actually came in clutch there and i'm going to say okay by default it won't have any spacing but on the small screen i do want it to have a sma after sorry the small screen breakpoint hits so on so on mobile it won't have any spacing as soon as it hits a small break point it's gonna have a spacing of two on the x-axis okay and i do want to justify this to the end so that it sticks to the end okay nice so now that that's done what we're going to do is we've already got the sunny sangha name tag i'm going to go ahead and pop in a few different uh icons okay now what i want to do right is i want to pop in these icons and i want to kind of introduce some relatively complicated longer class utility class like combinations but i don't want to have to kind of create another component for that right so what i can do is icon isn't actually a class name here right it doesn't actually apply to anything right so what i'm actually going to do is firstly i'm going to go ahead and oh nice we've got qatar in the house thank you so much for tuning in dude all right so right now we don't actually see any of the icons but that's because we haven't got this icon class right so what we can do is we can go over to our globals and this is a pretty cool thing about taylor and css right if you ever got a reusable sort of um let's say you'd like a long utility class you want to fully customize it right you can do that by doing this like you go into styles you go into globals and then what you do is you you basically add your own style you add your own utility classes so you go into the components layer right so you basically you know we're going to inject kind of our own custom utility class so the one i want to do is i'm going to create an icon class right that's how we do it we're going to create a new little kind of you know icon class and then i'm going to say okay at apply and then what i do here is i say apply and this i apply allows me to write tailwind in the config right so tailwind in the uh sort of global css file so what i do here is i say hidden right so it should be hidden on small screens and then only when i reach the extra large screen right so only when i kind of reach an extra large big screen do i want the additional right hand side uh features available so this is a big screen watch when i get smaller right you see how the little icons on the right disappeared that is because of this excel breakpoint okay so here we say excel and i'm going to say inline flex right so i wanted to become inline flex when we hit that break point okay so inline flex like so now i want to give this a padding of two i want to give it a height of 10 i want to give it a width of 10 and let's hit save now this is a little bit tricky to go ahead and show you because what we're going to have to have is you guys can see that these are the styles which make this happen so you can see already again quite a nice looking look and feel right so now what we're going to do is we've applied these and to finish this off i'm going to do a background gray let's do a bg gray of 200. i want this to be a rounded circle so we're going to say rounded four and then i'm going to say the the actual icon itself should be a gray but i want to be a little bit darker so we're going to say a 700 tone i want it to have a cursor pointer when i hover over it and you can see how crazy powerful this is right and then when i hover over the entire thing i actually want the background to go to a slightly lighter kind of gray okay now if i go ahead and make this full screen check this out guys look at that look how nice that is all right so it's incredibly powerful what we can do with um tailwind css right now i think let me go ahead and i think what we're doing right now is we actually have 550 likes that's incredible i just can't believe that after all the tech issues you guys pull through that's that's just insane guys thank you all right so you can see the header is now done right the header is looking great guys so well done if you're following along so far we actually have just completed the header portion of today's build right so now we're in good speed to move towards the sidebar okay so the sidebar is very interesting dynamic sort of responsive component you can see as the screen gets smaller the sidebar does react in a very nice way we lose the text we get the rest of the stuff available okay so how do we get this looking and doing what we needed to do right so the first thing i want to do is before i actually carry on with any of this let's go ahead and handle the facebook login portion of today's build okay so in order to get facebook login inside of your app right you have to do a few things right the first thing we have to do is install something called next auth okay so next thought is basically how we're going to handle authentication in today's application so we're going to click on next auth.js right and if you haven't used next off smash the thumbs up button okay because i'm going to teach you how to use it today and this allows you to actually get the session of the user on the server when you're doing a server render which is incredibly powerful okay so how do we do this and how do we even get this to work so to add next chairs off to a project create a file called uh square bracket dot dot xj and xsoft.js inside of pages api auth now if you're not aware when you're using nextgs not only do you get a website but remember because everything is being served from a server right what we actually get is a built-in api so this is actually like an express api right here right so if we check out hello you can see now if i actually go to let's go ahead and say go to forward slash api forward slash hello right this is actually a fully functional api so you can see this returns and then a response and everything so this is actually a fully functional like similar to how an express server works right but what we're going to do is use it for authentication okay so what i'm actually going to do here is i'm going to go over to my next instructions i'm going to create a auth sort of folder inside of here okay so inside of here i'm going to create an auth folder right now inside of this i'm going to create a file called next auth with the three dots and the square brackets okay now once i'm inside of here what we simply do is we go ahead and we simply add in let me go ahead and grab it quickly we add in the following block of code okay so i explain this in just a sec all right so this is pretty much gonna handle our facebook login for us okay so if i go ahead and hit save here right uh we can go ahead and we see we pull in from nextor we pull in from nextor's providers so i'm actually going to do is is go ahead and install next auth into our project so i'm going to go into my second uh thing and with a yarn add next auth okay this will go ahead and install next authentication into the application right so here what we're doing is you can actually add in several providers when you're doing this right so if you notice when we logged in the first time go ahead and check this out so this is actually a custom login page it just has a simple button but when we click login with facebook this is what next doors provides us so it's doing a dark template here because i have a dark theme if you had a light theme it'll be light but if i had multiple different providers here for example this is an array i could simply pass in providers.google pass the credentials in and then it would say sign in with google sign in with facebook and you get multiple different providers when you're doing this which is incredible okay so that's actually very very powerful when we're doing this right so now what we're going to do is we need these two things a client id and a client secret right so these two things are incredibly important when we're building an application okay so what we need to do now is go over to facebook right now i'm gonna go ahead and type in facebook and i'm pretty sure it's developer let me see if i can find it here we go right so you need to go over to developers.facebook.com forward slash apps right there you'll find an option to create an application right so in this case what i'm going to do is i'm going to go ahead and i've already actually created a clone right so i've created an app here called papa clone right so you're going to go ahead and create an application so in this case it could be like facebook clone or so forth and then you'll reach this screen right now once you're on this screen it's very important you follow these steps you click on add products and you click on facebook login so when you click on add products you're going to see the nice little page pop up wait for it guys you can see a nice little pop-up page come up and then in here where is it going uh here you go you're going to see this now there would be an option for a facebook login once you do that you'll get access to this panel over here so if i click on settings check this out guys we're going to get two things right we're going to get um where's it going wait for it i think it would be an actually synth settings over here right and then basic we need the two things we need an id and a secret there we go here it is guys we've got the id and we've got a secret okay so what you'd have to do here right is you go ahead and you do the following steps so this bit is very important that you take note so i'm going to show you how to use process environment variables as well so i need to do is i need to open up my folder structure go here and i'm going to create a dot m dot local file okay so dot m dot local and this means that i have like a local environment file and this is basically where you keep your safe sort of secure um environment variables okay now the structure that we want to have today is going to have three variables okay so there's gonna be three variables that we need to account for facebook client id where the client id goes here so this is gonna be this app id now this isn't really super secret so i don't have to hide this one so let me go ahead and pop this in there the facebook client secret this one is incredibly sort of you know you have to hide that one right otherwise everyone's gonna access it so that's actually this one right here and then you've got this over here right so http uh and then this is this is actually next off so this will be this one we're developing locally and we have to change that to be our website url for example sunnysanga.com when we deploy right that allows next authentication to do its magic when we're authenticating a user so now what i'm going to do is i'm going to go ahead and simply go ahead and replace this but i'm not going to show you guys the secret key okay so what i'm going to do right now is i'm actually going to go ahead and pop my beautiful face on so that you guys are going to see this i'm going to go ahead and add in my key so i'm pretty much going to go ahead and grab a key from here and then i'm going to go ahead and pop this into where it says the secure key and i'm actually going to go ahead and quickly grab my key right now and um oh man i think it's going to ask me something all right guys give me one second i just need to go ahead and quickly get this access to this uh this little bit of code right here so let me go ahead and grab it all right very insect and then once we get access to that right we can go ahead and get in to what we need to get right so bear with me one second guys we're almost there okay let me quickly grab this credential boom boom and now i've got it awesome right sorry for the delay guys now i've gone ahead and popped it in there awesome stuff okay so i just added in the facebook client secret okay so what i'm gonna do now is i'm actually gonna go ahead and let me just see if it's still hidden i think we're good okay cool so now i have the secret added to the directory okay so we have in our environment file we have all of our stuff set up so if i go back to next auth.js this will now pull from that environment file so these are called environment variables in order to get it to load the environment variables i need to go ahead and restart my server okay so i'm going to do yarn run dev and restart my development server okay let's keep going guys this is good stuff hey are you using redux and we're not actually going to be using redux today because of the way we built it we don't actually need redux okay so what we can do now is pretty much we can actually start using it believe it or not right so it's actually they've made it incredibly easy and incredibly powerful to go ahead and do this okay so now you can see hostname i think still proper react what's that saying uh okay anyway let's go back to our application let's do a refresh and see what's happening okay okay wait for this guys there we go it's still doing its thing and still loading honestly i don't know if it's the comments or what it is today but something is killing us guys all right okay so once we are on this page we need to go ahead and actually sort of update our application so we need to go into the underscore app folder now this is where we basically go ahead and supercharge the app so just like we use redux and use other things sometimes we have to go ahead and wrap our app right so to enhance its functionality so what i'm going to be doing here is i'm actually going to be wrapping the application in something called a provider and this will allow us to have a sort of you know a logged in state through our application and it will allow us to use some of the features of next auth so what we need to do here is go ahead and add in the following lines okay so what this does is it allows us to persist a login state between pages on nexus right so next js wow 600 likes that's what i'm talking about thank you so much guys thank you thank you so much just beat 700 let's just keep going though let's see let's just keep on pushing guys incredible incredible stuff right so i'm going to go ahead and import a provider from next off client all right let's do this let's hit save and we're fighting against a lot of tech issues right now i'm telling you right and now we've got this page up and running so the first thing i want to do is refresh make sure everything is still working okay so how do i get access to the user right like are they logged in are they not logged in are they not like how how does that even work right i don't even know where to begin with this right so what we can do is we can go over to our index right and what we can do inside of here is we can simply go ahead and pull the user sort of their session is called right we can pull their session information right so what's really cool about this is we're going to introduce the concept of server-side rendering okay now server-side rendering basically means that but imagine sunny goes to sunnysanga.com right it will hit the middle server first and that's where we're basically hosting our next year's app from there we can tell if the user's signed in or signed out based on the request that went to the server and then it basically goes ahead and prepares the page and sends it back to the user okay so this is really important because it prevents us from having that sort of you know when you imagine when you go to a uh application sometimes sometimes you're in a logged out state and then it snaps and you're logged in we don't always want that right so we can fix that with server side rendering so how do we like incorporate server-side rendering inside of a next.js app it's actually pretty simple all we need to go ahead and do is go ahead and say um export so here i can say export async we can say function get server side props and we're just by introducing this function tells an xjs that okay we're now going to have server side rendering for this page okay so what we can do is this actually take gets an argument called the context and this is the um he's not actually here i am here dude this is not recorded um get server side props this is the context this basically like it has the request information the response all that good stuff uh look at this guys 622 likes that's what i'm talking about let's keep on going guys 700 700 we can do it right so in order to get the user what we have to do here is we go ahead and say const session okay so const session equals and then what i say is i say await right because we are an async function and i say get session now this is a handy little function provided by next door library okay so this one i can say get session all it requires is the context okay the context is the request that came through when the user tried to go to sunnysanga.com right so now i have this session what i can do is i can return props right so i can return the props and inside the pop second return session now what the hell does that mean right so think of it this way right sunny makes a request to go to sunnysanga.com right or google.com whatever your next js application is sunny makes the request it hits the server right the server then just got this the user's accession which means are they logged in are they not right now the user is waiting at this point right so the server has that information so what it does is it basically prepares the page and then that session information it passes it to the component as a prop okay and then all of this information gets rendered on the user's browser right so it's extremely efficient way of doing it okay laksha's is it recorded no dude so what i can do here is where it says home i'm gonna go ahead and pass in the props and the props we can destructure and i'm gonna get the session okay now this is the cool part right because now i can see if the user's logged in so if there is no session right then what i want to do is i want to return a login component right right so i just want to kind of return some kind of login page otherwise i'll return the app itself right and now we don't have a login component so let's go ahead and do this so i'm going to go ahead and pop in the login component now so i'm going to go ahead and say login.js oops let's go ahead and put this in so here i'll say login.js right nice so with the login i can go ahead and basically do the following so i'm gonna go ahead and do underscore rfce okay and then i'm gonna go ahead and say we're gonna first you can have an image tag so an image tag like so and inside of this image tag i'm gonna have a bunch of attributes where i'm gonna have a picture this is gonna be the facebook picture so let's go ahead and pop this in here right so let's go ahead and check that and this is a facebook picture height of 400 with the 400 and object fit contains that keeps this aspect ratio right now if i go back to my header uh sorry if i go back to my index where is it gone index right we haven't saved this file yet i need to import my login okay so the minute i hit save now if the user is not logged in we should see a login screen okay which is correct right i want to see a login screen right now okay so let's hit save and now we should see it does a server side render it gets the user's information returns it as a prop the user wouldn't have been logged in right so it takes them to the login component now we got an error which is fine let's go ahead and debug it right the reason being is because we haven't imported our image component okay so all we need to do to get this working is actually go ahead and import the image component from next js image okay let's just go ahead and pop this in here just go ahead and pop this in like so you are so good with react thank you so much dude honestly it just takes a lot of practice and then you can go ahead and push through push through okay so let's go ahead and refresh and now we should see a facebook if we see a facebook smash that thumbs up button okay there we go ah nice that's what i'm looking for guys facebook is here okay so hopefully fool look what we're talking about pop fam is in the house one of many nice dudes harper we have had so many technical difficulties today it's incredible the stream went down all sorts of craziness my computer is running at the speed of a snail but we're still going right we're still going so we're good we're good we're not gonna let it stop us right so here i'm gonna add h1 now this h1 is just simply going to say login with facebook okay simply going to have a login with facebook uh it's super simple right now what i'm going to do is to center these elements right uh you're going to be amazed at how simple the authentication flow is after this right so i'm going to go ahead and hit the div with class name and i'm going to say grid and then i'm going to say place items in the center this is a little trick by the way right and this will pop everything into the center of the page right now to get that button looking a bit more juicy because right now it looks like crap i'm going to say padding of five and i'm going to give it a background blue of 500 right now you're going to see this is going to pull a little square around it right that's not really a facebook kind of button so i'm going to say rounded 4 right to give it like a rounded look and fill and i want the text to become white okay so the text will now become white all right and then i want the text to be central as well okay let's make the text central as well so text central or center sorry central okay that was nice that looks pretty good right so this is looking quite nice at the moment right so we've got this login state right and now obviously i want the cursor to be a pointer so i'm going to say cursor pointer cursor pointer like so right and then hit save and now you can see we've got this nice little button right so all i need to do now is when i click this button i want it to basically go ahead and provide the login sort of situation right that logins page that we saw now you're probably thinking there's so much to do around this right it's really crazy simple right now because we did that next to authentication setup earlier with the credentials and keys all i need to do now is go ahead and do a paste and do import sign in from nextdoor's client right and then what i can do is i can go ahead and say on click and i can just go ahead and say sign in right i'm not joking it's crazy right it's crazy how easy this is right watch this right so now if i go ahead and do this now bear in mind i have signed into you uh facebook on my computer so it may not pop up the facebook screen but i'll show you an incognito browser as well so if i click login with facebook boom sign in with facebook pops up i click sign in with facebook it took me to facebook right and then it's gonna do a redirect in a second if i'm not logged in already and let's see what's happening on facebook so it says invalid app id oh okay the provided app id does not look like a valid app id so i've actually provided an incorrect app id but you see it's kind of getting us there right and this is actually look at that guys i actually got so confused there for a second because this is actual facebook which is insane right so let's go ahead and actually double check our app id so i'm going to quickly hide my screen for a sec and uh i'm going to go over to my configuration okay so this is probably because of the development so what i'm going to do actually is go back to my application so this will actually break the one that's probably live right now um let me go back to my uh environment local files so let me go back to my nth file i didn't actually add it i don't think all right so where's my m file okay guys that's the issue right so i didn't actually add in a n file which is crazy i thought i did okay guess i did not so i'm going to go ahead and add in my environment file so environment file and i'm going to go ahead and pop in my values as before right so this is the environment file that i should have added which i didn't add which is crazy i don't know i don't remember why it happened i thought i did i did right i'm gonna go ahead and pop in the values okay so inside of it here right we need the client id and we need the client secret so i'm gonna go ahead and get that from facebook i'm just going to hide it quickly so it doesn't pop on the screen settings base i can't deal with another tech issue today it's crazy right so the app id i'm going to go ahead and copy it simple i've got the app id now i'm going to paste it onto the screen nice and then i'm going to get the app secret okay so the app secret i'm going to grab as well and there we go i'm going to pop that onto the screen as well so all i did there was added in the values for the environment file okay so what i can do now is i can go ahead and get rid of that and then i can go ahead and go back into my index and make sure that we actually have the environment file okay awesome stuff now i have an environment file so my environment variables are in here okay so weird we didn't actually have that before and then i'm gonna go ahead and control cut my server i'm gonna do yarn run dev okay then i'm gonna go over to my application right now here i'm going to go back to my localhost 3000. 660 likes let's keep going guys this is awesome stuff make sure if you haven't already sign up for the secret challenge right it's going to be huge it's going to be an absolute banger of five days so make sure you do not miss out okay so while this is loading let's go ahead and continue on the coding so we've got the login page oh i guess we're done now so let's go ahead and get that sorted okay login low cost 3000 come on guys this is gonna work the secret secret challenge guys five day secret challenge i love the fact that you guys see the problems that happen as well because that's quite interesting because you're going to fall into those problems as well makes it real let's click sign in with facebook and fingers crossed let's see what happens right if it says invalid app id okay euro blocked that's fine this is because we are in not in test mode okay so when you're developing you actually want to have this in test mode okay oh i guess this app secrets are all right you're gonna click on switch mode okay and then i'm gonna make this development mode only okay so it's only gonna work on localhost now okay so here it should work now okay so you need to make sure you switch that when you're testing it otherwise if you're testing over http connection it will not work okay so that's very important little thing that you need to know about so if i try again sign in with facebook let's see what happens okay nice now it logged in and we have a session there we go guys look at that all right that's incredible right we have an actual session working it's now logged in we have the session if you check in the the server it says jwt auto generated signing key so we actually went ahead and created a key for us it did it boom that works so now if i refresh the page we are logged in which means that we don't go to the login page which is incredible it works right so that's actually super powerful so now what we can do is we can start to use that information in things like the picture right so what i'm going to do is i'm going to go back to my header so i'm going to go back to the header and then i'm going to go ahead and style out the header right so that's awesome right so a lot of people probably haven't used that and now you're going to know how to use it which is incredibly powerful okay so here what i'm going to say now is i'm going to have an image right in this image i will explain right now okay so this is where the profile picture was going to go i'm going to go ahead and pop it in here so i'm going to have the image pop in here and when we click it i'm going to trigger the sign out okay so i don't even need that i'm just going to trigger a sign out and i'll show you how we import this i'm going to have a rounded image with a cursor pointer when i hover over it and this is the interesting part session.user.image right so facebook when we logged in provided a bit of details it provided a name image email so we've got the width before we hire for a layout of fix so it means it won't change if even if we shrink the page but how do i get this session.user.image how do i get that variable okay so there's a really nice handy little uh hook that we can use to pull the session information from anywhere within the app now so to get the user's authenticated sort of state we can go ahead and pause the session right so what i need to do is i go ahead and import this hook and this gives me the session right so now i actually have the user's information at hand okay so which is incredibly powerful so if i click save we should see now the user's image pop up on the left here right so if all went well oh okay sign out is not defined okay that's not too bad the reason why that's not happened that's happened is because sign out is a function that we need to import from next auth client okay so we need to go here sign out and then we've also got use session save and then let's check this out and refresh and look at this is this connected to a back end firebase yes it will be check that out guys so now if i click that it should sign me up right so if i click this wait for it if i click it it will sign me out which means i no longer have a session which means it redirects me to the login component right that's incredible now if i click log in if i click sign in this will take me to facebook i'm already signed in on facebook hence it will log me in otherwise you'll get a facebook prompt boom we have my login credentials that's my picture on facebook of me and my mom awesome stuff okay so now we have the header component and the authentication portion done that's really quite powerful guys already right so we're already touching base already quite quite soon right so let's keep on moving at this speed we're about to break 700 okay we're about to break 700 we have 300 people still watching i can't believe your attention guys is incredible thank you so much all right so now this carry-on looks cool until now yeah it's amazing dude all right so we're not using firebase source we're actually using next auth because it allows us to have the session information on the server render which is incredibly powerful all right um thanks right now he says nice honey all right so now i'm going to create this sidebar component okay so i'm going to create the sidebar component now guys i don't want to mention if you haven't already registered for the five day challenge definitely do it the first first link in the description it's going to be huge five days of continuous building technical you know developer stuff with me your boy proper react and then guys you know what to do subscribe if you haven't already because 60 of you aren't subscribed right so it's it's crazy right if you're not subscribed hit the subscribe button right so i'm going to go ahead and hit this uh create a sidebar component so let's go ahead and create the sidebar component cyborg.js now this is going to be a long build guys we've got a lot of lots of stuff to do so keep interested hit the thumbs up button have a drink of water if you need it carl says you're crushing it man definitely signed up to fight this chance nice dude that's what i'm talking about my boy carl always pulling through man thank you dude all right and i appreciate everyone i make sure i remember who is who okay it's very very hard to remember all right so it's hard wired to sunny sangha yes good shout out thank you for spotting that one out if we go back to header thank you so much for that's what i call developer sort of pointing this out that's awesome man thank you here instead of sunny sanger now i'm going to make it session dot and here you're going to see look user we get a user dot and we get the email name oh god it's a gather way uh where's it going yeah get this out the way thank you then we've got email image or name so i'm going to use the name so now you'll see i'll pull it from this is actually now being pulled from uh facebook so thank you dude very good very very good um well who said that uh shretta thank you all right that's awesome life of mo uh i would definitely i think you talked about encryption somewhere but i'm not gonna get into that right now okay because we're kind of we're we're gonna cross territories all right so i'm gonna go ahead and hit the sidebar now for the sidebar we are going to go ahead and pull in the session information because i'm going to need the session for the top image so if you noticed actually let me quickly log into sunnysanga.com one second guys okay so if you noticed on the top left we had uh the picture of me so i want to have that right over here so the way i do that is i go over to my application and i'm going to go ahead and say oops con session and i need to pull in my used session hook okay that's only working remember because we've wrapped right we've wrapped it um in the beginning underscore app.js in that provider that's how we can use the session throughout different pages that's why we do it okay so what i'm gonna do now is i'm gonna say class name equals and then here i'll say padding of two right because remember we're creating the sidebar now guys but we're creating this right here okay so i'm gonna do panning of two and then i'm gonna go ahead and say and you see the top's not fully responsive yet we're gonna fix that and we're gonna say padding of two with a margin top of five and then i'm gonna give it some max width constraints and now because we're using the just in time compiler i can give the square bracket custom values here if i wasn't using it i couldn't do that so on a mobile screen i'm going to say 600 pixels is a max width and but when we hit the extra large screens i'm going to say the min width should be at least 300 pixels okay so i'm kind of you know forcing it to be that size when we hit the bigger screen right and a lot of thoughts gone into this when i was designing it okay so trust me it takes some time to build this up right um you are so innocent thank you dude uh so here i'm going to go ahead and say sidebar row okay so sidebar row and we're going to go ahead and have a reusable component for each one of these right now what i'm going to do is i'm going to actually going to have this have a icon so it's going to have an icon as one prop and that's going to be like you know a bunch of icons that we import so we're going to import those right now actually so i'm going to go ahead and import all of the icons i'm going to need so let's go ahead and pop that in right now uh where is it going yeah come on there we go let me actually turn off my flux i use flux to save my eyesight guys you guys should do it too it's very very important okay so but i need to stay awake right now so we've got this open and then i'm going to use the icon here to be and this one's going to be users icon so let's go ahead and say users icon and then i'm going to have the um title prop and this one would say friends okay so this one is basically gonna represent this right where it says friends on the left here we're gonna have the same thing but it's gonna be like so okay so i'm gonna go ahead and actually repeat this a bunch of times at the top right now and i'll show you how we do the one for the person afterwards as well okay so we're gonna have the cyborg which can accept an icon or title and then we're gonna have a special one at the top which is actually gonna go ahead and pass in a source instead of an icon so if it passes in the source i want to render out a picture if it passes an icon i want to render an icon right so we're going to make a very nice reusable component okay hector thank you so much dude appreciate you right so here sidebar row now what i'm going to do is i'm going to go ahead and say sidebarrow.js okay so there we go i'm going to underscore rfce now guys if you are watching this and you follow me on instagram you know go ahead and shoot a story i always appreciate looking at your stories it's amazing to see you guys in the flesh because right now you know it's like it's hard to see you guys like as it's really difficult when you just see comments right and then you realize there's 700 like people liking this video right now which is incredible right so i would love to see that all right so then i'm going to go ahead and say for the sidebar row all right so for the sidebar row i'm going to go ahead and pull in the props now the props i'm using i'm going to destructure them i'm going to say source icon title okay so there's a bunch of things i'm going to be using here and let's go ahead and hide that so we have some space and i'm going to say okay if they passed in a source so you know that when i want to render the person's picture then i will render a next.js image which means i do need to import an xjs image into my code 700 likes in common thank you jay that's what i'm talking about thank you so much dude keeping me uh upbeat all right let's go ahead and do this let's pop in the image and i'm going to say it's a rounded image the source the width of the height of the layout fixed i want to change its size okay and then i'm going to say if there was an icon right so if somebody passed in an icon then i want to render the icon out okay so you see what we're doing here we're doing a conditional render of jsx okay now this icon i'm going to go ahead and pop in and this icon is going to say it's going to be a height and width of 8 and it's going to have a text blue of 500 which means the icon itself will be blue okay then we're going to have a p tag now the p tag is going to have the title inside of it and it's going to have a class name and the class name here is going to be hidden by default on mobile view and then on the smaller screens and above i'm going to say it's inline flex and it's going to be a font medium okay 700 likes boom that's incredible i you know like that's actually insane the fact that like we had tech issues we had to start from scratch on the likes and you guys still 720 likes wow that's that's just that's just wow thank you guys carl thank you so much dude appreciate you holy crap guys damn right i'm gonna go ahead and save this and i'm gonna import my sidebar row in the sidebar component okay so import sidebar row i think we're going at a good pace guys let me know if this is a good pace for you guys all right so now if i go ahead and hit refresh wait for it we should see a bunch of change now oh no nothing right and then the reason we don't see anything is because of sidebar row let me check this out you deserve it bro i've been here for a minute observing time thank you so much anthony i appreciate it dude um okay interesting interesting so we don't actually see the sidebar row and this is because okay we don't actually have any sidebar being rendered so we go back to index and here the sidebar oh we do oh i didn't save it okay gotcha this is why so i need to go ahead and actually import the sidebar um and then i'm gonna import sidebar like so hit save and now we should be able to see a sidebar boom okay so obviously that's huge so i mean it's kind of there but it's not like it's really not right so we need to kind of fix that right so if i go to my sidebar row and then australian here nice ironman jarvis what's up dude and then i'm gonna go into sidebar row and what's going on here so sidebar row if we have the icon needs to be a height and width of eight okay um but that's huge oh the div ah there we go right the div is trying to use up a block inline block which means it's going to use up the entire space we don't want it to be that one would be a flex thank you shri khan vangala appreciate you dude five dollar donation thank you so much man i'm gonna say items center and then i'm gonna say space x of two okay now you should be able to see a minimal change i guess p of four let's double check this out one sec let me go back and do a p of a four right now interestingly enough our icon is freaking out with the size right so let's have a look why this is happening um height and width of eight let's just go ahead and change this to a height of eight okay interesting these are huge holy crap um [Music] this is because we've got flex flex items and space x2 we've got p let's go ahead and just finish off the styling and then we'll come back to the issue we'll say hover we'll say bg gray of 200 i want to do rounded corners when i have like when i kind of you know highlight over it and i want it to be a cursor pointer okay oh yes more likes please 800 i think we could do that man now you can see now we've got the uh sort of you know it will we should we should have that big bg gray sidebar row okay let's just double check sidebar and then here inside of sidebar now let's just double check that we've actually set everything up correctly because i think in sidebar we've messed it up all right it's either in here or it's to do with the actual oh okay i got it i know where it is right now these are using up the entire width which makes sense because if we go back to the index right what we actually need to do is if we go back to our index oops index right we need to do is in here i need to say class name and apply a flex to all of the things inside that main block okay so this will be our flex wait for it boom look at that clean as hell right now that looks pretty nice to me that looks pretty pretty nice to me um we just need to make it i mean that's not really correct is it right um red background for debugging okay so now what i want to do is i want to go over to the sidebar row and let's just debug it and get that looking perfect okay so back over to cyboro first time watching live always used to watch replays your videos sam what's up dude good to see you right so here we've got small uh inline flex font medium okay that's the p tag and then for the div we've got flex item center we've got space x2 p4 hover bg grey rounded excel cursor point okay cool nice um but the interesting part is that why why why why why why is this not growing i think it might be due to my sidebar not using up its space like it should be right so interesting okay let's debug this so we've got the sidebar which has a p of 2 margin top of 5 max width 600 min width 300. okay and we've got the sidebar row which is um width of eight but where is my hmm right now i don't even see my title am i passing in the title yeah i'm passing in title um i'm not seeing the title come through at all okay so interesting let's just go ahead and do i just want to see something for a sec let's do a h1 with the title coming through okay um okay so it's actually to do with my styling now okay so we're saying it's hidden and then on the small inline flex and if i was to just give this my flex or to be honest this could just be an inline okay let's double check something right now i've made a silly mistake here i just want to double check something i wanna kind of okay so everything is correct okay so this is actually correct guys it would be to do with my higher component so it would be to do with my let's just double check the styling over here paste okay it seems all good um let's check out the it's got upper level so you know when you're debugging that's all you're going to do right you're going to go up a level see what that's about let's see what's happening over there okay i think i see where the issue might be indexed or js um i hate the screen let's go ahead and change this to become let's go ahead and give the background of the entire thing a we're going to give it a height of a screen we're going to overflow hidden that's for the little scroll trick so when we want this little trick all right and then background gray so let's go ahead and apply that right now let's see what happens all right so that's okay i guess but right now we're still not doing what i'm looking for okay so [Music] sidebar why is my sidebar acting out because right now it's on the sort of mobile view it's stuck on the mobile view so if you see this right here that's stuck on this view right and even then my hover state isn't working so we touched 750 likes let's go guys this is real coding because look i'm like this is what happens you get stuck and you have to figure it out right so inside of the session let's have a look sidebar p2 mt5 max with 600 pixels extra large min width 300 pixels got it okay okay a sidebar row okay and then over here the sidebar row [Music] let's get rid of this for a sec super interesting what is going on here i think let me actually something spooky is happening here let me go and uh i just want to double check that it's actually not a local sort of caching issue or something because all my styles seem to be correct super strange title hidden maybe it's not yeah i tried it but it would be on the mobile view and then afterwards we changed it to an inline flex seems to be okay but uh bernard just give me anything when it comes to challenge right like literally sign up and just stick with us you can watch the videos afterwards we're making it sort of you know like fit everyone's schedule but dude just be there that's all i ask okay okay um let's come back to it then i guess maybe that's just trying to matter this in a bit maybe height and width of 30 the image tag looks great i'm not even getting my hovers day right now over bg gray let's do hover red okay interesting so i'm not even getting a a hover state right now of this class so we've got function sidebar row let me go ahead and literally copy this class and redo the class one second guys so i'm going to do this and then she paste it i shouldn't have changed anything let's just react okay interesting ah come on guys damn it this was definitely gonna be the longest build guys this is definitely gonna be the longest button because we're kind of caught at a point um text let me just try something text red 500. and that's so strange that changes it to what it takes green 500 that changes it to that what okay something super strange happening here okay tell you what guys let's go ahead and continue on with the build let's go to my index let's continue with the index right let's build the feed by the feed and the widgets so here i'm going to go ahead and say feed and then i'm going to go ahead and create the feed the rest of it and then let's just see what's going on here feed.js oh nice danielle torres what's up dude uh subscribe if you're new dude because we pretty much keep these bills coming this is going to be you're pretty much going to witness the longest one right now i'm telling you because i'm not quite until this is dumb but this is this is what is known as a bad day yeah let's see it's a tough day i'd say it's tough day all right so we're going to have to feed okay now inside the feed we're gonna have a div and this is where we have the individual points we're gonna have the stories the input box and the posts okay so the first thing i'm gonna have is the uh stories okay so here we'll have the stories then we'll have the input box oops input box and then we'll have the posts okay so we're gonna have a bunch of stuff here let's keep on going guys all right um mc fresh what's up guys so good stories so here i'm going to say stories and then i'm going to go ahead and do a component and this one's going to be stories.js now underscore rfce pop in our stories and over here what we're going to do is for the stories i've actually simplified this for you quite a bit okay so what i've done is i've actually introduced a data structure here so you can go ahead and just copy the data structure and what this is is simply going to go ahead and have an array of a bunch of objects you got name source profile okay so this will have the names of each individual and then what we're going to do is we're going to create a story card component a map through it okay so the first thing i want to do is for this stories we're going to have some styling to it so the class name here would be flex i do want to justify them centrally so the stories that we're talking about here are these okay and then i'm going to say spacex of 3 so space x of 3 and then we're going to say mx auto okay mx auto all right um mx auto there we go let's go iran girls production just says oh harry collins dude i think if harry collins is watching right now like dude the shout out all right 760 likes let's keep going guys if i can make an app like this on my own my job ready um yeah man show it to your employer honestly you can move with that right because that's exactly what i did right so i don't listen to anyone he says you can't talking because i did it right story and then let's go ahead and render it out so here i'm going to say let's render out a story card component okay now from this i'm going to go ahead and pass through some props so the name source and profile are passing through and these will be correlating to the name source and profile here so the prop will be mapped like this right so it's basically going to be the name will be story name like so and this will correlate to that okay so now the story card component right this is going to like basically represent this okay so these story card components let's go ahead and create so storycard.js and then i'm going to do underscore rfce right this is definitely one of the more of the advanced builds i think right damian says no such thing as can't right react is easy 800 likes and subscribers future hell yeah dude right so now with the story card thank you so much initiate please make a video on lazy letting infinite we're actually using lazy loading right now dude uh infinity scrolling we can definitely do that one right the story card came through with some props right i know dude we have a crazy amount of likes it's insane let's see that's papa found man name source and profile okay so let's pick up the energy you know let's do this guys this let's let's change the let's change the sound a bit right let's do this so here so here i'm gonna have for the story card i'm gonna have two things i'm gonna have an image which is gonna represent this image then i'm gonna have a little circle image at the top and then i'm gonna have a p tag okay so three things to check in right all right so now i'm gonna go ahead and say image i'm gonna pop in two image tags and i'll show you exactly what we do with these things okay we're nearly 800 likes let's push guys just keep going i'm going to go ahead and import my image tag at the top and i'll explain exactly where i'm getting this information from all right okay so you can see here what we're doing is we are making we need to make firstly the class name uh relative that's just the first basic thing i need to do relative okay so i'm gonna make the image here come through right now this image right here is going to be absolute position opacity of zero unless we get onto a bigger screen now i'll show you what that means it means that these little circles um on this bigger screens are there but on the smaller screens by default are opacity zero so you see how the small little circle's not there this the bigger circle has become that shape but the small circle's not there okay so that's what we get around it falls out of 50 so it comes on top of the image and top 50 which means push it top down uh 50 points right and we've got this let's just go ahead and pop this on right now so we can actually see some stuff happening right so story card are we actually pulling this in no we're not let's go ahead and do that right now so we've got stories all right keep your tutorials going for the react community hell yeah dude i'm gonna stop in this is tough i'm not gonna lie to you this is today the the day we've had it's been tough like uh but we just don't stop right that's that's the goal that's the way we just do not stop we just keep moving all right we're going to make this relative and you can see right now we've got some weird bookie stuff happening right now okay so i'm going to say we render that on the screen and then i'm going to say height and width to 14 okay so each story card needs a set size and with a height of 14 width of 14. let's see are we seeing anything yet no okay maybe yeah no and this is because all right let's double check feed okay we're not actually pulling in the stories wow okay this is goes up levels so i need to go ahead and import my stories right so next thing i'm going to do is pop open this one i like this song it sounds good this reminds me when we started the papa fam that's it think of rome rome was not building the day hell yeah dude and that's why we just keep going literally we're two hours and we're just going to keep going i'm just not going to stop until it's finished all right so feed.js and uh i even tried to shoot this like uh afterwards on a recording i just couldn't do i needed the energy from the pub clam all right so we're gonna go ahead and do this and save and now we should see the stories pop in wait for it so we've got the stories here we're mapping through the story and then we see this kind of come through now when we do this we do need a key in this case i'm going to say story dot that's a bad one but story dot source that's okay um okay we're still not seeing what we need to see [Music] will this have a chat system it will have a real-time functionality when we're pushing in your facebook company maybe you win a hackathon wow that's amazing dude um story card okay we've got the story source name everything here that we need let's see what's happening on the side okay so everything seems to be okay on the server so something strange is happening here guys with the the actual component the actual app itself okay so right now we've got let's have a look let's go into our into our stories uh here and we've got justify center spacex okay mx auto and then if we go up to feed on the feed okay this is where the issue was all right my bad all right so for the feed we need to give it some sizing okay otherwise it's just it's not gonna have no space to grow so i'm gonna say flex grow so use up as much space as you want in your flex container okay that's the first point of the rule and then we're going to say give it the height of the screen okay i'm going to stretch that down to the height of the screen um and this will go ahead and actually go so we've got the feed okay height of screen pb of 44 adding bottom padding top of six and let's just double check am i even seeing that let's just do hello okay i'm actually going to restart the server because it looks like the app is bugging out big time guys right so let's go ahead and actually pull out my server cut the server and then let's go ahead and do yarn run dev one more time let's cut this off again properly till we get there we go nice you're on run dev we don't quit and guys well i want to show you ryan i hope this is showing you something that like it doesn't always go smooth right like it like no build ever goes smooth sure i was coding this like and it was you know it wasn't so slow because we're live right now it's a bit more trickier but if you get stuck don't let it knock you out don't think you're a crap developer and all that stuff right this happens right it happens you get you have to debug this is part debugging and this is why i love to do live videos because you get to see something goes wrong you get to see it right so that's why we're not going to quit we're just going to keep on going all right you're not going to see me kind of cry about this we're just going to fix it move forward and get past it okay so right now localhost 3000 i mean i wouldn't i would appreciate if that would just finally work because that one is super annoying right so flex grow index let's have a look we've got the index here now let's just go let's work from the top down okay so we've got the index here we've got a height screen we've got bg grey now let me just refresh the page and see are we actually getting what we're looking for in this case it says we built it but i'm not seeing what i'm looking for if i was to log out log in sign in okay so it is building our page huh that's fine okay strange honestly it's crazy right um we got the header maybe it's the main maybe is this because i was using a div oh but i don't think there should be any difference no that shouldn't be a difference just fine all right so we're gonna go ahead and do this let's go ahead and hit the um the sidebar again feed is not defined oh my god are you kidding me it wasn't even rent wow that was see that's how you know the computer's bloody dying guys damn see damian says we are all learning check the feed i guess you've got thank you yeah exactly we've got the import but i mean oh yeah okay that's still pretty good all right so we got elon right i'm still happy to see something all right so we've got some bill gates in the house right so let's go ahead and check that out so obviously the ideal scenario is to not be flooded with a face that big right so we're going to go actually to the story card and i'm going to set loads of rules here right so i'm going to say okay hi i'm with the 14 fair enough um but when i hit the medium sort of larger screens i want to change it to a height of 20 right uh when i hit the medium screen will change to a width of 20 right when we have a large screen i'm gonna change it again so these get a little bit more of an upgrade this is a story card yes and then when it cursor pointer overflow on the x-axis uh padding of three and then i'm gonna apply some nice little hover effects if i go ahead and pop these on right now so let's go ahead and pop this in there hit save and the reason why this is most likely happening now is the container that it's in okay so this is most likely the container that we are surrounding in okay so if we go to our stories now okay and then we're mapping through we have the keys here everything is being put in let's have a look at the stories flex justify something spacex moreover three okay cool and then we go back to the index pop it back and track oh yeah dude um index where is all of my stuff going okay there we go man i'm flying into there right and then we go back to index okay so we've got the feed which get comes through here we've got the feed high sunny five more oh five more and then we're here and what guys go ahead and shout out okay feed this is where it is nice we are back we are back we are back okay so high of screen uh padding top and then here we're gonna change the margin right okay margin right needs to go to four um on the extra large screens it's going to be a margin right of 40. and i'm going to do overflow y auto right and i want it to be a scroll bar height so i will hide the scroll but i'll show you how to do that afterwards and then for the div which is holding everything i'm going to do the following okay so this is actually very important now so for this one this is going to hold all the stories and all that stuff i'm going to say class name equals i'm going to say margin uh x auto so it will center itself max width md okay so that's going to do that for us now oh okay ah i know why this is happening right in stories in stories we've got the story card but the story card is most likely not relative to its parents so let's double check story card we've got absolute opacity okay so we've got the object cover filter brightness right we've got hover animate posts and duration transition i'm gonna go ahead and copy all of my classes guys over here to this one yeah and this will actually add in the sort of you know the the we should see an anime effect okay so this is definitely like something strange is happening right now we got some some irritating bug right now on the page which i'm trying to figure out where is it coming from let's do an inspect and figure this one out 800 likes let's go guys nice 900 now so he's creating a billion pound website well done thank you guys all right so you see this right here is bloody huge right now we've got all of these individuals and then we've got the actual component itself which is flexed out okay and then we've got main okay so i have screen something small has broken this and it is really messing things up okay let's just let's just start from from a scratch point so feed okay let's just focus now let's focus now all right let's have a let's have a proper check for this right so we're gonna go into our feed let's have a look feed and um i'm going to check my feed and i've got posts available okay flex grow high screen pb we're doing that pt everything's good margin right also white hotel core everything's good on that front the input box everything it should be underneath this afterwards now for the stories in situation patience yeah honestly it is about patience guys let's just chuck a h1 in and uh see what i'm seeing here h1 testing i want to see something here so if i chuck in testing here okay so we can see now that it's rendering our stories.map and this is where's my story's gone stories stories don't matter and the story card okay so we've got the testing here okay now let's go ahead into here we'll flex justify we are still here hell yeah dude okay this is good and then let's go down into story card okay story card and then for story card i'm just going to go ahead and quickly replace this and see if i've made a small mistake here besides so look top zero object fit cover no we're good that's just the p tag difference this would say bill gates somewhere here okay oh my god super super super frustrating what is happening here um let me go ahead and just remove the image for now and double check something okay so you see this guys we are seeing the correct values being dropped in here right now the issue the issue is not to do with feed contact it's super hard to debug when the flex and flex grow for feed like some flex grow for feed no it wouldn't be it wouldn't be because i've changed that um it's not flex there um index is a we flexbox our flex grow hair everything happening we want it yeah mind challenging coding need a breakdown it's because the computer is super slow and uh super frustrating though because this is blocking me from continuing on right now now i do want to check one thing i don't want to check my header component uh is fully the way that i need it so let me go ahead and double check this hit save okay so there's a slight variant on my header and this is simply just for the uh side part here okay that's fine so what i would do is i will replace that with the final one that's what's found in the uh the code on get our replace fine now the top so let's ignore the header for now um don't burn out no we won't buy now dude we're good tailwind's not confusing guys it's because we're it's honestly it's because we're doing a um a tutorial and right now there's a super damn strange issue that's killing us right now right so we've got the home then we've got the app we haven't got any styling over here and inside of globals we don't have any additional styling nope and we don't have any additional stars anywhere okay nope this entire bottom section is weird right something is messed up in this entire bottom section we've got the flex index main class name flex sidebar is rendering out here and even the sidebar is being all booked once we've got this all right let's um go to our feed let's actually fix the damn original thing as well the sidebar because this is most likely an issue as well that we're not facing that we need to be fixing um let's check out so sidebar.js okay let's have a look so we've got the max with on the sidebar let's have a look at my index we got the head the main and the widgets okay pg gray overflow hidden okay all good there and then we've got the let's go into my sidebar this is a raw debugging session guys you guys are seeing sidebar title now i need to see if it's actually rendering at all the component that i'm looking for here so we've got the image but next to our image we have a p tag which just does not want to be seen i think honestly my i'm pr i'm pretty sure my this is acting out let's have a look let's have a look guys let's check let's close this let's close this let's create a new terminal and let's do a fresh run yarn run dev drink some water sunny yeah i think i need to guys right we can do this we can do this css max width is not working yeah let's double check that one as well all right see even there my jit nothing is um [Music] my tailwind does not come through see tailwind is no longer actually being so we should have got a tailwind warning here which is again super strange which makes me think um the square brackets do you know what that's uh that's actually not a bad job it's not actually a bad job but right now guys i'm telling you it's definitely to do with um it's 100 to do with my my uh my terminal not picking up what it should be picking up let's do it again it should be picking up the uh just in time compiler but it doesn't seem to be picking up any compiler at the moment right nope nope nothing all right let's um save till when wind can far does it reload oh i think that was it dude if that works oh my god oh my god who is that who is that bite 89 by 89 that is what i'm talking about dude that's ridiculous i didn't did i not save the file okay guys that's just like crazy so the whole okay i want to explain that one out right the whole issue there was honestly that the tailwind wasn't kicking in right so we were doing so many we're doing so many of the class names correct but the damn tailwind wasn't kicking in god damn it guys but look we made it good stuff by 89 dude you are a legend that was as a shout nice one dude so now we go back to our stories and let's kill it all right let's just crash this now all right so in feed we can go ahead and pop in the stories okay we have our stories here so this is looking amazing now okay nice boom let's do this sidebar right we've got our min max width okay awesome let's just check the mobile response nice that's what i'm talking about but what was blowing my mind is that this wasn't breaking like crazy stuff crazy crazy stuff but you guys saw it that's a proper debugging session we should have got all like intense with that with the sort of you know let's go let's make it a bit more intense while we well we kind of you know we get this piece out let's get into that little coding state right now wow this has been a fun session definitely different to how we've done it before let's get back on track guys smash the thumbs up button if you're enjoying it because less uh that was honestly wow wow and we are at 825 likes let's get to 900. okay let's do this okay so feed let's go to your index let's go to our speed and let's pop this in and wait for it there we are look at that that's what i'm talking about guys everything was working just crazy isn't it let's go to stories and let's get rid of the h1 and now we should be able to see on a big screen look at that on the big screen it works even with the animations amazing all right aldo what's up dude aldo is one of our amazing members inside the pups man so you guys can see this right looking good okay looking amazing that was a crazy debugging session wow right holy crap all right so we got the story cards working and the next section is the import box okay uh the amount of things we've had to fight today it's a crazy input box let's do this so you see how marking things out can help you input box all right now we're gonna ramp up the speed right see how easy it is yeah exactly right see it is actually pretty simple it's just because we um the bloody tail and wasn't loading but anyway back to back to positive vibes let's go ahead and get this one gabriel let's go i just joined by looking really nice show some of your support thank you so much dude gabriel came in clutch with the 20 donation appreciate you man [Music] all right let's go ahead and let's pick this up now all right so we got the input box now we're going to do the input box here input box and then we're going to hit save go to our input box nice and inside of our input box let's go ahead and put now the input box is actually a very interesting part right this is where firebase kicks in this is where we've got the real time db all that good stuff all right just tech what's up coffee on me bro just printed an ielts exam catch up on this bill now i love you for it thank you dude what's up man we just went for a crazy debugging session so yeah good luck with that man when you when you catch up to it okay let's go ahead so for the input box what we're gonna do is we're gonna have a so the input box that we're building now guys is this one right here right so it says what's going on and all this information right so we're going to go ahead and build this one out so first thing we need to do right is we need to build out um the top half right so the top part is going to be its own little div all right and this top part that i'm referring to is this half here right so the half at the top the one with the image and the input field okay now the image is going to pull in the image from the session user image we know how we got that from nextos okay so i'm going to come in here pop this in like so let's go ahead and chuck this in there we go image i go to the top i chuck it i import my next image as we need to okay let's go ahead and do that so we pop in our next image like so hit save and then we need to get the session now we don't have the session at the moment so i need to go ahead and get my session so session i'm going to go ahead and say current session equals use session and go ahead and import like so okay boom okay now you can see the picture comes through nice and that's actually the logged in session so that's the logged in person session okay so next what we're going to do is we're going to go ahead and we've got the image coming in so we're going to go ahead and add in a form next okay so the form is going to be very important because it's what's going to allow us to actually have the the enter button and you know submit the text to to make a post and all that good stuff okay so here i'm gonna say form and this is gonna be class name and this is gonna be flex and flex one because i want this to use up the majority of the room here like so okay so what we do is inside there i'm gonna have an input and a button so a little trick here so when you have the input field this one's gonna actually say you know like what are you working on or what what is it not what you're working on it's gonna say what's on your mind right and it's going to have the person's names nice little sort of personal touch there right so here we'll say placeholder equals and then we'll have our jsx so backticks and then what we're going to do is we're gonna have um what's on your what's on your mind okay and then here i'm gonna have session dot user dot name hit save nice cool this is looking good and then obviously it doesn't look the greatest right now but we'll get to the point where we need to get to so this container out here we're going to go ahead and say nothing is impossible with the problem exactly and i want to honestly like really push that point right because like look how we can overcome all these crazy issues right together as a team it doesn't stop that's what all that's what zero to four sakura is all about right so we've got flex space for p4 item center as soon as i hit save you'll see this come into a line nice looks a lot nicer with that then we're going to start the input field okay so the class name here let's go ahead and say class name how many uh likes are we out guys let me know let's go ahead and say class name and say rounded four okay rounded four h12 bg gray 100 flex girl uh px 5 which means padding on the x-axis five and then when i click here i don't want that outline ring the blue outline ring so i say outline none hit save and boom we get this okay so that's looking a lot nicer now how do we get the nice little ring around it okay so the background sort of you know how do we get it to look like this all right so that's actually the parent here why is this actually thank you oh what's up seren carden thank you jay shawn gotta leave now and thank you for the content have a good good one everyone thank you so much dude i love that jay i'm coding j sean so we say class name three to go that's awesome guys let's keep on pushing we're 840 likes and groin let's hit 900 okay so now we're gonna do for the outside container say bg white right and i'll save it as we go so that way you guys can see what's going on bg white padding of two so you can see that padding of two rounded two xl all right rounded to excel shadow md text gray 500 oops x gray 500 and then we'll say font medium and margin top of six right 900 like go oh yeah dude look at that look how nice that looks with the little drop shadow like immediately look at this we're starting to create really nice up right and then we forgot one serious important point question mark adds all this all dynamic to your app right like what's on your mind right it makes a difference right so here we have got the the input and then we're going to have a button but the button here we're not actually going to show right so i'm actually going to say some like we can say submit now and you'll see a button come in but i don't want to show that button right so here i'll say hidden yeah and then on click right so this is actually going to be on click and when we do this i'm going to trigger off a function called send the post okay so if you've got a form and then you have a button inside of it right if we do type submit right this will be basically when we hit the enter key it will go ahead and actually submit the button right which means it will click right so this will actually go ahead and we type in hit enter and then boom it sends a post so i'm going to go ahead and create like a sort of empty function here called send post and this will have an event attached to it and basically when we hit enter i'll show you what happens look at this so if i go ahead and type in something and hit enter a like enter you see how it refreshed the page right so we don't want to do that right so the way we prevent that is we say e dot prevent default behavior so either prevent default like so okay uh damien says this is interesting hell yeah dude it gets like it's very interesting honestly i find when things get stuck i actually find that really interesting to watch so if somebody else was kind of you know coding out and stuff like that i would get i'd find that pretty cool right damien thank you dude appreciate man all right so now we've got this and then i'm going to go ahead and save we got the button there so the next thing to do now is i'm going to go ahead and have the uh buttons underneath it so these ones live video photo video and feeling activity guys just to mention i am going to have image uh image uploading on this build okay so we are going to actually cover that as well so yeah honestly it's a marathon telling you it's damn earth and right i just love seeing this guy code keep it off thank you so much team production i saw you join the course i think let me know if you did right um right so we're going to need some icons so i'm gonna go ahead and import them right now um we're gonna need three and i'm gonna go to the top and i'm gonna chuck it over here all right so emoji happy icon camera icon video camera icon they're the things i need uh and then i've got my closing div here and now underneath that closing date yeah he did yeah nice dude um [Music] so we're gonna go here and now i'm gonna go ahead and say okay so inside of here i'm actually gonna have three things okay so i'm gonna have three different parts i'm gonna have live video for a video filling activity okay so inside of this div i'm gonna have a div here and i'm gonna have three divs i'm gonna have a div for the first one i'm gonna have a div for the second one and then i'm gonna have a div for the third one okay and don't excuse my spacing okay dude you're sourcing thank you so much cody cleverly appreciated uh victor oh from africa thank you man appreciate you how do you do all these youtube on everything uh yeah man it is tough but we keep going ab guy says i've joined the course hey amazing dude welcome to the pop fam all right so now i'm gonna have four we've got these sort of you know these divs inside of it and then each one is gonna have a paragraph text and the icon now i'm gonna go ahead and paste these in and i'll explain the values okay so the first one we're gonna see a video camera icon with a height of seven uh the text is red five hundred and then we've got the a p tag with the text is extra small so that correlates to font size and then we're gonna say after the small screen so when it gets bigger screens we're going to change it to a text of uh sort of small which is actually pretty big and then on the bigger screens text base which is actually a bigger than small size okay so i'm going to do that passing through to the third one as well and there's a reason why the middle one's a little bit more complicated but i'll show you in a sec okay so we're gonna have the happy icon okay so we've got the happy icon as well and that one's gonna be yellow and so you see like we're basically building out these one right who's coding while watching this oh yeah let me know guys let me know all right so the final one is actually going to be this one right here okay so i'm going to go ahead and pop in this one here okay so camera icon text green and it's the same principle okay now how do i get this to look a bit more nicer i'm going to basically go ahead and make this a flex box with justifying it evenly so they get like an even spacing right so justify evenly give it a padding of three and a border top okay and then let's go ahead and hit that so wait for it there we go looking nice okay and then what we want to do is for each of these classes right so oops each of these divs i'm going to get makes basically make a custom class right so i'm going to say let's just call it input icon okay so we're going to say input icon now for input icon i want to make a custom sort of utility class so i'm going to go to globals and i'm going to say dot import icon right and then to write some tailwind i need to say apply and then what i'm going to do here is i'm basically going to go ahead and start this out so these icons are going to have they're going to be flexed right so you guys are going to start seeing these things come into play so it's going to be flex so drop onto our line we're going to center it so item center so item center you'll see everything the text come into the center i want to space them so space on the x-axis of one you'll see the text shift a little bit away from the icon and then when i hover over them i want the bg's or the background to go to a gray of 100 i love saying that bg and then flex grow i want them to each grow like if they have the space that will actually take up the entire container i want to justify them so they're in the center of the um center of the element padding of two i want to make them a bit bigger right so if i don't have padding of two you see this like that if i give it a padding of two it becomes up right which is nicer right so padding of two um and then we're gonna go ahead and say rounded excel rounded excel and then we're gonna say cursor pointer cursor pointer and then now bada bing bada boom look at that awesome looks clean right so uh welcome back sunny pharaoh dev what's up man all right um let me go ahead and check something out one second guys how many likes are we at right now i think we are going crazy i think we're 870 god let's go i really want to hit a thousand just for the tech issues that we had today i have to i feel like we have to hear a thousand right let's keep going so we've got this happening right so these three things now i want to have it so you type in hello enter and then we send a message to firebase so at this point let's set up firebase okay so um just need to know the fundamentals amazing stuff man something is this good practice with work without classes yes right um so now i'm going to go ahead what we do is can we do to see the main streams every week i will try my best man i was up till two o'clock last night coding so crazy firebase.google.com is where you want to go to next now we're going to set up firebase firebase is a suite of tools provided by google they allow us to have a real-time db uh and authentication and other stuff we're not using the authentication today we're just using the db so i'm going to click go to console all you need is a gmail account okay um and then you're going to go to add project once you've done that we're going to type in facebook to and i'm going to do youtube okay then we're going to hit continue i'm not going to enable google analytics create project cmax i will try man are you going to do the messages from facebook as well so the posts that you can do so these posts are actually real time posts okay so we'll have the real-time posts behind it and guys if you haven't already first link in the description sign up for the full stack developer five-day secret challenge okay so join it right and let me know if you joined it all right so we're going to go ahead and continue through now what we need is the configuration okay so we're going to go to this little cog project settings i need to connect my next js app up to firebase so i'm going to click on this and type in facebook to youtube and then we're not going to host it so register the app what extension do you use to inspect tailwind classes that's actually a very good question there just type in tailwind css in the extensions and it will come up it'll be the first one that comes up and dude that is amazingly important to have okay so very important to have that it's actually this one right here i'll show you so it's um it's actually where is it gone oh no okay freeze uh tailwind tss you need that honestly it's a huge must if you're doing tail and css okay so make sure you add that in and next year is plus firebase dude we're doing everything plus next next auth as well right so i'm going to grab the config copy this and now i'm going to go to my build and then follow me now follow me okay we're going to go ahead and do command j i'm going to open up a second node um sort of things i'm going to say split zsh i don't know there's a new sort of um ui on i'm using the beta version so it's fine but here basically go ahead to yarn add firebase right now while that's installing i'm gonna go ahead and go to my files and i'm gonna go ahead and do the following i'm gonna go to my next.config.js level and i'm gonna type in hit new file and firebase.js okay now inside of here i'm going to paste that config that i had earlier i'm going to import firebase from firebase okay now oh 25 away dude so close let's go nearly at 900 likes that's incredible i love you guys all right and then what we also need to do is we will be using firebase storage today okay so in order to use it you do have to explicitly say that you're going to use it so we're going to do that right it's what i've always you might have to look at inside this terminal splitting you could do on the old one gabriel as well it's the little sort of window icon you just click that and then it works i literally always code like this with two uh terminals um okay so now what i'm going to do is i'm going to initialize my app okay so i'm going to say const app equals and this one's important right you need to check if you've already initialized it because we're doing server side rendering which means there could be edge cases where we've already rendered it on the server and then we try and render it again so here we say if the number of apps initialized is like you know if it's if there is none because we've got the bang here then we say firebase don't initialize that so firebase.initialize app okay and then what i do is i pass in the firebase config okay now if it's not then i say firebase use the existing app so firebase.app okay so that will use the existing one that was initialized once you've done that i'm going to get access to the real time db okay so while we're going to be using firestore sorry so i'm going to click on firestore and i'm going to quickly set up a firestore database now firestore database is actually a nosql sort of supercharged db okay so we're going to start in test mode and then we're going to go ahead and click on enable okay now with that bit done what we're going to do is we're going to do cons db equals oops um nope go back go back go back back come on all right let's db equals app.firestore okay now this will go ahead and actually set up the sort of our connection to firestore and then what we're going to say is const auth equals um although we're not going to use authentication today we're not going to use those and we're going to use a storage instead sorry when you use storage we're already using next auth for authentication we'll say firebase dot storage okay and then we'll do this and then i'll say export um auth db and storage okay and we'll hit save nice valentio says that is so sick exactly dude damn something with a fresh cut yeah man you know how we do it we've got to stay fresh while we're doing these hour long streams oh we're not using all sorry i don't need that okay hit save cool so now we prepared everything right so the goal is that we have posts in here and then these are going to resemble all the posts and then each post will have the information inside of it that's going to basically that's what we're going to need now we are going to make use of storage because what we're going to do is we're going to have the functionality inside the app where you can go and type in hello world for example click on photo and video and then what we're going to do is if you click this it will actually come up here as in we've actually attached a photo to the post and then when you hit enter it will go ahead and submit that right now the reason why i'm not going to show that is because i have locked the database otherwise the test one's going to get spammed so if i try to submit that now it wouldn't work um otherwise sunnysanger.com will get all sorts of stuff all over it all right and that's that's not something we want so i'll show you how to do it now so what we're going to do is we're going to go inside of our app okay we're going to pull up our sort of application so we can see it nice and then we're gonna go back to our input right so our input box now this is where a lot of the logic comes in so if you're feeling tired wake up right so now what we're gonna do inside of our input box is go ahead and implement the functionality to uh to to go ahead and post something to the db okay so first thing we need to do is i want to just post simple messages that's the first part right uh what's up thomas campos hey everybody hey sonny um what's up man so first thing i need to do is i need to get the text from this field how do i do that right so what i do is i use something called a reference now you can use state but reference is more efficient so we can say const input ref and here i'll say use ref and i'm going to initialize it with a value of no to begin with okay now we do need to import use ref from um there we go from react and i'm going to go ahead and copy my input ref this is going to reference imagine like a big finger that's pointing towards the input reference right so i'm going to copy that go to my input field where it says what's on your mind and i'll type in ref and i attach it so now i've got a reference to that input field if i ever need to get the value okay uh bishop says why don't you use class-based components they're oh dude you shouldn't be using them uh you should be using functional you should maybe know how to use them but they're not the way forward if you want to go ahead and you know become a modern web dev right um so now what we're going to do is i'm going to first block someone if so we shouldn't allow someone to send a post if the value of the entry field is empty so the way we do that we say if the input ref dot current whatever it's pointing at dot value so if the right now is empty it will just return out of the same post it won't do anything after that right but if we do have a value in there it will continue on right so what we're going to do is we're going to get our db object so i'm going to pull that in from my local firebase file then i'm going to say db.collection and remember i said a collection of posts is where we're going to push the message to okay so now i'm going to say add a message to that post okay simple pretty simple right and then what i need to do is i need to push in a bunch of things so firstly i'm going to push a message in this is going to be the input ref.current.value okay so remember this is going to be whatever the user's typed in here right and then what we're going to do is we're going to say the name so what is the name of the person that's going to come from session.user.name okay so we're going to get the name like that then we need the email because it's always handy to have so cestro.user.email then we're going to have image and that's going to be session.user.image and then we're going to have timestamp okay so timestamp now timestamp is going to be an interesting one so in order to get a timestamp which means that my timestamp is the same as damien's timestamp or is the same as valencio's timestamp right so it doesn't matter where we are in the world it's just the same timestamp we're going to use the one that's where the database is actually located right so what we do is we say firebase dot firestore dot field value right field value dot server timestamp and this gives us the server's timestamp okay so this means that it will go ahead and add in the post to the database right which is clean right looks really nice okay so when we do that now right if i was to go ahead and then after that say input current value empty right so we want to empty it out afterwards so that way it kind of clears the input after we send it let's see if that works right let's actually see if that works so what i'm going to do is i'm going to open up my firebase on the right hand side right and then i'm going to go ahead and sort of you know push your messages i'm going to say hello world all right someone say hello world and i'm going to hit enter right so it cleared and if i go ahead and refresh firestore whoa damien 900 is it 900 yeah no we can't be at 900 yet damn we're 208 that's incredible how about to make a real-time call oh we need that look at this guys check this out look it post a message right now check this out if i say in um what's up papa fam what's up papa fam enter we should see some real time functionality here so let me go ahead and see if it's popped up there we go look at that guys popped in straight what's up pop the fan nice valencia there we go 900 that's on thank you so much guys that's incredible we've had so many tech issues and fights that we've had with the you know slow computer and network issues and you guys have been incredible i think the final go now is to get to 1k right so we've got quite a lot left to build let's keep pushing and let's get to 1k right we've got image upload functionality left so as you can see we've got some data being pushed into the database right so my proposition now is let's go ahead and implement the upload functionality right then we can let then we can render out the uh the message the sort of you know the rest of the posts okay so let's do that let's go 1k ian that's it man let's do this i hope you signed up to the challenge dude all right so now what we're going to do is we're going to go ahead and uh implement that functionality okay so the way that we do this now is a bit more interesting right so we need to go ahead and connect to our firebases we need to use the web a file picker api uh and we need to go ahead and push to a firebase storage how do we do that right so let's go ahead and break it down so the way we do it is we simply go ahead and we need to go ahead and actually have a hidden input field right so it's actually very clever how this works so where we have the camera icon so right here what we do is we actually have an input field but this one is hidden right so this is actually the type of input is a file so it's actually a file picker but we hide it okay now this has a few different functions it has an on change which means when you select a file it's going to trigger off a function so in this case we're going to have some kind of function called add image to post because whenever you select a file like a picture it should add it to your post right so we're going to go ahead and create a function for this right um what's up esque official nice to see you dude um and then here i'm gonna say const and then we're gonna go ahead and do this okay nice and then this will come with an event as well yep okay nice now what we're gonna do this guy is something else you're a legend please are you the guy answering stack over flickers i love that i've never heard that one before but i love that because i always wonder i'm like who is the person like who has all the answers on stack overflow right but again like you saw we got stuck today we just continue on like guys this is what it's about right don't quit right this is why i want the pup this is why papa fam is the best community in the world right like for coding because we just we work together that's why i made that's why i invented zero to four stack hero as a community that's why we do what we do right so here i'm gonna go ahead and add image to pose connected and i also need a reference which points to to just like the input reference i need a reference here which will basically we'll call it the file picker ref right and i need to create that reference over here right so const file picker oh nice a shout out to sunny how are you friend from australia nice i'd love to see everyone international dude i'm good thank you we're struggling today but we're gonna get there i'm gonna get there all right um fire picker left there we go okay so now what we're gonna do guys is we're gonna have it so that when we add a image to the post right so there's a few things that we need to do right now okay so i need to have a bit of state inside of the application right i need to have a piece of state which which retains that image okay so if i was to go ahead and pick an image let's go ahead and say this one for example um let's quickly i don't think i selected it properly let me go ahead and do this um of course in edge case right let's go ahead and do refresh say i picked the facebook image there we go yeah so i need a piece of state that will hold on to this right so how do i do that so i say const and in react we have state so i'm going to go ahead and create a piece of state called let's just call it image 2 post right this would be set image to post and this will be equals use state right and so i'm going to initialize it with no all right now what i want to do is when we actually add an image to the post right so right now i've got it so that when we click on photo video right so where's my photo video button here okay so what i want to do is i want to actually have it so that where is my photo video so here basically when i click that div like this one right here i want to simulate a click on the button for the input the hidden one right which means it will open up a file picker right which is actually pretty genius when you think about that right because then it's actually a very nice approach to fixing this so you say file picker ref.current dot click right and what this will do is it will click the hidden button with the input that opens up you know the the sort of file capture right so right now we've got use state is not defined so we need to go ahead and import our use state so here i can go ahead and pull in my use date like so so go ahead and do import there we go awesome right and then now what we can do is if i click here oh boom nice look at that right so if i go ahead and select something okay nothing happens but we get the open it picks up right why are you not making input show up as a model facebook is more than dude have you seen how much we've built today right like this is only two hours 45 minutes that's why i'm not doing it man right um so it takes time to do all this stuff right so obviously we're just trying to get as much done right so i'm gonna click this and now when we do that it comes through uh through this event here right so when i selected the file we actually got red in there now what i need to do here is actually cleverly like smart like there's a there's a special api called uh file reader okay so what i need to do is i need to initialize something which can read that file so i need to make something which can initialize that file so it's called a file reader and what we do is we say if right e dot target dot files so if we selected a file okay so i have to use the selected file then what i say is i say reader dot right um thank you damian i will um symax i'm not going to have water breakfast i'm like the bladder is kind of on the edge right here i'll say read as a data url and then what i do is i pass in the uh the the file that the user selected e.target.files and then zero okay right so that's all good now what i can say is it's gonna read that file right and what it what it does is because it's asynchronous which means it's you don't know when it's going to come back essentially right so what we do is we say reader unload right so when it loads i'm going to attach a function to it okay so when it loads and when that reader event comes back right i want to do something with it and in this case i'm going to update my state i'm going to say set image to post as reader event dot target dot result so what we've actually done here is we've take the option that the users clicked so the file they've clicked so e.target.file we read that as a data url when it comes back it will come back as a result which means it's basically like a base64 encoding right jimmy wong prom what's up man good to see you um [Music] kickstart yeah this will be uploaded afterwards um here it is on the time for deep sun yeah exactly so here there we go right so if we go ahead and hit save now what this will do is actually load that into our sort of you know our store right so i'm going to make a little helper function here um called remove it load that into our status make a new one called remove image and the whole job of remove image is it basically just sets the image state to no again right so i'm going to make a helper one um and i'm gonna say set image to post no okay and then do this and guys if you're watching i can't stress enough like if you're not subscribed go ahead and hit the subscribe and the like button because it helps the channel grow and there's still 60 percent of people that aren't subscribed which is crazy right to subscribe i have consistency though yeah man all right so now what we're gonna do is we go we've got the add image to post functionality down right which means that now we technically can render this on the page somewhere right so where we have our submit button and where we have the form next to it over here i want to show a preview right if i've selected something i want to show a preview of that michael what's up man i'm so inspired by you man thank you so much dude appreciate you we're gonna say okay if there was an image to post right so if something was you know if something was added into our store then i'm gonna render out some ui right the ui i'm gonna render is a div right and then it's going to be an image now i'm going to render an image tag because it's going to be a hard-coded value because it's going to be an actual base64 image not a url so we're not going to use next for that so here i'll say image to post and then i'm going to apply some styles to that one so i'm going to actually go ahead and say um class name and let's go ahead and do this so for that image i'm going to say it should be object contained with a higher 10 and then i'm going to say the div that we're actually going to show the image in right if you click it right i want to basically remove the image right so if you click that i'm going to remove the image from the state otherwise that's sort of design behind it i'm going to say it's a flexbox flex column and this will make a lot of sense right and what we flex him with it's going to be a remove p tag okay so it's just going to be a p tag that's underneath it as well and this is going to be a small bit of red text which is central right so flex column and then here what i'm gonna say is keep with me guys we're so close right flex column uh here i'm gonna go ahead and do the following so when i kind of you know hover over it i want to have a filter that's applied and here i'm going to say okay hover i'm going to change the brightness to 110 okay change by 210 i'm going to apply a transition transition and then make the duration 150 okay transform it as well so i'm going to also do a transform so i'm going to increase the scale when we hover by 105 so scale 105 okay and then i'm going to make a cursor pointer right so cursor points so you can see it is actually incredibly powerful right like what you can do with this stuff so if we done all that correct right in the first time then what we're going to do is we're going to test it right so now if i go ahead and select a file i should see a little preview pop up on the right so if i click on facebook whoa look at that guys now i don't like one thing i don't like that my cursor pointer oh that's why that's a pointer right and there you go nice look at that guys and if i click it boom removes the picture that's incredible right that's incredible and we're pretty much going good uh cesar what's up man he said what's happening before i climbed a mountain i went to ben nevis and i climbed the mountain that's why i was kind of off for a little bit uh nice take a little bit of a break sometimes but we're back strong now and make sure you sign up to our challenge dude because we are going live and hard next on the 19th pretty much 928 guys this hit to a thousand likes i love the blue bottle yeah it's a chili bottle they're called chili balls very nice right so we have the image in state okay so the next step is how do we upload the image from state to the database right so what i want to do is i actually want to incorporate this step in after i've successfully posted the message so after i post a message okay i will get the document back that we posted the message into okay then i'm going to say okay if there was an image to post so if the user had selected an image then i'm going to do some funky upload stuff right for the image right so some kind of funky upload image stuff for the image okay so here i'm going to say const upload task and bear with me on this one right the way that this works is we basically go ahead and i'm going to use that storage right and this storage came from firebase so we initialized the value from here i'm subscribed from three accounts i was using my pc1 power card oh man thank you so much dude i'm a big film samurai thank you guys so much appreciate it alright so here we're going to say storage right and then i'm going to say dot reference so basically what we're doing now is we're kind of putting our hand into the sort of um the storage bucket right so on firebase on firestore like not on firestore sorry in storage we're basically going ahead and creating a folder here called posts right it's going to be posts and then it's going to basically have a similar structure to what we have before so we post and then i want it to be the document id so doctor id okay and now with that said what i'm going to do is i'm going to push the string so this is actually a pretty cool thing what i'm doing here is i'm going to put a string and this is actually the image to post right so it may be confusing because you're saying it's a string but it's an image so this image is actually something called a base64 encoded image which means it's literally a a bunch of letters which actually build up the image right so what we're going to do is we also need to include something called data url now think about what i've done here i read it in as a data url and i'm uploading it as a data url so you see how the two coming to come in hang here okay we're back we're back we're back we're back is the stream still good guys please tell me the stream is still good valencia the guys are we good i think we're good just refresh i think we're still good wow i'm pretty freaking out right now i hope i hope to god that stayed through oh thank god wow i was thinking i was like we came so far holy crap okay we're good we're good wow man my heart jumped my heart jumped out my chest all right oh my god okay upload tasks let's keep going wow i'll load us then we're going to say okay when the state changed right so this actually comes back from the api so basically when the state change in any you know way like what we can do is we can actually get a progress here but we're not interested in the progress and we'll say no but if there was an error i can do something with it in this case i'm just going to say console.log the error so error console oops console.error the error out so i should be able to see it and then the final argument is when the complete right so this is when it completes okay so when let's just say when the upload completes there we go nice safe ah let's get the crap on me dude all right so now this is basically we're gonna start the upload here and then we basically listen to the state change and this is when the upload completes so this is if an error happens this is how we get the progress but i don't do anything with it and this is the complete state okay so what i'm going to do now is the final step is i basically go ahead and say storage dot okay reference i go into the posts right that i previously did but there's another way you can do you can either do it like this right so i'll show you two ways you can either do it like this or so you can have posts for example like this or you can say child because there's two ways you can do that right i'm gonna say doctor id and then i'm gonna say dot get download url so this will give me a url that will basically be able to download the picture from okay so i think about it we're gonna use that on the front end and we're gonna store that in the db as part of the post okay so the next step is i'm gonna go ahead and access the uh so we get the url here and then i'm going to go ahead and say db.collection of posts right so think about what i'm about to do here we're going to the posts i'm going to go into the document that we just uploaded so the one that the user just submitted right and then what i'm going to do is say set okay then i'm going to pass in an object here and i'm basically going to say the post image is set to the url so this will be a download url now whenever you set be so careful okay you have to include an additional option which says merge true if you don't do that it will literally replace it so you'll lose all of this like all of this stuff and it would just say post image well you don't want that right so that's why you've got to be very careful with this okay so let's give this a try right i think we've done we've actually pretty much done that right so with that said now we should be able to upload an image so if i go ahead and refresh wait for it wait for it if i go ahead and say hello world all right and i go ahead and upload a photo video let's go ahead and do this boom and then let's go ahead and hit enter boom okay so you see how it went ahead and sent the post okay so now if i go ahead and refresh my firebase storage bucket we should see it being uploaded to firebase so now it should be in our firebase bucket let's go ahead and see um oh okay hopefully hopefully oh no okay the reason being rules here we go the rules all right so if i check f12 it would have said you're not allowed there we go see user does not have permission to access that post so in this case for now i'm not going to go through security rules i'm just going to say allowed read writes right so i'm going to publish those rules you're going to have to change your firebase security rules in order to do this and then i repeat the experiment so let's go ahead and do a refresh awesome stuff guys let's keep on going and now i'm gonna take what's up pop man what's up papa i'm going to include a photo or video i'm going to go ahead and hit this hit enter and let's go ahead and refresh the firebase storage oh dude thank you so much to czar dude however i saw in your last previous room 38900 yeah man we're growing quite fast it's crazy man thank you if we click him to post now look at that guys post and if you click this boom facebook there we go lovely right and now what's amazing about this is this will give us a download url so this one would have actually enhanced whatever we had inside of firestore right so inside of our firestore db there would be a picture one of them that post image there we go and there you go that is literally an image of that when i typed in whatsapp popperfam and there's the image so now we build the ua right mike said i'm about to ejaculate right this bird's amazing thank you so much dude honestly this was a really good one like in terms of even functionality and stuff right 60 to go guys come on we can hear 1000 likes right we are so close all right we scared the crap out of me wow when i thought that we lost the connection oh my god heart jumped down my mouth all right so now we can push and you see how this is a component by itself that can do this right so what we're gonna do next is we move back over to the feed right so the next bet is to go back to the feed as we go here we go back to our feed component okay and then what we do is we say um right we go ahead and we put in the posts okay so now the next step is posts right now posts what we do is we're going to go ahead and create a functional component for this we're going to say posts dot js right and i'm going to underscore rsce oops underscore rfc e there we go and then i'm gonna go ahead and jump into my post okay so i need to import this from here post there we go i'm gonna jump into posts you can do it wages will be good for you to learn thank you man yeah eric holland this is great stuff appreciate you dude thank you so much um post okay so now what we're going to do guys is inside our posts we're going to say uh so firstly i need to get that information that i pushed into firebase right so in order to get the information these posts i could do the old way of doing stuff you know i mean but there is a very nice hook for this right it's called react firebase hooks and this makes life so simple now we already done the firebase config which means i can use this library and it will have a stable connection to firebase okay so i'm going to do is i'm going to do yarn add and react firebase hooks this will give me a very nice little library that i can use so i'll say yarn add react firebase hooks now this will give me an awesome library that i can use to go ahead and pull that information in a real-time version right so at the top here if i go ahead and import use collection from react firebase hooks firestore then what i can do is before when i render this i can go ahead and say const and i get three things back i get the real-time posts right so real-time posts i get the loading state if it's ever loading and i get an arrest date okay then i'm going to go ahead and say use collection right so it's a nice little hook and then what we're going to do guys is we're going to place basically put in the directory location here okay so this is basically where you know where where are we looking inside the db so we need to go inside our db so we need to put in our firebase db object let's say inside the collection of posts right so this makes sense now right and then what we're going to do is we're going to order by the timestamp so remember i ordered by the timestamp and i want the most recent ones to come to the top so i'm going to say timestamp descending okay nice all right so anymore five is gonna come find the url um i'm not sure what you mean dude um challenge duplicate website any easy huh nice dude um so here we're gonna hit save okay so this will give me the real time post now okay so what we can do here guys is we can actually say um i'm going to basically go ahead and render out so here i can say real time post dot map okay uh actually now we're gonna say real time posterity.docs right so this gives me a list of docs and then we map through and we say okay for every single post i only want to render out what a post right so i'm gonna render a post component now this post component i'm going to create so i'm going to go into my components create a post.js underscore rfce wait for this eslam thank you so much dude appreciate you and then we're going to pass in a bunch of props here okay so this was the interesting part so inside of posts right what i'm actually going to do is i'm going to pass in all of the the following values okay so this is the key value pairings that you need to be considered with right so we've got the key which is the post id and then for any of the uh data items inside you have to access the data object and then the name may uh email and so forth and remember this is what we pushed into firebase not so long ago right so this is where like this would be the post dot data so you'll be inside here and then you can get access to the information okay so this will go ahead and do this uh just a few spoiler for the five days just for us haha ah dude i'm gonna see i'll take hints right you guys can go ahead and throw it up that's the curiosity factor right so what i'm going to do now guys is i'm not i don't actually need the loading and aerostate so i can get rid of these for now um and then the interesting part is to actually go ahead and consume this now okay so inside of the post firstly i'm going to import my post there we go and then inside of the actual post element itself or component sorry i'm going to go ahead and consume all of those as props okay so we've got the following props coming through on this side right nice now i need to build out a post okay so i cannot read docs of undefined this makes sense because there is a point in which uh this is actually loading right so it's not initially there so we're going to do optional chaining and then we go ahead and do that okay so now the posts are actually coming through we're just not rendering anything so if i do h1 just say a post right watch this guys wait for it hey look at that smash the thumbs up button if that's pretty dope all right that's literally a real post right so that's actually a post that's coming up on the screen right so that's looking pretty good at this point um guys 960 likes 40 likes away from 1000. let's keep going so we've got a post here let's change the music up a bit right so now we've got the post okay so what i'm going to do now for the post is get the uh so the surrounding container is actually going to be a flexbox so i'm going to say class name equals flex and it's going to be a flex column right and then we've got the post inside but that's not going to be what we're going to say we're going to have another div right inside of this one i'm going to have the following so we've got this top section over here this top section and then we've got this text over here right and then we've got the image and then we've got this bottom banner section okay so a few things to consider with what we're about to do right now okay so i'm gonna go ahead and say right now that the the flex column the div um yeah we're gonna have another div inside of here and this div is gonna have an image tag and this image tag is going to have um a source which is going to be the image of the user and the reason why i've done this is because we may want to go ahead and consider um like we might not always know where that image is coming from and then height of 40 okay and then i'm going to go ahead and say class name rounded four to because you can make that an xjs image tag it's not the worst thing in the world actually rounded four hit save okay and now you can see that the post image the so it was me who made these posts so my face will come up nice and then what we're gonna say is we're gonna have a div and this div is gonna represent this information so sunny and the timestamp okay um please don't spam the chat dude um i'm no longer yeah this is a papa fam now we don't talk about any of that stuff right so i'm gonna go ahead and say i'm gonna have a p tag and then here we're gonna have a the name all right so we've got the name and then we're also going to have the timestamp right so the timestamp here is interesting so we're actually going to go ahead and do the following we're going to say we're going to have a p tag and then this i will explain this bit of code in a sec hey sunny dude you're killing kente wondering where you were man thank you so much dude i was climbing the mountain yeah that's the truth right so here um you can see like we both popped in the name and the date now this is a probably a bit of code that you might have seen in another build but basically what this says is it takes the timestamp we get from firebase it converts it so two day is converting it in the firebase fashion and then we create a new date from it and then we convert that date to a local string so it's basically going to be your your locale local to you okay so looking pretty good okay so looking pretty decent so far right so i need to customize the name and i'm going to say this is the class name and this one is going to be a font medium i don't want this to be you know boring and bold so it's going to be a font medium so a little bit more you know a little bit more size to it and then what we're going to do is i'm going to get this div and i'm going to go ahead and not this one actually we're going to go into the outside surrounding div and this one is a flexbox so this one is going to say flex and it's items center and it's space x of 2 and now you'll be able to see that space x of 2 gives a little bit of distancing from each of the items okay now the surrounding div this one we need to obviously style it to be white right so it's going to be a padding of 5 and we're going to do bg white right now bg white this is obviously going to be the post itself right so that looks pretty good and then the margin top of five to push it away from everything else okay the next thing is to do is make a little bit round right are you live on twitch tune no you know what i didn't actually double stream it because of the tech issues um so i left it because i was kind of nervous about how everything was happening um shadow sm i will jump on it if you guys want me to though right so there you go look at that we've got a very small shadow underneath there it's very hard to see but if i go ahead and make it a bit more drastic like for example if i do an xl you guys can see straight off the bat there you go right very drastic shadow if i change it to sm we're on a very subtle sometimes the subtle stuff does the trick all right now we've got the top portion of the build right so that bit right so this is rounded top so i need the top surrounded not the bottom okay so the second thing we want to do right we've done that first bit so the second part is having the message okay so we want the message underneath so where we had the date right we're going to go outside that div outside that div and then we're going to have the actual message this can be in the form of a p tag okay so it's going to be a p tag with the class we're gonna say padding top of four because you want to pad out a bit and this one's gonna have the actual message contents hit save and now we should see that what's up pup fam hello world and all this good stuff and if i type in yo oh look at that guys nice real time right so again there see how things just snap together right so we've got the p tag coming in we've got the div and then after that i want to say okay only if there's a post image right only if there's a post image am i going to show something like that right so i'm going to say if there's a post image i want a div i want to div i do want to use an image right so a special image all right so next share style and then what i'm going to do is import it from next.js and i'm going to say okay the source is actually going to be the post image right so this is going to be the post image like this and then we're going to say oops woman in post image yes and then the object fit cover so that way it doesn't kind of get distorted object fit is cover i don't know if i'm always on your project no doubt guys i'm a popular guys do it join to the zero to four seconds yeah man exactly object uh and then we're gonna say layout fill and this will basically fill itself relative to the parents if you don't make the parent relative that is a dangerous property okay so don't use that willy nilly where you have to make the cast name relative on the parent otherwise it goes and it gets pretty crazy kaios can we comment um oh yeah once i deploy it i guess all right come on we're so close to 1 000 likes guys wow this is crazy let's keep going relative and then you have to give it a height okay so here i'm going to say height of 56 and then on the medium screen i want to kind of increase that height i want to say 96 on the medium screens okay i'm gonna do bg of white okay so now wait for it guys you're gonna see it boom look at that that's i mean it's pretty pretty damn impressive right like here if i was to go ahead and let's just refresh and just pop a picture in and see if like he's lying man this is this is fake right so let's go ahead and say uh yo papa fam and let's go ahead and add a picture in and let's add one from let's just add one of me being super surprised and then hit enter right look how it's asynchronously gonna pop in wait for it wait for it and this is lazy loaded in right so that's why it's not going to be like super quick because it's not going to stall your app there you go nice right that's amazing right so now what we do is that we'll go ahead and post um so what we can do now is actually go ahead and set up the footer stuff right so the like comment share right so like comment share i want to go ahead and set that up okay so these are going to be some things underneath right so this is going to be the footer section of the post so we can say footer of the post and here we're gonna have um a div and it's gonna have three sections inside of it yeah um so here i'm gonna go ahead and say div we're gonna have div one and this is gonna be the first section the df2 and then we're gonna have df3 okay nice um and then what we're gonna do is inside of the sort of let's go ahead and start the actual uh the the main component itself first csflex it's justified between and then we're going to say item center and then we're going to say rounded bottom uh 2xl okay background is white and then we're going to say shadow md uh text gray and this is setting ourselves up for what we're about to do text square 400 and i want the border top i want to border at the top okay and it's not going to show anything because we don't have any contents in the children okay so i'm going to need three icons so i'm going to do an import from hero icons let's go ahead and pop these in from hero icons so like so yes i'm popping this in on hero nice hit save there we go and then we're going to go ahead and say um there we go we got that and um div div div okay cool so we're gonna go ahead and grab the following so each of these divs is gonna have a similar structure okay they're gonna have the first one it's gonna have a thumbs up and then it's gonna have a p tag which says like it's gonna be a small bit of text which is a regular size okay so you see it looks more regular like okay and then we're gonna have a similar thing with the chat alternating icon so this is gonna be like a chat icon which says like comment right and then we're gonna have the similar thing for the final one which is a share thank you so much thunder appreciate you dude that's a five dollar donation coming in clutch appreciate that man and then let's go ahead and pop this in awesome stuff guys 26 keep on going god damn it guys we are so close this is crazy all right so now i'm gonna go ahead and pop in three different class names so we're gonna say class name so where is it going uh class name okay class name equals and then here i'll say um input icon so we're actually using that custom you know the custom one that we did earlier right so if i go ahead and apply that remember we created an input icon which is our clust custom one that we did earlier right um so that's actually going to be reused here and then what we're going to say is that each one has rounded none right and i'll show you why we do this right we say rounded none and then what this will do is we'll go ahead and actually so wait a second me go ahead and just double check what's happening here we've actually set this one up already for us so we don't actually need to do it the way i was thinking um but what i do want to do is i want to say rounded bottom left 2xl for this one because then i want this corner to be rounded and then for this one i'll say rounded bottom or right and to be honest i think i actually did it outside of it but it's just fine let's just keep it in there for now safe proofing awesome stuff now look at that guys ba-boom looking clean right fully bloody responsive as well yeah damian says you're the star i'm worth every like you're teaching as well so thank you so much guys appreciate you look how cool that is man like look how clean that looks right say awesome there we go boom nice okay so the next step is to get the widgets done right so we're so close guys widgets all right this one's actually pretty simple to be honest right widgets let's go ahead and pop in the widgets right and if you're enjoying this remember smash the thumbs up button sign up to that challenge and subscribe if you're watching and you're not subscribed then it's just like you just you know just give me a like just give me a comment that's what i'm asking for no comment i subscribe you know daniel torres what's up man let's go ahead and pop in a widgets component so we're going to create our widgets dot js and this now is responsible for this right hand side so we've got the contacts where we've got jeff elon bill and the rest of the gang and then that's going to be pretty much it guys we're almost there and then we're going to do a little deployment and then boom all right so widgets so now what we're going to do is get this up and running so for the widgets we are going to have um where is it going uh feed there we go and then up a level so it's not in there it's in index there we go here we have server side rendering we have tailwind we have next to authentication we have so much happening here all right widgets let's go back to widgets and then let's go ahead and build out our widgets guys all right so for the widgets what are we gonna do right so we're going to have a like a data set so this is literally going to be the contacts right now obviously this can be poured in from anywhere you want right so i'm just going to have a hard coded data set but the goal here the reason why i've done this is that you can identify that it's actually pretty easy to replace that with a database right you could easily store that in a database and pull from the database and so forth okay we will be using the typescript in this future bills yes right um so widget right so what we're going to do now is we're going to go ahead and have a div well firstly we're going to have a div for the contacts and then these three icons right so i'm going to go ahead and import those three icons firstly because we're going to use them all right so i'm gonna go ahead and import those three icons for the top oh damien says we're coming in we're coming into a thousand let me go and see oh yeah nearly a thousand let's see uh 999 let's go thousand likes i don't know how i just that's incredible from a bad stream where the crashes with everything breaking to a thousand likes that's what i'm talking about that's why the pub fan crushes guys like we are almost at the end of this build and uh i just wanna say like massive massive thank you to everyone that persevered with all of that right like you guys are absolutely unreal right so that's why i'm doing the 5d challenge for you guys because you guys deserve more you guys constantly push me on that's why we do it right that's why we do this i don't have a horn i don't have it so there you go guys amazing stuff now let's finish strong right this completely finished strong so we got the widgets right um so now what we're going to do is well yes the whole video will be uploaded afterwards right so i'm actually going to create a contact component for each one of these right but before we do that what i'm going to do is i'm going to have a div that has that contact information at the top okay um yes i will show you elias how to implement subscriptions or payments and you can actually check out the netflix build for that one um but i'm going to go ahead and pop in this little snippet here okay there's a h2 which says contacts okay now also we've got the scroll bar i'll show you how to hide that but here we've got contacts and then we've got a flex box with a space of two between the elements right so you can see what we're going for here and then what i'm going to do is i'm going to say class name flex of the above container so they should be next to each other i want to do justify between so let me go ahead and jump this in justify between justify between lazy loading is applied wherever we have the image tag so the actual nexus image tag by default it does out of the box it does lazy loading and it converts it to webp format which means it's super optimized and uh it's going to be incredibly efficient compared to a png or jpeg all right hit save on that and there you go look at that it's already looking pretty clean right um oh my god 39.4 k subscribers wow we grew like a couple of like 600 during this stream guys that's crazy wow and then okay so we got that bit that's cool that's looking awesome and then what we're going to do is outside on this div i'm going to say okay it's going to be hidden so class name last name is going to be hidden and and so we're going to hide it normally right but when we hit a large screen then i want to kind of come in with the flex right so only on the large screen show that part right and then it should be a flex column so flex column and i want it to be a width of 60 when it does come in and i want it to be padded at two and a margin top of five okay so now if we see as it gets bigger boom contacts comes in if it's not big enough it won't be there okay now i'm gonna quickly show you guys how to you can hide this little scroll bar okay so there's a nice little plug-in called um it's actually called tailwind scroll bar hide okay so all you need to do is go ahead and open up your terminal do the following type in yarn add yarn add tailwind scroll bar hide hit enter on that and then it will go ahead and add in the package now you go to your tailwind config.js and you basically gonna go ahead and pop in the require field like so here right so you basically chuck it in like that and then once you've done that all we need to do now is where we want to hide that scroll bar for example inside the feed okay i think it's inside the feed that we do the the hiding of the scroll but yeah so it's here all we do is we say like we say scroll bar scroll bar hide and watch this and just like that boom scroll bars out the way but the functionality is still there right so this is looking pretty nice guys right pretty good and then we're going to go ahead and see when it gets smaller it hides nice and then we're going to just now need to add in the contacts okay so we've got all these contacts so how do i render out a contact so i'm going to go here underneath the div and i'm going to say okay for the contacts i'm going to map every single contact right so for every contact um whereas they're saying you are the best we will support you through all the ups and downs thank you so much man i appreciate you uh cesar says great developer thousand likes for each video as a minimum thank you so much man appreciate that so much wow that means a lot man all right so we've got the contact is now for each one i'm to render out a contact component which obviously we don't have so i'm going to have to create that right so if i go to widgets.js here the goal now would be to render out this so rather than having contact i'm going to have contact with key source name okay now contact we need to create so i'm going to go ahead and create the component here so i'm going to say contact contact.js and then inside of here i'm going to say underscore ce okay there we go and then what you can do is you can go ahead and say uh we need to start that one out all right then here we're going to have the source and the name so source and the name okay and then once we've got that happening what we're going to do is actually have an image tag so i'm going to go ahead and pop in a image tag for the contact right so this is going to be the image tag it's going to have a rounded circle with a uh cover so it's not going to distort it's just going to fit the image and but it's always spread out the source is the source that we pass in width and height 50 layout fixed so it's not going to shrink and then underneath that i'm going to have a p tag with name inside of it okay and then i'm going to show you how to add in a little dot okay so for widgets i'm going to come here and go back to our contact i'm going to import the contact save and wait for it and there you go okay so you look at that looks pretty good but it doesn't look perfect yet okay it looks kind of strange at the moment and that's because we haven't set the uh the sort of configuration clearly so it should be a flex it should be item center oops should be items in the center and you can see i'll save it as we do it so you guys can see the difference item center and then i want to do space x3 so it's going to space apart from this child mb2 margin bottom two so it's pushed away from its uh other sort of you know siblings and then we're going to say it's relative and i'm going to show you why i say it's relative afterwards because i'm adding a little green dot after right now when we hover over this i'm going to say the bg gray of 200 so i want the background to change to 200 i want the cursor to become a pointer padding of two to pad it out a bit looks a bit small and we'll say rounded excel okay um excel and um let me go let me know guys what your favorite part of the build has been so far by the way okay so just comment it right now what's your favorite part of this build been so far okay um and then the final part here right is i want to add a little online dot right so i'll show you how to add a little online dot okay so we're literally gonna do it with a div okay so this is an impressive one right now i'm gonna have a div i'm gonna say class name and this one i'm gonna say absolute is everyone there so everyone's gone quiet on the chat absolutely i'm gonna say bottom there we go i don't think we don't we think that sunny is awesome thank you david say absolutely and i say bottom of two i say left of seven okay and then i'll say i want to do a background green of 400 and then i want to do a height of 3 width of 3 and i want to do a rounded 4 and this is literally gonna go ahead and if i don't do rounded four i'll show you what happens but we literally add in a little box right you see that little box and if i do rounded four uh wait for it boom look at that and if you really want to kind of mess around with it you could do animate bounce i'll show you this like just to take the mic you could do something crazy like this that look at those little look at look how it's jumping guys look right nice obviously i'm not going to have the anime advance but you know you could do that if you wanted to right so then that's pretty good right looks pretty damn solid so right now look at what we built guys let's have a quick overview of what everything that we built so it's right now this is actually pretty much at the end point so we have our entire application working in the way that we expect the way that we want right lovely beautiful design we've got hero icons we've got a nice little kind of active states for everything nice hover effects with a little animate there you see we've got the uh complete responsive design right so let's go ahead and like make this a bit smaller see how the page completely resizes and like changes its styling as we go ahead and get smaller and it's completely mobile friendly like look how clean that looks right all from some lovely stuff right and my favorite part is logging system with next door yeah honestly i really am glad everyone enjoyed that because that was very powerful right and it just goes to show you how powerful this can honestly be with uh you can add as many providers if i had a google one in you would have google you'd have all of them pop up here right so it's incredibly amount an easy amount of uh you can save yourself a huge amount of time now i will kind of uh save something to you know like to sort of if you're if you're interested you guys can feel free to do it but you see right here right like right now if we refresh right it loads up and the posts aren't immediately available right you see how the posts weren't immediately available and then they become available whereas if you see on sunnysanga.com on the actual uh production one when we refresh the posts are immediately available right that's because i've actually added an additional server side rendering step right on the uh the finished one now if you guys want me to show you that i can show you that right now um or you can feel free to grab the papa github repo for the extended little part that we need right there right so you can feel free to go ahead and jump in on that if you would like to um but that was an extended little bit of functionality with a server side or render okay so um in fact i mean we could just we could just do that i mean we could do that right now we've been doing it for a while might as well just finish strong right so we've hit over a thousand likes why so keep on going go for it linzo said go for it let's do it we've got index right i'll show you how to do it so where we've got the server side render what i'm going to do here is i'm actually going to pre-fetch the post on the server right so i'm going to say await db i'm going to do collection of posts right do our order by order by and then i'm gonna say timestamp descending okay so timestamp descending and then i'm gonna say dot get okay so it's not a real-time list now right it just gets okay so it gets the information the next thing i'm going to do is i'm going to transform this information so when we get the information back from firebase it's kind of in this like firebase format right which isn't the best to kind of send over the internet okay so the way we got this we need to do a map to transform this so i say post.docs.map and i'm going to reshape it right so i'm going to say map i'm saying for every single post i kind of want the new post to look something like this so we do a parentheses curly brackets and then with the opens that's a direct return i want the id to be the post id okay i want the dot dot post data okay and then there's an interesting little hack here okay so typically this would be enough but you can't actually send the timestamp over without losing some critical information so when we pre-fetch we actually don't fetch the timestamp right there's a reason for that um i'm not going to go too far into it but that's actually a quite an interesting one to go ahead and do right luca says how does the share post functionality work dude you're gonna have to watch the entire video too in order to check that out but definitely do because it was a lot of fun all right so here i'm gonna pass it back through as props right so now we've got the post being pre-fetched on the server before it even reaches the browser right and then what i'm going to do now is so notice right now it's still got the asynchronous so wait for it when this refreshes watch how the posts aren't there right so wait until this refreshes oh so sorry this is um db they need to do a little import there we go db from the firebase uh config there we go and then we do a refresh now wait for this okay so you see how it's asynchronous look it's wait wait wait then it comes right but what if we could do it beforehand so i've done a server side render now we've collected the data and now what i'm going to do is i'm going to feed it through so from session i'm going to get the posts as well right and i'm going to go ahead and pass in the posts here so i'm going to say posts posts right then i basically save the file i go into my feed i consume the posts right post okay again from here and then where we've got the posts i'm actually gonna pass in those as well okay so posts and now what i'm doing is so i'm only doing two level prop drilling if you want to kind of avoid that you would push it into a store like recoil or redox and then handle it like so but now what we do is we basically handle this in a very smart way okay we now say right we now say firstly if we have real-time posts right so here i'll say if we have a real-time post right thank you so much tammy but if we have real time post then we do this okay then we kind of do all this stuff otherwise right so this is where the interesting part comes in we say otherwise all right we will render out the posts that we got server side rendered okay so what we do is instead of a normal one what we're doing we actually render out the server side rendered post okay so here i say post on my oops sorry i do post dot map like so okay and what i've actually messed up here is i've got an extra one here and this one here oops there you go okay so now what i'm saying is okay show real time okay so oops mess that one up so only show the real time post that we get we basically map to from firebase if we have them right otherwise show the one that we pre-fetched and now when i refresh look at this guys there will be no waiting look at that no waiting at all but the date will pop in when it loads okay so rather than getting invalid data if you want to kind of fix that you can fix that with a very simple check okay um so we can go ahead and go to our post bracket however yeah i know i see it it gets better it gets better as you can change that with well we've got the p tag here okay so where we've got the p tag here where which loads up the the sort of time stamp what we can do is we can actually say okay if there's a timestamp then i will render out you know i want to render out this special like you know p tag that we we sort of configured here right otherwise i want to render out a simple p tag um we're going to say p tag with a class name of just say text dash is small so extra small and then we'll say oops okay let me forget that let's just say text p type oh screw it p tag there we go p tag and we'll say here just loading so it's just going to be saying loading and then here i say class name equals and then i'll say text of extra small and then check this out text extra small and then i'll say text gray text gray of 400 hit save okay now check this out so rather than when we get the server-side render so it will immediately be available because the server pre-fetched so look at that now it says loading boom now that's incredible right there is no waiting there is no loading uh i mean loading for the times i'm sure but the actual content is and if you notice the pictures down below will only render or only load when you scroll to that point it won't just load up all the pictures for no reason it's only gonna show that picture when i scroll down to that point okay so this is literally everything completely built right this is actually incredible we did it guys across all of the sort of you know headaches that we were facing we absolutely came through as the papa fam and we absolutely demolished this right so here is today's build i'm going to give you a complete run through of what we did today right we built a completely responsive guys completely let me go ahead and say here we go we bought a completely responsive facebook 2.0 build right this has firebase storage it uses firebase storage api it uses next.js we use a server-side rendering we use next authentication to in uh to power up a facebook login right we literally have full responsiveness with tailwind right it's incredibly powerful with what we've done in the short amount of time that we did it sure it might have been a four hour stream i think it was maybe but guys in the grand scheme of things that's not a long time when you're actually considering what we came out with in the end result right so this is actually an incredible sort of achievement right this looks incredibly slick great great stuff all right luca says do you find hillary and css better than tss modules one billion percent dude a hundred percent casper what's up man good to see you casper nice to see casper is one of our members inside the pop fam he joined zero to full sakura and he's been in the coaching course amazing dude uh great to have you here man this is just honestly this is so powerful side almost says i've been using xjs for about a year now but my new company wants me to start moving to angular it feels like my wife is leaving me next chest is amazing dude no i wouldn't move to angular i wouldn't do it i would not do it but anyway you gotta do what you gotta do all right simax says hey sonny i'm a django dev i wanna start using react next shares from my front end how can i learn these without doing the whole js thing um so remember these are like react as a javascript library right and then uh nextgears is a framework for react so under all of that you have javascript man but what i'd recommend is you know there's lots of tutorials out there feel free to check out uh pupperryat.com we've got a course we offer a community zero to four secure we've got those modules in there that might help you out um but otherwise honestly just keep doing this stuff man you'll you'll really pick it up quite a lot and uh it's gonna be amazing for you guys now um right now i've shown you how to deploy this kind of apps before right i've shown you how to do these kind of apps so we're not going to make well maybe we'll cut this here right we're going to cut this here today and um you know i hope you guys have enjoyed this it's been absolutely incredible i'm gonna go ahead and check out how many people we actually have in today's uh likes alright so we have 1k likes that's incredible guys that is absolutely crazy and i can't be like you know like thank you so much guys absolute massive support and um yeah i just want to say guys sign up right sign up to the five day challenge right we've got ten thousand pound worth of prizes it's going to be huge right it's going to be huge we put a lot of work into this and obviously after today's issues we're going to we're still going to make it happen right no matter what we're going to push through um jay's probably watching this right now thinking he's crazy man how's he going to carry on doing this but we are gonna keep on doing it don't worry guys we're not gonna stop um so yeah until next time guys i guess uh sign up first link in the description and uh i will see you in the five-day challenge guys peace thank you so much for the new viewers simax you know a bunch of you guys thank you damian all you guys are amazing incredible stuff uh and also like i hope you enjoyed this well done if you did the build and again remember all the code is available in the papa github repo with that said this is your boy papa react thank you so much guys this made my day you know coming back from the technical issues that we had i was getting so frustrated but i'm so happy with this outcome and uh yeah you guys are amazing thank you so much peace oh thomas he says i want to sign sonny but for the moment just to it back into the road no dude jump in jump in this for everyone this is absolutely for everyone right harpree says oh harper's here thank you man you stayed in all right thank you so much guys i'm gonna wrap up here though all right so i'm actually gonna do now thank you so much guys peace [Music]

Channel: Sonny Sangha

Views: 433,968

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: dBotWYKYYWc

Length: 219min 35sec (13175 seconds)

Published: Sat May 15 2021