🔴 Build a iMessage Clone with REACT.JS for Beginners! (with REDUX)

[Music] what's going on guys welcome to another build on the channel we are excited today you're here with your boy papa react aka sonny what's up guys good to see everyone again and today i'm gonna be dropping some fire for you guys so everyone has requested chat apps and things like that so today i went ahead i listened to you guys and i'm building the imessage clone so this is gonna be fun if you're excited for this smash the thumbs up button get this video out to as many people as we possibly can and it's gonna be a good time so make sure you got your coffee i got my water ready and i'm about to demo this app to you guys let me know what you guys are watching from me know where you guys are from let's get the energy up and we can go ahead and smash it in today's build let's go ahead and give a quick demo as to what we're building today so right now you can see this is the imessage clones let's go ahead and sign in and you can see right here if i go ahead use goo it supports google authentication everything is powered with redux so this is a for imessage clone and you can pretty much see it supports everything we want so let's go ahead and say yo this is insane and there you go and even has those nice little animations so if you guys want to see how to build that let me know right now get that energy up guys and we can go ahead and get this thing built uh for you guys so today's actually a pretty fun build we've got a lot going on here we have material ui we have all that fun stuff we have material ui we have firebase support in the back end so we have a real time back end right now here so let me go ahead and draw oh this is yesterday's session let's go ahead and show you guys so we've got a bit of material ui going on over here for these little icons the avatars being used over here we've got a really nice use case of flexbox in today's build and everything that you see here is powered by firebase so we're going to show you guys how to go ahead and power this up using firebase and then once that's done we're going to pretty much go ahead and completely get this thing built out with redux so redux is going to support everything it's pretty much how the user authentication is being stored at the moment so how we know which users logged in so right now obviously i'm the latest chat but let's go ahead and refresh this and you can see it signs me in automatically let's go ahead and sign out and sign back in as let's say i'm going to sign into cardi's account let's check this out um let's go ahead and check it out so now i'm in let's go ahead and see so now it says yellow and this one and here i'm going to say yo what's up sunny so i'm pretending to be kazzy right now and there you go comes up as kazi so it's kazzy's message right here and he says yo what's up sunny and what you can also do is you can actually create new channels so this button right here will actually go ahead and prompt out um i think it's hiding the prompt from me right now but this button right here basically when we click it yeah there we go uh and it's going to pop up saying enter our chat noise let's go ahead and type in youtube boom and we get a youtube channel and say let's go let's go guys let's go let me do a rocket emoji there we go and there we go guys so everything is up and running and it's all pretty good okay um let's go ahead and see i think everyone if you can see me right now in the build uh in the stream let me know in the comments i see some people freaking out about the glitching and stuff like that but it will be completely back up and running uh so don't worry about that if it's lagging it'll come back all right so this is awesome build what's up samit good to see you again in the house um taruna kate googens excited uh we've got nikhil says bobby sing pumped um priyancey says it's hard for me to imagine life without coffee how do you do it sonny honestly dude i do drink coffee but i'm trying to wean off it right now so getting pretty good walid says yes yes yes everyone is pretty pumped up about today's build and guys if you wanted to build something like this and you've been waiting for this kind of thing let me know because i'm always interested in seeing who's waiting for this build um oh nice dude anjali is 14 years old and so far has completed seven bills that's insane that's awesome man um hey brian she says ah redux let's go chat apps are legit my favorite builds exactly let's go so we just go ahead and some people want to see it because i see uh we've got loads of people coming in hey check this out sami thank you so much for kickstarting the donations he says coffee is on me sonny you know what dude i'm gonna use that tomorrow and i'm gonna order some coffee so i appreciate that dude and i hope that new job samit landed a job i think he landed it in new york or boston but one of the two and he's absolutely smashing it so awesome stuff to me thank you so much for that donation um we have uh minh minhaj khan says will this class be recorded yes it will be recorded um somebody says i'm gonna add the apple sign in by myself yeah so guys pretty much go ahead and add on to this build once it's done and um thank you so much psycho code says these builds are better than udemy paid courses dude i agree so with that said guys let's go ahead and give you one more run through of the app so this is the app we're going to be building today you can pretty much go ahead and add channels or chat rooms and what i'm going to do at the end if you stick around to the end so for everyone who's going to stick around to the end you guys are actually going to go ahead and get a chance to play with the app right so it's going to be pretty much fully functional you guys can see it working you can see everything built out and how we deploy and how we do all those that fun stuff um and also we just hit 300 people watching right now so amazing stuff guys thank you for the positive energy the love and support you guys always dropping and if you're ready for this build guys smash the thumbs up button let me know let's get this video out to so many more people so that way we can get um yeah we can get as much value out there as possible we're at 300 viewers that's insane um okay so one more run through of the app here is the app guys supports all of the google login functionality so if i go ahead and click sign in we've got all of our google login so you can see here's google authentication powered by firebase and then you've got this lovely react flip move animation so you see that guys that's pretty dope that's pretty clean right so with that said um let me know guys as well if you have actually gone ahead and used um redux before so if anyone's used redux before let me know because redux is something which is you're all gonna find super super valuable inside of a commercial environment so all of that good stuff they ask for redux experience um oh nice johanna's johannes sorry if i pronounced that one let's go papa react johannes from live from south africa starting my internship on monday good stuff dude good luck for your internship and that's what we're talking about um somebody says what's the difference between react js and redux so react.js is the library that we use to build progressive web apps uh redux is how it's called a state management library so it's pretty much how we manage the flow of data inside of the app so how we pretty much store everything inside of our date and inside of our app and go through all that cool stuff so we're going to pretty much go ahead and do that um right so uh garveet says hey sony has used this yesterday to completely show my bills off to my father so dude honestly if he's uh not willing to spend it it's completely fine just carry on doing it man like you can pretty much go ahead and keep learning and you can pretty much go like as far as you can go like and there's no limit you don't need to have special special materials or anything like that you can pretty much go ahead and just practice coding abilities and you know keep pushing your skill set and keep it good vibes you know positive energy and that's what we want to do so oh nice thank you so much brian kim shout out from korea one of the dopest content appreciate you dude that is awesome thank you so much that means we're at ten dollars already thank you so much guys and we haven't even started yet so this is awesome uh road to one million subscribers so with that said guys before we start the tr the live session today i want to go ahead and show you guys in the first link in the description we have a completely free training which i recommend every single one of you go ahead and check out so it's the first link in the description please go check it out and sign up okay so sign up for this and this is gonna go ahead and help you guys um because it's completely free and we pretty much go ahead and break down the netflix clone for you so you guys can go ahead and check out um the entire build from start to finish and how you can use um a firebase as a back-end solution so make sure you sign up to that it's a three-hour free training that we provide for you guys so go ahead and check it out and that's going to be something which is super valuable for you guys so um yeah go ahead and do that so with that said let's jump into the build so the first thing we want to do guys is we're going to be using create react app but the redux template so if i go ahead and type in redux into google and don't worry if you're beginning if you're new to redux then completely fine you don't need to have redux experience or anything for this build you can pretty much go ahead and carry on so yeah pretty much go ahead and check that out i think radu is saying i love this channel but appreciate you dude thank you so much um hey look at this muhammad getting younger this is awesome because i am 11 years of age until now i've successfully completed two builds thank you very much prashun awesome stuff man reach out to priyanshu branchu is uh 13 years old and he's building as well so you guys might want to connect and that'd be awesome for you guys um awesome stuff right so let's go ahead and jump into the build so here we're going to go ahead and click on redux getting started and you'll be able to see and this is handy for you guys if in case you ever forget what to do um let's go ahead and check it out sorry for the lag if there is lag uh i mean it will come back don't worry guys it will be completely fine in a bit um so don't stress too much about the lag issues that we're having right now um yeah everything will have a way of figuring itself out so we're going to go ahead and use this command so it's mpx create react app but we're using dash dash template and then redux right so let's go ahead and open up a terminal i'm going to pull up a terminal right here make it big for you guys and then we're going to go ahead and i'm going to go into my desktop i've got a clever programmer thing here so i'm going to do mpx create react app and then rather than so here you basically say npx create react app and then the message of your app so here i'm going to go ahead and say it's imessage clone imessageclone and it's um a message clone and i'm gonna say youtube and then it's dash dash template redux and while we're at it so let that load and thank you so much another donation from rajvir singh chauhan he says hope this way of learning will change the trends in universities kudos to the clever programmer team for helping upcoming and existing force in industry um you guys are about to shift the paradigm dude that's exactly what we're aiming for honestly i i went to university and i found that like it's completely outdated everything is completely like you know it's just not really like it's not what you really need in the industry so we're trying to shift all of that and trying to give you guys the most like uh the most sort of critical pieces of content and critical value to you guys and provide you with all that value so that way when you get into that sort of workplace or commercial environment you guys can just thrive and you guys can kill it okay uh and i agree with this good to see so many young programmers in the chat no dude trust me it makes me feel too but uh awesome stuff guys and hey girlfriends in the chat go ahead show her some love um yeah with that said guys let's go ahead and jump in all right so if you guys already haven't uh make sure you go ahead and follow me on instagram down here uh shoot a story if you're watching right now and then before we start smash the thumbs up button let's hit a thousand likes again today and um we're gonna absolutely crush it today so jumping into the build we can see our terminal command just finished off so now we're going to go ahead and do cd imessage clone youtube and we're going to be inside of it and then i'm going to do code dash insiders for you guys it'll be the code dot but for me i've got the beta edition and then you want to go ahead and start up so this school should pop it up uh because somebody says i'm 25 let's code and smash that dude i'm telling you man i agree with you i'm i'm just turned 26 so i feel your pain but we'll kill it don't worry dude um so let's go ahead and uh and this is my girlfriend look if you aren't following me you're liking my videos then get on it now exactly guys um oh ahmed bilady good to see you dude i haven't seen you in a while nice to see you back on the streams um okay so now what we're gonna do is make this full screen um for some reason spectacle's not working oh man okay my keyboard shortcuts aren't working one sec bear with me guys it's always like when i'm on live streams there we go all right so what i'm going to do now is go ahead and some reason this doesn't want to behave um all right give me one sec let me go ahead and open up a new terminal like this uh i wish i could build a book one on one coaching with sonny you can book a one-on-one coaching with me um why is my god damn it um okay never mind we can pretty much do it this way so with that said guys i'm gonna okay i need this shortcut give me one sec give me one sec because it kind of messes everything up so in the meantime let's go ahead and answer some questions from you guys and we can go ahead and do that so let me go ahead i'm going to close this and almost close the entire stream um i'm going to open it up again and now yay there we go guys so i use this i don't know if you guys know but i use this keyboard shortcut quite a lot and without it i think my build time would be extremely long so that's what i was trying to get to right now so i'm gonna close this one give me one sec guys one second there we go we're back we're back right energy's back let's go ahead and get this thing going so now this is the shortcut i was talking about see it doesn't seem like much but trust me to be able to do that very quickly on a live stream it's very important so yeah and also guys yeah quick question who would buy some proper react merch so if you would let me know because i'm actually looking at that with my girlfriend and we're quite we're quite uh on that so let me know um and they might have a big surprise for you guys very soon so with that said jumping in you want to go ahead and hit command j and then you'll see the terminal up here npm start to go ahead and start up the app and while that's happening um it will actually go ahead and start up in localhost 3000 so that's what we're going to do right here so this is our app running and here we go so this is what you're going to get to start with okay um so let's go ahead and do this boom boom boom make it a bit bigger for you guys now when you get to this screen everything here is being powered by redux so redox is a state management tool and that's going to help you guys go ahead and manage the data flow inside of an app so here if i go ahead and do 20 add amount you see adds by 20s if i do add async it's a little delay and that's meant to mimic the sort of network request and things like that okay um uh paulo says why using code and sizes uh so i'm actually i just like i'm a big fan of like beta tools i kind of messed around with beta stuff so you know go ahead and check out gaming mat says hoodies would be cool i know dude that's what i'm thinking like a like you know black hoodie with upper reactor still um yeah well we'll go into that in a bit so right now what we're going to do is the cleanup process so we're gonna go ahead and delete the app.test.js logo and setup tests.js over here move that to the trash and then we're gonna get this the app's gonna start freaking out so a few more things we're gonna do we're going to go inside of app.js delete everything inside of the header okay so we're going to go ahead and remove all of that say h1 and we're going to go ahead and say um nice powder says you have changed my life uh so yeah that's awesome stuff dude good stuff right here i'm going to say let's build the i message clone dope all right so we're going to go ahead and do that and then in the top here i'm gonna get rid of lines three and two save it go into app.css command a delete everything you don't want any pre-styling before we start in index.css i'm gonna show you guys we get this annoying bit of spacing at the top right so you see over here there's this a normal sort of uh annoying little gap over here we're going to get rid of that right now by going to the top going ahead doing asterisks and then saying margin colon zero and this will go ahead and reset the margins and now we have a starting canvas okay so that's going to be really really uh nice to start with um so with that said guys stop freaking out i can hear i can see so many people saying like i can't hear you yes you can i mean i can see the levels you guys can definitely hear me um right so with that said i'm going to go back to aptos yes let's get rid of that and then now well you see this features on the left right so features on the left what i want you guys to go ahead and do is go ahead and you want to first get rid of counter dot js encounter module we're not going to need those and then pull count a slice outside the photo right then you're going to see counter right here i'm going to right click click on delete because we don't want that folder that's actually a folder inside of features then i'm going to grab counter size and put it back in features so now should have a folder with that counter slice inside of right um hey fujiko's in the house what's up elizabeth uh she actually just landed a job so dope stuff uh let's go ahead and carry on uh why have i done that there we go and now we're going to do is don't worry about all the jargon inside of here just yet but you see right now it's freaking out so we need to go to app store.js uh and then here you're going to pretty much go ahead get rid of the counter save it and that will get us to our starting point okay um so loads of people are always asking about what that command was why i first used so it was like something like this where i did code insiders dash right um dot so what you want to do is command shift p inside of code inside or inside of your vs code oh man bless you again hey fever already um so what we're going to do and yeah i will slow down in a sec this is just because this is the starting point so here we're going to go ahead and do shell command and then we're going to say install code your one's going to say install code command right thank you so much i see some people saying bless you awesome stuff thank you guys so here we're going to go ahead and get rid of that and we're going to go ahead and do command b and this is a good starting point okay so now somebody said kovid yeah don't worry i had a cough for a while guys it's all gone now all right so with that said now we're going to go ahead oh thank you dude this is dope alex lois says you guys are providing such valuable content in such a fast way that it's hard to keep the pace we'll have to keep away for 22 hours a week in order to go over all your past videos keep going dude i appreciate that and that is awesome man appreciate you um for watching thank you so much um yeah i used to be a girlfriend i love java yeah i love java too um but javascript is you know what we're doing today uh so now we're gonna go to class name changes to a and this is for the bem naming convention okay so this is known as bem naming convention so this is how you name your classes and react to make it more sort of easier to work with easier to scale and that sort of stuff okay so with that said we're gonna go ahead and start the first part of the build so the first thing i want to do guys is actually go ahead and build this part so um let me go ahead and start the app on the on a different server the one that i had so i can show you guys the previous thing that i did and what we can do is we can use that as a comparison as i build this one up okay so um so we're going to go ahead so this is what we're going to build right so this is the login page but right now we're not too bothered about the login page i'm just going to sign in for now we're going to build this part later uh the first thing we're going to do is actually go ahead and build a so we're going to actually go ahead and build the chat component so this thing right here and the the this is the chat component sorry and the sidebar component so this thing over here right so we're going to go ahead and do that first so the first thing is um psycho coda says sonny do you remember the debate over bam comment in one live stream i think so dude uh i remember some kind of like some kind of thing daniel tope you guys are dope appreciate you dude thank you for watching um and yeah please don't spam guys like come on you know keep that chat clean otherwise you're gonna get blocked and you're not coming back all right so now we're gonna go ahead and create and what i'm gonna do today is i'm gonna show you why i'm gonna create an imessage component right so this is gonna have this entire app inside of it and this one i'm going to go ahead and create right now because it's going to freak out because there's no imessage component whoa check this out gabriel damn dude he goes come on everyone show your support this channel is cheaper than most monthly learning platforms appreciate you gabriel that is insane uh huge 20 donation uh thank you so much and yeah that is that really really awesome stuff and that's the kind of energy that we want in this channel this is the kind of people we want in this channel thank you so much dude appreciate you uh somebody also says do you love yeah i mean i i'm interested in fly i know kelly hayden does a lot of flat stuff so i've been looking in that space as well um so i'm going to create i'm going to create a component called imessage.js right and then i'm going to use my beautiful rfce trick to go ahead and create the snippet and then i'm going to say import imessage imessage.css i'm going to create a corresponding css file so now we go back and it's going to freak out so we're going to create an imessage dss file so imessage.css and then you guys are going to go ahead and see that it's still freaking out and this is because inside of app.js we need to import so i'm going to say import imessage from imessage imessage there we go what's my thing acting all with okay yeah and now pretty much i'm going to render the entire app in here okay so this is going to be there is a purpose for this and it will show you exactly how we're going to do that soon um but for now i want you guys to do is go ahead and type in imessage here and then we're going to go to our code and this is not going to be camel case just for simplicity yeah because sometimes some people might do it you know capital m some people might not so we're going to keep it super simple going back we've got there are two things inside of here right we've got the sidebar and we've got the chat that's what i mentioned before so if we go back to our app before we had the sidebar and the chat so um where's my drawing tools my beautiful drawing tools all right so now we've got this sidebar element right and then we've got this chat element okay so i'm going to create those two here so that's what we've got over here so that's why i like to do this little commenting right here because it helps you sort of you know piece together what you're going to have inside of the app um so call mile says when would you do a class function verse functional i would say always triangle with functional functions more the modern approach and you should be able to go and check that instead um hey daniel says yo papa react what's up dude glad to see you in in in today's video so what we're going to do is we're going to first build the sidebar right so i'm going to go ahead and say sidebar go ahead create the file so sidebar dot js rfce i'm going to go ahead and shut that down and then here i'm gonna say this is the sort of you know the setup every time we create a new component we're gonna create the css file that goes along with it we go ahead and set up the div with the bem naming convention so here i'm gonna say sidebar boom done and i'm going to write h2 saying i am the sidebar there we go and then i'm going to go over here create the sidebar.css and there we go all right so we have that done go over to imessage and let's go ahead and pop an import on this so i'm going to actually make this a little bit bigger for you guys so that way you guys can see it there we go um and then here i'm going to say import why isn't my clever little trick working oh yeah there we go so control space by the end of the line here and it will go ahead and import it for you and then we can go ahead and do uh thank you so much to to fikou rahman's tommy tom kim sorry you guys love your white pop react appreciate you dude channel says hi sonny hey what's up dude thank you for watching and guys if you're enjoying this and you enjoyed yesterday's video or if you're even here yes in yesterday's video smash the thumbs up button because we hear a thousand likes to them yesterday and i think we can go ahead and um we can break a thousand today as well so if lucha code elizabeth says that trick is a game changer along with emmett 100 it makes you such a faster developer right so that's gonna be really really cool for you um oh why papa meron popper is not popping up today hey david will be back in the channel hey i'm gonna give i'm gonna let david know that he said that um so we've got the sidebar here right so what i'm gonna do is actually render it out so you see it says i am the sidebar so we know it's working um somebody says is it too late to start coding at 17 hell no dude start as soon as you want or later you want doesn't matter man just start all right the next thing i'm going to do is create the chat component so actually let's go ahead and build out the sidebar first all right so um ayush patel says it's 1.5 k now for yesterday damn yeah so like see we're making moves on that so sidebar let's go here and what i'm going to do is you guys like this when i did this yesterday i'm going to drop the sidebar underneath my code like this so you can see my css underneath and my code at the top that's a kind of easier way to visualize it as well so i think it might help you guys out now the first thing we're going to do is i'm going to have a header section so the header section is going to reference this bit over here okay so this is the the sidebar header so i'm going to go over here and create a div called sidebar i'm going to say header okay so over here we've got the div with the sidebar header and then what i'm going to do is i'm going to create another one and this one's going to be called sidebar chat so div sidebar i'm just going to score chats and that's going to be responsible for you guessed it these this list of chats over here okay so we're going to go ahead and do that right now inside of sidebar header so you see we use we use material ui in a bunch of places right now we've got it for this icon right here we're going for this icon over here so the avatar being shown over here and we're going for this little pencil icon that we use to create a new channel so in order to do that we need to go ahead and install material ui right those people asking what's the best way to then react just watch this channel man watch this channel watch the builds go ahead and do that and that will be your quickest most effective way of doing it so we're going to go here i'm going to do material ui.com so you can just google it and it should pop up then you want to run this command npm install material ui call right so this command is very important right now so then what i'm going to do is go back to my terminal so i'm going to hit command j to bring up terminal right now we have it running here i'm going to hit this little plus icon and we should see a second terminal pop up and then i'm going to go ahead and do npm install material ui core right anthony what's up dude he says yo sonny uh that's awesome just dude oh sorry i was responding to another comment as i had that one pinned um right yeah still okay so with that done we're going to install that then we're going to go back here go to the top where it says search and then i'm going to say icons and thank you so much for charlie for putting a little code snippet in the chat that will help a lot of people out here with the installation i'm going to go ahead and do material ui icon so we need to install the core and the icon set okay so those are two things that we need to do to get started um if you guys are enjoying this by the way let me know we'll keep the builds coming all right so back to the build here now i'm going to hit command j to hide it and the first thing i'm going to do is at the top over here i'm going to have the so we have the avatar right so i'm going to go here and i'm going to say avatar and then here i'm going to say source right now the source at this point we don't have an image for it so i'm just going to leave this blank okay and this will go ahead and it'll pop like a dummy avatar in so it says avatar is not defined so here i'm going to hit control space at the end it says auto import from material ui gives me the import statement um i'm going to go ahead and save it refresh avatar is not defined should be defined now so let's go ahead and refresh we should see it there we go all right so it says i'm the sidebar and we've got the avatar popping up which is the little icon right here uh mando loves the emma emmett trick yeah obviously emmitt is insane man and it makes you such a fast decoder so make sure you take full advantage of that the next thing we're gonna do is create sidebar underscore underscore input boom i'm gonna do that oops input and then i'm gonna go ahead and inside of here i'm gonna have a few things i'm gonna have to search icon right so the search icon we can pull in from material ui so i've got the import up here so i'm going to go ahead and pull that in i'm going to close this to make it easier for you guys to see and then and then i'm going to go back down and create an input right so this is going to be an input the placeholder of search so you see right now we're starting to pop out some of the stuff now we don't need to say i am the sidebar we don't really care about that also where we say let's build the messenger clone imessage coming here and that so going back here we're going to go ahead and do so and david to work on that bro so loads of people are looking forward to the imessage uh to the react native stuff it's coming just bear with me okay it's coming guys it's coming it's a lot of work going on behind the scenes um yeah it's definitely on his way um then we're gonna go ahead and after this we're gonna have the another icon button right so we're gonna have that little icon over here you guys see i'm gonna go ahead and pull that in so the thing to go ahead and do that is it's actually called this right here so it's called rate review outlined icon so i'm to go ahead and import that from material ui so pull that in at the top and then save it and we should see that in just a second and what i can do is you see right now this is not clickable right so to make a but an icon clickable with material ui all you need to do is actually pretty simple you go ahead and you import something called icon button yeah so i didn't auto import and then basically this takes a child so pretty much you go ahead and expand it i'm going to pop the icon inside of it and that will actually make this clickable so you see now we get that beautiful ripple effect so if you didn't know that and you now know that so go ahead and um go ahead and and hit the thumbs up button also thank you so much pada he says uh sunny i have become the biggest fan of you bro love you bro sorry maybe never keeping everyone in the in the comments in check uh you know that's that's why that's why i'm everyone's remembering you know that's why we love her right going back so rishi seek says please slow down everything is going to be recorded guys so don't freak out um and we've got a lot to build through today which is why we're keeping the speed nice and high okay so next thing you know we've got the icon button right so i'm going to give the icon button a class so i'm going to here i'm going to say class name of sidebar chats sidebar chats like this save it and then i'm going to go no no sidebar chat sorry it should be sidebar uh input button we're going to go ahead and use that so we can reference this afterwards and then i'm going to make also i'm going to give this a variant okay so i'm going to say this is a variant and i'm going to go ahead and say outlined also guys if you're following along with it right try not to be following line by line and just copying things try and watch it and enjoy the content right and oh snap check this out so athaba is inside the course we work with him and he's a dope student um and he's actually gone ahead and he wrote a blog with us it's on medium right now on the clever program you guys can go ahead and check it out but we just oh that's so sick man we just dropped an amazon 50 page plus blog and it's now reached 3.3 k views uh well done nata that was insane dude i really really enjoyed that read as well so crazy stuff man and and well done right oh i pinned it here as well uh let's go back okay so now we're gonna we have the sidebar chat section underneath so i'm gonna go ahead and first start a bit at the top thank you rag vender for the super chat appreciate you dude um so i'm going to save that and now let's go ahead and style this so it looks a little bit more like the top right so i'm going to go ahead pull up the sidebar oops pull up the sidebar.css split that page over here and then we've got our stuff over there and we don't need as much room so i'm going to do that now here what i'm going to do is go ahead and for the sidebar i'm going to say dot sidebar and i'm going to apply the following thing so i want this to take up 35 the screens if you notice here this is actually taking up only 35 the screen and the remainder is 65 the screen okay so this is taking up 35 on the screen yep and this is taking up the chat is taking up 65 of the screen so in order to do that what we do is we go ahead and say we go ahead and we say flex 0.35 and then we can go ahead and save it let's go back here and you're not going to notice that right now because we haven't actually applied flex to our app so let's go back to app.css go ahead and do the following we just need to say display flex right and we can close that go back here and then i can say height of a hundred view height that's what we want to do and i'm going to say it should have display flex the flex direction of column because everything inside of it we want it to go down yo what's up david david's in the house guys let david know if you're excited for some more man builds and that's gonna be insane um so let him know right now he's in the chat have a chat with david and uh we love you david awesome stuff man all right so then i'm going to go ahead and create a give it a background color so i'm going to go ahead and give that a little background color so now you can see it's taking up 35 the screen and it works as we want it right then i'm going to give it a border right so let's go ahead and give it a border right one pixel solid like gray you see it's very subtle but it kind of gives a nice little design trait right um okay so next thing is the header so i'm gonna go ahead and pop a snippet in over here so we're gonna go here i'm gonna go and say sidebar header should have display flex align the item centrally the padding should be um the padding should be 10 pixels and a height of 50 pixels okay and then for the avatar right i want to have this clickable so right now it doesn't like it's clickable so i'm going to go down here and i'm going to first i'm going to give this a class name so i can style it in an easier way i'm going to say sidebar underscore underscore avatar bam naming convention in for the win and then i'm going to go ahead and paste it here so it says sidebar avatar cursor pointer margin 10 pixels now you can see look at that gives me a nice little like the cursor changes to that finger right so that's going to be a lot more of a user a nicer user experience okay so that's looking good now what we're going to do is get this input looking nice right so the sidebar input let's go ahead and do that so i'm going to make this a bit easier for you guys to see um actually so this is the sidebar input then we're styling it down here so i'm going to go ahead and i'm going to say sidebar underscore underscore input and i'm going to say oops i'm going to say display flex boom and then you can see everything gets pulled in centrally i'm going to say align item center and then we'll say justify content center as well because i want my everything to kind of be centered equally as it gets bigger when i say flex one i want this to take up the most room in that container you might not tell now but if i make this bigger i mean it's limited to 35 but you always want to have it being responsive if something changes background color let's go ahead and give it a background color save that and you can see we're starting to get this little background color over here hadi says hello sunny what's up dude good to see you here and then we're going to go ahead and change the color of the text to gray so i'm going to go ahead and say color gray and then i'm going to say border radius of 5 pixels all right you're probably wondering this don't look nothing like this right so how do we get it to finishing stage right now we're going to go ahead and target the inner input because right now we're targeting the div so here i'm going to say sidebar input and then target the inner input and we're going to go ahead and say border of none save it okay it's looking a little bit better and then i'm going to go ahead and say background transparent okay okay that's looking clean and then the final thing is you see when i click it we don't we get this horrible blue outline so to get rid of that we go here and we say outline width and make it a zero save it and now boom we don't get the outline width all right so it's a neat little trick for you guys so we can go ahead and save it and then uh i'm gonna go ahead and check also the input button right so the input button everything's good now yeah so awesome so with that said now we're gonna go to the sidebar chats right so the sidebar chats so this section right here now in this section is where we have everything looking like this right so we have all these sort of sidebar chats individually all right um hey we've got another super chat from aragovenda thank you so much it was my first ever super chat ever love your work on the mern stack tinder cone can you recommend me a framework for complete full stack react so react's not a framework but it's a library um but this is all you need to go ahead and get the front end built out and then you can pretty much go ahead and use firebase or you can use the man stack to go ahead and build the back end but the one that you're looking for is react awesome so john cena says hi uh papa react hashtag some react is waving loving it hey what's up dude good to see you here all right so now what we're going to do is bring in the energy back into the room um also guys if you haven't already smash the thumbs up button get this video out to as many people as possible we're nearly at 400 likes so thank you so much guys and we're going to keep the energy high today so sidebar chat right so over here what i'm going to do now is i'm actually going to have a sidebar chat component so here i'm going to say sidebar chat right so sidebar chat and then i'm going to go ahead and create and now each of these sidebar chat components is going to resemble one of these rows okay so i'm going to go ahead and create this file so i'm going to say sidebar chat so side bar chat dot js there we go and i'm going to do rfce and there we go we've got the sidebar chat i'm going to say import boom sidebar chat dot css all right save it gonna go back down here change this to say class name equals sidebar chat oops sidebar chat there we go that's our that's everything set up with that now um fighting kind of old only foreign don't worry dude if you if you're a beginner to this stuff then you don't honestly don't worry just get started with these clones and you'll be enough thank you so much prashun for the donation appreciate that dude 11 year old and you're they're donating literally a smash of the thumbs up button is all we ask and that is cool man uh sony sharma says learn flexbox in your life is much easier 100 100 like it's gonna help you out dude um right so sidebar chat so with the sidebar chat component what we want to do is we're going to have a few areas of this right so the sidebar chat is this component right here now here we're going to have an avatar so i'm going to go ahead and add in an avatar and so inside oops so an avatar inside auto import save the file and now you can see we've got an avatar i mean it's not rendering out right now but if i go ahead and import this it says cannot resolve sidebar css right so sidebar chat we need to create that file save it go back and then you can see as soon as i refresh you see it's there right so avatar done next thing we want to do is we want to have the sidebar chat info right so sidebar chat info is this bit right here so all of this stuff i'm going to consider is the information so that's why we're going to go ahead and do that um oh dude this is awesome man uh pika chong uh so sorry if i said that wrong says thank you very much i obtained a long term contract 40 000 euros a year thanks to your netflix and amazon clone that's another one added to the list of people to get a job that's amazing stuff dude uh everyone go ahead and give a pika a massive congratulations that's awesome stuff dude really really amazing um there's also another one i saw uh i can't find it now but somebody else had another success story so live code says how many years of experience do you have with the react um at this point i'd say maybe maybe four three three or four four years maybe four years yeah potentially but doesn't matter once you even if you have one month you can make money with that right so you just need to keep the positive energy uh you don't need a huge amount of experience you just need to stop right next thing we're gonna do is create sidebar so i'm gonna say sidebar chat underscore underscore info right and inside of here we're gonna have a h3 with a channel name so it's gonna say channel name and this will obviously be like one of these like yo testing test while youtube and so forth and then i'm gonna have a p tag this is going to have the last message that was sent so imagine if i'm inside of this and we say abc you see it says abc because it's the last message that was sent so i'm going to say last message sent dot dot keep the suspense you know and then i'm going to go ahead and add a small tag so it's just a small piece of text and this is going to be a time stamp right so again it's going to be like a little timestamp in the corner i'm just going to add it in for now like this all right with that said we're going to go and style this to make it look a little bit more like this right now okay um thank you so much uh rosh kneebarad says love all your videos keep you up keep up the support dude really appreciate you um what happens after you log in refresh off the login jonathan jonathan jonathan check this out dude so i'm logged in right now for refresh boom logs me in we have persistence with redox and google authentication so it's uh it's really powerful okay um going back to the react redux so here what we're gonna do is we're gonna open up our sidebar chat dot css sidebar chat and then here i'm gonna start coding these styles first thing i wanna do is say dot sidebar chat and then open parentheses display flex and then i'm going to say align item centrally and then save it and you can see everything goes into a line right then i'm going to say padding i'm going to say 20 pixels because i want to give it a bit more spacing around it i'm gonna give it a border bottom of one pixel light gray solid do that boom gives that a nice thing and then i also want it to have a cursor when i hover over it right because we want that sort of nice uh user experience so cursor pointer and then there we go so somebody says how is this build different from whatsapp clone apart from the ui so firstly the whatsapp film wasn't built with redux whatsapp chrome was built with the react context api um so no it's going to be a little bit different to that secondly we have a few other elements so the build is slightly different to the whatsapp clone but yeah the main thing here is redux is powering it all so redux is the thing that's going to land you the job as as opposed to um as opposed to somebody who who won't get the job redux something which you're gonna need when you're applying for professional jobs and i really recommend you learn it right now so starting with this clone uh preshoon thank you so much dude he says donated 20 uh real things rupees in your imessage clone you guys are taking such great efforts to make these brilliant tutorials this is just a small token of appreciation dude for an 11 year old thank you so much man that is really really awesome thank you going back i'm going to make a hover effect i'm going to say when we hover over it i'm going to change the background color to blue and the color of the text to white let's go ahead and do that save it and now you can see we get this you see we're building this pretty fast man so now if i go ahead and hover over it looks really good okay we're almost at 500 likes as well guys at 402 so let's keep pushing that like count get this video out to as many people as possible oh nice many says maybe a suggestion for next video is to start components 100 style components react native ragna is something fun coming right next thing we're going to do is start the info section so here i'm going to go ahead and say sidebar info go ahead and hide the sign and then i'm going to go ahead and do a margin left because right now it's touching the avatar right here i don't want that i'm going to say margin left of 15 pixels okay save it it pushes it slightly away that's nice and then i'm going to go ahead and do position relative because i want that time stamp inside afterwards to be on the top right i'm also going to say width of 100 okay now next thing i'm going to do is i'm going to target the small tag that we added in inside of this i'm going to say go inside the container the info container and the small tag and i'm going to say make it position absolute but because we made the parent relative it's actually not going to behave in a crazy way right if i do this and i say top 5 pixels away from the top now you can see it sticks to the top if i say go to the right of zero and now you see the time stamps over there right so this is how we do these kind of things right and we get those little things uh in place so as a young person can i still make money programming dude 100 billion percent we have people inside of profit with javascript right now right let me let me just send the message out right now if you're young if you're old it doesn't matter what the case right whatever age you are yeah as if you're here right now so you're starting off that coding journey okay now it just followed up with another one so he's 11 years old and he says what do i need to to know to start coding to start learning react whoa dude damn that's a big donation that's uh i'm i'm not sure how much that is dude uh but thank you so much and i'll answer the other question afterwards but william wong says you are giving me clean and clear understanding from modern javascript development without tons of reading docs so thank you very much and the pwj community william wong thank you dude and we love the energy that people like you bring into the community so amazing amazing stuff really really appreciate that big donation dude now back to the question as to if you're young and you're in a code what i would say is look you're here right now you're in the right place right what i also want you to do right now and this is everyone watching right now go into the description sign up to the free training right the tree free webinar training the reason being because that is a free training guys and that's going to allow you to go ahead and get you know more free value so if you haven't already signed up to that make sure you go ahead and do it let me know in the comments after you've done that right and then go ahead and check it out um also somebody says hey sonny what do you think would be a great way to not lose touch with an old programming language you've learned for example you're learning javascript and you're forgetting python okay very good question but i'll quickly answer this one then we'll carry on with the build right what i would say to this question is you're never actually going to go ahead and learn you're never going to go ahead and forget sorry the languages before so for example i've coded in python plenty of times before but i haven't coded it in ages doesn't mean i forgot python but if you understand programming principles well for example data types like what is an array how what is a four loop what is a loop uh you know it was a four sorry um like was it if condition sorry and a for loop and things like that then as long as you know that right then those things are transferable doesn't matter what language you're coding in right they're just pretty much you can go ahead and hop between them and it really doesn't matter so if i need to code in python tomorrow you can pretty much use all the skills i have from today and pretty much go ahead and pick up python really quick so that's why i'm gonna go ahead and mess out with mess around with uh react native again react native is javascript so it's gonna be very easy to transition over to but also things like flutter flutter is something which i would recommend going and checking out gabriel graves says that big donation by william wong was 19.35 dude amazing thank you so much um and appreciate taruna coogan says thank you so much bro thank you dude for watching um yeah i love the energy today guys really really positive stuff right so this is looking good right so we can pretty much all of these avatars we can go ahead and customize it with a picture in a bit for now what i'm going to do is go back to this sidebar.js i'm going to go ahead and copy it and basically just paste it out to test it so imagine we had a bunch of channels there you go we can pretty much this is starting to look a lot like our build right now if i was to go ahead and spam this thing so that it goes a bit longer you see it we kind of broke the page right the page isn't really working in the way we expect it to so to fix this what we're going to do is we're going to go over to our sidebar.js sidebar.css sorry and what i'm going to do is target sidebar chats so sidebar.css i'm going to pull this underneath i'm going to target sidebar chats and inside of sidebar chats what i'm going to say is i'm going to say overflow scroll right so as soon as i do that now now it has a scrolling functionality right so that's a lot more cleaner and would be uh really really like much more of a nice user experience doesn't look broken anymore right um so and also i don't want this horrible scroll bar but i want to keep the scrolling functionality right uh right so sun kit dev says i've watched signed up for the webinars and one and it's important i'm now confused with to watch this or the webinar so honestly for the webinar we we show that quite a few times so don't worry watch this for now and then you can watch the webinar afterwards um so yeah that's a good way of doing it um a lot of people said can we expect react me it builds later on 100 dude react native is coming later on um somebody says do you need to learn vanilla javascript before learning react i would recommend learning the basics we do teach the basics inside a profit with javascript if you're interested in joining cleverprogrammer.com forward slash pwj right um okay so overflow scrub so there's a little trick that i want to show you guys and what you can do is this there's a snippet of code i'm gonna pop in here and this right here the top one hides the scroll bar for chrome safari and oprah the bottom one holds it for internet explorer edge and firefox once we don't really care about and let's start war with that but then what we're going to do is save it and you can see now we get all that space back right so that's a lot cleaner um but you still have that scrolling functionality right so that's a lot nicer way of doing it we're going to use props to basically customize these so that way they can have different values but that's a step for afterwards um for now what i'm going to do is i'm just going to go ahead and just uh just have like three so we don't overly overload this but right now there you go we've done the sidebar right so the sidebar is now done amazing stuff we're at 432 likes uh we're moving through this build pretty fast uh somebody says react hooks are confusing can you please explain it better i will explain it when we get to that point and yeah for sure dude so now we're going to create the chat component so this part right here on the on the right hand side so for the chat what we're going to do i'm going to go into imessage.js where we have the build going to get rid of my comment over here and i'm going to create the chat component so if i save it it goes ahead and it freaks out because we don't have chat so i'm going to go ahead and say chat.js do my neat little rfce trick go back and i'm gonna go to the top and say import uh chat.css go there create another file oh god create another file oh no no no no no don't do that go to source go back down here create another chat dot css there we go make sure you don't make a mistake like that okay um will all these videos be free on youtube forever yes dude they're going to be free forever right all of these videos are going to stay up on youtube free for you guys they're just pretty much to drop value for you guys so if you like that smash the thumbs up button that's it that's all we ask all right and that will help these three videos get out to as many people as possible so it can help our mission of 5 000 developers right um i appreciate you anupam uh so it says cersei really appreciate your work and god bless tmcp thank you dude so i'm going to go ahead and remove this comment and save it and then i'm going to import the chat component boom go to chat.js and here i'm going to go ahead and say class name uh chat okay now inside of here what we're gonna do is i'm gonna go ahead and where we have this right here um i'm gonna go ahead and do the following so we have inside of the chat we have the header right so the first thing we do is we have this header so the chat header and then we have the chat sort of body or the chat messages so this section right here and then we have the chat input it says three sections here okay so i'm gonna go ahead and you know how we do it we like to draft things out so i'm gonna go ahead and first do this i'm gonna say chat header then we have the chat messages and then we have the chat input okay uh awesome stuff thank you so much nathan for the positivity let's keep that energy higher we're holding on to 300 viewers this is insane uh victoria code says hi sonny you're one hell of an amazing teacher thanks for giving us such valuable content appreciate your victoria code and really nice to see you here thank you so much for the kind words so the top part chat header we're going to go ahead and use emmett so we're going to say chat underscore underscore header boom naming convention for the win and then you can see it pops up and then we're going to have a h4 inside and this is going to be responsible for this part right here how is the music making me making you tired dude this music should be awakening you up all right i mean if i if i up here right now that i think that i think i'll wake some people up you know but then we're gonna go ahead and do h4 and here i'm gonna say two and this would actually be the name of the room you're in so for example friends i have the youtube name it'll say to youtube but here i'm gonna say two and we're just gonna say channel name for now okay so these are all kind of placeholders for now all right um then i'm going to go ahead and render this on imessage so save it where is it oh yes you see right now it's underneath here so you guys can actually see us but it's actually popped underneath the reason why that's happened is because if we go to imessage we need to go ahead and go into our imessage.css and i need to do the following and say imessage display flex save it and boom that happens because it's flex so it's flex row um oh man oh man mohammed says sonny i can meet you in london i'm from tottenham hey let's go united kingdom crew muhammad shazad says hi sunny you're an amazing dude master and react appreciate the kind words thank you so much um so this is actually the music that i'm listening to right now is actually part of um i can't remember the comment for the service we use uh i will find that out though but i think it's it's basically the youtube copyright free music and that's the one that we use and i found a nice little rhythm that kind of goes with it um thank you so much adi meinstein goes hi it's my first time watching your stream in a while love brother keep smashing them thank you so much dude appreciate the positivity and guys we're almost at 500 likes this is insane let's keep going all right so imessage let's go ahead um oh dude this is for you amazing so i've been into reacting redox and often it seems like setting up redux to work is pretty annoying yes redux is annoying to set up go ahead and rewind this once this is finished i show you how to use create reactor with the redux template makes it so easy honestly it makes it so so easy um right so now we've got the channel name right here so i'm going to go back into the chat and then we're going to carry on so here we're also going to have a strong tag so strong tag the team are having a team meeting on a team lunch on zoom i feel left out right now damn it so we got details and then we can see here so two channel names details and then inside of here we're gonna go ahead and start this right now so i'm gonna get rid of this comment and i'm gonna also so where it says the channel name i'm gonna span a style here because i wanna style this up so i'm going to say span and i'm going to move channel name the contents of this to here and then i'm going to give this a class name so that i i love this comment dude sunkit dalvi says sunny is a treasure that we all must protect that's amazing thank you so much dude appreciate you uh so funny um all right nice um so now what we're going to do is we're going to go ahead and give this a chat underscore underscore name because it would be like the chat name channel name right so that looks good and i guess the next step naturally is to go ahead and start the top part so chat i've got a new mouse i'm getting used to it right and then we've got this i'm going to say for the chat what i want is i want to have display flex all right display flex direction is going to be column save it and flex is going to be 0.65 now why is it 0.65 because remember this is 0.35 this is 0.65 right because we want to take up the remainder of the room i'm going to say a height of 100 view height and i'm going to say background color of white all right save it boom right trust me it'll make sense in a bit why i set it to white now for the chat header what i'm going to do is i'm going to copy this paste and copy and paste this snippet in right here okay so saving this and you can see now it says having a 20 pixels display flex justify content space between bottom border and a background color right now let's debug it because something's gone wrong here so i don't actually know what went wrong here but you see we haven't actually got this right here yeah we haven't actually got this this like this should be filling out the the bit over here so something went wrong right so we're going to debug this scan to the debugging sort of mood right so i like to get a bit serious when we debug so now we're going to go ahead and find out why this why isn't this stretching all the way over here so i'm going to go ahead and find out why okay so it gets tense guys right because i'm not actually sure why that's not stretching over there so i'm going to refresh to make sure that i've exhausted everything okay and then what we're going to do is chat header right now should go ahead and let's see so the header right now it should be flex okay 0.65 save it oops no i don't want that what did i change all right so chat sits inside of imessage right imessage has sidebar and chat inside of it so let's open up our sidebar dot css and then here we've got 0.35 right so display flex display flex okay what we could do is we could say at this point we could say width i don't really want to do width of 100 i don't really like to do that approach right but why is that happening so we've got flex 0.65 right it's even more stressful when you're live imagine how i feel guys i'm live and something don't work right i'm going to inspect it now so i'm going to show you guys how i do this so i'm going to go ahead pull this out because what we want is this where it takes up the entire space right and i'm not sure why it's not so maybe parent should be some people are saying should be 100 but you see the chat so this is actually flex 0.35 this is flex 0.65 the parent is display flex right but then the width of imessage ah no no width of imessage width of app.css oh i see why i see why all right so notice how app we've done display flex ah there it is all right i'm gonna move myself by the way app there it is guys that is why so we found the issue so you see that i didn't need display flex on the app it was because i then nested it inside of imessage where we had display flex so this was stopping me from using all of the space so we did it guys we fixed the bug hey go ahead and hit the thumbs up button if that was some fun i thought that was pretty cool honestly that was actually something unplanned for i didn't realize that was gonna happen but we did it so let's carry on right uh i'm gonna go ahead and fix that now so go back to our code go back to app.css i'm going to get rid of this we don't need this one right boom oh somebody said the air horn dude you're right man i haven't done the air horn in a while let's go why is that so quiet all right let me go ahead and let me let me do it one more time right three two one and that that that blew my head off but we're back all right uh carrying on right so honestly that was actually something pretty cool because that's not like a real life example of where i ran into a debugging issue and we kind of went through it and solved it together so hope you guys enjoyed that we're 15 likes away from 500 uh 500 likes so smash the thumbs up button if you enjoyed that live debugging session a bit of fun as well with the music okay now back into coding right so now we have that done i'm going to go ahead and hide this him and she said yo that horn sound i know dude that woke me up so yeah i want my neighbors up right um so we've got that looking pretty good right now we're going to carry on styling it out so here i'm going to say we're inside of chat.css so right now i'm going to go ahead and start the chat header so i'm going to say chat header i'm going to target the h4 element inside so if we go into my chat you'll see i've got the h4 here so i'm going to go ahead and target the h4 and i'm going to say font weight of 500 so we want to reduce the weight and then i'm going to go ahead and say color of gray boom right and then you can see it change the color a bit right but we spanned in this chat name right so chat name we're actually gonna go ahead and add a bit of styling to ourselves and we're gonna make this one um so if i go here and i say chat name and i say color black [Music] and now you should see the channel name is actually black right um you and the rest of the team are the best also what i need to know to start react just start dude honestly just start like learn the basics on the fly you can go ahead and do that um so yeah just go ahead and start um okay oh somebody says why do you use pixels versus ram very good question actually we'll touch on a different video but we should rem is a good unit to use actually but we're going to go ahead and do that another video okay so now we're going to go and build the um we're going to build the chat messages section right so i'm going to ign i'm actually going to leave this bit right here the middle section so where we actually have the messages i'm going to leave that to after but right now i'm going to build the input section at the bottom okay so i'm going to move myself a little bit and we're going to have the input section uh yeah this is a good point stop repeating and i'm i'm literally going to ignore you i can see when people constantly keep copying and pasting stuff right now i can see somebody spamming the chat you're getting blocked dude like don't do that stuff right uh yeah you're blocked so yeah sorry about that but you know you're asking for it when you when you play around like that so don't go ahead and do that because we want everyone to have you know we want everyone to to sort of be to get value from this uh as opposed to you know just messing around also elizabeth you just earned moderator rights so feel free to block people um right so now we're gonna go ahead and for the chat input i'm gonna first do chat input and then i'm gonna say div chat underscore underscore um [Music] input right and then here i'm going to have a form because we like to have the submit functionality where you basically hit the enter key inside the input field i'm going to have an input field and i'm going to have a button which says send message now i will be hiding this button but for now it doesn't matter okay and the goal is we're going to try and change this to look like this thing down here all right so it's going to eventually look like this very nice uh user input form at the bottom so this imessage where it says this bottom thing right here we're gonna have that looking very nice at the end so so somebody says why is it free and we have paid for pwj so this is actually a this is a coach this is not a coaching call guys and also um pwj has a ton more than what we offer on youtube so if you think youtube is good we have all the modules inside the profile of javascript we have coaching calls we have one-to-one access we have a community of amazing people inside there everything that is available inside the course in profit javascript is not available here right so uh yeah right so now what we're gonna do is have um we're gonna change the input placeholder to say imessage save it and now you should see it say imessage inside the button we're going to go ahead and fire off a function called send message because the whole point is that when we click that it should send a message okay so we haven't written this function yet so i'm going to write that in a sec so i'm going to go up here and i'm going to say const send message takes an event and it fires off an arrow function then we're going to do e dot prevent default because if i don't do this right i'll show you what happens so if i type in hit enter see it refresh so watch this bit at the top boom boom boom enter and it just disappears right so that's going to be like we don't want to do that right we don't want to have that hey logan's in the house what's up logan good to see you dude uh logan's absolutely killing it and he we work with him daily so good awesome guy he's inside a prophet javascript as well um right so we're actually gonna go ahead and create the send message but we don't want that refresh right we're going to do e dot prevent default thank you so much lloyd for the kind words prevent default oh god whatever we're done here prevent default like this go back save it and then down here basically this is where we do all the sort of firebase magic so this is going to be firebase magic in a bit and yeah now we want to kind of keep track of when i'm typing in right so as i'm typing in here i want to keep track of what's got what's sort of like i'm going to keep track of this input inside of state so in order to do that what i'm going to do is um i'm going to go ahead and do the following so i'm going to go ahead and say const i'm going to use a this the use state hooks i'm going to introduce a piece of state and thank you ankit he goes hey you are doing a great job man thank you thank you appreciate that dude um i'm going to create a piece of state called input and i'm going to say set input and um guys don't please please please don't i'm going to just you're getting blocked you're getting blocked like it really annoys me when i see stuff like that right um go ahead and now we're going to go and do this input set input and i'm going to equals use state right i'm going to import it from react while right so you see we import it at the top and and this is going to initially be an empty string right now to map it to the input field i'm going to say value equals input and then i'm going to say on change equals e set input and it's going to be e dot target dot value right um font size really needs to increase okay so we can make it a bit bigger i mean guys yeah i mean i like i do make it this way but like when we're doing huge builds i don't like it to be so in your face but that's pretty good i think okay um okay next we're gonna go ahead and have also guys bear in mind like imagine you're doing a build and then you're doing like the checking the comments and you're doing all this other stuff it's a lot to take in you know it's a lot to process and do that um lloyd says sunny man dude you just give the but you're just you just give the best of the react appreciate it man appreciate you watching lloyd thank you so much um logan says i got my second pc and up and running with sen os7 running ssh is up on boots so i can remote into it with vs code on windows ah that's jacked man nice because uh kind of awesome i have real linux in my vs code camera that's dope man i like that that's awesome stuff dude all right so what we're going to do next is i'm going to have the send message over here so once with that i'm going to go ahead and say i want to basically after i send the message i'm going to set the input to be an empty string so now if we see if i go ahead and type something in hit enter see it it actually clears out the contents right so that's a good thing so what i'm going to do now is actually go ahead and have this this halfway i'm going to style this input field so it looks like the beautiful finished input field down here that we see at the bottom okay so in order to do that i'm going to go ahead and also please stop asking the same question something any particular reason for using search icon rather than search no dude uh it was just a case of it was the one that i got i found and it worked for me okay so here i'm going to go ahead and do chat dots here also guys don't focus on that stuff like you should be looking at the build not that stuff like honestly if you're focusing on what my import was as opposed to like what the actual functionality is i'm doing you like you know pay attention to the right areas right that's what you need to kind of pay attention to correct areas so i'm going to open up my chat.css and here i'm going to go ahead and say dot chat input right and i'm going to say display flex and i'm going to go ahead and say align item center and then i'm going to go ahead and say padding 10 pixels oh god padding 10 pixels 20 pixels which means 10 pixels left and right uh 20 px 10 pixels top and bottom um and 20 pixels left and right okay then i'm going to say border top one pixel solid light gray boom save that and i'm going to say background color white nice oh no gray sorry i want to be gray okay then what i'm going to say is i'm going to target the form and i'm going to give it a flex of one right because i want the form to take up the most input at the most space i'm going to say flex one and that will actually go ahead and it'll push it as far as it can be pushed and what we need to then do is say target the form and then the input inside the form get a width of 98 outline width of zero border one pixel light green border radius 999 so it gives it a rounded effect and padding and fiber as soon as i save this watch this boom looks nice right and then for the button i'm gonna go ahead and target the button so inside the form inside the button do display none because we don't actually want the button there so now if i type in enter we get a nice sort of functional working input tool okay so that's really really good to show the size says you're great at multitasking great work man honestly dude you get really good at it thank you for noticing that but yeah like i've got a stream deck as well so i can basically go like this any second i can go ahead and just do like fun stuff like this i could say oh things are gonna get real you know like you can do all this kind of fun stuff um but there's like you get really good i'm doing things with my left hand things with my right hand it's crazy but yeah back to the boat um binny binny says you give me hope that i could become a programmer thank you that's awesome man or girl thank you so much for that code codekid says man you are epic guys your energy is insane today really really thank you and also with that said we just broke over 500 likes on the this video amazing stuff guys thank you all for for watching and i really do appreciate and love each and every one of you right um nice i'm gonna go ahead and switch it back to this music i prefer this music right so now back to chat.js i'm gonna then actually next to so outside this form going back to chat.js outside this form we're gonna have a mic button okay so if you notice at the bottom of our build we have this little mic right so i'm going to go ahead and add that in but it's also an icon button which means remember i showed you that neat little trick earlier so it makes it a nice clickable button right um then what i'm going to do is i'm going to go ahead and first pop this in so i'm going to say boom i'm going to give it a class name so i can target it easier i'm going to say chat under squad underscore mic and i'm going to do this and now outside this i'm going to say icon button right and then everything inside the here should be mic like this right now for the icon button i'm going to import it same for this i'm going to import this but this one i need to actually import the top so i'm going to go up to the top and i'm going to go ahead and pop it in there save it boom uh so shank says this is the best one keep doing this bro nice thank you um yeah khalid says we're pumped nice that's it man keep this energy high there you go guys look at that we have that nice looking logo on the right okay that's looking good right now i'm going to show you a really neat little trick if you build things in the correct way actually implementing the functionality isn't that bad right so we have the chat messages i'm going to get rid of the comment here so now i'm going to build out the chat underscore messages yeah and inside of here we're just going to have a bunch of messages so like imagine this just says uh h2 of like i am a message save it and then you see it's like i have a message i'm gonna add a bunch of these in right i want this one to always take up this middle space so this should always be pushed to the bottom in order to do that what i do is i go into my chat.css and i go ahead and target chat messages and i just say flex1 because the flex direction of this entire parent is column which means it should push to say use up as much room as possible and we get that functionality so that looks really really good um action says you look a bit burnt out uh videos are super amazing love the effort you are putting in uh appreciate the the consideration dude i'm all good though i'm all good thank you so much for asking um right so now what i'm gonna do is go back to chad.js and i am going to this is the next bit so where do we focus our attention to now let's go ahead and create the uh login section right now okay so login section for now so let's go back to our app.js so here i'm going to say app.js i'm going to go back here so what i'm going to say is i'm going to use redux here so redux i'm not going to actually go through fully of what redux does because yesterday's build we extensively went over some of the redux stuff so you can go ahead and watch that one and then today's one but i'm going to go ahead and break it down in a nice way for you guys so it's easy to understand so i'm going to go into features counter slice i'm going to rename counter slice so everything that says counter i'm going to call this the user slice okay so user now the initial state of the user slice is going to be user and then here i don't need any of this stuff i just want to go ahead and get rid of all these comments i'm simplifying my code right now and here i'm gonna have actually no let me get keep one of these i'll show you why i'm gonna go ahead and change this one to logout this one to login and then i'm gonna go ahead and get rid of this and this should be state.user equals and then we'll get we'll change this in a sec and then when we log in it's state and it passes an action just follow this refactoring step and it will make a lot of sense okay um and then this will be log out get rid of this because we export it so we can use it outside i'm going to get rid of all this crap i'm going to get rid of all of this i'm going to say select this is my selectors here so this is how i access my state afterwards and then yeah that's how we get everything up and running okay so with that done i'm going to go ahead and go back to app store.js i'm going to re change everything here so this will go ahead i'm going to change this over here to user reducer right and then it's going to freak out because we haven't got that file okay so i'm going to go back here and i'm going to go down to counter slice rename i'm going to change this to become user slice save it boom now we have it see everything's working now to test this works i'm going to open up my dev tool so i'm going to inspect go to redux and we should see if i go to the state we now have a user so i'm going to make this a bit more visible for you guys but i know my face is in the way so we've got the user where the user is zero right now so it's perfect okay so the user we don't actually want to be zero i'll go ahead and show you why how we fix that in a sec but now what we do is we go here and the user is not going to be zero by default the user is no okay then what we're going to do is this is just going to be action.payload and this will make sense afterwards and this when we log out the user gets reset to no that's what we do right now what we're going to do is i'm going to go ahead and quickly give you a quick rundown so this is a quick illustration of what we've done here so this build is using something called redux right now what is redux redux is essentially imagine we have a bunch of components inside of our app so this is a component called app.js right and then everything else is kind of rendered underneath it right so we have like the chat component the header component the sidebar component all of these things right we have chat we have sidebar we have header i mean everything's actually inside of imessage but you know you get the point and then we have message and so forth now imagine we have all these things right so everything gets rendered here and then you also have more components underneath here right so you can have different things being rendered off of these components and and vice versa right now imagine we had a login component over here right now imagine we had when we do the login we get a user object right what if i want to use the the user object over here so what if i want to use the user object over here right if i want to use the user object over here how the hell do i get from here here sorry all the way over here right it's kind of annoying i kind of have to do this long journey of somehow getting my so maybe i initialize the user over here and i pass the setter down there and then i have to do something called prop drilling pass it to this component and then pass it to this one and if i want it over here i need to pass it down to this one and you can already see this is getting super messy right we don't want to do any of this so what we can do is we can introduce something called a data layer or something like redux right so redux kind of essentially surrounds the app right so this is essentially redux and now redux is essentially like an onion so imagine like an onion so this is onion surrounding our app now an onion has different slices inside of it now each slice inside of redux resembles different contexts or like different things inside of our app so we have a user slice and this is going to be responsible for all of the user information then we have something like an app slice this is going to be all the generic information about the app and we can have something like a basket slice and this would basically be uh so i'm just gonna say basket slice right and this would essentially be all of the things inside of the basket so you see and these all belong inside of the layers of the onions right and then what we can do now is when we get a login uh when we do get the user at this side what we can do is we can actually push the user into the data layer so inside of this and then anywhere inside the app so if i want the user uh over here what i can do is i can just grab the user so the user is part of the data layer i can grab the user and just use them in this component and if i need to use the user over here and go ahead and grab the user out of the data layer here so you see once we have it we don't need to pass props around and things like that we can just kind of push things into the data layer by dispatching actions like the login action to get the user into the data layer and then we can pull out the user wherever we want and in order to do this we use something called a selector so in this case it would be like select user okay so i hope that makes a bit more sense if it doesn't feel free to go ahead and check out yesterday's build and that's going to help you guys uh quite a lot nice i saw somebody says onion incoming nice i love how you guys know what's going now um so that's going to help you guys understand things a little bit more okay ali says you guys rock makes it easy to understand really appreciate it all right so with that done and said i'm going to go ahead and create this right here so we've done that now um the next thing is i'm also going to go ahead and prepare something as well so somebody says so what is the disadvantage disadvantages of using the context api at this point so the disadvantages are so it's not this much it's more like redux is more powerful so we for one we have these beautiful redux devtools so over here we have nice little redux devtools where and trust me this comes in very very handy later on so we're going to be using that today also you split your pieces of state into different like uh areas so for example the basket slice the user slice the app slice and things like that so it's a lot more um oh this is a good question actually so logan says it says redux like an object that has pointers from app.js and all its children so think of it as like global state so as an easier way of thinking it right so global state and then all the children beneath app.js or pretty much inside of your app have access to that global state think of it that way you dispatch an action to go ahead and manipulate that global state and then you use selectors to pull from that global state right so in other words always accessible yes pretty much exactly so we have like things like the user is always accessible from any component inside of the app um so i think that's going to help everyone out now to your places last time your video helped me a lot thanks awesome stuff jennifer says hey sonny oh what's up jennifer she says i'm back after watching the discord cone yesterday i'm a totally addicted amazing um we have uh redux a facts loving this whoa nice dude he's got a big donation ten dollars man so it's just gone off all right dude i'm gonna you know one sec this this takes this needs some attention right now firstly thank you so much from dragon eight atom he says um ten dollar donation amazing right because just got an offer as a developer with a 20 salary raise and fully remote damn dude nice no more long journeys back home all from the amazon clone let's go man that's so sick i love seeing stuff like that dude if you can literally reach out to my instagram all right reach out to my instagram hit me up and say sunny i am dragging out and before i donate on you on your live stream i'm pretty much just chat man because i love to see like if i can see some kind of proof or something like that i'm gonna add you to the count of five thousand developers who have landed a job for more content that's insane man and everyone go ahead and drop him some love and some um and some support in the chat right now that's amazing smash the thumbs up button if you want to be like dragon atom i still did amazing stuff um all right logan interesting i love like to see a partially compiled reactor with redux to see how it's actually using redux i'm actually going to show you today so stick around logan um and i'm going to show you when we actually dispatch actions how it modifies the state inside of the app um and it's going to be pretty cool david atta says suddenly you get my job count before december ends ah so i'm talking about dude let's do it david um um okay this is awesome future code says there there's one sure thing consistent and keep building these clones you will get a job many of us are proof no matter what your background or level is it's just a matter of time elizabeth is somebody i do one-on-one coaching with uh future code she literally landed a job and now she's doing coaching with me still to kind of keep her skills up today and up to sort of scratch but amazing and and this is truth guys like this is there's proof in the pudding right so you don't need me to tell you there's literally people doing this stuff and they're glanding jobs left and right and it makes me so happy to go ahead and hear that oh man i think i talk like 20 000 words a minute when i'm ready alive okay so uh ashfaq says you're my inspiration and motivation to move to web development amazing dude thank you so much blackout says thank you appreciate you dude um oh another job holy crap dude he says sonny i got a job at local startup all thanks to your spotify clone thanks a lot man again hit me up on my instagram dude i want to go ahead and have a chat with you guys this is insane i love that and well done again guys drop him some love that's amazing to see that right we've got kansas in the house um he goes you're my coding inspiration i'm from kansas and we love you dude appreciate that dude amazing stuff right back to the build so here we have i am a message right uh so what we're gonna do is actually go ahead and prepare the login flow so firstly i need to go ahead and set up firebase so i'm gonna go to firebase.google.com uh make sure all you need is a google account i'm going to go to the console over here i'm going to click on add project then i'm going to go ahead and say imessage clone right when i say i message clone on youtube i'm going to enable google analytics you don't need to enable google analytics but you can if you want i'm going to go ahead and create the project all right now nikhil says sunny how can i do mentoring coaching with you just drop me a dm on my instagram at ssssanga so the one you can see on the screen uh or here it might be easier to see so you can see it over there go ahead follow me send me a dm just saying one-on-one coaching and pretty much we can have a conversation dude um and yeah and also send me an email as well as well uh to get the best chance of getting through to me but yeah that'll be awesome um nice all right so clicking on continue right so next what we're gonna do we're going to click this little web button over here and here i'm going to say imessage clone youtube set up firebase hosting boom register the app right okay so you drop to dm nice i get hundreds of dm so i'll go ahead and search through that um maybe send me another one and i can pretty much see that uh we're gonna click next and continues to the console nice people say why firebase because firebase has a real-time database so we're gonna use cloud firestore which is like the nosql real-time database so powerful version it also has authentication it has a bunch of stuff you are trending number four for imessage damn let's go man trending on youtube so that's insane all right so we're gonna go to authentication over here on the left and the first thing we're gonna do is click sign in method what's up alexandros could see you did uh always recognize the face so we're gonna go to google i'm gonna click enable okay i need to enable an email there we go click save okay so that's done and then i'm going to go to this little cog at the top project settings i'm going to go down to config and click the copy button okay i'm going to head back over to my code now and what i want to do is create a firebase.js file so firebase.js right and here i'm going to pull up my terminal i'm going to do mpmi firebase i need to install firebase into my project now while that's doing i'm going to paste and we've got the firebase config then i'm going to say import firebase from firebase because we just we're literally installing it down below as you can see down here and while that's happening guys i can go ahead and set up the next thing so i can go ahead and say const firebase app equals firebase dot initialize app with that config so this is basically going to use this like a key to get into the uh into our firebase end right so um nice he goes man you guys have energy doing all these tutorials yeah man the energy is high today let's go um also here thank you so much raj um he says superb video appreciate you watching dude thank you so much logan very good point here he says firebase is also classified as a back end as a service so it's cutting down the work of the build considerably a hundred billion percent i couldn't agree with that more really nice way of doing it um explaining it uh somebody says firebase is so expensive no dude firebase is free right so and also google if you ever watch this video sponsor us you know guess guess in with the good rates um so then what i'm going to do is i'm going to say constdb equals firebaseapp.firestore so that will go ahead and do it hey if uh khalid says hey i'll dm you the off letter i got keep an eye out for my insta at the real skypes skies nice dude go ahead and send that to me and i'll be awesome right um right uh okay and somebody this is a good point nikhil says i feel like we need journey of react of papa react and how he reached level and from what all resources if you guys want to see that i might actually start shooting some content on my youtube channel which goes behind kind of getting to know me a bit more i guess getting to know me my story that sort of stuff if you guys want to see that then let me know and i'll start shooting more content on my personal account and you know it's just kind of fun you know like you guys can go ahead and see stuff more about me uh that if that sounds cool let me know in the comments all right so boom and if you're not following me sunny sanga on youtube go ahead and check it out um right so with that said now what i'm going to do is i'm also going to say const auth equals firebase.auth right so this is all prepared preparation so this is already done um nice so many people are saying damn yes honestly start a vlogging channel we would love to know more about you um yeah okay i heard you did um loads of people saying it do it it's cool if you've subscribed to me then keep an eye out okay logan says yeah bro you should just vlog on your days out yeah you know i should because me and melbourne are always doing fun stuff going out and about so i think that'll be awesome uh yeah 100 um you guys killed my depression damn love that um you also made me passionate about programming love your content that's amazing and i'm so glad to hear that we helped you out on that journey right the next thing we want to do guys is go ahead and go down here and say cons provider equals new firebase.google author provider so this is like where the magic happens to go ahead and connect it um to somebody says i love you continue thank you so much we're going to go ahead and export the two things so we're going to export um something can you mention these firebase imports exports so they are mentioned that are the methods given by 5s yeah so all of these imports right here so you see like this whereas firebase this is all from firebase it's firebase dot initializing the app firebase app this is using this what we just initialized to go ahead and um get grab the database grab the authentication and then we pretty much go ahead and get our authentication provider right so with this bit done now what we're going to do is i'm going to export the authentication and the provider as something called a explicit uh export and then we'll undo this as our default export so export default db and the reason why i like to do the default db is because we use the db a bit more so i think it's always nice to kind of have the db as your default okay um firebase must just be one monstrous class so obviously even they kind of once it's done and the hard work's done they kind of like compile it into a very nice minified piece of code and i think that's going to be and that's what you end up looking at so if i go ahead and i'll show you actually so if i go ahead and click over onto firebase for example and click into you see like you get the actual typescript files you can see this is their kind of code behind the screen so this is their type definitions um so it doesn't actually show you the code as such because the code is going to be inside of here so you see this is what they did to their code it's all minified um but yeah you can see but then they give you type definitions and that's what that's what gives vs code the ability to go ahead and check out um what is like available when you do when you press like dot and things like that okay so we've set up firebase that's all good now we go back to our chat and what i'm gonna do now is i'm gonna go ahead and do the login flow okay so login flow is inside of app.js so here right so we're gonna firstly create a we've already got a user here we've got the select user so what i can do is i can actually use this i can use the select user so i'm going to pull the user here and i'm going to say const user equals use selector and this is from react redux so we need to go ahead and import and then i need to go ahead and say select user and this will import it from features user slice so we're basically going ahead and pulling the user so by default the user will be no okay these are going to be no by default and that's going to go ahead and that's going to give you um nice and somebody says rzo movie trailer says this is cool glad you're enjoying it dude and if you are enjoying and you're still with me smash the thumbs up button almost at 600 likes um so we've got imessage over here and what i'm going to say is if you're logged in so if there is a user if the user exists then what we're going to do is i'm going to say then you render the app so then we render it otherwise yeah i want to render something h2 saying you need to log in okay you need to log in uh we are going to have a logout flow i just made it very discreet in the previous uh example but for example if we're here all you do is you click on the actual icon at the top and it will log you out and that's pretty much how it works i'm just gonna log in again there we go going back boom um all right so there we go uh you see now what it does is it says if there is a user it will render the app otherwise if there's not a user so by default there is no user you need to log in right so this is a good place where we need to be right now so now we're going to build the login page so rather than saying you need to log in i'm going to create a login component okay i'm going to go ahead and create that now so go here and hide all this stuff i'm going to say login.js and i'm going to rfce boom got it and then here we're going to say import login.css and i'm going to go down here to div i'm gonna say class name equals login right and then inside of here we're gonna basically go ahead and build our login but firstly before i do that i'm gonna go ahead and say login.css and then i'm gonna go back to my uh app.js and here i'm going to go ahead and import login like that and now we should be rendering from our login components so i'm going to go here and say login.js um yeah that interpolation is is crazy right so so that's actually called a ternary or uh ternary operator where you can have that sort of if this then that right you can have that as well so that's really really handy to go ahead and use that um so here we're going to have the login login page i guess right so now what i'm going to do is i'm going to actually going to have a login logo so i'm gonna have a login uh logo inside of here i'm gonna have an image the image source i've actually got an image over here this is just pretty much a imessage image so i'm just gonna go ahead and pop that in boom it's a huge imessage uh image and then i've got a h2 underneath it uh h1 which is going to say imessage right and this will pretty much be down here so you can see it says imessage underneath that i'm going to have a material ui button which says sign in okay uh it says button is not fine so i'm going to do my little trick and then it says imported and that trick is control spacebar and it will go ahead and pop that up so now we've got a nice little sign-in button at the bottom okay so first thing i'm going to do is style this so that way it looks a little bit more presentable so let's go to our login.css and then let's go ahead and do login.css so down here i'm going to do dot login i'm going to say display grid because we're using a grid css grid here i'm going to show you guys a neat little trick so if i do place item center this will actually position everything in the center but you can't see that right now because it's not actually showing much so i'm going to go ahead target the inner div the image which is this huge thing object fit contain keeps the aspect ratio when i resize it and height of 150 pixels makes it small right if i get rid of this display grid now see everything goes to left so if i do this it centers it on the on the screen right so the next thing i'm going to do is i'm going to say a height of 100 view height this will go ahead and make use of the full screen and then i'm going to say a width of 100 right so width of 100 all right i actually don't think i need that but i'm going to keep that for now uh and then what we're going to do is i'm going to go and target that button so i'm going to say target the login button right and i'm going to say width of 300 pixels i want the button to be a little bit bigger i'm also going to give it a background color and this is going to be the imessage blue so boom save that and then we're going to change the color of the text to like a more subtle white i'm going to say the font weight should be 800 as well so i'm going to make a little bit more bold um 800 boom and let's do that save and there you go looks pretty good right now when we hover over it i want to get a little bit more attractive so right now you see it kind of goes white by default we that we can't have that doesn't make sense i'm gonna have it invert essentially and have the color be blue and the background be gray so that looks a bit more cleaner all right so this is all working pretty well okay so alexander says why grid and not flex because that's a really easy trick this one so you can just position the entire container um centrally so it's actually a very very neat thing if you need to do something pretty quick in this case i just wanted to have it very quick and simple in the center of the screen so i went ahead and used css grid right so now what we're going to do is we're going to implement the login functionality so it's a lot easier than you think right because we've set everything up correctly so if you code well guys code something well and then you'll see building on it and all that sort of stuff actually gets very simple because it's not hard to add to well-written code right it's not hard to add to the extensive like extensibility maintainability of while we're in code so with that said what i'm going to do is i'm going to create a function called sign in so i'm going to say const sign in takes an event but we don't actually care about the event so we can ignore that and then i'm going to go ahead and say i need to import the authentication module and the provider from firebase our local firebase that we had earlier right and then if i go down here what i'm going to have is when i click the button i want to basically trigger my sign in function okay and i'm going to make the um yeah we have that so now all i need to do is say auth dot sign in with pop-up okay i go here and i say provider because we initialize this earlier and i don't want to do anything more than that all i want to say is catch if there's any error i'm going to get the error and i'm literally just going to say alert error dot message that's what i'm going to say right alert error.message and that will go ahead and help you out um so if i go ahead and refresh um now if i click sign in boom i get a nice little pop-up and this should be a google authentication sign-in there we go look at that everything's connected if you guys think that's cool hit the thumbs up button um that would be amazing to see that number go up to 600 likes we're close we're close i think we can do it um that's awesome stuff okay so with that said now we're still at 250 concurrent viewers that's amazing thank you so much guys um i'm going to have it so now if i look say for example if i've closed it early you see an error occurred so it says uh the alert got caught here and it displayed the message which is what we want okay so now what we need to do is whenever a login event action occurs inside of app.js i'm going to have a listener so a user factor is what we're going to use here so a use effect i'm going to import it from react and then here i'm going to write the use effect use effect is a piece of code that fires off when the component loads and if you put anything inside these square brackets it will fire off again when that changes for example if i had the user in here every time this would fire off once when the app component loads as well as whenever user changes in any shape or form okay so here what i'm going to say is i want to import the authentication module from our local firebase so i'm going to go ahead import it and then here i'm going to say auth dot uh on auth state change this is like listening now for authentication changes and i'm going to say when any sort of change occurs go ahead and use the auth user so i'm going to do that and i'm going to say if there was an authenticated user then the user is logged in else the user is logged out that's basically the logical flow and then what we're going to do is we're going to get the dispatch remember earlier on i drew that diagram uh whenever we want to add something into the data layer or the redux of onion that i described earlier what we need to do is we need to use the dispatch so here i'm going to say use dispatch um and then i'm going to import it from react react redux so use this patch all we say is we say const dispatch equals use dispatch this gives me like the gun to go ahead and fire a change into um i'm just checking the chat okay yeah goes ahead and um yeah so now we get the gun to go ahead and and fire changes our actions into the reducer so that way it can change the data so now we've got that i'm going to go ahead and import the login and log out action from the user right and then what i'm going to say is if the user's logged if the user is logged out i'm going to say dispatch a logout event right and then if we go to our user slice the logout event simply clears the state.user to know again and then here i'm going to say um someone's asking about kaio kailan uh dude i'm not going to speak about java on this channel right now okay so it's all javascript okay so um what i'm going to say is dispatch login so dispatch login and i'm going to pass in a payload which is an object and here i'm just going to pass in the following we'll say uid is the authentication user so this is what comes back from google so we're going to basically we're basically creating an object for the user we're saying that he should have a photo or she shall follow the user auth user dot photo url and this comes back from google authentication let's say an email and this comes back as auth user.email and then we also have the display name so if they have a name on google for example google collects your name when you sign up we should be able to get that from here so we say auth user dot display name okay save that and now you can see we get everything here so with that said now what should happen is we should see if i could have done this correctly if i go to redox now we should see so it logged me so right now for refresh so i log out because we're not logged in right now so you see inside of our reducer inside of our state we see actual user of no which is why i see the sign in screen if i click sign up notice pay attention to over on the right hand side of the screen and if this works go ahead and smash the thumbs up button okay um let's go ahead and click on sunny let's angle gmail so it should go ahead and say user login so there you go it dispatched a login and look at that guys it actually logged us in so that's dope and everything worked as we wanted it right so that's awesome i cut that one up earlier so that's working as we wanted it okay so and you can see now if i inspect the action it's in the user slice and it was the login action okay now the payload for the user was the user id the photo the email and the display name right so everything works on that front and then you can see the diff is also really really handy so you could do your auth user but inside of redux uh it comes up with a serialization issue because you're trying to conveniently sort of serialize that that object so you'll get an error if you do auth uh user or user um but you can that's why i've just stripped out some of the values but there's a way of doing it in that in that way yeah so now you can see um inside the state the user is populated right so any if i was to refresh look what happens it refreshes and it dispatches the login and it dispatches login so persistence is here right so that's awesome so with that said go ahead and smash the thumbs up button because we're almost at 600 likes and the log out functionality i'm going to implement right now for you guys so to log out what i'm going to do is i'm going to have it firstly let's actually go ahead and pull some information from where we didn't need it right so here at the top where we have the avatar so let's go to our sidebar right now inside the sidebar we have the avatar at the top here now i'm going to go ahead and grab the user i'm going to say const user equals use selector and i'm going to say select user which is my selector that i created earlier and i've done all the appropriate imports i needed now with the user what i can do is i can go here and i can say source should be user dot photo now watch what happens boom grab my google login i think that's dope i think that's so dope i think this is getting pretty cool with five likes away from 600 likes pretty sick right when i click on this i want to log out so you're probably wondering oh there's there's a lot of custom coding not really dude what you do is on click and i here i'm going to say i'm going to import the authentication module from firebase to my local firebase so here uh some people are saying how can this be for beginners you're going so fast remember guys this is recorded okay so this is not at the whole point of a live stream it's not meant to be so you can completely like sit alone and type with me it's meant to be so you can enjoy the video watch it you know just enjoy seeing some live coding and things like that and then you can pretty much go ahead and uh pause the video and do it at your own pace afterwards when you watch it back because remember if i was to sit here and wait for everyone that's watching to kind of catch up it's not gonna the video is gonna be a lot longer and a lot less people are gonna find value from it so don't worry it is it is a beginner friendly video you can pretty much go ahead and follow this from start to finish as a beginner and we have plenty of people that have done it and they land their job so quit your complaining let's go all right so here what we're going to do now is i'm going to say an anonymous function auth dot sign out right and then i'm going to say save it and now what we can see is i'm going to show you guys proof of something so i'm going to go here and redux and now you see it signed in so if i go ahead and refresh this is a good comment by the way ayo says for beginners see three to four bills continuously and you'll get the pattern dude exactly exactly that like keep doing that and you're gonna go ahead and see the pattern and it will make a lot of sense right so uh what i want to show you is yes so it dispatched the login up here right now if i go ahead and click the uh the avatar it dispatches a logout action which went ahead and reset the user move my face out of the way it reset the user to no right so now inside the state you should see the user is now no okay so that's what that went ahead and did right so what i'm going to do now is i'm just going to make this actually a little bit smaller so you guys can actually see that bit easier right so there we go um i mean i'm tiny now that's the only thing we're going to make it a little bit bigger i like it it's too small okay so now let me go ahead and sign back in yo athava he goes my mind is blown at the progress i just see right now the blog may go over 5k when i wake up hey let's go dude we just dropped a crazy clever programmer vlog on medium authority go ahead and feel free to drop that on the live chat right now uh and everyone can go ahead and check out the blog when they got a minute there we go so now what we're going to do is it says the channel name and we have the messages right so i guess the next step right now is we want to have this chant these channels right here populated as well as we'll get these messages built out and so forth so for the channel names what we're going to do is these channels are going to not be hard-coded so right now they're hard-coded three sort of things are being popped out right here okay uh also this is a good question do you think react is the way to go on web development i mean is it the future 100 the demand is to the roof and it is really getting busy also we just hit 605 likes thank you so much guys amazing stuff uh love the positivity today and yeah like let's keep going let's try and hit like 700 likes i think we can do it i think we can hit 700 likes um nice that's dope dude also a darva just dropped a link to that 50 page plus amazon complete read through breakdown inside the comment section go ahead and check that out in a sec or maybe open in a separate tab and pretty much you can watch that and read that afterwards but amazing stuff by atarva team is absolutely crushing it man it's insane team is crushing it so here what i'm going to do now is i'm going to have the sidebar.js right and the first thing i'm going to do here is have a piece of state to keep track of this the chats so i'm going to say const charts equal and then set chats and i'm going to say use state right and it's going to have an array empty to ready to begin with now when the app when the sidebar component loads i'm going to use a user effect to fire off piece of code so boom like so right now in here i'm going to have empty brackets for the dependencies um so it's just going to fire off once all right tommy o says i love your cone streams dude i love you guys man i love the support you guys give us it's the only reason i carry on doing them so that's really really awesome to see that then what i'm going to do is i'm going to import the db from our local firebase and i'm going to say db.collection so i'm going to create a collection and inside here we're going to have a collection of chats right and i'm going to say on snapshot so it's going to be a real-time listener which gives us a snapshot of the database whenever anything changes right now when that changes i'm going to say set chats right so as soon as anything in the database changes we get a snapshot and when we get that snapshot back i'm going to say okay go get the snapshot get the document inside the snapshot this is a nosql structure right so if you don't understand what i'm talking about here it's a no sql structure inside of a database maybe watch some of the previous videos watch some of the builds you want you'll understand what's going on here but you can see docs.map and then we're going to say doc and then we're going to say it returns an object right and this object is going to have an id of doctor id and it's going to have the data inside of it as doc dot data now save it okay and it says use date is not defined so we need to go ahead and import use state save it there we go and now we should have chats being pulled in from the database right so here rather than having three hard-coded values what i'm going to say is i'm going to have chats.map and for every single chat what i want to do is i want to render out a sidebar chat boom okay i'm going to render out sidebar chat [Music] and there we go nice and then what i'm going to do is where we get the sidebar chat i'm going to destructure it right so remember we actually create an object here of id and data which means i'm going to go inside here destructure this and say this should have id data right inside of the data we're actually going to have a chat name and this will make sense in a second guys bear with me okay and this will all make sense right so so now what we're going to do is we have the sidebar chat okay so what we're going to have is i'm actually going to pass the id as the key i'm also going to say the id goes through as a prop and then i'm gonna pass a prop called the chat name through so we're gonna say chat name equals chat name and then inside of sidebar chat this will take some props and then the props we're going to destructure and say get id and chat name and then instead of saying channel name this one will now say chat name like that and that should be pretty good okay now here what you should see is it's empty right this is good now when i click this icon over here i want to do a little prompt that gets popped up right so how do we do that so i'm going to go ahead and go to the icon i'm going to say on click right i'm going to create a function called add chat right and then i'm going to go ahead and create the function here when i say add chat and this is an anonymous function and what we do here is i go ahead and say db dot collection chats and basically what it's going to do is it's going to go ahead and add a chat right and remember we added the chat name and basically what i'm going to do is we need to collect like a pop-up should come up so right now if you see in this one we have a pop-up that comes up all right so it says please enter a chat name now hey atharva says the background music and the light somehow sink and like fire that's sick dude thank you so much uh thank you thank melbourne for that everyone went ahead and bought me that stuff so amazing stuff um so all the asynchronous stuff and promises are handled by firebase right sonny yes so firebase handle a lot of the sort of back end headache and the sort of sockets and stuff like that so you don't actually need to worry about a lot of that headache when you're doing this right so here we're going to go ahead and say const chat name equals prompt right and this prompts the user for an input and what we're going to say is please enter a chat name all right please enter a chat name and then what we're going to say is if there was a chat name so we're going to kind of protect the user if there's a chat room then we'll do this database call right and then we're going to basically go ahead and say say it to the chat name now this will actually go ahead should do it for us so now if i go ahead and click let's go ahead and say youtube boom real time that was sick and it worked in the first try hey my best friend jay's in the house sunny on a solo react video got a smash that like for a solo run amen brother that's it we're doing well we've got quite a few viewers still on we've got 243 people across youtube and facebook right now absolutely smashing it and also dude i don't know if you can see the lights upgrade the cell it's looking good man um there you go so you see we've got that we've got youtube and let's just go ahead and type in something like apple fans or let's just say papa react papa react squad there we go boom oh man oh i kind of went off a bit but you know it's fine um it's going to be responsive up to a certain degree um so that looks pretty good okay and then what we're going to say is we are going to go down to the uh so we've done that bit now so what i want to also do is i want to protect this against a sort of scrolling issue so i'm going to go into my sidebar.css and for the sidebar chats so inside of here so i'm going to go into my cybor.css now for sidebar chats we've actually already added the overflow okay that's good so we will protect if we do this but it gets sort of spammed right so right now it's room based this chat is going to be room based and the reason why i donate room based is because it's going to be easier to uh go ahead and have you guys interact with each other okay now why is it not fetching the photo so if you know it's inside the actual build this is the last person who've sent the message so in this case it'll be kazi and then if i go ahead and say yo what's up guys notice how it'll be me and it'll say yo what's up guy with my last timestamp there you go see that that's why it hasn't done it just yet so we need to implement this part the messages and then i can go ahead and connect the last message right here okay so what we're going to do now is i'm going to have it so when i click on one of these rooms i go ahead and dispatch some information into the redux store about what channel we're in so in order to do that first i'm going to go into my features i'm going to actually going to add a whole nother slice of state so i'm going to copy and paste my user slice i'm going to rename it to chat slice okay so chatsize.js and then here what i'm going to say is i'm going to go ahead and change user slice all of this stuff to chat i'm going to go over here and double check so chat chat in the beginning this is not going to be this is going to be chat id and it's going to be chat name right and then it's going to be um we're going to go ahead and say set chat right right there's only going to be one action and this one we need to export it so we can use it outside and then i'm going to go ahead and say when we get this action it's going to be state.chat id equals action.payload.chat id copy that line and i'm going to go ahead and refactor this to say chat name oh man i messed up i'll show you guys a quick trick come on d if i do chat name there we go boom save it uh oh to do that uh keyboard shortcut if you highlight a variable and you do command d you see it highlights all the possible ones when you get multiple cursors right so that's pretty sick and they'll allow you to be very fast with your coding now we have the set chat being exported so the next thing we want to do is actually go ahead and create selectors to pull that information so i'm going to make one called select chat name so select chat and the section i need just to select chat name and this goes into our state into the chat slice and it gets the chat name i'm going to copy and paste this and i'm going to go ahead and say select chat oops select chat id i'm going to go down here and say select chat id done right so this is looking pretty good right um so atharva says a man build with actual socket i o can also increase the possibilities and include functionality so you can do all of this dude with firebase so don't underestimate firebase um you can have all of that inside of firebase and it'll be a lot easier to build it um so you don't need to go ahead and like sort of overcomplicate by introducing one you you can introduce some ones that can do it that way and have like the skype functionality and things like that but you know only do what you kind of need to do unless at the point at which you need to do it so what i'm going to do is now connect this to the store so if i go into my store copy and paste there we go now we've got the user reducer right so here i'm going to change this to become so i'm going to change this oops i don't want to do that i'm going to go ahead and change this to become oh man overdone i'm going to go ahead and do user it's going to be the chat reducer and i'm going to copy paste and this one is going to be chat reducer chat reducer done right so loads of people saying why don't you upload react native tutorials because i'm literally dropping a react tutorial for you now dude i'm i'm trying to do as much as i can for you guys in terms of value based stuff also profit javascript is on fire right now we have a lot happening inside there so um yeah if you want to get the most from us make sure you subscribe make sure you hit the like button and just stay tuned we will be dropping as much content as you can possibly imagine so don't worry guys it's coming now to check that we've correctly linked up everything inside the db what i'm going to do is open up redux and we should see inside the state which is the user and we should see the new chat slice so if you get this you're pretty good at this point right so imran says hey sunny just amazing bro keep going appreciate that dude thank you so much um now what we're gonna do is for the i am a message so right now um i don't know why i'm not pulling the uh if i'll go ahead and say test uh oh yeah so right now actually if i go ahead and refresh you see it's not actually saving it because what we need to do is we need to go over here so if you actually go ahead and inspect and do the console i'll show you why because we haven't actually set up a firebase yet you see here you get this long could not reach for cloud firestore back end because we need to initialize it this is live right now it they said is this being premiered or live this is live cloud firestore we go here and then we're going to go ahead and say create database i'm going to start in test mode and i'm going to go ahead and click next i'm going to go ahead and do my about this enable this will go ahead and set up the firestore database so whoa man i'm not gonna read um holy okay right so now what we're gonna do is um so pedro to answer your question that's an arrow function the essex arrow function um same said just different syntax right right so so many people are saying at devtools is anything to see redux yes i literally just showed you guys so redux dev tools um you need to install the redux devtools but this is all redux right now this is relaxed actions this is redux state everything is redux yeah um thank you so much ronit he says oh nice my man that's freaking awesome really awesome content bro appreciate it thank you dude all right so now what i'm going to do is if we go ahead and add it in now so i'm just to visualize this for you guys i'm going to go ahead close this up and you guys are going to see now if i create a room and then i say like let's call it youtube enter and if i show you guys the firebase um so now i created a chat create the chat name youtube dope okay another one called cp team [Music] look at that you see in real time it created one called cp team right now if i was to go ahead and delete this one look on the right yeah in real time boom that's what you call snapshot that's the snapshot that's kicking in right so i'm going to go ahead and do another one so let's go ahead and say team cp because it sounds bad there we go created there boom but it's real time sync between the app and the back end so that's really powerful now we're gonna basically go ahead and create the messages okay so for the messages what we're to do is we're going to go to chat.js and here in chat.js right now we have everything hard coded okay so in order to fix this what i'm going to do is i'm going to go ahead and inside the messages i'm actually going to create a message component right so the message component so here i'm going to go ahead and get rid of these and for the message component i need to create a message component it's also message.js rfce and then i'm going to go ahead and say import oops import message.css and then i'm going to go ahead and say message.css so if darva says i love the realtime function i'll let you firebase because you don't need to refresh the client to make the changes visible exactly and that's very important imagine you had an app which is saying when your order is ready you need to be able to go ahead and do that right so that's going to be very important and that's what firebase pretty much fixes for you outside out of the box um so very very powerful stuff um okay so then we're gonna go ahead and say uh for the message so each message is gonna take a uh two parameters right it's gonna take contents and it's gonna take uh so i'm gonna destruction i'm gonna take an idm and contents right and then the message itself is gonna be it's gonna have an avatar all right so i'm gonna go ahead and say avatar auto import from react material ui and then we're going to have a p tag with the message inside of it so this is a message uh jay good question dude he goes why not use module.css you can separate css for each component very good question and yes what that does is it prevents you from having naming clashes but for now what i would say is when when people are learning and things like that so yes module.css is really good um bem is just very quick for when i'm building also there is a benefit to them for example like if i go into my login right and i basically say i'm new to the programming like new to whatever i'm coding if i do command shift f and i do this it will actually give me the exact location of that and then it will actually find it in the css whereas if i was using uh module.css it's kind of difficult but it's not difficult by it the truth is module.css is better yes but bem is a really good naming convention to to practice and it gets you very good at it basically breaks the bad habit of naming and then i would say progress to module.css so really really good um question bro uh aegis says let's go nice keep the energy high awesome stuff thank you i guess um right so this is a message and then we're gonna go ahead and create a small tag and here i'm gonna have a timestamp okay and then i'm gonna go back to my chat and then here i'm gonna import message from the top so there we go you can see this is a message right now i'm going to go ahead and paste this a few times we should have three messages popping out nice now inside the message i'm going to go ahead and pull out message.css i'm going to pull this underneath and then i'm going to go ahead and pull out my message so i can see here right now for the message i'm going to say dot message uh oh yeah some people had a comment them inside there inside the return block i remember that um display flex uh save it and everything goes into a row you don't see it because this needs to be class name message there we go and then i'm going to say align item center because it should go in the center i'll say position relative because we're going to do some absolute positioning inside of it with another component i'm going to say width should be fit content because we only want the bubble to be as big as it needs to be i say justify content space between because i want it to be sort of spaced out as much as it can be i'll say margin of 15 pixels so around remember margins outside the component uh padding is inside the component now the next thing okay the next thing we're going to do is we're going to say the message and then target the p tag inside right so the p tag inside there we go and i'm going to add a background color font size medium padding 15 pixels border radius 20 to get that rounded effect margin 10 pixels to add some more separation around the back around it and then a margin right pushes it all the way to the side okay for this one now what i'm also going to do is target that small tag i'm going to say go ahead and target small tag gray position absolute but because the parent is relative it actually goes ahead and stays relative to its parent and then it's bottom minus five and this goes ahead and adds a little timestamp like this so very clean right now what if i want to have it so that we have a sender as well so we'll figure out the sender afterwards so the blue message so if you send the message you want to be this side blue so i'm going to show you guys how to do that in just a bit but right now what i'm going to do is i'm going to have it so that when you enter it's actually going to go ahead and send a message into this right now okay so let's go ahead and do that first so the way we do that is firstly i need to have a keep track of all the messages coming in so inside of chat.js what i'm going to do is i'm going to say const messages set messages equals use state okay and then i'm going to do this and then i'm going to go ahead and say um right so before we do this actually what we need to do is we need to fix a problem we need to fix one so i need to have it so when i click one of these it changes this to the channel right so if i click on the sidebar let's go to the sidebar dot js we have to solve this issue first so cyborg.js what i'm going to do now is have it so that when i click on the sidebar chat component so inside the sidebar chat component i should have it so when i click on that it goes ahead and dispatches an action so i'm going to show you guys how you can do this with an inline function so here i'm going to say on click i'm going to do an inline function and i'm going to say dispatch and i'm going to say dispatch and we'll do the imports and stuff afterwards i'm going to say set chat so this is a action that we set up earlier inside the app inside the chat slice and this will actually go ahead and take the chat id which is the id we passed in as a prop and it's also going to set the chat name as the chat name as a prop which came in as prop this means that we basically go ahead and set this up inside of our redux store so that way we can access it outside of any other place right so here i'm going to say const [Music] dispatch sorry dispatch equals use dispatch import it get rid of this boom um cesar says it's amazing how you know what you need to do step by step i understand how to do it myself with the project from scratch by scratch because i get lost by myself thank you sonny it just takes practice dude i remember in the beginning i used to be like freaking out and like panicking everywhere it just takes practice you'll get used to it honestly don't stress man uh just don't give up that's my main advice um i just broke something um line 13 oh yeah chat name boom boom all right one second guys we've got this we got this dispatch an object that's the end of the dispatch that's the end of this okay unexpected error god damn it there's always some kind of error when we when we do this stuff so let me go ahead and check something quickly the dispatch save it boom okay and then we've got the dispatch itself we've got the set chat we've got the id okay this is because of the following [Music] okay there we go and then i'm gonna say const dispatch equals use dispatch these brackets are ruining the show honestly dude yeah it's sometimes the bracket just piss me off man yeah so it comes dispatch there you go and then what i'm going to say is const chat info equals search envelope so this will be important for afterwards actually but we'll do that later so set chat is not defined line 13 this is because we need to go ahead and import this action we set that up earlier inside of our chat slice and redux and now what this should do is when i do this it will dispatch an action in redux so if i go down here you should see look so fresh piece of state so if i click team cp it goes ahead and sets the chat and it changes the chat name so remember by the way changes the chat name to team cp and chat id to the chat id right if i click on youtube it changes it so dispatch an action change the name to youtube and the chat id to the id that's based inside of firebase now that's very important because we're going to use that afterwards to go ahead and fetch the correct messages for this component so it's very it's very cleverly connected right so once that's done now what we can do is we can go ahead and actually pull that information in at the top right so we go ahead and go to our um let's go to uh chat.js and inside of chat.js now what i can do is i can use my selector so i can say go ahead and say chat name equals use selector i could say select chat name and i can pull this in and that's a special import so let's pull it in over there and then what we can say is rather than having channel name set over here i can actually go ahead and say channel name and now it says channel name is not the file oh sorry chat name chat name goddammit yeah somebody said yeah jay said you missed an open bracket yeah i know they found it in the end so now if we click youtube team tp hey see it changes at the top and we also have access to the id right so now what i'm going to have um awesome and you know foreign how did you manage programming fitness and lifestyle also dude ask nicely okay when you're at 22 25 uh 22 to 25 age um how do what you mean how did you manage you just do it man just do it stop complaining or finding excuses you literally just make it happen like if i don't really know the question like how did you manage to do that at that age like what's stopping you from doing it at that age that's what you need to kind of reset your your sort of mindset around it um okay so then what we're going to go ahead and do is have it load the appropriate messages right so this is going to take a two-step process so the first one is we go into our chat.js and we need to create a piece of state for the messages to keep track of what's going on so messages set messages okay and i'm going to say use state this is going to be an empty array um says how are you sunny i'm good dude how are you sorry if i pronounced the name wrong um yeah we're going to create a user fact all right i'm also going to get the chat id so i'm going to say const chat id equals use selector use selector and we'll say select chat id right right so now what i'm gonna do is i'm gonna go here and then i'm to go ahead and say so that's all working well now the chat id is there so now i'm going to go to the use effect and basically use effect again there's a piece of code that fires off once when the checkpoint loads and also whenever a dependency inside these square brackets changes for example in this case we need this to refresh every time the chat id changes because i'm going to need the chat id here so i'm going to say if a chat id was selected so we only get selects one when i click on one of these options then i would populate the store with a chat id when that happens i'm going to go ahead and say db dot collection db.collection i'm going to go inside of um hey tzuyler says i think i'm going to be on this channel from now on nice dude appreciate that so we're going to say db.collection chat and then we'll say doc and then the doc is going to be the chat id right so we're actually going to go into that chat and then we're going to say go into the collection inside of that chat and access the messages so essentially what we're doing is we're going inside the chat room so inside that inside this chat room we're going to go inside the collection of messages and then i'm going to say order by because we're actually going to set up a timestamp so i'll say order by a timestamp and then i'm going to say order by a descending timestamp so that'll be for a bit afterwards um jay says handling the chat and coding a goddamn imessage from scratch at the same time it's not an easy feat pure talent appreciate that dude and then what we're going to say is on snapshot right now snapshot is something that we do when we want to get a real-time feedback so if anything changes inside the db so we're going to use set messages so the hook and then we're going to go ahead and say snapshot.docs.map and then we're going to say doc right now for every single dock that comes back i'm going to map it to a object and this is going to map to the doc.id and also the data god's sake i hate that thing data dot dot data okay so i was like like that and what this is going to do is i know that might be a like a mouthful right here but what this is doing is it's basically when i click on this it's finding this inside the db this room all the collec the messages inside of collection there's grabbing them and storing them inside of the messages array okay um go back and sing says this is this is amazing attended it for the first time thank you so much dude um yeah glad you guys are enjoying this and again we're almost at 700 likes right jugutha says wow sunny is the best in react thanks i learned a lot from you appreciate that dude thank you so much for the kind words um let's keep on going strong okay so now what we're gonna do is we have the messages coming back right so here rather than having the messages hard-coded i'm gonna say for all of the messages go ahead and map through them and for each message i wanna render out an implicit return so an implicit message return and then we're going to go ahead and say render out a message and in that message should have a key with the id and here i'm going to destructure the what comes back for every message i'm going to get the id and the data and then we're going to pass in the contents of the message and that's going to be the data and the id is going to be the key okay and that will be that and then save it and now you should see if i click it that's pretty i know it doesn't look good but it is correct it's working trust me on that it's working right um you dating says i love you man you're great uh we have a sauron saying i love it sure up says um you're one of the best cheers of react after bad love from pakistan thank you so much dude um set messages and on snapchat in one command until now they were separate yeah it's really really powerful to write like that right so the next thing we're going to do now is this is actually sort of when i click this it's going ahead and fetching it right so it's fetching the messages but we need a way to push messages inside right now so i'm going to go ahead and do that as well so right now earlier we set up the input map we mapped the input sort of piece of state to our input field over here and then we had it map on the on change so as i type in down here pretty much goes ahead and stores it inside of our local state now when we we create a send message we said e dot prevent default to prevent the refreshing from happening and then we said firebase magic so this is where the firebase magic happens right so i'm gonna go ahead and say db.collection i'm gonna go back into the chats right the collection of chats i'm gonna go into the doc dock and the dock here is gonna be the chat id and then i'm gonna say go into the collection of messages all right and then what i'm gonna say is add right so go into connection messages and then i'm going to say add and at this point what we do is we pretty much go ahead and add what we need so we're going to add a timestamp now the timestamp is going to be different for everyone for example if you're in india or if you're in la if you're in new york your timestamps can be different to me in london so what i need to do is i need to go ahead to the top and say import firebase from firebase okay so import firebase from firebase not the local one the actual firebase and here i'm going to say firebase.first right which is a function i'm going to say field value no window function so we're going to say field value and then i'm going to say server server timestamp and that's a function this will go ahead and give me the time of the actual server so that way even if you sent it based in london even if you sent this and um hey ismail saying london baby thanks for doing this on a friday night it's a good way to end your friday night nice guys awesome stuff um bala ganesh says thank you so much um for providing the valuable information keep inspiring and motivating us thank you so much dude um messed up the camera a little bit there um but then we've got the time stamp so regardless of where you're based in um nice he says dude i see you in the projects more than anything else during my day i don't give up do you know already what the next project will be react nate have a bunch of stuff happening we've got loads of stuff coming guys just keep subscribed and keep an eye on my instagram go ahead and follow me uh over here if you're not following me to keep track of when we drop the latest and greatest videos okay so message here i'm gonna say input and then i'm also to give uid and this one is going to be user so again and now i need the user's information so the message contents are going to be here we're going to pull that from the input okay but i need the user who actually sent the message so in order to do that i'm going to get the user i'm going to say select use selector sorry use selector and then i'm going to say select user so this is my select user and then i'm going to go ahead and make sure this is import okay we've already imported it um so soham thank you so much for the kind words bonjour attacks enjoying it nice stuff guys um so i'm gonna go ahead and save that and then what we're gonna do is we're gonna go ahead and have it so that it pushes the um we've got the message here but i've also wanted a bunch of other things i want the uid the photo the email the display name all from the user item right so what i do is i go uid equals user.uid so remember when you log in we populate the user inside the redux store we just use the selector to go ahead and grab it from the redux store which gives us the user object and that's how we go ahead and get the user that we're going to push in for every single object that also gives us the photo okay now borax says you're like a magician thank you dude appreciate it um [Music] good positivity right um i love this because i don't find it coincidence on my motivation i've just told me don't give up on something you can't stop thinking about every single day exactly exactly keep doing what you love right so that with that said now what we actually have is a really nice really nice system which should be working okay so let's go ahead and check it out so firstly i'm also going to go ahead and update the message itself before we do that so everything should come in clutch and work together right so first thing i'm going to do is the contents actually have a bunch of things inside of it so uh my girlfriend is obsessed with proper react do you know do you guys know who papa react is who the heck is proper react hey i love her honestly and she goes i miss him she guys she misses out on time with me for these streams so smash the thumbs up button right and uh and show some love and support for that all right so over here i'm going to say content i'm going to destructure right jay goes oh the og arrives this is where it comes up um she goes guys show some love he's doing so well let's tap that like button guys we're at 660 likes can we get to 700 i think so i think so right um so now i'm gonna go ahead and destructure the contents right so over here i'm gonna say timestamp when i say display name i'm gonna say email so i'm breaking it apart the object right now i'm gonna say message photo and uid right uid save it and then it says line seven is an error no what do i do yeah i need to close this and then oh what the hell happened here so we've got this boom boom there we go all right um i think we can get to 700 likes i think we can uh petition to get marvin next to sunny's uh in the next video a hundred percent i think we can get that one in this video i'll teach you how to code guys we can do that right um and that'll be awesome uh and the one here is actually papa and no we don't talk about angular here guys we hate that all right so uh yes papa and mama together yeah she's gonna be mama react guys so get her on the channel early we're actually gonna have a we're actually thinking of starting a youtube channel together so that would be fun um right now guys with that said now the avatar the source for the avatar is actually going to be the photo that comes through right so the photo that we destruction uh there we go um so inspiring man love from bangladesh by the way where are you from sunny london dude based and born in london right now for the p tag i'm gonna say this is a message rather than that one actually dropped a dynamic message just being pulled in um then we're gonna go ahead and say uh timestamp so for the timestamp you need to do some clever passing right so i'm gonna go ahead and drop a snippet in here and i'll explain what it does it says create a new date from the timestamp optional training protects it against because there are times where it's asynchronous and it's pretty much gonna have a uh it's gonna have an undefined value so you protect yourself with optional training you say pass it to a date and then you're gonna basically go ahead and format it to a locale string uh so we can go ahead and save that and i know it seems like oh my god he's doing so much but it will make sense in a second right uh bonjour tech says you guys are great colors and are great humans nice family appreciate that dude thank you so much um this would be dope next video teaching about coding and how to go by damn wouldn't that be fun more like melbourne bar going code and learn with me react from papa wrap from scratch so basically teaching up from scratch yeah i think that'll be fun honestly um rzo says you are the best program in the world thanks brother for this helpful information i appreciate that dude um i'm glad you're enjoying the stream all right so now what we're going to do is we're actually going to go ahead and have the email so uh the final piece right here so i'm going to actually go ahead and say we're going to test it right now right so if we if this works right this is where it gets tense right if this works right so i haven't actually gone ahead and sort of checked everything out but if this next bit works i want everyone to smash the thumbs up button and get this video to 700 likes all right so i think what we need to do is uh we need to go ahead and get ready for this right because i'm gonna pretty much i haven't tested this i'm just gonna go ahead and see if it works in one go we change so much code right now and i think it's gonna work right i think it's gonna work but you know how these things happen all right so i'm gonna go to message i'm signed in right and then we're gonna go ahead and say yo this works you think dot dot dot all right so suspense right everything's gonna happen as soon as i hit enter on this is it gonna work right all right see how it goes albiola says the best programmer i have ever seen jay goes let's go ottawa's already coming in with the suspense music right i think we can do it i'm going to hit enter and we can see if it's going to work hey [Music] see what and look at that guys it pulled my picture in and it pulled the message in even has a correct time stamp right so that's pretty sick right everything works like that and now if i go ahead and just say like abc one two three that's that boom works nice right so that's though we've got everything working i think we should all go ahead and hit that thumbs up if you haven't already alright again i think we're gonna hit 700 very soon so that's dope guys now what we're gonna do is actually have it so that if you're the sender then it's gonna go ahead and make it that blue message so it's gonna be like this right if you're the sender it's gonna show you a blue message um so we're gonna go ahead and do that right now so inside of message dot css i'm going to go ahead and add the following logic so right now we have message over here so i'm going to create this into a more i'm going to do string interpolation here i'm going to say if the user.email so i need to go ahead and actually pull the user in so i need to say const user equals use selector select user all right um yeah yeah and then what we're going to say now is we're going to say user if the user's email is equal to the email address that comes in i change it to the other music because it's easier to focus with that one all right then we're going to go ahead and have uh yeah so this is no the question mark is if else that's if else what we're about to use right now but the question mark down here um is actually saying optional chaining so if this for any reason is undefined it doesn't crash the program it just handles it uh elegantly so it's coming something called optional chaining very very elegant solution to use um but here what we're going to do is we're actually using we're using tannery here so actually we're not going to use tennis we're going to use a direct right but with the ternary you can say if it's true then say this else say this right so that's the ternary but what we're going to do is we're going to do a direct sort of conditional so we're going to say here apply the message sender class if the user's email is equal to the email of the message right go ahead and save that and let's go ahead and refresh some reason that's not refreshing there we go and now if i go ahead and click into this for example the youtube chat it loads up the youtube message and if i go ahead and say this is a test now you guys can also see if i go into different channels it pulls those messages which is dope right so let's go into message.css hey we got ecuador in the house nice sup dude and then here what we're gonna say is i'm gonna add a few style tricks in so what i'm gonna first say is that if the message sender if the message sender class exists set the margin all the way to the right right then what we're going to say is that if the message sender is existing what i'm going to do is i'm going to target the message photo and i'm going to use a rule called order one and this is basically going to change the flex order of the children so the image will now go ahead of the child so in this case if i do that and i say message photo by default is message is order zero what this will do is if we want to get this effect right so we have the message on this side and the message on here so the way we do that is i can refresh we actually haven't set something up correctly here so we've got the message sender then we need to do a message photo because inside of here i haven't done a class name of message photo now if we do that and refresh boom works there we go all right so now it's the sender and also i'm going to change the color of the message sender so i'm going to go ahead and do this oh we almost we're 10 likes away from 700 likes guys let's go come on we can do this right so we're going to go ahead and target the message sender p tag and we're going to say if you're a sender then it turns blue so now it does this right so i'm going to test this i'm going to log out of my account go into sign in and i'm going to go ahead and check now i'm going to go into qazi's account and let's go ahead and see and if i go here now so that now i'm not the sender because it's not kazzy's email address but if i go into here and i say like what's up guys enter boom so now the sender is going to get the blue message but somebody else is going to have not have it right 5 legs away let's go um dope right so that works really good okay now the next step and the final step is actually going ahead and adding two things one adding the animations which will be very quick and two uh i thought because if we do not have seven hundred maybe we'll attack sunny goddammit help me out guys get four more likes and get hashtag fancy dinner going you know um so what we're gonna do now is also have the message come up here right inside our chat so in order to do that what we need to do is go into our sidebar chat and we have the um i need to create a piece of state and this is going to be the information that we're going to show here so i'm gonna call it uh chat info okay so i need to go ahead and import this um and there we go and then what i'm gonna go ahead and do is drop a use effect right so i'm gonna go ahead and say drop a use effect here and this goes like that and what we're going to have is we're going to have the id right so id uh oh my god 699 likes hey there we go nice guys thank you so much for that 700 likes on this video that's insane love the energy you guys have had today honestly it's picked up as the videos going on and is it like it's been it's been a quality livestream okay so amazing stuff hashtag fancy dinner all right that's all we're talking about guys nice okay and then the likes keep going up that's what i like to see man that's what i like to see right so the next thing we're gonna do is where we have the use effect i'm gonna go ahead and say db dot collection and then i'm going to go ahead and say go inside the chats and i'm going to say go inside the doc id and then i'm going to go ahead and say collection of messages and if you guys aren't already following me on instagram go ahead and follow me my tag is under my picture right now uh i'd love to go ahead and chat to you guys on there so that'll be awesome to go and see you guys i'm going to order by timestamp and i'm going to do descending okay and then i'm going to do on snapshot to get the real time functionality so on snapshot and then i'm going to go ahead and say snapshot so when we get that snapshot go ahead and update the the state so set chat info and set the chat info to snapshot dot docs dot map every single doc all right um hey you guys are dropping some nice comments man thank you so much miss carb uh thank you so much imran we've got loads of people dropping uh lots of positivity this is amazing stuff um something i'll be waiting on the fanciness or instead with the one and only my mumbo yeah we'll be going to a fancy dinner don't worry about that um right so back to serious stuff right we're gonna go ahead and map doctor data like this and then we're gonna go ahead and thank you so much dutch american he says excellent speaker i appreciate that dude um so now we we should actually have the chat info inside of here um inside of our in our local state right and then the id is dependent so we need to include that here so with that said now what i'm also going to do is i'm going to go down here and where we have the chat here so what all i need to do is get the last message that was sent so inside of chat info i'm going to access the zero element right which is basically the first element and i say go get the message of that right and also with the timestamp i'm going to do the same thing so that's that's sort of interesting interesting is the only way i can really say it um oh nice dude we got a big donation just come in 200 um mexican pesos thanks for explaining papa react moses alejandro uh alejandro shares hernandez thank you so much dude appreciate the donation and and really really nice stuff thank you so much man um congrats so you're on the 700th birthday yeah it's always a birthday man we get that stuff going um i'll drop this on my channel i'll try something like this on my channel i'll be cool um okay so we're going to go ahead and in the small tag i'm going to go ahead and do this so i'm going to include some i'm going to say new chat info 0 timestamp today and then we're going to pass it now you can see guys look at this if i go ahead and change it to like one two three boom one two three has the latest time stamp and and then the one thing we need to fix is the avatar right so the source for the avatar i'm going to go ahead and do the same thing i'm going to say here it's going to be chat info 0 and we're doing optional change to protect against the break and then now we should see so kazi was the last one that sent the message here and then i was the last one that sent a message here which is why my picture but if i say yo i'm taking over i'm taking over the sidebar boom there you go nice cause it's richer all right so that's dope that's amazing it's working as we want it right so what we're gonna do now is have some fancy animations in so the way we can do that is um uh somebody says so something can you pause the music when you do live streams it kind of kills about i i really i don't know man i really enjoy the vibe uh the the music and i think loads of people actually enjoy the music so i kind of go based off of what everyone's enjoying what everyone's feeling you know that sort of stuff um my girlfriend just texted me saying they want me in the vid hell yeah we're gonna bring you in the vid um so now what we're to do is we're going to go ahead and actually add the animations in so you can see right now um so right now see this is the final finishing touch this nice little animation right here okay amazing donation thank you so much shashank he says what cp doing is amazing thank you guys thank you so much brother for that donation i appreciate you also if i go ahead and type in here say hello you see that it kind of pops in in a very nice animated fashion so in order to do that what we're gonna do now is yeah so these t spoilers like no don't don't kill the music i say i'm gonna kill it dude don't worry uh so i'm gonna add something called react flip move so i'm gonna go ahead and say react flip move and i'm gonna go here to effortless animation and i'm going to show you guys how to implement very easy animations right so we need to go ahead and install it so i'm going to go in to bring up the terminology npm i react flip move um you don't need the dash s anymore and then what i'm going to say is we're going to go down here and you see there's a good documentation for this but all we need to do essentially is add a forward ref to our message that's the first thing so i'm going to go to my message and i'm going to change this function to an es6 function first i'm going to say const message equals and i'm changing this to an arrow function so it's the same thing but it's just written in the es6 way so this is the es6 way of writing a function okay and then what we're going to do is here's his mouth says play some 690 can you imagine trying to go to that that'd be tricky man all right so i'm going to go ahead and add forward ref and then i'm going to go ahead and do parentheses go all the way down here and add the closing parenthesis and then you've got the after the destructuring i'm going to do comma and i'm going to pull a ref out of it right and then what what that means is we pull the ref away from this bit and then we go into our div and we basically say ref equals ref now as for what this does you don't need to say i'm going to explain what forward ref is at this point but you need to import it um this is pretty much gonna it's gonna allow your your sort of just think of it this way it's gonna allow your functional components to be able to communicate the way that they need to for the animation to play correctly okay that's all we need to know at this point so that's successfully installed uh we don't need that anyway then we're gonna go back to our chat.js and where we render out the messages all we need to do is wrap this entire div inside of the flip move so flip move component because now we've done that correctly so it's going to freak out and i'm going to go back here and you see it's saying right flip move is not fine so i need to import react flip move react flip move i'm going to go ahead and import that react flip move from react flip move and now guys check this out boom animations you need keys though you need keys in your messages otherwise it messes this entire thing up it doesn't know which is what then but now if i go inside and say hello boom check that out guys yo it works look how smooth that is that's dope i just want to check if my overflow is fixed so i'm just going to do say abc and i'm going to copy this a bunch of times let's do abc oh okay i guess we could do an important reaction move from here okay so you see this right now it breaks right there's no see overflow doesn't it doesn't work correctly right we don't want this to happen okay so how do we fix this overflow issue right so let's go ahead and fix this so let's go ahead and go to our chat.css and here what we want to do so inside of chat.css where we have chat messages i'm going to go ahead and firstly add overflow scroll okay now by adding that you can see we have actually already fixed a lot of the issue but i want to kind of hide the scroll bars right so in order to do that now what i'm going to do is i'm going to add these two snippets we've seen them before i'm reusing them here so these two the first one does it for chrome safari and oprah the second one does it for internet explorer edge and firefox um but it basically removes the look and feel so if i go ahead and save it it removes the look and feel but it actually keeps the functionality of the scroll bar okay so that's dope and it works really really nice really really well so with that said now what we're going to go ahead and do is um so if you want to go ahead and make it to time ago i would recommend this go ahead and extend on it but you can pretty much use the moment or time ago library um that's going to be something pretty cool um we can actually go ahead and just check quickly i think it's time ago uh jess just moment you get loads you get time ago.js this one's pretty decent i've used this one before um see you see this is just now four minutes ago things like that um should we just quickly do let's just do it go on then let's do it i'm gonna do npm install timeago.js and then let's go ahead and see how you can do it so import all as time ago and then let's go ahead and check out how we use it so i haven't used this in a while so it'll be interesting so sidebar sidebar chat and then we have where we have the timestamps over here what i'm going to do is i'm going to go ahead and say import at the top import all from time ago at some time ago suggest you can also do a moment i think so i'm just using the quick one that i saw but you can do it moment moments really good one two at some moment that's what we're gonna do time ago um dot format oops i'm gonna format i'm gonna basically pop this in now i'm not sure if that will work just like that pretty much go ahead and see so look at that four weeks ago okay that's not right um it hasn't done that right so if i go to to locale string let's go ahead and see if this one works oh there we go nice look at that two minutes ago if i go ahead and say yo boom just now fast though dude that's sick we got that working pretty quick and now this one says six minutes ago if i go ahead and said uh when was this pushed just now right and that's sick and that would change um as and when sort of like the timings change and things like that um i think uh moment is actually a lot better i think i would use a moment um but yeah you can pretty much use whatever you decide to do because you see now this one doesn't actually refresh in real time but i mean it's not bad like isn't this actually not bad like um but i would like the one that does dynamics so i would actually go recommend uh time ago moment.js moment.js i think i prefer moment.js um they have a much better way of doing it at a moment.js so i think it's from now yeah you see from now is the one that i would have used preferably but it's fine yeah um so yeah so this one the reason why i've done this guys and had it reversed like this is because you need to have a listener then which scrolls to the bottom always so i'm not going to do that today otherwise it's just a little bit unnecessary extra work i want to show you the deployment instead so we can prioritize that right what i would say is you can pretty much go ahead and just if you want to do that you go to chat.js and you literally just change it to um ascending firstly and then you have it so that you always have a scroll listener so every time the user sends a message it will scroll to the bottom as that way it kind of locks to the bottom every time you send a message that's what that's how you do that by the way um so yeah um so now what we're going to do is i'm going to go ahead and say firebase init right so in order to do this you need to have firebase setup so firebase tools so you might need to globally install firebase tools but what i'm going to do now is go ahead and do firebase init and i'm going to spacebar on hosting and then i'm going to use an existing project right so i'm going to go ahead and find the build that i've done so you see we have so many builds and imessage clone youtube hit that and what then what you want to go ahead and do is go ahead and do oops go ahead and do public directory i'm going to say build right so not you don't care enter you has to be build all right build is very important here and then once we do this we're going to click y because it's a single page app every react app is a single page app then what we need to do is say npm run build so now we're going to deploy this live right so npm run build and then i'm going to basically go ahead so that's good if i run that it basically creates an optimized production build okay optimize production build and that will go ahead and make it very very fast and sort of and it'll be very very nice and easy to go ahead and do that so um optimized production build is gonna get so it strips out all the things that dev devtools the things that you don't need on the deployed version of the website that's what happens when you when you use this okay so you need to go ahead and do this and now it's important to know whenever you do npm run build if you make any changes after you're gonna need to go ahead and do npm run build again to get the optimized build now checking inside of our build folder so as we now should see a build photo with all the stuff inside of it you don't want to ever touch the build folder the command line builds everything for you and puts it inside of that but what we want to do now is say firebase deploy if it's not a single page we can use hash router and deploy you don't even need to use that you can just react router to make it multiple pages so a lot of the builds including the amazon clone on the react challenge if you use a react route or inside that we use reactor inside that build to have multiple pages inside the app that will do it but here you can say firebase deploy and guys who is ready to deploy this thing if you're ready let me know uh we've pretty much got this thing built but i want to go ahead and have everyone jump on this app and get this thing deployed and up and running so let me know in the comments if you are excited and if you are and you haven't already done so smash the thumbs up on button and let me know if i should hit this deployment button okay so let me know right now my finger is here right all i have to do is let you just drop and we can pretty much go ahead and deploy this thing live and it's so fast i'm going to drop that in the chat and everyone's going to go ahead and be able to use this and go ahead and see the real-time functionality of this right so we have a miracle says let's go uh jay says get that fire build online so we can experience it pranav says ready for sure everyone is ready bonjour says uh pumped super ready and pumped let's go ahead and do it uh daniel graham is saying push that button let's go ahead and do it guys i'm gonna go ahead and hit the enter key and you can see it's pretty much going to go ahead and spin it up so it's deploying hosting and as soon as that's done it's uploading the new files and see how long it takes and hey there we go here it is guys go ahead and check this out right now i'm gonna drop it inside of the chat [Music] go ahead log in with your your accounts and pretty much go and check out this build right now keep it clean please keep it clean uh and while you guys do that i'm gonna be showing some amazing comments on the screen let me see if we start seeing some people pushed inside hey we still start seeing people coming in nice look we got some people coming in youtube love we've got stuff coming in here look at that let's go lots of love nice guys that's good job man so because we got loads of people adding channels it's changing the channels which is fine and go youtube love team cp go ahead and play around with it so you've got boom angus great work sonny there we go see let's go ahead and chat so here we can see yo [Music] team cp [Music] oh man this is i mean keep it clean guys come on but yeah that's how we do it guys so we have pretty much gone ahead and built out the entire clone for you guys right so that means that we went ahead and covered things like react in this build we have redux behind the entire build we have firebase behind the build it's using material ui this was a dope dope build and it was an awesome uh i had some awesome energy with you guys today like everyone just got that energy kind of ramped up as the build went on uh i thought it was so much fun to go ahead and do this uh this was an amazing build and guys stay tuned and if you haven't already the first link in the description is a three hour free netflix training webinar that me and kazia put together you guys can go ahead and check that out make sure you sign up to it right now and if you haven't already smash the thumbs up button so everyone can go ahead and benefit from the value that this um live stream went ahead and dropped this video will be available online now so make sure you go ahead and and you can pretty much go ahead and replay it at your own time build this add this to your portfolio and i just want to say again thank you so much guys for watching the live streams i will be dropping more content and i will be more active on this channel i'll also be active on my channel i'm going to be dropping some content over there but with that said guys i love and appreciate every single one of you check out the blog that atharva posted i thought i would go ahead and drop that in the comment section but with that said guys as always i love and appreciate every single one of you and i will see all of you in the next video peace

Channel: Clever Programmer

Views: 53,454

Rating: 4.9671683 out of 5

Keywords:

Id: HF65cySUYao

Length: 183min 32sec (11012 seconds)

Published: Fri Oct 09 2020