🔴 Let's build Whatsapp 2.0 with NEXT.JS! (1-1 Messaging, Live Status, Styled-Components, React.JS)

what's going on papa fam it's your boy papa react and i am back for an absolute crazy video today guys if you're excited for this go ahead smash the thumbs up button let me know in the comments right now we've already hit 400 likes before this video started i don't know what more to say guys you guys are unreal the papa fam is growing at an incredible incredible rate and guys i'm just excited to be back so let me know where you're watching from right now let's get some energy up in this place and guys i've got so much to show you today okay let's have a look at what we're gonna build today check it out right so this is whatsapp 2.0 right now whatsapp 2.0 is very different to any build that i have done ever because it's next.js we are covering next js in today oh wow look how many people are watching from around the world this is insane this is incredible guys welcome from everywhere welcome this is international guys love and appreciate all of you for tuning in alright so guys today we are building whatsapp 2.0 with next js okay now let's go ahead and quickly demo this app so you can go ahead on the sidebar and you can pretty much navigate through your chats and here you can see when we load a chat immediately the chat is available because it's being rendered on the server and then it gets delivered to the client right so i'll explain all this don't worry if you're if you're new to this i'll explain it all but let's talk about this right we have auto scroll function if i say what's up papa fam what's up papa fam hit enter boom scrolls down we've got everything working the way we expect it we even have last active status right so jay is live right now and he has been on and uh he's ready for this look at that guys look at that he just sent in a message and it says last active and you see how it updates in real time so this is insane this is really really insane stuff now to top it off we have a beautiful sign in with google functionality over here and guys i'm gonna show you something really really cool today just wait one second okay so let's go ahead and log into the proper react team account and boom there you go all right we've got everyone here so this is incredible right we even have one of our students avanesh over here and he's live right now what's up avnish good to see you here man so you guys can see this is incredible stuff right now if you're excited to learn next js get ready right you're gonna need some coffee now guys today i am so so so so so excited that the papo farm is growing to the extent where we now have our first ever sponsorship right so today's video guys is sponsored by the guys over at hostinger now hosting is an incredible platform and i'm going to show you guys how we can go ahead build a crazy app like like whatsapp 2.0 and then host it on your very own domain so if you guys want to go ahead and check out the app early go ahead and check out sunnysanga.com right so you can feel free to spread that in the comments right now it's sunnysanger.com and how did i do this right i did it with hostinger now i'm going to quickly give you guys an introduction into hosting on your boy papa react also sorted you guys out with a lovely little coupon code so i'm going to give you guys a great little discount over there right so what is hostinger amazing platform where you can have website building hosting everything included email management vps servers and all that good stuff right now let's talk about some of the things that hosting offers right they have a the price to quality that these guys give is incredible right their plans are so dirt cheap right so if you've ever wanted your own cool little domain name like sunnysanga.com then go ahead and check it out right like you guys can go ahead and build this today and i'm going to show you how to do all of it and then i want you guys to drop it in the comments where you deployed to you right so it could be like j at j.com www.j.com or something like that right whatever you guys deploy to but let's talk about it they have extremely fast servers 99.9 uptime guarantee they're optimized for wordpress so if you guys are wordpress fans let me know right and guys they have an amazing chat and support system right so 24 hours a day seven days a week and me and jay ran into so ran into some problems when we were trying to deploy this app but we managed to overcome it with the amazing team over at hosting all right there has the easiest control panel i've used when it comes to a hosting platform and i'm going to show you how to use it today and if you're worried about security they give you a free ssl certificate which saves you quite a lot of money to be honest right so if you want to get involved have your own domain and keep up with me in today's build go ahead affiliate link in the description go ahead check out the hostinger link use code sunny at checkout for seven percent off your annual plan right so you can get seven percent off your annual plan it's already cheap as hell right and you get 30 days money back guarantee so i really want to see everyone go ahead and have their own domain names that would be so cool right it'll be so so cool and you guys you know if you go ahead and use the code sony you're going to support the channel it's an affiliate link it's going to help the channel grow because you know what this is how i can keep on bringing you guys the content and just so you know i did go out and learn xjs just to bring it to you guys so we're going to do this together all right we're going to go ahead and learn a bunch of stuff together like i said go ahead and check out sunnysanga.com and also if you want to learn how to do that link in the description for hosting all right now guys are you ready let's jump into this build i have another surprise but we're going to jump into that in a second all right let's go ahead and start today's build okay so what are we building today's build we're building it with next js now next js is absolutely game changer for react right it introduces server side rendering typescript out of the box smart bundling root prefetching now what does root prefetching mean basically we don't need react anymore it does it in a very clever way and it's no configuration required right this stuff works out of the box and it is so easy to run with okay so like honestly if you guys don't believe me you are wondering why are we using next year's because i got that question on the instagram post and i got that throughout the comments so if you're wondering why we're going to use it just check out a bunch of these reasons right image optimization internationalization and also in the papa fam recently we covered this in the coaching course of really good stuff and it's a hybrid between server side rendered pages on your website and static site generated pages okay so without further ado let's go ahead and start off our first next js app okay so all you guys need to do to go ahead and get started is click the get started or start learning button go ahead and click uh set up right and again we're using mpx here so it's very simple to go ahead and use this right so i'm going to go ahead and open up our terminal over here pop this a little bit bigger so you guys can see and i'm going to go into my folder wherever i have my build so i have my builds over in this photo right so what we're going to do is we're going to instead of doing mpx create react app now we're going to be doing mpx create next app okay so pretty easy pretty easy to go ahead and set that up create next tab and then we're going to go ahead and call it whatever we want to call it so in our case we're going to call it whatsapp to what's up too all right let's call it what's up too that's easy all right so let's go ahead and do that what's up too and it will go ahead and set up our first next js app right now in the meantime if you're excited for this let me know now that was firstly that was blazing fast right so it should be really quick for you as well right now what we want to do is cd into that directory so cd whatsapp or tab 2 and then we're going to go ahead and type in code dot right now code dot is going to open up vs code in the correct place right so we want to get vs code opened up so i can close that terminal now and then we can go ahead and full screen rvs code right so vs code is what we're going to be using for today's build and obviously we're all very familiar with vs code so it should be a breeze for you guys getting used to this okay now this is recorded everything is going to be you know i'm live right now but it's all going to be posted up online afterwards i want you to really enjoy this piece of content right now smash that like button if you're excited for today's build and yeah we're going to get straight into this guys and i really have something awesome to show you guys so if you have watched any of my builds before you'll know i'm quite a fan of ai code completion right ai code completion allows me to code super quick right so previously i've been using something called like something like kite or something like that but i came across one which just changed the game for me right and even on the free tier i killed it with it right it literally was completing my code before i even typed it out and it was just making my whole experience easier so i know that a lot of you struggle to keep up with me on these builds so i really recommend you and try this out and get started with it okay so i'm going to introduce you guys over to tab nine now tab nine absolute amazing amazing platform okay now basically what it is right it all it does is it basically does code completion for us but they've mastered it over there right so if you want to get started with tab nine what you want to do and i see a bunch of you already know what this is right go ahead into the extensions type in tab nine and if you're wondering why i'm telling you this it's gonna help you keep up with me on today's build okay because it's gonna be quite intense so you can see 1.6 million people use tab nine it is incredible right and i can't i'm not gonna put something in front of you that i myself don't support so this guy's take it from your boy papariat this is good stuff okay it is an ai auto completion engine okay now it supports all modern programming languages so whether it's python javascript no js react type script everything it's going to go ahead and help you to code a lot faster in it right now it has a free forever basic plan so that is incredible so i recommend everyone go ahead sign up to it there's a link in the description right now where you can do it it's the first link in the description sign up to it let me know in the comments saying i signed up right it's going to be a lot easier for you to follow me if you do this because trust me it will just help you type a lot faster and get up to speed with me now the pro plan they did send me out a pro plan to go ahead and give a try and i have been loving it so far it actually introduces the gpu into the code completion and it introduces cloud computing which is pretty damn cool right so you're going to get cloud completion when you're doing this now do any of you know what gp2 is because gp2 is what they're using behind here right so it's actually a very clever ai model that they're using to process our natural text into a code completed outcome right so in terms of privacy if you're worried about oh my god i don't want my code to be in the cloud and all that stuff it's encrypted both ways so don't worry about it they use deep learning so the more you use this the more it's gonna improve and if you guys don't believe me then you know go ahead and like just just watch the video watch the video and see how fast we're gonna be doing this now i'm gonna quickly check out some of these comments we got marty says i missed you man we've got devry says i already signed up lab says keep it up sonny what's up guys good to see everyone here we already have nearly 400 people watching which is incredible nearly 500 likes i really want to get this video just through the roof because i have been excited for this one and this one is intense so get your coffee get your tab nine set up and uh guys as always use that link in the description it's an affiliate link it will support the channel it will help me keep on bringing this value okay so we're gonna have a lot of fun today right we've got loads of different tools we've got next js we have hostinger for domain names we have tab nine for auto completion which using a which is using ai man i'm excited guys i am damn damn excited okay so first thing we need to do is understand next.js right how do i even get started with this thing right so watching from south africa what's up dude all right so what we're going to do is we're going to go into the public folder not public sorry into the pages folder now we don't need react router when we're using this right so instead what we actually do here is the router is embedded in our file structure so depending on how we we basically go ahead and determine our folders that will determine the routes that we're going to see so in this case the first forward slash or home route that we're going to see is just index.js trust me it makes it a lot easier than you think so this is some boilerplate sort of code that they give us so i'm going to go ahead and press command j pull this up right now and then we're gonna go ahead and do this okay so um let me go and i can see some of you a lot of you guys are actually gonna you've already gone ahead and signed up that's incredible stuff guys so sign up like to both tab nine and hosting incredible platforms honestly i wouldn't put it in front of you unless i really believed in this stuff so it's it's it's really cool stuff to work with guys now first thing we're going to do is type in yarn dev okay now it's not npm star right or npm you know like i'm doing yarn dev because we're using next js so i'm going to type in yarn dev and this will go ahead and start a server on a localhost 3000. okay so i'm going to go ahead and click this link open it up for me right and then what we're going to see nice and guys if i didn't mention it before once we build this incredibly powerful app it's going to get deployed using versa okay so if you've been wanting to go ahead and try out versal definitely check it out it's going to be a lot of fun and it's actually incredibly it's kind of like a ci pipeline when you push your code to github it goes ahead and does a deployment for you so this is going to be a hell of a lot of fun okay so guys let's go ahead and this is the boilerplate now not only does this give you a great place to go ahead and check out the documentation learn some examples and how to deploy your app with versa okay but it's going to go ahead and give you somewhere to start so you're not entirely from the beginning right so what we're going to do here is i'm going to go ahead and press command j to hide my terminals you see the server is running here right so what we're going to see here is that the first thing that we must do is this new head component right the head component is actually really cool because if i go ahead and pop my code on the right left and then i put my website on the right you can see typically at the top right we usually just see create react app create next step what if i want that to be actually contextual i actually want that to mean something now i don't want it just to have you know a typical boring you know scenario i want it to actually be something which is a lot nicer and and easier to look at so what we're going to do is i'm going to go ahead and type in in this example just to show you let's go ahead and say whatsapp 2.0 whatsapp 2.0 and save right now you can see look at that it changes the head right so what's really cool here is in xjs you get this nice little head component where you can put anything that you want inside the head over here right now this is going to be a lot easier than doing you know things like helmet.js or something like that instead you just have a already ready to use component where anything we want in the inside of the head can be dynamically updated yes i said dynamically because we're inside a component we can go ahead and use our props or whatever it is to go ahead and change these values so that's really powerful even the link can be changed based on the route that we're in so really really cool stuff right so with that said what we're going to do is we're going to do our little clean up process to get started off guys we're going to go ahead and firstly delete the main right so everything inside this main bracket and the footer i'm going to go ahead and remove i'm going to pop a h1 which says let's build whatsapp 2.0 right and let's get the music up a little bit guys let's get energy up we just broke 500 likes which is incredible let's keep going guys navin says you're fabulous only putting a lot of effort in for us thank you so much um co-designers can you please explain why on dev right yandev allows us to start up the server in the development sort of way right so john start isn't going to be the one that we're looking for here john dev gives us fast reloading fast refresh and a lot more of that side of things now we will be remember we're using next right not just react right so next is sitting on top of react as a framework and then it basically supercharges react for us okay so let's go ahead and do this right so now what we're going to do is you'll also notice that they like to use npm module or css modules right so css modules are a different way of writing css you can't do a typical approach here but instead guys i'm going to be doing styled components right so how many of you let me know in the comment section right now how many of you guys like starred components so i'm gonna go over to start components right here all right so let's go over to stylecomponents.com and i'll show you guys how to go ahead and set this up it's super easy to get running with star components star components we've used them in a bunch of places if you don't know where it's used right now anyone recognize any of these companies pretty damn good right it's very very powerful sort of way of styling our components so to install it we're going to go ahead and do i'm going to do a yarn add styled components okay so i'm going to go ahead here pop open a second terminal and i'm just going to go ahead and say yarn add styled components and i'm going to install it this will go ahead and pop it into my project okay we have 420 people watching what's up papa fam i just love how we're growing man we're growing every single day if you're not already a part of the papa fam go ahead and check out proper react.com you know there's a link in the description and again if you want access to this code it's going to be uploaded to the proper github repo straight after this session okay so link for that is also in the description make sure you check it out support the channel right and also you'll get all the code that we're going to build today right so what we're going to do is that's successfully installed so the next step that we want to go ahead and actually do is use it right but there is a little additional step in fact it's actually gone right we don't actually need to do that anymore right so we don't need to worry about that but we've installed it so it's very easy to use and i'll show you how we can use a start component um very very shortly so what we're going to do right now is i like i said before index.js points towards let's go to our app points towards our home directory okay so if i wanted to go ahead and let's say have a forward slash chat right sort of page right so if i wanted it to be forward slash chat how do i do that right how do i get it working so it's very simple actually all i need to do hey thank you so much sumit with that five dollar donation my nine five job hasn't limited any hasn't limited my learning curve all thanks to you cheers papa fam dude i love you and appreciate you thank you so much for kicking things off for the donations appreciate that man i appreciate that hugely right yeah a lot of you og's are gonna know who samit is right he's actually killing that six figure job right now absolutely incredible stuff right so what we're gonna see now is we're gonna go ahead and create a page chord and i'm gonna call that chat.js right now if you notice chat dot js is simply a react functional component right so this is a functional component and if i go ahead and put in a h1 saying oh let's just go ahead and pop in a h1 and here's the chat page and hit save now if i go to forward slash chat right and i don't want to do any auto complete here so for slash chat enter you guys can see look this is the chat page so it's that easy to have your pages rooting inside of next.js right so out of the box it is that simple which is incredible right like we have to do no react router we have to do no sort of stuff like that it just works out of the box right so this is very very powerful stuff um go ahead and smash that thumbs up and we're almost at 600 can we break 600 guys i think we can i really think we can at this point all right let me go ahead and pop open some music let's do let's go ahead and do this right i've got some new got some new stuff right now right and again i can share the papa farm playlist as well which is awesome okay so we're not too interested with the chat page right now where we're going to start with the home page and the first thing we need to do okay is i'm going to go ahead and actually build a sidebar where i'm going to build a sidebar and we're going to start getting that looking a bit nice right so the sidebar that we're going to be building is this sidebar right here okay so i want to build this sidebar first and you can see what we've gone for here is a very flat design right which is very modern we're going to be using material ui you guys are very familiar with material ui and um so it's going to be a lot of fun to be doing that what's up pedro hey we've got the puppet fam in the house if you're inside the papa fam community right now with zero to full stack hero let everyone know in the comments right you guys are actual ogs oh we have leonie with that five euro 50 donation hey sonny thanks for your netflix cone tutorials i build my own netflix film with my design get some movies from my uh nas and the api i got on a incredible stuff dude that's what we're talking about that's why we're here to stay hey my beautiful girlfriend is in the house too hey sunny how is it going all right so let's carry on guys you can see oh look at that that was actually jumped in as well look at that nice now the way that this chat works is we do have one-to-one chat functionality right so you can go ahead and start a new chat and let's just go ahead and say somebody like sunny gmail.com so obviously this is i don't know who this is if i because that's not me and then i can click it and you can see it would actually start a conversation with this person right and then when they sign in it will populate their details and their last active will become known and we can kind of push forward on that front right so this is gonna be a lot of fun to go ahead and set all of this up because you guys were asking for it you guys were asking for one-to-one support so your boy came through and we're gonna be doing it first thing we need to do is build the sidebar component so again you guys have always asked me right sonny let's have some kind of photo structure okay so again i'm listening to you guys i'm always you know trying to do what's right so let's go ahead and add in a folder called components okay so the components are going to be for any reusable aspect of our app okay so this is going to be really really quite a powerful sort of structure that we're going to put in place and inside of him i'm going to create a file called sidebar dot js okay now interesting to know if it's a component we don't we necessarily you know we'd like to keep the convention of uppercase s but inside the pages because these are basically our roots right so forward slash chat js forward slash uh this would just be forward slash here we have to actually keep them lower case right but in the components we can keep them up case rival thank you so much for that donation decided to learn react a couple of months ago magically i was recommending your content by youtube lots of learning and a clones later here i'm watching you live for the first time thank you ravan and welcome to the pop fam dude incredible to have you here we just broke 600 likes i love you guys really really appreciate you guys this is blowing up i think we're gonna break a thousand today let's keep going all right this is incredible honestly wow all right so for the sidebar i'm gonna do underscore rfce and the underscore gets rid of the new import react from react we don't actually need that anymore in case you didn't know okay so what i'm gonna do here is i'm gonna go ahead and we have our nice little sidebar okay and then what i wanna first have is we're gonna basically split this up so let's think about this right now right right here we have a few different parts right we have the header over here right so this little sort of header over here then we have the search bar okay so the search bar is this section over here right and then we have like this little chat for you know creating a new chat and then we have the list of chat elements okay and then we have this whole separate component but this right here is what we're building right now because this is the sidebar component and we're going to be doing it with material ui style components and firebase okay so it's going to be a hell of a lot of fun junior cortes there's something here that got yeah you guys are awesome thank you so much almost 500 people watching live this is incredible all right so what we're going to do now is we're going to go ahead and create our first style component right so a style component is very simple right don't get freaked out if you don't understand what's going on with style components it will make sense and like all of this stuff it just takes time and practice right so let's go ahead and see how we do it for the first time what you want to do is you want to say const and the convention i like to use and you can see tab nine coming in clutch already trying to guess what i'm trying to do so here we can say container equals and you can see look it's already started to auto complete and here i'm going to say styled dot right and then you can see you can do it many different ways in this case i'm going to do start dot div okay and then what this will do is you have backticks right now the backticks are basically where we put in the css for this component right so this sort of styled component so this is typically going to replace any css that we have and then all i need to do is this is a style div right so in this case all i'm going to do is i'm going to go ahead and pop these so that these are now containers so this will translate to a div with the styles that i put inside of here okay so it's pretty much very simple when you think of it like that right so what i'm going to do is i'm actually going to save this right now go over to my let's go ahead to our index and i'm actually going to delete that chat.js because we don't actually need that anymore right and inside of my chat what i'm going to do is instead of let's build whatsapp 2.0 i'm just going to render my sidebar so that way we can start to see it in action okay so we've got the sidebar over here perfect right and i'm going to hit save right nice and then what we're going to do is start is not defined okay so what we're going to do over here is i'm going to go to the function and i'm going to go up to the top and i'm going to go ahead and import styled from start component so here you can see import styled from styled components if i hit save on that we should see a blank screen which is correct at the moment right if i put in h1 here saying sidebar we should see a sidebar perfect right now you can see everything is centered right we don't want it to be centered out of the box so i'm gonna go back to my index and here we have a div surrounding everything okay now i don't want any pre-styling before this right so instead what i'm gonna do is i can just simply get rid of this class name and then we should see you know very empty sort of styling from the basic get-go now i'm going to go ahead and get rid of the styles over here and you can clean up the files over here and get rid of in this case we don't need home.module.css in the case of global i'm going to keep it as that as it is okay now what we're going to do is here we can see our sidebar being rendered okay and then what we're going to do is actually go ahead and start to build this one out so the first thing i want to do is build that beautiful little header that we were talking about earlier right so this little header section over here now for the header again you're going to get a little refresher on you know flexbox and things like that for those of you asking if it's responsive it's responsive to a degree right we're going to fit in as much as we can do inside of this tutorial and then we're going to go ahead and uh you know you can upgrade it as part of your homework to make it fully mobile responsive and add in midi queries if you want to okay so what we're gonna do now is i'm gonna go ahead and create a header section what i like about style components is let's go ahead and say i wanna create a header component right what i can do is i can easily say const header equals styled and you see tab9 coming in clutch with the autocomplete right style div right and then over here what i can do is i can go ahead and get rid of this i can just say okay let's target the header and also can you guys you can see now that it's very easy to read our code right there's a container there is a header right so this is a lot simpler to use and it's really really cool right right so hey ginny cortez says say less i'm signing up right now incredible stuff guys if you sign up right now i will literally shout you out right so that's incredible stuff um and they what they're talking about zero full stack here our link is in the description if you want to join us right so we have coaching calls everything like this is this stuff happens weekly okay so it's really really intense it's really really fun right so at the top we have the header now inside the header i need the avatar i need all of these beautiful things now these come from material ui so what i'm going to do is i'm going to go over to materialui.com and i'm going to install this and we've done this a few times in previous builds but i'm going to show you as it's from scratch every time so i'm going to go here and i'm going to type in yarn add material ui okay yarn add material ui there we go and then you can see my face is blocking it so you can see material ui core okay and then what we're going to do is we're going to go ahead and go back to material ui type in icons in the search field and then we're going to go ahead and go here oh nice thank you so much ravanth p shankar on behalf of me and everyone else thank you for such incredible content you are changing lives for the good more power to you keep it going sunny thank you so much ravant and guys whether it's a donation whether it's a smashing that thumbs up button just spread the love spread this content and help people learn more and be better every single day that is the mission of the papa fam and you know we're just gonna keep it going right so we need to now install the icon set because we're going to be using these icons as well so i'm going to actually going to just copy the yarn command so let's go ahead and do that i'm going to type in yarn add material ui icons right so that's going to go ahead and do that installation for us all right so let's go ahead and pop this open right now and there we go okay so you know me guys i'm always trying to learn stretch my limits so that way you guys benefit because i will learn something digest it and then spear back out in the simplest way possible and it takes a lot of effort so i really do appreciate the love and you know everyone helping out in sharing this up okay so now that we're done there i'm gonna go ahead and carry on with the build so we have the header up and running okay so what i'm going to do is i need an avatar whoa vivid elites another donation five dollars sunny i built six year clones i'm only aiming at nine plus good projects for applying to jobs when i may move out of my small town in a few months thank you dude thank you for that lovely donation and keep it up with the conte keeping up with building those clones right so i'm glad you're enjoying the content all right so in the header i need an avatar right now i want to style this avatar so i kind of want to combine my avatar with styled components now how do i do that can i do that right yes the question is it's actually very easy so i'm going to go here and say const user avatar and this is going to be equals styled and rather than a style div or you know like something like that if i only use my own custom component i put a parentheses and then i'll pop in the avatar right so in this case it's going to be an avatar and i'm going to go ahead and import this from material ui core okay so now we say styled uh avatar and then i do the backticks right now when i'm typing in here right you might be wondering yours doesn't give you syntax highlighting for styled components to fix that go over to the extensions over here after you've installed tab nine make sure you install tab nine and then go down and you wanna install this package styled component uh no it's not this one sorry vs code styled components this will give you syntax highlighting for when you're using styled components okay if you don't do this you're not going to get all the fancy colors and everything like that and it can be a little bit tricky when you're trying to get your auto complete to work with you all right so make sure you do that it will save you a bunch of headaches okay and uh avnisha style commercial next month to say next is oh yeah yeah hopefully guys hopefully we can get them firebase man oh my god just somebody reach out to firebase get them to sponsor us all right so we got the user avatar so if i want to go ahead and use this i just say user avatar right user avatar and then like it's a self-closing component and then i can go ahead and save now if i go ahead and check out our app over here and then let's go ahead and refresh now you can see we've got a lovely avatar at the top here now what's really cool about this just to prove to you guys that it actually adds the styles over here if i had a margin of 10 pixels on top of this right now and save you can see look at that we get the styles being applied to the component over here which is incredible right really really nice stuff like it's a very simple way of working when you get used to style components the even better part about this is if you have props you can feed them into your component as well okay um ajit singh says i got a job of 70k because of you man thank you dude that that's incredible man well done 450 people watching almost at 700 likes already and we just started this video god damn like 30 minutes ago wow let's keep going guys let's keep going so the user avatar is here right now for now i don't really care about the source so i'm going to leave it as this like you know stock image okay so i'm going to go ahead and zoom in so you guys can see it the next thing i want to do is i want to have some icons right so obviously over here i have icon containers right so how do i go ahead and do that all right so what i'm going to do is i'm actually going to create a div to surround it right icons container and then what i'm going to do is i need to just create that icons container so i'm going to copy the name go down here and say cons icons container equals a styled div okay and i'm going to do the backticks and now we've got our style div that is ready to go so inside of our star in our icons container and these are basically going to replace the divs right they're just styled versions of them now yes you can go ahead and move this into a separate file to clean up your code right so just like we have an external css file you can do the same thing with this right and it's going to work it's going to be nice to use all right so what we're going to do now is use i'm going gonna pull in a chat icon and a more vertical uh what's up harpery good to see you man hey we got the family now all right so now i'm gonna go at the literal family thank you sanyo for the donation this is awesome let's go thank you man appreciate it so i'm gonna go ahead and pop in the chat icon and i also want the more vertical icon now if you always wondered something how the hell do you get your icons right i go to material ui type in icons in the top i go down here you can search the full list of these icons over here and then i pretty much just search it right so in this case if i want dots you can see i get the more vertical icon i click it and that's how i get this line of code right so it's very simple stuff you can go ahead and extend your apps by doing that simple approach right it's a lot easier than you know grabbing pictures from all over the place kaiser says the boss is back what's up dude right so now i'm gonna go ahead and pop it in the two icons okay so i've got the chat icon and then i'm gonna go ahead and pop in the more vertical icon okay so in this case i'm gonna do more vert icon so i'm just gonna you know i'm lazy i'm gonna go ahead and grab this i'm gonna pop this here and then i'm gonna go ahead and do this now if i go back to my application you guys can see we get those beautiful looking icons ready to go okay now i want these to be clickable buttons okay the joker is here he says you're awesome sonny dude you're awesome for turning up thank you so much right now check this out so if you i want it to be clickable i want this like really nice googly ripple effect right so how do i get that so and it's very simple actually all you need to do is type in icon button okay and you can see material ui will pop up as an auto complete and we simply pull it in from material ui core okay now this is very good because what you can do here is you can simply enclose your chat icon inside of icon button as a child component and what this does is it makes it a button which is super easy to do right that didn't take a lot of effort and now you can see the difference between this button and this one right so we're going to do the same thing again and we're going to go ahead and pop this here and this is definitely one that i recommend everyone gets on their portfolio you can see tab 9 coming in clutch every time guys let me know again how many of you went ahead and downloaded tab nine in the description right so make sure you're using it if you're not using it you're slowing yourself down right it's like it literally boosted my production speed so much right and also hosting it sign up all right let's carry on right so we've got the icons pretty much set up right now okay then what we're going to do is we're going to go ahead and style the header section right so i want to style this header section first so that we can get it looking just as we need it okay so the first thing i'm going to do is i'm going to go to my header over here and it's very you know it's very like explicit of what's going on right it's very clear as what's happening so here if i type in display flex and you also get a fast refresh which is very nice you see as we do it we're going to see updates right this is next yes at its finest it's going to really work nice uh celeb says install tab 9 hey that's what i'm talking about dude and then what i'm going to do is i'm going to make this a position sticky because i'm going to actually be using this later on when we say if the list gets into our overflow state for example like here if i go ahead and make this a bit smaller right i want the top to stick right so that's where we're applying that sticky element right so that's what we're doing and also guys what's up i can see everyone dropping in all right somebody says revenge nice donation he says can you please show us how to use miraculous media queries today on the next build we'd love to learn it um yes of course i will do that in the next build i can show you guys how to do it okay so i'm gonna go ahead and chuck in a top of zero then i'm gonna type in a background color of white right because when we have that over scroll it's gonna go ahead and be an important factor then i'm gonna drop a z index of one so that way it's on top of everything else when we get that overflow right so what i'm gonna do now is go ahead and do justify content right i want this to space itself out i don't want it to be next to each other and right now you can see it's massively spacing itself out and this is because we only have the sidebar on there and this is a part of you know this is actually a very important part i'm going to go ahead and sort of zoom in at this point right this is a part of doing responsive design so this is actually my entire sidebar but once we combine it with the other components it will react and be responsive to the components that it sits around right so if that's really cool smash that thumbs up button all right so i think we're almost at 700 so i think we can do this guys just go ahead get me to 700 let's keep going right so we've got the space between happening and then the next thing i want to do is align the items centrally and you can see look at that that's a prime example of where tab 9 comes in right so again if i do align items and then if i go ahead and type in center you see tab 9 is there to auto completed for me all right next thing i'm going to do is do a padding and this padding is going to be 15 pixels i'm going to do a height of 80 pixels because this will help us with our styling issues later and then i'm going to put a border bottom which is one pixel solid white smoke right and if you're an og you will know that i love white smoke right white smoke is such a subtle color you guys can see that if you can't see it then just you know zoom in a little bit right 725 likes oh wow mine's frozen on my side okay that's incredible wow i didn't know that damn i'm gonna refresh mine and see how that turns out but that's incredible wow we're at 725 likes looks like somebody's on two times speed you know how we do it guys we step up we learn more which means that we have to perform at a higher level okay 735 now that's what i'm talking about guys wow let's go all right so at this point what we're going to do is we're going to go ahead and style out the user avatar right so the user avatar is i want to go ahead and make this a little bit kind of you know i want to add some styles to this i'm going to firstly say when i hover over it i want it to kind of you know be a cursor so i want it to be say cursor pointer and hit save right so if i go ahead and sort of you know oops what happened here i'll go ahead and hit save on this let's see well there we go what has happened here right there we go now if you see when i hover over this i get the nice little cursor pointer right now the next thing i want to do is i want to apply a hover effect now what's really cool about style components is if i do a colon hover it applies it on that sort of you know when you do that action when you hover over it it will apply those styles what the hell just happened guys we just hit 760 likes from 700 in in like two seconds like wow this is crazy right so at this point i'm going to do an opacity and this is a little trick that i like obviously it's kind of you know it's up to you guys if you want to do it but at this point i'm going to say opacity 0.8 okay and then this will do the following right so that looks very nice at this point everything is doing everything as we wanted it to so if i go ahead and hover so we get a nice little effect okay um and then the next thing we're going to do is we're going to go ahead and style out the let's figure this one out let's style out the let's get the next bit done so we actually want to get the search done right so the search is this one here so the search in the chat and now this one is actually a bit easier than we would think right especially when we're using style components and the way we do it is outside of the header what i'm going to do is i'm going to type in i'm going to go ahead and type in um search right and this is going to be my search container okay now make sure that you don't accidentally do and like an auto import there because it's very easy to make that mistake but i'm going to do a cons touch and you can see like look how quick that is with tab nine right so i've got my search container up and running at this point then i also need the search icon which is this beautiful icon over here so in order to get that i just go ahead and say search icon okay oops search icon like so now what i'm going to do is i'm going to go ahead and pop in i'm going to i need to import this right so in order to import this one it's going to be this line of code over here right so we're going to need the search icon like so right so i'm going to hit save on that and then on our code we should be able to see the little search icon pop up okay so this is going to be really clean if it works like that how does it feel to be a god level of web dev thank you so much but guys i always look at it as as i'm a beginner and i can learn and improve on my skills humble be humble always okay like i always walk into a room thinking i can learn something new today i never walk in i never call myself an expert okay i mean like if you've heard me say it i don't mean it right i'm always like you know i'm always trying to focus on improving so you i want you guys to do the same thing right so let's go ahead and pop in the search input right now you're probably wondering that's not a that's not a component something but i'm going to create one guys it's going to be a search input and this one is going to be a styled so you just go ahead and say con search input it's not going to be a div it's going to be a styled input and that's how you change the input types for native html elements right as soon as i hit save there you go boom we get a styled input so you see it's actually very easy okay very very easy to do this stuff now what i want to do at this point is i need a little beautiful placeholder which says search and chat so that's actually very easy to add now the props and attributes all come through as expected so if i go ahead and do this you're still going to get the same ones okay the falcon says it is not live it is live dude this is live right now all right and then what we want to do is we're going to style this to be the way we want it okay so obviously my goal is to make this look like this where it says search and chat so in order to do that i'm going to go ahead and go to my styled component over here so this search icon and what i like about this is it's in the same file so it's actually very clear for you guys to understand what's going on right so this is actually very very simple for you guys to go ahead and understand what's going on so at this point with the search i'm going to go ahead and say display flex right so display flex and then what i want to do is i'm going to go ahead and say align item centrally so a line item center and we're also going to do a padding of 5 pixels oops what have i done there padding of 5 pixels and then i'm going gonna do a border radius right a border radius of two pixels right so two pixels over here and the final thing is let's go ahead and see and that's actually quite small so i'm gonna change this padding to a 20 pixel and that looks a bit more like what we're trying to get to okay so at this point what i want to do is i want to go to my search input right the search input is the next part where we're going to style it out so if we go over to our search input and we try and find that firstly where the hell is that one all right so we need let me just find it okay there we go all right so the first thing is when i click it i don't want this blue outline right how do i get rid of that to get rid of it we do outline width right outline width and we're going to do a zero okay and then if i click it now you can see it's normal blue outline second thing i want to do is do a border none okay so that makes it a lot neater and then i'm gonna do a flex one because i want it to use up the entire width of its container right so flex one boom right now if i go ahead and comment out this you're gonna see that it does in fact use up the entire width and then what we can do is to show you that obviously that was a very illustrative example so now if i go ahead and type in see it's gonna use up the full extent of the page right so that's very very clean and do it right so with this said now we're gonna go ahead and do um next.js is remember next year everyone's asking an extras is better than react it's a framework used with react okay so it's gonna supercharge your apps it is definitely one of those skills to know about and you're gonna do nothing but benefit by knowing next year so stop being lazy stop making excuses learn it put in the time and that's why i'm here what's up guys legends of the qriket says hi legend what's up dude all right so now what we're going to do is we are going to jump straight back in and we've done our search section right so this is very very close to what we wanted right so the next thing i want to do is i'm going to have a sidebar button okay so sai baba is going to be the one that is responsible for starting a new chat now how many of you recognize this theme song right if you know where this is from you are a papa fam og and we're just about to break 800 likes goddamn thank you so much guys honestly that's made my day like it makes everything worth it right so what i'm gonna do now is i'm gonna go ahead and type in sidebar button right and i'm going to do a self-closing actually it's not going to be self-closing it's a button and then i'm going to do sidebar button over here and this button is going to say start a new chat hey there we go the netflix five-day intro that was it guys that's how i know you stuck around that's awesome so here i'm going to say const sidebar button this is going to be a styled button okay and then there we go all right so we have the style button up here now as soon as i hit save on this you can see start a new chat comes in now i'm going to go ahead and create the styles applicable for this one and in order to do that right what i'm going to do in this very interesting learning tip over here right harpery says wwe yeah you know i mean i wouldn't be surprised if it was first in wwe first thing i want to do is do a width of 100 right so width of 100 is going to basically go ahead and expand this so it uses up the entire length the next thing i want to do is i want to make this actually have a border top and bottom now if you notice over here right firstly this is actually oh wait a sec okay this is a material ui button right so you're probably wondering hang on this is not the same button that we have here so instead of using a native html element i want to use the material ui button so i'm going to just type in button import that from material ui right so now we have the button from material ui core and then i'm going to go ahead and hit save and look at that now we have a material ui button right it's as simple as that to do it the next thing i want to do the discord link has expired oh really damn um if somebody could go ahead and share it maybe jay if you can go and share a new discord link then go ahead and do that but yeah our discord is blowing up right now we have a new moderator and it's just it's so nice guys it's so nice we have like four thousand people three thousand four four thousand people is it's just crazy we're going so quick right um so the next thing we're gonna do is we're gonna go ahead and add in a border top and border bottom okay so this is an interesting learning curve if i go ahead and add these two styles in right so over here you're probably wondering whoa well something i don't see anything right hey there we go frank's in the house dropping ten dollars like just you know as frank does he says don't be afraid to learn new stuff next yes is very cool let's go rich programmer aka frank thank you so much dude appreciate you always and glad to have you here man all right so now you can see the border top and bottom actually doesn't it it's basically getting beaten by material ui specificity or whatever you're gonna say basically material ui has priority okay yeah i can't i can't pronounce it even in coaching calls i'm always like you know around right flocking around right so here what i'm going to say is a very cool thing in style components so if you do amberson amazon amazon and then curly brackets and then you pop in these ones right what it's going to do is it's going to increase the specific increase the priority okay of the rule right so it increases the priority of the rule and now you can see look at that we get those beautiful looking lines okay so with that done we're starting to look very very good right at this point it's time to look very very nice now this looks great okay the next thing i wanted to do is we will have these chat components and notice i said components because these are all going to be reusable components which accept a prop okay so we will be doing this in just a sec but instead what we do now is as we typically do is we always mark out the um we always mark it out before we do okay so this is where the chats so we just say like a list of chats okay this list of chats right now what i need to do is i need like a back end to support this right i need a back end to go ahead and support you know the storing of these chats and things like that now very interesting thing about today's build one-to-one messaging can be done in many different ways right i have done a very unique way in today's build which is actually very cool and you guys are going to learn about the architecture side of it right so it's actually going to be a very good tutorial for you if you've been interested in how to do one-to-one um messaging okay uh abeer says hi you keep on spamming the same message please don't spam it thank you otherwise we're gonna have to ban all right um but let's go ahead and basically set up firebase now okay so first thing i'm gonna do is i'm gonna go to firebase.google.com okay and this is gonna be responsible for setting up all of our you know everything that's gonna be used to power up our application okay so in this case whatsapp 2.0 sign in to your google account go to the console and then we need to go ahead and create a console okay so you see i've got a bunch of apps i've been building and then what we're going to do here is add a project and then here i'm going to say whatsapp to okay and i'm going to click continue and i'm going to disable google analytics because i'm not too fussed about that and then it creates the project now google has an amazing suite of tools known as firebase which allows us to have authentication it allows us to have a real-time firestore database which is incredible it's like a jacked up nosql database so if you're not familiar with nosql this will be a good little refresher for you or learning experience and uh yeah it gives us a bunch of other powerful things including things like translator extensions which is incredible and we just covered this inside of zero to full stack hero in a coaching call crazy stuff if you want to see it join in we're gonna click continue now once we have this what's up ken good to see you man now what we're gonna do is i'm gonna click firestore database we need to prepare the database so it's ready to use so what we're going to do is click create database start in test mode and click next then we need to select the location in this case i'm happy with us it's central pretty much everywhere and then we're going to go ahead and move with it right so now what we're going to do is wait for this to go ahead and get set up right and then what we're going to do is wait for this it shouldn't take too long the next step is to go ahead and actually install firebase into our project so while we wait for that to go ahead and do i'm gonna hit command j and i'm gonna type in yarn add firebase okay this will go ahead and add in firebase to our dependencies inside of our project right so this goes ahead and does it now you can see it says package lock found this is not what you want right in this case i've combined yarn and npm which is a big no-no when you're doing development work so if you ever come into this right this problem where you have yarn and npm and you don't know how to fix it i will show you how to do it right now okay simple you go over to your files go to the package lock and you can see here we shouldn't have both the yarn lock and a package lock you should have one or the other this is for npm this is for yarn all i'm going to do is simply delete my package lock so it's going to rely on yarn instead okay that's very easy to do and then all you need to do is do a yarn and then it will go ahead and just fix up your packages okay so what we've done is we've installed it into our project now we have cloud firestore set up and ready to go so the next step we're going to do is hit up our authentication and set this up so we're going to click get started and this is pretty much you know it's very simple there you go it's done we're going to be using google authentication for today so we're going to click on enable over here we're going to click on a project support email which will be the one that you set up the account we have click save now once we have the sign in provider done we can go ahead and proceed to the next step okay so the next step is we need to click on the cog project settings okay so we have our front end which is which is the the next js app then we have firebase as our powerful back end okay so here i'm going to click on this little button over here and then i'm going to type in whatsapp too and i'm going to click on uh register the app okay 840 likes guys let's get to 900 i'm telling you we can do this we can we're going to pass a thousand i i know it we're gonna pass a thousand right click continue to console and then if we go down here and we click config this is what i'm looking for okay so i'm gonna click on this little copy icon over here and then i'm gonna go into my application pop open my uh code and then what i'm going to do is i'm just going to you know hide everything at the moment go down to where my package json is to that level and i'm going to click plus and i'm going to type in firebase.js all right so this is going to be where my firebase lives my firebase config the first thing i'm going to do is i'm going to import firebase from firebase okay so import firebase from firebase and then what i'm going to do is and actually don't need that to be capital there we go and i'm going to paste the config that i got from the sort of a firebase config section inside of the console right then what i'm going to do is i need to set up access to my firebase database now i love this song and this always reminds me of the papa fam vibe so we're gonna go ahead and turn this on a little bit off but this one is so nice it always reminds me of you know when we started off the papa fam and we kicked things off but yeah it's gonna be fun right if you're if you're not already subscribed to this channel then please join the papa fam subscribe i i it really means a lot all right so let's go ahead and carry on so i'm going to go ahead and initialize the app so first thing you want to do guys is because we're doing some server side rendering we actually want to protect ourselves in case we've already initialized the app right so because we have a fast refresh mechanism then we don't want to go ahead and actually re-initialize the app a second time if we don't need to the way we do that is simple we say const app and we say okay if there was no firebase apps available previously so if we haven't previously initialized it and we do it this way then we say okay then go ahead and initialize the app so we say firebase.initialize app and we use the config above okay now this is called a ternary expression right so this will actually go ahead and sort of initialize the app and we can do else if the app was already initialized before then we can just use the app that is already initialized okay so we can say firebase.app all right so when you're doing server side rendering you need to be a little bit careful of this step right so this is simply what you want to go ahead and pop in right so this will basically say if we've already initialized it then just use the one that we already initialized with otherwise go ahead and initialize a new one with the config okay so that's very nice very clean now what we're going to do is we're going to go ahead and go down to the bottom and say const db okay now i'm going to go ahead and change the coding background let's change it to a blue there we go nice all right so i'm going to say cons db equals firebase dot and it's not the database we're going to use firestore but in this case i can actually go ahead and use the app that i initialized and say firestore all right so this will give me the firestore instance second thing i want to do is get the authentication instance so when i come to use the authentication modules then i'm going to go ahead and say app.auth right and then i'm going to go ahead and initialize that and that right so that will go ahead and you know set all of that stuff up um and then let me actually go ahead and get you guys a new discord link right all right let me go ahead and do that and uh there you go my assistant will go ahead and do that nice so we've got the authentication and db and the final thing is i'm going to go ahead and get a provider okay so i'm gonna go ahead and get a provider right now so we're gonna say const provider and then i'm gonna say equals new firebase dot auth dot and then we're gonna say google auth provider right and this is a function so we're going to go ahead and execute there we go so now i've got the three core things i've got access to the database i've got access to the authentication and i've got access to the provider okay the final thing i need to do is export it so i can use it outside so i'm gonna say export the db the authentication and the provider modules okay this will allow us to have access to our firebase connections inside of our application right so this is all done we've connected firebase up from our client to the backend right so we're almost at 900 likes whoa guys let's keep going that's crazy right that's actually crazy now let me know if you're watching from you know twitch and things like that i can't actually see the twitch chat saying that but if you're watching from twitch hope you're enjoying the quality right the quality is really nice finn am i hope that answers your question because these are really live there you go it's live all right so what we're going to do now is we're going to go ahead and go down to our sidebar right and what i want to do is i'm actually going to kick things off on the sidebar and what i want to do is i want to create a chat right so when i click on start a new chat i'm going to go ahead and say on click so when we have a click that kicks off i'm going to say create a chat right now obviously i need to create this function inside of our code so i'm going to go up before the return block i'm going to say const create chat equals and then this will usually have an event but in this case we don't care about it too much right so i'm going to go ahead and leave the event and then we have our i know all right dude says there's something nearly 1k likes in one hour i know man that is it's just crazy right like that what you know this is so cool right so what we're going to do is we create the chat right so what i'm going to do is i'm going to prompt the user because the the behavior that i want is i want this kind of baby away basically i click it and it prompts me right so in order to get that i say const and then i go ahead and say const input equals and i can just go ahead and say prompt right and then when i do this i can go ahead and say uh thank you apparup busetti for that lovely donation i appreciate it and then here i'm actually gonna have a nice little message i'm gonna say please enter an email address for the user you wish to chat with right so you know that's how we sound all professional all right and then i want to protect the sort of like you should always go ahead and jxd says tuning in during a brief moment you need this station i have like keep up the content you got i did i'm here to stay all right so now what i'm going to do is i'm going to say okay if there was no input right then i would i want to kind of stop this code from executing because i want to protect my code from any sort of you know unnecessary things uh like sort of you know any validation errors and things like that so we don't we don't want to do that right the next thing i want to do okay is i want to make sure that either a that the email is valid and i also want to check if the chat already exists okay so i'm going to be introducing two things here where i'm going to be introducing an email validator which is basically a package which i'm going to pull in which will tell me if that email is in the correct format or not the second thing i'm going to do is install react hooks react firebase hooks right which will actually allow us to go ahead and connect to firebase at the db level and do all of the connections real time in such an easy fashion okay so it's going to be so easy to follow along with this it's just like it's game changer level stuff right so the first thing i want to do is install email validator so this is going to be helpful for when i'm going to go ahead and um you know validate that that beautiful email so what we're going to do firstly is i'm going to go ahead and say let me just go ahead and show you guys i'm going to say yarn add email validator okay so i'm going to make that a bit bigger yarn and email validator and this is going to be a very simple installation right there we go and then what we're going to do is i'm going to hide that one and we're going to go ahead and import everything and call it the email validator right and in order to use it it's very simple actually we just say if and i can say email validator and it's going to be capital e dot and this has a function inside of it called validate over here right and all we need to do is pass in our input and it will basically return a boolean value you can see this right boolean value and that is going to go ahead and uh tell us if it's a correct email or not okay so let's go ahead and do it right so we've got email validator validate input okay so that's gonna be the first thing we do and then what i'm gonna do is go ahead and say okay if the email was valid then i need to push this into the database okay now how do i push this into the database right so the first thing is we actually need to have a login sort of process already set up before this but i will get into this in a sec okay so we're going to pause here for a second we're going to go ahead and say this is where we would we need to add the chat into the db right and sort of chat's collection okay so we're gonna pause here for a second and actually go ahead and we'll carry on with that in just a sec now i need a login right i need a login because here i actually need the user who is logged in right we're going to need the user who is logged in at this point so in order to do that what we're going to do is we're going to go ahead and we're going to go ahead and set this bit up now so the first thing i need to do is go into my index my app.js right now app.js is an interesting one so index.js is our home page app.js is much like the app.js that we see in react okay it's where the whole thing starts initially okay so when we see return component this can you can essentially refer to as the point at which we start rooting okay so after we do this return component everything with the routing will apply right so you'll have a forward slash here if i had a chat.js here it would show that and so forth right but before that we can do very interesting things on the server to make sure that we're showing the correct things okay so at this point what i want to do is i need the user right i need some kind of a login right and then we need to check if there is a login or if there is a user and root the user accordingly so what we need is first react firebase hooks okay so in order to get react firebase hooks i'm gonna go ahead and i'm gonna go ahead and say um yarn add react firebase hooks right so i'm gonna go ahead and pop this in and the magnetic says really hlc while they're deprecated this isn't a hlc uh at the moment dude so uh we've gotta fix your facts dude right um before we get the the the complete devs in the chat right right so um right now what we're gonna do is we've got react firebase over here right so we've done an install and then what i'm going to do is i'm going to go ahead and pull in a very handy hook okay so i'm going to pull in a really nice hook from react firebase hooks and this hook is called use auth state right from react firebase hooks four slash aust okay so now what i need to do is i go down here and i just go ahead and uh i go ahead and say const user right and i can go ahead and say equals use auth state right and if i go ahead and pass in my authentication that i basically previously set up so this is a lowercase a sorry and then what i can do here is i can say import right and i can go ahead and import the authentication and i will need the db in a bit and i'm going to import that from let's go ahead and go into our firebase right our local firebase file so now what i'm doing is this will actually go to firebase say to me i say to fibers do is there a user logged in right now yes or no right if there is this will get that property right if there isn't this will be a sort of a faulty value okay so what i can do with that information is i can go ahead and say if there is no user then i can return before i return any of the rest of the app right before this is the basically the entire app right but before i do that if there is no user i'm going to return let's just say a login page okay so we're going to go ahead and pop in a login page over here right so i'm going to go ahead and actually build this one out right sunny remove the celebration and donation right no no we do have a celebration on donation um and guys we're almost at a thousand likes just smash that thumbs up button if you're watching this if you enjoy it incredible stuff thank you so much right so we're gonna go ahead and create a login page right now so in order to do that i'm going to go ahead and say login dot js and again this will root to forward slash login all right avnisa sunny uh so it says 940 likes in one hour amazing thank you so much it's incredible honestly underscore rfc pop that open and we've got the login okay now for the login page it's actually got quite a simple layout okay so the first thing i'm going to do is have a container over here okay so the container at the top and then i'm going to go ahead and say const container equals and you can see look at the tab nine just coming in and finishing it off right so we can say div and then what i can do is this will actually go ahead and populate now i do need to import styled from start components at the top of the file so i can go ahead and do it like so let me go ahead and make it a bit bigger there we go all right and then what we want to do is actually have this sort of setup in a firstly i want the page itself to say login okay so i want the page itself to say login at the top of the page so i'm going to import the head component from next.js there we go and this will change the title of the page to a login right which should be a very very clean work says i got hired for react developer and your tutorials were great reason for that thanks for the content sonny dude this is what we're talking about like this is incredible like i'm actually able to you know learn new pieces of tech like simplify them teach you guys them and you guys are benefiting in the real world from that right which makes my makes everything worth it now we did just get a will there be a back end question now the really cool thing i want to mention about no next chest is that it actually has a built-in express kind of style server right so you can see here if i go to the api we actually get a built-in server which is running right because remember it's server side rendered which means out of the box you'll get this so if i wanted to test this out i could simply go over to my application go to forward slash api forward slash hello and look at this guys boom we have an ap we have a back in server always running as well behind the scenes just something to know just something another reason to know why we should be using this okay so very very powerful stuff now let me go ahead and actually pop open my localhost again there we go and then what i'm going to do here is let's go ahead and refresh and what's happening here let me go ahead and save and then here you can see reference login is not defined so i'm going to go ahead and pull my login page there we go and uh over here now we can see if there was no user it should log in oh that's just horrible here we say login from log in there we go right so if i go to my login page now we should be able to see and this is because this is a lowercase l so we need to change that to our login there we go the file name has to be not login but then this is the login page as you can see at the top of the page over here right so what we're going to do now is we're going to go down and i'm going to create a login container okay so login container like so now this i need to go ahead and create a start component for so i'm going to say const login container what's looking container equals a style div like so okay now inside of the login container we're going to have a logo which is going to be an image tag so this is going to be the logo over here which is self-closing tag now this one let's go ahead and create a style component for it it's going to be the logo and this is a styled dot image okay so again you can see it's actually very easy to kind of put this together and move with it right now for the source i'm going to go ahead and pop in let's go ahead and do this and a quick little tip here right so if you're wondering why do i need to know this stuff why do i need to know server side rendering and all that right now the reason being is for seo right seo is huge because think about it when you're not using server side rendering when somebody comes to your web page what is happening is they come onto the web page and then it will go ahead and request all of the assets on the page the images all of the text all that stuff or any dynamic information it's going to make the request so that when robots like web scrapers from google scrape your page they aren't always going to wait for that information which means they don't always get all the accurate information but when you use next js you have something called static site generation and the server-side rendering combined that you have a hybrid site now the cool thing about this is that when that robot or like a user comes into your site they don't need to now request all of those individual assets the server does that and it bundles it all up and it gets it ready and that's super fast on the server then it just sends a minified really fast version to the client which means that when that robot comes into your page they just get the entire site in the request hence the seo is better there you go all right so we have the logo up and running so you can see it's huge right here right so that's actually a huge logo and then we're going to go ahead and pop in a button right this is going to be a material ui button so i'm not going to style it too much i'm just going to say sign in with google sign in with google alright so a lot of people saying will you ever do a react native clone i did one the signal clone go check it out all right so i'm going to basically use the variant outline for the button over here so if as soon as i save this you should be able to see if i go ahead and make this a lot smaller let's actually style this because it's very hard to see what's going on right now isn't it right so at the bottom down here where we've got the start image i'm going to go ahead and put a height and a width of 200 pixels okay so i'm going to go ahead and copy this and do a width as well of width of 200 pixels and we save and there you go it's a lot more easier to see that isn't it right and the reason another reason why this is bloated out is because i've zoomed in there we go now what i'm going to do is do a margin bottom of 50 pixels you're probably wondering why are the bombs i mean why are you doing that right because in the container itself i want it to be in the logging container so i want to be a display flex and then what i want to do is make the flex direction a column okay now if you're not good at flex or any other flexbox stuff i do recommend you check out flexbox furry the game incredible site right really really good site and it just makes things so easy right really really makes something easier wow the mind-blowing session i forgot to say i recently participated in a hackathon and i got third place and two thousand dollars thanks to ui development skills and back in database skills that's sick well done dude branches in the house what's up dude incredible stuff guys almost a thousand likes a thousand likes it's 70 minutes in and almost a thousand likes crazy right so at this point we have this and this looks okay all right so what i want to do is i'll improve it so in the container i'm going to go ahead and say display grid right display grid and i'm going to say place the items in the center because it's a nice little trick i like to do and i actually found this out in a google talk once right so it's a very handy google talk because i use it all the time and then i'm going to say a height of 100 view height so hit save on that and everything goes into the center now why are these not spread apart it's because i've got another container as the child where everything is stuck in between right so that that's why you're not getting everything spread apart and he says green from tunisia thank you so much dude uh 1k likes you deserve it incredible stuff i actually went to uh um oh wow we broke it i didn't even realize we broke it was so quick thank you guys this is incredible incredible stuff 1k likes wow 400 people watching still like what is happening thank you so much guys if you want me to keep on bringing the fire then you know just let me know in the comment section right now and i'm going to keep on bringing next year's content react native content all that because the stuff and as i mentioned before guys the things that help me supercharge this build tab nine for that amazing code completion and hosting or for holding the amazing app that we're gonna build on our custom domain okay so both links are in the description check them out let's carry on with the bill guys so here we have the sign in with google button okay so the next thing i want to do is i want to kind of make this look a hell of a lot nicer than it is right now okay so the first thing i want to do is add a padding of 100 pixels okay and then i'm going to go ahead and do align items in the center all right so align items in the center then i'm going to go ahead and say a background color of white my background color over white there we go all right and the background color of the container is going to be white smoke right so now you can see look at that a nice little separation happening right here okay then what we're going to do is we're going to go ahead and say border radius of 5 pixels so we'll smoothen the edges around that box and then the final thing i'm going to go ahead and pop in a nice box shadow and you can see this is what ui is about right ui very subtle differences and boom look at that like very like a very few lines of code and the whole thing looks amazing right can we get to 1.1 k right that's all that's my question right i want to see how many likes we can break today incredible incredible stuff okay so azam khan says yo am i late dude the main thing is you're here that's it right so at this point we've got this looking pretty good okay it's looking pretty good so if we go to our main app i mean look at that that is in insanely perfect right to the to the actual app you can't even see any difference right so what we're going to do here is i'm actually going to have an on click on the button someone say on click right and on my own click i'm going to say sign in and this is going to be an external function so on top of the return block i'm going to say a const sign in right and this is going to be my anonymous function and then this function is going to go ahead and pull in the authenticated object so let's go ahead and pop this in from our local firebase file and i'm going to say auth dot sign in with pop-up okay now this is the thing that allows you to have that google login okay so this is how you go ahead and do it kev australia says how are you sonny i'm doing great dude thank you so much right and i'm going to go ahead and pop in the provider here okay now the provider i need from that firebase file as well so i'm going to go ahead and get that nice then what i'm going to do is type in catch right because all i need to do is i just want to tell the the user if something went wrong and here i will alert right so i'm going to go ahead and say just alert the user if that happens now this is where we can basically go ahead and whatever argument gets pulled into catch we'll go ahead and get passed as an argument to alert and then it will invoke the function hence it will show us in a very neat little code snippet now that's it that's literally it we can go ahead and click log in and you guys can see that it pulls up firebase google authentication and while we have this open i'm going to go over to my app now remember here we said right we said okay get the user and if there was no user logged in return the login screen then if there was a user logged in this is actually a real-time listing to the authenticated state this will update the user once we log in which will then in turn return the rest of the application okay so what we're going to do is i'm gonna go ahead and log into the proper react team account and then boom i'm inside the app and if i go ahead and refresh you can see we get the initial sort of you know that initial headache right now how do i get rid of that loading state so you see when i refresh the page it has a loading intermediate step so react firebase hooks is really nice because what it does is as a second argument it gives you the loading state right so this is really really really nice honestly so what we can do here is actually sort of you know super power this one up a little bit more right so what we can do is go here and i can say okay if there is a loading happening right so if there's any loading at the moment return a loading component okay and then what i'm going to do here is the loading component isn't going to be a page that you can route to i want it to be a component on its own it's just going to be a ui presentational component now what we're going to do here is type in loading.js and this is going to be a component of its own so i'm going to underscore rfc and then we've got our loading block over here right so the thing that i want to do here and remember so this is a very important thing to know when we're doing the server side rendering stuff right now which is basically what's happening here right then we can't basically we can use start components but you have to do some additional steps hence why you're going to see me here using some inline styles okay because uh you can use css at this point but i'm just going to use some inline styles just to center a few things and to make it look very clean okay so what i'm going to do here and just so we can sort of focus on the development of this portion i'm going to go ahead and say if true return loading which means i will always force the loading state okay and i also need to import my loading component and then there you go and then here it says expected some value which we don't have so at this point if i go into my loading and here you see it's empty this is why we're seeing this so the first thing i'm going to do is make it a center element so the things that we see are centered the second thing i'm going to do is have a div inside of it and then what i'm going to have is an image tag which is going to be the whatsapp image okay so i'm going to have the source of the whatsapp image over here right so i'm going to go ahead and pop this in like so let's go ahead and do this and then we've got the image tag so you guys can feel free to copy that image tag right there you go and then here what you can actually do is rather than go ahead and you know pass in css and all that stuff i can pass in a height at this point of let's say 200 and it will automatically shrink it okay so it will shrink it and the next thing i want to do is i want to add a um inline style right again this is because on the server side rendering portion of the build we actually kind of need this one to uh it's not going to be using style components you have you can use style components but that's an additional step and we're trying to squeeze a lot in right now margin bottom they're probably wondering say why there's nothing underneath it right why would you possibly have this right why would you possibly have anything underneath this when it doesn't make any sense right so i have a really cool little loader library that i like to use it's for spinners right so spinners anytime you need a spinner or anything like that then we can go ahead and do this right daniel says something you're doing a great job explaining everything you take your time without doing so right without rushing i hope you create around your version of this app sometime soon thank you dude i really really appreciate the kind words and for sure man i'm always down to do that all right so we're gonna go ahead and install better react spin kit okay so this is a very cool package that i love to use and it's called yarn add react better react spin kit i'm gonna hit enter on that install it and then there you go all right so loads of people asking what's the benefit of next year it's going to literally go on to next year's website and it has a whole portion about what the benefits are of using it it's great right so for everyone who's debating whether i should learn it or not stop being lazy learn it it's great it's really great okay so at this point what we're going to do is i'm going to go ahead and use that react better spin kit or better react spin kit so i'm going to go ahead and pop this in and we're going to use a circle in a component from it so this is a circle the color here i've actually got the whatsapp color which is actually the um it's a pound and then you've got this this is a whatsapp color and i'm going to give it a size of 60 pixels and they take that as props now if i go ahead and hit save here we get a nice looking little spinner okay so there's a very nice little spinner element over here now what we can do at this point is we can go ahead and i think the stream's all good somebody says shrimp glitch i think we're all good um let me know i think we're all good right so now what we're going to do is inside of the center what i'm going to do is just apply some very light styling in the inline style fashion okay i'm going to say firstly i'm going to do a display grid okay so it's gonna be display grid the second thing i want to do is do your place items now when you're doing inline styles it's camel cased as opposed to dash dashes in between right so you can see tab nine coming in clutch always with the centering and then what we're gonna do is we're gonna go ahead and say a height of 100 view height okay and this has to be in quotes like so okay perfect then we hit save and you can see all of those styles result in a perfectly centered element right so now what i can do is if i go back to app.js over here and i change this to the loading so we stop the force of loading and now check this out guys when i hit refresh we see our loader we come into our app that's clean and it wasn't even that hard to build that right that wasn't even hard to build like that was a really really nice kind of loader to have now guys i'm wondering can we get to 1.1 k likes i think we can i really think we can do this right let's keep going i love the energy that we have today it's really really good okay so avnisha's i'm in love with this song yeah i love it too dude all right so now we're gonna do is when we hit the component over here that's when the rest of the next js sort of app kicks in okay so at this point what i'm going to do is i'm going to go into my app.js and i'm going to check okay so the first thing i want to do is when they first sign in right so the first time the user signs in i want to kind of capture them right so i want to capture them and i want to basically have their details stored in a user's collection okay so what i'm going to do is i'm going to have a use effect now use effects are used to trigger a piece of code at the components lifecycle methods right so like whenever the component mounts i want this code to trigger right and in order to get it to mount initially what we do is we pass in an empty bracket over here so empty square bracket and what this does is it goes ahead and basically says when the component mounts i want to fire off whatever code is inside of here now i also want to fire off whenever the user changes okay so if they log out they log in that sort of stuff now what i'm going to do here is i'm going to say if there is a user right because there's an asynchronous aspect to that then what we're going to do is on it technology says this is just awesome hell yeah dude you know how we do it right here i'm going to say db right so we got the db earlier then we say db.collection now what we're doing is we're tapping into firestore right so i'm going to go into the collection and no sql structured database okay all right so what we're going to do is i'm going to go ahead and type in users okay so then what we're going to do is um arnold says really love the stream why didn't you make use of telling when so because remember guys i don't want to overload the tech right we're learning a lot of tech here so you can't always like you know use this use this use this like we're learning in in iterations right then what i'm going to do is i'm going to go to the document and i'm going to basically use the user's uid which comes from their google profile and i'm going to do something called set okay so i'm going to do something called set now at this point i pass in an object okay so i'm passing an object into my parentheses and then what i'm going to do is i'm going to go ahead and say email and this is going to be the user's email okay i'm also going to set a last scene right so our last scene here i'm going to say last scene okay and this one is going to basically be the firebase timestamp now whenever you're dealing with timestamps on firebase you have to be careful because remember i'm in the uk right now and my time zone is different to most of your time zones okay so what we want to do is let's use firebase's firestore database timestamp because we're all going to be using the same database so that would be the timestamp that would be consistent amongst all of us okay and then when we come to render it on our local machine we'll translate it to our local timestamp that's how we do it okay so at this point how do how do we do that we basically go ahead and import firebase from the actual firebase module uh at the top like so and then what we do is we say firebase dot firestore okay dot filled value dot server timestamp and server timestamp is a function so we can go ahead and pop that in do a comma to go into the next line over here and then we're going to say photo url to get the user's profile picture from google this will come in as user.photo url like so okay so then what i'm going to do is i'm going to go ahead and pass in a second argument which says merge true okay now the reason for this is because set basically goes in updates and replaces everything that is inside that document now i don't want to do that i want to go ahead and update what is inside there but if it wasn't created initially i want to create it which is why i'm using set as opposed to update okay rahu says sunny the music is dope you can't share that playlist dude i got you man i got you i'm gonna go ahead and drop that link right now for you guys in the chat this is the papa fam playlist so go ahead and enjoy it guys there you go all right smash the thumbs up if you are happy i just shared that playlist okay so i went ahead and dropped in the chat right now you guys can go ahead and do it okay so you see i'm always listening multitasking that's how you get it right so here we go when the user logs in for the first time or every time they're going to subsequently update these information and details which we're going to go ahead and use later on okay so with that done now what we do is we go back to our um our sidebar component okay now in the sidebar component the first thing i want to do is i want to make the ability to log out right so i don't want to trap the user and the way i'm going to do that i'm going to have the user avatar right which is essentially this part over here firstly we need to fix this so we need to go back to our app and always make sure that you check your code so i'm going to go ahead and import use effect from react hit save and there you go there we go we can see that stuff happening okay so what i'm going to do now is go ahead and refresh and you can see everything works and you can see if there was a user we're going to make sure that it gets updated then it would load the app so every time you come on to the app it will update your last scene so it's very very good okay please don't spam the chat guys otherwise i have to you know i don't want to have to ban people but it makes me want to you know like i have to ban it dude you're out all right time there you go oh sami beat me do it nice all right uh the auto complete that i'm using is called tab nine stanley right so tab nine amazing ai oil completion we actually have an affiliate link in the it's the first link in the description go ahead and check it out and it will supercharge your development experience okay let me know when you download it right so tab nine there we go okay so what we're gonna do now is i'm gonna go ahead and set up a way to log out of the app okay so we're gonna go into our um our sidebar component and here what we're gonna do is we're gonna go ahead and say user avatar and then here i'm going to say on click okay so on click of the user avatar i'm going to do an anonymous inline function which is going to say auth right and i need to go ahead and pull in the auth afterwards and i'm going to say sign out okay which is a function i'm going to pull in my authentication module from firebase okay so if i can go ahead and import this from firebase like so now what this will allow me to do is when i click the user's avatar which is this thing over here it should log me out okay but i did not save the file so if i go ahead and save it see that little thing that popped up we get a nice little fast reload so if i go ahead and click this now boom i'm logged out and if i refresh just to prove it there you go right it will load check if you're logged in and then it goes ahead and works so now if i go ahead and sign in once again we should be able to see check this out popular.team go ahead log me in perfect everything works nice we have login for user authentication and inside the database now if we go ahead and check it out so let's go ahead and have a look at the firestore database we should see the users and inside it a document which has papa react last seen at 5 31 which is literally right now with my picture as my profile picture so you see everything goes ahead and gets put up right so this is really really nice um bengal says his name is such an amazing work you're doing thank you so much dude appreciate the support all right so the next thing we're going to do is i'm going to go ahead and let's go ahead and create the chats right so the chats that we spoke about before so how do we do it right we're going to go ahead and say that what we need to do is we need to val after we validate the email uh or the input right so the one after you click start a new chat i need to validate it and then after i've validated it thank you ravanth for the uh the nice donation there he goes hi saying can you sure i said you read that step towards not today because we're not using redux today but thank you for the donation dude here i'm going to say db all right so i'm going to import db from our local firebase file right then i'm going to say db.collection i'm going to go to a collection of chats right so we're actually going to have a chat collection now and then what i'm going to say is add okay so add in a collection of chats but 1.1 k wow this is crazy guys thank you oh my god like 1.1 k already i think we're gonna go to like 1.5k today it's crazy thank you so much guys let's push this video and share it right so we're going to say db.collectionchat and we're going to add a document inside now i obviously don't care too much about the idea this of this document i just want to make sure that i add in the users who are going to be part of this chat so the way that this one to one is going to be working thank you so much to me he goes we're killing it today keep sharing exactly we're killing it today all right so the way we're going to do this is we're going to have a chat collection okay now inside the chats collection every single document will represent a chat inside of a document we're going to have a user's array now because it's a one-to-one chat the user who's logged in we already have the first email of that array the second user is going to be the input that we typed in to for the person that we want to start a conversation with so every single chat will have a user's object inside of it which will be an array so be a users array inside of it then you'll have the user who's logged in so sunny for example proper react.team gmail.com and then you'll have this the user for example sumit gmail.com and that'll be a chat between sunny and sumit right so that's how we basically keep track of all this stuff right karen says son you're an amazing mentor with amazing skills your smile is so cool thank you so much it may be smart dude when you said that thank you so much all right so what we're going to be doing now is we're going to go ahead and add right so here i'm going to say add users and then the array that we want to add firstly i need the user right so the user who is logged in so we can go ahead and use that really nice use auth state uh module earlier that we installed so this one over here and what we can do is we can say const user equals use auth state like so and this will keep a real-time mapping of the user's authentication we do need to pass in our local authenticated config so there we go and then we get the user so in this case i can say user dot email okay and this will give me the user's email of the person who is logged in okay so then what i can do is i can go comma and i can type in input and this input would have been the input that we get when i click start a new chat right so imagine it for here i said papa gmail.com this would be creating a chat between me who is signed in as proper react.team gmail.com and papa gmail.com okay so what i want to do then is i think after that we're pretty good to go right so i'm going to go ahead and hit save on that so the second thing i want to do is i do want to actually double check and make sure that i'm not already adding a chat but firstly let's do one step at a time let's make sure that this works right so i'm going to go ahead and open up firestore so you guys can see and i'm going to click start a new chat and i'm going to start a chat with let's just say sunny uh gmail.com now this isn't a real account so i'm going to go ahead and hit sunny and if we go ahead and refresh because you have to refresh if there's no document inside of a fresh collection i'm going to go ahead and type in chats and you can see we created a chat between proper react.team gmail.com who is signed in and sunny gmail.com so you see very very slick way of doing it okay uh insane amount of coaching for free you're creating a history saying thank you so much that's my goal dude leave a legacy where i help as many people as possible that's it dude that's what we do what we do okay so you can see this is how we represent a one-to-one chat okay so we have a chat between uh one email and another email address and the emails are a good id to use because everyone has unique emails okay so at this point what i'm gonna do is i'm gonna go ahead and firstly put this back over here so we have a nice little clean slate and then i'm going to go ahead and i actually want to make a function which will check if the chat already exists okay because i need to be sure that the chat doesn't already exist okay and also i need to make sure that the chat is not the user's email because you don't want sunny to start a chat with sunny right so what i'm going to do is i'm going to add a first conditional check which says let's check that the input is not equal to um user dot email right so this will actually sort of prevent that from passing through okay so we're gonna make sure that that's not the case and then we're also gonna add in a final one which will say if the chat already exists okay so now what we're gonna do is azam khan thank you so much now we're gonna do is create a new function called const and we're going to say chat already exists right chat already exists okay so now what i'm going to do is go ahead and type in there we go and then i'm going to pass in a recipient email okay so this will be the person who you are intending to chat with so in this case it will be whoever i've typed into that input field okay so at this point what we're going to do is we're going to go ahead and say okay i need a chat i need to basically have a real-time connection to the chats collection to see if there if that chat exists right so how do i do any of that stuff we're going to use react firebase hooks right so it makes it so easy to do it right so what we're going to do is we're going to go ahead and we're going to use the use collection right so we're going to go ahead and use the use collection hook from react firebase hooks four slash files firestore now what i do is i go ahead and i need to make a reference to the database okay so i'm going to say const user chat reference equals it's going to be the db collection and it's going to be collection of chats right and i'm basically going to go ahead and say where this is a firestore function where we basically query the database where the users remember that user's array right that users array we can have a very handy little function here called array contains right and you can see that tab nine coming in clutch and we say array contains and we can say user.email now what this does is it goes to our firestore database it basically queries the users that the sort of the user arrays checks if the email checks where our email is seen for the person who is logged in this should give us all of the chats okay the next thing i'm going to do is i'm going to go ahead and map it to a roadtime listener so we're going to go ahead and say and since we have these new hooks it's so easy right what we're going to say is chats snapshot and this will give me a snapshot of the database and if i need the loading object i can get that even if i need an error object i can get that too right but in this case i'm just going to get chats snapshot right and then here i'll say equals use collection okay use collection and i'm going to pass in the reference for the user chat reference right so the one that we just defined above here right perfect now this will give me a real time list now simple as that everything is done for us right so what i can do now is i can go down to my chat already exists and i'm gonna go ahead and say the following i'm gonna say chats dot snapshot okay now this could be right see you later avenis thank you so much for supporting dude all right so here i'm gonna say chats snapshot and this could be undefined because it's an async we're gonna say go to the docs and this is called optional chaining by the way if you're not if you're not familiar with that very handy function i'm gonna say see if you can find right see if you can find a record where the recipient email is already there right so the person who i'm trying to create an email a sort of new chat with see if it already six exists there right so what i'm gonna do is i'm gonna go through every single chat and i'm basically gonna check the following okay so bear with me on this one i'm gonna say chat dot data right so we're gonna access the chat.data which is actually gonna be remember when i showed you it's actually this one right here so this is the chat.data and then i'm gonna go ahead and say chat.data.users right and then dot find and i'm going to say go through all of the users and check if the user is equal to the recipient email okay and then what we're going to say is a optional chain value and then we're going to say dot length is equal it was greater than zero so this line of code right here is basically going to go through right one dot percentage thank you so much so what we're going to do here is we're going to go through the chats that exist and we're basically going to filter like find inside of the user's array if the user is found with the recipient email which is the one that we type into the input field okay and if the length is greater than zero this will return some kind of element now to convert so basically think about all of this is either going to return an element or it will return like no or undefined so if i want to convert all of that to either a boolean right to a boolean value so it's either true if a value came back or it's false if no value came back then what i do is i do double bang here right so you put in a double exclamation mark and this will convert and basically say if the value was truthy which means that if there was a value present or anything like that then it's going to go ahead and be true and if it was fosi which means that if the value was undefined no or anything like that then it would become or even an empty string then it will basically return false okay so what we're going to do is we're then going to go ahead and do an implicit return so we can say return like this but because we're doing a one-line bit of code we can actually get rid of the curly braces and we have a super sleek function okay so the next thing i'm going to do smash the thumbs up button if you're enjoying this right now all right so i'm definitely enjoying this as well i'm having so much fun right now all right so what we're going to do here is we're going to go ahead and add in that condition so i'm going to say validate the email and then also right i want to go ahead and say if the chat doesn't already exist right and i'm going to pass in the input as the recipient email right so this is basically saying if the chat does not exist because i'm using a bang which basically is an opposite right so if this is false then go ahead and add it right if it doesn't already exist it doesn't already exist and is valid save nice okay this is really really clean right it's it's some background music playing yes it is right so now you can see if we do this and say if i try and create another chat with sunny dot sunny gmail.com if i go ahead and try and do that now if i do sunny let's go ahead and refresh if i go ahead and say sunny start a new chat if i say sunny gmail.com now you'll be able to see it didn't create another new chat because it knew already that okay we already had one found okay so now we're protecting against as well and we can also protect against our own email address being used so we're actually doing a good job there right so now we also have access to that chats collection again so we have the chats snapshot over here so what we can do with that is we can actually go ahead and render out all of the chats on the screen what am i talking about i'm talking about these chats over here so let me sign into google quickly on the main account and i will show you guys how it's happening um it's not server-side rendering yet right so here we've got a bunch of chats happening right so i want to basically fetch this and render them as so so how do we do that right i'll show you how we do it so i'm going to go here and i'm going to go down to the list of chats and here i'll say chat snapshot which could be optional dot docs dot map for every single chat right for every single chat i'm going to go ahead and return a chat element okay now inside of this chat element i'm going to pass in a few props i need to create the chat element of course but what we're going to do is i'm going to go ahead and say chat.id right then what i'm going to do is say the id i'm going to pass through as the chat id as well because i want to use it as a prop and then i'm going to pass in the users all right and the users are going to be the chat.data oops chat.data dot users i'm gonna hit save right now it's gonna freak out it's like whoa whoa whoa cannot read property map of undefined okay so at this point we've got um i can go ahead and firstly i need to create this one so actually this will not be the error that we're sort of going to expect it will be uh let's say 207 let's have a look we've got chat door data recipient length and then we have um let's go ahead and create this chat component over here okay so what we're gonna do right now is i'm gonna go ahead and say uh let's go ahead and create a chat component over here so and over on the top of the components we're gonna go ahead and create a chat dot js okay east or west sunny sangria is the best thank you dude rfc here can we get to 1.2 k likes guys all right we've got the chat over here now over here we've got chat i'm going to go ahead and basically remember i said we passed in a few props right now the props we can destructure and get the id and the users out from okay we're also going to be using start con styled components here so i'm going to go ahead and create my uh container right so i'm going to say container equals and tab9 comes in clutch star.div all right div there we go and then i'm going to go ahead and do the following so after that i'm going to import start components so we can use it right we are using uh javascript not python all right then what we're going to do is i'm going to go ahead and have on here on the sort of like what what do we expect to see here right expect to see the user avatar and a p tag right that's basically what we're seeing so what we're going to do is we're going to have a p tag which is going to have the uh recipient's email okay the recipient's email so this is just going to be like some kind of email what's this can be recipient email a recipient email all right hit save and then if we go into r1 you can see let's go ahead and refresh and let's pull in that chat component let's go ahead and pull it in over here hit save and then refresh right and then we're seeing map of undefined let's double check where we're using maps so doc dot map is only over here and we should in fact be doing doxa sorry docs there we go so now if i go ahead and refresh there you go so recipient emails this was the chat that basically we created okay if i go ahead and start another one you're going to be able to go ahead and see um that happen here so if i go ahead and say this test gmail.com then you can see two recipient emails okay but we obviously need to make this work in a correct way okay so at this point what we can do is we go into our chat right we're gonna basically you know step up our chat right here so we're gonna go into the chat and then what i'm gonna do is firstly introduce the user avatar right because i need that next to the user's uh sort of email address over here so we're actually going to go ahead and introduce user avatar which is just the start component for so it's going to be a user avatar capitola is important when we use this avatar for let's go ahead and say um start combustion it's going to be a material ui so we're going to say user after start and then this is going to be the avatar component we need to import that from material ui and then we're going to go ahead and use our start component now for the user avatar i'm going to say a margin of 5 pixel is required and then i'm going to be lazy and just say override the margin right with a 15 pixel so it's slightly greater on the right hit save and you can see boom we get that okay now for the containers surrounding it display flex right display flex will go ahead and make it a little bit easier display effects pops it into a nice little thing and then we say align item center see tab lines making it super easy for me to work here right cursor pointer and then i can go ahead and say padding of 15 pixels and then i'm going to go ahead and say word break what's up aj when i say word break and here i'm going to say break what because this is basically going to protect me if somebody has a super long email address it's not going to just spam the hell out of it it's going to go ahead and break the word onto the new line okay and obviously you can do different approaches to that now when i hover over this i want the background color to change so i'm going to go ahead and this is what i love about style components it's as simple as saying when you ever change the background color to the following and i've already got a color here in mind this is going to be a nice little gray off color that whatsapp uses so now if i hover over it boom now this is looking clean right this is looking very very clean um and guys if you haven't already make sure you're using tab 9 because it's a great autocomplete and make sure you've already created that hosting a trial account because we're going to be using that very shortly okay okay so hazelnut you're doing a great job hi from boston what's up second thank you so much right right so at this point what we're going to be doing is i'm going to have it so that when you click okay so firstly i need to check right i need to see if the recipient has a photo url we're going to check that one in just a sec um but what we need to do right we get the users that come in here but how do i go ahead and get the recipient view so remember in here we have a list of users okay now i need to create a utility function where i can basically pass in the users array i'm passing the user who's logged in email and it just gives me the other one this sort of other email okay so we need to go ahead and do that right so we need to make sure that we can do that in a very simple manner okay so how the hell do we make that happen right so what i'm gonna do is i'm gonna introduce you guys to utility functions now utility functions are very handy things that you can use okay now what i would recommend is just to go ahead and create a folder so click firebase go to that level and type in utils right it's gonna be my utils or sometimes it's lib okay uh ankit i will definitely bring in typescript at some point right and a different project so now i'm gonna create my first util function and this function is going to be called get recipient email.js and this is a very important function okay because this is going to have a sole purpose of basically taking an array taking the user who's logged in and then it will basically return to me the string user of so that way i can have a string value of the recipient that we're talking to right so here i'm going to say const and jon snow says awesome and that's how i'm talking about it and here i'll say get recipient email equals and then i'm going to take the user's array that we spoke about the one that's stored in the database and the user who is logged in right this is going to be a string value user who is logged in and then i'm going to go ahead drop an arrow and this is going to be an implicit return hence we don't have the curly brackets it's just going to be a straight return okay and these will get prettier we'll get rid of those in a sec and then what i want to do is i'm going to say users which could be you know like we have to protect ourselves in this case we're gonna say users dot filter right users dot filter and i'm gonna filter the user to filter it's gonna be every single iteration so we're gonna go through those lists of users and i'm gonna say okay the user to fill a check if the user to filter is not equal to the user logged in the email okay so the user logged in as an object so this is going to be the following will say user logged in dot email okay now the user logged in is also async because that comes from a hook remember the use hook right that one um but now what we're going to do is we're going to go ahead and say um once we get those input that information remember we're filtering through a array which means we're going to get an array back as a result now you can use find as well but in this case we will get the first element back which will be it will make sense because it will filter down which will basically get rid of anyone else besides you know the um the person who's watching um and we also have we also have 500 people watching across twitch and youtube which is incredible i know we have 315 people still watching on um on this but it's incredible stuff now somebody says no voice i think we're good for voice um right so now at this point what we're going to do is we're going to hit save and then i'm going to go ahead and type in export default my export default get recipient email because i want to be able to use this throughout okay export default get recipient email okay so i'm gonna go ahead and hit save perfect now i've got my utility function which is my nice little helper function so what we can do now is some pretty pretty cool stuff okay so i'm going to go to my chat and then what i'm going to do is i'm going to go ahead and move above my return statement and i'm going to say const recipient email okay so i'm going to go ahead and create a new variable called recipient email and let's spell it right that might help so let's do recipient there we go and then i'm gonna go ahead and say get recipient email okay tab nine thank you and i'm gonna go ahead and import that from my local utils function right so we're gonna make sure we import this over here and then i'm gonna say get recipient email from and i'm gonna pass in the users and pass in the logged in user right now this should give me the recipient email which means that if i go ahead and let's refresh this i think we had two up here right if i go ahead and uh pop in the recipient email here now and hit save wait for it user is not defined oh okay because we need to use our hook we need to use the use auto state hook right so the user comes in as a prop the users comes in as a prop but this one doesn't okay which means i can go ahead and import my nice little use auto state hook and then i need to import the authenticated uh object earlier in the firebase config now if we do this you guys should be able to see oh interesting right we're not actually seeing the user that we're expecting at this point right so let's double check what's going on here right so we're passing in users we're passing in the user and then let's go ahead and console log the recipient email so we're going to debug a little bit here and we're going to figure out what's happening okay so i'm going to go ahead and pop this in and you can see now if we go to our console we should be able to see that it says undefined okay so that's not correct right something's happening here and we were actually getting a user is not defined we're getting a 500 internal server error oh maybe something's down that's interesting um so let's go ahead and see i'm actually going to log out and log back in and i'm going to quickly log into a different account and then we're going to create a new chat okay so i'm going to go ahead and sign in to sony los angel there we go i'm inside of a chat and then i'm going to start a chat with papa react dot team gmail.com and hit enter there we go and some things uh something's freaking out at this point we've got an undefined okay so let's go ahead and double check so the way we can debug this right is very simple we can go ahead and firstly double check the id and the users so let's go ahead and console log the id and users right now we don't have our users that's why we're breaking here right so what we need to do is go into sidebar and you guys are getting a real example here of debugging so this is exactly what's going to happen here so you can see the users are not appearing to come through apparently so we've got the recipient let's go to our sidebar and then what's actually happening here is we've got the chat snapshot okay great we've got the docs we've got the chat and then we're passing in the users there we go damn it guys save and now you'll be able to see proper react comes in so there you go right so that was a real life that was an unscripted debugging exercise that we literally did on the fly so u4 that was cool and then smash the thumbs up button we should have gone a bit red for that so we should like you know go a bit got red for that smash thumbs up button if you thought that was pretty cool all right so now let's go ahead and carry on guys so at this point um spring keeps asking the same question right the previous build that i've done i've done a few builds where we've had group chat functionality this one is going to be for one to one functionality okay that colors for me let's go back to till there we go okay well actually i prefer the blue blue was kind of nice right so at this point what's up carl good to see you man so at this point what i'm gonna do is we have the chats being listed out which looks awesome right this looks really great but it's not using the correct image so in order to get that image what we're gonna do is i'm gonna go ahead and actually update our chat component okay so the chat component what we're going to say is if the recipient right so i need to basically go ahead and fetch a little bit of data from the database in our chat component because we want this to be a little bit smart okay so here what i'm going to say is i'm going to go ahead and say const recipient snapshot right and then we help if we're spelling it right recipient snapshot equals and then what we're going to do is we're going to say use collection okay you can see how handy that little auto complete is coming in right so it makes my whole coding experience with tab nine so clean okay um yeah nitin we fixed that one exactly so we're gonna use the collection and i'm gonna say db right dot collection dot collection of users okay so the collection of users and then i'm gonna go ahead and say where the email is equal to so what we're doing here is i'm cross-referencing the users right so i'm cross-referencing the user's collection on the database with the email of the person who is the recipient all right so what we're going to do is i'm going to say get recipient email get recipient email and i'm going to go ahead and pass in the users and the user to get the recipient email so what this will do is it will filter right um is your github repo access a one time purchase or monthly it's actually one time dude so once you have it you're gonna have access to all the builds so definitely worthwhile in my opinion of grabbing that and jumping him on board with that but be awesome to have you in there okay so at this point what i'm going to do is hit save and then we have the recipient snapshot okay so what i'm going to do with this recipient snapshot is i'm going to go ahead and say const recipient and this will be their sort of document so this would be the recipient snapshot which is optional because it's async then we're going to say go into docs and we're just going to protect ourselves there and we're going to say okay now find the first element right and again we're going to optional chain we just want to protect ourselves here and basically unwrap it right so we get all the data from it now what i can do is where we have the user avatar i can go ahead and i can do the following so i can say here i can go ahead and say recipient and then i can go ahead and do this and i can say recipient and i can say okay if you have the photo if you have the recipient's data then i'm going to render the user avatar with the source as the recipient photo url else right so this is a ternary someone say else and then i'm going to go ahead and say what i want to do is actually have the user avatar with just basically the user's email as the first letter okay so if we go ahead and hit save now and then let's go ahead and double check it and for some reason our database is kind of dying on us right now so let's have a look what's happening and i am signed in cisco gmail.com and you see test came up with a t okay now if i want to go ahead and say let's just say sunny or saying or gmail.com uh that's actually me so that won't work if we do poporreact.team gmail.com and you can see now it went ahead fetched the papa react login right which is amazing right this is really really nice all right so this is uh we're actually fetching this which means it kind of reminds me that we now need to go ahead and um also update the header of the sidebar to also get the correct uh user image okay so that's actually a very easy trait we can do we already have the user here so all i need to do is go over to the user's avatar and i need to update the source right and this was the papa fam anthem if you remember you're a real og because this is uh always gets me sort of you know hyped up when we hear this so i'm gonna go ahead and get the source and here all i need to do is say user.photo url and this means that when we're logged in boom we get the logged in image okay so this is still on the sidebar we're moving pretty fast though okay so at this point what we're gonna do is we have all of this stuff set up so we're gonna go back to our chat now what if i click this okay what if i click one of these chats what am i going to do all right i want to basically root someone in typical react terms we're going to react router terms we're going to push a new page onto the stack so in this case i need to get a router now the way we can get a router and basically handle any kind of routing inside of react and next.js is we do the following we say const router equals a use router and use rooter is a very nice little import that we can get from next js which is apparently not helping me out right now so i can go back to here and i can just say import use router from next for next for slash router don't happen there um i'm glitching now all right vedantes hey sunny love you man thanks for this i'm from india and damn the last few months i've learned so much from you keep doing this godspeed thank you so much dude appreciate you all right so at this point let's go ahead and just smash that thumbs up button let's go so what we're going to do is i'm going to say get rid of the console log and i'm going to create a function called const enter chat and i'm going to have this trigger off when the user clicks on a row okay so what i'm going to do in this function is i'm just going to say rooter.push and i'm going to push them to the following page so i'm going to use backticks because i'm going to do string interpolation here which means i can use variables within a string i'm going to push them to forward slash chat forward slash i d okay now id comes from the chat id that we passed in earlier as a prop now the music has stopped because it reached the end of a playlist so i'm going to go ahead and restart the music boom there we go right so what i'm going to do here is i've got the id so i'm going to go ahead and pop in the id here so now what should happen is when i go ahead and click the chat after i connect it so i'm going to go ahead and say the container where it should have an on click on click equals enter chat now did you see that guys how quick it did that right that was actually tab 9 in full speed look at that it already figured out what i was going to do so it's amazing extension right and i hit save and now you can go ahead and see what's happening so at this point if i go ahead and go back here and i type in so let's go ahead and make this full screen if i click this can you see how it took me to forward slash chat forward slash this right now next year js does a very nice thing where if you've gone to route to a page which you haven't set up yet it says four or four this page cannot be found right you can replace this by doing a four or four file inside of the pages right so 404.js and uh car says yeah it's fine exactly yeah so this is how you go ahead and do that right so it automatically out the box supports this okay so um gerardo gerard says thank you very much can we have something on webrtc yep at some point we definitely will okay so we have this routing us to that route now we haven't defined that route okay now what's interesting about that route it says four slash chat forward slash a random string so how do i support that level of complexity when it comes to roots right in next year so it's very actually simple to do and the way we do it is typically what i showed you before is inside of pages each file represents a root but if i want forward slash chat forward slash a specific wildcard of an id so easy to do that in xjs what we do is we have a file a folder and we say folder is chat okay now if i want to have forward slash chat i can have an index.js inside of it but i don't really care for that i just need a wildcard so it could be any kind of you know random string okay um so what i'm going to do here is i'm going to say new file and this one basically you put square brackets and then you put the param that you want to be responsible for that you know the id so in this case i'm going to do id dot js right so it's a little bit of a charcia but we're going to go ahead and hit enter on that okay so inside of here this is going to be a sort of a a standard react component and i'm going to call this one a chat right so i'm going to do rfc and this is going to be the chat page right so it's actually just going to be chat in this case and yes we have got a chat component but we don't have overlap because this is local to this file and this is just a file name right ankit yes it will be on line afterwards it'll be available okay so we're going to go ahead and hit save now with that said i'm going to do my typical setup i'm going to say container because we're going to go ahead and start this out and then i'm going to quickly have um and this is where server side rendering is coming in so if you've been excited for server side rendering then make sure you get ready grab your coffee you know get your tab nine installed stop that hosting here in a bit right and then basically get ready for this because this is where you know putting your you're putting your thinking out this way it gets interesting right so we're going to go ahead and import the start components at top of the file so i'm going to go ahead to import start from style components and then i'm going to go ahead and say cons container equals star div thank you tab 9. there we go and then i'm gonna save now uh what extension are you talking about i just joined so it's the first link in the description tab nine is auto complete ai right solution to sort of you know as i type it will basically guess what i'm gonna type next helps me code so much faster and there's a first link in the description is an affiliate link so it will help the channel grow okay so definitely help me out with that one all right so now what we're going to do is when we reach a chat okay what i'm going to say is i'm going to have a head right so remember like i said you have this special head which which allows us to change the uh the title of that sort of you know the web page that you're in so at this point what i can do is i can go ahead and the chat itself is going to be getting a few props we're going to go ahead and set that one up afterwards but i'm going to go ahead and say title and the title of this is going to be let's just say chat okay so one when i get onto this page and we'll say h1 this is a chat right so let's go ahead and just double check that this works right so to prove to you that this works you see if it goes to forward slash chat forward slash gibberish it works and if we go back to our home page let's have a look and we've got this and if i click on that proper reactor team this is a chat all right so we're starting to get there we're starting to get some cool stuff happening now and then what we're going to be doing next is we're going to actually introduce the sidebar here so i will have the sidebar as part of this page right so sidebar like so and you do need to import this so we can use it so i'm going to import this carl says definitely installed this extension yeah honestly it's crazy good man it's so good all right so you can see this right the sidebar popped up and then the next thing we're gonna do is i'm gonna have a chat container right so i'm gonna have a chat container which is gonna be just basically a style div okay so the chat container is very simple it's going to be a style div like so and then inside of this chat container we're going to have a bunch of different styling rules and so forth okay so the container outside is actually going to be a display flex right so we're gonna actually have a display flex raw applied uh because we're gonna have two children the sidebar and the check container itself as you can see here the sidebar now gets squeezed to the side which means that we're actually getting closer to this look and feel right and then inside the chat container we're gonna go ahead and use up the remainder of that space okay so this is where things start to get a little bit interesting okay so we've got the chat container and then we're gonna have a chat screen component now the chat screen component is responsible for all of the stuff that you see okay so we're gonna have a component called chat screen okay so i'm just gonna go ahead and make this one for now so we can go ahead and have this sort of render out okay so what i'm going to do here go into components type in chat screen dot js okay go ahead and do this and i'll go ahead and do underscore rfce we've got our chat screen i'm going to go ahead and prep this with the container i'm going to go ahead and import the um styled from start components thank you so much thomas he says something you are simply the best big ups appreciate you did here i'm going to say cons container equals star div all right and then what we're going to do is i'm going to go ahead and say so right now we can carry on with the id this one then we can go ahead and import this first time here papa fam from nigeria what's up dude good to see ya right so now what we can see is if i go back to our actual application um for the chat screen here for now what i'm going to do i'm going to say h1 this is a chat this is a chat right that way at least you see something so you see the goal is right now we get in there okay but we are moving there right so with this bit said you can see firstly this bits kind of changed right so we haven't actually got this you know like real-time functionality yet on this id page so we will fix stuff like that in a sec okay so first time watching live watching and learning from both this channel very nice thank you so much dude uh love from india thank you so much carry on at this point what we're gonna do is i'm gonna go ahead and say that the chat container is gonna be a style div and it's gonna have a flex one right and then we're going to go ahead and say uh overflow scroll right and then we're going to say height of 100 view height height of 100 view high and then i'm going to go ahead and say and i want to hide the scroll bar so if you notice on the file on the main app right if i go ahead and make this a bit smaller oops whatever down here there we go if i go ahead and make this smaller you'll start to see some overflow right but i don't show a scroll bar now how do i not show a scroll bar i basically have the following code inside right so i say okay for the webpage web webkit scroll bar display none and then these two and this basically allows you to not have that sort of scroll bar um sort of visible on across browsers okay so very very handy thing to have okay and now you can see if i click on these different individual ones as well we will also root accordingly so you see how the chat is changing over here right so it's looking pretty good at this point right so now with the chat screen right firstly we're going to go ahead and you know do some server side rendering stuff now when you are using xjs it provides two really nice solutions right it provides static site generation which we're not actually going to be doing much of today but if we don't serve aside render something it becomes static site generated by default so our login page for example is actually something that we call static site generation now these are the two concepts of nexus static site generation means that we can basically prepare a page on the server cache it and then when a user requests that page boom it doesn't need to recalculate anything regather assets it just caches it and it's so fast to deliver because it's static assets right it's not dynamic information anytime you have dynamic information for example a chat right a chat needs to be refetched every time so we need to serve a side render it now how do we determine where to do what basically nextgs does all of this for you based on what functions you use okay so if you use get static side prop so i think it's get static props then it's going to basically say that that page is a stack page but by default the page is already static but as soon as you use get server side props then it will go ahead and do and change that page so that it is basically rendered so imagine i go to sunnysanga.com i make a request for a chat page right it will go ahead and actually re-kind of build that page on the server and it would deliver it to me right as a sort of client right so this is something to be aware of okay so the the main benefit here is that like i said before web scrapers things like that when they come to your page they're not going to have to wait for the assets to kind of come in it's going to go ahead and actually have everything kind of populated for you elias says there's something that black eyes no dude it's just the shadows everything's good i mean it might be a lot of coding so you never know but yeah we're going to jump into this very very nicely now okay so the way we do this right it's very clever how this all works we simply go underneath our export default chat right and we just add in a functions we say export export async right function get server side props and basically the goal of this is that before the user sees the page we are going to fetch a bunch of props on this server right and what this does is it stops the basically we're kind of pre-fetching the data so imagine when you come on the page you don't have to wait a second before you see the chat it would already be available when you hit the page because the server would have rendered that stuff and the minute you requested the page all of it's ready and it kind of gets thrown at you it's server side rendered okay so i hope that makes a bit of sense if it did smash that thumbs up button right so at this point we're going to do async function get server side props okay get server side props how is the just look i'm confused right but they're basically this gives you something called context right context allows you to basically access things like the params of the url and the root url and things like that when you're on the server right so everything inside of this function get server side props is happening on the server so we have to bear that in mind okay so at this point what i'm gonna do is we need to do two things i need to prep the chat and i need to prep the messages beforehand okay so how do i do this the first thing i'm going to do is i'm going to make a reference the first reference i want to make is just going to be a db collection to the chat collection and i'm basically going to go ahead and go into the document of the chat where we basically go into so imagine this route it says four slash chat forward slash id and this id is like a wild card right so somebody's saying why don't we use the use effect because again this is server side rendering guys so this function is being rendered on the server which means the normal react rules are different they don't really apply the same way okay right so some differences apply in xjs so at this point we're going to go ahead and say const messages ref okay all right so here i'm going to split this up i'm going to say i'll make it very easy for you guys i'm gonna say here we're gonna prep prep the messages uh on the server right and we're gonna save and then here we're gonna say constant message res equals message messages uh res sorry what am i doing messages okay here we can say await and then we're gonna say ref dot collection of messages and then we're gonna say dot order by the timestamp right so when we basically push in those messages order by the timestamp ascending and obviously we haven't pushed in the messages yet okay so we're kind of you know preempting what we're going to do later and we're going to do get now on the server you can't do snapshot on snapshot and things like that right um because basically it has to fetch from the server and then it gets delivered to you so it doesn't make sense you can't really do anything real time after that on the client you have to have the real okay i think i'm back am i back okay are we good right are we good all right let me know if we're good and we're back and it didn't disconnect all right i think we're good guys well that freaked me out all right let me know if everything is good now and we're back and it didn't disconnect just dropping okay all right i'm in what's up dude seeing you after a long time how serious made it because you broke both my legs oh my god dude i hope you're doing good okay we're back oh thank god that scared me wow okay god damn wow that was scary all right okay all right so let's get let's carry on i was thinking i was like no we've come too far for this to mess up now all right so we're gonna get the messages res okay the next thing i'm gonna do is i'm gonna say const messages equals uh get the message response and i'm going to go ahead and say docs right now where we need to kind of prepare the data on the server side right so we're going to say docs.map right and then here i'm going to go ahead and prepare it so i'm going to say for every single doc what i need to do is i'm going to basically create an object where it has the id which is the doctor id and then we're going to have the doc data spread out right so this will basically simplify the array that we're going to send across to the client okay so again a lot of this stuff can be a bit kind of you know it can it can maybe go over your head a little bit so it's fine and uh and everything's gonna be okay right so we're gonna hit save and then we're gonna go ahead and do dot right map so once we have it in the appropriate sort of you know style that we want then i'm gonna go ahead and say messages and then i'm gonna say go ahead and okay for each of the messages right so once we've kind of made it into this format i'm gonna go ahead and do the following so messages we should get all of the properties of a message and i'm gonna change the timestamp now whenever you're dealing with an api whenever you have to stringify some information okay very important learning point right now okay so whenever you have to stringify a timestamp and send it from an api to a client you lose the timestamp data type okay so it's very important that you understand what i'm saying right now you will lose your timestamp data type when you send from the back end to the front end right unless you're doing like a firebase one or something like that but if you do it typically just from a json string of fire and a json pass where you send data from your back end to your front end then you lose the timestamp and i did not know this for quite a while and it was a big bug and yes like this is why we need to go ahead and when we send data from the server we need to go ahead and manipulate it so i'm going to say go ahead and get the timestamp change it to date which is on the uh you know on the uh uh on fire firebase gives us that functionality right then what i'm going to do here is i'm going to go ahead and say dot um get time and this will give me a unix time stamp so if you don't know what that is a unix timestamp is very simply a number which represents the time so it has the time zone everything inside of it it's just going to be pretty pretty simple to use okay so that's basically what we're doing there okay so guys we're almost at 1.3k likes oh my god this is just like insane wow thank you so much firstly and you guys are incredible okay so we're gonna keep going strong let's keep on going okay so at this point what i'm going to do is i'm going to go ahead and say um let me go ahead and do one second guys there we go all right whoa we almost at 1300 likes let's go this is crazy okay so now what we're going to do is we're going to go ahead and say we've already translated our data as we needed to all right the next thing i'm going to do is prep the chats right so i want to kind of prep the chats prep the chats okay and this is very cool trust me i'll show you how it all works in a sec okay like once it works it's just it's cool like it's cool server side rendering is cool okay then we're gonna say chatrez right this is gonna be a chat response and then aslam said let's bring the energy back let's do it guys let's do this let's do this okay let's pop the music up a bit okay so now we're going to see a weight right ref.get right so we're using that initial reference to kind of you know build everything off of right and then what we're going to say is const chat and again what i'm going to do here is go ahead and basically restructure or create an object for that chat okay so here i'm going to say create an id where the chat res is the id right chat res oops is the id right so there we go and then i'm going to go ahead and say and then spread out the rest of the properties inside of that object inside of the data so we're kind of like unwrapping it okay so perfect so now what i'm going to do is we're going to go ahead and have the following in play okay so we're going to go ahead and return the following now this is the bit where i need you guys to focus okay so when we serve a side render the server basically prepares the page before the client even gets to the page so once you go on to like sunnysanga.com and you make a request then at that point you're contacting the server right when you contact the server all of this magic happens right so this magic is going to happen on the server before you even see the page right then what then what happens is we basically the server returns some props so that way when the react app loads up for the first time it will have props already there right so this is why that we have a benefit of server side rendering so what i'm going to do now is i'm going to return an object where the props are going to be the following and we're going to pass in the messages and for the messages i'm going to say json stringify right so we're going to adjacent string of fire because whenever you're sending data over an api for either from a server to a client it has to be in the form of text you can't pass complicated message objects across the network so imagine like you can't just pass a complicated object over the internet right it doesn't work that way you stringify it and then it's a piece of text easy to send over the internet and then you pass it when you receive it wow we just broke our 1.3k likes that's incredible thank you so much guys you guys are insane like honestly wow they live with three masters good morning bro thank you dude good morning to you too uh evening over here and then we're gonna basically pass the chat now the chat i don't need to stringify because it's actually a very simple object but the other one has a bit more complexity to it so i'm gonna stringify the messages okay so at this point what i'm gonna do is i'm simply gonna go ahead and save okay so i'm gonna save at this point and then i'm gonna go up to the top now my chat right so think about what's happening here right we basically are going to go ahead and have the server side rendering occur before the actual page loads so here and then we get props right the props can get destructured and then we will get the chat and the messages come through okay so how can you prove that any of this works and i'm not lying right so what we can do here is if i go into my uh the server-side rendering portion i say console.log the chat and messages right then what you can see here is if i go ahead and show you the terminal and i refresh look at this guys it says oh right now we've got an error this is interesting db is not defined so we need to go ahead and fix this we need to import our db and import it from firebase there we go and now you should be able to see says db is not defined and then it says ref.collection order is not a function right so let's go ahead and check my it's order by there we go save and then we're going to refresh and then you guys can see look at this on the server okay so think about what's happening right now right on the server right we are seeing so firstly we are seeing the uh let me go ahead and do uh a fresh one and refresh there we go so on the server we are now seeing firstly let's go ahead and see where we are propping it here we're seeing the chat which is probably blank at this point because we don't have a chat that makes sense and then the messages right and the message is right here so an id which is exactly this message right and then it's got the users so the chat id and then we've got the users inside of it so you see how it's basically rendered beforehand before the page even loads right on the server it gets rendered which means the deployment will also be slightly different okay so at this point what we're going to do is we're going to go up to the top we've got chat and messages and then we're going to go ahead and firstly pull in our user authenticated object so again we're going to go ahead and pop in our handy little hooks and our handy little authenticated object from firebase we now have the user okay so at this point i can say we can actually enhance our chat at the top by saying chat with and then we can use our handy little get recipient get recipient email function that we created earlier on which i can pull in right and i can pass in the chat.users which will give me the chat.users that are like from that we got from the server side render and the user who is logged in on the client right so we're mixing some of the server side rendering portion of things that have been popped over and this right now you can see at the top of the page it says chat with papa react.team which is awesome right if i go ahead and start a new chat with abc test.com now you can see if i click this one it will say chat with abc at test.com and if i go here and say chat with proper react.team there you go right so somebody changed that one that's interesting all right so uh oh paparat.teen oh no all right purple rehacked correct oops.team gmail.com that wasn't the correct one there you go probably outdoor team all right i've done the wrong i've done the wrong name so that's an interesting one whoever's done that i think someone must have created that right so um all right so now we're gonna do is we're gonna go ahead and we're gonna pass in the props that we received from the server-side render into the chat screen okay so basically when the page loads when this route loads we're basically getting a bunch of props and then we're passing this into the chat screen component okay so here what we do is we say chat equals chat and then we can say messages equals messages what's up priscien all right so now at this point we are ready to build our chat screen component right so we just did a nice bit of uh server side rendering there and for the record we can go ahead and we can remove that console log which we did right so there we go so it's going to basically do a bunch of calculations before the page is even reached okay so that's the way we need to think of this and then we basically get that received as props on the client and then the prop can you can render it out okay so what we're going to do is go into chat screen and then i'm going to go into and then we're going to start building out our chat screen okay so at this point what we're going to do is we're going to go ahead and say and i just got an email from steve johan i'm not sure if you're watching but he says do i get lifetime access to the code repo yes once you get once you buy the code repo you get lifetime access to it even if i you know update and add on new things okay so what i'm going to do is i'm actually going to clean this up a little bit i'm going to go to my users and i'm going to delete the property property.team this one because that was a mistake all right so i'm going to delete that one now there we go and you can see there we've got it changed as such and i also want to change the one where i've created a chat right so let's go ahead and create that delete that one there we go i'm gonna delete that document there we go now we've cleaned up nice we don't have that mistake right so we're gonna create the chat screen component at this point right and remember like there's quite a lot that we're doing here right so we basically need to move a speed that is fast but is somewhat explainable and then you guys can go ahead and take your time with the with the rebuild okay so now what we're going to do inside the chat screen is we get the props come through like i passed in remember we've got some props and we get the chat and the messages okay so i need a few things in this screen the first thing i need is the user who is logged in so i'm going to go ahead and pull the user in and then i'm going to go ahead and do this and i'm going to go ahead and say wait for it boom login plus that one in and we pass in this one and now we've imported the correct dependencies as we needed right so we now have the user next thing i'm going to need is a router because we're going to be using that very soon so i'm going to go ahead and pull in the router we can pull that in from next.js and then i'm also gonna need um let's go ahead and start building out right now okay so what we're gonna do is we have a header right so let's look at the main one and here you see we have a header right so this header is the first thing that we're going to be building so the header remember we have the container i'm going to go ahead and say header and this is why i really do like styled components because it does make the overall workflow quite easy to follow okay so style div thank you tab nine for always coming in clutch and if i go ahead and hit save now we should see that it disappears because we have no actual context there or any data but here we have an avatar a pete like a h3 maybe a p tag and then two icons over here so we're going to build that bit right now okay so what i'm going to do is i'm going to say if there was a recipient right and remember we did this logic earlier but i'm going to go ahead and show you that how we do that in a sec um but basically i'm going to have an avatar here so i'm going to say avatar like so i need to import the avatar okay so we're gonna have the avatar over here and then i'm gonna have the header information now the information is gonna represent a div around this stuff okay so over here i'm gonna say header information so here header oops header information right like so and then i'm going to go ahead and hit save and we're going to go ahead and do const const like so and we're going to do this and it's going to be star div and hit save there we go and then third get the document into client is offline interesting right now let's double check what's happening here if i go ahead and restart my server you're on dev and let's see what's happening here and then if we refresh so while that's happening what we can do is for header information we can go ahead and pop in this one there we go that's a strange error if you get that just do what i just did uh there we go okay we've got the header information which is a div always freaks me out honestly 1.3 k likes we're almost at 1.4 guys come on smash that thumbs up button if you haven't already and let's keep this energy high all right h3 so here i'm gonna have the recipients email okay so this is gonna be the recipient email okay they'll be help if i'm always spelling that correct um there we go oh my god let's just say wreck email right so there you go you got the recipient email and then you've got the last active okay so the last active is going to be something a little bit more interesting right so we're going to actually do some kind of more complicated stuff around that right so here i'm going to say p and then i'm going to have something like a last scene dot dot right so we'll go ahead and you know fill that out in a sec and then the final thing is i want the header icons right so i'm going to make a div around the header icons like so like this and then i'm going to go here down to here and i'm going to say const header icons equals a star div like so okay now inside of the header icons remember icon button gives us this wicked like uh you know clickable floaty sort of look on top of our buttons so we need two buttons we need the attach file icon and a more vertical button icon so these two buttons right and then we surround them in the icon button to get that nice clickable effect okay so what i'm going to do here is i'm going to go ahead and do the appropriate imports so i need two different things here i need the more vertical icon button and i need the attach file uh one over here there we go and inside of our header icons what i'm going to do is i'm going to have an icon button for each wrapping it so i'm going to have icon button like so right and then um let's go ahead and do this and uh oh god guys come on give that give it a break all right so here we're going to say owner where's the icon button like this and then i'm going to go ahead and do this and then pop it in here oops okay and then what i'll do is i'm going to go ahead and say for the icon button i'm going to basically go ahead and do um the first one is going to be attach file icon all right so attach file icon like this and then the second one is going to be for the more vertical button icon okay so this will be more of that icon okay so we're going to do this now i will quickly go ahead and clean that one up let's go ahead and drop that out where's it interesting um where is it this one guys come on keep it clean please like it's hard to or already do a live you know let it learn this all right so i'm gonna go ahead and refresh there we go nice and uh oh before i get rid of nice there we go easy as all right so now what we're going to do is we're going to go ahead and start this out okay so for the um down here we're going to go ahead and say for the header we're going to start styling this bit first now the header is going to be position sticky because we do want to have you know the the top elements stick to the top of the page right so style div at this point is going to be ironman says i learned a lot from you thank you thank you dude for turning up right position sticky right and then i'm going to say background color of white so background color background color of white oops background color of white then i'm going to go ahead and say a set index of 100 because i just want to be 100 absolutely sure that it doesn't you know like mess me up when i'm um when i'm trying to like show it over or something and i'm going to say top zero to allow it to stick with this to allow it to stick to the top with position sticky then i want to display flex because i want everything inside of it to be padded okay the panning is 11 pixels as well so display flex and the padding of 11 pixels everything now goes into a line because by default your flex direction is a row the height is going to be 80 pixels i'm going to align the item centrally and i'm going to give it a border bottom one pixel solid white smoke there you go very nice okay um let's carry on so hugo tech says kudos bro you're changing lives lots of lives here in nigeria thank you so much man honestly like i really really am glad to hear that right the next thing is header information so here what i'm going to do is i'm going to go ahead and say a margin left of 15 pixels all right so margin left to 15 pixels like that it'll push it away a little bit and then i'm going to say flex of one because i want this header information container to take up the majority of space which will push these buttons to the right okay so that comes that's really really nice when we do it that way yes the uh papa the github repo comes with paper platinum i recommend if you want to join the papa fam zero to full stack hero link in the description join papa platinum is the golden package all right so it's honestly the best thing you can get right so at this point i'm gonna target the h3 inside and the p tag so how we can do that is in start components it's so easy we can just say h3 and then we can go ahead and say margin bottom of three pixels like so right so you can see it's a very slight adjustment i did it's the small things that make it looks the final piece right and i'm gonna say the p tag is gonna be a font size of 14 so let's go ahead and say font size of 14 thank you tab nine and i will say color is gray all my completions today have been tab nine they've been in clutch right so it's been it's really helping us out right so i don't know why this is happening but if that happens um this is probably because i'm live right now to be fair because the client is offline right interesting okay so it's probably because we've got quite a lot of traffic going to it but the next thing you want to do is we're going to go over to our let's go to the top we now have the header sort of set a bit right we have the header pretty much as we wanted it so the next thing we want to do is kind of move over to the uh body so we're going to call this the message container okay so in here we're going to go ahead and say message container like so okay now here we're going to have a function for showing the messages so here i'll say something like show messages as a function and then i'm also going to have an end of message right end of message all right now this is an interesting one this end of message is just going to be a div at the end of the messages if you've ever done auto scrolling you'll know what i'm about to do there afterwards okay so this is going to be something for later it's going to be a style div which is going to be pretty much empty but it allows us to target the end of the messages so that we can auto scroll to the bottom of the page when we type something in for example if i'm here and i type in test i just go ahead and say like i typed in hello world notice how it scrolls to the bottom right that's because we've got that little trick in place so i'm going to show you guys how to do that right um thank you libna any plan for a murm project not at the moment but um it depends on demand like next year was demand so i moved towards it okay now let's continue on so we've got this happening message container is not defined so we're going to create message container that's a simple div so here i can say const message container equal style div like so and you can see this will now pop up okay uh wait for it wait for it wait for it at some point it will pop up okay so there you go and then you've got this is starting to look a lot more along these lines okay now over at this point we had a p tag which said last active blah blah blah now i'm going to basically go ahead just text saying thank you so much dude what's up 5.05 canadian dollar donation yo this is awesome signing you're late to the build excited to learn next just coffee's on me but thank you dude always always appreciate that uh i want to fly nft app stores guys dude give them zero stars at this point if you're just gonna spam but um please don't do that okay um but at this point what we should do is um we're gonna go ahead and i'm just gonna clean now okay thank you so much just egg that's incredible dude so we're going to go ahead and do this right so let's carry on so we're going to go ahead and have we've got this last scene over here now for the h3 the margin bottom was three pixels there we go and then i'm going to go ahead and i try to say certainly you're on fire thank you so much so where we have the show messages okay this is gonna be an interesting one so this is where the magic kind of is going to happen okay so show messages is actually a very powerful function and what it's going to do is first it's going to show you the data that comes through from the server side render which means that immediately when you land on the page you're going to see some chat right but then what we want to do is we want to make a real-time connection on the client to firestore so that way we have the real-time feedback the minute that's available because the keys are the same on the chat list it swaps so we have the server side rendered content initially and then it swaps for the real-time content which means that when we start chatting further on you're going to see a real-time feedback which means that you beat the benefit of you get the benefit of when you come onto the page of not having to wait for a bit of chat to be seen and then when you immediately start chatting with someone you're going to get the real-time functionality of it so best of both worlds server-side rendering and client-side at its finest okay so let's go ahead and do this i'm going to take a quick wall break wow my notes and coffee is on this is crazy 202 almost three hours be proud of yourself thank you so much man and we nearly have 1400 likes so please smash that thumbs up button we still have a little bit left guys so come on get your coffee get your energy up we're gonna keep on going until we absolutely destroy this stream okay so let's keep on going right now for this chat screen right so what i'm going to do is for the show messages at the top i'm going to say const show messages and this is going to be anonymous function which will simply return some uh jsx but in this case what i'm going to do is actually have a little bit of logic involved in it here okay so what we're going to do is i'm going to say i need to firstly map and get the messages okay so we're going to use the use collection right so we're going to use the user says that actually meant a lot dude so thank you so much for that kind comment because uh it's those little comments that are very handy when you you know when you start getting to this point um so that that's awesome dude um okay so let's go ahead and carry on so here we've got the show messages so what i'm gonna do now is uh i'm gonna go ahead and say where we've got show messages i'm gonna go ahead and do if messages snapshot like so there we go and then i'm going to go ahead and say show messages return and then this is going to say oh wait so i need to go up to my use collection there we go use collection over here there we go nice right and then what i'm going to do is i'm going to go ahead and do the followings i'm going to say um where is it hey my girlfriend's in the house there we go she is you know she texts me saying are you done yet and i was like no yeah yeah i didn't reply but that's why so we're gonna say constant messages right so messenger snapshot oops messages snapshot messages snapshot right and then equals use collection messages so you see how good that was right it automatically populated for me i sent you an imessage and realized you're busy yeah that's why we can say db we're going to import db from our local firebase right so i'm going to just full screen this db.firebase and then we're going to say db.collection and this is going to go into the chats that we sort of set up earlier right so db collection of chats okay then what i'm going to do is i'm going to go into the dock and this is the interesting part okay so remember the route that we're in is going to depend on the chat that we're showing right so in this case we've got the chat for some id okay so what we're going to do at this point is we're going to go into the root params to get that id so i'm going to go here doc and i'm going to say rooter dot params all right so rooter.params.id right so i'm sure it was really no no it's not rooted.params it's real.query sorry.id and that will give me the route that we're currently on okay um i gave these owner five guys one story in the app store dude i know they're asking for one side yeah so at this point what we're gonna do is i'm gonna go ahead and say dot collection right so your collection and i'm going to go ahead and say go into the messages okay for a chat and i'm going to order by the time stamp okay so order by timestamp uh timestamp and then we're gonna do by ascending right and hit save okay so i'll show you guys this in a very simple shot nutshell so here we go you've got the chats it's gonna go into the specific chat based on the route go into the messages and order them by time stamp okay so this will give us all the messages that we will have in a given chat okay now once we have that basically in the show messages function i'm gonna say if we have the messages snapshot okay then what i'm gonna do is i'm gonna return those messages okay so i'm going to return the messages snapshot right dot docs dot map right then what we're going to do is i'm going to go into that and say message like this and then i'm going to have an open brackets like this and then i'm gonna have the message being rendered on the screen okay so each individual message is gonna be its own component because that will make the whole thing a lot more reusable easier to go ahead and use it okay so at this point i'm going to say message okay and then basically at this point we would pass in a bunch of props here right so i'm going to pass in a few things here so i'm going to pass in the key right i'm going to pass in the key i'm going to put and this is going to be the message.id and we're not using the server side rendered content yet okay bear that in mind right we're going to be going ahead and using that in a sec but here i'll say we're going to the user is going to be the message.data.user and then the final thing here so the message is basically going to be an object right now the object i'm going to pass in here is going to be message dot data so we're going to spread everything from the message and then i'm going to get the timestamp and remember we did that conversion right we did the conversion previously on the timestamp to make it um sort of you know like a unix from the server side rendered stuff so i'm going to convert the stuff that comes over from firebase and the client to unix timestamps so that way we have consistency regardless of where we get the data from and then here is a two day like this and if you've done server side rendering before that would have made sense but if that wasn't something that made sense then that you know it's gonna sort of confuse you a little bit okay so we're gonna go ahead and hit save and we've got the message now i need to create this message component so i'm gonna go over here go into my message.js like so and then i'm gonna do underscore rfce okay we're moving at such a place today it's crazy right and i'm gonna do my nice little start components tricks and stuff i'm gonna say const message sorry container equals uh styled dot div thank you tab nine always speeding up my coding and then i'm going to go ahead and import my styled component so that way we can use it okay now what we're going to do is inside of the message we're going to go ahead and actually remember i passed in a bunch of stuff right i passed in the the user and the message right so user and the message so at this point what i want to do is i need to render that message on the screen okay so the first thing i want to do is actually show the message now the message itself was in an object okay so just for now i'm going to show a p tag with the message content inside of it okay so message like so and with that said now if i go back to the chat screen if i go down to where it says show messages and if i uncomment this and say show messages show messages like so and i save now what we can see is i can see this right so you can see pretty much if i go into proper react like so uh we should be able to have the messages inside of it but we need a way of adding the messages okay um oh my god guys chill honestly with that all right i'm gonna actually take something down in a sec so that way you guys can't keep adding to the database right so in order to prevent that i'll show you how to do that right so with firebase rules you can make this very simple you can go ahead and do edit rules and i'm just going to stop the reader right until i need to go ahead and mess it right and i'll read it right false there you go kill the fun for everyone right so that's actually not the way it would be allow um is it is it it's not this one it's not if uh if we'll say if uh let's just say false right now i think that should force it as a lazy way of doing it right so we're gonna go ahead and do that so now we shouldn't get any more of that headache until i go ahead and fix it um you know i'll block someone out because that's annoying guys don't do that oh god's sake right so at this point we're going to go ahead and do this and we're going to go ahead and do the following okay so we've got this and i'm going to go into my chats and we have this okay so we've got the users so forth okay oh guys come on all right so we have this yeah it's super annoying man it's really really annoying like when we get this sort of stuff you know so the users right now i'm gonna go ahead and just do this we don't actually have that here the messages was where we were getting it but i'm going to go ahead and quickly clean this out okay so oh my god owner fine nick wow it's not really hacked dude it's just kind of some stupid you know but i'm going to go ahead and delete some messages there we go all right there you go this is why you need to lock up your database right now i'm hiding the screen so that way we can go ahead and you know get rid of that stuff um but for now for the users i'm just going to remove all of the chats at the moment so that way we can start fresh and we can go ahead and have a clean database okay so i'm gonna say chat and there we go okay so i'm gonna get rid of all that stuff okay cool so at this point what we can do is we can go ahead and have it like so okay and then what i can do is i can go to my my web over here and then we have the chat okay so what i'm gonna do at this point is we are going to go ahead and build out the rest of it okay this is why you yeah this is why you don't share the credentials now with this learning curve you know but there we go so that unified dude can you know do one hacked my arse all right so let's go ellie if you're gonna hack do it properly all right so chill dude all right so messages right so at this point and you're messing with the wrong person with you and trying to hack right so now let's go ahead and we've got the end of messages over here so now when we show the message it will be there like so okay now what we want to do is we're going to actually go ahead and have the type of message here and then what i'm going to do is for the um let's go ahead and sort this out so right now i'm going to have the we've got the message container at the bottom and we have the uh the that's how you know we handled that dude that's how you know we handled that because uh we literally did that live on stream which is a lot harder than you think right so i'm going to go ahead and pop an input container here because i need a way of basically at the bottom of the screen having some kind of text right so it just now it's not even hacked it's just credentials that's it it's just easy it's easy to do that right anyone can do that right so at this point when we've got this we got this okay cool so at this point what we're going to do is we're going to go ahead and do the following so we're going to go ahead and pop in um where is it where am i looking yeah the input container so that's our goal to get this nice bottom bit done okay now for the input container i'm going to go ahead and have a little smiley face icon so this smiley face icon over here right so this one over here and you see that's why you can't get into this one so you can't you can't hack stuff if you don't dare right okay so for this one input container i'm going to say insert emoticon emoticon emoticon icon there we go okay and uh emoticon icon there we go and then what you want to do is basically import this as required from the top okay so i'm going to go ahead and import this at the top like so and then we have it there so now what we're going to do is i'm going to have the input okay so the input is a styled input so let's go ahead and get the energy back up guys we just are about to hit 1.4 k likes okay so let's go ahead and push for this right so let's go ahead and say input there we go input like so and i'm going to go ahead and create a styled components which can say const input okay or let's just say input sorry input equals style div right and then at this point we're going to go like so right and i'm gonna go ahead and do this right so we have the input like so and for this one i'm actually gonna go ahead and i'll show you what i'm gonna do after that but we actually have okay so this is very interesting so the input container is not actually gonna be a uh div okay so the input container is not gonna be a div it's gonna be a const input container it's gonna be a styled form okay so it's gonna be a start form and this will allow us to have it so where is it going so right now we actually don't see a missing or insufficient permission oh come on let me do read only then um that's because we propagated it let's just go ahead and do rules and then we'll go ahead to allow read if false and then we can say allow read there we go hello read allow read there we go and that will be allow us to read but not right to the db okay so that will go ahead and fix that issue for us but what we can do is we can just focus and we can code on it like this okay so where we have the input container this is going to be this one over here that you see down here the input to get it looking like that right what we do is the input container is we're going to go ahead and say where is it input container so down here we're going to say it's a styled form okay so start form like this and then what i'm going to do here is i'm going to basically go ahead and say display flex display flex like that i will say align item center so align items center okay and then what i'm going to do is padding of 10 pixels okay then we'll say position is sticky right so position is sticky and i'm going to say the bottom is for zero okay and then the background color background color is going to be for white okay so the background is going to be white and then i'm going to do a z index of a z index of 100 okay that's awesome looks really good and everything is perfectly as we kind of needed at this point um okay now what we're going to do is i'm going to go ahead and this should be now read readable we should be able to have this as a read let's go ahead and see if we do it there we go perfect so there's missing or insufficient permissions that's fine we can fix that after but for this one now what we can do is where we have the input field this is going to be a styled input sorry and this one will actually go ahead and do the following so we'll say start input and i'll say this uh flex one says reflex one and then we're going to say align the item centrally right and then we're going to say padding of 10 pixels so we got a turning of 10 pixels and i'm going to say position sticky but this is going to be sticky to the bottom there's reasons why you want to do positions sticky even for the bottom okay it's so that you don't have to mess around with a lot of padding issues and stuff like that now we're going to do a background color of white right background color of a white right and then what we're going to say is we're going to go background color of white and then we're going to do a z-index of 100 okay so for this one we're going to actually have no this is the input sorry we're going to have a background color of white smoke right for the background color this one so the input we're going to have the following i'm gonna just drop these in all right for the input i'm gonna have the following here like this and then for that one we have it like that okay there we go and that's how we get this nice looking sort of stuff over here right the final thing on the other side is we're gonna have a mic icon so at the end of the input container i'm going to have a mic icon like this all right so the mic icon isn't defined at the moment so i need to go ahead and pop that in so here what i'll do is i'll pop the mic icon in guys we are six likes away wow we are six likes away from getting this done this is crazy right and what i'm gonna do is i'm gonna swap the credentials for the other firebase project that i did so that way we're all good and we don't have to deal with any of this headache so you know messing with the wrong person dude so i'm gonna go ahead and swap my credentials out i've got my other credentials for the build that i did which yeah it's completely good so i can just go ahead and do that right now and we can go ahead and have all of the stuff back and running and it's just easy you know it's just very easy right so we can go ahead and do that and now if i go ahead and refresh all right so if i go back now like this let me hide that one there so there we go perfect guys there we go the boys always got away even on live right so now we've got this right so at this point we've got all of these different chats happening over here so if i go for example to j right so his message is not defined okay so we need to obviously fix the message portion of what we're doing so i need to render in the message so wherever i got the show messages let's have a look we've got the message here so i'm going to go ahead and hit on components message like so and then we refresh and let's have a look what's happening here so it says objects are not valid as react children so we're not actually passing in the correct structure yet okay so the reason what we need to do here is find the object's message time some user photo url okay so let's have a look at our chat screen right so let's have a look at that one and we can see here we've got the message data and then for the message itself we have the message.data and we have timestamp which is message.timestamp to get there we go okay and then what we're going to be doing is we're going to say and let's comment out the messages for now okay because i want to show you that in a sec right so if we render this out there we go okay now what we want to do is we need to basically get that input field stuck to the bottom in the correct fashion so for the message container we're going to do the following styles okay so message container i'm going to go ahead and pop in the followings so we're going to go to our start component and i'm going to do a padding of 30 pixels uh where is it i think of 30 pixels background color and a view high of 90. and there you go look how nice that looks right but we have this overflow issue okay so we need to fix the overflowing issue and make sure that that's correct okay so at this point we need to go through and sort of adjust the styles we'll do that in a sec um but we need to make it so that we don't have this incorrect overflow happening so if i go to my sidebar right now and i go to that container i'll show you where we can basically enhance it okay so if i go into my sidebar the container we should be able to now go ahead and do the following so i'm going to apply the following styles now explain what they do so i'm going to do this i'm going to say flex 0.45 right border right one pixel solid white so it gives a nice border right height of 100 view height okay and then i'm going to say min width is 300 pixels max width 350. so it is going to be responsive when you change this but it will only grow and shrink up to a certain point right and then after that you can use media queries to you know go ahead and do it aaron merchant says i think it's pre-recorded no no dude i'm this is all fresh look this is me zooming in and out all right and then we got overflow y for the scroll okay now webkit scroll bar over here this stuff is to hide the scroll bar so now you can see look we've got this nice scroll functionality okay and guys we just broke 1400 oh my god 1.4k likes that's crazy guys that's crazy um it was better react sprinkett dude not not the other one yep okay so at this point we've got this happening okay so this is looking pretty good at this point right uh so what we're gonna do now is i'm gonna go over to our chat screen and we're gonna finish off the chat screen okay so i've got the chat screen up and running and we just need to basically get the the actual chat functionality working in the way that we want okay so for the input i'm going to go ahead and map this to a piece of state so the input over here right now i need to create a piece of state to basically go ahead and update as i type in and the way i'm going to do that is i'm going to have our typical approach of this someone say constant input set input equals use state okay so it's a piece of state inside of react and then what i'm going to do is i'm going to map it to the input field down here okay so i'm going to map it so i'm going to say over here what we want to do is the value is going to be the input and then we're going to say the on change on change is going to be equal to e set input okay set input like so and this is going to be e.target e dot target dot value okay so every time sort of the user types into that input field it will update the memory and state okay now what we need to do is a little trick here so obviously input container is a form right which means that i want to have a submit functionality okay uh hardik says you're on fire dude hell yeah so here we've got the button right i'm going to go ahead and create a regular html button and there's a reason why i'm doing this okay it's going to say send message but we don't actually even show it but i'm just doing this so you can understand what it's doing it's going to be hidden so we're going to pass the hidden attribute which means it doesn't even get shown on the page right if i don't do this you'll see it's a send message down here so i'm going to show you guys here you see it's a send message over here right so send message over here like this right so what what we want to do is make this a hidden button but it's still functional okay so i want it to be hidden but i still want to be functional and that's how you do that you just say button hidden and then i want to say disabled if there is no input so this will prevent the user from sending you know a message if there is no input already there and then we're going to say the type of the button is submit thank you tab9 for coming clutch and then we say on click is going to trigger a function called send message which i'm going to go ahead and write now okay so over here what i'm going to do is i'm going to say const send message equals like this okay so it equals a nice thing over here let's make it 1.5 k likes guys can we like that is crazy if we beat that like whoa man like that's just insane you know like 1.5 k anyway it's climbing up so fast come on guys i think we can do it as a team right papa fam is a hell of a lot strong like it's just insane and saying the support we have right the send message takes an event and then what we need to do to prevent the page from refreshing is e dot prevent default okay next what we want to do is i want to go ahead and basically do two things when a user sends a message i want to update their last active or last scene to their most recent activity so whether every time they send a message i'm going to go into the user's document and update their last scene that's how we get the real-time live scene functionality and then i will go ahead and map this sort of uh the last scene status to the ui and you know update things like that what's up sharika good stuff all right so now what i'm going to do is i'm going to go ahead and say db dot collection so db.collection and then i'm going to go into the users so i'm going to change this to be users and then i'm going to say doc and i'm going to use the user's uid for the person who's logged in okay now here i'm going to do set okay now set if there isn't a document there or create one for me but the thing that we want to do is set pass a second argument which is merge true and that means that it won't override everything that was currently in there now inside the object that we're going to pass to it i'm going to say last scene will get updated with the following value okay so i'm going to get import firebase from firebase so we're going to import firebase from firebase there you go tab 9 common clutch and i'll say firebase.firestore all right firebase.firestore.fieldvalue right.servertimestamp and this will basically give the latest value on the on the server okay so this will be the first thing so when they send a message it will update their last scene right so this will update the last scene here right that's what happens there when you do that and that looks really really cool and then what we're going to do is i'm going to say db.collection of chats okay and then we're gonna go into the chat itself and remember we have access to this based on the router dot query so we're gonna say rooter.query.id okay so this is why we use that one and then we'll say dot collection of messages okay do a collection of messages i'm going to say add right because we're basically in essence adding a message in right so what i'm going to do here is i'm going to add in the timestamp right so i'm going to add in the timestamp and this timestamp is going to be nothing but no different to the previous value that we got okay it's going to be the server timestamp okay so at this point what we're going to do thank you so much kaiser he says valuable content best youtube teacher ever i really really appreciate that man thank you so much and here i'll say the message is going to be the input okay then once we've got that i'm going to say the user is going to be the user's email okay and then i'm going to go ahead and do the following with a photo url is going to be user dot photo url okay and then what we do is once we send that message or add it to the database i'm going to set the input oops i'm going to say set the input to a blank string so it goes ahead and changes it and then we will scroll to the bottom after that but i'll go ahead and do one thing at a time okay so once we've done that and once we have that sort of you know set up and working what we now will do is we will go ahead and uncomment the show message okay so that should work for us if we go ahead and say if message snapshot return doctor message and so forth like so okay and then what we'll do is i'm going to go ahead and say let's go ahead and firstly try this out so i'm going to go here oops so i'm going to go to my code and it says objects are not valid as the children so we're not passing it incorrectly at this moment so i will debug that in a sec but right now if i type in abc enter and we got no error which means i can assume that it pretty much went into the database at this point okay so with that said what i'm gonna now do okay is i'm gonna go ahead and set things up so that way we can actually start seeing some kind of message on the screen okay so remember what we did before right where i went ahead and said oops i went ahead and said okay if the messages snapshot is available then go ahead and render it right but remember we actually went ahead and did quite a lot of work right to go ahead and actually get the um get the server-side rendered content so this right here is what is happening when we um when we render um based on the client so as soon as the client is connected it will then go ahead and fetch the real-time information but before we even reach the page we want to use the server-side rendered content that the server generated to basically give us a value immediately okay so if i do that i'll say return json.pass right because remember we json stringified it from the server we're going to pass the messages that come back and i'm saying map and every single message that comes back i'm going to go ahead and render you guessed it a message component okay and this is why we pass in in a sort of different format so now i'm passing in the same thing the met the key the user which is the message.user and the message itself okay so now with this said i can go ahead and show messages and let's see what happens let's go over down here and then show messages and it probably will die there we go okay did i and i'm going to save and go into my message and let's debug right so message.message is actually the correct value that we wanted so at this point look at this hello sonny abc and if i say yo this is papa react there we go okay so this is working right and if i go into any of these chats right now look at this it will actually give me that value okay now it's not actually server-side rendering in the way that i expect it to right so because right now you see there's that little delay when we reach the page it should give it to us immediately right so we will debug that and check out what's going on there afterwards okay but until then we can go ahead and you know carry on fielding this out right what we want is the goal is to basically change a page and you see as i come onto the page it will go ahead and then let me go ahead and refresh this one when i come onto the page let's have a look then it basically already has the text available can you see that right so that's where the server-side rendering comes in versus client-side rendering where there's a little delay right so this is awesome guys thank you so much for the stuff all right so what i'm gonna now do is where we have the recipient email at the top i'm actually gonna fix this one first and we'll just go ahead and you know we'll slowly fix these issues right so the first thing i want to do is the recipient email okay now the recipient email i need to go ahead and um do the following for so i'm going to go into the top here and i'm going to say const recipient email equals i'm gonna say get recipient emails we're using our helper function that we created earlier okay so this is get recipient email and i'm gonna go ahead and do the following and i'm gonna say chat.users okay i'm also gonna pass in my users so chat.users was what came in from the server previously and then i'm going to basically combine that with the user that we have and this will give me the recipient's email at this point what i'm going to do is go here and pop in the recipient's email okay so now if we check this out and i go ahead and refresh so our server-side rendered information isn't actually coming through the way that we expect it to um so we need to debug this okay so what i'm going to do is console.log the chat and messages and let's see what's happening behind the scenes and see what's happening so we got the object of empty right so it's got an id inside of it and this one's got an id inside of it and this one's got an id inside of it but something's not happening right so it's an object and then we've got an empty user's array we shouldn't have an empty user's array so we need to go and debug it and see what's happening so before we reach chat screen we are id over here let's debug this and see if we're doing it correct okay so chat is being passed here messages is being passed over here right so this all seems pretty okay everything seems prettier right at this point now what i'm going to do is i'm just going to double check that all my logic here is correct okay so i'm going to go ahead and just go ahead and swap this out with the following there we go everything seems pretty good at this point um and then what we're gonna do is we're gonna go ahead and double check so everything here is coming through in the way that we expect so on chat screen let's just double check for a second and see what's going on so now you can see that things are coming through in the correct way the ids are coming in like we expected them right but if i go ahead and refresh let's see right so we should be getting the chat or the users in there at this point which we're not getting right we're not getting that at the moment but if i go ahead and type in let's just say test right interesting we'll figure this one out right so the chat right now is blank right so we're actually going into a blank chat and so forth but if i go ahead and do this and i go ahead and oops and i go ahead and do the following and i do this and i go ahead and do chat like so then let's go ahead and see what we get so we get the second one which is line 18 if this is coming through the chat is coming through okay now the chat users is not coming through which is interesting okay so let's see where we're using this right now so we've got the chat.users so this is actually not coming through in the way that we expect it to okay so something is not going on correctly on the server-side rendering portion of the build okay so if we double check this let's have a look get a service i props go into the chats get the context query id get the messages timestamp ascending get this stuff uh go to timestamp.to date there we go and then we go ahead and stringify it and we pass it through as the props at this point let's console logs the chats that we get and let's see what's happening on the log chat and you guys are seeing a live debugging session right now right so this is where we get the messages messages and then what we do is go ahead and refresh let's have a look okay so it comes in and you see even over on this point on line 11 we're getting a chat with just an id and we're getting the console with just an empty messages so the messages is actually i think okay at this point right but what we need to do is actually go ahead and just double check why this is all happening so messages timestamp ascending so look the database store collection let me go ahead and just double check my firebase config guys give me one sec okay so we've got this back what i'm gonna do is let's go back to my one sec right let's go back to my firebase one second this stuff happens you can fix it just don't panic when it happens that's my main thing behind this okay and that would be my sort of you know don't freak out and kind of you know oh my god it's not working we just will figure out a way of how to do this and we can see what's going on with it right so we've got the users everything seems to be coming through on this side um so in the correct way that we expect it now i'm wondering if maybe we've exceeded a quota on that side of things which is what could be happening so let's go ahead and double check what's happening here so um if i go here and i go into my chat or chat screen like this and i go ahead and see now if i go ahead and request the page refresh let's see what's happening okay now you can see that we're not even getting uh anything come through at this point so i think what's actually happened here is we've probably exceeded a quota so i have a feeling that's what's going on okay so i'll show you guys how to build this out no worries i'll show you guys that if i go ahead and refresh this to see if that's what's happening no it's not interesting okay so entire chat screen let's restart this server okay and in the meantime what we can do is just go to our sidebar and let's go ahead and check if everything's good there so we are pretty good let's go to our id oops let's go to our id so id like this save okay interesting let's go ahead and refresh this sign in with google and what i'm going to do is quickly sign in over here and then i'm going to go ahead and okay so if i type in let's just type in something okay so we have got a new chat interesting as if i say hello world okay interesting all right so in this case uh we i guess they just need to refresh um so okay so at this point this is pretty good and if we refresh let's have a look we should see our chat okay so i'm not sure what happened there but we're good now right so now we are getting our sort of data come through and if we refresh this even we should be getting it okay so it's server side rendering as well awesome this is exactly what i wanted if i go to test gmail.com we are back we are back guys it's all good okay so now if i go to test gmail.com and type in hello world and now you guys can see look at this the server side rendering is working so as soon as i hit the page i have the data that's awesome guys that's actually so crazy powerful okay now what we're gonna do and you see what we did there we just we didn't freak out we debugged right we debugged and we figured something out now if i go ahead and type in like hello guys you see how it works there and if i go here look at that immediately it's immediately there right this guy's really inspirationally come on guys it's a bit of support sign thank you so much jesus i really appreciate that because i got a bit rough and bumpy at that point um okay let's go back to the chat screen now what we're gonna do on the chat screen is we're gonna carry on killing it guys so the chat screen here i'm gonna go ahead and get the recipient okay now the recipient i need to get look at the energy kind of come flying back right so now what we're going to do is on the recipient side i'm going to go ahead and do the following so oops let's go here so at the top i'm going to go ahead and fetch the recipient so laughter ep says is this recorded or is it live so there you go this is live dude um and i'm going to go ahead and say db dot collection of users right where the email is equal to and then i'm going to go ahead and pass in the recipient so i'm going to say get recipient email can you see how our helper functions are coming in handy right helper functions are everything honestly they are very handy and we do chat.users and i'm going to go ahead and pass in the user as well oops chat dot users and i'm passing this right now save and this will give me the recipient snapshot okay now at this point what i want to do go down to just before the render the return and i'm going to say const recipient right i'm going to go down and then pop in here i'm going to say recipient snapshot so i'm going to say recipient oops recipient oh god damn it all right let's spell this right recipient snapshot there we go let's have a snapshot uh docs oops dot docs okay and then we're gonna access i'm just safely accessing with optional chaining okay and then i'm gonna say dot data like so okay now this will give us the recipient right their details so at this point i can do something pretty cool okay so i can actually replace this avatar call with something a bit more souped up and i can say if there is a recipient use their picture otherwise uh if they don't have a picture you know or like if we just have the email address just use this because remember they might have not created an account yet okay the session will be available afterwards yes and now you can see oh there we go cannot read property data of undefined that's because we need to optionally change this one as well because this user test gmail.com never signed in so they wouldn't have any details so you can see this right there we go whereas if i go into sunny there you go it works and you see we see that as it is okay so at this point right we want to now adapt the last scene okay so last scene we're gonna use the recipient's uh snapshot to do this right so the recipient snapshot what i do is i say if there was a recipient snapshot over here so let's go ahead and say if there was a recipient snapshot so let's go ahead and just copy this right if there is a recipient snapshot then what i want to do is i want to return the following so i'm going to get rid of this old crap this stuff and i'm always going to say a p tag and this one's going to say last active all right last active with the colon and then i'm basically going to do a little bit of spacing manually here and then i'm going to say okay drop in the following here i'm going to say recipient right because remember recipient is asynchronous so we're going to say recipient oh god damn recipient dot last scene dot and this is again is optional to date right and then what we're gonna do here is i'm gonna go ahead and say uh there you go all right so i'm gonna go ahead and show something here now i'm to use a very nice library called time ago right so time ago comes from a library called time ago react and basically what it's going to do is we're going to take a timestamp and then it's going to go ahead and determine the time since that timestamp so we're going to do yarn add time stamp time and time ago react justice says damn bro so inspirational do you have any tips advice for people to freak out looking at a new kind of syntax with new tech every now and then practice dude pattern recognition practice next js used to freak me out believe it or not okay so like it's just practice um recipient is getting into my head it is dude at this point we're gonna do time ago and i basically just need to go and import that at the top of the file so i need to go ahead and say import time ago from time ago react and then down here what i can do is you see we're doing a ternary which means i do have something else i need to show if we don't have it okay and what i'm going to do is i'm just going to say unavailable if if we can't do that right and then what i need to now do is close my p tag right so i've closed the p tag and i basically need to have a ternary here which says loading right so if there was doing something then i'm just going to say you know like you're loading at this point so we're just gonna say loading last active okay loading last active and uh guys i think we're so close to hitting 1500 likes come on guys it'll be insane if we do this right like if we break this so now look at this ah so sick that's so cool that's so so cool and now if i go ahead and hit refresh so i was last logged in six minutes ago and you see if they're not available it'll just say unavailable so this is just some random account but i actually did sign in six minutes ago right and it worked now i'm gonna share this live on my facebook group facebook amazing stuff dude thank you so much right so this is so cool right now because it works in the way that we expected right so if i said like wow it works right and then papa react is now live so if i go into sign in with google into the other account right then what's going to happen is we're going to now see well thank you for saying my job required me to the next chest and here you are thank you shubham awesome stuff look at that last active 14 seconds ago so literally it updated it right and if i come in here and say like hey sunny you know like we're talking back and forth some crazy inception right now and if i go log it back into the other account so we're running back and forth and obviously i will you know i could just open two windows and have a chat here but look at that last active just now and after 10 seconds it'll say 10 seconds ago so like smash that like button if that was damn cool right and we still have 200 people watching this is incredible after so long right so this is really really awesome stuff and it's working in the way we want now also we have server side rendering where you can see like there's no delay you remember there was an initial delay before there is absolutely no delay right now as soon as you hit the request that page it renders it on the server and then and the thing to look at here is look at the page root changing up here so the page root is changing at the top right so it requests the page the server renders it and then it will go ahead and find it now all we need to do is go ahead thank you so much jay wow man this one's been a big one right now what we're going to do is over here i'm going to just style out the messages and then we'll get it working in the way we expected and i'm going to show you how to deploy this on versal and then we're going to show you how to deploy this with your own custom domain name like sunnysanga.com wow using hosting us so hosting a link in the description use code sunny for seven percent off your annual plan it's a crazy hosting service it's a very very powerful hosting service and i'm going to show you how to map it with reversal deployments on nexus all on one video right so let's do this okay wow all right so now i'm going to go here and then let's go to our message all right so message over here and now what i'm going to do on the message is that we're going to go ahead and i need to get the logged in user so the first thing i'm going to do is i'm going to say okay the user logged in and we've got a slight different naming convention here which is fine i'm going to pull my local authentication object and there we have it right so what i'm going to do now is i'm basically going to go ahead and determine right so this is actually a very cool bit of code right i'm going to basically determine the type of message that i'm gonna send right so this is a very cool use case of of basically determining if somebody is a sender or a receiver okay so what i'm gonna do is i'm gonna have a p tag so imagine this p tag right here yeah this is going to be the type of message i'm going to send right now this is going to basically be let's just say this is called a message element right now pay attention because this is a very good lesson in terms of styled components and honestly like it's a it's pretty cool like i'm looking like this is actually a very very cool trick that you can do so we're gonna have a styled p tag okay so this styled p tag is basically gonna be it's going to have over here we're going to have width and it's going to say fit content and basically this is going to be all the look and feel of a of a message right content right and then i'm going to have a few other things on my padding border radius margin padding bottom text positions all that stuff i'm going to pop that in here so this is how a message element will look okay now what i want to do is i want to differentiate between a sender and a receiver okay so if i want to differentiate between a sender and a receiver we're almost at 1500 likes come on guys just smash that like button if you're still here smash the like button alright this is crazy right and then what i'm going to do is i'm going to create a sender now what you can do is you can extend your styles right so i can say styled and i can go ahead and say message element right uh islam thank you so much i love coming because of you paparaz amazing stuff dude so i can extend the message element for the sender and now the difference for the sender is i want their message to be all the way on the right so i'm going to basically put a margin left or oh and i'm going to change the background color and for the receiver i'm going to do slightly different right so now i'm going to go here and say receiver should be a message element as well so it gets all these properties but it's going to be background color white smoke and the texture line will be the left right a few different changes for a sender and a receiver shubham says well something you made me switch from rank angular to react looks like my next chest journey is going to start dude i love it i love it let's do this i'm with you man so at this point how do i determine if somebody is a sender or a receiver and they'll both benefit from message element so what i'm going to do is i'm going to say const type of message type of message type of message here equals user right is equivalent to user logged in right so user logged in email all right so if the user is lo is the one who is logged in right then they are the sender otherwise they are the receiver right and that means that the type of message is going to be the one that is going to be wrapping our p tag so that i hope that made sense but basically what's happening is it will choose which element to make which styled component to use based on if you're logged in or not and boom look at that that's so cool honestly like wow look at this if i change this to p tags we get our basic stuff right the minute i change it to this new type of message this is a type of message type of message that just got me hyped up look at that boom that's just powerful guys that is powerful guys right like and if i go here like the sender boom that's just awesome right it's so so powerful the final thing i want to do is i'm going to have a timestamp okay so the timestamp we're going to go ahead and have a const and this is going to be a span tag because it's going to be within the p tag okay so i'm going to go ahead and create a timestamp over here so this is going to be const time something called styled span and the timestamp element i'm going to go ahead and pop it inside of our p tag and this is just going to be the following okay so if we have it available so if we have the timestamp we'll say message message.timestamp then we're going to use something called moment okay so we're going to install moment so i'm going to moment is a very good library for managing um like dates and time stamps and things like that and i'm going to use it in this case to basically convert a unix timestamp into the appropriate uh visible timestamp that we want to mess with right so i've installed moment right there with yarn at moment and then i'm going to go ahead and say moment and i'm going to say message.timestamp right dot format and i've got this short format here called lt and you can go on moment's website if you're interested in learning a bit more about that and i'm just going to add in if you have a timestamp then show it in that format otherwise just show dot dot right now let's go back over and it says moment is not defined so let's go ahead and import moment from moment there we go and then we can go ahead and refresh now you can see look at that we get this right now obviously this is happening because we haven't wrapped our component in the appropriate timestamp styled component so if i go ahead and pop in the timestamp like this and i go ahead and cut this and pop it inside now we can see we get a beautiful looking timestamp right and here if i have a chat with myself and i say like yo what up and then you go look at that you see how in the beginning the timestamp was asynchronous hence it showed three dots then it populated and it came in so now if i go ahead and say yo pay attention to underneath there three dots and then it showed it okay and even when we do the server side render let's have a look at what's happening here it already has that data from the server side render uses it switches to the real-time listening and then as soon as i type in wow works which is incredible it's really really nice right so at this point this is looking perfect like it's just looking really really nice okay now there's a slight difference in the the sort of line height here which i do want to quickly fix but if we go to the chat screen right then what we want to do is i want to also make it scroll to the bottom every single time i type in a message okay so every time i send the message i'm going to go ahead and create a helper function which is just going to simply scroll to the bottom of the page now the helper function that i want to have is i just need to basically have a reference to this one here so end of message right so this is simply a div this is a start component which is a div and here i'm going to say reference equals end of messages ref and if i go up here and create a reference to this let's go ahead and get rid of our console logs from earlier and i say const and the messages ref equals use ref and if you want to know more about references we cover in zero to full stack hero react basics link is in the description feel free to jump in all right and this will basically connect a pointer to that element now what's cool about this is that because i'm pointing at the element underneath all of the messages i can scroll to that point whenever i fill okay so i'm going to create this scroll to bottom function right so i'm going to go down here and say const scroll to bottom like this and this is just going to be a helper function and inside of here i'm going to go to the function that we're pointing at and i'm going to use this scroll into view so end of messages ref get the current thing you're pointing at then scroll into view and then you add these two things behavior smooth and block start and it will give you a very nice little trick okay so this is a very nice little trick you can do and then what you can have is you can just say scroll to the bottom at the bottom there now obviously you should use camera casing there so there we go scroll to bottom code with harshad yes a very nice trick right very very nice trick now if we go ahead and uh this will say wow that's cool and there you go you see how it just scrolled to the bottom if i type in test 101 and then we can keep having abc abc abc it's just let me just spam it a little bit there you go you see how when i type in it does it right now what i can do to basically support that little bit of a difference at the bottom is basically going to go ahead and i can pad it a little bit okay oh wow we got a super chat whoa we got a nice little super chat from satovic thank you so much dude appreciate that all right so at this point what i'm gonna do is end of messages right here i'm just gonna give it a margin bottom of 50 pixels so that way we have some you know leeway when we have that little push right so now if i go down here and i type in abc or like hello one hello one two three you see how we've got the nice little gap at the bottom now okay so that's perfect everything is working great now at this point right we have real-time messaging we have a last seen active status everything has been built with our lovely you know um styled components and i just want to fix that i just think that a little bit at the top because that was bugging me a little bit all right so that is simply at the point at which we have the header okay so inside the header we have the header information which is a h3 tag let's have a look at where that is we've got the header which is a h3 tag and then we got the recipient email recipient snapshot p tag inside of the header information let's have a look at where we style it margin left of 15 pixels okay uh flex of one okay margin bottom three pixels okay and a font size 14 pixels okay i mean interesting i don't know where i'm getting this spacing from but i'll figure that one out okay but in the meantime i mean you can mess around with that you can you know it's a very small tweak but with that said guys i think i'm pretty sure at this point our application is where i needed it to get to okay so if i go ahead and type in like let's just say j4399 gmail.com and this is jay's email yes obviously he's never signed into this version of the account um that's why it says actor on active unavailable and so forth but we can go ahead and send him a message and when he signs in it will work okay so i say wow this works enter and you can see like look it scrolled scrubbing down everything works as we expected it and uh server side rendering is in play now one thing um all right so static site generation first service time rendering i'll show you that in a sec dude i'll show you that one in a sec but wow we got a huge number of subscribers in this one code design says congrats for 28.7 wow we literally grew like a thousand in this one video um you can use a model i recommend that you improve it like that yourself but now guys is the time that we've been waiting for let's deploy this app okay if you're excited about that let me know let's deploy this app right now this is gonna be a hell of a lot of fun we're gonna deploy using versa and then we're gonna use hostinger to actually go ahead and map our custom domain name to the uh the deployed app which is just like wow in one tutorial we're doing all of this stuff which is insane right we just broke 15 uh 1500 likes thank you so much that is incredible guys keep keep with me right we're almost there we're going to be using verso and hostinger now to deploy this app live okay so and i'm going to show you how to do it and i want you guys to go ahead use that code in the description get yourself a custom cool domain and guys comment in the description when you go ahead and do this right um because it's going to basically go ahead and be such a cool thing to have like shrikha.com for example and then it will be your app and i can go ahead and review your apps in a separate video okay so get a domain of hosting or use that link to save yourself some money and then deploy your next js app whatsapp 2.0 and then you know uh like link comment in the description that's going to be so much fun okay whenever i upload the video files don't open the url the video gives me an idea manager i'm not sure what's happening dude okay so let's go ahead and carry on so at this point what i'm gonna do is i'm gonna open up my github all right guys if you keep on uh spamming i'm just gonna block okay so please don't and i don't wanna block anyone okay so so at this point what i'm going to do is i'm going to open up my github okay so github and i'm going to open up the my personal github and i'm going to go ahead and add a new repo and here i'm going to go ahead and say the repo name is going to be simply let's just say it's going to be whatsapp version two all right what's up v2 and this is going to be a private repo for now and i'm going to create the repo over here right so like so so what i'm going to do is i need to push this to github first that's the first step okay what is the secret behind the in touch 1g learn a lot from you your biggest fan thank you so much musa it's just honestly helping people out that's it all right so at this point thank you satvik appreciate the donation dude so i'm going to go ahead and push to my github now i'm not going to do a run-through of too much of how to do github stuff here all you want to do is create a private repo copy this line down here go ahead and type in git remote add origin okay so get remote at origin like so and then what we want to do is do git add all to add all my files get status will show us all of the files that we have in our commit i'm going to say git commit the entire app let's just say right now just to say the entire app we're pushing it to github then what i'm going to do is say get push right now get push we're going to use this little command here paste and now this is pushing to github okay so at this point if i refresh my github you can see it's pushed over to github okay so that's really cool it's on my personal github now what i need to do is move over to versal right so verso is basically the company behind the guys over who you know who have sort of set up next js this is a company who does a lot of deployment work and things like that so what i'm going to be doing here is going ahead and clicking new project so all you need to do it's free to set up a versal account so it's reversal.com forward slash dashboard once you're here but all you need to do is go ahead and sign into versal.com okay so you just need to sign in once you have your account and click on new project it is free to get to this point you click on new project you connect your github and you should be able to see your repo so in this case it's whatsapp v2 okay then we're going to go ahead and click import now here we just pretty much select our account right and then what we want to do is go ahead and keep the project name simple then the framework you already figured out was next.js we can keep all of these as their static symbol variables and that environment variables can be used if you want to use them build and output settings can be changed if you want to change them however it's not needed at this point you don't need to change it okay so at this point what we're going to do is deploy right so what it's doing is it's going to the branch or where we deployed our code so in this case the main branch is over here it's found it it's cloning it it's analyzing it it's building it as we speak and deploying it to a vessel okay so point a domain using name service or just a record of domain you can use either all in this case okay so in this case it's it it even tries to cache but in this case it's going to take a little bit a while because it's the first time we deployed all right so we'll give it a second and it's doing the yarn install you can see everything is happening at this point doing the deployment right and it's literally deploying the app that we just pushed to github over here okay now guys while we do this go ahead and quickly sign up to hostinger right now there's a link in the description to save yourself seven percent on the yearly annual plans and uh what we're going to be doing next is basically you can get yourself a domain name from dirt cheap they're like like a pound for a year some of them right and basically all you need to do uh somebody says how do you spell versa versal is simply this one right here okay so it's a versal over here versal.com develop preview ship for the breast front end there we go okay and you can see right now if i go over here it's gone ahead and doing all of this and you can see it so it's actually built out the entire app accordingly so if we look at this right you can see everything's working in the way and it's uploading the build outputs okay what's really nice about versal is it has full support for nexjs james says wow nice man thank you so much james uh so it has full support for nexjs it's honestly so easy to the point where look at this hey congratulations your project has been successfully deployed now i'm going to open this one up in a new tab and i'm going to click open dashboard now guys we're not done just yet right there's a few things you have to know firstly it's going to deploy to a few different uh urls okay so at this point this one is pretty interesting so what's up v2 reversal app now notice when i click sign in with google it immediately freaks out it says this domain is not authorized to run this operation add it to the oauth redirect domains list in firebase console okay so what we're going to now do is go over to my firebase right so this one over here and i'm going to go to my whatsapp next v2 i'm going to go to my authentication tab and you need to authorize this right so you need to allow this uh this domain to basically you know like you need to say that you're it's allowed to go ahead and do it right so at this point i've got a few domains here i'm going to add a domain simply whatsapp v2 versal app i'm going to click add okay now if i go back to my application right so what's up frank thank you so much for a five dollar donation let's deploy this next json tryout hosting it's awesome hosting helps the proper fab yes guys try out hostinger.com it's huge amazing they have you know like a complete 24-hour service uh for support it's reliable extremely fast servers are used over there and uh they have a 99.9 uptime guarantee so it's huge right i'm telling you and it's so easy to set up i'll show you how to do this okay so we're gonna click sign in with google now and uh at this point we see that it's not there yet so we might have to give it a second to go ahead and propagate let's go ahead and check this one out so we've got whatsapp v2 reversal app and if i go ahead and refresh let's just double check okay sign in with google okay so i don't think i've done it correctly let me go ahead and do this one reversal app there we go and add let's see what's up every two years there we go okay and if i got a different domain name there there we go sign in okay in this case it's just gonna take time to propagate through okay but instead what you need to worry about when you're working on this is okay that's fine yeah well you need to work out work on is doing this i've done this for my other repo all right so it would just take about a few hours maybe honestly it didn't take me long the first time but the second time i did it it took a bit of a while so what i would recommend at this point is you will then get access and you you'll see your google authentication is working okay the next step you want to do is go over to your project so in this case this is another project which i did exact same click into your project so in this case this was the first one that we just deployed so once we're on versal you just go over to your list and you'll see your project that you deployed this is exactly the same except the one i just did and now what we want to do is basically connect this to hostinger so that way we can actually have this on the correct domain okay so you can see here this one is deploying to sunnysanga.com right now how do we do this okay so i'm going to go over to hostinger.com okay i'm going to go ahead and sign into my account so i'm going to log into my account so you just go ahead create your account i'm going to sign into my account get straight through and you can see once you're in hostinger right what you need to do is over here i've got a bunch of their services right now because they are awesome guys honestly really really powerful stuff and what you want to do is i've already purchased the domain sunnysanger.com okay so what i can do is i can go ahead and click into my domain now the thing the thing i love about hosting a guys is that it's actually incredibly simple to use okay so usually like when you deal with these things it gets kind of a it's kind of a headache and it gets you know like where do i need to look to get help and support now hosting and make it incredibly easy all right if you need help they've got a constant help desk here which is 24 7. every single day of the year they're going to be able to help you out and we actually use that help desk and they helped us out massively okay the next thing that you're probably going to be interested in is this section here dns and name servers so you need to do is click it and then here you can see your name servers okay now this is what you want to do next okay you want to click on use hostinger name servers because it makes the whole process a bit easy okay just like saying i got my first domain through hosting a 2 super fast an amazing cpanel speed and efficiency yes they make the whole cpanel you know just friendly like it's not so intimidating and by the way guys they even have cloudflare behind it supporting it right if you're not aware of what cloudflare is it prevents ddos attacks from happening on your website where basically somebody sends thousands of requests so your website comes down cloudflare is a very clever solution and you get that out of the box when you use hostinger right so it's actually very very nice that they give that in all right andy yo sunny any tips for a few questions i'll cover that one in a sec but thank you for the donation and dude so what you want to do is you can go ahead and add a record here okay so what you want to do is go into your project where you just deployed click on settings okay now the next thing you want to do is click domains and here you can see i've got a domain so let's go ahead and say let's say frank wanted to deploy on frank.com right you want to click add and then here you want to click on add frank.com bro but let's just say we wanted to click on add www.redirectfrank.com to it let's take this one for example and then what you'll see is you'll get this right so ignore this one for now but basically what you'll get is this right so frank.com for example now you'll also get uh professional emails right so imagine you've wanted like you know um let's just say info at sunny.com right or info at sunnysanga.com you're gonna get all of that right so hosting is very very good honestly for what you're getting and your boy paparia got you guys a nice little discount code sunny at checkout which is pretty damn cool all right just use sunny at checkout and it will work for you in the way that you would expect it to okay i'm just gonna pop on some music again right so now what we're going to do is we're going to go ahead and uh set this up so we need to add a a record from our hosting uh or from our versa so we basically go ahead and copy this value okay go back into hostinger and all you need to do is go down here make sure you haven't already got an a a record so if you do have any other other a records just feel free to go ahead and delete them okay so all you need to go ahead and delete them and then you come back up here and you just want to go ahead and pop in a record so type is a this should be an at and then you want to go ahead and say points to and then have this ttl you can live as leave as default and then you click add record now guys when i say that's it that's honestly it right you literally do that you just have to give it so typically at this point you would do it then you expect it to work right you expect everything to kind of work and you're like why is it not working well there's two reasons it needs to propagate that record through all of the hosting a server so that way when someone on the internet comes and gets that page like sunnysanga.com they're going to go ahead and get the requested versa next js app right so it needs to have that sort of connection period now that usually takes no longer than a day at max okay like typically it's a lot faster than that but if we go over to verso right now once we've done it so i've done it already for sunnysanga.com right i went over i went and got my record and did the deployment once you've done that click on deployments okay and all you want to do is go to your latest deployment okay so what i would do is go over to my overview and here you can see it's actually deployed to frank.com so let's go ahead and get rid of that one let's go ahead and get rid of this one remove let's go ahead and remove and let's go ahead and remove this one and basically what will happen now is every time you push code to your main branch it will trigger a deployment which is awesome right every time you push code to your github main branch now it will re-fire up vessel and push to the uh and redeploy your versal code and by default once you where it makes this connection you'll be able to go ahead and uh and access this now this works i've done it and it's great right and just to prove to you guys it works so here we've mapped sunnysanga.com i pushed the code not long ago to this one so it was four hours ago where i pushed this one and you see i pushed to a code branch called master and then basically all it did is it went ahead and pushed to sunnysango.com plus three other domains so you know they give you like a bunch of other domains that you can use and then what you want to do is go ahead and just click this link and you see sunnysanga.com and there you go guys here is our entire next js app here's a little protune awesome developer absolutely killing it guys that is how you deploy and look at look at our url here says sunnysanga.com forward slash chat forward slash the chat room id right so incredible incredible powerful stuff right now before i wrap up i want to go through some of the key things that we covered in today's build okay number one we covered next js right we introduced the concept of server-side rendering we introduced the concept of static site generation versus the server side rendering and all of this stuff now this is going to be this is a hell of a lot of fun right it's a hell of a lot of fun and it's going to be um something that i recommend that everyone goes ahead and does right so i recommend you do this build you get yourself a hosting a domain uh you definitely use that coupon code if you're gonna do it save yourself some money and then what i would recommend is you deploy traversal and map the domain by changing that a record and giving it about eight to twenty eight to twenty four hours i would say is the sweet spot and then basically you're gonna see your beautiful next js site up a knife and once she does that mapping process by the way when you redeploy it's instant right it's pretty much instantaneous as soon as you redeploy the user is going to get access to your latest next js app now two amazing sort of sponsorships i want to shout out today we had hostinger providing the awesome domain you know tools and all their products and things like that and uh i just want to go ahead and show you guys one more time as to what they offer because it is honestly something which i recommend everyone you know goes ahead and gets some exposure to you right now like i said you're going to get all of these products including google ads credit which is even just icing on the cake ssl certificates free domain free domain guys so if you haven't already yet look at this 219 or even like this one here so honestly it's something which i definitely recommend okay use code sunny at checkout and you're gonna be able to save yourself you know seven percent on the annual plan which i definitely recommend it's so cool if you have your own portfolio and it says you know um www.js right there's just something which is icing on the cake especially when you go for that job interview something that i would definitely recommend so andy asked any tips for react interviews this is something which is going to be like it will stand you out if you've got your own domain you deploy an xjs app to it like come on guys like that's just proof in the pudding you know so that's going to be something which i definitely recommend you guys do they have absolutely amazing customer service and it's completely user friendly to go ahead and use so hosting a check them out guys and uh and the final one i want to mention is tab nine now tab nine was the reason i was able to code this entire build in the time that we did it right it's absolutely crazy as to how much that helped me speed up my coding and i'm going to show you guys tab nine over here so where is it tab nine time nine here we go tab nine auto complete now tab nine is game changer for me uh 1.6 million downloads okay and they have a forever fl a forever free plan right and here you can see a real use case of where it's basically predicting the text beforehand and look at the speed difference over here right so this is giving you a road speed indication it's just so powerful guys honestly really really show like powerful uh what you can do okay now um guys yeah this is incredible stuff this was so much fun and uh i want to kind of you know i'm gonna wrap up with our anthem guys because i think it's only fair that we do it but let me go ahead and there you go nice but this has been your boy papa react and today we built whatsapp 2.0 right whatsapp 2.0 live on sunnysanger.com completely available for you to play with right now right we learned some next js we learned some firebase we learned some styled components live status updates all of that awesome stuff we learned how to deploy an app with verso and we learned how to host it on our own custom domain with that said guys if you enjoyed this video smash that thumbs up button because this was by far one of the funnest builds and most challenging builds that i have ever done this is your boy papariat if you want to join us join us the xerox full stack hero i will see you guys in the next video peace [Music] [Music] [Music] thank you so much guys i will see you guys in the next video

Channel: Sonny Sangha

Views: 275,730

Rating: 4.9211636 out of 5

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

Id: svlEVg0To_c

Length: 228min 0sec (13680 seconds)

Published: Thu Mar 25 2021