🔴 Let's build SLACK 2.0 with REACT.JS! (REDUX, Styled components & Firebase Hooks)

[Music] okay now we are back what's going on guys welcome to today's stream now what we're gonna be doing today guys we are building the slack clone right so we have tons of stuff to look forward to today we have react we have redux and that's just a few things right we have style components that's new right we've we've always wanted to do style components so now we're going to do it because why wait right and we also have firebase hooks now if you've never used firebase hooks and you used to hate that user effect that we used to write today's the day where everything changes i promise you guys it's gonna be a lot of fun right now we don't let any you know technical hurdles beat us we're gonna completely crush it we beat the internet don't ask how i did that but we are hopefully back we are here to stay papa fam let's jump in today into today's build right if you're not by the way if you're watching this on youtube jump over to twitch right which is actually a really nice viewing experience it would be a lot clearer for you if you don't find youtube that great okay so without further ado guys this is what we're going to be building today hope you enjoy it smash the thumbs up button let's get those likes back up let's see how far we can get today without further ado guys check it out this is what we're building we have full user authentication we wouldn't expect anything less right so we're gonna go ahead and log in and guys just before anyone asks this is different to the other slack build okay this is different we actually have completely rebuilt this one in a much better way and it uses redux to power all of this stuff okay so we got multiple channels over here let's go ahead and jump into a channel right a really nice thing about this one is if i go ahead and say hey guys check this out scrolls to the bottom pops the messaging right so that's a nice little feature as well in this one but let's go ahead and jump into this build right we have react we have redux we have styled components right we have material ui right so over here we have material ui to go ahead and get these icons to get the look and feel of the application and guys we have firebase hooks now firebase hooks is a hell of a lot of fun trust me when you see it today and how i use it you're gonna be like you're gonna be impressed guys it's a lot of fun right now i want this to be fun i don't want this to be like uh super serious everything kind of you know we just get too like serious about coding right i want it to be a lot of fun i want you guys to just sit back relax don't worry too much about following along in time all i want you guys to do is have fun be a part of the papa fam and guys just wanted to mention that we have two days left in the sale to jump inside of the papa fam zero to full stack hero community right first link in the description make sure you check it out because after that i'm gonna close the doors to the community for a while so we can focus on the course itself and just treat our you know the papa fam with some love okay so make sure you go check it out first link in the description i think we should jump into this build guys i think we should smash the thumbs up for getting through that pain and uh let's go ahead and jump into today's build okay so first thing that we want to do guys is go ahead and you want to go and open up a terminal right the first command you want to open you want to run is mpx create react app okay so you want to go ahead let me make this a little bit bigger for you guys all right mpx create react app then you want to drop a name okay so in this case i'm doing slack clone youtube and today because we're using redux we're going to be using the redox template okay so this is haha finn horses love the hairstyle so much i'm asking my mom if she can cut it like that appreciate you dude thank you that's a that's very nice of you uh avnishas when the spotify players come in oh i will send that out to everyone if you guys i know you guys love this playlist right so it's a lot of fun and guys i just want to mention right we're not going to split this video up in several parts because nobody enjoys that it's going to be one video crushing it it's the video you need for slack i said it let's do it let's jump into this all right so firebase first thing we want to do is go ahead and execute this command to set up our app right so we're using create react app today if you're new to the channel you're going to learn a hell of a lot today so it's going to be an interesting one make sure you have water you make sure your coffee everything ready okay so this will go ahead set up a react template application okay so in this case we can go ahead and cd into our app so cd slack oops slap clone youtube okay i'm inside right now now what i want to do is go ahead and do code insiders if you have the normal vs code you just have to do code but i'm going to do code insiders dot and that's because i use the beta version okay so that will go ahead and spin up a coding environment for us right this is going to be the easiest way to get up and running with uh yeah you know how we do it i said it i said it right let's go ahead and carry on right so in this case slack clone here we go this is what you want to do guys right you'll get your starter template over here now jumping into source you'll see a few different folders that you might not be used to if you go ahead and do the regular create react app the new folders that you want to be interested in as this one over here we've got features with this random counter folder we've got this over here counter module and all this other stuff right so i'm going to show you guys break it down make it very simple but before we do that i want to actually go ahead and prep my firebase so i want to go to firebase.google.com and then what i want to do is go to i love that one by gwen he goes uh uh he replied to a certificate comment yeah guys honestly i don't know why everyone's obsessed with certificates get the work right get the skill screw the certificate let's carry on all right i'm telling you straight papa we don't mess around in the pub fun we just get jobs that's it period right so in this case you want to click on go to console right once we've got this up and running and we're just going to get into a coding flow today it's going to be a hell of a lot of fun we're just going to get into this and we're just going to run right so once your firebase console is up and running you want to go here and you want to make sure you jump in and add a project okay so here you want to do slack oops slack clone i'm going to say slack clone youtube all right so mine's going to be for the youtube and i'm going to go ahead and click continue now i'm not going to enable google analytics you can if you want but i'm not going to do it okay guaro gerard says great to have you back thank you dude really really appreciate the support dash santosh welcome man dash you killed it in the challenge in the netflix challenge your five day challenge if anyone hasn't done it checked out make sure you do as a hell of a lot of fun all right zubi says is this live well i answered your question dude let's jump in right so finishing up let's click on continue at this point we should be thrown into the firebase console where we want okay this is perfect so now what we want to do is click this little cog icon okay click project settings right let's go ahead guys and smash that thumbs up button as well guys so smash the thumbs up button because we had a technical issue we already had like three 250 likes or something before the video started but this is a little bit of a technical glitch so smash the like button if you're watching it will help this video get to as many people as possible we have 183 people watching so guys i should see 183 likes come on guys let's keep on going what's up luke good to see you man luke was uh an amazing member of the netflix challenge hell of a lot of fun and now he is inside zero to full stack hero and he's officially part of the papa fam welcome dude right so you want to go down here click on this web icon now over here i'm going to type in slack clone youtube set up firebase hosting boom register the app and let's carry on right so i can see uh twitch comments as well guys what's up compango all right so i'm gonna click next and then at this point if you haven't installed this you're gonna probably have to do this and you'll most have most likely have to do sudo npm install dash g so you make sure you do that okay at this point i'm gonna do that later so i'm gonna click continue now i just want to say welcome to everyone we've got 111 likes that's what i'm talking about guys let's get it to 200 let's get that number up let's get the energy up let's go all right this is what i'm talking about man craig williams bro thank you for this you really are motivating developers dude thank you for watching honestly okay let's go down here let's go ahead and hit the config now this is what we need the firebase config over here right so what i want to do is i'm going to copy this now i'm going to jump over to my code right so now obviously my code this is not ideal i'm going to open up a second desktop and you guys should get familiar with setting up a flow like this okay so you want your flow to be very efficient so this way i'm looking for my firebase over here and i've got my code editor over here perfect i don't need the terminal anymore so i can close that so at this point guys what i want to do is i want to go to the source and before we even do anything i'm going to add a file called firebase.js and remember that config over here that we grabbed i'm just going to click copy one more time jump here paste all right so that's our starting point okay uh prathan says i really like your linkedin con thank you so much guys we're already 121 likes come on let's get energy up man let's get this energy up i really really love being back and uh yeah i'm just pumped to be back okay because this is gonna be a hell of a lot of fun this one i actually got really excited because styled components is in this build so it's gonna be something new for everyone who's watching on this channel and uh and guys trust me when i say this code is clean it is clean this is like one of the cleanest bits of code i've written so let's jump into this all right go ahead over to app.js and what i want to do is i don't need the app.test.js file logo svg and setup test so this will freeze my computer because if my loyal followers know i can't delete stuff and without it dying so i'm going to move to trash and we're just going to wait oh wow it actually worked people like going on papa fam will know that that's been a struggle all right let's carry on nice so what we're going to do here is grab everything inside the header and boom i'm going to type in h1 and let's say let's build slack let's build slack boom and then i'm going to go ahead and delete these two lines right here we don't need the counter we don't need the logo and i'm going to change this to a lowercase a however we're going to be using um we're not using bem today we're using style components so it's going to be a lot of fun right a hell of a lot of fun now what i want to do is command j right on jay open up my terminal and while everything's working we're gonna go ahead and click this features over here now i want you guys to pay like very close attention to what i'm about to do okay so inside of features right we have counter slice now what i want you to do is grab counter slice and drag it on top of features because what's actually happened is it's inside of a photo called counter okay so i want you to drag counter slice on top of features click move now you can see it's outside the counter folder so at this point i want you to right click on counter and click delete right we don't want the counter folder anymore okay perfect now we have counter slice and this is all part of redux okay so everything here is part of redux and i really love nj dave's comment here he says repetition is the best way to learn and dude i completely agree with you honestly i completely agree with you repetition is the way to go right at this point we're going to get an error so i want to go into my app store.js and here because we got rid of that counter folder i need to go here and say boom get rid of that so it's features forward slash counter slice now we will be renaming this in a bit but we'll come back to redux in a second okay so delete through the terminal says robert hey i have actually done that before it's actually quicker um hash says dad i can donate here paypal give me your link oh thank you dude there's a link to donate inside the description um there's a tips and donation link thank you so much dude appreciate you all right let's carry on guys so um we're going to go back to our app.js and here inside the terminal i'm going to go ahead and type in yarn start because we're using yarn today because that's what we do now right before we used to use npm but you know i started to enjoy the the yarn side of things like some some people are looking at me right now like with that with that evil eye they're just like yo why why don't you use npm but here's what it is you know right so now we're gonna carry on i've already got an app running on this port over here so i'm going to click on yes we'll open it up on 3001 and just while this loads guys i just want to run you through the app one more time okay so we have our amazing chat functionality over here right so this is a fully fledged slack phone right it says fully fledged if we go into like a chat over here i'm going to show you how to deploy all this we have this beautiful sidebar everything over here you can see it pulls our name from and our picture from google login really really nice stuff and you can go ahead and even add a channel let's go ahead and say this was like let's just say it's a papa cha right okay and let's jump into the puppet chat and this guy said you see it says message papa so if i go ahead and say yo what's up and look at that guys we get a nice slack interface right so really really slick okay and this is going to be using style components is so clean honestly i really want you guys to look forward to this now um if i click this and there you see right so you can go and sign up so i'm going to sign in one more time so that we have this as a reference and then i'm going to be building a fresh app out of this right so now i'm going to go over and while this is loading give it one second i'm just going to quickly log into that account and then this will redirect in just a sec i'm going to go ahead and pull over the local host one so this is our fresh app okay it says let's build slack this is where you guys should be at this point now i do want to mention if you can't or you find it hard to kind of code along with me then remember guys the second link in the description actually actually has the link to the papa github repo which is actually on sale as well right now we have 25 off and you can pretty much go ahead grab it and it's got the code for slack inside of it as well as every single clone i've ever done before make sure you go ahead and check it out if you get stuck and you know you can't keep up with everything that's going on so it will help you out in terms of sticking uh and sticking up to speed with me okay so let's carry on guys uh please don't spam the chat dude so i'm gonna go ahead and chuck you in timeout so don't spam that and everyone's asking about why i've left cp uh guys there's i don't need a reason i just don't wanna i wanna kind of carry on in my own route and i've built i feel like i can deliver actual value here in the way that i feel is most efficient okay and plus we've got the pop of fam guys like get with it right let's carry on let's go let's build slack all right so the first thing we want to do right this is going to be a slightly different tutorial right so the first thing we want to do is we will be using react router in today's build right so that way we can have pagering inside of our application so a lot a lot of fun in today's build okay and guys we're almost at 200 likes to smash the likes let's get them up right we were at 200 before it even started so this is gonna be a fresh one the first stream went down but we are not going to let this one beat us okay so first thing we're going to do is i'm going to go ahead and install reactor router so i'm going to go over here and say react router in google okay we're going to wait till this loads out and then i'm going to go to the react rear docks right and let's see and let's click on declarative routing for react.js and this way a sag there we go the stream's perfectly fine at this point jump over to twitch if you're having any issues so at this point we can go ahead and we're going to copy this we need to install reactor or dom okay so i'm going to copy this go back to my app and i like to have a split terminal so a lot of people don't like to have sort of split there the second one i like to have a split terminal because then i can see both things at once but what i do is i make this one smaller okay so that way i can see everything here i'll say yarn add and i'll do react with dom boom okay muhammad says i love you sonny you're just amazing thank you dude what's up assad good to see you man right so we're installing reactor or dom so now we have reactor inside our app the easiest way to get this up and running go ahead copy the import statements let's go ahead and pop this in right here boom copy and let's go ahead and paste it over here and then what i'm going to do is i'm going to grab everything inside of router there we go and then this jump over here right so a tau says hey sonny can we use react hooks over redux of course you can let's go ahead and paste it inside of here right and i'm going to get rid of my h1 over here so at this point if we save our application you should be able to see what i see at this point right so we've got a router and what we want to do is everything inside the nav we don't want that okay i don't really care about all that stuff right now we don't care about that right then the thing that i need next is i'm going to change this div into an actual just a fragment okay because i actually don't need that div at this point i'm going to get rid of this comment now what is a react router okay so react router allows us to have different pages on our website so if we go to forward slash it will take us to this home component if we go to four slash users it will take us to the user's component and if we go to forward slash about it will take us to the about component now we don't have these pages so for now i'm gonna go ahead and get rid of them okay so at this point i'm gonna go ahead and do this uh harsh please don't spam dude i will be sending it out right so i'm gonna go ahead and say h1 and let's just say this is the home page and just to make it extremely clear now when we're on the homepage what will happen is i'm going to make it firstly an exact route which means you have to land on the home page only and now if we go back to our application let's go ahead and check it out it says this is the home page okay perfect stuff works just as we expected it so now we have a reactor set up your garage says i recently got an intercham internship because of you your youtube channel streams thanks dude and great job you did that dude that's amazing i'd love to have you inside the papa fam so check it out zero to full stack hero first link in description do jump in with us please i love having success stories inside of it and we have we literally had gwen and alex who just landed jobs as well so crazy stuff let's carry on guys right so christopher says tell you sunny thanks for the quality lessons with you i hope i was able to get a job with a fortune 500 company let's go man that's sick well done dude that is so sick dude that is incredible stuff right so now we've got the homepage here so what we need to do now app.css clear everything we don't want anything go to index.css and at the top i want to do the following i want to say target everything with a margin of zero and what i'm going to do is you guys love when i do this i'm going to go ahead and pop this on one side and pop the co the actual application on the other side so let's go ahead and pop this over here perfect so now you guys can see i've got if i go ahead and add this margin of zero you guys should be able to see let me go ahead and get rid of that you see this little imaginary gap over here right this is going to go ahead and disappear when we add a margin of zero so if i go ahead and save you can see boom it gets rid of the imaginary gap okay so that's the first step that we wanted to do the second step i actually want to do is i'm going to set something in body today right i'm going to set a css variable now css variable is a very similar to a javascript variable pretty much it just holds a value okay so what we're going to do is i'm going to have a slack color right css variable and this is how we define it right we pretty much just say slack color and then we do this we just give it the color and now we can go ahead and access the slack color like so okay and then what i'm going to do is i'm going to go ahead and say overflow hidden so that way in case we have any overflow inside of our app we're going to hide it okay so i'm just going to protect myself later on so now boom get rid of that and then get rid of that now we're back inside of app.js so firstly i'm going to mark out the application okay so let's look at the final application and see what we got to do so we have a few things in this build right we have the header so we have this beautiful header over here okay we have a nice looking header we have a sidebar over here we have a chat input component we have the chat itself over here and we also have the login stuff right so if i want to go ahead go ahead and go back here we have the login page so what i might do first is actually build maybe the uh let's build now let's start building the app first it's always funny to start building the actual application first so i'm going to go ahead and start doing that one first i encourage many friends of mine to watch your videos hashtag pop file that's what we're talking about guys amazing stuff all right atar says bro just do one session on react hooks dude i cover all of that inside the zurich full stack hero first line dude best community on the planet i said it because it's true period let's carry on all right so this is the home page okay and you know you're good when you start getting people a couple your builds you know it's pretty fun pretty fun when you get that all right so i'm going to go ahead and save there we go and then here you can see i have um hey nice fin okay let's carry on so we've got the home page over here right so what i'm going to do now is for the home page i'm going to go ahead and actually firstly let's go ahead and do the the header component okay so i'm going to go ahead and set up a header component so over here i'm gonna go ahead and say okay the header will go here the header like so right so what i need to do is obviously create a header component so i'm gonna say header dot js now i'm using snippets okay so i'm using rfce allows me to create a functional component how did i do that in case you're new to the channel go to extensions and you want to make sure you get this extension right here es7 react redux graphql react native snippets they are incredible okay really really incredible stuff and uh yeah just make sure you you you download this look 2 million 2 million 2.3 2.4 million wow crazy stuff right let's carry on so at this point we've got the header okay so let's jump into the header and see what we need so the first thing i'm going to need inside the header is let's have a look here we have a header left section so i'm going to assume that this is my header left section and then i have a header middle with this fancy input and then i have a header right with just this little icon over here now how do i get these icons right i need something called material ui right so i'm going to go ahead and jump into that right now i'm going to go ahead and go over to materialui.com and i'm going to install this into my project so the first thing i want to do is it says npm install material ui now if i'm using yarn i simply copy i jump over command j and i do yarn add material ui call okay so that will work perfectly for me at this point what i can do what's that print up i can go here and say icons because what you need to do is you need to in install the core as well as the icons that come with material ui so i'm going to go ahead and copy that as well and then once it's done i'm going to say yarn add material ui icons boom perfect right mr zach says what's the subject today what are we building all right we're going to be building the slack clone right but it's a redux styled components jacked up version incredible stuff right um there is a link in the description dude you can go ahead and check it out it's at the bottom thank you so much dude right so at this point what we're going to do we're going to go ahead and say uh we've already done this now to search for those icons i'd simply go to this link here where it says you can search for the full list of these icons i click that okay and then here you can see i've got a search right so if i go ahead and type in send for example it'll give me a send icon and they'll give me the import statement for it this is how i go ahead and do that right this is how i find all the icons that we're going to need throughout the builds okay now guys we're almost at 200 likes smash that thumbs up button to help this video get out to as many people as possible it's going to be a hell of a lot of fun today guys let's carry on right we would have been a 400 if that's stupid internet right but it's fine we're all good we're stronger than this i think we can keep pushing i really think we can keep going right so at this point i'm going to go ahead and say um close this because we've already got that right so we have the header now i'm going to be using styled components now what are styled components okay styled components are simply put we're not going to be using css in this in the traditional way where we import a css file and then we kind of you know we style out some stuff and we use the bem naming convention typically where a div has a class name and then we sort of target the class name but today we're changing things right we're changing it up we're going to be using something called start components now i want to show you what style components are all about why they're so popular okay so start components they have pretty much the power behind um they're pretty much more powerful than css modules they do a lot of head like uh of heavy lifting for you behind the scenes and they make your app extremely fast now if you're wondering who uses it just check out this list right tons of places use this thing right so all these folks use it vimeo vogue uh the onion i don't know what that is but uh eurostar coinbase get that dodge coin guys get right and this is pretty much how we define it you pretty much use define a variable so imagine we want to define a button and then you pretty much say style dot and then you give this sort of if it was a div here i'd say div and then you pretty much give some css inside of it now trust me it's not as tricky as you think okay it's really not that tricky i'm going to show you guys how to do it all so we're going to click documentation and we're going to click installation over here okay so it says npm install and then start components and guys this is the proper fam video okay so like if you want to be a part of the platform community first link in the description make sure you check it out we're already 200 strong inside the community it's crazy so i'm going to go ahead and grab start components here and i'm going to say yarn add styled components boom okay um perfect gwen says i love the fact that we can actually pause the video and i'm gonna go to the bottom okay so to make sure i'm at the bottom i go to the second last tag comma and i'm gonna go ahead and paste so you see resolution styled components right so it's very simple thing you just need to copy what i just did there okay 200 likes that's what i'm talking about guys see we had issues with the internet we didn't let that stop us papa fam is way stronger than that i love you guys thank you so much honestly just keep on going all right i'm gonna hit save on that and it's still installing styled components so we can give that just to sex and uh be patient with that one right and you can see pretty much after that we can just use them okay so we're gonna use that firstly inside of the uh inside of our header component and trust me guys it will make a lot of sense when we jump into this and when we start running with it okay so we're gonna pretty much just okay we're gonna get get ready for this okay um so let's carry on guys and uh what we're gonna do now is all right so please don't spam dude i hate it when people spam like i'm actually gonna block people from this channel if you spam so ayushman dude you're out right let's go so um what we're gonna it was installing the style components that's why i was kind of freaking out so at this point we have style components installed okay so what we're gonna do is is we're gonna go here and even this one dude wow so many people are spamming dude so any moderator so pranav do you mind just sort of you know you can time out people i'll give you permission go ahead and just clean up that chat right so over here what we're gonna do is i'm gonna go ahead and rather than having divs right this is how we use styled components okay so i'm going to make this a little bit bigger for you guys i think that might be easier for you to see so how do we go ahead and use a first thing is we don't have a css file which is really nice in that sense okay we get rid of the css file now what we do is actually lives underneath oh which is really nice in that sense okay that's the sort of standard that we should be doing okay so it should live underneath the uh the stream over there so at this point what we're gonna do is we're gonna go ahead and say let's go ahead and have a header container okay so i'm going to say const header container like this okay equals styled right because it's styled components which we have to import oh no it's not that one oops not that definitely not that one all right what we're going to do instead we're going to import it and we're going to go ahead and say import styled from styled components like this we say style.div okay now here what we need to do is go ahead and do backticks so these are not regular ticks guys okay so they're back ticks okay you do back ticks and then what you want to do is start styling it okay so let's just say imagine the color of the text here was red okay so we said color let's just say red okay so these are back ticks etc let's go ahead and do that and then oops i need to go ahead mine has like nice syntax highlighting okay and you might be wondering but sunny mine looks a bit like this right everything is this color now what you need to do okay is you need to go ahead and guys if anyone's having issues with the internet pretty much just go ahead and uh refresh your browser and it should be all good to go now okay so we should be fine you just need to do a refresh and it's all good okay so at this point what we're going to do is we're going to go ahead and i'm just going to play my music instead of doing the uh the other one okay there we go so at this point what we're going to do is go ahead and jump over to your extensions okay so over here in the extensions panel i'm going to go ahead into extensions and you want to grab this over here okay so grab the where is it gone you want to make sure you get vs code styled component extension and what this does is it gives you color syntax highlighting for your start components without it it's going to be a bit of a headache okay and uh guys if anyone asks why i'm not with cp anymore i'm just going to block you honestly it's really annoying guys i'm i deliver more value over here period and we've got you know chill out all right let's carry on right so i'm going to go ahead and get rid of this one the stream has not ended you can just refresh dude all right so at this point where we have the header okay so what i'm going to do is i'm going to say header container okay and now you can see what's happened is this is simply got these styles injected into it so now if i have a h1 which says test okay and i go into my app.js and i import the header like so and i save i'm going to go ahead and pop this to the side and let's go ahead and go back over here okay now inside of here you can see what the really cool thing about this right is if i go ahead and say background color let's do background color red and then i'm going to go ahead and refresh let me see my header container is a style div there we go the background color is red um interesting okay let's double check what's going on here but what we want to do is let's just start jumping into actually the coding aspect of it oh there we go that's why um okay i know why so at this point imagine i want to target that h1 what i need to do is i just go ahead and say okay target the h1 inside of here and give it a color of red so let's go ahead and do color of red like this save right and this will go ahead and uh this will actually this will do it right it's actually i'm not sure why it's not rendering let's double check what's happening over here right so what i would recommend is if you do experience any of these issues ctrl c and then you're gonna do yarn start again okay the reason why this is happening is because we've installed style components we need to make sure that we go ahead and restart our terminal i'm gonna do y 3001 and then we'll wait for this to start up again okay right and i'm gonna go ahead and refresh save perfect now style div okay i'm gonna say color let's just say green and then let's go ahead and pop it in perfect and now we'll go ahead and we'll fix this in a sec okay i'm not sure exactly what i've done here but uh let's go ahead and carry on i'm gonna carry on with the build and then we'll fix this okay so we have the header container right now the header container is gonna have a bunch of style inside of it but as we mentioned before we have a header left section okay so inside of here i'm gonna have a header left so let's go ahead and say like a header left uh we're gonna have a header right and i'm gonna show you guys what i'm referring to here so imagine our localhost 3000 so this is our actual slack app i'll show you how to do that cool stuff as well we'll say header middle or sort of header search we'll call the middle one all right head to search and then we'll have header right okay header right right now is green not green oh okay really oh wait a sec no that shouldn't be the reason right color green oh dude you're right yeah you're actually right let's go ahead and do that boom there we go and it will actually pop in now so if we go into h1 just save there we go that's correct yeah you're right my bad nice shout daniel good all right so let's go ahead and carry on so there you go you see it applies the style to that div okay so we have three sections over here so what are we referring to at this point header left is going to be the left section we've got the middle section which is going to be the search and then we've got the right section over here so let's go ahead and jump through okay so header left first thing we're going to do is create a const and we're going to say header left so i'm going to go ahead and say const header left like so equals the star div right and remember you if you want a h1 or h2 you can just say style dot h2 and it works in that way as well right so uh that's actually really cool uh are you schmann dude you continue to spam so dude like i'm hiding you from the channel now i've i warned once and then it just continued to continue spam dude so you're out all right so let's go ahead and carry on we've got the header left so we're gonna go ahead and create a header left section over here and this is actually very clean guys because if think about it this way your css is never going to go ahead and overlap okay it's never going to overlap which is amazing if you do it this way whereas css by itself can easily overlap so you have to be careful with that okay now we do we are going to use an avatar here so this top left section over here is an avatar right so this is actually derived from material ui so what i'm going to do is i'm going to import this over here so i'm going to say import avatar from material ui core like so and then what i'm going to do is i'm going to go in here and actually rather than directly using the uh material ui avatar i'm going to make it a start component i'm kind of getting sick of that music so i want my music back on epidemic boom there we go we're gonna have our tunes back there we go it's gonna be a lot of fun now this helps me get into a jam you know that kind of you know a jam state psycho coda what's up dude welcome to the stream man smash the thumbs up button if you're here and you're enjoying it it's going to be a lot of fun today so buckle up and we're going to get into a nice flow at this point okay so header left let's go ahead and build out this left section right so to have a styled avatar right how do we do that so over here i'm going to say const and let's go ahead and say header avatar okay and you can actually name these whatever you want there is no real standard at this point you can define it but what if it's not a default sort of like div or h1 or if it's actually like a custom component right so what i'm going to do here is i'm going to grab the avatar and what i do is i do parentheses avatar right that's how you do it and then i have the double uh quotes all right and then you can make your own styled component out of it which is actually incredibly simple okay so really really easy now random rabbit studio says i actually like putting my style components in its own file good spot so you can right you very easily can move your styled components out of the code base and into their own files in this tutorial i'm going to be building inside of the same file and we're going to be doing that way but i will be introducing a folder structure in this build so good thing you're reminding me dude i'm going to go ahead and say components right and inside the components folder i'm going to grab my header and i'm going to drag it inside now and all of our components except the high level one like app.js and i'm going to update the imports yes let's go ahead and go and save our input import sorry so inside of app.js and now it says components header save make sure when you do that it all works okay i'm going to refresh and let's go ahead and see if we made any mistake okay so it should be all good now at this point and it's compiling there we go okay so at this point the header left right so header avatar sorry inside of header left what i'm going to do is i have a header avatar i'm going to go ahead and pop that in here so i'm going to say header avatar right header avatar and then i'm going to go ahead and it's a self-closing bracket okay so what we're going to do at this point is oh dude i really am getting irritated with these like with these spammy comments dude i see it but if you continue to like send messages i'm just gonna block you okay so at this point um on click right i'm gonna have an on click for this one this is gonna be the sign out but we're gonna do that afterwards i'm gonna say to do and that's the special extension that i'm using there i'm going to say add on click right so we're going to come back to that one and then we're going to say the alternative and the source now the source here would actually be something like the user's picture okay so this is going to be the user's picture as we see here but we're going to go ahead and leave it blank for now okay so it's going to be a blank image for now and then what i'm going to do is i'm actually going to have the time icon so the time icon is this one over here okay so let's carry on let's go ahead and jump over here so i'm gonna go ahead and save at this point and let's see if we see it there we go guys look our first little import perfect okay um and print up don't go ahead and uh you know don't worry just don't acknowledge people who spam that's fine um so at this point we're going to go ahead and leave the header avatar now this the next thing i'm going to do is pop in a icon okay so from material ui so here i'm going to say import access time icon i'm going to go underneath here pop it in there like so now we have our time icon as well which should just jump in in a second there we go guys okay so we have the little icon and i'm going to make this eventually look like this okay so stay tuned and you'll find out how so header left the first thing i want to do is i want to give my header container some styles so how do we do it when we're using styled components it's pretty simple actually we pretty much go here and we just assume that this is regular css inside of this we say display flex and we do our regular sort of things right so we say display flex and this takes normal css rules so at this point we don't see much changing okay so i'm going to go ahead and firstly jump into my header left styles okay so here i'm going to say header left div and inside of here what i'm going to do is i'm going to go ahead and pop in the following styles so we said display flex in here and i want this one to take up a third of the overall screen so i'm going to say effects 0.3 okay then i want this also to be a type display flex i'm going to align the item centrally so i'm going to go ahead and say align item centrally and i'm going to give it a margin left of 20 pixels because i don't want it to touch rich programmer what's up dude frank in the house awesome slack 2.0 bird let's go man thank you so much frank for that clutch donation appreciate you dude all right stormbreaker um redux template is actually extremely easy and if you want to find the easiest thing to use it's recoil we cover it inside the course but yeah recoil is the easiest thing to use guys right so the backticks are for the syntax yes because we actually have some kind of in uh props interpolation some at some points okay now to target this right target this icon so material ui icons by default get the special class and it's called material ui svg icon dash root okay so at this point what i'm going to do is ins if there is ever an icon inside of here right inside the header left so in this case access time icon i'm going to target the icon by doing this and this means inside header left i'm going to target the material ui svg root icon and i'm going to apply a style so here what i'm going to do it's going to say margin left auto and margin right 30 pixels save it and at this point you can see we're starting to get this spacing correct nice okay and the reason why this is good is because we're doing a flex rule so this entire sort of top is flex and then we're saying 0.3 flex so it's only taking up 30 at this point right so this is 30 okay so i shouldn't save that but this is actually 30 at this point right my arrows are a bit dodgy okay so we have a 30 looking you know left side over there which is pretty good so let's go ahead and carry on so you guys can already see it's pretty nice actually to be fair right it's actually pretty nice now what if i want to target that header avatar right so i'm going to go over to the header avatar and i want to make it so that it actually looks like it's a clickable element so firstly i'm going to say okay grab it and say cursor pointer right and then what i'm going to say is when i hover over it so you see how we can apply the styles here it's actually quite a nice syntax right when i hover over i'm going to say the opacity should change to 0.8 okay so when i do this now check this out guys when i hover over this can you see that right that's quite a nice little effect that we have going on over there right finn heart says does zero to full stack hero also talk about how to get clients yes dude we actually talk about that a lot we see zero to full stack hero is not just about building and constantly coding it's about how you go ahead and take those skills and actually land jobs and freelancing clients a lot of coaching calls we talk about people who just had interviews my tips and tricks on how they can approach interviews and every week it's amazing because we can go ahead and have a chat with our with our own sort of you know students inside the course and we can see how their progression goes now what's amazing about that guys and i will carry on in just a sec is that people have got jobs and then we have feedback sessions in the coaching course so really honestly you won't find that anywhere else so it's it's for the community that's why we've done it right uh emerson says it's about the community best ever exactly dude it's all about the community that's exactly what we strive for inside right so for the header container i'm going to go ahead and say position fixed and i'll show you what i'm doing it's a little bit of a hack what i'm doing here but i'm saying position is fixed i want to say a width of 100 and uh this will make a lot of sense later i'm going to align the item centrally and this will come into play in just a sec afterwards line item center and then i'm going to go ahead and say justify the content space between give it a bit of padding so let's go ahead and pop that in save and you can see it should have a little bit of padding at the top now and then i'm going to say the background color remember that css variable that we defined earlier right it has to access it all you need to do is type in var slack color right and remember where we defined this was inside of index.css over here remember slack color we defined the variable here the css variable and here we're using it okay and we're making the color of the text white there we go and that's because these are actually sort of simple bits of text pretty much okay um i use something called screen brush for the the sort of writing on the screen what's up morocco's in the house hey guys we're almost at 300 300 likes let's keep going guys let's keep on going all right so this is looking pretty good right this is looking pretty good at this point now let's go ahead and fix the header search okay so the header search section next priyanshu what's up man good to see you here dude hey header search is an expert okay so over here i'm gonna say okay let's create a header search styled component perfect right and inside the header search we're going to have the search icon so the search icon is actually from material ui so i need to go ahead and import that and you're probably wondering but sunny you just wrote a header search but you never defined it right what is that about and you're right i need to go ahead and define that so i'll go down to the bottom and i'm going to just add it to the top so that way you guys can see i'm gonna say const header search and this is gonna be a style div and you can see look it's not really not that difficult to start getting the hang of it okay so you can go style div and now we can access the stars for it very very simple stuff okay um so perfect stuff now we're going to use pranav i'm not going to use that today but i might use the app bar for material ui in the future build that's a very good cool dude um so at this point i'm going to say header search there we go and i'm going to go ahead and check that we've already got the search icon over there so i'm going to save okay and then let's go ahead and you can see at this point we've got some kind of search icon being pushed over to the right and that makes sense okay and i'll tell you why in a sec so we've got the search icon over here i'm gonna have an input field now this input field is gonna hopefully my emmit kicks in there we go it's gonna be of type text by default it's already typed text we can get rid of that we're going to say the placeholder in this case it's going to be to search the papa fam right because this is going to be like the uh sort of the slack for the papa fam right and also just to mention guys if you didn't already know we have an incredible slack community inside zero tool stack hero first link in the description check it out sale runs out in two days guys then i'm closing the doors to the community so i want to miss out on it honestly second link is actually all of the code as well so you know we're going crazy with sales right now right so at the top of this screen we have the search the pop-up fan right now i want that to look like this and be in the correct position so how do i get it to that point all right i'm going to go over to my header search and what's really cool is if i command click it will actually sort of open up the header search in the styled component location so at this point we have that over here right and then i'm going to go ahead and apply a bunch of styles so this bit took up 0.3 so 30 in the screen i want the middle bit to take up 40 of the screen okay so uh emerson's incredible no it's outstanding that's it jamie davis yo yo what's up man good to see you here i'm going to say flex 0.4 right and guys if you just noticed how quick we're going like it's insane right we get more views and likes than channels with hundreds of thousand subscribers like i think that's incredible i think we should be proud of that as a family man i think the whole papa fam should be proud of that as a team this is not just me this is built from you guys and this is what we're about okay so like let's go ahead and give ourselves like a huge pat on the back for that because honestly the way we're growing the way what is happening it's so damn powerful man so i'm gonna go ahead and give this a border color this is a slight gray color and say text align center and you can start to see guys look there's a slight background being uh being chucked in jamie davis that's a testament to the value providers thank you so much dude really really appreciate that display flex padding naught 50. i'm going to go ahead and check that in here save and you can see it starts to line up okay it's starting to line up and then we're going to say color of gray and a border i'm going to go ahead and chuck in the border and the color gray over here now at this point okay yeah looking okay but i need to target that input field right so the thing i love about start components is we're already inside of header search and inside of header search is an input field which means that we can go ahead and target the input just like that which is a lot simpler right fantana says we are amazing for sure thanks to you sunny appreciate it so much honestly really really appreciate the cameras thank you at this point i'm gonna say the background color of this one is gonna be transparent okay so background color transparent i'm gonna go ahead and get the energy up right now guys because we're about to break 300 likes i think we should step it up a bit let's go guys all right transparent there we go and at this point i'm gonna go ahead and say border none and text align let's change the color up in here as well all right text align center and i'm going to give it a minimum width right min width and i'm going to give this min width to 30 view width save and at this point you can see look at that it perfectly places itself in the way that we expected okay now at this point this looks pretty good but you see we get this that kind of outline now the quick fix to the outline is you simply go ahead and do outline zero or none pretty much i think zero would work yeah there you go zero works nicely and you see the color of the text right we're gonna change that as well i'm just gonna make the color of the text to white there we go save boom all right sunny yeah exactly yeah and there we go okay so at this point what we're gonna do is we have the middle section complete now the reason why it's not being pushed out like this is because we don't have our right section complete so i'm gonna go ahead and create the right section over this point right so christopher asked he says is uh is zero to full stack hero platinum only for a period of time or will it eq include any future courses so christopher just to let you know the offer right now is currently a huge sale we have right now so first link in the description if anyone wants to know about that but if you join now as part of this sale it includes access to all the courses available right now as well as all of the ones listed on the site and that's not going to be the case after the sale okay we're going to change it after the sale and the price is going to go up as well and that's so that we can enable the community to stay with the quality high quality individuals who want to be invested and kind of want to grow so that's my treat to you guys for hitting 2021k if you didn't see my instagram post 20k instagram 21k youtube now we're at 22. crazy stuff right but yes it includes all access to all content packs and platinum is lifetime diamond is lifetime silver and gold are monthly memberships okay so there you go dude let's carry on so the next thing concept is very cool dude i agree with you all right so um let's carry on guys so here we have this let's go ahead and create the header right okay so header right over here now what we're going to do is we're going to say right like we got oh nice we just got a donation from uncle gatsby 3.99 he says hi sunny do you have any experience with gatsby if so do you have any tutorials on it thank you so much for what you do for us dude i love that thank you so much to answer your question we do we are going to be covering gatsby inside the course uh but we will be covering it okay so just something to be aware of um but in the future hell yeah dude you know me i'm gonna cover all that stuff all right header right okay so this point header right what i'm gonna do is i'm gonna go ahead and create header right so you wanna go down to the bottom right so i'm gonna go down to the bottom over here and say const header like this header or right oops and there we go now remember if you oh nice we actually just got sebastian just joined the papa fam dude uh oh no so yeah sorry sebastian donated my bad uh we've got someone else joined the pop up just a second ago a bit confusing about two messages uh there we go let's carry on guys so header right okay so we got header right over here and then inside of header right what i'm gonna have is the simply the help outline icon okay so it's a simple icon on the right hand side so at this point and i love man i love this song i miss coming live honestly let's go help outline this is how you have to cheer yourself up when the sort of tech issues get in the way let's carry on i mean i don't know anywhere else it has this kind of vibe when you occurred honestly like i love it and this is what i thrive on this is what i try and do let's go ahead and get rid of these comments like if you're not having fun when you're coding what are you doing honestly it should be a fun experience right like as in obviously it gets it gets painful i'm not gonna lie right it gets painful right faizan we have react basics and web dev essentials being released nice i recommend anyone to join platinum platinum is my recommendation for anyone to jump in we have the cell ending in two days platinum is the one platinum is lifetime dude like don't waste your money on this membership the monthly ones just do platinum get lifetime and you're done and then you'll be part of the community for everything right which is crazy muhammad says sending your vibe is unstoppable that's what i'm talking about guys all right the music is actually part of my epidemic sounds playlist so i'm going to go ahead and fix this one above says looking fresh thank you dude all right now let's go ahead and finish off styling the header right let's go ahead and do that so over here hello right perfect jump down here to style head around we're going to say the final bit should be a flex 0.3 because think about it guys this was 0.3 which is 30 this is 0.4 which is 40 and i want the final one to be 0.3 that means it'll be perfectly sort of positioned around right vocal the first link in the description to go ahead and check it all out we're gonna say flex 0.3 there we go and i'm going to go ahead and say display flex there we go let's save and now you can see look at that guys looks really really clean right now okay and i'm going to actually align the items flex end so that way it sticks to the right and if you ever get tempted to go ahead and do something like float i will personally come to you and slap you so don't use hello anymore guys it's old it's it's gone don't do it all right don't do that stuff let's carry on all right so at this point i'm going to go ahead and i'm going to target the material you uh the material ui icon okay so at this point i'm going to say a material eye icon like this and inside of here i'm going to do margin left of auto margin right 20 pixels right there we go sanjay loved that one so guys look at that that looks pretty fresh right look at that boom i don't even see a difference man look at that no flicker except the little icon we will fix that okay so flexbox is clean like if you learn how to use flexbox you're gonna kill it four likes away from 300 likes let's smash that like button and go forward guys let's keep on going strong right so at this point what i'm going to do is let's go ahead and build the sidebar perhaps right so i think we're done with that yep we're done with that and guys look this is just an example of how powerful starred components is like look how clean this is boom look at that and the css is just down in you can move this into a separate component if you want i would recommend saying header.style.js if you're going to do it okay that'll be my recommendation we have 305 likes thank you so much guys just keep on going i love it just bring me back to life after that little tech issue let's just kill it guys let's kill it right so next thing i want to do is that sidebar right so i'm going to jump back over to app.js and you're going to see that we actually have a very clean build today okay so the next part right the entire app what i'm going to assume is that this bit over here so all of this is actually going to be something like an app body okay so this whole thing is going to be like the app body right and then the header is always going to show right that's how we're going to kind of build this out all right so at this point what i want to do is i'm going to have the header over here and what i'm going to do is i'm actually going to take the header outside the switch right so the header should always be present here and then what i'm going to do is i'm going to have app body right and app body is going to have everything inside and it's all going to be determined by a switch okay now at this point um what we're going to do is i'm actually change this build up a little bit so we might actually not need to over complicate this but eventually what we're going to have is a chat inside of here this is going to be a chat component okay and we will make it look super clean super nice now app body what is that right so we need to go ahead and define it so here i'm going to say constant body equals a styled div all right star div and there we go backticks and then what is this float that you talk about so if you don't know what float is then just just don't worry about it just pretend you didn't hear anything all right so says forget it exists you shouldn't be using float anymore it's just it's an old way of handling things okay so i'm going to go to the top and i'm going to go ahead and do boom import start from style components save right and go ahead and refresh there we go okay so we have the app body now what i can do with this app body is i can start defining styles or of everything that goes underneath there okay so inside of there all i'm going to have is actually before we go ahead and finish that bit i'm going to have something called a sidebar okay so over here i'm actually going to have a sidebar component so here i'll say oops i'm going to say sidebar and this will be responsible for this sidebar that you see right here okay so that's going to be the sidebar over there now at this point what i'm going to do is um right uh my name's sunny dude vibe uh all right so let's carry on so i'm going to go ahead and create a sidebar component so i'm going to go ahead and pop it in here so i'm going to create i'm going to go into my components folder create sidebar dot js okay and i'm going to say rfce right for a react functional component with an export right now over inside the sidebar let's go ahead and start coding this up all right so the first thing i want to do is create a sidebar container so this one i'm going to change it to a sidebar container now over here i'm going to say con sidebar container equals a style div all right so it's going to be our surrounding container outside the application go ahead and pop that down like so now at this point i need to make sure i ins import react start components like this okay now guys we are going to break 400 likes i'm telling you this keep on pushing this energy i love it i really can't believe it like how small are sort of not even small guys 22 000 followers like subscribers right now but we just continue to break like what is expected from a channel with 22k subs right let's keep on getting those likes up and let's just kill it let's just keep on going man that's the show the whole world were about this is crazy all right sidebar container over here right now the sidebar has a few areas it has a header and then it has a few extra bits down here these are all called sidebar option components and we're going to go ahead and build them out okay so i'm going to go ahead and show you how to do that uh today now the sidebar header right so let's go ahead and focus on this header section over here okay so um what we're going to do now is create a sidebar header so i'm going to go ahead and say okay sidebar header and then i need to create that so i'm going to say cons type by header equals a star div start div there we go and save right so now we have our sidebar header over here now inside what goes inside the sidebar header so i actually have two sections here i have a left section which i'm going to refer to as sidebar info okay and then i have i'm going to inside of here i'm going to have a h2 and a h3 okay so over here what i'm going to do is create another one called sidebar info i'm going to say sidebar info like so and i'm going to go ahead and create this then a quick way of doing this is boom and then you can go ahead and rename this one to sidebar info like so okay now inside of here i'm gonna have a h2 which says uh pop-up from hq okay so this is gonna refer to this bit over here now underneath that i'm gonna have a h3 and inside the h3 i'm gonna firstly have this little drawing icon right and this is actually got a weird name to it right it's called fiber manual record icon now god knows why it's called that but it is what it is okay so it is what it is right and we're all we're literally climbing on those likes guys let's keep it coming for fiber manual icon so i'm gonna go ahead and import that from material ui like so perfect now underneath right i'm gonna go ahead and have oh dude i think we just got chris oh welcome chris just joined the uh papa platinum dude dude welcome man welcome to the proper fun guys any we've got loads of members in the paparam right now welcome christopher he just jumped in the sale is the first link in the description guys he joined he made the right decision purple platinum welcome dude that's amazing right so now we have the h3 over here dude that just made me pumped up man and then we're going to have the user's name so in this case what i'm going to say is i'm just going to say sunny sangha for now and then when we log in i'm actually going to pull that record from it okay jacob says sonny you are my hero dude you are my hero for watching so thank you so much man all right now i'm gonna go ahead and import the sidebar into our app.js so over here i'm gonna say app.js and i'm gonna go ahead and import this right boom import save right i'm gonna go ahead fontana that's fire dude hell yeah man all right the fan grows man says you're right that's it dude we just keep on growing man all right so at this point how do we go ahead and get this to look the way we need it so we have the sidebar over here okay and what i want to just double check is that okay so firstly app body let's go ahead and style this in a way that we need to okay so i'm going to go ahead and first when we have the sidebar body i'm going to say this is display flex and it has a height of 100 view height okay because i want to use up the entire height save like so i'm going to refresh and you can still you can't see anything right now okay i'm going to fix that in just a second i think that might be because we haven't actually saved this properly there we go and you can see we will fix that in just a sec let's go back to app.js over here now what i'm going to do is i'm going to make sure all right so we've got the sidebar here perfect from component sidebar and let's just double check right now we've got the proper farm like so it's most likely the color at this point so we'll go ahead and fix that out so i'm going to jump into my sidebar and when we have the sidebar container i'm going to style that one right now so cyborg container style div and this one is going to be a color white but the background color is going to be the slack color okay so the first thing we'll do is say background color variable slack color and there you go right that's how we do it um looks fresh okay so uh faizan i will be dropping react native dude don't worry um right an expo you should be using expo dude if you are working on it until you need anything else but we got color white there we go and then what i'm going to say is a flex of 0.3 because i want the sidebar to only take up 30 so here we're going to say flex of 0.3 and then you can see now it's taking up 0.3 okay and then what i'm going to say is a border top of one pixel solid right and i'm going to say a margin top of 60 pixels now there is a little trick i've done here okay and what i've done here is i've actually gone ahead and made this fix and there's a reason why because later on i do this little cool trick and now with a margin top of 60 pixels it shows okay and there's a reason why because if you notice in the final build if we have a long bit of text right and we do this say hello world let's just type in hello world you see how it scrolls down it's a little trick that we're doing to keep the top it where it is okay so thank you so much great energy appreciated dude so let's carry on so at this point let's keep going and we're going to have a bunch of horizontal rows and we're going to target that in a sec but we'll leave it for now so at this point how do i get this to look like this okay because it did they definitely don't look like that right now um what we need to do is i'm gonna go ahead and firstly next to the sidebar info i'm gonna get that icon so it's called the create icon and we need to import that from material ui so i need to go to the top and say import create icon from material ui save now refresh and we should be able to see the little pencil okay so let's go ahead and make this um look in the exact way we need to like this one over here because that looks clean that looks ugly okay we want to make it look a lot better okay so here what i'm gonna do is i'm gonna go ahead and say let me turn my mic gain down there we go i'm going to say cyborg container and we've already started this one out the next one we do sidebar header okay so for the sidebar header i'm going to simply go ahead and jump over to my my start component where is it down here and i'm going to give this one the following we'll say display flex and it's going to have a border bottom so let me go ahead and just grab this i'm going to say display flex or the bottom padding bottom and a padding around it okay there we go let's just chuck that in and this actually eradicates this one so we can go ahead and get rid of that and you can see now it's somewhat got a similar structure but the text isn't the same okay now we have an icon here this one right now display flex made it into a row which is why this is now on the right of this okay if you guys know peter mckinnon you'll know what this song is about right this is where it's about it's where it's from um so i'm gonna do material ui svg so i'm gonna target the inner material ui icon and then in here i'm gonna give this icon a padding of 8 pixels a color a font size a border radius so it has a nice little circle behind it and a background color of white and we should with these rules get it to look like this let's go ahead and give that a try boom save kapow there we go looks good right i like that i think that looks really nice the next thing i want to do is we have sidebar info now sidebar info is this bit i want this to essentially look like this okay so let's go ahead and make it that way okay so we will have redox inside of zero to full stack hero dude so we have a sale on right now first link in the description make sure you you capitalize on that because it's gonna the doors are gonna close after that man i can't i can't even say it enough all right so i'm going to go over to the sidebar info and i'm going to start this one i'm going to say flex 1 right flex on that and then here we're going to say h2 and then i'm going to go ahead and say here i want a font size of 15 pixels font weight of 900 and a margin bottom of 5 pixels okay so let's go ahead and do this save right so uh faizan dude again i do want everyone man i do want everyone to say like don't spam david says sonny can you include things like formic yes i actually did do that inside of my gmail clone um so you can check no did i didn't use formic but i used um i used react hooks form which has validation inside of it so if you're interested in that dude david check out my gmail clone the original gmail clone all right let's go say h3 i don't care i built that it's gonna say display flex and then what we're gonna do is say font size 13 font size 13 um and i would say font weight to 400 a line item center right so let's go ahead and do this boom there we go save and then oh man's in the house what's up babe my gorgeous girlfriend's in the house and yeah i actually had a bad issue but we're back now okay so i'm going to target this is the thing that i like by the way so i have a h3 tag and if you see over here i have a h3 and inside of it i have that material ui icon okay so usually you have to do some janky weird stuff in css right but this is pretty clean taran please don't spam dude all right so here what i'm going to say is target the h3 see you later gwen and i'm going to target the material ui svg root icon go ahead and grab that and then here i'm gonna go ahead and have the font size uh i'm gonna go ahead and one size 14 margin top one pixel margin right two pixels and a color of green and you'll notice that this will suddenly change into a beautiful looking icon and it'll have that sort of you know that signed in look and feel to it okay so that's exactly what i wanted right there right now if you notice look at that looks pretty damn good to me okay now the reason why this is a little bit different is because we have this chat component on the right but we will get there okay we're going to get to that point guys let's hit 400 likes if you're watching right now and you haven't smashed the thumbs up button smash it because it's going to help this video get to as many people as possible with that said quick wall break what's up rishi he's watching on um richie lola laura sorry dude i always get it wrong uh he's watching on twitch let's carry on okay so at this point i'm gonna go ahead and have over here we have the create icon so the sidebar header is essentially complete okay so we have the header which is essentially complete now down here we're gonna have a reusable component and we're gonna call this one this sidebar option okay it's a sidebar option so i already have my coffee thank you so much dude um so cyber option so i'm gonna go ahead and create that right now so i'm gonna open up my code go into my components folder and you can see your site look pretty clean okay let's say sidebar option.js i'm gonna hide that rfce boom right let's go ahead whoa nigeria in the house what's up man and then here again you can see like you start getting into a flow of it right i'm going to say cons sidebar option container and we'll say equal style div my style diff and you just want to go ahead and get you know like that muscle memory up i always say like it's not you don't have to be the best coder you just need to get that pattern recognition and you slowly figure things out guys i don't remember everything off the top of my head i don't think i don't i really don't expect any developer to but you want to go ahead and make sure you just take the time to ingrain that muscle memory okay like because it does make a difference okay it's very important um practice will lead to that okay so at this point we have our sidebar over here now what we're gonna do is have a bunch of these sidebars now these are gonna have two props okay i want to pass in a prop which is the icon itself and i want to pass in the title which is going to be like this the title mentions and reactions and so forth and each individual icon now what i've actually done here is i'll show you how i want this to look so let's assume i had all of these right in so inside my code so just to save some time i've actually gone ahead and imported those already now in react you can have each component can take props right now props are properties they allow um dax says it's gonna be recorded yes dude it's gonna be recorded um and it will allow a component to render with slight differences based on the properties that you pass in okay so at this point let's go ahead and paste right so i've got this right here and you guys can see that we've just got a bunch of these and each one is getting a different icon and it's getting a different title now i will show you how to consume that in just a sec but let's go ahead and first import all of those icons as necessary okay so it's going to be from the to all the way to expand all right i'm going to go ahead and grab a bunch of icons and import them okay so you can pause the video there watch it if you need to get those icons now at this point what we should see is cyborg option is not defined okay so obviously it makes sense right we need to go to cyber option hit save and then i need to go to sidebar and go ahead and do my little go to the end of the component control spacebar and there we go and let's see the second one is a source component sidebar option that actually does an auto import trick okay ayman says fire bro thank you so much dude appreciate you watching let's go ahead and do that now you can see look it loads right now nothing's on the screen so we're gonna go ahead and make sure something actually shows up on the screen okay guys just hit 400 likes come on we can do it i know it we can keep pushing this stuff right so what we're going to do is we have the icon then we have the title thread so in this case what i want to do here is i want to actually consume this as something called props like i mentioned before so perhaps comes through as a simple function argument okay so at this point what i want to do is i'm going to go ahead and do i'm going to destructure which means i'm essentially going to go ahead and tear apart right i'm going to basically go ahead and tear apart the object okay so i'm going to go ahead and pull apart the object at this point i'm going to pull the icon out and the title this is called destructuring okay uh robert there is actually all the code inside the github repo um but we need to kind of move a little faster than this one so uh let's carry on dude so at this point um rather than sidebar container a sidebar option actually that's good we can keep it as that okay so i'm gonna go ahead and jump in right so now at this point what i'm also going to do is there we go that's fine actually we've got icon and title so you can see we're actually passing in a whole icon here right so and that's the reason why this is a capital i not a lowercase i because we're going to be rendering it on the screen in just a sec now inside of here right what i'm going to do is i'm going to have a few things in there so i'm going to say okay if you passed in an icon right so we're going to protect ourselves then i'm going to render the icon out okay it's a self-closing component and all of these icons in material ui take your font size and then we can give that font size of small okay now here i'm actually going to give it an inline style because it's a bit hard to do a uh a styled component in that use case so i'm going to say just give it a padding of 10 for each of these right so there we go now at this point you can see all the icons have just popped in so it's looking pretty good at this point right so and the reason why i put icon and and is because you might actually render the component now without passing in an icon okay so the second thing i'm gonna say is okay if you pass the icon then what i'm gonna say is i'm gonna go ahead and render a h3 which has the title okay so here i'm gonna say okay jsx with the squiggly brackets i'm to say title like this and here is we're using a ternary operator so this basically means if if icon is truthy so if it's true or if it has a value inside of it render this out otherwise render out what's ever in this side of in this parenthesis so at this point what i'm gonna do is i'm gonna go ahead and create a sidebar option channel um div okay so this is actually gonna be a start component and i'm gonna create this over here so i'm gonna copy that i'm gonna go ahead and grab this line and then i'm also gonna go ahead and boom there we go cyber option channel there we go now at this point we have this div star div there and i'm just gonna span a hashtag here right i'm going to span a hashtag and i'm going to have the title over here and there's a reason why we're doing this now it'll make a lot of sense in just a sec okay so i'm going to go ahead and hit save code with yug says awesome build please call out my name yeah i got you dude guys 180 people watching this is huge right now we actually have 200 across all the platforms smash that thumbs up button please if you're enjoying this because it's going to help the video help more people and that's what we do in the papa fam if you're interested in joining first link in the description sale ends in two days and i'm closing the doors for that yeah that's how it is abhishek what's up dude all right so at this point you can see look this is how it's looking right i don't want it to look like this i want to look a little bit cleaner than this so how do i style it to look in that way so i'm going to go to the sidebar option container and the first thing we'll say is display flex now i do want to see my code so i'm going to go ahead and make it like this i'm going to say display flex okay save and you can see everything goes into a row okay hey maven's here she goes yes guys hold on sunny sunny let's go for food after yeah honestly i got the headache this gave me that one called me up and i gave her i was a bit grumpy because uh you know the the stream cut but thank you babe for always sticking in right so at this point i will say display flex font size of 12 pixels and then i'm going to say align items center okay line item center padding left of two pixels a padding left of two pixels all right so two pixels like this and then i'm going to say a cursor point now because i want all of these to be like somewhat sort of as you hover over it right you can say sorry i'm sorry okay there we go i'm sorry for being grumpy papa react is kind of grumpy at times guys so there you go all right i'm going to say okay when i hover over it i want to change the opacity right so in order to do that what i do is i i that's it i'm now she's taking the neck all right so opacity 0.9 i'm going to change the background color when i hover over it okay so let's go ahead and refresh and then you see that guys look at that fresh okay look at that looks good pretty clean now you can see over here look we're almost there and it's looking pretty good at this point okay so what i'm gonna do is i'm gonna target the h3 right now the h3 sits over here okay so in order to grab it again start components makes it so easy you can say h3 grab it i'm going to say a font weight because i want to reduce the boldness of that text i'm going to say it should be a 500 sort of weight okay so 500 is somewhat of an average rate you can see it drops the font size a little bit more okay so after we've done the h3 i'm going to jump into the h3 and and i'm going to jump into a span tag and as you can remember over here we had a span for the hashtag there's a reason why i spam the hashtag it's because i only want to style the that one hashtag right i just want to go ahead uh and yeah all right so now i see uh augustine says wow the engine this platform is mad exactly dude that's all we're about honestly it's just you know we just have fun here man padding of 15 pixels okay that's it and uh and we code right we code properly that's how we do it right so look at that that looks clean man i like that that looks pretty good so at this point what we're gonna do is i'm gonna go back up to my code and now we have this reusable component okay so it looks pretty good at this point um what was very useful about this is that we actually made it so that if we don't pass an icon in we can just use the we can just render our title now why is that handy because if you wanted to have it like you can pretty much have it as just like channels without an icon so it's a nice way of doing it okay so what we can do is i'm gonna go back to sidebar and over here so i'm gonna go ahead and make that bit smaller so you guys can see it there we go over here what i'm gonna say is where we have sidebar option michael what's up dude michael actually won uh a prize inside of um i think it was a second place michael so congrats dude inside the netflix challenge absolutely smashed it did so here i'm gonna drop horizontal lines okay so you see over in this build we have the horizontal lines coming in clutch over here and here so i'm going to go ahead and do the same thing over in our build okay so i'm going to say horizontal line and then you can see over here it just looks pretty ugly at that point but we'll style it right we'll make a little better and then i'm gonna have another cyber option okay so i don't know why that jumped over there we have another cyber option with the expand more icon and the title is going to be channels and this is what the beauty right this is the real beauty of the um this is the beauty of style component of reusable components okay and style components i guess because we're using both of them but it's really really clean because reasonable components like if you do them well you can code so fast right because you don't have to repeat yourself it also makes it a lot easier to maintain your code base okay so this is really good guys come on almost at 400 likes let's go all right so i'm going to drop another horizontal row over here so boom we should have another line and then what i'm going to do is i'm going to have an add icon channel right so here i'm going to have another add icon and this has another prop called add channel option okay and i'll show you what we do with that one in just a sec but if i go ahead and save that now it's going to freak out because we didn't import ad icon so i'm going to go ahead and pull in add icon from material ui like so save and then what i'm going to do is refresh and you can see that the go here would be all of these buttons are actually clickable right so i can click them and all that sort of stuff and then this one if i click it it says please enter a channel name so we want some functionality behind it how do i determine when to sort of pop this up i pass another prop and you guessed it that prop is gonna be the add channel option so if i go over to sidebar option i'm gonna pull that in as a prop okay and we'll sort of set that up in just a sec okay perfect now at this point right we have the channels over here and then we have the final bit underneath now the last bit is actually the channels which render out so if i was to go ahead and add a channel saying um let's just say let's just say pop fam all right just to say pop fam okay and you can see like a channel came in here so this one we need to go ahead and actually sort of set up with a database behind it okay so this is actually sort of uh oh nice classes guys come on energy from twitch nice um yeah so you can you see this is gonna be set up to a database we're gonna go ahead and configure that in just a sec okay so what i'm gonna do at this point is i'm going to go ahead and style out the hr right so i'm going to go into my sidebar over here and i'm going to go ahead and say start bar sorry sidebar container and i'm going to target the horizontal row which is that line and i'm going to give it a margin top 10 pixels margin bottom and a border of one pixel solid and it's got a nice little color to it you guys will see in just a sec boom there we go very subtle okay very very subtle stuff and then what we're gonna do is the we've already done the header we've already done that blah blah blah nice that actually looks pretty damn good okay so at this point if i go ahead and show you guys look at this that's pretty damn close right so we're looking pretty good at this point okay now what we want to do is i actually want to firstly create these rooms okay so how do we create the rooms right so oh nice london uk oh i'm in london dude right so uh let's go ahead and say at this point boom just go and pop this halfway put this halfway nice okay so inside of sidebar option what i'm going to do is i'm going to have a add channel now what's really cool here is that i'm going to basically have it so that if you click on this one you add a channel if you click on this one you're selecting a channel okay so in this case if i if i click on this one it selects the channel okay it takes a little second because the internet's a bit slow but if i go ahead and for example add the channel how do i do that right how do i make it sort of dependent on on that sort of thing so the way i do that is i go ahead let me just make this small for a sec and then we make this a bit bigger so we go ahead we take our add channel option prop now we go to our sidebar option container and what i simply do is i say okay attach an on click right uh but if i have add channel option passed as a prop i'm going to trigger off the add channel function which we need to write or if that's actually not there we don't actually see this prop in there or it's falsies so which means it's not got a value behind it i want to select a channel instead now these two functions i need to create add channel and select channel okay so almost at 400 likes guys smash the thumbs up button we're almost almost there okay now at this point i'm going to create two functions we're going to create one which is const add channel and this is gonna be an anonymous function i'm gonna do the same thing for select channel i'm gonna say con select channel boom an anonymous function like so that's it right we've got two two different functions over there and uh yeah you shouldn't have any errors inside your code at this point everything should be looking good 400 likes literally one like away come on guys let's do it literally we're almost up flipping 500 likes and we literally lost 200 from a technical glitch that's what i'm talking about guys thank you so much we just hit 400 likes incredible stuff incredible incredible stuff that's what the proper fans about just want to say one more time sell ends in two days to join the pop fam god damn guys don't miss out first link in the description christopher made the choice today to join us and he will not regret it dude that's what i'm talking about i love how you know you wait for that one like and then it's like boom 10 likes right that's what i'm talking about that's the kind of energy we need dude like where was those where were those people they're just like waiting on standby like i'm gonna i'm gonna be that person that gets one and then everyone decides to jump and it's like boom you know how it is all right all right let's carry on guys so at this point we have got the ad channel okay so for the ad channel we're gonna do a few cool things and now what i need to do is set up firebase okay so i'm gonna go over to my files earlier remember we added in the firebase configuration okay so what i actually need to do is command j pull out my terminal i'm gonna say yarn add firebase all right so yes because we're going to install firebase into our project now while it's doing that i can go over here and i can say import firebase from firebase mahmed says hey sony great work man thank you so much dude shrika let's do it dude let's get 500 i think we can do it right now what we're going to say is while that's installing i already know it's right we're going to say firebase app equals firebase which is our package we just installed dot initialize app and the way you set up the app and basically what this is doing is it connects the the front end that we're building right now to firebase so firebase is the thing that's powering everything it's google's sort of backend servers and basically right now it initialized app is gonna take that configuration and connect these two things together all right and it makes everything work in the way we expect so here i'm going to say firebase config okay and then i'm going to go ahead and say const db because i need access to the database now what database am i referring to guys you might be wondering so i'm going to go over to my firebase i'm going to go into over here and i'm going to say cloud firestore okay so cloud firestore over here victor uh newbleen says you deserve 1 million for subscribers dude we're not going to stop until we get there so i'm telling you just keep on going right next right now let's go ahead and hit 500 likes that's the sort of you know we celebrate all this morning you want to click on create database start in test mode click next here you want to click name enable that's fine all good right so once that's done this will go ahead and set up firestore right firestore is a real-time database now it's so powerful it's real-time which means as messages come through it'll be so easy to implement we're gonna go ahead and do it really nicely right now okay so it says cannot enable after you set it though oh interesting let's have a look why i might actually have to use if it if you can't enable it i'll i'll go ahead and use a different account that's completely cool all right so setting up security rules what's up with that okay it did that so if you get that error just go ahead and do it all right so at this point what i'm gonna do is uh and guys this is not a gossip channel dude so please don't all right so what we're gonna do is we're going to go ahead and this is basically a nosql structure right now what does a nosql structure look like right nosql pretty much has a structure of collection right and a collection can have several documents okay so it'll have several documents now if you don't know about this stuff i really recommend you look into what nosql databases are like and then after a document like you'll have several documents so imagine our collection was let's say rooms right so chat rooms okay every single document would represent a different room like a different chat room okay now each room will have its own collections you see it takes a collection document collection structure so this one would be a collection and then in here you would have a collection of messages right so this one would be like for example would be a collection of messages and then this would lead to a literally again so it would lead to all the messages in the form of document like documents okay so here you would have all the different messages for this chat room so you see you have a collection of rooms the rooms themselves each room will have its own collection of messages and then these will be rendered out as documents okay so that's how it kind of works when you're using nosql okay so at this point what we're gonna do black knight says just finished netflix day three challenge i came here for the new build that's what i'm talking about dude coming in clutch man so at this point we've got the database how do i access it okay i say firebase app i basically grab this pastex i'm lazy and then i say dot firestore right no no i don't i say firebase app yeah dot five store yeah i do almost got lost there right and then i'm gonna say const auth because we have a sign in in this app so i'm gonna say firebase.org and this is how we do it now how do i get google authentication right what i do is i add in something called a provider now all you need to do is add in this line right here and what this does is it gets the google authentication provider which is that nice little pop-up ready for us okay so what i do now is i go over to my firebase and i go to authentication the tab over here click it all right this is insane right that's what i'm saying guys honestly like the power of the papa phone we have literally uh 170 people watching across different platforms right now and we have 421 likes like that's just that just shows you how powerful this damn community is right like it's incredible like i don't see any other channel doing this right now authentication click get started and then here very simple to get this up and running okay what you want to do is you want to go to google hit this button enable and then you want to click on a project support email save that's how you enable google authentication guys it's literally that simple i promise you and it's even easier now because we're using firebase hooks and they're going to be your best friend i swear to god guys let's hit 500 likes come on it's going to be so fun all right so we've got this right up now running okay so this looks pretty good and what i'm going to do now is i need to export this stuff so that we can use it outside so i'm going to say export and i'm going to export explicitly i'm going to say export the authentication the provider and the db this means that i can access the db from anywhere i can access the authentication and i can access a little pop-up anywhere okay so this is gonna be uh really important work says i learned more from sunny than in university dude that's what i'm talking about man that's what i wanna do you know that's my mission to just drive a value right let's get this energy back up quick water break if you guys are having a water break then uh join me right now and let's let's have it together sounded weird but you know [Music] all right change the lighting a little bit change a little tempo to this right let's carry on guys okay so at this point we're going to go ahead and jump into our sidebar option okay say to say teacher t break four access nice red bull break oh i don't know it's dangerous for me dude six o'clock i i do want to sleep tonight all right so at this point what we're gonna do is i'm gonna actually add in so firstly we're gonna do the ad channel now how do we add a channel to that database structure that i showed you earlier before we actually do that i want to add i want to show you guys a little trick okay so if you go to rules over here now don't do this in production environments this is only for demos or something on your portfolio that don't really matter but i'm going to make it so that anyone can read and write to this database you shouldn't do that for production okay if you should only have it and i'm not gonna go into the security rules right now but it's very important that you don't do that in production environments let's go ahead and go back to data so how do i go ahead and add rooms right so what rooms am i talking about exactly i'm talking about these rooms so like youtube papa fam papa how do you get all these different channels right and eventually if you guys stick it to the end you will be able to actually go ahead and jump onto the chat and we can all have a chat through the app which would be pretty cool okay fantanus is still in love with that water bottle honestly dude i love this water bottle i have so many of these um so i'm gonna say add channel and then here what i'm gonna do is i'm gonna say okay what i'm gonna do is i'll say const channel name and how do i get the channel name right what i'm going to do is i'm going to say prompt okay so i'm actually going to prompt the user and that's actually built in so we can say please enter the channel name right so please enter the channel name okay now what you want to do is whenever you prompt the user you need to protect against the empty so some people might go ahead and prompt but then go ahead and enter it without value or you want to protect against that uh this is a pre this is a more upgraded version of the previous slack clone yes so here we say if and then we say channel name right if channel name and if the channel name has a value then we access the database because basically remember that firebase that we the configuration we set up earlier and we exported it so i'm going to pull in my database and i'm just going to say and i'm importing it from my local firebase file i'm going to say db dot collection and the collection is going to be the rooms and what i'm going to do is i'm going to add a room okay find heart thank you so much dude i'm going to add a room and they're basically adding a room so it's very simple you add an object right you just simply go ahead and pop in the name of this room is going to be the channel name that i just collected from the prompt now let's go ahead and see this in action over on the other one so if we go ahead and say add a channel and yeah you can see if i say like let's just say uh coding enter you can see coding right so how do i go ahead and do that so i'm going to say channel name and hit save now on our build over here if i go ahead and hit add channel and i need to refresh most likely and what we actually need to do is in sidebar add channel option i passed it through we pass in over here there we go and if i go ahead and click add channel now please enter the channel name so if i say abc emerson says most friendly guy ever thank you so much guys uh well it's literally nearly up 450 likes let's go man let's get okay perfect okay so it worked in the way we expected it to but nothing really happened alright saita just said suddenly i got five jobs wow oh my god dude just send me brew for that please tell me on my instagram i don't know why is i love this damn song man all right so now we pretty much go ahead and have a nice little prompt at this point okay all right so 450 likes let's go man oh my god this channel was insane honestly let's go all right so this will go ahead and add it now i actually just went ahead and tried that out so let's see if i added it to there but so i'm going to hit refresh on the cloud firestore database we should see rooms rooms there we go and we see abc that was the room that we just created right awesome stuff so we actually went ahead and pushed it into our back end okay so that looks really really nice at this point in time now how do i actually go ahead and then list them out on the sidebar though right so it's all farewell that we add them but how do i actually use them now previously we had to use some kind of janky's effect and if you've ever seen any of my builds it was kind of a headache to do that okay so instead what we're going to be doing now because what i want to do is i want to have a real-time listener to that database which will allow me to basically pull this in in a real-time fashion okay so what i'm going to do here is uh oh nice shazamed it thank you dude so what i'm going to do here is i'm actually going to go ahead and say um firebase hooks and save and you can see react firebase hooks right you're going to click the first link and all you need to do to get this up and running you guys can feel free to read that documentation but all i'm going to do is go ahead and command j yarn add react firebase hooks so i'm going to install this okay and this is the one that you want to install now they have a really great documentation there and here's the sort of useful links that show you how to use each one so the authentication has cloud files to hooks but you guys are going to see the absolute crazy power okay you're going to see honestly the crazy power of this right now so it's already installed so we hit command j to hide it and now what we do is we go to the top of our file where we typically would have you know defined some state right but what we do here is we say const we want the channels from firestore okay so something i don't really see what you're doing here so we're going to get the channels and what's actually even better we can get the loading state even when it's loading and if there's an error we can actually get the error state right so this is getting this is kind of getting powerful saying what are you doing here right and then here we say equals use collection okay views collection and some of you watching like i'm listening i'm kind of listening where's this happening and let's go ahead and import that right from the react firebase hooks and then how do we go ahead and access the collection so i'm actually going to go ahead and access this collection right now and i'm trying to get the channels right which is actually the rooms right so in this case the naming's a bit off but that's what we're referring to madhu says you have a lot of energy man thank you so much dude you guys give me that energy and here what i do is i say db right so i'm going to go ahead and pull in my db which i already have and i'm saying db.collection and i'm just going to point to the rooms and you better god down believe it that that is it now in channels i have the collections so if i go ahead and i just say let's just do a console log of channels here and i go ahead and i do f command f12 to show this look at this guys that is actually that's actually the uh the channels right there so if i do docs an array of one and it looks so weird right now but i'll show you that i'll prove to you that that is actually what we're looking for right so this isn't this is incredible all right this is really really incredible uh finna says it's been an hour you nearly finished it you went out at a pace and made me understand thanks a lot thank you so much man honestly like i really appreciate the kind words um surendra recognize me bro right so let's carry on um [Music] and what we're going to do now is we're going to go ahead and get rid of that console log and i'm going to go ahead and say so we have the channels over there right now i want to loop through them and show them as sidebar options okay so how do i do that what i want to do is each actual sort of room has an id as well so i will be passing that as in another additional prop to my sidebar option but what i need to do here is go back to sidebar and i'm going to go over here and i'm going to say okay go into the channels right go into the docs and remember channels can be undefined in the beginning so we're going to protect it with something called optional chaining right then we say dot right how are using react.js without having stack overflow in the next page real programmer respect thank you dude honestly just practice takes a lot of practice and uh my course right obviously take it you understand react inside out right there's a sale one by the way guys two days left first link in description check it out if you're interested right here we're gonna say uh channels.docs.map okay uh so all the audiences sees i'm sorry i didn't pronounce it right through them yes i'm gonna map through them dude so i'm gonna go ahead and say map for each one and each of the documents what i'm going to do is i'm going to go ahead and return something so what i want to do is i want to return through this entire list and basically render out a sidebar option so i'm going to go ahead and pop a cyber option now obviously i don't want this one i actually just wanted the i don't want the icon here what i want instead is i want to say okay the title should be the doc dot data so i'm going to access the data which is this data inside of a document and i'm going to say dot name which was actually the name that i gave it here so dot name right so little typo dot name okay that's the first thing now whenever you have a map inside of react you should always provide a key right now keys are very important because it tells you react that you do not need to re-render that entire list if something gets added in because let's say it rendered a thousand elements in the list and you only want to you only add in one extra sort of element to that list because every single one has a different key now react knows oh wait a sec you only added something at the bottom the other 52 that you added before don't need to be re-rendered so it makes it a lot more efficient okay so here i say the key is dot doc id right and the document id is going to be this one so at this point what can i do i can say actually i'm going to pass through an id which is going to be the doctor id because i actually need this id as a prop and i'll show you why okay i'll show you exactly why channels is not defined that's because um oh wait a sec in sidebar options um oh i've done it in the wrong room there we go this needs to be inside bar my bad so this should be inside bar right now there we go inside bar and then this means that the use collection should also be inside bar okay so this one should also be in here which means we also need to import db so make sure you just follow me with that one as a slight little change it should be in sidebar okay harpery what's up man good to see you bro uh that's my brother-in-law's that's just here's my brother in the house there we go all right and then here we're gonna say channels there we go and you got the channels it says channels is not defined but if we save now when we refresh should be good right so now you can see like the channels but ah there you go guys abc there we go look at that works right i mean it looks like trash but we'll make it look nice um so at this point like it does not look great but we're going to make that look a little bit better we're going to make that look very clean in the end okay so how do i get this to look in the way that i have option so i'm heading over to sidebar option i'm passing through the id okay so make sure you don't forget that step is very important now inside the sidebar option okay uh that's it harps is in the house man so what we're gonna do is where we have the h3 okay so this is going to be the sidebar option channel so we need to style cyber option channel which is why it looks like trash right now so i'm gonna go over to sidebar option channel and where is that sidebar option channel there we go okay so this is gonna be a sli this is not gonna be a div it's gonna be a h3 okay because this is going to be an a sort of h3 so you see what we're doing there it's really good right actually says hey son you just joined you are amazing thank you so much dude uh hardik says you're on fire thank you man we're literally about to break 500 likes come on guys just keep on going it's so so cool and i love how everyone chats to each other starts to get to know each other so nice all right so here i'm going to say padding of 10 pixels by zero so 10 pixels by zero i'm going to say a font weight of 300. whoa check out ancho sing he says i have landed a 100k job thank you that's it man that's what we do that's what we do right if you if the room collection has only an id how did you extract channels um no so it doesn't have an id these are the channels this is going to be like a doc these are all channels so the room all of these documents would be the channels and then the doc.data would be the data inside of each one okay so let's go ahead and save and then you see guys that looks pretty clean okay but you see look at that oh it shouldn't be triggering it should only be triggering on the abc it should it shouldn't be triggering on this one right so we've got a problem there so the problem there is we've got a channel option but what we need to actually do is say select channel okay so at this point what we need to do is say well we have select channel so now what i'm going to do is firstly this should this is oh oops if we go to sidebar we don't need the add channel option here we don't want that we refresh and you should have it so that only the add channel makes the pop-up come up if you click this one it shouldn't make it pop up because what we actually want to do is trigger off the select channel function okay so there we go right so now what i'm going to do is um curious says uh so this is a much more upgraded slack clone so this has style components redox and firebase hooks so i love a lot more all right um all right let's carry on guys so select channel so inside the select channel what i'm going to do is this is where i'm going to use redux so what i want to do is every time we select a room i want to push the id into my redux right now what is redux right redux is like a global store so think of our application where every single component has state which is like some kind of memory inside of it right now if i need some memory to exist and kind of float around my entire app and i just need to pull it when i need to redox is basically it's going to solve that problem for us it's going to act as something like a global store it's going to be like a global place where we can access and store variables now how do we push data into redux we dispatch something called an action which allows us to manipulate the sort of data which lies inside the redux slices now what we do is in today's build we're only going to have one slice which is just going to refer to all the app contents but you can actually divide that global store up in things that make sense let's say you had an e-commerce site you could have a basket slice a user slice and all that cool stuff okay so a lot a lot to learn here and it's going to be a lot of fun okay so what we're going to do now is actually prepare redux and it's going to be a lot simpler than you think okay so let's go ahead and jump into that so i'm going to go over to my code and i'm going to go ahead and say where we have oh and you'll sing thank you so much dude it does not matter if it's a he says a small donation but dude any donation is massively appreciated thank you so much so here we have um says chatting away to everyone here we go in app store.js so i want to rename this to not be the counter reducer i'm going to rename all of these things to become app reducer so i'm going to have one kind of global store inside of this build but typically you should spread it out based on like you know what's in the basket what's in the sort of user information that sort of stuff so at this point i need to go to my um i need to go to my features click that and i'm going to rename counter slice to become app slice right app slice there we go all right perfect now i'm going to jump into app slice and over here what i need to do is i need to start renaming this so i'm going to rename these two things to become app and then i'm going to go here and this is actually going to become room id this is the initial state of that global store right now i just have a room id which by default in the beginning is going to be no it's not going to have a value okay um right so please don't spam dude um you're gonna get blocked so sorry about that dude um so at this point what i'm gonna do is i'm gonna go ahead and say let's go down here i'm gonna get rid of this increment async there we go boom and then i'm going to go ahead and actually change this up a little bit so where we have features down here i'm going to change this to have uh sort of an action and let's think about what is the action when we click that button we kind of want to enter the room okay and by entering the room what i'm going to do is i'm going to take the id okay i'm going to take the id of the sort of the the sidebar option i just click so the room i'm going to get the id and basically push it into the store with the enter room action okay so let's go ahead and do that right now so i'm gonna get rid of these two actions we don't need them right now okay and every single action inside this reducers section is these are the actions okay so i'm gonna go ahead and get rid of this comment and all we're gonna do here is essentially go ahead and have i don't know why my kite just opened up strange um so i'm gonna oh we just hit 500 likes thank you so much guys that's incredible man 181 people watching we have 500 likes on this let's hit 600 now let's keep on going man that is insane let's keep on going so so cool honestly and the fact that we had a cut out with the tech issue doesn't stop us man like we have the whole video up after this build is finished it's gonna be perfect you know we don't let this stuff ruin us and guys as i said before there's a two day sale left right you have two days to capitalize on that so first link in the description christopher made the right choice today jumped in but anyway guys congrats we hit 500 let's keep on going all right so for the enter room action okay so we're going to say enter room is going to be our action and this one is going to have whenever you dispatch an action you get the state and you get the action itself now this will make a lot of sense later but what we want to do is whenever we just get that action inside of our state we're going to say change the room id to whatever the action.payload.room id is okay and this will make a lot of sense once we go ahead and break this down and again redux can be scary guys it can be scary but don't freak out about it we're going to break it down and it will make a lot of sense okay abdul says i was the one who did the 500 can i get a shout out there you go dude right so we need to export this so that way we can use it outside so firstly we're going to change counter to app slice we're going to go here to get rid of these and we're going to make it enter room so now that we can use this enter room outside of the uh app slice component i was in function okay so these are called selectors now so once we push a value into the global store how do i basically remember i said you dispatch an action which goes ahead and changes a bit of the store how do i now grab that bit of data the room id from the global store right we have something called a selector selectors are really important you need to learn them and this is how you write a selector so we're going to say select room id oops select room id so select room id and this will have the state that have access to this thing it goes into state dot app but i mean it's defined by app because this is the app slice and then here we're going to say estate.app.room id right perfect and we just got 20 likes insane stuff dude honestly crazy crazy stuff right um so now what i'm going to do is go ahead and say export default app slice there we go okay appstore reducer now everything should be clean here right so if we hit save and we go back to our application and let's go ahead and see no errors that's what we want to see okay so i'm going to go ahead and double check let's go to our sidebar option now so i've went ahead and i've i can push into the database successfully but i want to go ahead and remember when i click one of these for example this one i need to push that room id into the into the um one sec let me see uh yeah i'm going to push that id into the redux store now true youngs has a good question so he says hi sonny love what you're doing thank you dude i have one question what's the difference between using redux and the data layer they approach used in the last uh slack clone so big difference honestly and what we're going to be basically be saying is firstly ellie no we will not be using it but don't spam please um yes difference between redux and daily so they are both essentially global stores right but redux is the sort of commercial level solution to state management okay you need to know redux if you're going to be a react developer it's pretty much used in a lot of the companies you're going to find yourself working at so you do need to have this on your cv and it's gonna be a hugely valuable skill to have okay so definitely recommend you pick this skill up right so at this point we're gonna go ahead and click this and we want to dispatch it so that when we click this it goes ahead and fires off select channel because this does not have the prop add channel option okay so what i'm going to do now is and i just answered that question dude so oh my god solution size thank you sorry for your views i'm just 17 i earn more than my parents do i'm grateful to have you as my teacher that's incredible guys honestly i think we're going to break 600 likes in select channel right now what i'm going to do with the select channel is i'm going to go ahead and do i'm going to say okay if there is an id all right so if we get an id passed through as a prop and the only one with ids right now is the these ones because they're the ones we mapped through from the database these ones didn't have an id and then what we're going to say is if there's an id i want to dispatch an action into that global store so firstly we need like something that allows us to dispatch that action into the global store so we use we need to get the dispatch sort of i call it like a dispatch gun it allows us to shoot actions into the global store okay so i say const dispatch equals use dispatch which is a fantasy hook provided by the react uh redux devtools so let's go ahead and import that and you see use dispatch from react redox we pretty much do that now we've got this little gun that we can shoot actions into the store okay so um there we go so now we're going to do is go ahead and say if id i'll say dispatch right and remember we created an enter room function right so i'm going to type in enter room and i'm going to import it from our features right remember this was the action that we went ahead and done remember that took something called a payload okay that took a payload right uh ronit says i got an internship on react looking for you're helping up coin days dude join zero full stack hero the whole community will help you and me right so we're going to pass a payload here which is we put the parentheses we put an object and inside of here what i'm going to say is i'm going to pass in the room id and that's going to be the um let's think about that's going to be the id right of the the component so the id here now what's happening is when we click this button it will push that value of the room id or the channel id into the global store and basically think about what we're doing here that's going to be the channel that we're actively going to be inside of so if i click this one it clicks the id for that it pushes the id for this inside the global store if i click coding it pushes that into the global store right and this is empty right now so if i say hello you see it's a fresh chat if i do papa fam it'll go ahead switch out papa fem's empty as well hashtag papa let's do proper farm legends let's do youtube and you see it's just pushing different values for the rooms into the global store and then we use that value to go ahead and fetch the messages inside the room all right so at this point what we're going to do is we're going to go ahead and vikram wanted a quick look over at the sidebar container so i'm going to take a quick water break where you see that thank you shaker keep yourself hydrated they actually do need reminders when i'm live right so what i'm going to do now is i'm going to go ahead and say on the select channel so we actually went ahead and added this in right so what i'm going to show you is just to prove that this works you can download the redux dev tools and what's amazing about the redox devtools if i go ahead and open the inspector i pull down this redux tab so you need to install redux dev tools on google chrome um and then let's go ahead and click abc right and right now oh nothing's happening okay so let's see why let's go ahead and do it again that's because i didn't refresh but if i click here it dispatched an action now the action came from the app slice right we dispatched the enter room action and now if i click on diff it shows me how it modified the global store so you can see it went into the app store when you went into the room and room was initially know as the default value and it changed it to the room id now if i go ahead and see the action it was dispatched this was the action that was dispatched this was the payload of the action and now if we check the overall app store so imagine the global store this is how we look at it inside the state we can go ahead click inside and we can see inside our app now we have the room id it's currently selected this is how it works inside of redox okay if that if you can grasp that concept it honestly doesn't get harder than that when it comes to redux okay like honestly that's the main grasp of it everything else can kind of come from that okay so let's go ahead and continue on now what we're gonna do that we have the room id we're gonna go ahead and uh let's just firstly test if we can add a second channel let's say papa fab oops papa and there you go you see now if i go ahead and open this up i can go into redux and i can click on the different ones and you see every time i click and what's crazy guys is you can actually rewind so that i can jump back to these things i can rewind and i can actually like kind of like fast forward my application which is insane right and you can see like every time i click it it changes the room id so you see how it's working under the hood right now okay all right so this is actually pretty good so ankit says sonny can you please use uh style components instead of normal css and upcoming clones it gives so much value and learning stuff yes dude i would definitely make sure i incorporate them uh we're actually using it today right so okay so that's pretty cool now now we have the ability to select the channel so at this point we are done with the sidebar right and we're literally six likes away from five to five fifty so whoever is those six people you know what to do right smash that like button let's get that number up i swear to god i think we can honestly keep climbing there's nothing that's going to stop us today um and what song should we have right now let's go ahead and have something a little bit upbeat right so now what we're going to do is actually have the chat section right because we've already got the room id now so i guess we can start actually implementing the messages inside of the chat right now the chat where is the chat defined if we go into app.js you can see chat was over here inside of the home route okay so chat refers to this big section over here right so we're going to go ahead and build that out right now okay so the first thing i'm going to do is i'm going to go ahead and say um bowel sword i have connected it i've just done it in a new way right so i'm going to create a chat component and i'm going to go ahead and say in components i'm going to say chat.js i'm going to say rfce and then here inside of here what i'm going to do is chat container so i'm going to go ahead and say const chat container equals styled diff boom boom and there you go and i'm going to go ahead and pull in styled from start components i don't know why it's not popping up on my auto com uh sort of my import it was working before but that's fine i gotta do it manually that's fine save okay now what i'm gonna do is say this is a chat container oops chat container there we go all right perfect so we have the chat container up and running now i'm gonna go back into my app.js and then make sure i've imported this component in to our application so there we go chat gets popped in right there okay so at this point just double check that everything's working i'm gonna open up chat.js and i'm gonna go ahead and say h1 i um the chat screen save and we should see it's not there right now it is actually there but we just need to go ahead and get the color and things like that set up correctly so the first thing i want to do is actually open up the chat screen now it's actually up here at the top so i'm going to go ahead and show you how to fix that let's open the chat screen i'm going to go to my chat container and then the first thing i want to do is i'm going to type in i'm going to say flex 0.7 oops save i'm saying flex 0.7 because i want to take up 70 on the screen flex grow of 1 and overflow y scroll okay so i'm going to go ahead and do this right here save okay now at this point i'm going to save and if you can see if i go ahead and spam this i'll show you what's actually happening you see it's actually underneath the header at the point at this point in time okay so i'll show you how we're going to fix this in a bit all right let's go ahead and save all right so at this point the let's go ahead and firstly do inside the chat screen right so we have the first thing we're going to do is we have the chat itself so the first thing i need to actually do is pop a margin in there so i can see it so if i do h1 let's just say hello okay and what i need to do is i'm gonna see margin top i should do 10 let's just try and do 50 pixels we need to get that right so we can see it there we go so 50 is about right let's say 40 maybe nope it's a uh 60. there we go let me try that one for now okay so there we go we can see it okay so at this point what i'm going to do is i'm going to fetch the room information okay so we firstly need to go ahead and have the room details now what am i talking about the room details um i'll show you in just a sec so what i'm gonna firstly do is i'm gonna go ahead and say let's go ahead and create a header section at the top okay so at the top of this file we're gonna have a header okay we're gonna have a header and i'm gonna create this as a styled component so here i'm gonna say thank you so much jason show i appreciate it dude let's go ahead and hit 600 likes guys come on we can do this style.div right and then here what i'm going to do is go ahead and do the following so i'm going to say start div and then this is going to be we'll start that in just a sec inside of this header i'm going to have a header left and a header right and this will make a lot of sense just bear with me okay so we've got the header left and we've got a header right right so header oops don't wait okay and now what i'm going to do is go and create the styled component versions of these so i'm going to say const at the left equals style.div all right like so we have authentication we have everything inside this board coming very soon okay so i'm going to go ahead and copy this one and we'll say header right and then we go save right there we go looks good now what i'm going to do is we've got header left header right so the header left is going to have a h4 inside of it right so it's going to have a h4 so this is gonna be a h4 oops h4 kite keeps opening up so it's so annoying right h4 and then here i'm gonna say strong i'm gonna have a strong bit of text it's strong not string yeah and then in here what i'm gonna have is a hashtag and this will be the room name okay so i'm gonna go ahead and sort of fix this up with the room name in a second i'll show you how we do that in a sec and then the next thing i'm gonna do is actually have a little star icon okay so i'm gonna say boom star border outline okay let's go ahead and say star border outline paste what accent is this man this is a london accent and then there you go you see it says the room name okay so now i can get rid of the h1 hello and this top bit is going to be the room name okay so at this point we're going to go ahead and pop out the header right section and then we'll go ahead and do the fancy styling stuff to get this finished okay so inside of header right i simply want a p tag and i'm going to have an info outline icon and it's going to say details next to it so it shouldn't say p p there we go and it's going to say something details okay so it's going to have this and it's going to say details and info outlined icon i'll show you what that is in just a sec i'm going to go ahead and pull this into my code at the top there we go save and if we refresh there you go all right so that looks pretty good pretty clean right now now i'm going to go ahead and fix this up so it looks very nice because right now i don't like how it looks okay so here how do i get this looking the way i need it i'm going to say header equal style dot star div and say display flex firstly right this one gets me hyped up man let's go ahead and smash the like button and get 600 guys come on display flex justify content space between right and then i'm going to say padding of 20 pixels or border bottom boom i'm going to chuck that in here all right save and now you guys can see that immediately huge difference right huge huge difference right right so now what we're going to do these are actually not these are not in inline styles these are actually going to be uh yeah so at this point we're going to say header left um and the funny the funny thing i always find is that every like sometimes people actually demand things live i'm like dude i don't think you realize how much we're building in this live session right so here what i'm going to say is i'm going to target the h4 inside because we have the little h4 at the top and then what i'm going to do is say display flex right display flex and then here i'm going to say text transform lowercase right save and there you can see it drops to a lowercase and i'm going to then target the h4 and the icon inside so similar to the approach we've done before targeting the material ui i can margin left in a font size let's go ahead and do that right now there we go looks pretty good okay so the next thing we can do at this point is we're going to go ahead and i think we should also maybe say display flex on that let's go ahead and do this oops that's a horrible world let's go ahead and do that display effects and there you go you can see that let's play flex and what i actually want to do here is to say um let's go ahead and say the margin left is there but i'm going to align items align item center and oops no what is that doing nope they got line item center and there you go right so it looks very nice and we can actually sort of push that slightly more away with the 20 pixel push and there we go okay so that's not actually targeted that one correctly so we need to go ahead and say the h4 in this case actually has it inside of it so h4 h4 is gonna have margin right margin right of let's say 10 pixels very slightly push it away there we go and on the right hand side we're going to go ahead and fix that okay so on the right hand side i'm going to go ahead and do styled is something called felipe this is actually called styled components so style components are very popular and i'd recommend jumping in learning out how they you work and stuff like that very very useful stuff now here i'm going to target the the p element inside do display flex a line item centrally one size of 14 pixels i'm going to target the p tag and the material ui icon inside of it and i'm going to go ahead and say margin right 5 pixels and there we go and this is how it looks on slack right so it's very clean at this point in time looks very very nice at this point okay that looks pretty good i think that looks pretty good okay joshua says your css skills are awesome man thank you so much dude appreciate you all right so over at this point what we're gonna do is we're gonna have the chat over here okay so we've got the nice header section complete okay so we've got the header section complete the next thing i want to do is actually go ahead and add a sort of a sibling component to the header now in order to do that in react you're not allowed sort of two components next to each other so if i had something here for example it would complain and say no no no you're not allowed that so i'm gonna have a react fragment that wraps it and then what i'll do is now i'm allowed to have something next to the header all right so what i'm going to do here is actually have a um a another sort of a div called chat messages okay so in this case we're going to just create a uh let's go ahead and do this to say this is going to be chat messages like this okay and this one is going to be a style component div so it's going to be const equals styled div there we go and we can come to start that one afterwards all right so start div there we go and inside of here what we're going to be doing is we're going to be fetching all the messages and this is where we will sort of list out the messages right so i'll show you how we're going to do that in a sec but in order to do that first we actually need this little chat box where we can actually send in messages okay um deepak singh yes exactly it's about typing yes boom you see it drops it over there and that's the message right so little message as well okay so what i'm going to do is let's start the messages so go back to our chat we need to create a chat component here okay so there you go i'm going to make this a drop smaller okay so i'm going to make this like maybe a chess all right that's pretty good right so we have the chat there so underneath all of this okay so underneath the chat messages i'm actually going to have something called a chat input right we actually have 570 likes guys come on let's keep going i love it man honestly i can't i can't believe it thank you so much guys we're going to create a component called chat input okay now chat input is going to be our own little component we're going to create and this is going to be responsible for this magic okay and what this needs is going to have a few different things right so it's actually going to have a channel name that we're going to pass to it so we're going to pass a prop which is going to be the channel name and we'll sort of sort that one out in a sec so we need the channel name and i need the channel id right now we have the channel id this is just simply going to be the room id now how do i get the room id wait a sec we didn't have the room id did we oh we did because we pushed it inside the store now how do i grab it from the store we use the selector that i mentioned earlier so if i want the room id i say const room id and i say equals use selector this will allow me to pull a value from the redux store okay so i need to simply go ahead and import this from our react redux and then what i do is i get the select room id selector that i wrote earlier and what this does it allows me to pull the room id from the store all right this will mean i'm allowed to basically go ahead and when i select the room you can go ahead and do it boswell says you're doing great sony thank you so much dude thank you so much for everyone watching right now appreciate all of you honestly right so what we're going to do at this point is we have the chat input which we need to create so i'm going to go into my components create a component called chat input.js okay rfce wait for it to pop in boom and at this point i'm gonna go ahead and say const uh chat input container equals styled div right this is gonna be my style div and i need to import styled components but again it's being weird with the auto wing port so i'm going to go ahead and manually do it there we go and this one is going to be responsible for there we go all right so this is going to be my div that surrounds my chat input now for the chat input screen how do we go ahead and build this one out okay so for the chat input screen i'm going to have a few things inside of it it's going to have a form okay so it's going to have a form right right um is anyone else obsessed to learn everything from start or not the whole progression of arts concept karthik we actually cover everything inside um you can use react context api if you want but redux is going to be the professional one to use right so we're gonna have a form inside the form we're gonna have an input field okay now this input field it's just gonna be a normal input phone let's go ahead and say input there we go oh god damn it right input there we go and inputs are self from closing so we don't have that now the input is going to have a placeholder right the good thing about this placeholder is going to have backticks because we're going to have string interpolation so we're going to say message hashtag oops pound and then remember we passed in a prop okay so string interpolation here allows us to have a javascript variable inside of our string so remember the props come through here now we passed in a prop earlier we passed in the channel name okay so at this point i can get the channel name but we didn't actually pass in that value okay instead what we did we passed in the uh room id i think it was the channel id we passed in so channel id okay we passed that one in right so at this point this one let's just go ahead and say message room right so for the mean time until i figured that out okay marty says doing a great job this fire thank you so much dude for the input there we have it right now what i'm going to do is for the buttons i'm going to actually have a button and this button i'm going to go ahead and grab a material ui button yes i'm going to use a material ui button depositing yes right so here we've got the button and then i went the buttons have the text inside so i'm going to say send a message and this button is actually going to be hidden right so i'll show you what with the trick that we're going to do here so this button is actually hidden right and it's got type submit and there's a reason why we do this because if you have a button inside of a form and you have type submit when you type in your input field and you hit the enter key it will submit the button right which which allows us to have that sort of cool functionality without the visibility of a button now when we click this button we're going to have a function click off which is called send message okay uh karthik now i'm full time teaching so i i do zero to full stack hero by the way so zero to full stacker is the community that i built with the papa fam first link in the description two days left for the huge sale and then we pretty much close the doors i don't know why we're opening them up again okay so it's a huge sale right now and uh you guys can go ahead and enjoy that if you want okay so uh don't blame me if you said something i didn't know it ended because i'm telling you now it's ending right so when there's a send message when you have a button event it has something called an event here we say e dot prevent default because default when we have a form when we hit enter on it it will refresh the page we don't want that okay so this will prevent the refresh prevents the refresh from occurring oh yeah prevent refresh okay there we go uh right so naruto i will answer that when we get to it don't worry dude so okay at this point we've got the chat input okay so now what i'm going to do is it says chatting but it's not defined so let's go back to our chat and let's go ahead and import chatting book all right so now if we refresh okay so we've got the message room send okay got itchy yeah ouch all right headphones get uncomfortable sometimes there we go all right so we've got chat input so at this point you can see if i hit this and i hit enter it would actually trigger off the send button okay so uh so what i'm going to do is for the chat input let's go ahead and sort of style this one out right so inside of here what i'm going to do is i'm actually going to target the go into my chat input here and we've got the star div okay so first thing i want to do is i'm going to say border radius to 20 pixels okay so i want it to be a nice little border radius behind it let's go ahead and do this save oops border rate is 20 pixels and this will give it a slight rounded corner okay now i'm going to target the form and i'm going to give it a bunch of properties i'm going to say position relative display flex and justify content center the next thing i'm going to do is i'm going to target the input form inside of the form by doing this so we're going inside the form inside the input right and then what i'm going to do is i'm going to say position fixed bottom 30 pixels width of 60 border 1 pixel border radius 3 pixels having a 20 and an outline of none all of this will give us a nice look and feel to this okay boom save and if i go ahead and see that you see that guys look at that it drops to the bottom now this button is randomly over here right but this is actually going to be sort of you know relative to where the screen moves right because it's position fixed and it's bottom 30 pixels off the ground and the width is 60 pixels hence why it's 60 pixels this way now what i want to do is i want to hide that button so i'm going to target the form target the button and say display none and i'm going to make it important so that way it just hides right because this material ui button sometimes you have to override the styles save and boom it disappears right now we just get this nice functionality but if i type in and i hit enter it will trigger off my send message function right if i get rid of this line the prevent default one look what happens if i hit enter see how it refreshed we don't want a refresh right refreshing is not our friend so that's why we don't want it okay so guys let's keep the energy up right because if now we're about to hit 600 let's go all right i'm gonna go ahead and change this one the real says your tutorials are giving me the confidence to go out and apply for software development jobs do it dude you got this man and the papa fam's got your back this is why i say to everyone join honestly join join join this is the best community ever right so at this point we have this right now i'm gonna go ahead and upgrade this so we can fetch this information okay so how do i go ahead and do this now this is looking pretty good at this point now i'm gonna firstly add a message in and then we'll carry on okay so i'm gonna go into my chat input right now let's go ahead and implement the send message functionality okay so the first thing i want to do is i want to protect against any kind of bug right now i'm going to say if there is no channel id right then i just want to return i'm going to return first because i just want to exit this this function i don't want to do anything if there's no channel id present okay the next thing i'll do is i want to access my db okay now the first thing before i carry on actually is i've imported the db because i'm going to need it i need to get the piece of text from this input filled okay so how do i do that i'm going to show you a different way of doing it this time when i say const make sure you use refs i'm going gonna say input reference equals use ref so typically you've seen me do it in a way where we map it to a piece of state but this is another way of doing it okay so we can go ahead and import user f from a react and the way we do is we save and then here we go with another banger let's go guys that's what i'm talking about yeah and now what we do is we go ahead and map this to this we say reference to the input field is input ref and you see it's just a lot cleaner right it's a lot cleaner when we do it this way and now what i'm going to say is i'm going to go into the db dot collection okay and i'm going to go into the rooms okay and i'm going to get the channel by going into the document with the channel id so think about what we're doing here is we're literally going through all right well what happened there where did it go um [Music] where did it go come on let's wait until it loads up but basically we're going into the room itself the document and then we're going into the collection of messages okay so we're going into the collection of messages and all i'm going to do is i'm going to add a message in there because i'm literally writing in right and then to do that what we do is we simply go ahead and we say okay the message i want to add is message and the contents of that message is i want to grab it from the input field okay so how do i grab it from this input field we basically say okay get the input reference get the current thing it's pointing to right and i'm basically going to go ahead and say get the value of it pretty much that's it right that's how we do it we get the value of the input filled at that point okay next thing we did shri khan thank you so much dude shri khan's vengala for a lovely five dollar donation appreciate you dude thank you so much all right now at this point we've got the message now i need a timestamp just think about it this way if i send a message in london and you're based in new york or asia or wherever it is my timestamp is different to your timestamp so if we both use firebase's firestores timestamp then it's going to be the same so we can sort our messages accordingly so how do we do that right the first thing i need to go ahead and import firebase the actual firebase okay and then what i need to do is go ahead and say timestamp right timestamp and what i do is i say at this point firebase dot firestore guys almost at 600 likes let's go why am i firebased on fire so i just saw it and i was like oh my god that's creeping we go to the field value and then we say get the server timestamp and then that's a function basically that will give us the server timestamps now all of our timestamps are the same boom there we go 600 likes wow like just wow man a channel we're getting like the same number of likes as channels uh you know hundreds of thousands of subs like guys when we get to 100 000 subs oh ho the world better watch yourself proper fans coming it's going fast guys 20 likes just flew in like that god damn this is what i'm talking about guys let's go all right so the next thing i want to do is when i send a message in i want to clear the text okay so the final thing i want to do is go ahead and say input ref dot current dot value actually what we can do at this point is we can say okay so you can do it this way right you can do it this way or you can do it a way of uh i've forgotten how you actually clear it now deepak thank you so much man so we can do it this way this was a way of showing you i'm going to show you right now the previous way we're going to say equals value equals input and let's go and say input and this is how we initialize state which is basically how we write a variable inside of react by default the input is going to be blank and we say set input all right thank you so much dude for supporting and then here what we say is instead of this we go ahead and say input and what we do is whenever we type in the input field we say on change [Music] unchange equals and this will give us e and we say okay whenever the user types in i'm going to set the input to a e.target.value e.target value oops oh e dot target dot value like so save and what this will do is it means it means that we need to import this but that was just showing you an example of how you can use references as well i legally said you're doing a great service i've been a react developer for three years but i've learned a lot from you appreciate it dude thank you so much man uh mwah says you are the goat let's go man let's go dude now what we're gonna do is here we have the um input okay we've got the value input here nice and then what we're gonna do is we're gonna get the user's information now we don't have the user's information at this point oh so right now i'm gonna hard code it as sunny sanger and then i need to use this image oh that's even harder right how do i do that i'm gonna go ahead and grab a picture of me for now [Music] all right so i'm gonna grab a quick picture of me and let's see if nothing dodgy comes up so i'm gonna grab my picture here [Music] let me grab a quick picture let's say this linkedin one copy image address make sure it's png that's not even a png i hate when you get a fake png don't you like you know you guys know what i'm talking about when you get fake pngs there we go i've got a jpeg there we go right so i've got a jpeg here it doesn't matter you can use any picture at this point okay so i've just popped in a picture here let me go ahead and come so now we've got the user image okay so what i'm going to do is i'm going to eventually have it so when we log in it will pull in that information right um okay so you can do ref or you can do the other way guys it's completely fine right um there we go so and there are reasons for each and all right but we're not going to get into that right now okay so now at this point what i'm going to do is have it so that when i refresh right let's go ahead and refresh and let's see now what this will do is if we want to do is we're going to say after we send that message we're going to set the input to empty okay done so the input empty so now if i go ahead and try this out save and refresh okay let's get our firebase up running okay so we're in let's say we go into the papa fan room and i'm inside the pop family and say abc enter right oh did something happen did it break what happened oh my god okay let's have a look so we're inside here and nothing actually kicked off okay so nothing kicked off let's go ahead and see why okay so i went into message input there we go unchanged value is input set input.target.value message timestamp sunny user image there we go and refresh okay let's go ahead and refresh and let's say let me just double check my terminal okay we're good and here i'm going to say abc okay so right now something's actually freaking out at this point there we go cannot be called with an empty path okay because the channel id there we go makes a lot of sense so we need the channel id okay that needs to be passed in so remember chat okay we got the room id over here use selector select room id so at this point what i can do is i can actually just double check that it gets passed through so i can say console.log the channel id right and then i'm going to go ahead and refresh and i'm going to go and do f12 and then you can see the channel id is no right now okay interesting if i click this one now i've got a channel id okay so with the channel id set what i'm going to do is i'm going to type into say test okay and i hit enter right so i hit enter and nothing actually happened okay which is very very strange so let's go ahead and see why because the channel id got passed in here perfect okay let's go over here and what we've done over here actually is we've said channel id is room id perfect okay and let's refresh all right okay interesting let's have a look why this is happening document.collectionrooms.channel id rooms doc collection messages add okay here we go channel id and we do have the channel id correct at this point we're going into the room and we should be adding into that message is the input timestamp is this timestamp the user is only sanger and the user image is this okay and what you need to do sometimes is just cut the this is a yarn start again okay let's do this again i do see the chat guys but i'm gonna block you if you keep asking me to speak indie i'm not uh a pet okay let's carry on all right all right so let's go ahead and wait for that to restart so now what i'm gonna do you can change the title in the index.html if you do want to yes you can do that so now at this point if i go ahead and say testing although we need to make sure we click a pop-up fam so this goes and we click paper fam i type in testing enter okay so this is interesting at this point right so if there's no channel id it's returning first so let's go ahead and double check at this point when we hit send message if there is a channel id right so let's go ahead here and then let's go ahead and say abc enter oh there we go that's what i was looking for and i'll be called with an empty path okay so that's because i actually went ahead and didn't click the correct channel so papa farm there we go and if i type in test and i hit enter okay so you see guys it did reach there but i wonder at this point if it's actually oh if it's not damn it guys if it's not channel id there we go ah i missed it good spot guys good start there we go that's how you know i need a water break smash the thumbs up button for everyone who got that right well done guys okay now that's exactly what the problem was right so we're going to click on paper fam type in testing boom and you see it disappeared perfect okay so now at this point we're going to go ahead and check if you entered in as you can see we should have in here let's go ahead and see let's refresh oh there we go it came through ah it was a bit of a second but let's go ahead and carry on that was water dylan yes that was water everyone thinks it's vodka but let's go ahead in the top one we say on messages all right so now you can see the message has been successfully entered into the room okay so that's exactly what i was looking for so now we have the collection here message timestamp user and user image okay so perfect we have a message there and the channel name we need to go ahead and pass in so how do we get the channel name and all that good stuff set up okay so inside of chat right now let's go ahead and fetch the information that we need okay so first thing i want to do is get the room details and then i want to get the room uh the room messages so we can do this actually really nicely all right so using the new used collection i'll show you guys how easy it is to do this all right so here import use collection from react fibers there we go we say cons first thing i want to get the room details room details okay so i get the room details and here i'm going to say use collection and then what i'm going to do here is i'm going to say okay oops if there is a room id present right then i'm going to query the firebase database i'm going to say db a to import db and say db.collection uh yes deepak using pusher right so db.collection i'm going to say go into rooms and get the document with the room id okay so this will be the room details right this will go ahead and get us that information okay so that's how we do that in this case and then for the room messages i'm gonna do is a similar thing um i think it's might actually use collection might be um we can check that in a sec actually but yeah we're gonna do this one and then what i'm gonna do is i think is use document instead use a document here we go use document yeah and this one will be doc room id perfect and then what i'm going to say is const i'm going to get the room messages as well and this equals use collection you see how easy this is guys like this is crazy man like it's so much easier doing than the traditional way that you're doing it right you say okay only if there's a room id then anchor should i give you a super chat oh dude all right it's up to you man say db.collection and then i'll say rooms dot doc and we'll say room id dot collection of messages i'm going to go into the messages oops messages and then what i'm going to do is i'm going to go ahead and say order by okay remember the time stamp that we passed in we'll say order by the timestamp ascending okay so order by timestamp ascending okay and then there you go so it's going to order by the timestamp so now you can see this will go ahead and give me the room messages plural and this will give me the room details okay so how do i check this this actually is doing what it says it's doing if i go ahead and pop open this and i go ahead and say console.log let's just check the room details first room details let's go ahead and do room messages save and let's go ahead and see now you can see look chat 25 26 25 is giving us the data back this is actually correct if i say data and now you can see that it gets us back the room details so in this case if i click on the room i have to make sure i'm inside of a room so in this case if i go into papa fam and you can see that it gets me the papa fam room we're going to abc it gets me abc the room okay and same with the room messages but this will be a collection of documents so you can see it works okay it comes through now how do we pass this over into our chat input it's pretty simple actually the way we do it is we pretty much go down to our chat input and then here where we have channel name we pass in room details and it can be maybe under files we need to do that and then we say pass in the name and now we pass through the room name inside of chat input i can actually get the channel name and here i can actually say message channel name so now what you should be able to see is that by default it says message undefined because we're not inside of a room and we can fix that afterwards but if i click paper fam it will go ahead and it will actually pass that through as the value now have we correctly passed it through as a question channel name there we go lowercase c boom saved right and then let's carry on the guys we are literally come on let's keep going we're almost at 650 likes that's incredible honest i'm i'm a bit mind blown today like we had a tech issue we lost we had to start from zero 650 people came in and like that's just mad right let's go ahead and then click on this and there you go look it says message papa fam on the bottom left message there you go you see that if i click it it changes over here message abc message papa fam and i want the same thing to happen over on the room name okay so for the chat uh there we go game zone thank you so much abdisrockshake oh appreciate you dude he goes the value you bring never stops to amaze me just finish the netflix and i see another build on the way damn keep up the good work thank you dude i really appreciate the kind words honestly that sort of stuff keeps me going so i really do appreciate it thank you man here we have the room name i'm going to go ahead and do the same thing i'm going to go ahead and pop in the jsx and here i'll say room details.data.name okay so data don't name let's go ahead and hit save and let's do refresh i remember by default it's going to be undefined so it won't show any value okay so we can go ahead and change that afterwards and then what i'll do is uh let's go back to paper fam and you can see now we're inside the popup fan room now we're inside the abc room you see it look works very very nice okay it works very very slick right now at this point what i'm going to do is i'm going to go ahead and have it so that we have um let's just double check something i'm gonna go ahead and add so the messages list up okay so we already have the messages over here and what i want to do is actually want to render through those messages and actually sort of do some magic with that so how do we do that we go over here to chat messages i go ahead open up my jsx and i say okay let's go into the room messages and it could be on can it could be undefined at some point because it's a async it needs to fetch it and we're gonna say for every single document inside those messages i'm going to have a pair of code that runs okay and i'm going to basically destructure that that message and that has a message inside of it as a timestamp remember when we push the message in as a user and a user image right and then this has doc.data so we basically are pulling it apart from the message document okay then what we're going to do is i'm going to actually return the following so i'm going to say return and i'm going to basically create a message component which is going to be self enclosing and it's going to take the following prop so it will have a key because we're mapping through a bunch of stuff but what it's actually going to do is this message component will take the following information so it's obviously going to freak out at this point because it doesn't know what this message component is okay so we need to go ahead and create it so i'm going to grab message go over here go to components create message.js save do my little rfc trick wait for it boom pop it in and then what we're going to do is we're going to say const message container right so message container equals star div all right start div boom boom and i'm going to go ahead and pop this in now the message container let's go over to message i like this song right so i'm gonna go ahead and pull in styled import start from style components there we go and guys we are literally near four likes away from 650 let's go come on we almost there so message container now i'm gonna go ahead and pop this in there and then inside the message container we're going to have a few things right so we've already got a few things being passed in so firstly i'm going to go ahead and import this inside the chat boom save and there you go okay so now inside a public fan we should have a message here right but it's not actually being rendered because we have nothing being rendered here so firstly this takes a few props like we just passed in so i'm going to destructure the props and inside we have the message the time stamp and a few extra things okay so we have message timestamp user and user image okay message timestamp user and user image three likes away let's go guys wow this is so sick man i can't believe that we're actually going so fast uh this one's not doing it for me let's go ahead and change it uh you know what let's try out the trending songs on epidemic sounds right so let's see if that works actually no i'm not going to risk anything let's go ahead and do my songs all right let's go ahead and do jump to the bottom let's go ahead and do something like oh this one okay all right so let's go ahead and say 650 oh nice there we go 56 50 likes let's carry on guys wow thank you all that's so cool man all right so for the message i'm going to have a few things we have the image the image source is going to be the user image prop okay so the user image prop and let's go ahead and save it and then you can see that it pops through now so if i add another message and say test and make sure i'm in the correct chat yes because every test remember it's passing through as me right now there we go okay uh there you go nice guys 700 come on let's hit i like target of 700 i think we can do that man i think we can do that all right so let's go ahead and say uh let's have a message info right so message info container which i'm going to create so this is going to be message info which is going to be a similar sort of div the styled component dip message info and then i'm going to go ahead and say okay message info and then thank you anchor appreciated so here we're going to say h4 and inside of that we're going to say user and then i'm gonna basically have some little kind of you know i'm gonna add a jsx parentheses block and then we're gonna say span okay now i'm gonna span a few things right please don't spam the chat dude uh otherwise i'm gonna kick you out all right so here i'm gonna span and i'm going to put in the following okay aisha what's up nice i don't see any chat conversation in twitch it's not but in uh in youtube it's going off pretty good um so now we get the timestamp right now how do we change the timestamp that we get from firebase into a readable string and this is the line of code to do it okay so you guys can maybe break this one down in your own time but i'll explain quickly it basically creates a new date object from the timestamp we need to convert it with this two-day object which allows us to convert and then here what i need to go ahead and do is say two utc string so if i save it now we should be able to see like sunny sanger on this time spent sent that message okay so it looks really good and the next thing i wanna do is underneath this i'm gonna have a p tag and the p tag is just going to have the message itself okay so it's going to have the message itself see like testing testing if i say abc abc abc enter the message down here says abc abc abc okay so it's very hard to see that but you guys can see that's at the bottom i promise it's there all right so the first thing i want to do is start making this look like it's the way that it should look okay guys we're almost at 70. honestly really almost at 70. right um so what we're gonna do now is go into our message container right so here and i'm going to say display flex right and then i'm going to basically go ahead and say align item center align item center and then we'll say padding of 20 pixels 20 pixels okay and then here i'm gonna say go and target the image and make the height of okay 50 pixels all right and then we'll say border radius all right let's just say order radius of eight pixels there we go okay look at that pretty cool right it's pretty cool all right so now what we're gonna do is we're going to go ahead and you see that's actually starting to look similar to the sort of go that we're trying to get to okay so we have the image set so the next thing i want to do is target the message info so i'm going to go to the message info and say padding left i don't want to touch that next button padding left of 10 pixels you can use padding or margin there's up to you i'm going to target the h4 and inside the span tag i'm going to target something we'll say inside the span tag i'm going to do a color of gray font weight of 300 margin left 4 pixels font size 10 and this is going to make the timestamp a lot smaller there you go and it starts to look a lot more like we wanted it to look at that amazing stuff so this is so dope okay that's pretty cool right really really cool uh andrew please don't spam dude um so at this point this is really really good now if i click on abc and i say hello can you see what just happened there look it actually just changed based on what i've got entered in here it'll load up the messages inside that room and it just works just works so clean that's amazing all right it works really really good really clean okay now how do i get this though right so if i go into a new channel right if i go into a new channel how does it automatically scroll to the bottom and if i want to add a new message so let's say testing how do i get that look at that abc wow how do we do that trick all right so we want to get that trick happening firstly you need to smash the thumbs up button joking i just had to do like a you know what's his name uh graham stefan sort of kind of vibe the uh let's carry on right look at the numbers going up man this is crazy okay all right so now what we're to do yes this will be everything that's kind of you're seeing now is going to be on the channel after so it goes straight up on the channel after so you can re-watch it so at this point what i'm going to do is we have the messages here okay so in order to get that sort of auto scroll functionality what you need to do is a very neat little trick okay so we render the messages over here okay so just underneath the end of those messages i'm going to create an uh a sort of a div called chat bottom okay so i'm going to create a div called chat bottom and this is literally just going to be a div an empty div okay so you don't even need to maybe have uh i'm going to give a little bit of padding to the bottom though actually so i'm going to do is i'm going to create a start component at the bottom so and it's going to have a padding bottom of 200 pixels and there is a reason why we do that yeah so so wait for this to load boom and there we go okay so now what i'm going to do is i'm going to go ahead and say chat bottom now what i need to do is i need to give this a reference and i will show you why because we're going to do some pretty damn cool little trick right now okay so here we've got he's saying are you just front and rear reactor does have no back and i haven't used firebase before so right now this is actually more of a front-end build the firebase powers everything on the back handles it all for us but i do do full stack development yes so what i'm going to do is chat ref i'm going to go to the top and create a piece of reference so i'm going to go ahead and get rid of these console logs at the top i'm going to say cons chat ref equals user f and i'm going to go and say initialize it with a value of no to begin with okay now use ref we need to go ahead and import that so i'm going to go ahead and boom we import it from react like so now to connect to my use ref to this i just go ahead and say ref equals use rest and now i have a big pointing at that at the bottom of the chat because think about it it maps out the messages then we have an empty div at the bottom and the reason why there's a reason why we use this empty div so whenever this page loads i'm going to go ahead and spam this chat right now because i'm going to say hey something like this right there we go i'm going to refresh and let's see that we should have all of this stuff popping uh wait for it to load wait for it to load wait for it to load it's going to pop a fan it's just a bit slow right now but it will work okay there we go nice so you see that that's just because my internet all right but can you see right now how firstly we added the padding 200 so that way we can see the bottom and the second thing that i wanted to do guys is i want it to so that when we go on to like let's say we're on abc and loads of messages if i go into papa fam i want it to scroll to the bottom by default okay so whoa savann thank you dude he goes really appreciate your valuable content which is priceless help me out to get my first freelancing gig last year and you just dropped a massive 27.99 euros that's like a dinner tonight i'm gonna call that one so let's go get some sushi thank you so much gwen uh really really appreciate you do seven sorry sven thank you thank you so much dude appreciate that man so the way i'm gonna do this little trick is i'm gonna have a use effect and the use effect allows us to run a bit of code when the component mounts okay so use effects are written like such okay so i actually cover this in my entire full stack hero if anyone's watching an interest in joining the papa fam two-day cell empty it finishes in two days guys first link in the description check it out ff says sunny i've landed a job in london at stuart because of you dude let's go for a beer man when london lockdown's over let me know hit me up all right so the use effect here right we've already imported over here so i only want to sort of do it when um when the component mount as well as when the room id changes okay so when the room id changes and what's really cool about these used collections is they give you the loading state and an error state i don't need the error state but the loading state can be handy here right so what i can actually say here is that if the room is loading this is firestore right if the room is loading so if the room is still loading with the loading stage changes or re-fire this code and what i want to do is i want to go to that chat reference and i'm going to say okay get the chat reference go to the current thing you're pointing at and scroll it into the view so save and what happens is as soon as it loads it's going to basically scroll me down so this one it doesn't need to scroll down but if i go to the papa fam watch how it scrolls me to the bottom boom scrolled me to the bottom amazing works look really really nice right it works right so at this point then what you can do is you can customize this with some really nice little uh sort of additional extras okay so what i can do is i can i can actually add in this behavior smooth right so if i go ahead and do this behavior smooth now now look at this guys if i go to abc and i go to the papa fam it opens up and it scrolls me to the bottom now that's slick smash that thumbs up button that is damn slick all right this is pretty cool right that's pretty damn fun all right now guys if you're new to the channel you know what to do subscribe it's going to be big we're going to keep dropping these words but we're almost at 700 almost at 700 views right so let's carry on guys 700 likes sorry okay so what i'm going to do now is every time i push a message like look hello see that oh it didn't actually throw me to the bottom so i want to go ahead and fix that so what i'm going to do is that chat reference i had earlier i'm actually going to go ahead and pass that to my chat input right as a prop so i'm going to say chat reference i'm going to pass this as a prop to my uh to the chat input right so chat ref equals chat ref okay so yes it would but this is sort of those are additional features you can go ahead and add on and things like that you can obviously sort of you should add lazy loading and things like that and but this is sort of you know this is enough for for uh one single bird okay um so at this point chat ref okay we've done that so we passed it through and then i'm going to go ahead and grab it here but good good couch use my sql now i'm not using my sql uh okay so at this point we've got the chat reference here now what's cool right is that when i go ahead and do chat input because i passed it over here once i send that message in all i need to do now is basically go ahead and add do the following i just say chat reference dot current scroll into view same thing but when i send a message inside of chat input so now let's go ahead and check this out so let's go ahead and wait until this loads up click papa fam and you can see it should load up scroll to the bottom and if i'm at the bottom over here and i say yolo enter boom guys look at that that's that's pretty damn cool right it's the zero to hero course live or video um so we have weekly live coaching course dude so if you're platinum you'll get a weekly coaching call every single week if you're diamond you'll get a coaching call every week and then every fortnight an additional coaching call which is pretty damn intense so uh i'd recommend that but platinum is the pack i recommend first link in the description check it out we also have the recorded content for the modules so those are going to be pre-roll coaching cool guys um that i go ahead and do i record it and it gets uploaded to the course so you get honestly you get more and more content as it goes and we also have a student area where people publish games and all sorts of stuff so so sick honestly let's hit 700 likes guys if you're enjoying this right now smash that thumbs up button uh it's crazy that we have 134 people watching but we have literally nearly 700 likes that's insane really really appreciate you guys okay so now what i'm gonna do is i'm gonna go ahead and this is actually working pretty good at this point okay so now we're gonna go ahead and do the authentication portion of this build i think okay so if i go ahead and refresh at this point you see like it says message undefined and this sort of stuff now what i can do here is i can protect this screen from showing this stuff if we do not have this information okay and that's a good idea i think to do right so i'm only going to show any of this stuff if we've selected a room right so what i'm going to say is we'll say okay only if we have the room details only if we have the room details and if we have the room messages should we then go ahead and load up this all right this is a better practice to have and this will basically go ahead and protect so you see that right so now we don't get anything in this we click a channel and then it go ahead and uh goes ahead and loads it that's a lot cleaner okay that that really looks a lot more cleaner when we do that okay so um let's carry on so the farm there you go um nice this looks really good oh nice kush says i use your slap videos reference to build my real estate website that's oh that's actually really cool dude i'd love to hear more about that i'm getting into real estate myself now okay let's carry on guys so at this point we're going to go ahead and implement the login authentication and then we're going to refactor so that these are actually pulling in your names and we're going to go ahead and deploy this bad boy and you guys are going to be able to jump on this app and try it for yourself so it's gonna be so sick right let's do this i know the music is sick i swear it's like becoming like a coding dj i swear my i don't care my music playlist for coding is the best it's like the go of all of all playlists for going i don't care i'll say that it's clean man all right so at this point i'm gonna go ahead and let's imagine how do we set up a login system okay so if we go into app.js this is where the magical begins okay so app.js is where everything sort of starts off from so so now what we're going to do is go inside of app.js now this is really cool okay so before we had to use use something called on auth status right and things like that um that was why yes so what i'm going to do is but now we have the handy react hooks okay so i can go ahead import use auth state which is a really cool hook and this one is so damn good because what we can do is we can say const user look at this if i go ahead and drop this line of code in this gives me the user it gives me a loading status and you get the and all you need to do is pass it the authentication and the authentication we prepped earlier inside of our local firebase file so if i hit save on this now we should have the user inside of our app.js now what's really cool about this guys is that what we can do is we can say okay inside the router right inside the router over here if we have so if inside the router here if we do not have a user then show a login screen okay then show a login screen else and this is kind of a protected route now because else it will render the app okay so it will show the login screen if you if there's no user present it says login is not defined makes sense so we need to go ahead and create the login so here what i'm going to do is i'm going to go ahead and create a login component login.js boom pop that in rfce and guys almost at 700 likes this is insane let's keep going and here i'm going to say const login container equals style.diff boom boom like so i'm going to go back to my app.js over here my login do my import there we go vlog we just imported it and then what i do open up login.js and then in here i need my styled components so i'm going to pour them in and i'm going to have my login container over right here perfect and there you go we have a login right and it's not working yet we're almost there though all right so login container right inside the login container i'm actually going to have an inner login container right so i'm going to log in in a container and i'll make sure i'll show you why we do this it's going to help us out in just a sec okay so at this point what i'm going to do is and guys we are three likes away from 700 let's go wow aisha's ice is there hey what's up aisha [Music] all right let's go guys all right so now log in in a container what we're going to do here and the reason why we see a white screen is because we do not have a user that is inside okay so what i'm going to do is i'm going to have the image and this is an image of slack i'm going to pop an image of slack in there and we should see uh logging in the container is not defined so boom there we go 700 likes 700 likes and we have a hundred and so a hundred and forty people watching across platforms that is insane thank you guys thank you so much wow darwin rather a small really smart thank you so much dude honestly thank you so much for for donating i really really appreciate anything that's really honestly kind of you look at that guys the slack logo that's huge i don't like that the slack logo okay so um let's carry on so what i'm gonna do with the login in the container i'm going to target that image and i'm going to make it smaller immediately so that way we can start seeing things right so here i'm going to say okay target the image i'll get the image and then i'm going to say okay object fit contain to keep the aspect ratio object fit contain and then i'm going to go ahead and say height of 100 pixels right over 100 pixels i don't even care this slack this slack build is damn dope margin bottom of 40 pixels and then save and boom look at that looks fresh right now for the logging container over here what i'm going to do is i'm going to say okay let's give it a background color a height of 100 view height display grid and place item center this gives it a very nice extra sort of it will send to the element like so that looks pretty clean looks good all right looks good now for the inner container what i'm going to do is i'm going to go ahead give it padding of 10 100 pixels a text align center background color is going to be white and i'm going to give a border radius of 10 pixels and i'm going to show you a little cool trick okay so at this point you guys can see it's got a nice little border radius and it looks okay right but i'm going to show you how crazy small tweaks are in css i swear to god can we hit 750. 800. i swear we're going to keep on growing i don't know where these likes are coming from thank you keep on just smash the thumbs up button if you're enjoying this but guys fabian van dyke yes you won in the challenge as well do you appreciate you so guys check out this little trick right very small differences right so this is a very subtle box shadow you can just copy but look how amazing the effect it has right so a box shadow is about to be dropped look at that i swear to god like look a tiny little difference and all of a sudden the whole ui is clean now all right so this is really cool uh redirects can protect you but this actually sort of protects you at a much stronger level because it just it doesn't even load the component in the first place a redirect there is a moment where it kind of catches you then redirects you okay so i wouldn't i would say do it this way to be sure now what we're going to do we're going to reach a yeah i don't know how to pronounce that one but a good gazillion likes um so now what we're going to do is inside of here we've got the image and i'm going to go ahead and say let's have a div of login text we're going to have some login text here okay so i guess what we can do is remember we have a h1 okay and then we're going gonna say sign in sign in to the papa fam okay and then underneath i'm gonna have a p tag and this p tag is gonna have a p not please i'm gonna say papa.slack.com something like that now guys just to shout out we do have a slack community it's pretty damn cool we have over 220 or 30 members now inside of the papa fam sac community to join first link in the description go ahead check it out we're running a huge sale right now papa fam has each other's back it's just the best community you guys seeing the energy right now it's so cool honestly i say let's go ahead and hit save and you can see sign into the popper fan there we go and then what i'm going to do is i'm going to have a material ui button okay now the material i button is going to say sign in with google okay sign in with google like so and then i'm going to hit save and now what i'm going to do is say type submit type submit like so and then what i'm going to say is on click i unclick and i'm going to basically trigger off a sign in function okay now i need to create this sign in function so firstly i need to import the button from material ui core so i'm going to go ahead and do this and then i'm going to go ahead and say this uh where is it material material material ui uh there we go save and then the sign in function i'm gonna go ahead and say consignment const i'm gonna say const sign n equals e boom boom and say e dot prevent default like so okay like this and then what i'm gonna do is i'm gonna say okay now this is where the fun part comes in okay so look it's got a sign in with google bond but that looks a bit trash at the moment okay so this button looks ugly right and i'll admit it does not look nice okay so what first i'm going to do is i'm going to go in here i'm going to target the button all right i'm going to say okay the button should have a margin top 50 pixels and i'm going to do a few things i'm going to make the text i'm going to change the transformer text change the background color to a green because by default everything is uppercase so it's going to be it's going to be a lot better right jay says suddenly the true beast jay we're nearly like 750 likes dude and the whole thing i crashed oh my god we're just killing it today all right let's carry on guys um all right so at this point um what we're gonna do is oh okay so if there's no form yes you're right you don't need the button type submit i did have a form there before for something else that's why i had that so good catch uh samuel that's what i look for man that's what i look for right so uh naruto thank you so much for tuning in i'll see you soon dude so here we have the sign in now how do we get a google i've already done a hulu club before i'm going to drop down the channel though so how do we get the google sign in okay so google signs a lot easier than you think smash the thumbs up button if you want to find out all right so we're going to go ahead and do it right now i'm sweaty guys going to be like how many of you think i can implement the entire google login in like one line of code right one line of code right one line of code right are you ready for this one line of code is gonna do the whole google login are you ready for this this is where it's just like unbelievable power right so here i'm going to say auth i'm going to pull in my auth from my local firebase i'm going to say sign in with pop-up boom okay then i'm going to go ahead and pass in the pop-up now the pop-up is the provider that we set up earlier okay so there's a provider remember we actually pulled that in from our local firebase file so i'm gonna go ahead and pull that in and then i'm gonna say okay that's all good and then i don't need to do anything after i've signed in i'm just gonna make sure that i catch any errors okay so if there is an error i'm going to alert the user of the error i'll say error.message right okay very cool all right let's just let's go ahead and see if this all works right i mean like that seems a bit too easy to be to be true right so i'm gonna go ahead and hit sign in with google okay pretty cool remember you needed you need to enable that on the the firebase platform i'm gonna go to the proper react team account and boom that was it that was it we are literally logged in right now which is in crazy crazy stuff right and what's so cool about this is that if i go to app.js literally guys this is doing all the hard work for us right now this right here is doing everything for us um i'm actually gonna go ahead and let's see let's let's start some new suggested tracks oh my god okay let's do this all right can we hit 750 likes god this is the papa fam anthem i didn't even realize i was about to play that that's yeah right so i'm going to go ahead now and get the user's information i'll show you how easy it is without having to use a lot of readout stuff okay so are you guys ready all right now what we're going to do is we're going to go into the header and start implementing or using the user's information where it's needed all right this song gets me so hyped up this is when we first dropped announced the papa fam this is where that vibe comes this is what it's all about right this is what i try and communicate in these videos that's what we do guys alright so now we're going to do is go over to header and then we're going to jump into alex says what is this playlist where's the song this is like the papa fam anthem dude this is called don't want to sleep by swift7 and we don't want to sleep here dude we do not want to sleep so header avatar right so i'm going to go into my header and i'm going to go ahead and say okay i'm going to basically go ahead and say [Music] yeah i'm going to say okay the source is going to be oops the source is going to be the user and it could be undefined we're gonna say the photo url okay photo url like so and then what i'm gonna do is i'm gonna actually gonna have the alternative as well it's gonna be the users displaying it now how do i get these values okay so remember we can actually just pull this in using that neat little used auto state hook from firebase now that's as simple as it is honestly that gives us the user and it just works papa found the movie i like that i like that dude hold on the movie can you imagine that holy crap i'd watch that i'd literally watch it and i'll be the one that someone would be acting right i'm gonna import there we go safe mama says loving this ah there she is all right so now you can see we sign in now there's an issue with that right because the sources use a photo url and it didn't work right so at this point what i want to do is firstly i want to go ahead and make sure that this is all done correct so let's save let's refresh and the header right interesting so the source isn't actually being passed in as we wanted it to and this is because we have header avatar this is using the correct avatar one so boom hover pointer start avatar avatar is over here material ui call done cool okay so i'm going to go ahead and make this easier to read so we can see it and then what i'm going to do is i'm actually going to make the avatar have one click will actually go ahead and do an anonymous function inline it'll use the authentication and just basically calls a sign out function which actually signs us out of the app so with that alone we should actually have everything we need okay so oh man this is another one that we had this is literally all the songs that we had when we first dropped it honestly hitachi just imagine christopher nolan directing a movie and proper react oh my god that's so funny you said that that's amazing dude all right so i'm going to click this and it should log us out there we go okay so it did log us out right so we need to figure out why i'm not getting that picture come through right that's the main issue that we have right now so if i do proper react or team let's go ahead and see it should log me in and we should see it come through okay so now what i can do is to quickly debug this it's fine we can go ahead and say console.log and just say user is user and then let's go ahead and see what's happening in the in the terminal user is here we go and here we've got a bunch of stuff photo url ah that's why okay so it's user.photo url so for the photo url is capital right popper is emotional now it's crazy right [Music] so that's why and there you go look there it is perfect all right that's amazing now at this point we've got proper fan we can click here and what i want to do is i want to send that message as sunny but not through like a hard-coded value okay so what i want to do is i'm going to go to my chat input and remember where we sent that message earlier we sent it with hard coded values here okay so now we don't want to do hard code because why do we need to do hard coded because we actually have the actual thing working okay so this is clean i'm not even doing this really clean code right now okay so what i'm gonna do now is we've got the user being passed no we haven't we've got the uh i need to pull the user in at the top so i'm gonna go ahead and pop the user in like so and i'm gonna go ahead and pull the hook in and the hook does it very efficiently so it's gonna make sure it uses it once and it just reuses it car says go thank you so much dude let's hit let's hit likes man let's go ahead come on i think we can hit 750 dude i seriously think we can do it okay so at this point what we're gonna do is we're gonna go ahead and do auth is not defined we need to import off there we go save refresh like that okay and then the user's name okay so for the user's name i'm gonna go ahead and say user.displayname for the user's image i'm actually going to go ahead and say rather than that one was a user.photo url and the best part about this is we're just getting this information straight from firebase so boom if i go ahead and say proper farm and i go and say yo what's up boom look at that guys if i say abc it even scrolled me down that's clean i don't even care what anyone says that is so clean that is like that he's like i'm proud of that dude that's actually a really really good build like that's the kind of like uh the sort of you know you want that to be you want your code to be that level of like spotless right so that's like i swear i was proud of that that's probably that one guys 11 likes away from 750. okay so at this point we have our app working in the way we expected it to okay everything works in a nice way here we can add channels let's go and say uh let's just say like uh it's a youtube channel okay let's click on youtube and then let's go ahead and say yo what's up youtube and you can even put emojis in says drop a fire emoji oh oops my up in the file oh okay i guess my rocket crashed yo what's up youtube there we go and it works right so that looks pretty good all right so i'm gonna go ahead deploy this in a sec and then we're actually gonna go ahead and do this right does firebase hook some reactions do the same because i heard it actually allows you to go ahead and it uses a use effect under the hood i actually teach inside of zero to full stack hero how to create your own hooks really really fun exercise as well that we do inside the course remember guys two days two days left inside of our sale and then we close the doors to the community and i don't know when we're opening up again but all i know is that the energy is untouchable like is the best like that's it period right so at this point pretty good i think everything here is actually perfect in the sense of besides that i almost missed that the sidebar okay so the sidebar at this point the sidebar at this point has got a hard-coded name we don't want a hardcoded name we want the actual name of the user so what i do is i just pretty much go ahead and grab the user and again if we're not using this oh and i actually have another feature on to do the loading state so if i forget remind me okay carl says really like that scroll to bottom yeah really really cool addition now here what i do is i go ahead grab the user like so save not defined yep i always missed that one wait for it and let's go ahead and import this and guys by the way if you do want access to this code and you feel lazy then the second link in the description is the link to the papa github repo where all of this is available now i want to address something now did you notice how what happened just there i had refreshed the page i was logged in already so if i go ahead and refresh here i'm already actually logged in but what's up andy b you guys can't wait to watch this back later yeah oh yeah dude this really really fun build actually so you see when we refresh right there's a loading there's a point where it's loading and it's not actually sort of it hasn't got the user yet all right i want to have it so it looks a bit like this so look imagine if it could look something like this that's pretty clean right that's actually pretty clean and i want to get that working so how do we get this in play right because that's clean as well right so what i'm gonna do juwan says hi sonny thanks for the amazing one i'm really learning for the first time after years thank you so much dude um so what we're to do now is inside of app.js right here right so in app.js so i'm going to go to app.js and then here we have everything happening we have the sort of you know the user notification stuff but what i'm going to do now is actually have it so remember we pulled the loading stain so i'm going to say okay if it's loading right then i'm going to return a different bit of jsx oops not that if it's i'm going to return different bit of jsx now i'm going to create a uploading so i'm going to create a uploading container so this is going to be a div and inside of it i'm going to have uploading contents another div okay so i'm going to have another div and we're going to quickly go ahead and set those ones up okay so i'm going to do uploading let's go ahead and chuck those at the bottom so let's go ahead and do this to say cons uploading save there we go we've got uploading and then we've also got the second one which was app loading contents these are two styled components and let me know hit the thumbs up button if you like the um part is when you can get mine if you really like style components i am a fan honestly and we didn't even use the most powerful thing like the props use case right so it's actually extremely really powerful sunny best the best go go go appreciate it dude five lakhs away from 750 wow oh man and you see we didn't even actually make full power of a reactor we didn't actually use much of reactor so you don't actually fully need it but you guys can i i implemented it because i want to make it so you can extend on it and by having place you guys don't have to ask you know how do we have it inside of this we just you can pretty much use it okay so what i'm going to do now is i'm going to go ahead and say now where we have this um i'm going to go ahead and pop in here and then what i'm going to do is inside of here i'm going to have an image and this is the slack logo now that cool little spinner that you just saw this is a snack logo by the way so oh go ahead and see something oh okay something looks ugly and this is because i have not done this one oh there we go ah scared me for a sec all right so you see now there's a huge logo that's kind of stuck in the beginning right so we're going to fix that in a sec but what i want to do is that um sunny programming seems so complicated in a good way thank you so much dude um so here i'm going to actually install something called react spin kit okay so you guys can check out their docs their docs are really cool actually and they're very simple the way they explain it they show you a bunch of examples but it's this guy right here kyle matthews and he actually shows the use cases in a demo screen if you want to check it out but right now i'm going to show you how to implement it okay come on jay to pull it up and say yarn add react spring kit we're gonna go and install that now once we've installed that while it's doing it i'm gonna import spinner import spinner from react spin kit and then what i'm gonna do one like away whoa our sign law says something i'm 11 years old can i join the zero to four seconds of course yes dude we have 12 year old in there we have a 14 year old in there two 14 year olds in there there's no age limit 751 likes that's what i'm talking about wow like wow that's just like unheard of level of craziness like how we get so much support is just unreal i don't care man we we don't have a hundred thousand subs yet and we are crushing channels with hundreds of thousands of subs so we're killing it dude killing it so now let's go ahead and say at spinner like so and then we're gonna go oh no that's horrible spinner and then spin up there we go nice let's kick you up a bit spin up and then here i'm going to go ahead and say okay the name of the spinner is this one you can get the names from the demo page and i would recommend checking it out right finn says that is so sick that's what i'm talking about i'm going to color purple and fade in of none but split second so i don't want any animation i just want to pop straight in so you have to say none okay i'm going to save goblin says i did three projects from science channel and i got an offer of 1500 euros a month but sadly gonna make kind of the final round dude well done firstly okay that's all it's all about face to rejection that's a good thing right now the next interview you have you're gonna crush it trust me and if it's not that one you'll crush the next one but it will happen it'll come and you'll walk into that interview one day saying you know i'm just i'm ready for this man and that confidence will come through we teach a lot of this inside the course but it's really like honestly anonymous group says i'm gonna keep this energy up that's it dude keep this up man all right upstairs i was waiting for you dude finally you're back i hope you can continue making videos like this regards thank you so much dude appreciate you um so at this point now we've got the if loading so now okay let's go ahead and refresh you see it pops up while it's loading but we need to style it now okay so what i'm going to do here is i'm going to go to my uploading and i'm actually going to make this look a bit cleaner so i'm going to go ahead and jump on a few things um adam says i've actually started penning these builds out physically instead of building them straight away so i can concentrate on why the code is used more i've learned so much dude that's incredible that's what i'm talking about man that's exactly what i'm talking about so look you want to chuck in text align center padding bottom 100 pixels display flex flex direction column justify content center align item center now while you're styling this you don't want to keep refreshing and kind of guessing okay so what i do is i go to here and i say if true while it's doing well while i'm sort of working it out right so if true and then it will kind of force the screen to stay on right and then i'll just make sure you don't leave it like that they say image i'm gonna say a height of 100 pixels i'm gonna say padding of 20 pixels i'm gonna save it i'm gonna say a margin bottom of 40 pixels now as well okay so margin 40 oops margin 40 and then let's go ahead and refresh oh no wait a sec this is actually this should be in the other container this should be over here i got it mixed up we should chuck this one in the actual contents there we go and you see that guys look that's the actual loader okay please share your working experience i do inside the coaching calls i think we can complete hit that said it oh hit that i think we can hit 800 likes let's do it man if we can break 800 before this video man crazy right anonymous group says something i killed this build exactly exactly that's what i'm talking about right so i want to add a margin bottom because right now it's touching it okay so what i'm going to do here is i'm going to go to the bottom of this i'm going to say margin bottom for you and it will drop it a little bit away nice now how do i get this to center out okay so i'm going to do display grid place item center height of 100 view height and a width of 100 on the uploading container okay boom save and there you go okay now we've got this little loader okay now what i can do is i can change this boolean back to loading so it's no longer forced to true and i hit save all right and now check this out guys are you ready for this boom loading while it's loading it's going to be here and then when the user comes it'll go ahead and pop us in that's clean i don't even care that's so clean it makes me excited like you can tell i i can't fake this level of excitement right i know it's geeky i don't give a crap like that is a geek out moment i was just like on the other day like this stripe checkout team jumped into the netflix challenge i blew my mind when i saw that the actual stripe checkout team were in the chat that's insane man i couldn't believe that so this is a styled components not regular css we're just doing star components and it has a lot of pros and cons there's a lot of pros sorry a lot of pros okay so i'm going to go ahead and save and now look at this guys have we hit refresh boom nice perfect right and then you click on the channel and there you go that is so slick that's really really nice right so at this point guys i think we are i think we're ready to deploy this app are you guys ready to deploy this let me know let me know right now are you ready to deploy this application to firebase and go ahead and uh yeah get this thing working right let's go ahead and do this guys smash the thumbs up button if you're excited a new pum please stop spamming dude yes i've already built that right vikram says i'm ready dude that's it anonymous group dude i'm gonna have to time you out dude please don't do that all right well i think is it yes so we got everyone getting ready for this nice sunny isn't necessary to learn until when css um i mean it's a new trendy sort of thing i'd say right um all right so everyone's ready for this right so i'm going to show you how to go ahead and deploy this okay so let's find a quick let's find a nice one there we go let's just bring this up this is good so to deploy your app right so what you're going to do is you're going to go ahead and pop up in your terminal and here i'm going to go ahead and say firebase login so the first thing you want to do is log in okay now i've already logged in so i don't need to do this but you need to go ahead and say firebase login first the next step is going to be firebase init okay now firebase init basically goes ahead and sets up your application with firebase okay so this is just a huge terminal right now so what we're going to do here is i'm going to go ahead and go down with the arrow keys to hosting okay now you can see you've got a bunch of other stuff here but we're interested in hosting today so we're gonna click hosting on the spacebar and enter now you're gonna click use an existing project okay so i'm gonna click that and then we should see a list of our projects inside of this account right so at this point the one that we created right now was actually going to go ahead and say you guys can see all these builds that i've done it's crazy uh right now we have the slack clone right and this slack clone youtube right so i'm gonna go ahead and hit that one and then here what do you want to use as your public directory this is extremely important do not mess this up all right if you do do firebase in it and do the whole step again right but at this point what you're gonna do is and guys in the meantime i wonder if we can break 800 likes by the time we deploy how crazy would that be let's do it we finished it we'll finish this on such a high man oh in the public direction i'm typing build okay so it's going to be build right so i'm going to hit build and then configure it as a single page app yeah so you're gonna click yes with a y okay so undo this boom save and then set up automatic builds and deploy we get up no we're not gonna do that and then it sets up okay the next step yes you guys are started guessing it right now we're going to do mpm run build or you can do yarn build it doesn't really matter at this point right but npm run build now important step what this does is it basically goes ahead and there's loads of things when we build our like hot reloading and a bunch of other stuff right we don't always need that in the final production build we don't even need in the final production build because our customers aren't developers they just need the fastest app so we basically trim out all the fat of the app and then we basically go ahead and create an optimized production build and as you can see here it says pretty much we're going to go ahead and create an optimized production build so once this is done it will basically bundle up our application into a lovely folder over here called build okay now something important to know you do not touch the build folder pretty much okay so you don't really mess around with the build photo and instead the way you need to do it is that if you touch any of your code after it's gone ahead and finished bundling remember you need to run mpm run build again because it it would be your build would not have the latest changes inside so if you change the code you need to go ahead and do npm run build again and then it will work and by the way guys i hope you like that proper match it's pretty cool just sweating in the camera right so now what we're going to do is we're going to go ahead and say we're almost 300 likes oh my god let's keep going smash that like button if you're enjoying this so now we do it we did a big moment guys we're gonna go ahead and hit that button right so i'm gonna go ahead and drop a check right let's do it all right guys we're gonna do that we're gonna say firebase deploy all right and this is about to deploy this app to firebase right so it's found the folders in the build folder and it's uploading the folders and it will give us a url in just a sec and i will go ahead and share that url and you guys can go check this out i released it and it gave it hosting url boom that's what i'm talking about guys i'm gonna go ahead and drop that in the chat right now and we have a fully functional application right now go ahead and check it out let's go ahead and see this out right now guys let's see this check it out guys and look at this it's loading for me i'm signing in let's go ahead and check out go ahead check it out let's see if we can do this and you know what i think it's only right i think it's only right that we have one song that does this one right so go ahead pop a reactor team i'm going to jump in on my account right here and there you go right i'm going to go in the papa fam chat who's going to meet me in the papa fam chat [Music] yo what's up guys yo look at this look at that guys everyone's popping in [Music] what's up vikram look at this guys oh man this is so sick how cool is that guys that's so sick all right it's working manuel says i'm playing the same song here hey that's it guys look at that ayush's chat all right we've got abc we got the youtube chat look at that youtuber here i was first how cool is that guys that's so so powerful incredible incredible stuff let's do a overview of what we built today right so somebody said there's an over scroll error on the sidebar yes there could be an overflow error on the sidebar uh remember if we what can happen there is you can basically truncate if it is an issue or you can go ahead and do something else but you can go ahead and remember we built this entire app in three hours guys i'm incredible so yes if there's a tiny little bug somewhere we'll fix it that's fine it's all good the final bird in the papa get up repair now a few things to mention guys let's go ahead and say we have two days left to join the papa fam first link in the description thank you aisha says you've done a great job today guys we do this kind of stuff all the time inside the course right now and it's honestly the best right we go ahead we crush it we do incredible builds we do coaching calls well i just sit down i break the stuff out with you part of the papa fam zero to full stack hero is live it's crushing we have over 230 members strong right now check it out the first link in the description okay and this is me saying it to you because i have a huge sale on right now and if you guys want to get a part of that then it's going to end in two days and i don't want that out because i'm going to be closing the doors to the internal proper farm after those two days up again honestly really don't i'm going to focus on everything uh sunny you're getting faster and faster with this type of clone thank you so much thank you and thank you uh gerard thank you so much from ivory coast amazing stuff vikram says this project was so good uh guys this is incredible day is on that no thank you so much guys and i wanted to say um yeah just feel free to hit the thumbs up button and share the video out let's get this video to as many people as possible remember our goal with the papa fam is not to just like create cool stuff and it's a lot of fun yeah it's a lot of fun but guys we're here to change lives like my goal is to really help you guys change your life right it's in like land a job go ahead and just become a better more dedicated person and that's what i'm trying to do with these birds that's why the papa farm exists that's why we do what we do and i just want to say thank you to everyone who was a part of today's build who was here and if you're watching the replay thank you so much and i appreciate you and i want to say guys today we built an incredible app together we built a really really incredible app and uh it honestly it works so so amazing and somebody i okay we've got a little error over there where it kind of overflows that's fine though we have this incredible app i'm gonna show you my one local one and uh yeah guys this is absolutely insane we built the slack clone and the code is available in the second link the link to the papa github repo is available that's also on sale i mean that's going to be coming off sale very shortly and fantana says sunny love this appreciate you thank you so much guys and uh muhammad says have a great weekend that's it guys i want to say have an amazing weekend this video had redux react firebase hooks and it was a complete overhaul of the previous slack clone it's so goddamn powerful it's so good down clean and we guys we topped it off with start components so again thank you so much for watching and i hope you guys have an amazing weekend this is your boy papa react signing out i will see you guys in the next video guys peace i appreciate all of you honestly really really crazy stuff thank you dear and i'm just gonna give i'm gonna read these comments as i always do as we tune out today but guys thank you so much and i will see you in the next video peace [Music] [Music] me [Music] thank you

Channel: Sonny Sangha

Views: 127,454

Rating: 4.9297218 out of 5

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: QiTq5WrWoJw

Length: 203min 40sec (12220 seconds)

Published: Fri Feb 19 2021