🔴 Let's Build a WhatsApp Clone with REACT JS for Beginners!

right here god sonny how good does this look man super pumped for this build now so today guys a lot of you guys are waiting we've been waiting eagerly for these kind of apps and you asked for a lot of functionality so you can see we have the whatsapp build right here and we're going to teach you how to go ahead and build all of this today so let us know if you're excited guys guys who's excited drop that in the comments below look at this application right here let's just go through a quick demo of the apps people can see what can they do on here sonny so let's hit refresh and we'll start from the beginning i'll say refresh refreshing okay sign in so oh wow you can sign in with google no no i'm going to sign in with google all right that's fancy guys we're going to sign in with google what all right now sorry now web right there all right cool when you sign in check out the top left it even has your little picture no way that's too fancy that's too fancy you guys see it right there look at that wait hold on right there whoa okay insane cool cool cool stuff all right all right what's next so we have that we've got a slight adaptation so we've done it in sort of rather than a chat based fashion we've got like rooms so in this case we've got the testing room youtube room and dance room um let me go ahead and i'll actually get inside the app as well give me one i like the dance room man that that you're speaking my language i did that for you knows i did that thank you i was like oh [ __ ] naws is coming on the stream let's go let's go guys don't forget to dance drop in the comment below that's it so i just jumped in the dance room as well and if i go ahead and type in yo what's up nas and i boom chop that in look at that and i'll be like yo sonny yo sonny hold on hold on check out this check out this message let's go hey nice guys that's all real time so everything is in real time and it's actually quite responsive so nice if you want to go ahead and resize the browser a bit inside there so guys check this out we can go bigger right we can go smaller look at that that is so good sunny amazing job on the guys give some round of applause in the comments because this is well deserved look how good that looks i mean all his apps look good but i will his apps look good but this one i don't know i just i don't know i love it just yeah looks amazing yeah thank you dude it's mapping the whatsapp web so there's actually you can use whatsapp on the web we're actually mapping that iteration and if people enjoy this we can actually go ahead and use something like react native or something like that to really you know go in and build like an actual app version of this that'd be cool um but yeah so i think what we should oh we just got our first donation dude did we nice oh look at that vishal appreciate it i appreciate my friend thanks for the donation uh really really cool we got so many people guys uh adra says yo sunny we got yama what's up we got future co says what's up everybody what's up guys uh what's so daniel's like let's code aye sunny coding quoting the coding cup says uh fascinating said abdel abdullah run of applause in the comments says qazi from clever programmer guys let's go hey we've got my girlfriend in the house where's my her bomb where's my bond we got very big everything i see it i see it oh there we go what's up how's it going how's it going how's it going good to see you from the chat oh nice you're in the chat too i'm gonna tell you oh dude we just hit over 730 guys oh nine how much 731 so i think we're at 731 from my account i can see oh let's go that's insane guys if you're excited for today all we ask is that you go ahead and smash that thumbs up before we get started so that this can go out to as many people as possible right and then that will help everyone get the most value from this video so before we get started i think what would be cool is if we go ahead and show you guys um what we're actually going to what this build consists of so the tech behind this build because it's always a nice way to go ahead and get started we can actually do it in vs code we can actually list it out here that'd be a cool place yeah as you can see on the left we've got a live share running so uh now i just want to make it a little bit bigger on the left on the left let's make it a little bit bigger right there is that is that good that's good dude and then just press command j to hide that yeah nice so the tech in today's build guys we have we have react which is what is powering everything we have oh god no what's that oops let me go ahead and do this yeah we have a react whoa sammy just dropped a donation and tech programmer thank you guys awesome appreciate appreciate it i appreciate it tech programmer uh thanks so much thanks so much so much for that who else we got oh sami yo two dollars super ticker i know oh look at that that's cool thank you yeah awesome super nice guys we have a react we have the firebase firestore realtime database so we've used that and a bunch of builds previously we're going to have that today we have material ui so that's how we get the design looking the way it's looking um holy crap dude i can't believe how many people are supplying it it's crazy um we also have react rua guys so reactor inside this build yeah that's going to allow us to have different page routing so we have that forward slash rooms forward slash like a room id or something like that we also have the react context api guys so whoever wants to learn redux right so whoever wants to learn redux make sure you watch the end of it like all the way to the end of this video and shubham pandey just dropped another donation thanks so much you guys are crazy with that yeah it's insane dude we have the react context api so we can pretty much go ahead and if you learn that pattern you can pretty much be comfortable with redux so definitely jam-packed with value in this build and also guys we have google uh google authentication so that's huge right and once we've done that we're gonna deploy it using firebase hey grandpa oh wow 850 plus concurrent viewers let's go guys thank you might have let us not know insane insane stuff guys actually it's 919 guys from our point of view because we've got the latest updated stuff almost guys let's break it to a thousand guys share this video give it a thumbs up so that so the youtube goes ahead and share this for everybody else on youtube to see so get a thumbs up destroy that like button guys just destroy it as much as you can okay and of course subscribe subscribe to the to this youtube channel guys who is excited to get started before also guys worth mentioning if you find our videos pretty interesting you find them useful we are offering a free training guys so knows what are they going to get in the free training in the description in the description you guys are going to get free training on actually what is the title you know the title is sunny right the title is for we have a webinar and guys all about the top three yeah yes javascript developer so we're gonna pretty much go ahead and show you that in a free training and all you need to do to go ahead and get started with that is go to the link in the description and it's a completely free training guys so completely free so what i would recommend is that so you guys get the most value from our videos is that you pretty much go ahead and sign up right now so go to that link in the description sign up right now which is completely free and then once we finish this live stream whether you do it tomorrow whether you do it the next day or like you can go ahead and watch that webinar and uh yeah you guys just there's no loss there you're going to go ahead and learn a bunch using that uh using that free training so you can see i just shared it with you guys you can see it right here top two mistakes to avoid becoming a javascript developer this is some epic stuff guys we are getting so many people are giving us amazing feedback for this specific video completely for free don't really worry about it completely for free literally you you gotta click on that link gotta click on the link what's up what what florian just dropped us 10 pounds where where can't wait to join on profit javascript program coming soon flooring hold on we got a lot hold on we got hold on i i did test aditya said it let me see let's see if i can if i can find if i can find fluorine hold on hold on i got it hold on whoa we have a lot of people carlos gave us 2147 something which i'm not sure what that is we got vinod kumar keep going up you'll see it we got ayusa iowa's cyber exploit m holy moly you guys insane insane insane stuff insane stuff let me see where's florian hold on i gotta find flooring i will find you i will find you florida i promise i promise i will find you oh right there i found it florida yeah i got him thanks so much says can't wait to join on profit javascript program what are you waiting for drop that we have a link in description below if you're excited join it below guys so many people so many people from profitable javascript are already here and they are loving the course uh we're actually currently really cool stuff we're building a chrome extension in pwj so that's all cool yeah yeah exactly awesome sweet guys right guys so with that said i think let's go ahead and what do you think nas should we go ahead and get this started let's get started and just so just one one less thing guys go ahead we got our links in the description for instagram so go ahead and tag us in your instagram videos link is right here nas domanski for for me and then sunny sss for sunny i know i need to like shorten the number of s's in my name anyways guys let's get let's get it started awesome let's go and guys just to get this place though we just hit over 1 000 likes thank you insane stuff insane stuff love that okay let's do it dude let's go ahead and get started so uh if you if you are familiar with our builds guys and we use a tool called create react app right so we're going to go ahead and use create react app to get the app started and to get that sort of a very basic um sort of starter play template that react goes ahead and gives us so now if you want to click command j in the nvs code yeah gotcha what we're going to do is i'm going to go ahead and do the following so i'm going to say i'm going to say mpx mpx create react app so create react and then the name of the app so whatsapp clone right and what this will do is it will just go ahead and make all of the starter template stuff for us inside of the app oh i can actually see there's a little overflow bug that i didn't account for if you see you know when people are adding to that adding the new chat nobody knows until you start yet nobody knows we're gonna be debugging live on stream guys pratik thanks so much for the donation as well really appreciate it i really really appreciate it oh my gosh so many oh we got 10 pounds thanks so much so vincent just came in with swinging with 10 euros let's go thank you so much dude guys with that said oh my god another donation another one it's amazing it's gonna be a live call full of donations that's what's gonna be that's insane dude i loved it nice so now guys once this while this is setting up let's go ahead and set up firebase that'll be a cool little step to do now what do you want me to do or do you want to do it you want to do it uh uh for firebase uh yeah you you're gonna have to do it on the browser oh okay so let's so tell me what to do so go to firebase.com so i think it's firebase yeah firebase i'm just gonna go like here yeah firebase.com all right and what you want to do is click on go to console or make sure you're signed into whatever account that we're going to be using so if you've got the clever programmer account let's go ahead and use that all right so go to console yep let's go ahead and use i'm going to use this one hold on nice oh is the obvious code crashed what's that it looks like it is something i don't know yeah it might because the terminal nice okay what you want to click on add project go ahead at project beautiful all right uh let's go ahead and do whatsapp right yep so let's go ahead and click on whatsapp oh it says hold on what's up clone even let's start with the name of the project okay let me type in your project right here yeah yeah what's up what's app clone like that uh yep and then you can set up an account for that so you can just go ahead and click default account that's all good i create projects so this guy's is essentially what we're going to use to power the entire back end so we're going to use this to empower our authentication our database and when we deploy it so it's all of the hosting functionality all of that is going to be done on firebase and all you need for a firebase account is a gmail account and that's it pretty much and you can go ahead and get everything working with that we just hit over a thousand viewers on youtube guys yo let's go like thank you guys so much we we appreciate every single one of you guys watching right now and we love you guys it's amazing wow dude i never i'll never get over that i don't know why i really want to play my sound effect my sound effects for some reason i'm working that's okay that's all right we'll deal with our sound effects let's continue on i know i don't know why this is interesting so now what you want to do is go over to let's check okay so create react apps just finishing up nice so you want to go over to um let's go ahead and see hopefully that should be fine after once create react apps done awesome yeah so now you want to go over to that little cog icon in firebase click that and click project settings okay and then you want to go all the way down to the bottom and you see that web app icon right so it says that that one yeah and then here you type in whatsapp clone and make sure you tick the firebase hosting option also set up firebase hosting okay whatsapp yeah cool register app yep and then step two we can ignore step two we don't actually we're not interested in step two click next yep then uh firebase tools yeah so we need this we don't need to do this because we've already done this but you guys are gonna have to run that command so make sure when you do that you might need to do sudo npm install dash g firebase tools so just a heads up if you have to do that but we don't have to do that we've already done that so click next yep and then here we can ignore this for now just click continue to console beautiful beautiful sweet all right awesome and let's go ahead and click that config at the bottom so at the bottom you should see you see it says uh three different switches you want to click the config switch [Music] oh i see i see and so i need to copy this right you need to copy this yep copy that and then what we'll do is go over to our code over here and let's open up our files and we should see whatsapp clone inside of our file directory now i see it okay yeah awesome and let's go ahead and go into source and let's create a file called firebase.js so i'm gonna do right now so new file firebase like so right yep and you just paste it all right dude i'm gonna paste it in here command beautiful right there nice yeah i'm gonna say that yep save that and let's make it a a little bit so let's let's close command b to hide the sidebar all right and command j to oh yeah so you see guys in command j at the bottom now you can see it says happy hacking so once you get that message thank you envy dev for that donation massively appreciate that appreciate it thank you um so now what we're going to do is once you get this message guys you want a cd into the whatsapp clone so whatever you named it here we're going to do cd whatsapp cloud so cd whatsapp clone uh what's going like this and then you'll be in the right directory so it should have whatsapp clone and then here what you want to do is to start the app up you do npm start right so i don't know why i dropped them too long yeah that's all yeah yeah yeah and then that will go ahead and actually spin up the app right so this should spin it up on localhost 3000 so what i'm going to do is because me and nars are using a vs code liveshare i should be able to actually go ahead and share this with you uh give me one sec yeah somebody asked like what is it what are the config files so look what the configcap files are basically that is guys how we will go ahead and actually you know connect to the database right so you know all these keys right here is a way to connect the database um that's pretty much it nothing nothing too much uh on that exactly yeah you've got loads of people flying in says i got stuck on the instagram oh damn it why does the show get master and terminal oh it's because oh my zsh that's why our terminal might look different to yours gotcha um nice yeah so perfect now we've got low cost 3000 up so if you go into the left hand side you know in vs code right here live share and local 3000. right there hey let's go nice so now we're at this good if you get to this point guys well done so what we're going to do now is do what we like to call the clean up process okay so if you just want to follow me nas okay go ahead yep so if you want to follow me using click on that purple button yep following you and then click on the yeah so in the file directory now what i usually do is i delete app.test.js i delete uh logo.svg and i delete setuptests.js where is that oh okay so these ones okay i see it now i see it okay so i'm going to go ahead and delete apt.test.js logo.svg and setup tests so those those ones are the ones i'm going to delete so i'm going to go ahead and click move to trash and now if you click the little refresh like oh there you go you can see it yeah oh no has it refreshed uh-huh yes you can see it starts to freak out so you might need to click the refresh icon inside of the file directory so you see on the left yeah yeah i see it i see it hold on that little there we go nice hey so now uh the app's gonna freak out it's like oh my god you've deleted everything so now what we do is we go into our code so let's do command b command j nice and what we're going to do now is go ahead and do so firstly i'm going to get rid of these errors so right now we got rid of the logo which is why it's freaking out so i'm going to go ahead and delete that and here what we can say is we can just say h1 and we can say hello let's just say let's build let's build whatsapp let's build a whatsapp clone awesome and save it nice and we should see let's build a whatsapp clone on the on the right side which is awesome hey we did nice okay nice right all right now what we're going to do is we're going to do a clean up process so app.css has a bunch of crap inside of it so you pretty much want to do command a delete everything inside of that yeah you don't want any of that stuff and if we save it you'll see now the styling gets a little bit more it's left aligned and we get rid of a bunch of that stuff the wonky one more step before we get we have a starter template so we go into index.css and here we want to say target everything and give it a margin of zero and we just got another donation guys he says can we have the source source code github link so that'll be easy for us to follow yes we will be uploading it after this video of course yeah yeah and thank you oh and then we got pre priyank thank you so much for 2 donation thanks for everything you do of course we're happy to do this guys dude massively appreciate that let's go ahead and click save and you'll see now when i do that it just removed that top bit of margin right so now we're actually in a very good starting point so we can go ahead let me go ahead and remove this thank you mansoor as well really appreciate for donation too oh my we're just we're just flying with donations today i know guys the love is real today this is insane let us know what you guys are excited about in the comments as well i love to see like oh my god we're holding over a thousand as well it's blowing my mind holy crap nice yeah we are going to be using the uh bem naming convention so here uh let's go ahead and do the bam naming convention and you guys who aren't familiar with this essentially it's just a very easy way of naming your components inside of react and it's it's really really scalable you'll see i use it in every single build we use it in every single build and it's just a really clean way of keeping your app like very very neat so with that said we've got the app right so you notice when we had our build we had the app and then we had this sort of consider it as like the app body right so the app body was that little sort of container so let's go ahead and open up the actual deployed version us right here right here this is the deploy version right here yes are these people who's creating this stuff this right here this is live so they've got oh yeah so people actually create this right now oh man all right nice it's crazy right yeah you are really react yes awesome i love it i love that nickname dude sunny thank you man appreciate it thanks so much for the nation and yet again oh man you guys you guys this is crazy stuff nice so let's go ahead and what we like to do you know how we do it guys we map out the app okay so we can see from the right hand side we pretty much have like if we scroll a tiny bit up now on the right hand side can you see how like it's kind of like a floating card right yeah so what we're going to do is we're going to consider that to be the app body so here we go you guys see how it has that has that kind of shadow right there that's what he's talking about like right there yeah so i'm going to go ahead and consider that to be something like the app body okay so everything inside the body was essentially sits inside of that card that's what our end goal is going to be right and then inside of the art body we're going to have two things and i like to always mask things out so i like to kind of add comments and it kind of makes the whole process a lot easier so what we're going to do now is we're going to have a sidebar like this and we're going to have a um a chat right so the sidebar is essentially going to be the stuff with so it has nazi's avatar on the top left yeah it has all of this stuff for the icons the add new chat the sort of all of this all this stuff right here all this stuff right here exactly yeah so we have all of that stuff over there and the chat is this sort of stuff on the right hand side okay got it yeah exactly that yeah we're going to have the chat on the right hand side so what we'll do to get started is let's actually go ahead and style that so that we get it somewhat on that lines of looking like that so if we go into app.css remember we have the app and we have app body right so it's going to app.css and what i'm going to do guys i'm going to firstly target the app uh itself so the app itself and what i'm going to do is i'm going to give it a background color of it's a slight it's like an off it's like a really weird kind of off gray i think it is but it's this color right here so you guys can just copy this hexadecimal code um if i save it let's go ahead and see what that's like guys please keep the chat clean in the whatsapp app okay you want to keep the chat clean yeah because otherwise i won't be able to show it exactly we want to keep that chat clean and then that keeps these videos coming but no no no no chat and then what we're going to do is we're also going to set the height here to 100 view height so i'm going to go ahead and do height of 100 view height like this okay and if i save that like this awesome nice all right so that goes ahead and does that uh now what i'm going to do is i'm actually going to get rid of it on my local house because i think it's killing my ram so i'm going to look at it for your screen yeah wrist removal yeah yeah awesome um i'm not longer on that screen so we're good yeah nice so now i have a background color and a height of 100 view height so you can see we've got that little uh kind of weird looking uh gray behind it right so that's pretty good for what we want to start with and then what we're going to do now is we're going to go ahead and target the app body okay so that body i'm going to go oh this was the app body so i didn't want this stuff and i wanted this to go towards the app itself so the entire app so let's go ahead and change that and we should be able to see this if i do save now we can see the whole thing's like that right the actual app buddy itself where it says let's build a whatsapp plan let's target that so we say app body like this and i'm going to go ahead and do the phone and say display flex right so i want anything inside of it to be to follow the flex rules then i'm going to go ahead and say this is a really neat trick by the way guys i'm going to give it a width and height of a 90 view height so it's going to have a little bit of a cropping in from each from the top uh and the left and right and the bottom and then what i'm going to do is give it a background color of a i think this was like a a different white color so now if i save this you should see what what i've done okay why is my uh what's up all good yeah it's just it's it's saying saving saying so saving not determine recent changes or others what the heck what is that yeah i know right yeah but then but now it says nothing okay no it's all good i see it i see it i see it now yes you see it kind of made this uh this box which is like it's got a width of 90 view it uh and a height of 90 view height right so it's kind of cropped in a bit uh i know oh thank you thank you so much thank you so much says hey bro i'm new to your channel just four days four days uh back i saw zoom clone that's insane you guys are rocking let's go we'll rock today big fan here thank you so much thank you dude that's amazing love that and now what we're gonna do is we're gonna add a slight little box shadow so you guys can go ahead and copy this box shadow code i just went ahead and messed around with the value into i got like a nice little sort of 3d effect off of it and then i'm going to give it a margin top of 50 pixels so it doesn't touch the top but then what like why what i kind of found here guys is i don't want it to be um positioned like this so let's go ahead and get rid of that i want to do a little trick right so if i can go ahead and say the following for the app so if i say display grid and then i do this place items place item center look how nice this trick is as soon as i do this boom it's just oh wow just see that yeah like it's insane like if i get rid of that place item center you see like it does that but then it just literally maps it on vertical and horizontal axis and gets it centered now if i go ahead and move remove this h1 of let's put a whatsapp clone like this now you can see look at that boom perfectly in the center wow dude that is insane wait so is this kind of like display flex but this is it's just a a new way for this did this come out after display flex or something so i'm not sure when it came out but i was watching like a google video and they were talking about the different display methods and display grid was one of them and so the grid is obviously css grid but place i didn't know about place item center and basically whatever container child you like whatever child element you have it will just center it vertically and horizontally got it got it got it which is really really nice because usually you have to mess around with all sorts of margin and rubbish like that so that's really really nice um okay so now what i'm going to do is i'm going to give this one a margin top of 50 pixels i'm going to kind of detract from it because in whatsapp in the actual web one it doesn't sort of it goes a little bit closer to the top like that that's it nice awesome so now we're waiting who is pumped guys i have somebody saying hey when nas starts staying pumped i'm going to be laughing and pumped as always let's get pumped up guys get pumped up let's go [Music] let's go ahead and all right so now we've got oh my god we've hit over 1200 viewers and say let's go nice let's keep it going let's keep it going so we've got app.js so remember we mapped out two of these components we had sidebar and chat right so for the sidebar what i'm going to do is i'm going to go ahead and actually make that component so uh knows if you want to show them how to make the first one and then after that i can show them uh i can kind of speed it so if we want to go ahead and create and create a new file called sidebar.js okay so it's going to do uh inside the source correct so yeah right click new file side bar oh capital s capital as if because it's a component yeah side bar dot js all right let's go to create that and then that's in here and then we can we can use uh for to create a component what is the shortcut it's r f c e r f c e uh wait let me try you you're good yeah rfce there you go boom right there nice yeah so that's how we're going to be very like speeding up the whole uh process of creating components and what we will be doing every time we create a component the standard thing to do is go ahead and import the corresponding component css file so in this case sidebar.css so i'm going to create it sidebar.css and we should pop into it now in a second oh i think you have to follow me again when you create a filename okay i see i see it right there yeah i'm following you now yeah now let's see what the sidebar does here you see that right there yeah right there yeah boom so then that way we import it and then remember guys we want to uh stick with the bem convention so we're gonna do class name equals uh sidebar like this right so that's what we want to first need do with that so now we've got the sidebar and what i'm going to do here guys is we the sidebar is split into different sections right so firstly what i'm going to do is just prove that it renders out so i'm going to do h1 and say sidebar and then i'm going to go into app and i'm going to go ahead and rather than having my comment i'm going to replace it with sidebar and if you guys like the comments that i do and you think it's useful let us know in the comments because we tend to do that on every video and we're not actually 100 sure if you guys like it or you guys find it confusing yeah it's always nice to see yeah so then we need to import that at the top i've done a little neat trick there i just went control space at the end of the component and you can go ahead and do a little shortcut save it and we should see hi i'm a sidebar hey okay i'm or sidebar perfect nice hi i'm a sidebar hot so oh some people are saying rfce is not working for me how can we accomplish that so if if rfc isn't working for you guys now let's go ahead and go into your extensions yeah right here type in es7 es7 you you guys need to go ahead and install the following extension es7 react redux and snippets so yeah just install that and then you guys should be fine right here and that rfc will work no problem exactly yeah exactly that and that will go ahead and give you uh that sort of the lovely shortcuts that we show you throughout the app so the next step what we're going to do is we're going to split this up the sidebar up into separate things right so md for can you do thank you so much thank you very much guys a lot from this channel i implemented the instagram clone thanks guys keep up the great work awesome work dude well done on implementing that nice so inside the sidebar we're going to have a few sections right we're going to have the sidebar header so uh as i do this now it might be cool to show the actual app so as i write it we can see what i'm doing on the sidebar what i mean oh yeah i am showing the actual app no no no sorry the deployed app i don't know if we should show that there's some pretty nasty comments in there oh really okay yeah okay god damn it guys guys come on yeah keep it clean so now what we're gonna do is on that sidebar we have a few sections we have sidebar headers we have sidebar header right so that's the top of the sidebar where we had nars avatar we had a few icons in there and then we also had a search bar so we had like a little nice little search box i'm going to say div sidebar header search sorry search like this nice and then we also had a chat right so we had the chats when i refer to the chats i mean all of the things which some people have like sadly spammed out but we can go ahead and do sidebar chats like this right so we can go ahead and do that uh sidebar oops yeah there we go so now we've got three sections one two and three so we've got the header and the rest of it so in order to sort of go ahead and and carry on with this now what i want to do is we need to install material ui because we need some icons right we need the avatar the component we need a bunch of icons so um now let's go over to materialui.com okay material beautiful yep all right there you go nice and what we want to do is we're going to do um the following command so let's open up the terminal okay so command j terminal yeah okay i see the terminal but i can't write in it awesome uh yeah you can't run it so now what we'll do is we are going to go ahead and do i'm going to open up a second terminal so you should be able to see a second terminal yep ls what i'm going to do is i'm going to say uh mpmi so npm install and then we're doing material ui yeah got it and you can go ahead and do that what that will do is i'll install all of the material ui dependencies so all of the different components that they give us everything that is included inside of material gets pulled in when we do that while we wait for that to install let's go ahead and go to the search bar on the right and type in icons and just so you guys know like what material ui is right material ui is simply just a way for us to easier um to easier uh basically enable you know to it already has css components so we can really fast create you know good looking applications exactly exactly it's like a reusable component i guess is it like a component library yeah yeah yeah right so css library like a css library basically yeah exactly so once you've done the core you actually need to go ahead and install the icon so what we can do is we can do we can write the same command or replace the android icons like this right and what that will do is i'll go ahead and pull in the icon set so yes we installed all of the components that are available but they also have a really nice icon set so you can go ahead and install over all of that so it does click on where it says you can search the full list of these icons and give them a demonstration as to how we then get the icons that we use you can search okay right there search your photos of these icons let's go ahead and do that i'm clicking thank you very much siddharth he goes doing a good job guys appreciate it you did thank you thank you thank you appreciate it let me see if i can find you all right there you are siddharth there we go you're the man you did nice all right okay go ahead sunny yeah so now what we're going to do is inside where it says search icon so for example if we need let's say a um settings yeah we can do things yes this is to say we need a settings icon right so you type in settings inside of here and then you see you'd get the icon and if you click the icon you'd actually get the import code that we would then use to pull that into our app and because we installed the icons we can go ahead and actually write that in our app and it will work as we expected to so whenever we're doing this tutorial you're going to see me doing a bunch of imports and what's going to happen is that's how we found them so if you guys are wondering how that's that's how we do it right got it yeah yeah awesome nice so now what we're going to do is let's go over to uh the sideburn i should actually go ahead and start like populating this stuff so we have the sidebar header right now the header had a few things it had a few icons on the right and an avatar on the left so to get the avatar on the screen what i can do is i can go ahead and import the avatar so i can go up to the top and import the avatar so actually i can do it i can just write it and then i'll do a shortcut so if i say avatar like this right and i should be able to i kind of might do my little shortcut let's go ahead and do this so i'm going to put it at the top right avatar like this and then if i save it now we should be able to see a little avatar pop in so wait until this loads and we should be able to see um a they're still compiling oh something looks like somebody cleared the chat thank you so much finally somebody cleared the chat on the actual live one let's clear the chat a bunch of times that's awesome that's smart that's smart thank you whoever did that thank you so much nice thank you so you see guys where we've got the top we've got the avatars is avatar um nars is avatar in the top left right there and then on the right we have the icons right so that's what we're trying to achieve right now we're doing the header section so heading back to localhost so now yeah boom right there we have an icon right now okay there we go there we go the avatar right so the avatar is already there and what i'm going to do is for all of those icons i'm going to go ahead and bundle them up into a like their own container i'm going to call this one sidebar underscore underscore header right okay like this and then inside of here i want the following three icons i want a uh it's kind of it's weird guys it's called a donut large icon that's the first one the second one is called a chat icon and the final one is called a more vertical icon and basically i'm going to go ahead and save this once i import these and you'll see what i'm what i've added in here so let's go ahead and do that here so boom i'm going to save and then let's go ahead and see what we pulled in so we've got the donut lodge and the donut large is for like whatsapp stories the chat icon is for like if you're gonna create a new chat or something and then the more vertical icon is for the three dots got it yeah so that's how we get that so now we're going to do to get that styled correctly let's go ahead and actually dive into sidebar.css so inside of sidebar.css what we have now is we have let me just make this a bit clearer so we have the sidebar header so let's go ahead and do that so we've got the sidebar header and for that header i'm going to do sidebar header like this and i'm going to say display flex right are you typing where are you typing where are you typing um oh you might need to follow me on css okay i'm like wait hold on where are you right there yep hey yeah there we go i don't know why i doubt that yeah yeah that's weird anyways i'm going to do side display flex as soon as i hit save we should see everything will go into a row now right there nice nice nice nice yeah and then because everything sort of um we want to space everything between it so i don't want everything to be bundled up i want the two containers to be spaced apart so if i do justify content space between it should use up the full um width of the the container at this point or in this case i need to do um into a few more things actually i need to say um that's one sec we're gonna do okay let's go ahead and give it some padding and a border right so let me go ahead and do that first one sec wait so if you do say shouldn't shouldn't that work space between right now right so it should but then you see what's happening is basically we've given so where we get where we had body so our body was actually so let's go ahead and check out our body our body was display flex oh is it yeah so it means it's only going to use up what it needs because this was a child of that body so this div is only this day of basically is not taking up a hundred percent of the width so that's why these icons are not specifically you know uh basically are not taking up the whole width or space between i guess you can say exactly and to fix that what we could do is just to prove the point we could say flex one and this should then go ahead and use the full width look at that right there see big difference guys look at that exactly so it's all about understanding how flexbox works that should help you now what we're going to do is we're not going to use flex 1 we're going to use flex 0.35 so i wanted to use 35 because that's roughly how much whatsapp web use is yeah and you can see like roughly that sort of the the amount that we want to use right and then for the chat we're going to use up the remaining 65 so that's why we've done this here almost 1.5 k likes on this video guys that is insane guys i hope you are pumped for this video as much as we are guys let's get this to 2k come on come on you know what to do you know what to do that's insane oh my god like i wonder what the watch time will be on this this is insane oh dude i'm excited to see it yes damn damn so now we've got the um the header right i want to target now so header right is referring to the container around those three icons so if i go ahead and do target that header right so i say target the header right like this and now what i'm going to do is i'm going to say display flex so they're already in a row so it will continue to be in a row but i'm going to do align item center and this should actually centralize all those items uh in in that container so there you go there we did done it there and then i'm going to do is say justify content space between right yes a space between so space oops space between like this and then if i do that it should i mean does that make much of a difference at this point no because it's going to be cramped up but if i say min width so i chose to basically give it a minimum width and i gave it a responsive minimum width of 10 view width so if we go ahead and add that now now it gives it and then you see the space between kicks in because it's actually now got some space to go ahead and do that now all of these buttons if you hover over them they're not clickable they don't have like a nice clickable fill so if you go over them they just kind of look like crap right so it's like sunny and kazi best hosting duel on youtube kazi looks different today right he looks a little bit different yeah doesn't have the mustache you know nice um so now when this you see those buttons on the on the the right hand side the icons if you click on that so go ahead and click on yeah yeah nothing happens right no no so that kind of looks rubbish right so what material ui goes ahead and gives us is like a wrapper and it's called icon button and what you can do is i can type in icon button like this i can import it from material ui so i've imported at the top over here and then what you can do is you can go ahead and you can wrap your button inside your icon inside of it now if we click the left uh the left icon so you see uh not that one the the leftovers hey look at that you see that guys yeah that looks very nice to see how it creates like that that uh that like yeah i like it that's good yeah it gives it like a really nice kind of clean feel when you do that it makes you feel good you know it's like yes i just click the button and i want to click i want to keep clicking the button exactly it gives you that nice ripple effect so i'm going to go ahead and surround the rest of them inside of that so i'm going to go ahead and replace this with a same version but everything surrounded inside of icon buttons and if we do that we can now see there we go we've got the three buttons and they're all clickable icons instead now so you can get one i see it boom boom boom so all button three are clickable now okay i see it cool yeah and i mean like that's a really satisfying thing which is super easy to achieve using material ui so really really nice little little wind there yeah awesome so what i'm going to do now is for all of the icons inside of that right container i want to actually space them out a tiny bit more so i'm going to go ahead and do this so i'm going to go ahead and target that right container but i'm also going to say the direct child which is the material ui icon so this is the class name that is gets given to them i want to give it a margin right of two view width which is a responsive and i want to give it a font size of 24 pixels so if i go ahead and do that and you need to do a question mark exclamation mark important so you override material ui's font size and we do that and now we should be able to see that it says it's very subtle that change it was actually super super subtle but it did make a difference yeah um awesome so with that said now what we're gonna do is we have the we have that portion done now for the sidebar guys we actually have uh a few things so we had we've finished the avatar now we finished the header section so the header looks really clean right now yeah but we want to go ahead and do the search so the search is that search container underneath it so it's the next bit underneath so remember this bit that we sort of drafted out right right so what i'm going to do is because the search container consists of two things it has like a search icon so like a search sort of hourglass icon and then it has an input field so there's two things here so the search icon that we're going to use is called search outlined so it's actually this icon right here so the one we're talking about this is this search icon right here you see that guys right here yeah so exactly that yeah exactly that so i'm going to go ahead and do search outline and i need to import that from at the top so i can go ahead and do uh import from search outlined there we go and then what i'm going to do is i'm going to go ahead and do the following so i'm going to add an input field and i'm going to give a placeholder and the placeholder says oh no it's what might be called if you go to view um and click enable word wrap if you want on vs code right yeah you can go into the help and type in word wrap and then oh there it is yeah toggle wide wrap oh that's cool okay i like that all right yeah so that way we never get the issue of them not being able to see it nice oh man that that's a cool tip but cool okay right yeah that's insane what's a what okay yeah i got real excited rowan says sonny will you be using redux here we're going to be using react context api so stay tuned and we'll show you the pattern which is also applicable to redux so yes is the answer to your question um nice so now what we're going to do is we have the search and the input field awesome uh if i go ahead and save this now we should see that those two things pop in now the final one that we saw was actually kind of it looked a bit different to what we're going to see on the screen now so let's wait until that refreshes uh you might need to refresh uh the localhost myself yeah i got it oh it could be that oh actually it could be because all of the children are still loading actually it's still loading at the localhost oh right yeah it says mine's compiling still okay so while it does that what we can do is we can carry on coding so we have the all three of these children so we have the sidebar header sidebar search and sidebar chats right i'm going to go ahead and go to sidebar and i'm going to make this display flex yeah display flex but i don't want this to be i really don't want this to be in a row because it doesn't make sense then my then my sidebar would be in a row along the top i want to do flex direction column like this and that should actually go ahead and fix that for us so i'm going to go ahead and why is it still compiling that's so weird let me see command j um does it compile on your end yeah i think it's yeah i'll restart it there we go so the npm start and that should be doing it okay nice far is like learning a lot from this of course guys that's we're here we're here to teach you guys we're here for all you to learn so much exactly and guys like this is a huge jam packed like it is a value pack this one so thank you so much for the super chat looks like a lunch so much from you guys done with instagram clone cover 19 tracker looking for wow and the content attention and looking forward to the whatsapp clone let's go that's what i'm talking about nice dude okay i think now it should be up and running us okay let's see him refresh yeah refresh one more time so i don't know it's just it still says starting web development server so it looks like it's not done yet okay so we'll carry on coding for now it might just be the ram or something but yeah what we can do is essentially what we have is that search outline hourglass right then we have the input the input placeholder and what i'm going to do is i'm going to surround the entire thing inside of something called sidebar and then it's going to be search container oops god damn it that is not container it's a search container like this right and i'm going to go ahead and grab these two boom chuck it in there and save it like that right now with that said what we're going to do now is go to go ahead and style this so right now it would actually look kind of horrible it would have a search container it would have a search hourglass and then it would have an input field with some nasty border around it um it's really frustrating why is that not i know right yeah because that would be it's really really nice react you got this react come on god damn it it says starting the development server guys drop some fire for react to start this developer server guys come on i mean if we do you reckon dude i mean we are almost at 1300 holy moly and it just keeps going up insane guys yes almost whoa wait a minute it says compiling oh my god i think that's because g net network just dropped a donation i know ginabro did the whole thing you know she's like yo let's drop a donation outside localhost is like boom you know what all right i'm working guys we're four people away from breaking 1.3 k viewers insane yeah this is on road today dude unreal i think it's actually done those if you hit the refresh button let's try it come on come on you got this come on you can do this let's go hey let's go nice so now we have the search sidebar container so you can see now that it looks ugly so all of that yeah container so we have the sidebar search and then inside of it a sidebar search container so i'm going to go ahead and make that look a little bit cleaner so let's go ahead and do sidebar search like this oops sidebar underscore underscore search and then what we're going to do is say display flex because we want it to be flex i want it to be centralized so i'm going to say align item center and then i'm going to give this little background color right so this background color i believe is a sort of like a it's like an off gray and i'm going to give it a height of 39 pixels and a padding of 10 attempt sources so this was actually drafted from the whatsapp designs themselves so the ones that they did on whatsapp that's why i hadn't used an inspiration for from sorry so that's how we do that and then the actual container itself is where we want to make it look a bit more nicer so i'm going to go ahead and target the container and i'm going to say for this container i want to do display flex because we love display flex i'm going to say align item centrally let's go ahead and save that and you can see that should pull everything centrally there we go i will say the background color of the container should be white we want a width of 100 a height of 35 pixel and our border radius of 20 pixels which means it gives it a more rounded border right so if we go ahead and do that now you can see there's a white border around it and it has this this sort of like it's starting to look somewhat like a search field right but it's not it's almost there but it's not there yet yeah right so the input field we're going to do next so inside that search container target the input field so with this line here and i'm going to say give it a border none and a margin left of 10 pixels so border none and margin up to 10 pixels so if i do that we actually get rid of the input uh border and look at that it automatically starts to come together a bit more i like that that's so much clearer it's not so much cleaner and then we've got one finishing touch so now if we say go ahead and target the material ui icon so remember this is the icon class name that gets given by the foe we're going to say give it a color of gray only by default this is this is actually the class and it's given like if i click this you're talking about this one so if i click this inspect element let me see if i go to the put this at the bottom so the actual icon uh the actual icon itself if you inspect that little hourglass it will give you a um it will give you the oh i see where you see that guys it's a class class mg right there right here guys okay cool cool and that will basically go ahead and give you so we're saying target the material ui icon give it a padding of 10 pixels and make it grey so as soon as i do that see it kind of just ties everything together which is super super nice right and there you go there we have like the search container so very small changes very subtle changes but that looks good are you kidding me solo changes you know subtle changes make a big difference yeah venue says the 35 like .35 trick in flex was awesome yeah like we're going to show you when you combine that with the 65 for the chat and you get like a perfectly responsive container so it's really going to be some cool stuff coming up 1.7k likes let's go sane dude insane mystery snag says i really appreciate this thanks a lot for these videos been watching a while i just don't like uh commenting okay nice dude thank you for watching we don't mind if you don't comment as long as you're here that's amazing yeah the most important uh yeah nice so the final part guys is the chat right so we have the sidebar chats underneath right so let's go ahead and check that out so we have the sidebar and now what this is if we go to the deployed app we can see all of those where it says add new chat and they clear the chats consider each of those things to be the same component so even add new chat surprisingly is the same component as clearly yeah that one yeah right here boom so that is all one component but that whole section is what we're going to be building now right so now what i'm going to go ahead and do is for that one i'm going to say um let's go ahead and so let's just for now i'm just going to say like h1 it's going to be this is an oh let's just say sidebar option or something sidebar chat yeah or something like this and basically we're gonna have it like this so say we had a few of these options and we go ahead and save it then we should see [ __ ] hamdan says sonny i get positive energy when i hear your voice oh thank you dude it might might be the british accent i guess i love that partially partially partial and the rush is just sunny the rest is just sunny the way it is guys sanja is an amazing guy like if you meet him in person you gotta talk just a great guy which actually i haven't mentioned person yet so yeah we haven't even met but it's guys how crazy is that we're like we're like changing like inspiring so many people we've never even met which is like mind-blowing so you can have an awesome team across the world and you can still do your thing which is insane yeah by the way surprises thank you so much for the 2020 donation appreciate it thank you nice um so now we have so where we have sidebar chat we're going to pretty much replace the sidebar chat h1 tag with and a component which is called sidebar chat like this right so we're going to sidebar chat like this oops chat i'm going to go ahead and make that file so i'm going to make a file called sidebar chat yes dodge s and we should jump into that file now and if i do rfce boom we get a nice little shortcut uh now is this do a command b i think oh you just opened that now didn't you yeah i just adjusted yeah yeah yeah just so they can see and then what we're going to do is our default setup so we're just going to go ahead and create a sidebar chat.css i bought chat dot css go ahead and do this and here i'm going to do class name of sidebar sidebar chat like that right and i need to create that sidebar chat css file so sidebar chat dot css like this nice so now what we're going to do is i'm going to go ahead and style that so firstly the first thing i want to do is you see that sidebar so firstly it's freaking out because it's like sidebar chat is not defined so i need to go ahead and import that so i'm just going to go ahead and drop an import and it should work like this and i'm going to save it and now what i'm going to do um is go ahead and do so remember we made it flex one all right so we made it flex one so now what i'm gonna do is oh wow cause it donated forty five dollars for uh how does that work out [Laughter] i've been saying cosby thank you thank you dude let's go just want to say i love you all so much we i hope we are helping build the best developer community on the planet damn right bro damn right bro love you too bro seriously i love you too bro exactly this is insane right so now it's saying expected and objects let's go ahead and check what's going on here so it says sidebar chat if i go ahead and open sidebar chat it's because right now we actually haven't got anything inside of it so if i go ahead and do this and say hey you should see hey pop up inside of the sidebar chat there we go so what i'm going to do now is i'm going to go ahead and get rid of these okay and i'm going to style the sidebar chats here so i'm going to go ahead and do sidebar chat oh no sorry sidebar.css i'm going to go here and this is something cool guys so if i do the following so if i say let's just give it a background color of blue so it's super obvious about what we're about to do right now so if i go ahead and do like this right so here we can see that that's only using up like what it needs to because it's flex the direction is column right now what i'm going to do is i'm going to say flex 1 and check out what it does it uses up all the rest of the space which is awesome and so that's because it's we're using display and if are we using flex direction column or just flux direction row that's flex direction column gotcha yeah yeah exactly yes so the flex one would be in a vertical direction and then what we're going to do is so in the demo we saw some things overflowing so to fix that we can do overflow scroll like that right and that will actually go ahead and fix that if we have a flow if we have something which is overflowing um nice so what we can do now is we can go ahead and do sidebar chat so let's go ahead and let's just pop like a few of these on there so we can sort of exaggerate what's going on and also why we are definitely not going to leave that that color so let's go change that back to uh white right because the sidebar is white there we go nice and you can see guys like like it's already looking very clean like you've got like a somewhat it's insane honestly guys what are you thinking so what are you thinking so far like who's who's i mean who's excited to just to build it i mean we're so close to actually having to look just like whatsapp clone insane yeah it's insane yeah it's taken i think well just like uh just under an hour right we're getting there pretty quick yeah and it took what's up how many years to build their app but it takes us how much what just one hour exactly one hour and lots and lots of coffee yeah so now inside of sidebar chat so sidebar chat dot js now what we're gonna do inside of here guys is we are going to create the following so inside of sidebar chat i have a few things i have an avatar right and i'm going to show you guys a really nice little trick inside of here so right now rather than sort of i didn't want to show you guys like so we've done plenty of stuff when it comes to having a url which shows the avatar we have we have that in this app as well but i want to show you something else and it's kind of a fun little trick that i did and it's basically we're using an endpoint which gives you a random avatar right so it gives you like a random face or random head which is kind of cool so i'm going to show you guys how to do that so what we're going to do is here we have avatar so let's go ahead and write avatar like this boom boom boom and i need to empower at the top so import avatar for material ui core like this save it and what we should see now is we should see avatars popping in so we should see a bunch of avatars popping up nice okay nice there we go and then what we're gonna have is we're gonna have an info div so i'm gonna show you that that cool little thing afterwards we say div sidebar chat sidebar chat uh cyborg chat underscore underscore info like this and then inside of here we're gonna have a h2 and the h2 is gonna be the name or the room name so in this case it's going to just say room names for now right because remember our whatsapp is slightly we just we all edit it a little bit so we've done it for demonstrational purposes because we wanted the balance of everything and so something that you guys could demo really nicely to an employer or something so we've got a room name here and then here we're going to have like the the last message that was sent on that room is actually what comes up here so we can just say last message dot dot dot right and if i save that we should see the following so we should see something pop in now just go ahead and check there we go room name last message awesome uh and then we're also gonna have okay so that will do for now and basically guys this is really cool right so i actually found this not long ago and basically what you can do is if i do this if i write source equals so for that url i found a really neat little website called http avatars.spare.com api human right so oh uh not as your word wrap doesn't seem to be on if you go too you don't know why i got it i got it yeah there we go yes there it goes forward slash and then basically what you do is you pass in so you can pass in something here to human and this could be human it could be like an animal face or something like that but you could also do if you pass in like a random string at the end of this guys it generates something based on that random string so now if we go back to the um the react app oh right there just like that sorry i just i was looking at the avatar stuff that's cool look at this guys it literally says how to use it you can literally just pass in anything and thank you oh that looks so good it's cool right so it's called dice for avatars and basically now if i go ahead and pass in a random string and save it that seed so this random string at the end we call it a seed and basically so here if i go ahead and do like one two three save and it should if we refresh um okay interesting so we've got source equals let's go ahead and see why that's happening so oh yeah so it should be at the end it should be dot svg at the end oh got it got it okay so this would be random strings or like some random string dot svg and then what this will do is and it's also a vector icon so it's going to scale really well so you can do that now look at that guys and if i change this a yeah like look at that if i change this now it's gonna be a different avatar so let's go ahead and uh oh that's so cool it's nice right so this is like a little neat little trick that we were going to add in here just for some fun because we like to keep these things quirky you know show you guys some little tricks so now what we're going to do is in order to get a random string every time for that i'm going to go ahead and use a use effect so use effect is a hook inside of react and basically what it does is it will run some code when the component loads right so run some code when the component loads and what i'm going to do here is i'm going to call this so this little string over here is something known as a seed right so this is something known as a seed so what i can do here is i can pretty much wrap this in some string concatenation so i can go ahead and do the following i could say boom boom boom like this and then i want to essentially have some variable here called seed right so if i go here and i use some state so uh state inside of react is just a way of basically writing a variable so here we have seed set seed is sort of how we modify the value um and then you have to pass in something we actually have to like there's no way we're just like you just automatically get some random one no yeah it's a bit strange i mean like i think it's because that way if you had like a user id or like something like that it would always give you the same you see what i mean it will always give you the same one yeah all right so what we can do now is we can go here and then for the use effect i can do is i have all i've done very simply here is i've just made a a math.random so it's going to generate a number between 0 and 5000 so this is uh the code so it's going to do this and basically what i'm doing here guys is very simple i'm pretty much just doing set speed this and what this will do is whenever the sidebar chat loads it will calculate some random one and it will basically go ahead and use that for the icon so this is an example of just it's going to generate random ones for every for the room every time i need to go ahead and import you state there you go arjun thanks so much for the donation appreciate it hey let's go yeah nice and now you can see that hey we got we got random avatars for every room right where oh yeah we do we do look at that yeah nice his girlfriend is already giving him too much love it's so funny we have people like hey i'm a bit i'm a fan of i'm the number one fan of kazi i'm not a number one fan of sunny i'm the number four one fan of nas it's like so many people it's amazing man i love the love that we have in the specific in these comments man insane stuff hey nice okay i can see everyone's saying i'm put i'm gonna find i'm gonna find somebody oh man it's like i'm the number one friend of sonny that's my girl nice so now let's go ahead and carry on so we've got the seed which is generated randomly which is why even if we're refreshed we'll get like a different um avatar every time so just kind of a little cool trick for this demonstration and yes i know it's going to be different every time it was a bit of fun that's why we did that so now what we're going to do is we are actually going to go ahead and make this so that it accepts some props right so we want this to actually accept some props so at this point we have the room name and last message actually for now we don't need to worry about that we pretty much have it let's go ahead and style this so it looks nice so i'm going to go ahead and we've got sidebar info there we go uh yep so nice so i'm going to do is go ahead and decide by chat.css awesome and i'm going to go ahead and start this now so sidebar.chat and what i'm going to do is first i'm going to say for sidebar chat i want it to be display flex so display flex like this and i want to say uh padding of 20 pixels right so it's padding at 20 pixels and now we should see everything goes into a row and it's got its own little bit of padding right now i want the background color to be i want the cursor to be a pointer so i want the cursor to be i have a little pointer type which means when you hover over it should be a little finger and i want a border underneath all of them to be uh to be a little sort of gray right so let's go ahead and add that in and we should see now that every single one will have a little border underneath it hopefully so look at that you guys see that you guys see that right here let me see that right here it's like it's so it's so minor but you can see it right here hold on let me know i did add a border right underneath it just it's like it's like very my hair i'll do i'll do like a command plus something they'll do you can see right here okay yeah right there hey that looks so crisp and awesome nice nice so now what we're going to do is i want it so that when you hover over it it gives it a different color so we can use a hover property here so we can say when you hover give it a background color and this is like the slide this is the gray color that they give you um when you hover over something inside of uh react so inside of whatsapp sorry so now if you hover over those uh fields nice oh look at that oh that looks so good oh i just want to keep covering them nice nice yeah i like that that's really cool yeah so now oh why is mine i mean is my auto save on i think it is once a preference is because it keeps basically saving i think oh no it's not it's not what isn't that supposed to be saving i just keep saying compiling compiling compiling compiling you can't handle the amount of energy that we're just giving here man i know right it just needs to keep it man somebody goes sunny looks like ross from friends honestly maybe you oh my god i've been told like i'm kind of like ross from friends but that's so funny oh man and you kind of speak like him like him too i mean without the british accent but um you know yeah the voice just the voice is deep you know what i mean that's so funny even mama because he behaves like ross trust me that's so funny that's insane oh man shots are being fired awesome so now what we're gonna do is we have four we're gonna start with the h2 tag right so the h2 tag you don't want it to be looking like that so i'm gonna say inside of the sidebar info so sidebar chat info i'm going to target the h2 so target the h2 and i'm going to go ahead and do font size of 16 and margin bottom of 8 pixels so it gives you a little bit more room to breathe right and then we save it and now we should see okay i gave it a little bit more space and then what i'm going to say is the actual sidebar info so the stuff that has a text inside of it give it a margin left to 15 and we'll see it push away from the uh the text so now if we do that you can see now it's pushed away from text so it gives it a nice little fill and we did show when you hover over it right yes we did so yeah right here as i have already right here oh right there see that awesome nice so now what we're gonna do is uh even even frank's jumped in hey someone has my back bojack kate says that explains why he's so cool i think west is cool dude [Laughter] oh man that's hilarious it's so funny okay that's dope so now what we're going to do is we're going to have it so that um we actually can we can we can customize it so i want it so that if i pass in a prop called add new chat right this sidebar component is going to be reusable so here's where we pass in the props over here right um someone goes nas you're joey wait what really and you know i can see it a little bit i can see what all right fine okay i can i mean it's not bad it's not bad i like it okay okay here we go add new chat like this so now i'm going to pass in a prop called add new chat when we pass this in i'm going to conditionally render this component so it looks slightly different but keep some of this styling right so what i'm going to do is here for the first one i'm going to say this is an add new chat sidebar right so i'll add a new room add new chat that's the sort of functionality that we're going for here and what i'm going to say is before we return our jsx i'm going to say if it's not the add new chat so if it's not the add new chat then i want it to basically show the normal stuff otherwise render out the following and i'm going to basically do this i'm going to have the following i'm going to say render out a div with a class name of sidebar chat so we want to keep the styling the same and when we click it i want to execute some function called create chat which we haven't covered up at this point and it's just going to have h2 inside of it saying add new chat right so at this point if i go ahead and just create a function called const create chat this and then basically what i want to do is just at this point just say uh we can just leave that blank for now so if i save that we should come back and see so let's refresh low cost refreshing uh there we go you see add new chat right yep oh right there wait where you see on top of where it says room name oh right there there a new chat okay okay cool cool you see it's still got that um it's still got that stuff right there yeah yeah yeah add your chat rooms cool yeah and it fits in line with sound we're just reusing a prop yeah so we're just raising a prop here so now what we do is when we click that create chat i want a pop-up to come up which says um please enter a name for the chat so in order to do that it's very simple we just say const room name so i'm going to store the response in a variable called room name and then here i'm going to say prompt please enter a name for chat and then what i want to do is i'm going to say if yo we broke 2 000 likes guys my god dude insane stuff thank you so much we love you all love the support let's keep this going um yeah let's get it to three let's get to 3k let's go to three dude let's go to 3k are you guys ready to get a 3k yeah get your family on board get everyone get yourself get your brother get your sister get your friends you know get bring your friends over or be like okay yeah yo sit down let everybody sit down let's watch sunny and nas kanji said hit the air horns i think i want to hold on but for some reason my stuff is not working my sound effects are not working i don't know why i keep it here wait wait well now before we go i got the perfect gift for this ready ready for this oh my god wait wait as you said that carol ramirez just said keep it up and he dropped 10 u.s dollars dude no way guys by the way i know you get you can't you can't see you sonny but let's just say there's a really funny gif right now playing that that that yeah oh here actually i'll show i'll show you the gif here here's the here here's the gift trust me right here oh nice this is the gift all right guys we just hit officially over a hundred dollars in donations that's insane that's insane so much guys thank you so much all right let's keep going strong guys so now we're saying if we click that i hit that add new chat uh uh button what i want to do is i'm going to prompt to get room name and then if only if they entered something in the room name i want to do some clever stuff here so do some clever stuff in the database here all right so we'll come back to this point uh here so i'm just leaving a little note here do some clever database stuff here okay nice so now if i go ahead and hit save on that now we should see uh so nice i want you to click on add new chat okay i see cool you see yeah so it's awesome let's go ahead and type anything it won't actually do anything it will just close but we actually capture that variable inside of room name so dancer dance room exactly all right and we basically and eventually the goal is that i'll pop in and say dance right okay so nice so with that said i think what we're going to do is we're going to sort of break this up into different components but now let's go ahead and add the chat so let's add the chat let's get that started and then we can start wiring everything up so it starts to work in the fashion that we expect right cool cool so inside of app.js what we're going to do is just go back to our sort of notes and here we've got the chat so let's go ahead and create the chat right so chat like this boom go ahead and remove ours and you see guys this is clean it's really nice way of doing that so really handy sort of thing to get used to i'm going to create a chat.js component and i'm doing rfce boom like this and let's go ahead and do a quick set up so we say class name equals chat and then here i'm going to say oops class name equals chat and then we're going to say import chat dot css like this save and there we go and now what i'm going to do is this chat is actually going to render out oh do that create oh no i didn't create a chat dot css so chat dot css chat dot css boom like that i'm going to go ahead and save that and inside of here now what we're going to do guys is i'm going to say chad.css and remember guys i actually spoke earlier about how we wanted to we used the 35 so 0.35 to get uh 35 of the of the screen on on the using that we wanted the sidebar to use 35 center screen but for the right side the chat i want the chat to go ahead and use flex 0.65 and what this will do is we'll use up the remaining 65 of the screen so to prove that this works we can go ahead and do background color uh let's just say blue save it and i can save this one and if i save this one as well so it's pulling in so the chat is not behind the chat yep so i need to import yeah yeah so you can see right here guys you just import the chat boom right here nice and then here's the chat so that's what we're working on we're working on which is this specific section right here guys exactly and can you see now that it's using up that perfect 65 in the screen right so the blue is actually really nice to visualize that i like that that's really clean yeah yeah really really nice way of showing that right now what we can do is we actually want to sort of go ahead and make this look a bit nicer so inside of chat so i'm going to just double check one note so we've got inside of chat we have a few sections so again guys what we've done before we're going to do the same here so we've got we're going to have a three divs the first one's gonna say div and it's gonna say chat header right so this is going to be the top section of the chat inside of here we're going to have what what the chat room was um when somebody was last seen those icons that we see all of that stuff on the top then we're going to have the chat body right then we're going to have the chat body now the chat body is pretty self-explanatory it's all of that stuff in the middle right it's all the stuff where the actual chat exists right and then we're going to have the chat footer right so dev chat footer yeah right now the chat four is where we're gonna have the input field and all of that stuff and that's where that's gonna live so now that we have that in place let's go ahead and start filling this out a bit so let's focus solemnly on the chat header for now and what we're going to do with the chat how do we see an avatar so let's go ahead and pop an avatar inside of there i need to import it at the top so i went and did that at the top i'm going to do this and save so everything gets pretty fired and let's go into our local host oh my bad hold on i'll show them some stuff right here okay yep and you can see we've got that little avatar right yep right there i see it awesome right so i'm gonna go ahead and do that uh and then what i'm gonna do next is actually go and say uh so i actually used the same the same seed trick here to get like everything sort of up and running so i'm going to quickly implement that so at the top i'm just going to do um so it's basically the same thing we did last time so we have the seed and then i said i made a use effect which basically ran with the component loads and then inside the avatar what i did is set the source to basically be one of those randomly generated urls okay because what we're doing is here i just want it to be i didn't want to spend too much time on this portion of it i just wanted it to be very simple so they showed uh an advert for um this part of it so i'm gonna go ahead and import so i'm gonna do this use state and use effect and guys you can connect this all to the db that part of it and pull those in but for this i'm just showing you so that is it more simple so we can go ahead and do that and now we can see we've got an avatar in there right that's much nicer than looking at that boring one um so now what we can do is we've got the avatar and i'm going to have a another div inside of the header and this div is going to be called the div header uh info so header chat underscore underscore header info and this is where the text lives so inside of i'm going to have h3 and this is gonna be the room name so i'm just gonna say room name for now and underneath that i'm gonna have a p tag and this is gonna say something like last scene last scene uh blah blah blah it's gonna have some kind of date there last scene let's just go ahead and save that and we should see at the top now it should pop in so um you can already see it's kind of getting hard to see with that blue background so i'm gonna go ahead and remove and there we go so now we can see it very clearly all right so we've got the last scene and then what we're going to do is on the right side because we've got loads of icons grouped up on the right remember we've always get we want to get into this habit of constantly having everything inside of um inside of its own container so in this case what i'm going to do is create a div i'm going to say header right right so chat sorry chat header right so header right oops like this right and this this again has three icons it has uh a search outlined icon so it has a search outline an attach file and a more so three dots and what i'm going to do is i'm actually going to go ahead and wrap those like we did earlier inside of icon buttons so inside of these icon button um containers and what that did remember if we saw if we remember from earlier that actually just went ahead and made it clickable so that gave us that nice ripply effect so what i can do at the top is i can go ahead and import those things save the file and what we can now see is you should have three icons okay and they're all clickable right okay okay cool so that's awesome so we can see those things right there and that's really nice um but we it's not still not looking the way we kind of want this to look so what i'm going to do is i'm going to go ahead and style the chat header right so i'm gonna make the chat header look a lot nicer so to get that working let's go ahead and open up our chat.css and i'm gonna go ahead and say the following i'm gonna say chat header and i'm gonna give it a padding of 20 pixels firstly because nothing likes to touch the sides so 20 pixels i'm going to give it a display flex so that way it's not block and everything's stacking up on top of each other we want to be in a horizontal row like that then i'm going to go ahead and say align the item centrally in case they're off center and i'm going to give a border bottom of one pixel and it's a light gray color so let's go ahead and go ahead and add that and we can see there we go it added that light grey right so again you can see it's things start to come together quite nicely yeah then the header info so i want the header info to actually go ahead and use up most of that room there so i'm going to go ahead and say flex 1 and give a padding left of 20 pixels so let's go ahead and do that and you can see now that goes ahead and pushes the rest of the stuff away right header and if we're talking about this one specifically right so header info is where we say room name and last cena that's the this one specifically okay from here got it got it we changed that to be flex one so it basically becomes the boss and it takes up all the room got it it's the boss now i'm the boss now so i'm gonna take up the room that's what that div is saying oh my god we've got 2 200 likes on this video so far holy crap holy moly guys guys come on we can get it to 3k you got this yeah we can get that to 3k we can definitely get that 3k you'll yell it out the window if you if you have to you know exactly just tell the entire street exactly so now we're going to target the h3 here so we're going to say h3 and we're gonna go ahead and do margin bottom of three pixels and a font weight of 500 so that's that goes in line with what whatsapp have um so let's go and do that and then boom it gives it a less bolder bolder look and then we're going to go ahead and do the same thing for the p tag but i'm just changing the color of the p tag to be gray so it says last scene that should now turn gray that's nice and then for the header right what i'm going to go ahead and do is say display flex so all of those icons are going to be in a row i mean they look like they're in a row right now but let's go ahead and ensure that they stay correctly and we're going to give it a min width of 100 pixels uh let's go ahead and do that and you can't see the difference when it gets smaller it's actually kind of hard to actually so it will show you that when it gets to smaller so without like many ways i okay i see what you mean okay yeah so give it a minimum width there we go nice and you see i really do love that place items so you see that that it just set everything up so when i see that like what are you talking about what are you talking about place items so remember the actual uh the sort of amount like the whole card that the app is essentially sitting on remember we use that display grid trick in the beginning yeah yeah it's just it's such a nice trick because even when you make it bigger everything kind of just you know resizes and yeah it's like it's like it's almost like mobile friendly and it's that stuff friendly yeah yeah i agree yeah like that combined with flexbox you just get some just amazing responsiveness what's up you got a competition right here i know right it's crazy so now we have the header right and then what we're going to do now is go ahead and create the body okay so the body is a bit more interesting it's one more where we're going to sort of get a bit nitty gritty with this sort of a little trick i'm going to show you guys so for the body let's go to chat buddy and what i'm going to do now is i'm going to go ahead and say so i'm going to actually start the chat body first before i add anything inside of it so i'm going to go here i'm going to say travel tools thanks so much says it says love your teaching sonny thank you so much dude thank you so much we appreciate that i appreciate you watching and being here so thank you so much um yeah so now we have the chat body where am i looking where am i looking looking chat buddy here we go so the chat body now what i'm gonna do is every child so we have the those three sections that we basically added the chat header the body the footer i'm gonna make the entire container follow the following follow the flex rule so it's going to say display flex and i want it to not be in a row because if i do this now you'll see that everything will kind of jump into a row i made there because it jumps into a weird sort of state of mind so you're going to do that yeah and that will do it and then chat body what i'm going to say is the chat body i'm going to give this this is the background image of whatsapp so i'm going to go ahead and pop this in here i'm making this background image uh you might need to do word wrap nars for this i'm doing it so for some reason it keeps it keeps toggling and untoggling i don't understand why it's like yeah i think it might be a case of setting it inside of system set preferences but yeah it might be all right yeah so if i go ahead and save that what we should do now is it actually has set the container to be the the correct size but the containers right now is flex so it's not going to use up any space so if i go ahead and do flex 1 it will take up the most space it can and we should see it at this point oh look at that nice right yeah yeah that little nice background right here and where did you get this background by the way uh that was just off google images it's the whatsapp default background so whenever you sign up to whatsapp you have this like quirky little background in there on it so that's the one that they have nice nice nice ad beautiful yeah here we have background repeat background position center padding of 30 pixels and overflow of scroll so i'm going to go ahead and add all of those things and this basically means that if it ever runs out it says on a huge screen size it's just going to repeat the image because it's that kind of background image you don't really care if that gets repeated it feels like some kind of picture then you don't want to repeat it obviously you want to scale it um and we want to position it center padding of 30 pixels there anything inside of it isn't going to touch the sides an overflow of 30 which overflow scroll which means um if we have like a bunch of different sort of a bunch of text we can scroll through it that's what that's going to last you okay so that's awesome uh and now with that said we're going to go ahead and actually go ahead and add some messages inside of that container so let's go ahead and go back to chat go here and i'm going to go ahead and add like a little message so i'm going to say imagine we had a message and it had a p tag of something like this it says chat message and this was like hello oh let's just say hey guys as an example so this is going to be an example message right so it's going to say hey guys and then what i'm going to say is we have so you'll say something like that so you can see it says hey guys right we're gonna we need to make that look like an actual proper message now um so what i'm gonna do is i'm gonna actually go ahead and we're gonna span a few things inside of it so we have a name and a timestamp there we go yep i think we're back yeah okay yeah my mic i think i just knocked out so then just [Laughter] message so i'm going to go here and say chat message and i'm going to go ahead and say position relative because we want to oh oops what the hell was that position relative and i'm going to say font size of 16 pixels a padding of 10 pixels let's go add those in save and i'm going to give it a background color of white and pop this in so you guys can see it's exactly what i'm talking about here so you can see that's the background of that thing right and then what i'm going to go ahead and do is um i think it's white is it yeah i'm sure it's white it's white that's white yes yeah and then we're going to say give it a border radius of 10 pixels so a border radius of 10 pixels a little bit yeah so it gives it like a message fill and then if you only want the width to fit the the the contents right you just need to do width fit content and what that would do is depending on how much text is in there it would just reach that amount and what i'm going to do is i'm going to say margin bottom of 30 pixels that way if we have messages stacked up on top of each other they're not going to be touching they're going to have spacing between them right yeah so where'd you put the margin bottom so i checked that it's on the message so if i go ahead and add a second message like this we'll see it should say hey guys hey guys so once that loads up again nice there we go okay so now what i'm going to do is every message should have a chat name so you should have a name of who sent in the chat because we're doing it in like a group sort of fashion and it should have a timestamp right so for the chat name i'm going to go in and basically about this is where we have the where it says hey guys i'm going to go ahead and add inside of that p tag a span which says chat name and it says message. so in this case let's just go ahead and assume that it's sunny right so sunny sangha or something like this and then the chat name right so if i go ahead and save that now what we will see is it will have like sunny tango afterwards but i don't want it to look like that i want to look like sort of appear like a nice sort of chat name yeah we kind of want to have at the bottom like like like here guys you see that right there that's exactly what i want right there yeah yeah exactly like that yeah so now we're gonna say his chat name and right because i made the parent so i made the message a chat message position relative now if i do position absolute here this will be absolute in in relation to the chat message right so if i say top uh let's just say top minus 15 pixels and what it's going to do is it's going to go minus 15 pixels from the uh from the top of that that's that that uh message right and then if what i need to do then is also go ahead and do um uh that's interesting one second it says chat body what's up pop pop pop chat message chat message i think i've done that right so if we go ahead and do chat message here like this and then we're going to do chat name top 50. if i do top zero let me just double check top zero are you gonna use the display like this trying to position absolute or what i'm just trying to get yeah i'm just trying to position that correctly so if i do a font size of extra small you see it right now it's kind of sticking to the right of it which is incorrect what we need to do oh of course um oh yeah so so i actually messed this up myself i need this to come before i need to come before the actual message so inside the actual layout that's why i went to actually before and if we save that we can now see it comes up there right so obviously that doesn't look perfect yeah we will get it there we'll somewhat make it look perfect um and then what i'm going to do is for the timestamp so i'm going to go ahead 2.3 okay 2.3k likes guys insane unbelievable nice guys that's insane so a few people are saying left zero yeah i know i was thinking f-zero but i don't think we i need that just yet yeah i'm gonna go ahead and add a timestamp span as well and here it's going to basically have a time so let's just say 3 52 pm or something like that right so for the timestamp i'm going to go ahead and go to chat and i'm going to go here and i'm going to say for the timestamp give it a margin left of 10 pixels and a font size of extra extra small [Music] like this so now if i save it there you go so that's there correctly and nice and then on that side we have it like that so that's awesome i'm going to open this up in my local host as well so i can go ahead and check how this looks because not entirely sure why it's looking like that one sec because it says okay so this is because we have done so looks we've got the chat message padding 10 pixels adding 10 pixels and then over here we have chat message p tag chat message chat receiver okay interesting i mean we can start out afterwards we can fix it yeah it's fine are you trying to style are you trying to put it more up top yeah i mean what we could do is oh sorry this is why do top negative identities minus 15 pixels yeah yeah hey there we go nice that's it awesome dude that's nice and then what we can do now is like imagine this entire thing would be one message that's how we kind of see it right but we also have a variation right so i want to have it so that if i was to add another class name so chat message but also chat receiver i want it to have the same styling but i want it to be blue or like whatever sorry whatever color it is in whatsapp i think it's blue um well it's like a green maybe but especially i want it to be like a like a kind of green but then on the right now this is simpler than you might think so what i can do is i can go here add the following i can just say chat receiver oh like the one on the right is green and okay you guys see that right here right there yeah yeah yeah so this is white and it says green yeah yeah okay i see yeah cool cool so what i can do here to get that to work is i can say margin left auto and background color green like this little green here this is the whatsapp green and guys look how easy this is as soon as i save this boom hey let's go damn that's all right right like so now what we can do is to make this very clever is we can go ahead and change this to a uh like a javascript javascript kind of string so string interpolation and i can basically go ahead and do this i can go ahead and say uh we can put this inside sort of a condition and i can say only add this class if if some kind of condition is true right so i'm leaving it as a true for now but we're gonna we're gonna come back to this point and say like if it's the user who's signed in then this will get evaluated to true so he's gonna be sending the message so his message should come up as green right otherwise if you're not signed in so nars if you go on to the deployed version now and if you type a messaging no it's how all of your messages are in the green but everyone else's messages are in the white i see i see i see okay that makes sense and so you're trying to figure that out based on who the user if the user is logged in or not yeah so we're going to come back to that point and actually go ahead and uh by the way louise thanks so much for the five dollar donation i'm not sure what that is but he says hit this he says thank guys so thank you guys for motivating me to learn more and more i'm just one brazilian developer that starts to follow the channel and this week amazing projects of course uh appreciate donation appreciate your kind comments amazing thank you so much dude for that massively appreciate you watching uh yeah so that's awesome we actually have the sort of uh message bit done and what we're to do is eventually so this this message right here is going to basically be we're going to map through a database go ahead and get some messages and then just render this out as many times as we see messages what is this sorry so this true right here where this true will be coming from so this true will eventually so the actual thing that we're going to have is once we pull it from the database you're going to see this expression here ah yes it's going to save the message name is equivalent to the user's display name so that's what you log in with then we render it as you're the receiver got it got it all right okay cool and this will render to true or false but for now we're just going to assume it's true right whoa jessica jessica 20 is that mexican dollars i don't know that is i'm so horrible this uh i never know just like 20 money 20 money yeah costly catchery says is this also responsive yes it is responsive jessica thank you very much nice thank you um so now what we're gonna do is we have the chat footer right so we talked about everything else let's go ahead and finish the chat for and then we can go ahead and wire this stuff up right so what we can do is we can um [Music] well so now what we can go ahead and do is actually go ahead and fill this out so uh on the chat for is this go to the deployed version us yep and on the deployed version on the footer you can notice how we have the emoji we have the input box and then we have the microphone right yep so is that that emoji yep exactly so that emoji is known as the insert emoticon icon the mic icon is known as a easy enough mic icon and the um middle is a form right so the middle is a form so here yeah form like this yeah and the reason why i've wrapped it in a form is because it's uh we want to have that enter functionality right so i'm going to chuck it in fold here and let's just put input and let's just have a button which says send a message guys so guys i just want to say just want to say guys 2.4k likes nice dude also guys apologies if your message gets uh deleted because you wrote in all caps uh sometimes our sort of automatic automated bot might get rid of your message so try not to write in all capitals otherwise uh it's a bit sensitive and it kind of it thinks you're screaming at us yeah i think it makes you do something bad or spamming spam yeah don't worry about it yeah just yeah nice um so now what we're going to do is we have that input field so let's go over to our localhost okie dokie host oh locos is broken oh nice that's exactly what we wanted let's go juicy and now we're gonna do the top i'm gonna go ahead and import those two missing dependencies and we should see oh man it's too easy there we go so with that said the app's done guys i'm joking i'm joking all right adios let's go ahead and style this now so the chat footer right because that looks horrible um i'm going to put up in the corner somewhere chat footage so i'm going to go ahead and start this say chat footer you guessed it we're going to do display flex because we love that stuff and then we're going to do justify content space between because i want each of the children inside that container to be spaced apart i want them to be centrally vertically aligned so i'm going to say align item center and then i want the height to be 62 pixels because that's what they have on whatsapp and i want the uh border top to be one pixel solid light gray if we add that in there you go gives it a nice little effect right so now with that said what i'm going to do is go ahead and add the following i'm gonna say um for the form i want the form to take up the most room right so i want the form to take up the majority of that space so let's go ahead and do um [Laughter] are you laughing well i thought sunny's so handsome is that that one which one wait how did look at that i agree with that guys nice uh so you've got chat footer is greater than form i'm sorry chat footer is we're targeting the form we're saying flex one and we want the form itself to be display flex so i'm going to go ahead and save that and then we can see now it's actually taking up the majority of the room so if i actually go ahead and visualize this and say background color and make it blue for example now you'll see it's actually taking up the majority of that space right so it is taking up majority of that space and i will get rid of that in a sec but what i'm going to do now is i'm going to say target the input inside of that form then i want to do flex once i want the input to take up the majority of the space um like this do you want to flex on the input correct yep so i'm going to do flex 1 on the input field like this and then i'm going to do border radius of 30 pixels like this so let's go ahead and save that uh and there we go you can see like it's taking up more of that space and the input field you can see it is uh it's got that rounded sort of edge whoa tony neary thank you so much dude thank you tony awesome thank you so much so we have the border radius day pixels and then i'm going to give it a padding of 10 pixels i'm going to get rid of that border and with that i'm going to get rid of the background color because we know it works right so we don't want to do that so do that and boom we get that okay now guys there's a very nice little trick right so whenever you have a form you have some input yeah so firstly let's go ahead and give the placeholder of that input some value because it looks horrible like that uh let's go ahead and do this the type of message that way it sort of gives it a bit more ui so let's do that so now whenever we have this kind of thing right if you want to keep the enter functionality but you don't want to have a button which says send a message you basically you need to include the button in your code but it's a very little neat trick that you can do and it's kind of like like this or how can i do it all the time and it's the easiest way that i've found to do it you basically go ahead target that button and all you need to do is display none pull that button and you actually keep the functionality of the submit so you can actually still do enter to submit but you actually get rid of that headache of um of uh of having to sort of do like detecting when the user hits the enter key and all that rubbish so you don't have to worry about any of that so that's really handy and what i'm going to do also is i'm going to target the icons so go here and target the icons and say give them a padding of 10 pixels and a color of gray so let's add that in and we should see boom gives it a nice little finishing touch nice yeah so with that said now let's go ahead and let's hook up that form a little bit so the form whenever you type a value inside of there so firstly every form has to have some kind of submit so what we've done even though we don't see the button it's going to represent the submit right so you have to give that a submit um and then what we're going to do is we're going to do on click which means that when you hit the enter key it triggers off some kind of function this function we're going to call it send message because that's what we attend like intend to do when we hit the enter key so send message is going to go up here so i'm going to go ahead and make an empty function so called send message and that's just going to do the following and we can pass en as an event awesome and then what i'm going to do is for the input field so we want to keep track of what the user says nas is typing a message in inside that input field we need to keep track of it inside of the state inside of react so that we know so that we for example when he hits the aniki so we can push that into a database we can do whatever we want with that value but in order to do that we need to store it in state okay so in order to keep it keep it in state what i'm going to do is i'm going to create a piece of state called input so like this i'm going to say const input set input and i'm going to give it a default value of empty then what i'm going to do is i'm going to say the value of our input field is that input variable that we just set up and what i need to do is i need to actually keep track of so every time nas types into that box we trigger an unchange right unchange is something where basically it gets fired off every time so we get some kind of event gets fired off so e right what we can do is we can say set the input so update the input variable with e.target.value which is basically the latest um entry that nars is basically typed in so now when we do this every time he types in one it should be updating on on the screen so as he types in it should update and type a message so let's go ahead and tap something this is a message nice so you can see it's updating on there but it's also stored in memory now so now input is also a variable that we can actually reference so when you say it's updating it's actually updating you're saying in the input you're talking about correct yeah okay got it got it so it's updating and it's mapped to our input variable which is inside of the state right got it got it so it's actually saving right now is what what's the big difference exactly now it's actually saving to that variable which means that when we come to use it we can do something cool with it right so what we're going to do now is we need to do something like this we need to say e dot prevent default e dot prevent default oh you don't prevent default like this and then i'm going to do console.log and this is just this sort of test right now i'll say console.log you typed i'm going to say input like this right so now now if you open up the inspector type in and hit the enter key the e dot prevent default will stop it from refreshing and it should actually say you typed and then it will show you where you connect inspect okay and then i do go to console yep [Music] yeah that was awesome that is awesome yeah so that will get working in a really nice way uh camiron ibrahim says are you storing the messages on firebase later yes we are we will be connecting everything to the database in a sec but yeah now if this was sort of that this is the sort of foundation to get everything sort of to the point we need it to and then we can go ahead and introduce the back end so that's awesome so we actually got that working nicely now um okay so i think at this point what we can do is we can actually go ahead and introduce the sort of introduce firebase so earlier on uh nars went ahead and got the firebase config from firebase right thank you nikhil verma for uh for that lovely donation he says keep it up we definitely will dude we definitely thank you thank you yeah so uh here we got the firebase config so before we carry on we need to open up the terminal so let's go ahead and pull up the terminal okay some people are saying some people are saying don't show the config guys it doesn't matter with firebase you're actually protected when you show this config so this is public information you don't actually need to worry about hiding this um it's completely fine to show that and then what we're going to do is we're going to open up the let's open up your other terminal now so right now you're on the main let's do this one right here okay three got it yeah awesome oh wait somebody actually said a good point there's clean input after the message so yes before we forget very nice yeah true that let's go ahead and do set input as empty and what this will do is whenever nars hits enter it will go ahead and clear the input which is what we expected to do really nice kataro who picked it up yo hey nice nice nice nice nice i love it awesome really nice so that's clean so that's really nice and now what we can do is we can go ahead and do app so we've got this let's go and do okay so firebase right so we've got the command line open so let's go ahead and do uh command j and i'm gonna do mpmi firebase so we're gonna install all of the firebase dependencies into our project um and with that what we're gonna then do is actually go ahead and do the following so i'm gonna say import firebase from firebase at the top and then what we wanna do is we need to initialize the app with that firebase config so this is how we do it we say uh firebase dot initialize app and we pass it this config object right so we pass it the config object and we basically store it in this variable called firebase app now what we do from that point is we create a new variable called db which is basically going to access the firestore instance of our uh of our firebase in like sort of configured instance or however you want to put it basically it gets our database and then we're going to go ahead and also get a authentication handler so that's how we do that we basically say firebase.org and this will be responsible for when we come to do our authentication part and we also need this this is for google's authentication we say cons provider equals new firebase.auth.google auth provider and this is what we're going to use when we actually go ahead and do that google authentication and now to export the stuff we need i'm going to go ahead and explicitly export the authentication and provider and then i want to do a default export for the db because we're going to use the db quite a lot more than we use the author provider and if you guys aren't sure what is um what the difference is there then yeah you guys can check out exporting things explicitly and implicitly uh in in your own time which is nice um so now what we're going to do is save this we have firebase brought in so we can actually go ahead and start to use this stuff so let's go ahead and open up firebase notes all right so firebase boom right no right here this one yeah let's open up firebase and let's go to firstly let's go to authent uh let's go to database okay so database we are at 2.5 k likes dude guys insane stuff and also i know if you know but we are constantly at around 770 to 800 people watching like non-stop we've been going at it for about two hours now and non-stop 800 people guys inside it's just mind-blowing like insane insane um so now what we're going to do is in the fire store let's go up to the top and let's click on create a database so at the top of this i'm going to i'm going to hide my uh little screen here so that people can see it hold on uh so quick database yep all right and what we do now is we click start test mode turn test mode next awesome all right all right and then this is fine as well so done yeah so done thank you zia rachman for a nice little donation awesome thank you so much appreciate it uh nice and then provisioning fire so so this will actually go ahead and create the back end for us now what's amazing about firestore guys is it's essentially the best of sequel plus no sequel it kind of took like a bit of a bit of like interest from both but it kind of is more based around nosql and basically you just get like this super powerful real-time database right so it's a real-time database very very powerful stuff um so now what we're going to do is click on the start collection okay what should we name it right so let's go ahead and call this one rooms so this is going to be all the different rooms that everyone can be inside of right okay so what is the field yeah so inside of here we're just going to have name so the name of the room and let's go ahead and add the first name let's just call this the the dance room [Music] dancer right and what you want to click is auto id at the top uh this way okay yep and then click on save and that's it okay so i don't need i do not need another one so click save yeah beautiful so and now what we've done is guys i imagine there's a simple way to look at this is rooms is just an array it's like a list right it's a list of all the rooms that we're going to have and then you can see the first room that we have it has a unique id and then and basically a property of it is the name property so we have dance room right yeah so what we're going to do now is we're going to use this to basically go ahead and let's create let's add a second room now just to sort so that way when we actually click add document right and that will add a second room and then we'll do room right and we'll say this one let's say i'll do this this one's name the field is name oh my bad my bad yep and then that one will be should we call like developer room yeah let's call it developer room yeah developer the room yeah like that awesome nice and let's click save actually we'll call it devroom yeah yeah there we go so now we have two values inside the database right so we just set up firebase so we've done all the config for that and what we're going to do now is go ahead and go over to the um let's go let's actually connect the sidebar right so sidebar we previously had i don't know if you're following me knows uh i think it's i will right now yeah i am following you actually oh yeah yep yes oh yeah um right are you let's see there you go you're on firebase.js right oh right sorry i was in the i was in a different editor yeah sidebar that yes there we go sunny now you've outside you've got the sidebar over here sorry now so here i'm i i naturally had everything sort of hard coded before i don't want to now put it in from the hard coded stuff i want to basically map through all of the sidebar options with all the different rooms right i want to say like which room we're in and stuff like that um so what we're going to do is we're going to go up to the top and we're going to say the following we're going to say i'm going to create a piece of state called rooms so i'm going to go ahead and do the following and say const rooms set rooms equals use state and this is an empty array and then what i'm going to say is i'm going to use a use effect so i want to basically when the sidebar component loads i want to shoot off a piece of code right and i only want to do this once because i don't want to keep attaching like real-time listeners because it's going to make my browser super slow and you don't want to do that right so the way we do that is we add these empty dependencies here by adding the empty brackets here it says run this once when the sidebar component loads and once only right so here what we need to do is we need to say db so i'm going to import db from uh from firebase so this one right here so import db from firebase and this is our local firebase not the module firebase so this is local firebase so db.collection and here what we're doing is we're saying go to the rooms collection so the one that nar's just created yes that room's question and then i'm going to say on snapshot so on snapshow is essentially saying like imagine you you're looking at so literally as nasa's screen is right now imagine like you had a camera and you literally just took a picture of that database right so of that list so the list of rooms inside of it that's what we call a snapshot right but it's also the snapshot is also listening for changes right so it's not just like hey it says a picture but this is uh this is also saying on any uh changes inside the snapshot also run this code yeah so imagine like if if we add something to it we change anything in here we delete anything it takes another snapshot like basically you grab that camera take another snapshot and it gives us the new snapshot so it's error it's real time so every time it gets updated we get the latest snapshot right and what we're going to do is we're going to say set the rooms so set the rooms in this case and what we need to do at this point we need to go through that snapshots we think snapshot.docs so docs is referring to the list of the elements that we had in the database so we had two and then i'm going to say map through each one and for every doc i want to do the following so this is a bit where you guys are going to have to stick with me so i'm going to say return and observer like directly return an object right and this object i'm going to get it's going to have an id and that's going to be the doc id so this is the doc id is basically referring to the id inside of firebase so if you go to firebase notes okay right here boom not download it okay yeah so those unique ids that you see in the middle right that's what we're giving the id here and then i'm going to say data is going to be doc.data like this right now what this is doing is it's basically creating our own little uh object with an id and data right uh and also whoa we just got a bunch of new viewers jumped in that's that's amazing nice thank you uh thank you yeah that's awesome did see we actually got people coming back in um nice guys guys keep playing that keep hitting that like button you know youtube is like oh you know you know they're getting it they're getting it so they're gonna keep recommending us so guys just like smash it exactly guys if you haven't already and you're enjoying this content literally go ahead and tag me and nars on instagram and share a story on instagram and that will help more people see it i'll get all of the people who follow you to watch it as well so go ahead to the right side you want to go to the right on the other side no you're not now you're too far off i was just pointing at my yeti oh yeah remember that one this over there all right let's continue on nice um awesome so and now what we're going to do is we have uh it says use state is not defined so i need to go ahead and import that so you use state is not fine and what this will do now guys is it will actually create a real time listener for uh snapshot and it will basically update the rooms with those with those properties right so what what does that mean what can we do with that information so now what we can do is we can say at the bottom here rather than hard coding this stuff out here i am basically going to do this i'm going to go ahead and say rooms dot map and we'll say for every single room there's an arrow function implicitly returned so we're telling it to give us like a return we're going to say return a sidebar chat component and here's what i'm going to do i'm going to go ahead and say whoa we just hit 2.6 likes if we can hit 3k likes oh man that'd be insane so i'm going to give it a key so in react the key is used for performance i'm going to use a key as the room id so i'm going to go ahead and do that i'm also going to give an actual id to the component and that's going to be the room id and i'm going to give it a name so the name of the component and this is going to be room dot data dot name right so that's when we refer to room.data.name we're referring to the property that nars added inside of those database fields so the ones that were like a dance room and those things so now we passed in props right to sidebar chat how do i pull this information in in the component so if we go into sidebar chat remember we had a prop here called add new chat so in order to pull it through what i need to do is add the two props i've added here so id and name right so we've got id and name over here and what we can do is instead now right we can basically go ahead and rather than saying room name i can go ahead and just say name yeah and also for the id we will use the id in a second i'll show you where we use the id in a second but now if i was to go ahead and click save what we should see is rather than seeing room name on the left we should see the actual names being pulled from the db so it will go ahead oh let's go hold on hold on guys guys i got it i got it i got a dj air horn on here hey you can't hear sonny but they can't amazing oh no nice you're actually uh you're you're updating the titles oh yeah awesome that's dope dude you're doing cajun style because it kind of gave me a challenge i'm like all right i'll chat i'll challenge you yeah we even got the video in the middle of that's the first yep yep i didn't know i keep moving it around i don't know where to put it because it's just it's kind of cool in the middle yeah i kind of like it too yeah kinda like it too yeah nice so now what we're gonna do is we have so we have the okay yeah so this is this is a really cool part guys so what i'm gonna do now is where we had add new chat right so when we did add new chat what i'm gonna do is go ahead and we had the add new chat functionality here so we said when we click on the add new chat button so on click right um what i want to basically say remember we said we that prompt came up which said uh please enter a name for the chat room or so please enter the name of the chat uh i'll just go ahead and say chat room there we go and then it says if you enter the name in here i'm going to say db dot collection so remember nas was actually adding those things in manually right but what i'm going to do here is we're going to make it programmatically add it in so i've imported the dbn as before we're going to say db.collection rooms yeah and i'm going to say add right so whenever you sort of uh enter a prompt in or something like that i'm going to do that and i'm going to say add something with the name key and basically we're going to use the room name so this is what we actually entered into that prompt right enter the room name like that now if we save it you'd be amazed that's all we needed to go ahead and do that right so now if you go to add new chat noise go ahead and tap on add new chat for me and let's go ahead and write a name in here for a room a chat room guys what's what's a good name let's call it let's call it epic room let's do it epic room and now yo look at that that's insane right like it just pops in real time like because this map says listening to that so a new snapshot got delivered pulled it in and it also we literally in three lines of code pushed some information into the database so insane stuff massive power there like so simple yeah so so simple and guys like if you if that was a first for you guys i know a lot of you guys have been i've been watching the streams and you see that stuff but if that's the first for you guys let us know if you found that cool because this is really really um like it's it i i mean every time i use it i always think it's awesome so i think like i'd love to see what you guys think yeah yeah nice okay so we've got that done um and now we're going to say [Music] so now we want to basically have it so this is where react rooter comes in right so react rear we basically want to implement react rules so that when we click on one of those sidebar options like dance room dev room epic room i want it so that when you click it it's going to then basically on the right hand side pull the messages for that room right he's going to pull the messages just for that room um so how do we do that how do we get that working so what we need to first do is actually go ahead and install react router so the way we do that is that we need to go ahead in into the command line so let's go into the command line uh let's do command j oh nice we got sergeant in the house he's awesome dude i think he actually landed a job uh from watching our videos yeah he's inside the prophet javascript yo nice well i'm trying to find it i'm trying to find him here oh yeah right there right there nice i love it i love seeing people who come back onto the uh onto the channel so they're always amazing to see that that's that's nice right so now what we're going to do is we're going to add a react router right so react brewer for many of you guys who don't know is how you enable page reading inside of a react app so what i mean by that is when you click a link or the button or anything like that um it's actually going to go ahead and load um that page so i have a i have a question sonny uh just a really quick one so sajara asked right it's just a really cool one how scalable is this from a production-ready standpoint of every mobile device as everyone will get device gets connected directly with db is this a problem already solved so very very good question um no so there's a few things to consider here so when we use the use effect to make it more optimal i can quickly go ahead and show you something so let me go ahead and show you a very so firstly to answer your question it's it's optimal it will be optimal it can scale you're using um you're using google servers guys so like everything that they've implemented in terms of how you pull the information from the db it's super optimal and you and guys think of it this way if google if just think of it this way if you can can google handle the amount of people that are running through your app the answer is yes like google can have your traffic yeah even if you had a million users tomorrow like of 10 million 100 million they're going to handle your your your load so like let's get this whatsapp clone to a million users so that we get this just you know let's do it 100 million all right a quick little uh uh sort of optimization step for anyone who's interested what you can do is this return something called unsubscribe all right and what you can do is you can actually in a user effect you can do a clean up function so this is a clean up and basically this says whenever the component sort of unmounts or or cleans up you can actually call the unsubscribe and what this will do is it will it will mean that you always detach this real real-time listener uh after it's done using it so like whenever sort of you're finished using it this is a this is a good practice to do so i saw somebody said they like the little sort of tips and tricks that i dropped sometimes with like for example the react keys in an array so this is another optimization step that you can use uh whenever you do on snapchat it returns an unsubscribe and you can go ahead and do that and that works really good yeah nice so with that said let's continue on and let's go to the uh react router dom so what we need to do is open up the oven we've got npmi and we need to do react router dom so this goes ahead and pulls in the thing so while that's actually installing those let's go over to the deployed app right here beautiful yeah and let's click on one of these chats clear the chat yeah so any one of these chats can you see that when you click on these chats it's changing the chat yep right here and it was actually happening here if you make the uh the window bigger let's go ahead and make that full screen yeah there we go can you see the url changes at the top right here see there guys you see that boom right there oh you guessed it that url is actually changing when lars clicks on the sidebar option right just pay attention to that really quickly here see if i click on here or then boom boom boom nice exactly and then what the components doing is it's then saying okay i now have the id of the room i'm in so i know which messages to fetch so we're going to go and show you guys how to do that so sergeant jacob says huh yeah got a client while you guys were streaming appreciate all the knowledge you guys have been dropping here and in pwj that's amazing dude wow no way insane stuff uh yeah amazing congrats congratulations yeah amazing stuff dude and i remember he actually shouted us out on instagram once and that's how we started talking to him so that's that's really nice to see that um [Music] right so now what we're gonna do is we are going to add the yeah so we added reactor dom and basically to get this working in the way that we want now what we're going to do is we're going to add the following we're going to say um we need to add something called a router so i'm going to add a router at this point in the app so router is basically where we tell the app to start looking at the url right so we're saying surround all of this stuff in the the tech that allows us to do that right so that's basically what we're saying here and then what we do is we actually surround uh everything inside of a switch right and the thing is what we can do here is we can say surround everything inside of a switch so i can do this switch and the switch if you've programmed and are familiar with switches you can do like cases right and each case in this case is what url uh you're actually accessing so at this point what we could do is we could say the following we could say when you reach this route so when you hit this route so this is the home screen render out this so i can say at this point i can say like uh home screen like this right and when oops oh yeah i need to do the imports and when we reach this for example just say forward slash test we are going to render the app so let's just do this let's say forward slash app will enter the app and if we're at the forward slash nothing it will render uh h1 saying home screen right so let's go ahead and do that there will be two different pages in that because you're saying correct yeah so this will render the home screen this will render the sidebar and let's go ahead and import everything that we need so i'm going to go ahead and import this at the top there we go save it and we should be able to see now let's see so now it should say home screen ah i see i see okay and now if you do forward slash app now so if i do not see and the guys be get again because it's the fact that we have forward slash app right here and then the root one is just simply the home screen so if i now go ahead simply do uh let's see uh slash app right there go and [Music] boom voila nice dancer devroom exactly so that's awesome what we're going to do now is we're actually going to use this to say regardless of if it's in the home screen or if it's inside of the next bit which i'm going to say so let's do this and then say here so we always want the sidebar to show so what we can actually do is we can push this outside of the roots and this means it will always render the sidebar and then underneath it we're just saying render the chat regardless if you're inside of this or this route so what i'm going to do here the reason why i need this is going to say rooms and i'm going to say i'm going to this is called a wild card and i'm saying room id right so this is saying that regardless of if you're in forward slash room forward slash abc regardless if you're in forward slash abc2 whatever it is that is going to allow you to render this and what the reason why i need to do it like this is because i need to pull the parameter right and we always specify a default route which is why i've just said show the chat if not so so don't show the chat basically when there's no room id's what you're saying yeah got it got it got it yeah got it so what i could do at this point i could actually sort of uh get rid of this so let's go to uh forward slash just forward slash all right forward slash hold on c so if i do just forward slash yeah so you see like it won't actually show the chat right but now if we do forward slash rooms forward slash abc for example okay let's do rooms for slash abc uh is that zero yeah so now you see once we're inside of a room it will go ahead and load the chat and it will load the chat alongside it so wait wait it's not it's not doing it abc did that do it right rooms dash abc maybe it's like one two three four five yeah just try that one yep yeah okay so in this case what we'll do is we will include it in both because i think it actually might it might fall back to the default i mean it shouldn't have shouldn't have fallen out of that but it might be a case of loading or something like that but in this case what we'll do is we'll render it so now if you click on i don't know that's strange that that should be working right now um so we're rendering chat maybe there's a caching issue hold on is it default so it says chat uh maybe do a hard refresh now let's do uh shift command four right yep for some reason uh yeah strange i can't see as well okay so in that case we will debug this but we can see the root path chat sidebar right report repo maybe it's because the the chat ex needs ex needs to accept something um let's go ahead and do router switch [ __ ] hey there we go nice nice there we go awesome so it might have just been a caching issue nice yeah it looks like with that said now what we're gonna do is we are going to go inside of our chat app and if i want to get whatever nars had at the end of the url so whether it was forward slash abc forward slash whatever it was what we can do is we can grab that using a really nice hook right so before that it was kind of a headache to get this but you can actually use a really nice hook and the one that we're going to use is called use params so we're going to import this uh and we import that with right here saying uh columns import use params from react rear dom and here we say const room id and room id has to match whatever you've given here so in this case it was room id here so it has to be room id and this will actually give us that that sort of after what comes after the forward slash so that's cool but now how do i make it so that those links are clickable right so the the sort of uh sidebar chat so the way we do that is we go to sidebar chat and remember guys these ones these links right here yeah okay got it okay so remember we passed in when we rendered sidebar chat we passed in an id which was the id of the room right so let's go into sidebar chat and let's go ahead and actually wrap this in something which we like to call a link tag right so here what we can do is we can say a link to and then here i can use some jsx to basically go ahead and do some string interpolation and say forward slash rooms forward slash id so go to the this room when you click this link right and then i can basically go ahead and pop the entire div into that link and now what will happen is it says link is not defined because you need to import the link so i'm going to go ahead and import this so import link from reactory dom save it and now once that loads up we should be able to see that everything is just like click yeah so everything's the name so we'll sort out the styling in a sec but if we check the link now so you should see that that link actually changes when you click it do you see that guys i'm not sure let me see if they see this so if i if you guys pay attention to kind of the because wait if you guys pay attention to down here just click kind of pay attention pay attention down here before before i before it disappears like if i hover over this you see that link kind of changes right there boom i see that boom so you're talking about the bottom left right yeah the bottom left side you see that guys yeah just pay attention to that so that means that's linked to the specific room which is the correct room that we need to be in yeah exactly so if you click it now it will actually change the url so if you click one of those click it now and if i go ahead and just hide this thing right here like look at this url so click it click it and you can see wait wait where's the url boom let's make the screen a little bigger and we'll should be able to see that yeah right there just like that so i click click click yeah yeah look at that boom that's awesome bump bomb and also guys notice there's no refresh right so right through it does it very carefully that you don't get a refresh so it's really really nice when we do that so now that we have that id right let's go ahead and upgrade our chat component so let's upgrade our chat mode so that it changes and it knows what what information to pull right so what we're going to do is firstly we're going to go ahead and pull the room name so in order what we're going to do is we're actually going to go ahead inside of our chat component we're going to go ahead and create a room name um a piece of state which is going to keep track of the room name and then i'm going to go ahead and introduce a user effect so you can have more than one user effect so i'm going to create another one called use effect and this one is essentially going to go ahead and fire off and for now it's going to be dependent on the room id so the room id is a dependency that because we are going to use any time user variable inside of this block you have to include it in here so basically what's going on is like every time the room id changes we're going to run some functions which in this case we're simply going to get new messages for that room id exactly exactly that yeah or like yeah is that exactly that so yeah perfect and now what we say is we say if there is a room id so we want to protect ourselves we're going to say if there's a room id then what we want to do is um oh nice somebody just joined ai just joined profit with javascript if you're watching this dude that's insane and i would love to see you comment uh down below that's awesome really nice nice congrats or welcome should i say welcome to yeah welcome to our family exactly yeah so here oh look he's there oh nice yes he says i've just joined prophet javascript love your teaching style see you in class guys that's what oh man that is insane it's insane let's bring down this goal that's so cool dude so happy to have you here so happy hold on we deserve an airhead for this one [Music] we just grew the team on live on session guys guys too good too good insane um so now what we're gonna do is we're gonna have if there's a room id we're gonna say db.collection and then i'm going to go ahead and and go inside the rooms right and this is the cover part i'm going to say go into the specific document which is like the specific room and use the room id that is inside the url to find the room and then i'm going to say on snapshot so make a real-time listener for that on snapshot snapshot so he's going to get the snapshot and i'm going to say whenever you get that snapshot go ahead and set the room name set the room name um go ahead and go ahead and set the room name to the snapshot dot data dot name and this will basically go inside and it will then um pull the the data and they'll get their room name right so that will work and then what we can do is we actually need to import the db so i'm going to go ahead and import the db save it and now inside of room name we should have the most up-to-date room name so rather than having a hard-coded room name here let's prove that this works let's change this to our variable room name save this and now we should see we should see if you click on oh look at that yo you see that right there guys check this out look epic room right away we have that and so and now if we change that if i click on dancer for example boom boom boom insane stuff insane stuff sunny guys guys alrighty nice so that's really really awesome um and what we're going to do is just to make it so it's super clear for you guys that it changes rather than doing the use effect from the set seed here i'm actually going to make sure that this one changes every time just because i just realized it's going to be a bit confusing because it looks like it doesn't change every time so would that say oh actually what i can do is i can actually make the seed change every time room id changes so there you go a little trick for you guys so now if you go ahead and click a room now try it dance room hey there we go oh so the outside changes as well nice oh look at that that's hilarious i love it nice so yeah give us some fire for those for those for those awesome avatars i love it exactly yeah i mean i was trying to look because you found a really nice one once and they used the same functionality but i couldn't find that one so i found this like pixelated looking one i kind of like it it just makes it so playful it kind of makes it like light-hearted you know yeah yeah yeah yeah so that's cool so then so now we have that working so what we're going to do now is we're going to go ahead and before we can do the messages we need to basically go ahead and do a login right so the login stuff so the login stuff stick with me guys this is going to get interesting now so i think this is where the 2.7 goes to 3k thank you so much yeah because this isn't crazy stuff right this is where we're going to introduce google authentication into this app all right so google authentication interface and we're also going to be using the react context api so if you guys are interested in learning redux this is your time right now so get excited we're going to teach you guys how to do that right now uh or the redux pattern with read react context api that's it so let's do it so inside of um app.js what we're going to essentially do now is we want to conditionally render this if there is a user logged in right so what do i mean by that so let's go ahead and say let's create like a temporary piece of states let's go ahead and say const user set user and let's go ahead and do this and say use state like this and i'm going to go ahead and say no at the moment like this and what i'm going to do is i'm going to say so at the moment imagine we don't have a user right so i'm going to say if there is no user so let's go and let's imagine that there's no user right now right now um what i'm going to say at this point is so before we have inside of our app we're going to say if there is a if there is no user then i should show some kind of login screen so like some kind of h1 say login yeah otherwise we should show the app right so does that make sense guys so we're saying if there's a user if there's no user show a login screen otherwise show the app so now i'll catch you if we see this uh so you say i need to go ahead and import like this okay oh i see i see i see okay yeah so now we get a login oh and also it's it's amazing how that actually is pretty good well i might just stick with that that's kind of clean so we have a login right but now look at the code so imagine like i go to this user and let's just pretend that like i had a user and he's just like this this represents the user sunny right right so now if i go ahead and imagine sunny signed in look what happens now so on a on a very high level this is what's going to happen right so now sunny's inside and it lets us go in right so at this point what we're going to do now is rather than doing it like this because this is not this is not realistic we're not going to have it like this we're going to basically go ahead and implement a login component so here what i'm going to do is uh i'm going to get rid of this as let's just keep that for a sec let's keep that for a sec i'm going to create a login.js component login.js component and do rfce boom let's go ahead and set this component up let's say import login dot css like this let's do class name equals login like this and then let's just do h1 let's just say this is login boom there we go and then what we're going to do is we're going to create a login.css so login.css over here nice we have it and going back here now once we have that done what we're going to do is we're going to actually go ahead and style this so we have a login um outer container so the way i've done this is previously this is based on the one that we used for slack so i'm going to go ahead and it has an inner container so a login container this is for style purposes and basically we have the following so i'm going to go ahead and just chuck this in right here so we have an image so um this image right here is just a whatsapp logo so literally i pulled it off of google we have a div which has login text and it's just a sign in to whatsapp and then we have a button and this is no normal button because the capital b this is a material ui button so i'm going to go ahead and import that from material ui and it should be underneath that i don't know why it does uh it's not nice uh yeah so we're going to import that from material ui and it's a type which has a submit so i mean it's just so we don't actually need that either and on click fires off a sign in function so here i'm going to say const sign in like this right so it fires off that function and there we go so now if i save this go back to my app and instead of rendering this i'm going to go ahead and render the login component oops when the the login component is really curious how it's actually going to work out like with the using firebase and login i'm very curious to see that yeah it'll be honestly you'll be amazed dude how like how powerful it is like um so there we have the login right there so i'm going to go ahead and first let's make this look a little nice so let's go to our login.css and i have a few little neat tricks here to get this looking as we want so for the login container i'm going to go ahead and do the following so i'm going to go ahead and say login like this i'm going to say a background color of background color of like this white color height and width of 100 view width and uh display grid and place items in the center so let's go ahead and do that first um and this will go ahead and it should centralize everything so we already have everything in center nice and i'm going to say for the inner container so here what i did is actually containerized i had in a container here as well uh i went i went and styled that and i basically added the following so this is basically gives it a floating card look so we give it a padding of 100 pixels text align center background color white border radius 10 pixels and this box shadow right here is just adding like a nice 3d effect right so if we go ahead and add those you see it adds like a little floating box yeah now for the image inside what i'm going to do i'm going to do the flow i'm going to say target the image inside of the login container and go ahead and do object fit contain which keeps the aspect ratio give it a height of 100 pixels and a margin bottom so a margin a bottom of the image of 40 pixels so it's not touching sign into whatsapp too much let's go ahead and save that nice little neat and then i'm going to go ahead and target that button so i'm going to go ahead and do the following say margin top of 50 pixels you see how by default sign in when you use a material ui button the text goes up a case so by doing a text transform so it says sign in with google yeah and you see by default it makes it uppercase yeah so you don't want it uppercase when like it's by the point in the designs like so you do text transform inherit which basically says go back to what your parent container did as opposed to the material ui button and then background color of green so like it's very nice green and we need to do important to override material ui and then we do the color white and then when we add that boom oh wow that looks good yeah so it's so clean like it's so clean and it's just such a simple thing like and once you get that in it's just i mean it's really satisfying once you get that up and running right now what we're gonna do is this is where the magic happens right so you would think oh my god you're going to have to do some crazy google stuff right now like how the hell do we get this all the way so that's what i'm thinking right now yeah so if you would you believe me if i said in less than 10 lines of code yeah we're going to get this all working and we're also going to have error handling all right frankly frank so so yeah thanks so much for the donation appreciate it my friend hey right here nice says another awesome react build what's up what's a better watch out see you on the zoom call today sunny nice awesome dude see you then so and now we have the sign in functionality so what we're going to do is we're going to say firstly um i'm going to do so first i'm going to do auth so auth is something that we um set up from our firebase module so i'm going to do it for my local firebase pulling that from my local fibers i'm saying auth dot and nas check this out right now sign in with pop-up no yeah forward and then open and then what we do is we say provider and provider we set up inside of our firebase file so the provider if we jump into our firebase file we actually made provider a google authentication provider right so that's it right so we do that that's it we say off dot sign in with pop-up and then you say then what what then not the result and here what i'm gonna do is just to sort of demo i'm going to say console.log the result console.log result and for error handling i'm going to say you know what if we get an error catch it uh i won't say what is going on here what am i done oh you need to yeah there you go all right then we say catch say error and if there is an error for whatever reason i'm going to say alert error dot message boom save it now why don't you go ahead and click on that sign in button though no yep you're kidding and it's going to crash i have a feeling it's going to crash okay oh so now you see it's disabled uh-huh yes this is why we're handling this that was super planned by the way i knew it was going to fail i wanted to show that you built up so you built up so much you know anticipation it's like yeah like you would think that we're almost there right but now if you go to your firebase okay so let's go to firebase right here okay go to your authentication okay go to google so go to your sign in method setup send a method yep and that's right google tab disable oh do that and click save and now let's go back to the react app and give it a try no way yep no way get out of here sonny no wait and and while we have it um while we have that also open up your console that comes back hold on hold on hold on console guys this is i mean okay i will explain why to me this is insane just after after we watch this you'll see why so sign in with google yep ready no no no this is not no way no way hold on no way okay what yep oh man you have all of your user details in there um okay i'm out all right bye-bye all right okay okay i'm out of state all right it's insane how crazy and easy that is the reason why guys i i'm like i'm like acting like this it's for one anticipation a little bit but for two but for two because i've done signing with with google right manually we're not using firebase right i've done it where you actually yourself had to you know add your own button you had to you know uh basically make sure that all works with google and you were the one creating the code for the google sign in i'm not kidding this would take us sometimes days yep this took us how long man literally and i said it was ten lines ago but it's actually like one two three about four all right all right all right all right too far you're going too far two fifty five actually just one line of code no but that's awesome that is that is so crazy like to me oh man that's insane all right but let's look at what what's actually what what type of stuff are we actually getting what type of information are we getting from google so let's go ahead and we the one we care about at this point is and no no no this is crazy because remember you know like for some things you need a um api key right see inside a credential the id token is your api key wait what well i'll say it again so so once you sign in it gives you an api key that you can use to use google services oh really yep oh man that's insane okay so wait what why would i use that api key for so i think you can use it for like google maps and stuff like that oh okay interesting okay that's cool i think and then it looks you guys have a display name so this actually gives you display name right there right there your the email all right there guys don't email me please um oh man why do i use that damage it gives you your photo url so my photo url where right there so yeah it has your actual picture this is some dangerous stuff okay all right that's uh cool all right nice so with that said now what we're gonna do is so when we get back rather than console logging that what we're going to do now is we want to dispatch that information into some kind of data layer so i'm not going to go too far into how like the redux sort of pattern works but i'm going to show you guys an implementation of it very quickly so we can get the most value from this video right because we do cover this very extensively in some videos and we actually just dropped a uh a little snippet video which is about six minutes i think which explains all about redux and all about those things and we snipped it from a previous video so you guys can go ahead and watch that after which massively useful so now what the way it works is we need something called a state provider right so this is basically going to wrap the app okay okay so and where where does this happen it happens at the index.js so this is a file that nobody likes to touch because everyone's scared of this file [Music] we go here and basically it's going to essentially wrap the app okay so imagine at this point this wraps our app so the state provider is basically like a data layer so it surrounds the app and then basically what we can do is we can push information into the data layer and we can pull it from any component so our goal here so just to make it very clear our goal here is that when we sign in we push the user into the data layer and then we can pull that when we pull before the user from the data layer whenever we need it right now what we're going to do is we have two things we have the initial state and reducer so i explain what they are in a sec but to get the state provider working to get the state provider working i mean there's a state provider dot js right now what i want you guys to pay close attention to here is merman goes what was that noise so now we can do is we can copy this i'm going to run through the snippet of code right here so now this enable uh word wrap okay so view um all right cool sergeant actually just dropped the uh the link to that video i was talking about in the description thank you for doing thank you so i'm gonna explain quickly what's going on here guys so this is just importing the things that we need right at the top and then the next line is basically preparing that data layer right it's creating something called a context which is where the data layer actually lives right where everything actually lives and [Laughter] the data layer is actually this here the state provider and this is called a higher order component okay so it's got a higher order component it takes three things to take to reduce the reducer an initial state and children oh my god oh man oh i think you guys smash the thumbs up button if you haven't already thank you appreciate it all right we're good okay okay we're good we're good we're good we have to reduce the initial state and then the children the children are is here so the app child is this one here and then we have the reducer and initial state which i'll explain in a sec now this stuff right here we explained in that video but basically we need to know is it allows us to go ahead and actually set up the data layer now this final line here allows us to pull information from the data layer right so we can go ahead and pull it from the data there right so now what we're going to do is we actually save that file we need to create a file called reducer reducer.js right now um go ahead and do reduces.js and here what i'm going to do is i'm going to copy the following in here we're going to explain this code now so the initial state is how the data layer looks before we've added to it before anything so when the app starts up we're going to start off with it with the user not being logged in which is what we want right okay then we're going to have we have certain actions and these certain actions are basically the actions that we can this is where we can push information into the data layer so for example when we sign in we're going to dispatch an action which says go ahead and push this user into the data layer where does this action be dispatched from where what are you talking about so so the action being dispatched we haven't covered yet okay gotcha yeah we haven't covered that but yeah but um when when an action gets dispatched into the data layer we basically we switch on and we listen to it here we say okay what action did did you just dispatch so here i'm saying if you dispatched a set user action then go ahead and whatever we return is basically how we intend to change the data layer right so here what i'm saying is keep the keep the state of the data layer so keep everything that was already in there but change the user to be whatever we dispatched and whatever is in in particular inside of the user portion of the object that we dispatch all right now if we don't uh it feels like for example some other thing like set um set car or something like that we just fall for we fall back to a default state which basically just says return and don't do anything with that okay by the way guys 2.8k likes in so good thank you all so much i love you all so close to 3k guys let's do it come on you guys can do it almost almost just 200 more come on come on exactly insane love that right so now we have this setup right so what we need to do now is when we initially set up the data so where we wrap the app we need to go ahead and import the initial state and import the reducer so that's what we do here right we do that we hit save i need to also import the state provider so import so it's kind of like redux basically is it not it's almost like really dude it's exactly like redux it's exactly right but the implementation and the setup for it is much simpler than redirects agreed i have agreed so now what we're going to do is somebody actually said can you show how how you can implement persistence with context i will actually do that in a different video not today but we will do that in a different one right oh nice cameron thank you so much he just dropped a donation five us dollars he says what is the get up link for this we will go ahead and post this afterwards and we'll link it in the description so that you guys can go ahead and have access to the code so don't worry about that yeah thank you for that dude right um nice so now what we're going to do is we have app and then we have the state provider awesome so let's go ahead and do the following so now what i'm going to do is remember when we signed in guys so inside of login.js what we can do is rather than just console.logging because this doesn't do much this doesn't do much for us we don't really get any power out of this what i'm going to instead do is i'm going to pull some stuff from the data there so what i'm going to pull here is this is the syntax for it so you see it's very similar to how we use hooks so the use state value is the hook that we created inside of the the setup when we done it here so this one right here right so what i'm doing is i'm getting this is the first part is the state so we're putting something in state so you could at this point destructure and say get me the user but in this case we're not using anything from the state and then the second thing it gives us something called a dispatch now the dispatch is like a gun it's like literally the way i like think it's like a gun and basically you put whatever payload is and you shoot it at the data layer to update the data there right so at this point we get the dispatch and here i want to say go ahead and do the following so dispatch an object right and that object is going to be the following it's going to have so remember that we're going to dispatch an action type which is um so what i did is to avoid sort of accidentally typing in the wrong string and things like that inside of reducer.js i actually created an object with the correct mapping so you see here set user is is assigned to set user and then what we're doing is we're saying the type is the set user action and then the user is whatever we got back from google dot user because that was all of like nars information when you when you signed in right right can we also what if we what if we use simply for example what if we but what we what if can you also replace that with like set stake for example uh well here like yeah no no what i'm saying is like instead of using reducer or using yeah using reducer we just simply set the set a set state on a user at the upper level so you can but what happens at that point is and this is why you end up using redux and react context applies because you end up with something called prop drilling where basically imagine we have the user at the top level and i need that user at a very very low level in the tree right and yeah very long i now need to pass the user through every single component to get to that point yeah that's right because this allows you to just just straight away pull it from the data got it yes it makes the code overall more clean so now inside of app.js what we can do so this will actually dispatch the user into the data layer now from here we're not going to pull it from the use data instead what we're going to do is we're going to say oops instead what we're going to say is i'm going to go ahead and pull the user from our data layer and i'm going to say so i need to import the user state like this yeah pull the user in and now because we're checking this condition based on the user inside the data layer as opposed to the the use states and now what will happen is if i save it and knows if you want to uh after it refreshes run through the login flow one more time cut all my emails up there and guys i think if this works i think if you haven't already you should definitely be smashing that thumbs up button because this is insane what we just did right there oh look at that it's insane and if you if you open up the um console log okay so what i did is i actually console logged at the reducer point right so we should see a set action got dispatched so let's go up say user oh yeah yep and that's it and what you can do is guys this is really handy because then now we can see what we have to play with right so an example here is uh we don't have position persistence in this uh when we're using this version of like the google login so when you do refresh it you have to log in again but it's not it's fine when you use it a different way i will go over that in a different tutorial so when you say when you're saying persistent i just want to clear that up when you're saying persistent what you're saying is that like it doesn't save um look it doesn't say the specific users when you sign in back again basically it's not going to remember all your past messages you're going to sign in again is that what you're saying so now if you was to refresh you'd have to sign in again yeah gotcha gotcha that makes sense okay yeah but because it's very quick using the google thing i'll show you how we get around it when we're debugging and stuff cool but at this point um we have the user so i just want to show you guys when you have the user now let's assume let's go to the sidebar for example let's go over to the avatar that we had in the sidebar and let's actually go ahead and change this so instead of like an empty image let's go ahead and use the user's image right so here what i can do is i can go ahead i can pop this magic piece of code in which goes ahead and pulls the user from the data layer yes you can see how simple it is now once you have the data up and running right now what you can do is you can actually go ahead and do uh with the avatar you can go ahead and say set the source to user dot photo url which is actually the user's image that comes back from google now notice how i have a question mark here because we're doing optional chaining so it's saying if user is undefined because the user may be undefined for a split second when there's sort of that async sort of uh behavior going on then we want to protect against that yeah you see it with the oh shoot never mind you guys saw how there was a photo url key right that was there yeah though hold on if we try again right if i go ahead and sign it again boom so a few people so somebody said login session should stay on refresh yeah it should do but when you're using the google authentication you actually need to keep the uh the access token and we don't we're not doing that in this tutorial so you can see right there say user right for the user and you can see the url is coming from where the photo url right here you see that and that's coming from google yep beautiful exactly okay sweet nice steve mccarty said uh to check out rico and he said this a few times now so i will definitely go ahead and check that out because i'm actually super interested in seeing this but back to the sort of topic at hand guys it's how nars is popped up so you see nars is actually over in the corner oh yeah right there look oh my wow damn look at that that's crazy that's i love it that's so cool yeah wow so now we actually have this so we know that the user is actually inside right so that's awesome and now what we can do with that is some clever stuff we can do some really clever stuff with that now we can do some we can pretty much finish the app we can finish off the rest of the app with that stuff set up now so let's go ahead and go over to the um sidebar chat and we already done it so that when you when we went to the sidebar chat um let's go ahead and go to chat.js we basically want to have it so let's go ahead and set up the messages at this point so we've got the chat.js now inside of chat what we need to do now is we need to basically do a few things we need to basically have it so that when we send a message it goes into so everything will say let's open up firebase for a second nice okay let's open up the uh database okay so remember we had a collection of rooms and inside of the room you had the actual room itself and inside of the room you can have another collection so in each of those rooms we're gonna have a collection of messages got it so should i do start collection no no it has to be in on the right so you see it's inside that room in the inside of that collection and then here it would be messages right so messages okay click next and auto id and what we what do we have a message text so inside of here we'll have a message itself so the actual will be message and this could be like hey guys or something hey guys okay cool another field you can have a name name so name this the person's name is what you're saying yeah so let's just say nas for example okay and then you'll have it timestamps if you click timestamp and then and then this is this would be like added right added yeah right so another time we're gonna call it timestamp yeah and then go to type and change it to timestamp mm-hmm and let's make it today's day and that's all good yeah yeah i don't need that and that's it click save yeah so now we have essentially a message inside of the room right so that's the data structure that we're going with here okay okay so inside the dance room we have one message from nars which is inside the room right so how do i pull those messages in so that's the first question let's go ahead and let's go ahead and and get that up and running so what we're going to do is we're going to create a piece of state called messages which keeps track of all the messages so i'm going to go ahead and do that messages set messages use state empty array initial value and then inside the user effect where we done the where we grab the room name what i'm going to go ahead and do i'm going to say dbe.collection so go into the collection of rooms then i'm going to say go into the document which is the room id and remember this is passed in the url because we're using react then i'm going to say go inside the collection of messages okay yeah and then i'm going to say go inside a collection of messages and then go inside of and then also when we get the collection of messages order by timestamp so you can literally do all of this in the line which is insane so order it by ascending right and then from the oldest to newest yeah and then get the snapshot um and then get the latest snapshot so it's also real time so this is insane all of this is in one line of like code is it it's unbelievable yes yeah it's insane right like you set messages you say snapshot dot docs dot map and basically what i'm saying is map all of the document like all of those message um objects so all i want is the object so i'm gonna say get the data from each of those objects bubble it up into an array and pop it into my messages array so use it like here yeah so now what that does is if we save it it goes nicely formats it does it all that we want and now inside of messages instead of actually rendering out what we had down here so we had like this hey guys blah blah blah what we can now do is i can change this and i can say inside the chat body also loop over every single message okay yep map through them and say for every single message i want you to i want you to basically output this so i'll put the p tag right i'll put the p tag um and basically have it so that it's not there's it's not the the it's not sunny sanger it would say message dot name because that would be the person's name instead of hey guys it's gonna be message dot dot exactly and then for the time stamp there's a magic piece of code right so there is a magic piece of code here and just use this use this format because it is a very simple way of handling timestamps in firebase it will make your life a little easier guys so um check this out so uh i don't know if somebody just joined again actually yeah did they at the emmy uh iodipe i think if you if you joined and you're on the live stream let us know dude because we'd love to see that that is sick heck yeah guys so many of you are joining i know and so many of you are enjoying the course and the coaching calls um yeah just if you're interested guys remember guys link in description for the profit of javascript course but also most importantly is we have a completely free master class for you uh also down down the description no nothing no money from you at all check it out link in the description below all right let's continue exactly definitely go and check that out guys free training so definitely go and yeah have a look at that who wants so for the time i know right exactly yeah for the time stamp guys what we're going to do is we're going to say new date and i'm going to say message.timestamp we're giving a question mark because this could be undefined at some point and then we're going to say today because basically that's how you translate it to a date and then you say to a utc string and basically this is just gonna make it look kind of pretty in a date format so if i save this now let's go over to our app okay let's sign in sign in so robson ribeiro this live will be saved yes yes of course guys all right cool all right right there so now let's go into the dance room and we should see that message that nas added yo look at that all right i like it i like it nice guys guys this dessert hold on hey there we go and we still have literally over half a thousand people watching like holy crap dude this is insane oh my god we have 600 people we have 600 605 people watching right now 605 because you've got facebook as well right that's yeah yep um that's awesome dude um yeah guys let's push this to 3k likes i'll make my day like nars will get like super pumped up if you we're gonna if we get to 3k likes we're going to get sun to dance how about that [Laughter] so now now what we're going to do is we are going to remember today you know it's not always easy coding these apps guys um let's go ahead and carry on so we have the message coming through now so what we want to do now is actually have it so when we send the message when you type it in it basically does that manual step of when nars actually manually added it right so that's very simple to do what we need to do is go ahead and say the following so we're going to say when we send the message we're going to say db.collection go inside of the rooms collection yeah go inside the dock and we're going to use the room id to go ahead and find the correct uh room then we're going to say go inside that collection of messages and then we're going to add a message inside of there right and then we're going to add remember those things that nas added to the message the user yeah the time stamp so the message is going to come from the input so the input that we have in our local state the name of the user is going to come from the user right so which means that we actually need to go ahead and pull that in from our data layer so whoever's logged in we're going to go ahead and get them from the data layer and we're going to use their display name as the uh as their name so display name as the name nice and then we're going to say the time it's user.name sunny no no no it's a user.display no no so not that name so the the name key is here okay right but but the user.displayname is coming from google authentication oh gotcha okay makes sense so that's where that's coming from right and then the timestamp so you don't want to use a local timestamp you want to use the one that's on the server because then say for example nars where are you right now where about what are you where am i at i was just i was showing them what are you talking about no no i'm saying in in the world right now like where abouts are you in europe detroit detroit detroit right so nazis in detroit and i'm in london so our timestamps are going to be different right they're going to be very different and stuff so to avoid that problem what we can do is we can use the server timestamp and to do that what we're going to do is we'll import firebase from the actual module firebase so not a local one up here we import it from an actual firebase and then what we say is timestamp firebase dot um firebase.firestore dot and then what we say is field value right and then this you then what you do is you type in you say server timestamp and it's a function at the end of it so like that's how you do that and basically that will go ahead and get the service timestamp on the the server that where this is all hosted right now it says use state value is not defined let's go ahead and import that boom like that now with that said and the reason why we do this guys the reason why i would use the times is i think you you said that it's because the fact that our times are different while the server time is always going to be the same right so if you simply add the correct times and we can then on the front end on our side we can change times depending on where the user is so so for example if sign is in london it will show him london times if i am in detroit it will show me detroit times right so that's how we do that exactly that guys exactly that yep all right shall we try it out so now let's try out dude let's sign in sign in all right let's go i'm excited i'm excited okay okay all right okay all right let's see guys wait what is okay okay so hold on now this let me type something right yep yo what is there look at that hey nice now we want to make a tweak here right so we want it to only show up as green for the message that you wrote so this is actually pretty good a good use case so let's assume that the first one you added was from nars it was actually technically different than azari dominsky right yes so in terms of in in terms of like what what the computer knows right so that's going to be the sort of difference here so what we can do is we can use that as our sort of test case and what we can say is remember where we had that true condition right now what we can do is we can say when the message name is equal to the user's display name because as you as as is pushed in from programmatically this always going to be that correct user's display name so now what will happen is if we actually log in so i know it's a bit annoying but we won't have to keep doing it but if we log in now hold on let's see right there all right good yep right there oh okay okay okay you see that all right go ahead i was gonna ask you how how that happened so just kind of uh logic wise yeah so logic wise what we did is this condition right here made that happen so we're saying if the message name is equivalent to the user's display name so the one that is set in google right then it would classify as that's from you right so now this is okay on a demo purpose right but two people might have the same name right yeah so if you're gonna use this in production i would recommend using something like the id that you get back from google or something like that that's the professional put like production way but in this case we want to kind of get a middle ground between what's you know readable and not so many ids and stuff like that so in this case it's functionally working we're not going to have too many clashes of people with the same name at this point until we get to 100 million users um tomorrow at this point you can see now yeah now we've got the so we've got a few things to fix at this point we've got last seen at on the top of the chat header and we also have the styling on the left side so we have dance room dev room epic room and you see where it says last message right so let's fix those two areas and then at that point i think we are ready to get done and i think if we can hit 3k likes before that dude it's just going to be ultimate 2.9k right now oh oh so close insane insane dude honestly like one second dude what's up okay uh okay so now what we're gonna do is we are going to we have the um okay so now what we're going to do is we're going to fix those few issues so the number one is we have dance room at the top so last scene at so where we have that is inside of the s chat.js so chat.js and that is seen at where we have last seen at and that's on line 60 so here so now what we want to do is we essentially want to basically pull this from the message right so we're basically what we want to do here is we want to essentially have last scene app and we're going to use the we're going to use the um the last message that was on that collection to determine when the last activity was on that group chat right so here i say new date messages messages dot length minus one right so this is what this is where are we getting any of this from right like where does this come from and where this is gonna happen now is what i'm gonna do is when we're inside of here remember guys in the chat we actually go ahead and we pulled the messages so all i'm saying is the last scene is the timestamp from the last message that was sent right so the last message that was sent and to avoid the sort of logging in and stuff like that i'm going to show you a quick trick and don't forget to undo this but if you go here and just change it to a string of no instead so you could be like no sonny whatever here if i go ahead and save this now you won't have to log in again but just don't send the message otherwise the user is going to be undefined and it's going to cause a bit of headache in your you think so now it'll say last scene you see that it says last scene tuesday 18th of august and that lines up last message [Music] okay so that's nice right so it says last scene tuesday 18th of august and it has everything there so it's the last time a message was created basically yeah exactly that was the last time so if if we actually was to send a message it would actually show um don't don't do it now because uh i mean if you do it now i think it might error out because we don't have the user on there so so it might error out so yeah right yeah it looks like it is yeah yeah looks like it is so it won't let me hit enter oh okay all right perfect yeah okay so there we go yeah because remember i've actually just i've changed it because here i've done a sort of bypass so that we don't have to log in again but okay so that's that's cool so now on the left side we had one more issue to address which was on the sidebar we had um we're right now in sidebar options or sidebar chat we actually had last message so this was hard-coded right i want to pull this last message from the db so and how we're going to do that i'm going to use a use effect right so i'm going to use a use effect we get the id from when we actually go ahead and we pass that as a prop so what i'm going to say is use effect and here i'm going to go ahead and do this i'm going to say if you pass me in an id so just protecting when i say db.collection so go into the rooms go into the dock so go into the dock with the id so that's the room id and then go into the collection of messages so collection you might need to word wrap him uh not oh i am oh no you don't oh yeah nice collection messages and then order by so order by and this time we're going to do timestamp timestamp descending right and i'm going to say on snapshot because we want this to be a real time snapshot so when we realtime feed and here what i'm going to do is i'm going to say i need to create a piece of state to keep track of the message right so i'm going to say message set message and i'm going to say oh this should be plural actually sent messages so i'm going to grab all the messages and then here what i'm going to do is i'm going to do our traditional mapping through so i'm going to say set messages map through all the docs get me the docs back and then and then give me back what i need so there we go so this goes ahead against the messages at the sidebar chat so those sidebar option level right so we have it there and then what i'm going to do is where it says last message all i'm going to do here is go ahead and say message zero because you're open wait what is the message though or or the um so we did that over no no so here so this isn't actually this is to show the message so what we do so what i'm doing here is i'm saying go ahead and get the messages okay uh order them by timestamp descending so the first message is going to be the most recent one oh really i thought it was like the last message gonna be the most recent one uh i mean i i did i thought that as well but then it kind of um it kind of like yeah it was kind of like okay okay cool message is not defined what what messages oh oops yeah yeah yeah there we go now if we log in that actually has fixed that that issue that we had all right so let's log in boom let's try that out cool guys we are almost at 3k likes come on guys how much are we away how much what 100 super close dude oh you see it says yo yo yo yo so now if you go into the dev room and type a message okay so dev room yo yo no no no no something else they have room message oh look at that guys and if you type in again check whatever happens it will actually it will show the latest message in that left screen whoa heck yeah yo yo sonny this is epic yes but that's so weird though that the first message is the last message yeah because i'm done descending oh descending not ascending yeah okay yeah i always yeah i just kind of do ascending see if it's the right one i forget to honestly sometimes yeah if you did dot length on ascending i think you'd get what you then you'll get the level yeah that's true that's yeah or dot length minus one or whatever you have to do that yeah um awesome so now what we need to do is let's fix that last styling issue where we've got that horrible sort of um it just looks fine yeah it just looks like yeah right now yeah yeah so let's go ahead and go to sidebar chat and basically i'm just going to do a little quickie hack here so we can fix this so i'm just going to go ahead and say for the anchor elements text decoration none color black okay so very quick fix here and then we do that what we should see is there we go i'll change there and now now we don't get those lines right guys so we still get the problem uh-huh go ahead go ahead no i think i think i think are you okay i think we're done yeah that's it are we yeah i think we are actually yeah let's try this hold on let's go i was thinking i was like holy crap yeah i think we're done there wait wait so okay hello we're done yeah all right i got i only got one thing to say honestly i got one thing to say you know what i got to say [Laughter] i said let's go really that is so sweet dude oh i actually saw an error here so sidebar chat sidebar chat guys very important point sidebar chat we used a oh this is important yeah we use the use effect and we use the id right now don't forget and don't ignore the the in the terminal it popped up if you actually need to include that as a dependency because we're using it here so just want to point that one out because that's actually really really important there guys come on let's get to 3k come on come on before we deploy this we need to get to 3k come on sure with some people you know i don't know i don't know what you got to do but do something i know i mean dude i think what we should do is i think i got an idea what do you got what do you got the deployment the phase right so let's get everything set up for the deployment okay and then this let's wait and let's answer questions until we hit 3k all right okay i like it i like it yeah let's do it yes let's do it let's do it so guys and if you guys and if you want you know what if you got to go the extra mile create a new google account go to this video and then click like again yeah guys just push that to 3k because that's it and that'll be the ultimate banger finish to this video that'd be the most you've ever gotten i think in the video right 3k i think so yeah i think so yeah it's awesome dude so now guys we're going to show you no we hit 3k didn't we no we did oh that's cool you guys so much guys that's insane that's insane um oh man that's just holy crap yeah so guys let's go ahead and show you guys how to deploy this song and get this live okay let's do it so let's open up the terminal wait what is that so the vs terminal i'm just i'm just trying to do something here hold on a second all right we're cool cool all right so terminal i was like wait what is terminal right guys because we hit 3k literally we and knowledge would massively appreciate if you go onto instagram shoot an instagram video to show us that you're watching this right now and that you were here when we hit 3k all right tag us in there and literally we can have a chat with you guys so as always we love to do that so really really really please go ahead and do that yep your point five dollars thank you so much dude hitting 3k oh hold on let me let me let me let me let me put him on the spot right here there we go frank frank you the man frank is always so supportive thank you frank he's killer dude all right cool so uh let's get to so let's deploy you guys ready to deploy are you guys ready deploy hit that smash that like button for deployment um and we're gonna deploy exactly so guys what we need to do now is we need to go to firebase um so i'm going to do this firebase oh actually one minute i just realized what's up if i log in so check i think i'm logged into my account but what i could do now is i could deploy this project yes you want me to log in uh it's fine but i mean we could do it so i can actually do it from oh man [Laughter] all right so let's go ahead and do the destroyment so i've actually said what's clown so i can deploy it on my one as well it's fine yeah okay let's do it let's do it so now what we can do you're gonna need to do firebase login and what that will do is i'll pop up a sort of a login window and once you've got that login window done you need to do firebase in it right so firebase in there and now what we can do is you see this this will pop up right so this beautiful interface pops up you want to go down to the bottom using the arrow keys hit the space bar on hosting and then click enter and then this is important guys right here i'm going to click use an existing project i'm going to go down to the uh firebase project so let's go ahead and do um uh where is that whatsapp clone right this one right here is that is that the one that you got is that the one that you created yeah i'm not sure if our database is gonna clash though let me try it you can try yeah let's do it but then in here what we're gonna do now is we're going to type in build so this is super important build right so build is the public directory that you want to use and then what we're going to do is type in yes for configure as a single page app because we're a react app is a single page app okay that's it we've set out the app up right now what we need to do is do mpm run build and what this will do is it will create an optimized production build so what this means is it will strip out all the developer stuff so all this hot reloading all this sort of heavy crap that we don't need in the actual production version uh because in the production version you just want the app to load as fast as possible so it strips out all the sort of cool toys and gimmicks out of it and it's basically going to strip it down and it'll put it into the build folder right so if you're not if you open up the directory on the on the left hold on hold on just hold on give me one second i'm trying to do stuff cancel nope what directory for what uh so open up your files on the left okay and show them where the build folder actually gets built all right so all right cool all right director in the left come on no that's the one cool yeah so here what i want you to do is you can see you've got public at the top but you also have a build folder at the top so yeah i mean oh there will there after this is done there will actually be a build folder that comes up there right and what this build folder will do is it will basically that optimized production build that gets sort of finalized goes into that folder right so i'm not sure how long this is going to take but let's just give it a little bit of time and in the meantime we can go ahead and answer some questions and we can sort of get everyone prepared for the deployment yeah guys yeah so you got any questions guys go ahead and put them in the comments below and also also as you if you put the question go ahead and smash the like button yeah cuz i can get this video out to even more people guys oh man oh guys this has been an insane build you know i know i keep using the word insane but i really there's no other word for it right there's hold on there's no other word for it honestly so um you know sonny amazing job on what you have built here seriously uh this looks not only not only does this look good but it's usable we can actually use it yeah honestly you can go ahead and use it it's insane like and this is going to be scalable as well it's like what we built here guys is production scalable like you could scale this to uh however many users that you would need like if you had a million users today it would scale and it would work which is insane to say i'm curious how many can we get can we get right now how many what was that useless we can get right now i know right i wonder i mean i don't know if you know but we're still at 605 people watching by the way that's insane oh my god that's insane retention rate is crazy yeah do you know how to get to the live stream room by the way the live stream room what do you mean on um youtube just wondering if you know how to get while we're waiting for this oh like into the actual youtube livestream room yeah i'm just wondering because it shows us some cool stats but um oh okay i can take a look at it here hold on let me see i can take a look just so that yeah just that when the stream eventually ends we get all the stats you know all the small stats because otherwise i couldn't get to that screen yesterday and it kind of i don't have that i mean does it show right now um i mean i don't know because because qazi usually is in some kind of live stream room um which is pretty cool yeah it might be in the studio i mean i'm i'm gonna i'll have the studio open so we can see yeah hopefully this this production build it feels very quick guys this is usually very fast right here right here you see that guys we're touching this out boom that's insane holy crap look at that look at that we were we peaked at 12 1200 1300 people and then just like slowly slowly slowly and we've been out this for this is at this point it's three hours and a half so which is insane um yeah but guys 800 and average wow how many chad matches we got wow chat messages you guys are killing it that's all i gotta say yeah and thank you guys so much obviously for watching thank you guys so much for supporting us and being so supportive in the chat um the more we do this more we realize that you know you guys uh really you know one are enjoying this and are really getting a lot of value from it and you know and having fun with it at the same time so exactly you guys yeah thank you oh so looks like look at that it's building it's built oh finally nice so guys with that said now let's go ahead and do the following so one sec okay there we go i can see yeah so now what we're gonna do is we have the what's up down here so yeah you can see it right yeah so in order to deploy it guys it's as simple as this right and also bear in mind if you change any bit of your code between the time that you done npm run build and when you've done it like so you need to do make sure that you don't change your code after you dnp and run build or if you do change your code run npm run build again because that's it's going to be bundled up then to deploy it we need to do firebase deploy like this voila yeah firebase deploy and this will go ahead and deploy the app let's go ahead so you see it's uploading all the files that we have doing everything and boom let me just go ahead and double check this so to make sure everything's good react app let me go and sign in so the domain is not authorized okay so this is what i was well this is what i was kind of worried about yeah so we actually went ahead and deployed it from so i wasn't logged into my account i was logged into i was looking into my account nas built this on his account so this is where a lot of people were saying that remember the security might have been a concern you have to be signed into the correct account really what i'm gonna do guys is we actually went ahead and deployed this before and we deployed the exact same build on this uh clone over here so we actually did the exact same build on discount so what's up so pretty much no it's the one that you uh this one right here yeah oh wait i need to refresh this oh damn it someone's going ahead and done that guys clear that come on guys what are you doing come on oh wait no it says is not authorized to under separation yeah so this is happening because i'm not logged into so now what we could do is we could go ahead and quickly do firebase log out firebase login i mean this is this means i have to log into your account and do all that i mean what should we do at this point shall we locally and let's do it let's do an yeah okay let's do it let's just demo locally yeah so guys with that we did deploy it so you guys saw that there is a deployment and that's literally would be working for you guys let me go ahead and get an ng rock going for you guys oh you gonna do it for me okay you're gonna do okay cool yeah so i'll get an ng rock going so let's go ahead i always forget why i put ng rock is it my desktop is it i also yeah i was i was gonna look for it there we go yeah there we go okay so now guys that's the ng rock link so what i'm going to do is i'm inside of can you see the ng-rock link i'm about to hold on one second ah kind of you kind of you might need to help me out with that right so if you go into let me go into uh app.js and i'll just drop it at the top of the comment i see so app.js no app.js yeah yeah and inside of that dot yes okay come on yeah so now me and nars will go and show you guys that this is working and it's all pretty good wow let's do it almost there almost there almost there might be a little bit slow that's the only thing yeah because it's localhost yeah all right let's see this let's see this okay mine's up so okay so it's not authorized to run this domain okay yeah so guys dang it firebase is super secure all right yeah you can't ngrok either so this i mean this is a good thing this is a good thing so what it means is we showed you guys in the beginning of the demo and basically the reason why we didn't do it is because i wasn't logged into nazi's account which is why yeah i can't do it either dang it dang it dang it ah it's okay it's all right though okay we should be down we downed it to you guys in the beginning which is really cool i think yeah now let's just go ahead and show it let's give a run through of the app one last time i always do it so let's do it right here okay beautiful so check this out guys we can have for example we obviously we have different new rooms we can create new rooms what kind of room should we create let's create a room called 3k room 3k room yo the epic 3k room okay click okay we create ourselves a 3k room inside this room now we can now it's just simply text between different people right so if i simply let me remove myself here you can go ahead and um how's it going right so how is is it going uh this this has been has been an awesome awesome live call and you can probably you can probably add this um and here's what you can do i can literally add a to the firebase i can if i go to firebase and i go to rooms for example and so the room that we just added was which one right i can go ahead for example i'll you know imagine this is sunny oh no i'll show you a better way to do it now is actually go ahead and log in in a separate window as a different uh if you want a second oh i can do that yeah but it will still be my name no that will be a different nars right yeah i guess so i guess let's try that so hold on so i can do localhost 3000 oh it might might be it might be the same man it'll still be the same name because i got a bunch of nazari zombies account we could do that i don't know if i can like log in with kazuka let me see hold on can i yeah i i tried it yeah it should be oh oh okay let's try it we'll see quasi quasi all right quasi i'm looking with your account nope oh [ __ ] nope not happening all right we can try this though hold on let me see i can't i could talk about myself how about that nice i mean yeah you can have two conversations guys supposedly that's because we opened up the window twice yeah yeah yeah so yeah but in either case you can see this work is just it's very secure and so uh but i think we'll be able to we'll be able to make it live and then give you guys the github link as well that's me the most important thing guys that's the most important thing for you most important thing guys we will go ahead and do that so yeah with that said i think that went amazing dude dude that was sick guys awesome yeah that was insane um yeah i mean who loved it dropped in the comments below if you guys enjoyed this if you want to see more things like this i mean i'm sure you guys i'm sure you guys do um sunny amazing job guys give something a round of applause for crain this awesome app uh he's been working hard at it and he's been lucky he's like yo bro i'm just i'm still working i'm still working still trying to finish up the code he's just like rushing and russian trying to finish it up but he did it it looks great so great job on that um appreciate it bro yeah seriously um and to all of you commenters guys thank you guys so much for watching thank you guys so much for commenting being positive and optimistic and following along if you followed along and if you did go ahead and create the project obviously tag us in your instagram videos right here and then sunny is there i'm pointing sunny so point point down sunny yeah there you go point down there you go and i'm pointing to you exactly now you're just like um so yeah anything else we got i think that's it dude i think this is awesome i i enjoyed this build it was stressful because it was a bit of architecture to this one to try and get it working right but then we managed to get it working and we got in a really nice way and now as i want to say massive thank you to you dude because nars jumped on and actually ran this with me uh with quite last minute notice and i think he crushed it i think we absolutely smashed this live stream dude this was a fun live stream i'm not keep like it was it was chill but it was fun it was good like we didn't have too many technical problems guys and like and i see though you guys are somebody saying saying keep it up buddha says keep it up bro uh let's see what else what else guys santana says good night guys warrior says applause applause applause so yeah guys yeah and thank you sonny appreciate it i'm most happy to get on with with you what was that sir i said i was happy to go on with you i was happy to get on the call with colin yeah let's do it more often that was that was fun of course of course would be cool to do like um react and then like i'll do like a node.js portion for example you'll do the react portion to like a small application and i'll do the node.js portion of this multiplication you've worked with mongodb right mongodb and node.js exactly yeah so it would be nice to do like a man stack we could do something like that that'd be cool if you guys want to see that drop in the comments below and if you guys get any ideas also let us know um yeah but yeah other than that are we done yeah i think we're done guys should we call it yeah we will see you on the next live stream and as always guys this is sunny and this is nas we will see you in the next one peace exactly peace out have a great day bye bye wait wait

Channel: Clever Programmer

Views: 391,558

Rating: 4.9483891 out of 5

Keywords:

Id: pUxrDcITyjg

Length: 219min 54sec (13194 seconds)

Published: Tue Aug 18 2020