🔴 Build a Facebook Clone with REACT JS for Beginners!

how's it going guys yo so today like you guys always know we're dropping fire content almost every day we try to deconstruct the top tech companies right now in the world and we're showing you how to build them so it's insane you know we got facebook for you sunny's going to teach you a little bit more about what's going on in the back and the you know everything in the back scenes so tell me a little bit about that sonny yeah so today guys we have a huge build for you guys so we actually went ahead and built the facebook clone so this is the actual facebook phone that we went ahead and built so let's go ahead and look at the actual facebook so this is the actual facebook that uh this actually built in react so obviously facebook are the creators of react they went ahead and rebooked their entire website with um with react so um here you go here's the actual facebook build and you've got the header the sidebar the middle feed and these stories and we went ahead and rebuilt it in a similar fashion and frankie what do you think of this build man it is insane one of the best builds we've seen to date sunny said he busted it out in about three hours and a half of intense work so i mean i told them that's probably like six to seven hours of somebody else's time but you guys know this is papa react here so he's bringing you great builds so that you can put them on your portfolio and actually learn everything that goes behind them as well exactly guys we've done all this for you guys and we are super pumped and i'm so happy to have frankie on today's session as well so another killer session with frankie let's go ahead and d like break down the app a little bit so we've got uh you can see over here we've got the nice little sort of header component at the top we went ahead and built that we've got a nice little sidebar and bear in mind guys this is all responsive we have a lovely little stories which is actually got a very nice little hover functionality you guys can see and if we go ahead and type in here so let's go ahead and say hey guys let's go ahead and say hey guys what's going on what's going on and i go ahead and hit enter boom we've got nice little animations there too which is really really clean really really nice and we can also support images here guys so i'm going to go ahead and quickly find an image so let's go ahead and quickly find a programming image one second guys let's go ahead and find an image and let's see if the image uploading also works and this is the demo gods against us right now so hopefully this this should work but if we go ahead and write a message like what's up guys what's up guys and then i go ahead and drop an image url over here and i hit enter boom check that out guys even supports images so that's super fast yeah super fast no response no um uh refresh you've got some nice ui elements at the top and you've got this lovely little sidebar here which is actually connected to the clever programmer page this is the actual facebook feed pulling in and guys we took it another step further and we went ahead and did something extra for you guys so we actually went ahead and added authentication to this build so if we refresh the page you can see we've got this nice facebook login page so if we go ahead and click that it will actually pop up and we're using google authentication to handle it so let's go ahead and log into my gmail account so it will actually go ahead log into google and boom we actually pause our information uses it in a bunch of different places as you can see and that's it guys we're going to be building this today let us know if you're pumped and drop a thumbs up if you are excited for this damn this is beautiful man scroll down a little bit i see that nas drop the comment and stuff right because hey people some of the people in the in the actual team were testing out this app you know to make sure that it does work and it has functionalities just like someone just showed you but yeah we were having some fun with that yeah everyone's like damn it's working dope dudes so sonny what are gonna be the tech everything tech stack all the things that we're gonna use for this build yeah good question frankie so let's go ahead and jump in and let's break down this build in terms of what tech we're going to be using so let's go ahead ahead and have a look so we have react oh damn bro donation thank you frank just dropped a tech programmer no today's my birthday wow happy birthday man happy birthday dude yeah thank you so much that's it guys we got the energy flying and we just hit 680 concurrent viewers at the moment so that's insane we love and appreciate you guys and we are super pumped to be here today so let's carry on with this breakdown guys so we have this is the tech that is going to be used in today's facebook clone build so we have react obviously powering everything so react the irony here is react was built by facebook and we are now building a facebook group with react so pretty cool we're going to be using react hooks so we're going to keep everything up today hey somebody's actually jumped in here guys please keep this clean otherwise i'm gonna have to check take it off the screen um so make sure you keep this thing clean but you guys this shows you it's a real-time functionality going on um so we've got the react context api so if anyone's wanting to learn the redux pattern then make sure you stick around because we will be showing you how to use the react context api and in particular we're going to be capturing the user when they log in with that uh with that api so that's going to be cool also material ui is going to be used to go ahead and capture all of these so all of these icons that you see over here hey frankie check this out we've got people dropping uh things right in there nice so we've got all of these icons all of these different elements like these avatars we use material ui to go ahead and power that we're going to be using flexbox to make things very responsive to get everything in this real-time fashion we are going to be using the firestore database which is a real-time database provided by firebase and we're also going to be using firebase hosting which is how i actually got this thing deployed so that's awesome uh and yeah and we're going to be using google's authentication to go ahead and power the entire thing so that's pretty exciting we just got another donation exactly what i was going to say pablo bless thank you so much man he says thank you guys so much you are the best nice awesome thank you so much i know that a lot of people ask actually ask about authentication it's a great thing to actually add to your portfolio you know a lot of companies want to know that you're able to make authentication systems so we got you exactly we got you yeah we got some nice funny little gifts being popped in right here nice also guys actually we also added one more thing we added a little bonus for you guys we added a react flip move and what this does is i think it's called flip move it gives you that nice animation so if i go ahead oh so frank just typed in if i go ahead and say yo like as soon as i hit enter here guys you see how it pops in all smooth like we've got that working everything works super clean uh so we're gonna go ahead and show you guys frankie what'd you say should we jump into this build let's go right ahead i'm just taking an instagram story right now make sure to tag us guys if you're enjoying this build our instagram handles are on our actual picture on the photo you guys see so make sure to tag us and we'll make sure to follow up with you exactly make sure you guys go ahead and tag me and frankie we love to have a conversation with you guys afterwards and it's super cool because we'd see more than a number when we see you guys go ahead and involve us like that so nice let's go ahead and start this build frankie so let's go nice let's do it so the first thing someone i think nice dude i'm not the only one getting a clean fade so gonna be some exciting stuff like that exactly so right so with that said guys we're gonna actually go ahead and i'm going to just hide this window just for now in case something doji pops up so right now guys what you want to do is we're going to open up our terminal and the first thing that we're going to do is go ahead and use mpx create react app so create react app and we're going to call the app let's just call it the facebook clone so fb clone right now that's going to go ahead and use the create react app tool to go ahead and set up a react starter template so this is what we use in every single one of our builds and it's going to allow you to get started off in a very nice and quick way while that happens let's go ahead and donation by the show while that happens thank you so much man we see all you guys we remember all you guys so thank you for being here for multiple streams michelle i know that's a familiar face thank you man nice i love seeing people like that you know who come back to the thing that's not that's nice dude um awesome let's go ahead and actually check someone got sonny is a bot who makes these amazing bills daily and never gets tired guys you do get tired you know but it's awesome we do this for you guys and we love it right frankie yep after practice and practice it just ingrains in you and this is why sonny is such a master with react and him doing these builds daily is just building up his skill set even more and more so imagine in the future guys exactly guys and that's what we're trying to show you guys even if you get stuck or you feel like it's a bit tricky just go ahead and build it alongside us and pattern recognition with every video you're going to get a little bit better right so let's go ahead and actually set up firebase while we wait for this so firebase is a suite of tools provided by google and what can you do with firebase frankie so firebase lets you host all the data that you want inside of google's is it firestore yeah it's all google's ecosystem so the cool thing about it is that you don't need a sql database to run all these things and if you're doing anything you know kind of like personal projects firebase has has you handled you don't need more than that honestly exactly so with firebase you can have a real-time database you can have a uh you can host the app you can do a bunch of machine learning cool stuff and things like that with it so it's basically just a set of tools that we're going to use but we're actually going to be using the database and the hosting capabilities so the first thing you do is click on create a project and go inside and type in let's just type in facebook clone like this go ahead and click continue and then you want to click on so we're actually going to enable google analytics for this project let's go ahead and do clever programmer you don't need to enable google analytics as an extra step frankly we just hit over 820 concurrent viewers wow let's get that to 1 000 guys thank you all for being here this is awesome man can i see that michael jones just dropped on the comments he says tomorrow build a world clone with react for beginners hey nice somebody like that after all of this somebody just says i have maxed out my firebase well gmail accounts are free guys so what i'm going to say is create another gmail account and add another set of apps to that um there we go awesome right so there we have it guys on the left side you can see down here where it says cd uh firebase clone it says happy hacking so once you get that message very important step you want to make sure you cd into the correct folder uh we're using oh my zsh that's why it looks a little bit different so if you're not using that i recommend you go ahead and check it out um so go ahead and do that and then with that said guys we're going to go ahead and do mpm start and mpm start will go ahead and spin up the app for us on localhost 3000 so if you've done this correctly and everything was done in a nice oh damn frankie check out the donation we just drove amazing kenny hank thank you so much man hi guys awesome work there's there's a way to get the source code after every session yep so we're gonna be dropping the github repository on the description below after the actual builds exactly stay tuned for that we'll be dropping it in the and the link will be in the description afterwards we've got another one from vinayak and nirvani he didn't leave a message he just dropped two pounds thank you so much dude amazing stuff and another one by stealth destroy holy crap dude thank you so much just giving donations and leaving like bosses love it thank you guys we appreciate it nice thank you guys awesome uh somebody goes i hope clever programmer will clone up work soon yeah we will be probably we can clone that that'll be that'll be fun yeah nice right so now guys what we're gonna do is we have if you get to this screen then it's a very good starting point right so with that said you want to go inside your folders you will get see this new folder at the top stitch which says facebook clone click inside of source and we want to do a clean up process so this is what we do in every at the start of every single build and what we do is we go ahead and delete the app.test.js delete the logo.svg and delete the setup test.js you want to go ahead and get rid of those files because we don't actually need those files so let's go ahead and do that move to trash done let's go ahead and close this one for now as well actually we can save this and close it there we go and then why is that why is that done all the time in the beginning of the builds why do we yes yeah because as you guys know i'm a super beginner in coding so i'm gonna try to you know ask a few questions here from a beginner's standpoint hopefully sonny can answer them and give you guys a little bit of insights with that yeah good question so the reason why we do that is because we don't actually want anything on our on our build initially we want like a clean like canvas imagine you're about to paint something you don't want anything on your canvas right you want it to be completely clean so that's why we go ahead and delete those files and then we actually want to go here delete this and do like a h1 which says let's build the facebook clone the facebook clone and let's go ahead and change this to an a because we will be using something called the bem naming convention so this is a css naming convention if you guys don't know what this is i recommend you learn it because we do this in every build and it helps you build your apps and scale up so we're going to also delete the logo save the file and with that said you should see the following so now if we make this full screen you can see i've because initially if it would be like this right it would have kept away and it's this would be centered so what you want to do is two steps you want to make this a lowercase a then you also want to go over to app.css and what we like to do guys is we want to get rid of all of the styling right so app.css go ahead and delete everything so delete everything inside of app.css open up your files again and go to index.css and can you guys see this like imaginary sort of spacing that they add at the top so there's like this this is margin at the top right so this margin over here we want to get rid of that so what we're going to do to get rid of that is we're going to go here and we're going to say exclamation um sorry asterix and then we're going to say margin 0. and this will make sure that we don't see any invisible sort of any invisible sort of margins being added to our build so with that said we actually go ahead and get a clean slate we get a clean canvas and this is going to be the start point of the app so if you reach this point that is awesome guys you can give yourselves a a nice pat on the back frankie just shut off the air horns because because nice we have 800 people guys 800 people watching this is awesome amazing yeah now we're up to 658 likes thank you guys so much about to reach the 700 mark please leave a thumbs up if you guys are enjoying this build we love you yeah exactly all we ask guys is you smash the thumbs up if you're excited for today's build nice um so the first step we're also going to do is we just set up firebase right so we did this whole step right here we're going to click on continue wait until this loads up and then you want to click this little web icon over here so you want to click that type in the facebook clone and you also want to tick this little option right here click on register app and then once you get to this point you can pretty much go ahead and click on next we don't need to worry about that step here we will need this but we will do this afterwards and then we can click continue to console now once that's done guys you want to go to this little cog over here click on project settings and then scroll down to here where it says firebase sdk snippet click on the config so click on this button right here and then you basically want to grab this config over here so you want to click this little copy button so to copy it or you can just grab it like this and command c and then you want to basically go ahead and do the following so go ahead in your source folder and create a file called firebase.js right and what i want you guys to do is just go ahead and paste that config inside of there and the reason being is because we are going to be needing this file and this config file to actually go ahead and set everything up later on so i actually saw a good question that i wanted to pin um it was actually from somebody called code with ven he says sonny please i got a question is it safe to put your firebase config on the front end so he's actually talking about this config right here guys it's actually a very good question and it is safe it is safe i know we're used to thinking about like oh you should hide your config but it's completely safe to do it firebase do you have some protective security measures in place so it's actually safe to go ahead and share that that's why we're not hiding it um oh just got a donation theta 45 finance damn beautiful man he says can't believe this is free wish i had this when i was younger i i wish the same thing man you know that's really why we're making these builds you know even sunny even qazi says this say this all the time you know we wish this was out for us when we were younger so that's really the reason why we're doing it for you guys now yeah exactly i know and it's so true like guys i wish wish there was like this level of tutorials on the internet when i was learning to code and like frankie can vouch for me as well like it's it's just like a game changer in terms of space and it's just boring watching like you know reading those text tutorials so we like to see something and build something so yeah that's why energy exactly the best thing is that it's for free so really put it in your portfolio guys put in the work exactly and also guys just wanted to mention before we actually go ahead and carry on is that firstly we just hit over 900 viewers concurrently so that's insane we love you guys and also if you're enjoying this content guys make sure you go ahead and pause the chat pause the video right now or and go to the description we are offering a free one uh one hour training so it's a free webinar where we actually teach you the top three mistakes to avoid when let's go ahead and drop it on the screen the top three mistakes to avoid when becoming a javascript developer is completely free and there there's a link in the description go sign up for that now and then let's carry on the video that's nice beautiful and we got a donation by stealth destroy thank you so much what did he say lazy load and right panel great job live builds kudos awesome dude thank you so much nice man dude i think we might break a thousand views this is insane nice yeah i will we broke the 800 likes man oh my god we surpassed the 700 we're now at 816 818 thank you let's go nice dude let's go on to this build let's go so what we're going to do at this point so we have our config file set so the first thing that i like to do guys is actually sort of mask out the app right so let's go ahead and look at the sort of so this is the facebook clone app right here so let's go ahead and quickly sign in so we can go ahead and see it so this is the build that we deployed earlier so i'm just going to sign in and then we're going to use this to mask out what we're going to build in our app all right so as you can see we have a few things inside the actual app so let's go ahead and make it a little bit bigger and let's go ahead and make this more so we have the header component right so we have this header component up here so this thing right here and what we're going to do is we're going to go ahead and just mask it out so down here i'm going to go ahead and say the header component oh another donation go ahead frankie what did i say okay it says capti saying awesome work guys any thoughts on electron gis js um electron i think uh what you use to make desktop apps with react right so i mean it's it's awesome awesome uh like it's an awesome sort of thing to use if you're gonna i think slack was actually built using electron so it's very very promising um in terms of what i think of it i mean i guess we're just gonna have to try and we're gonna have to start building some stuff with it to go ahead and get a better insight but yeah it's definitely promising i know a lot of big companies use electron js especially you know right now tech companies that are very you know uh what is the word prestigious or whatever they do use electron js on their stack but we might visit it on a later note and we also got another donation by shubham at deb thank you so much man 40 indian rupees appreciate you it says hi sonny sir i'm software developer hey probably see you dude exactly and guys we have over 900 software developers in this chat right now because every single one of you guys are here right now i'm going to call you guys you guys are software developers if you're here this is the start of your journey nice donation oh my god great job guys thank you so much man i appreciate you raining donations today you guys are bringing in so much love nice dude so we've got that header component that we spoke about and then we essentially have everything underneath right so everything underneath is essentially damn it guys don't do this don't spam the chat yeah i have to block it and not even share with you guys if you guys start doing that because it doesn't make it easy for us to share if you guys do that so please keep it clean we're all trying to learn exactly guys please keep that stuff clean so now what we're going to do is we're going to actually go ahead and this would be the app body so we're going to have a section called app body so this is going to say app body like so and then inside the app body we're going to have a few components right so we're going to have the sidebar right we're going to have the feed right so we have the sidebar on the on the left side here so this stuff right here is the sidebar we have the feed in the center right and the feed consists of a bunch of different things it has this like lovely little stories part as this message component and then it has the rest of them posts down here and then we have the widgets on the right okay so we have this widgets section over here so over here we pretty much have this live feed which comes from cleverprogrammer facebook itself so that will be on the right so widgets and so you're using facebook api for this then um so the stuff that you actually go ahead and see on the right we're actually using uh let me go ahead and make this full screen so the stuff that you got you saw on the right was actually using something called an iframe so it's actually an embed from facebook itself and they provide that and you can go ahead and use that for free so we're going to show you yeah we're going to show you guys how to go ahead and do that awesome so with that said we are going to go ahead and start this thing so let's go let's go to the the app and the first thing we're going to do guys is build the header component because the header components a very visual component it'll be very easy to see what we're doing so this thing right over here at the top right so the first thing we're going to do is we're actually going to go ahead and go to our files and we're going to create a header dot js component like so and then inside of here we're going to do rfce and you see we get this nice little snippet which builds out the component for us if you want to know how we get that go over to the extensions here and type in es7 and it's actually the first one it's a very popular library it's called es7 react redux graphql snippets and it's this one with 1.7 million downloads you want to make sure that you go ahead and download that and it will allow you to get those little snippets that we're doing throughout our builds so that's nice and now with that said we want to every time we create a new component we're going to go ahead give it a class name so like this it's going to say header and we're also going to go ahead and do the following we're going to say import header dot css and what we need to do then is go ahead and create the appropriate css file like so and that's going to be a step that we repeat we rinse and repeat that step guys so we're going to keep on doing that step over and over whenever we need to create a component so get very fast doing that save you a lot of time we just got another donation frankie wow dot net sean what's up microsoft teams slack even your vs code is based on electron wow so all of those technologies use electron thank you for the information man appreciate it nice wow oh damn i didn't know vs code was built in electron apparently that's nice insane that's awesome damn dude so we're coding in react which elektron uses oh man it's just this is some inception right now inception yeah yeah we just got another donation another copyright would be happy yeah another donation yeah suraj thank you so much man he says you guys are awesome good going on awesome another one dude by anker gupta wow this is so much same thank you where we are in the chat donations right now we're at we just crossed 30 dollars in chat donations thank you we appreciate it that's insane thank you guys awesome so let's go ahead and build that header component so the first thing we're going to do is go over to the header component itself and we need to go ahead and build it out so the header is actually split into three different areas right so we have the sort of center we have the left and we have the right right got another donation thank you so much frankie go ahead and read that one out while i annotate md he says you guys are building the project that i wanted to see learn a lot from you thank you thank you so much man i know that you know facebook new version hasn't been gone hasn't been out for a long time so it's even that much more surprising you know i myself don't even use a new ui as of now but you know maybe after this build i'll start using it exactly dude exactly so oh it's another donation holy crap it's raining donations dude fun with sanji thank you dude appreciate you nice [ __ ] so the header component guys is split into three different and another one damn dude don't let us code yeah i always wanted to work on a potential startup idea sonny inspired me thank you guys wow oh man thank you dude i love seeing stuff like that the whole team is we were involved in a startup too right yeah so i actually was involved in yeah i actually have worked for a couple of stops and i had my own startup for a while and i actually teach a bunch of this inside of the profit javascript course link in the description and we actually go ahead and talk about all of those things talk about the experiences that i ran into and all those things and how you guys can sort of skip that headache and just become streamlined into sort of doing well and succeeding in what you're doing so yeah really interesting stuff right there that'll be awesome dude talk about that yes so guys jumping back to the code so the header component we split it into these three areas we had header left header middle and header right so this is what you want to do when you essentially go ahead and um oh damn it dude some people are like blocking this in the chat there we go guys it's gonna i'm telling you it's gonna get it's gonna get spammed or i might just take the website down if that happens so let's keep the chat clean nice so here what we're gonna do is we're gonna do a header left so we're gonna do header left like so and then we're gonna have a header middle so div header oops header middle and if the reason why i'm typing this way is because this is the bem convention so it's inside the header component and we're using the middle element the left element and we also need to do the right element so we're going to say div dot header right so as such right and if you're wondering how i'm doing these shortcuts it's using something called emmet so emma is something another donation wow says is php still relevant is facebook still run on php do you want to answer that frankie um so it used to use php once it begun but now it's using react so they developed react out of you know solving their own problems and they brought the world with this amazing library and now we're using it to build facebook itself exactly guys yeah so they actually the app that we showed you earlier which was built by facebook themselves they revamped the entire app in with using react um so some of their pages might be using php still so there is still a chance that some of their pages are using php but i wouldn't say it's the relevant thing that you should focus your time on focus your time on javascript react that's going to bring you the most value we have another amazing donation by dover keen and what do they say frankie it says is there a react native coming soon coming someday soon yes dude we have react native content coming soon you know how we do it we listen guys i love i love mobile development man and hybrid when i learned about hybrid development i was like whoa that was what that was that was the thing that was missing from the industry and now you know you can use react to even build this using react native so that's amazing and beautiful you guys are going to be seeing that in the future no doubt exactly and then you can actually deploy your apps onto the app store and we can see who who gets the most popularity that'll be awesome to see nice dude with just under a thousand viewers this is insane oh my god oh let's go so much we just got another donation now he says sandy mena he said he's sending a dop 500 i don't know what dop is if you guys know what currency is dropped in the comments he says guys you have the best content thank you man so much we are at 51 in chat donations at the moment insane thank you so much guys thank you so so much i saw somebody was asking a question about why we have the underscores that is known as the bem naming convention just to clarify for those of you who missed that so we have these three sections header left header middle and header right uh what we're going to do is we're going to drop an image into the top so the image is going to be the actual facebook logo so this is the facebook logo right here so you can go ahead and just copy that and if we go ahead and refresh our page we should actually see oh we're actually pulling in our components so we built this header component but we actually need to go ahead and use it so we can get rid of this uh annotation we can just do the following we say this and guys shortcut for you if you go to the end of the header text and you actually press command control spacebar you get the auto import ability so that doesn't always work but if you can get that working it's a very nice little shortcut frankie we just hit over a thousand viewers dude whoa in a thousand likes at the same time they're saying d.o.p is dominican pesos thank you guys so much appreciate you guys very on top of it love it yeah i was in the dominican before lockdown so that that's awesome thank you so much dude nice so let's go ahead and you can see that's huge right now right so we actually don't want to have this massive image so let's go ahead and make that a little smaller so it's a bit easier to work with and the way we're going to do that is we're going to go ahead i'm just going to make this a little bit bigger at the moment so i can see a bit more of what i'm doing so let's go ahead and actually style this a bit so what we're going to do is we're going to go to that image and we're going to target it and we're going to say inside of the header left so let's go to our header.css and we're going to say inside of header left like so inside a header left inside of the image we're going to say give it a height of 40 pixels so a height of 48 pixels and as soon as we save that you'll see that the facebook logo then shrinks a huge amount so that's going to allow us to actually go ahead and see it in a much more easier way is that some sort of standard like 40 pixels for logos no no no i actually just went ahead and matched it to a close sort of comparison to what they have on their site beautiful yeah so a lot of this is done using the inspect tool and checking what they're using and things like that um nice so that's the header left uh we also have a search icon right so the search icon that you guys see at the top left inside of the facebook clone that up here on this top thing right here so we're actually going to go ahead and build a custom search icon search yeah search field for ourselves and in order to do that we're going to need material ui library to get all of these funky icons that you see over here and even these side ones and the way we do that guys is as i go over to the website frank you want to explain quickly what material ui actually is awesome so material ui is a library for css and the cool thing about it is that it's one of the most popular css libraries um i think bootstrap is one as well right and so the cool thing about it is that it brings really really pristine really nice and clean icons that developers can use so you can just go to their website just like sunny is doing right now and he's actually getting the snippets of code and then you can start using them on your projects really just like that exactly exactly guys so this is going to give you a bunch of components a bunch of styling layout components as well as a really really useful icon library which is what we're pretty much going to be using it for today but what you need to do is go ahead and install the core so the first thing we're going to do is go ahead pop open our terminal and what i like to do guys is actually open up a second terminal so you don't actually close your running instance of react so we actually got that running on the first terminal go ahead and make sure you're inside the directory so do facebook clone get inside there uh oh damn dude check out check out the donation man check out the albert donation hey sonny you have become a father figure to me dude i mean i mean i'm 25 i'm 25. i'm a young dad let's go let's go baby i'll let me know son yeah i'll let madman know we have we have children already you guys can adopt them yeah yeah exactly that's awesome dude hernan gimenez actually just joined us a few minutes ago as well that's awesome dude if you're watching let us know that's insane dude thank you so much fernand nice so what we're going to do now is we're going to go over to this and we're going to say mpmi and we're going to do npm install oh sorry i've already done that so let's go ahead and cancel that command let's do npm install material i ui core and then what i want you guys to do is go to the search bar type in icons go down here and what you'll see is you'll get this other command right so you're going to wait until the first one is finished and once that's done we're going to go ahead and do npm install material ui icons so let's go ahead and wait for that till that's done um and what i want to tell you guys is so we need to run this command once this is finished installing so we just added the core there and we're going to do this material ui icons and while that's installing guys make sure you click this you can where it says you can search the full list of these icons so click that and let's go ahead and check it so now you get this very very nice like sort of search so this icon search tool right and here if i go ahead and type in search for example you get like a nice little search icon click it and you get the import code for it so that's how we actually go ahead and get a lot of our icons we go ahead and use this tool and it will actually go ahead and give us the code to pull that into our project look at this sonny yeah aditya burma says man you changed my life i got a job after you're completing your projects also i'm teaching react js for free and already got two students anyone can email me at aditya burma821845 gmail.com that's on the chat wow man you got a job dude i'm just trying to find that where is that holy crap beautiful it's a little bit up it's just one of the comments but amazing man we're so proud of you guys this is the power of these builds this is the power of taking action building them and putting them on your portfolio not only that but also applying to jobs using them so yeah test out your abilities to test out your skills i mean we're providing this for you guys but there's only so much we can do for you and you know we love it when we hear and listen to all of your guys's stories i'm so pumped from you aditya thank you so much man thank you for sharing that's insane we love you guys and massively appreciate you sharing that thank you so much dude closer to our goal of 5 000 developers this year so that's another one to the list thank you guys so much i know right we need to keep a solid track of this dude because it's insane like every single live stream hearing people get jobs it's it's just mind-blowing guys um yeah so keep it coming we love that positivity nice so this is the so we just installed the icons right and this is the search tool that is which is how we actually go ahead and get it so with that said let's hop back over to our local host over here so let's go back to our local host and inside the middle div what we're going to do is we're going to actually know inside the header left div we're going to go ahead and add a second div called header input and this is going to be responsible for actually having all of this stuff involved around that input field so we're going to have a search icon and an input field so search icon and an input field go ahead and save that and here if we actually see it says search icon is not defined so if i go ahead and i need to actually import this so let's go ahead and import this into our project so we can say go to the top and you can say import search icon for material ui once we save that another donation sunil 100 indian rupees thank you so much angular reactor view and please make a video on javascript basic and advanced yo we do have a javascript basic and advanced course on youtube right now it is seven hours long check out the channel and angular reactor view what do you think sonny i will definitely tell you react guys and it's not just because i couldn't react i have tried the others view is pretty good don't get me wrong angular i wouldn't i wouldn't really go down that route but react is the one to go for guys it's the most wanted language right now it is the highest paying language as well out of the three frameworks make sure you go ahead and use that and guys we will also be dropping so frankie just mentioned the seven hour video that we have on javascript we'll also be dropping a very very long one for react also at some point 12 hours yeah about 12 hours and it's going to be all the builds condensed it's going to be your ultimate guide to becoming a react developer so if you're pumped for that what can they do frankie they can go ahead and smash that like button and make sure that it turns blue thank you guys so much and if you guys want to learn even more on how to become a javascript developer hit the link in the description below it's going to show you to a one-hour training where we're going to show you exactly just that and also we just got another donation by karuna thank you so much we appreciate you it's 40 indian rupees thank you and she has a little funny chicken saying hey you hey awesome dude love that thank you so much karuna nice so with that said guys we're gonna go ahead and carry on so we've got the search icon the input text and you can see this isn't looking too great at the moment but we're gonna style this we're gonna make it look really nice at the end uh we've got another donation by sunil bahira he says one video on react server side rendering oh that's actually really interesting dude i can't actually pin it for some reason um but that's a really really interesting one uh we will we will actually consider doing that so i'm going to go ahead and pop it on the screen so you can see one video on react server side rendering um so next js or something like that we can actually probably go ahead and do something like that that'll be awesome yeah so we're going to go ahead and inside the center now inside the center so the center is where we have all of these icons right so we have all these icons right here and what we're going to do is we're going to actually for each of those icons i'm going to go ahead and create a div and i'm going to say each of those divs are going to be header underscore underscore option so they're going to be each of them is going to be an option and inside of it it's going to have an icon so in this top one we're going to have something called the home icon so let's go ahead and import that so the way we write that is as such we say home icon font size is large and i'm just going to go ahead and pull in a bunch of these icons right now for you guys so there we go i just pulled in a few icons so we can use them later on but you can see now we just actually went ahead and pulled in this little lovely icon right here so sagar dumbbell thank you so much just dropped another donation appreciate that dude thank you so much man we appreciate that you guys are going crazy with the donations thank you guys so much man yeah this is awesome this is really awesome so we added we added the search loop thing on on the the what is it called the magnifying glass and then the actual home icon as well right exactly exactly that so we added that and then we added the uh magnifying glass and then we added the home icon right so you can see we're going to follow this convention so i'm going to go ahead and copy this and you see now we've got another div with the class name of header option let's go ahead and drop that down and here where we've got the home icon i'm going to change this one to a flag icon and the flag icon will simply represent this flag right here okay so this flag that you see right here that will be this one over here so i'm going to go up to the top and i'm going to go ahead and import that and we actually did import that earlier with this line of code right here so going back down save the file and you should be able to now see a flag pop in so i've actually got a snippet of code which will save us a little bit of time and i've done this for the remainder of these uh icons so there's three more icons that we do this for and they are as such there's a supervised user circle icon honestly these names i actually don't know these names where why they call them this but this is the names that you're gonna have to import and the import code is here for them so this will go ahead and pull in the required dependencies that you guys will need now with that said we are going to go ahead and finish and chuck the remainder of the stuff inside of header right so we're basically positioning ourselves at this point so we're putting all the stuff on the page and then we've got we're giving everything appropriate class names and then we're going to go ahead and add some nice little css to this so on the app we can see we've got this top section where it has here on the here we have the um let's go ahead and make it a little bigger so we have the info so this i'm going to actually sort of containerize this a little bit and i'm going to have it so that this is actually a container of its own and this one we're going to call the header info and then we're just going to list out the rest of these icons so each one of these ones is an icon so you've got one two three four different icons over here so what we're gonna do is we're gonna go over here back to our app and we're gonna go ahead and create a div which says header info so div header info as such and inside this one we're going to have two things we're going to have an avatar component so the avatar component is one of my favorite components it saves you a bunch of headache from whenever you need an avatar inside of your app so that little circle profile picture that you always need inside of apps to get it you just need to do this import and then you can actually go ahead and just use it as such and it just takes a source but right now we don't have a source so i'm just gonna it has this nice little placeholder in the meantime and then what we're going to do is we're going to have a h4 right so underneath it we're going to have a h4 and this one is just going to say for example let's just say right now it says sunny sanger like this right or for now let's just chuck in the insta handle so there we go this is anger nice so it doesn't go too long there we go and now we have that in place and we're going to add those icons right so we have icons like the add icon we have the ad icon the forum icon so all those icons i showed you guys previously basically notice how when i click them they're actually clickable buttons and the way we do that is we actually use a component called icon button and the icon button component is actually an awesome component it's got another donation thank you so much and meet kumar that's it appreciate that dude thank you so much man we really love you guys that's insane dude thank you so we've got another donation there and then we're going to basically go ahead and pop in the following so the way we do it is we pull in the icon button component and then we just wrap that around the add icon component so we're going to go ahead and add import these two extra imports at the top so we need the avatar and the icon button um so we need the following so let's go ahead and pull this in so at the top of the file we're going to go ahead and drop this import right here so there we go there we go we actually impose the rest of the dependencies that we need so awesome so for you to use all of those icons you first have to import them make sure you remember about that guys something is not functioning it's probably that if it's your icons related to that exactly and you'll get an error on the screen if that happens so make sure you keep an eye out for that so now i'm going to go ahead and pop a snippet in right here so these are the rest of the icons and you can see when we do that now you can see they're clickable elements so you see we've got clickable little beautiful icons right here but this entire thing does not look like a header right now okay so we're going to make it look like a header and the first thing we're going to do is make sure you've given the appropriate class name so we've got header header left header input in the middle you see all of these class names are actually very important for the next step we're going to go ahead and get rid of the h1 which says let's build a facebook clone because we don't want that let's click save and let's go ahead and start this so inside of the header what i'm going to go ahead and do now is target the header and this bit i love right because as we do this next step you can actually dynamically see everything pop out on the screen right which is a really really nice thing so a lot of people are saying will the video be recorded and uploaded yes all our videos are uploaded straight away afterwards and you guys can watch them back at your own pace so if you have to go you have to watch anything make sure you smash the thumbs up button and come back a different time so what we're going to do now is we're going to add a display let's add a little bit of let's add a display flex first so let's go ahead and do this display flex and this will go ahead and make everything go into a row so now we've got the header left the header center and the header right in a row now that's why it's dropped like that and then what we need to do is add a bit of padding so i'm going to say 15 pixels and what this does guys is it adds 15 on the top and bottom and it adds uh 20 on the left and right oh we just got a nice donation wow daniel bastos a hug from brazil thank you guys so much i know a lot of you guys are from brazil a lot of them are from spanish-speaking country so hola como estantos mucho gusto gracias por estara and thank you damn dude that's insane a bit of spanish for y'all qazi just dropped a message he goes you guys live right now uh maybe i think i think we're live yeah i think i think yeah i think we're live i think we're doing pretty good right now we're live nice so we added a little bit of padding and then what we're going to do is we're going to go ahead and add in the following so we're going to say justify content space between so this should actually push all the elements apart from each other so let's go ahead and save and you can see it pushes all of the elements away from each other oh we also got another donation from nishan patel he goes you guys are doing a superb job helping so many people learn new skills thank you dude appreciate that massively that's awesome dude thank you man really really appreciate you nishant love it yeah this is awesome dude uh and my comments have finally come back in so i can see nice so now what we're also going to do guys is we're going to make the top uh sticky which means that so let's go back to the upright oh oops okay that's bad somebody guys please don't post in uh things like that in the chat let's go ahead and just do see yeah guys keep it clean come on yeah we are all learning here we want to show you guys the real demo but we're going to have to bring it down if you guys are not you know being respectful for everybody's teachings exactly guys let's go ahead and keep it clean so right now for the app we have this um where is it i'm talking about we have the yeah so the actual top bar sticks to the top of the page right so we want to also do that so we're going to do position sticky and set a background color of white and a z index of 100 so it never gets overwritten by any other component so let's go ahead and do this nice and then with that said we're going gonna go ahead and add a top of zero and also we're gonna add a box shadow so it floats right so it's gonna float from the top of the page so as soon as i add that now you can see that it has this nice little flow it's very subtle but it's a little flow and what we're gonna do now is for the left side we're going to basically go ahead and add the following we're going to say display flex on the header left which means that the logo should go in line with the uh search input field so let's go ahead and do that nice and then we are going to target the header input so we're going to go ahead and target that header input that we're sort of looking at and here i'm going to go ahead and do display flex align item center so save that and you can see what this does is it basically aligns that centrally on the vertical axis right so it's going to align it centrally on the vertical axis i'm going to then give that input a background color of uh it's like an off sort of gray that's the one that i have on the app i'm going to give a padding of 10 pixels and a margin left let's go ahead and do that nice and then i'm going to give a border radius of 999 pixels which gives you a perfect oval so you can go ahead and do that uh and at this point guys we should actually be good to move on to the next step so let's go ahead and make it 33 for now until it gets bigger otherwise it's good we're at one two three four likes let's go one thousand two hundred and thirty four likes that's amazing oh but i love that number that's so much we really appreciate that we're also at sixty dollar chat donation so we wouldn't be here with you guys really appreciate it smash the like button if you guys are enjoying this it's going to be exactly massively massive we appreciate you guys awesome so um with that we're basically going to go ahead and we've styled the input so we went ahead and added a bunch of styling to the input container um the header input so we're going to make that back to 999. save that again and here what we're going to do is go down and now so that's the header input container but you see the actual input inside if we go ahead and target the actual input so what we're talking about here is the actual input inside of header input we actually need to go ahead and target that and we're going to say border none so this will actually go ahead and get rid of this little border we're also going to say background color is transparent so this will mean it will blend in with the background and then outline width of zero we'll actually go ahead and get rid of this little blue sort of that we see right here we've got another lovely donation by shriver srivats star payatti he says can you please create react.js tutorial for beginners that's something which i'm actually i'm actually thinking of doing soon actually yeah that would be dope yeah i think on that yeah teaching you guys from completely scratch to taking you to building facebook and we're going to be doing that in the next weeks stay tuned guys yeah so keep tuned for that guys nice so oh damn kenny hey let's go dude i think i recognize this guy yeah yeah guys there is a way to self-organize my files into react component or pages and best practices maybe a course in the future live thanks a lot nice so kenny hank to answer your question uh to organize your files into your react components or pages that's actually firstly you answered your question right there so i would actually start by just organizing it into so i have a components folder and have a pages folder and then if you have a react router i would have some routing and depending on what pages you have have the pages in that photo and then all the reusable com components have inside of a components folder so start with that as for best practices there's so many things to cover here we try and cover a lot of best practice practices through our builds like the bem naming convention but i would highly recommend dude if you are interested in all of these things definitely go ahead and check out the course because i have live coaching calls every single tuesday where we do talk about all of the best practices every single thing that you could possibly ask you can ask inside of that um so honestly definitely make sure you check that out but thank you so much description below yep thank you so much man i appreciate you and then also supra dropped the 40 40 indian rupees donation thank you so much yeah he asks do we have any framework for easy css without code yes so there is actually tailwind css which is actually a big css framework out right now we're actually going to be dropping some content on that soon i haven't played with it too much but i know it's hot right now yeah so there's a lot of people doing that amazing i also know that if you're a designer you can use figma and i actually talked about that in my other video top seven tools that all developers should use so figma is amazing because if you're a designer you can just literally design drag and drop design there and then on the on the actual side it gives you the css and html codes so you can design something by drag and drop functionalities and then add them to your you know coding environment by getting the css portion of it that's really good point dude because uh i actually use that in a lot of professional environments where designer would give me the designs and the css is attached with things like figma so that's really really powerful yeah nice dope so we have styled the input so as soon as i save this notice how this is going to change right so we save it boom it gets rid of that that sort of uh stuff that problem that we had now right now obviously this is not ideal we don't want it to be this oval right here so what we need to do is we need to go down to the header center and we basically need to make that display flex because right now what it's doing is it's pulling this entire container down and we want everything here to be inside of a row as opposed to going up vertically so as soon as i save this we should see um we should see everything go into a row and let's double check why that hasn't happened let's go ahead and do headers oh this should be header center there we go header center and we save that guys and you'll see it all goes into a nice row there we go and then what we're going to do is we're going to say header option and here guys material ui gives um all of the all of its sort of icons this class right here by default so to target it we're saying inside of header option which is each one of these is inside its own header option container change the color to gray so as soon as i save that boom changes the color to gray and now we want it so that when we hover over those options so let's go ahead and add this in we hover over those options the icons will turn into the facebook blue so now you can see as i hover over it we get this nice blue effect so you see it changes into blue as seen there so that's a really nice little add-on there then what we're going to do is for each of those header options i'm going to apply the following styles so i'm going to say display flex uh align item centrally padding of zero pixels uh on the top and bottom 30 on the left and right and change the cursor to a pointer so right now it's as you can see it's the normal mouse but we want to become that little finger so if we save it it should actually makes it into this very nice layout so we can see this right here and you can see at this point this changes to a sort of very nice layout at the top right now we also want to have some hover functionality for that middle so when we hover over it i want it to become very nice in terms of i want it to sort of show a kind of a background color difference a border radius around that align it essentially padding and border bomb so let's go ahead and do that and you can see now we get this lovely little effect right beautiful so now we're starting to see like like the the one that you were building back then exactly with the original build so it starts to come together quite nice um so let's make this a little bit bigger there we go and the next step guys is we're going to go ahead and target the header info so the header info is the text portion over here so header info when i say that i'm referring to literally just this portion so these two things are inside of header info so let's go ahead and do the following so we're going to say inside of header info display flex align item center which means that this will drop next to this as soon as i hit save and boom that's that's exactly what happened then we have a h4 tag so this one right here i'm going to space it a little bit by saying margin left so let's go ahead and do that we say margin left so it's not right next to it and then header right to get everything in these correct line we do display flex and boom look at that it just tied everything up together neatly and now we have hover functionality we have this search field over here and we also have this lovely sort of clickable elements over here which is awesome right so that looks very very clean uh and what i would say guys is as for the half screen size what we we're not going to be covering in this build but you could use media queries at this point to then further enhance this and show as it gets extremely smaller damn dude wow chris connor amazing thank you man thank you so much he's saying any recommendations for showing off ios slash android apps on web portfolio yes dude i actually have a really nice one so i would say is go ahead create yourself a portfolio you can build that in react and launch it on something like firebase go ahead and use your react skills to go ahead and learn react native and what i would say is build some maps with react native and you can actually go ahead and put those you could either launch them in the app store or you can possibly maybe i think there is a way i'm not entirely i can't remember off top of my but there's a way of actually showing like a demo or dude i would actually have a gif maybe of like showing your app on your web portfolio and you can actually have the source code to that app if you don't mind sharing it and yeah that's a really good way of doing it and that will actually give proof that you can actually use react native as well as react so you're not only a web developer but you're also now a mobile native app developer yeah yep yep guys don't forget always put your demo on your portfolio don't only put the picture of your build because once you start seeing the demo how it functions and everything it's just another level to your portfolio because i've seen so many portfolios with just the images it takes off so much takes away so much from the actual build that you made so you put in a lot of energy to that make sure that you show it on a demo exactly and i mean like whenever i see somebody's portfolio and it's just text and it's just images like you want to make sure you have it like a very juicy image and if you can maybe have an animated gif which shows quickly running through the app that's a lot nicer than sort of just doing it as opposed to just seeing some text so awesome thank you so much chris chris connor really really appreciate that donation nice so with that said now what we're going to do is we are going to go over and that's actually for this portion so what we saw is the um initial icon has a nice sort of uh you see this underline to it right so this is like an active state so what we do is in bem we can actually name it so we have this sort of active naming convention so whenever you have a it's called block element so this is the block the header component the element is option and then you can have something called a modifier so in this case we're going to add a class name to the first one we're going to call it header option dash dash active so this is basically saying this is the active button and what we can then do is go to our css and we can target it and we can say do the following we can say for the active container target the material ui icon change the color of that icon to blue and that's becomes active then we're also going to say target the actual container itself so the active container and give it a border bottom a four pixels solid and it's going to be the facebook blue and boom there you go you get that lovely little icon right there beautiful gives it a completely different experience yeah so that's awesome dude like that's looking really really clean we also need to go ahead and add something so like a little nice little placeholder at the top so it says search facebook right so i'm gonna go ahead and add that in now so that one's gonna say let's go ahead and do the following so we're going to say search where is it gone here placeholder and this one we just give it a string which we say search facebook awesome save that and there we go so somebody says why don't you guys use sass so honestly dude like my opinion against sas is things become super nested uh and what happens is when you get nested code it becomes just it just becomes ugly like in my opinion it becomes super ugly it becomes like very very hard to read that code and you want to stay away from stuff like that sas is a very very good library but it's misused that's the problem with the bam very simple and it's very easy to go ahead and use and it's also you don't have to set anything up with them it's just a convention that you follow it's very easy for everyone else to sort of follow that alongside all right so nice so with that said let's jump on and carry on so i love it man because honestly it's such a beginner you know problem when you're starting off you don't know what to name classes or components or anything and then you're just kind of doing it randomly and if you have something like bem you know the bam what is it called the bam um naming convention i guess naming convention yeah that really does help you it grounds you and lets you follow you know something structured so it gives structure to your code exactly it's going to give structure to your code it's going to look super clean guys um awesome so with that said let's go ahead and we added that active icon state so that's really nice and now you guys can see we've done that so what we're going to do now is go back to app.js so we're going to go back to our markdown so this is a good idea guys when you're sort of uh let me share the screen there we go so we're going to go back to our code and i'm going to get rid of this comment there we go nice so here this commenting actually helps us see um what we're gonna be building next so here i said app body so let's go ahead and create a div so everything under the header we consider as the body right so we're gonna say dev app body like so and then we're basically going to shift all of this stuff inside of the app body and the reason why is this will help us with styling later on so we have that now and then we need to build out these three things so let's go ahead and build them out so the first one is the sidebar so the sidebar as such and what we're going to do now is firstly go ahead pop open our file editor do sidebar.js use our very nice little trick called rfce so that's es7 snippets in the extensions and then here we're going to say class name equals sidebar and then we're going to import a sidebar.css like so boom and we have that there now what i'm going to do is i'm going to go ahead and pop in the sidebar.css and that will actually allow us to sort of style this component in a very nice way so somebody asks why don't you use bootstrap with react guys what do you think sonny so bootstrap's very good if you're i would say if you're learning to use bootstrap it's very good for quick turnaround time so the reason being is oh we also got a juicy donation there i'll mention that in a sec so um bootstrap's very good if you have like a lot of clients and you just need to get work out uh it's very good but you have two problems with bootstrap in my opinion one i tend to wrestle with it when i'm using flexbox um and i just prefer to just use straight up flexbox i get the exact design i want as opposed to like near the design that i want so that's my first opinion and also the second thing is uh bootstrap kind of has a look to it like i i know when a website's built with bootstrap whereas if you built it with just pure flexbox it has like a custom clean finish to it so that's my personal take on it what's your idea on that frankie i honestly don't know much about bootstrap but i really like the minimalistic style of the material ui icons and then just you know being able to customize the css how you want it always gives it another another feel to your website i feel like it makes it more personalized so i really really dig that for sure definitely definitely and we got a juicy donation like you said from beatrice to sarah or tahereh and she drops five euros thank you so much she says hi guys amazing work could you guys tell me if this was possible to do with angular why should i choose react over angular all the success for you thank you so much betrays what's your take on this sonny so yes you can definitely build it in angular so these are all just sort of uh angular's a framework react is a library but you can build it definitely with my now react is much easier to learn it's much lighter weight so it's also very performant it's very fast your entry into getting into a react sort of career is much easier than an angular in my opinion also i would recommend it because the job market is higher right now in react the demand is higher in react and the overall average salary is higher in react so there's a lot of pros if you if you're looking into sort of separate yourself from the tech for a sec and look at the opportunities involved you have a lot of things going for you right now if you choose to dive into react yep and i feel like that should be one of your main you know driver for your decisions what's going out there in the world right now what do people need what technologies are used the most and also what's easy for you to implement and learn so take all of that into account and guys we're at 1373 comments wow we're about to reach 1500 sorry likes in this video that is insane guys thank you so much we're at eighty nine dollars in chat donations so amazing thank you guys for sticking on amazing guys and if you're enjoying the content literally just smash the thumbs up button help get this video out to as many people as possible share it if you're watching it right now tag me in frankie on our instagram handles and let's carry on killing these guys so what we're going to do now is we have the sidebar component so the sidebar component over here what we're going to do is so the sidebar just pretty much consists of a bunch of rows right so if we go ahead and open up our app so literally over here you can see it's just a bunch of rows so you can see we've got here a row here a row here or here another row they're just rows so we why don't we create a component that we can reuse uh and we're going to call this component the sidebar row because naturally that seems like a good name so let's go ahead and do sidebar row and we can pass in different props to this to make it to go ahead and customize it we just got a nice donation from tech aftab thank you dude appreciate that thank you so much man appreciate it awesome dude so the sidebar row yeah so we're going to go ahead and create that now so sidebar also to create we're going to go ahead and do the following we're going to say create a file sidebar row dot js boom do rfce for a little shortcut boom and you see these guys these little shortcuts save you a bunch of time guys like otherwise this would take ages to slowly write this out and do all these little things and then here i'm going to do import sidebar row.css and which means we have to create that file so let's go ahead and create that so this builds quite intense today guys we've got a lot of stuff going on um and we have so much content coming in this build so we have react context api we have authentication we have deployment oh it gets more and more exciting long list let's go yeah it's insane nice so we have the sidebar row here so let's go ahead and pull that in to our sidebar right so let's go here do the following auto import it from sidebar row save the file and we should see now if we go ahead into our sidebar and say i am a row so let's just make a p tag and let's just say row and what we can do now is if we repeat this a few times we should be able to see it should say [Music] and i think what's happening is it's actually maybe not showing it so we can see sidebar row sidebar let's go ahead so i think right now it's because this is because we actually oh okay yep we don't actually show the sidebar so we need to go ahead and auto import the sidebar save it and now it should show the site but there we go we've got the rose coming in beautiful yeah coming up clutch exactly guys coming in close guys you know like no matter how experienced you are with code sometimes you're just gonna forget to import a few things you know so always make sure to check that always always always so we're finished with the header now we're working on the side row and we also got another donation wow aurora thank you so much for the indian rupees appreciate you so much she says or he says do i need to make html css skills super for react so i'll let you in a little secret when i started learning react my css skills sucked dude wow i they my apps looked so ugly when i started learning react but i focused on learning react and that's what i'm going to tell you guys focus on learning react and sort of the fundamentals behind it that's going to be a lot more important and then guys follow these builds like honestly follow every single one of these builds watch how your css will naturally get better through pattern recognition right so you're just going to notice different things you're going to see oh i see that's how flexbox works and before you know it things will start to sort of stick and you'll start to get better at css yeah ultimately it's you know the when you implement those practices so you're working on react and you're trying to make you know maybe the text blue or you're trying to make a sidebar or something like that then that's how you're going to pick up css by actually implementing by actually putting in that knowledge to work other than that if you're trying to learn the language of css man you're going to get confused it's more about learning where it goes and how to apply it exactly at least exactly that 100 i couldn't agree more guys like exactly what frankie said and remember that pattern recognition is so powerful that's going to really be a game changer so with that said the sidebar row component so let's go to the sidebar row component so inside of sidebar inside of the sidebar row now sidebar row can take a bunch of props so this is how we receive props inside of react now props what are they we can pretty much pass in different attributes so here if i passed in a title which said something like let's just say this one could be for example pages so at the top over here we have something like this where it says pages oh we just got another donation thank you very much that's a south african rant by dash oh nice say sonny he says it's because of guys like you we developers grow big thanks i love that that's amazing that makes our hearts so warm thank you man so much we're trying to build 5000 developers trying to get them to get a job this year so you guys putting all of these projects in your portfolio applying to jobs are really helping us on that goal and we're here for you guys thank you yeah really really appreciate that dude and we love it like those comments just keep us going you know they keep the energy up they keep pushing us exactly love that so well here we have a title prop so here we would have pages friends messenger so yeah let's go ahead and implement that so just say something like pages um and then let's go ahead and pop in another one here so let's go like title equals uh friends so friends like such boom save it and now if we save this we should be able to see so the props instead of saying row what we could do is we could say props dot title and if we save that now over here we should actually see that we've got pages and friends so you see the ones where it's passed in it's rendering those and it shows that this has passed through as a prop what we can do to make this neater is we can destructure this so this is es6 and we can basically pull out the title at this point so we no longer need to say props we could just pull it out of here and say title and that will still work so you see everything still works and yeah so what we're going to do is we're also going to upgrade this component so it accepts a few more things uh and we're going to change it to include the following so the we're going to have a source an icon and a title and i'll explain what these do so source icon and title so here you can see that we use for the top component over here we have um so for this one we have essentially so this component here we have an avatar so for the source it's going to be the user's image right so we can either pass that in or we can pass in an icon so if you pass in an icon it will come through like this so we're going to make our component extremely reasonable we also got another donation from enough aurora dude it's amazing like this kind of reading them i know it's like the third time he dropped something on this yeah on this specific live stream that's insane thank you so much manov we're also at 96 dollars in donations guys hey let's go guys 100 mark that's going to be our 11th time or 12th time actually breaking the 100 mark if you guys help us out with that wow we just got another donation another one hey caledon would say says gorov gorov says how to shift from angular to react love you guys my honest opinion dude is just start if you've done angular honestly when you start you'll be you'll be so amazed because you'll be like oh my god i didn't realize because angela has such a steep learning curve it's a framework so you have to do every single thing as they tell you to do it whereas react you only use things as you need it so as you need things you then you use it right so it's a lot easier to get into it my honest opinion follow these live streams literally you can go through every single live stream and you'll just get better and better and better and you'll pick up react by doing these live streams one hundred percent damn another donation frankie go ahead and drop down oh deepak you helped us pass the one hundred dollar mark on hey so much let's go he says appreciate your work are you planning to do more projects than node.js in the future yes my man we definitely are so thank you so much for your donation just stay tuned stay tuned give us some time you know we gotta sleep we gotta plan we gotta eat all of that we're humans too but we're here for you guys and gonna provide you with that much more value actually got some exciting news for you guys so a lot of you guys have been asking about the man stack so you want the man stack you're like yo sometimes you drop a video on monster carsey frankie let us know about mersack so we listened to you guys we stayed up last night and we've done an immense amount of planning and we have three banger videos for you guys next week scheduled scheduled exactly and we are building the tick tock clone the tinder clone and the whatsapp clone all using the man stack so if you guys are excited drop some fire in the comments and smash the thumbs up button because we have that coming for you guys drop some freaking fire in the comments guys we're at 148 likes we need 12 more likes to reach the 1.5 k mark thank you guys so much everybody's asking about mern mern is so hot right now a lot of companies are looking for mern stack developers and we're going to teach you just that thanks to sunny and thanks to also david who's going to be helping you with those builds exactly you guys are going to meet david he's an amazing developer on pwj and he's going to be doing those builds with me so that'll be awesome and also thank you to vinot vino for another super chat let's go dude it's funny because david was a pwj student so he was a prophet with javascript student he was a watcher just like you guys he decided to join the program now his skills are to a great great level he's a he's an awesome developer and now he's going to be working hand in hand with sunny so he was from our community and now he's going to be bringing value to you guys as well exactly and guys i have had the privilege to see like a lot of these guys go from absolute like in their beginner stages just to like frankie so how quickly have these guys turned into the developers like that they're doing stuff it's insane in a few months probably like three two months yeah something like that and now they're building crazy apps they're doing all this stuff like literally we jump on things it's insane like and you guys can be a part of that community as well so that's profit with javascript link is in the description and if you're on the fence with that free training guys there's a free training in the description so just sign up to that while you wait look at all that fire in the chats that's amazing and yeah for any of you that don't know shubham dropped it in the comments mirn is [ __ ] express react and node all put together into one text tag so we're going to be teaching all of that to you exactly so there's going to be some intense videos so make sure you get your sleep for those videos because it's going to be some exciting week next week that's awesome let's jump back into the build so we were working on the sidebar row so the sidebar row over here so let's go ahead and pull this out right now so the sidebar row let's go ahead and check this out so sidebarrow we have a few things that we want to pop in here so we want to say if there is a source so if we pass in the source prop then we're going to render out an avatar with the source being used as the source that we pop in uh so we need to go ahead and import the avatars which is this import statement over here and then we're going to say if you pass in an icon then we're going to then only then are we going to render out the icon right and this icon right here is not imported it's actually passed through as a prop right so whenever you pass a component as a prop so if many of you might have not realized that you could do that you can actually pass a component as a prop but you have to use a capital letter otherwise it won't work if i change this to a lowercase i it will actually break so if i go ahead and do this it doesn't work you see it changes the color and that actually breaks everything from working so it's a convention inside of reactor capital i which is why also all of our file names are using their components have capital letters so something to to know if you didn't know that so yash kendall says are using redux for this we're using the react context api and we're going to be using that in today's build so keep tuning stay tuned and smash the thumbs up if you're excited for that so so now what we're going to do is we have a rather than a p tag i'm going to use a h4 wait hold on whoa 1550 likes on this video insane guys oh my god thank you so much cp family clever programmer family damn you guys surprised us every freaking live stream thank you so much and it's just growing seriously dude like it's actually insane down nice so let's go ahead and we've got these three things in here right now so these three different things so what we're gonna do is we're gonna actually go ahead and pass in a bunch of props so we actually have some they data available for us so let's go ahead and do that so let's go to our sidebar over here and let's go ahead and pass in some dummy props so here we have a bunch of icons being passed in so we need to import those so let's go ahead and do that let's import those at the top and then you can see here so this one right here we actually don't have a source so we don't have this yet and we don't have the user's display name yet so at this point i'm just going to say the user is sonny sanger and the source let's go ahead and i've actually got a image on google so let's go ahead and do sony saying uh i'm going to grab this image quickly so we can just see boom we can copy the image address and then i'll come back to the app there we go and here we can do this so that's just an image right there and what this will do guys is it says expand more outline is not defined so we need to go ahead and import that as well boom like so and what this will do now is it should pop out those sidebar components onto the page so if we save this we refresh we should see those components pop in um there's a little bit of a delay there but it should pop in any second so once that's done what we're going to do is we're going to actually go to our sidebar row and we're going to start styling this thing so let's go to our sidebar row.css and let's go ahead and see first you'll see why that's not actually working maybe it's compiling there we go it's compiling sometimes it gets held up it's completely fine if it does that just carry on developing um and you can come back to it when it works so we go to our sidebar row.css and here what i'm going to do is i'm going to say displayflex so what you can do when this happens guys you can press con control c npm start so that will cancel that and it will rerun it again right so i'll rerun it again and that should kickstart it again so that sometimes helps if it gets stuck beautiful what is that shortcut that you use to you know go to choose you know like sidebar row css and all of that to search on it good shot that's command p so command p pops open this such and if you do command p command p again you see you can go back to your previous file which is really handy and if you keep tapping it you can go down a file which is awesome and then you can actually type in there so if i want the sidebar row then i can just go down and hit enter so that's how i navigate really quick beautiful yeah that's really really cool um so i'm not sure why this is okay there we go we're back people are saying some path is saying next mark zuckerberg is sunny hey not too far off nice dude yeah hopefully i mean we'll see hopefully we get that zuckerberg paycheck yeah let's go nice so now guys you see it looks like this which is not exactly how we want the app to look right so what we're going to do is we're going to target the sidebar row and we're basically going to go ahead and add the following display flex align item center padding at 10 pixels and change it to a cursor pointer so the minute we do that you see everything goes into a nice little view there and we pretty much get this pointer uh cursor which looks a lot cleaner all right then what we're going to do is we want so when we hover over it the background color is going to go light gray and a border radius of 10 pixels is applied so if we do that now you can see we get that border radius you can see it's a very subtle border radius at the end and you get that hovering over effect the next thing we're going to do is target that h4 which is the text inside we're going to say margin left of 20 pixels so now it no longer pushes next to it i'm going to say a font weight of 600 so it changes the boldness of that and then we are going to change the color of the icons and the size of the icon so to do that we're going to go inside the sidebar we'll say the direct child remember this is what the icons get given as a class name by default we're going to change the font size to extra extra large and we're going to color the facebook blue and with that look at that looks really really slick and we've got a nice looking um we've got a nice looking sidebar component so responsive i love it yeah it's really really clean right um i just want to address this one as well so uh nitin thank you so much he says sunny is react probably makes things look so easy honestly dude i really appreciate that but trust me there was a point in time where like i was also in a i was also a beginner and i was learning and i was very you know like very sort of stuck and things like that and also somebody else just said no bugs in your builds as good uh as a good as a developer it feels so good oh awesome so he's i think he means when he's following along but guys i'll tell you when i'm actually prepping the build i do run into a gazillion bugs so like if you run into bugs as well it's completely normal obviously we do prepare in advance so the live streams can be super super uh seamless but it's a normal thing to get stuck right it's another thing to get stuck just don't quit do not quit isn't that right frankie like that persistence yeah it's the best way to learn man from your mistakes from other people's mistakes like i mentioned on the last live stream it is true bugs are gonna bugs are gonna be your greatest teachers probably most likely and yeah i love seeing faces familiar faces like the greatest ever thank you man for being here i love it you're always on the live streams man bringing in the positivity that's really what we want from you guys and we're going to teach you all that we know thank you so much exactly thank you so much guys awesome so let's go and continue on so we have the sidebar row completed now the sidebar itself is actually complete which means that we can go ahead back to app.js and we can get rid of our little annotation nice so what we're going to do now is we're actually going to go ahead and add in the feed right so the feed now the feed is the juicy part it's pretty much where we have all of so everything inside of the center of the page is the feed so uh every oops everything inside of the center of the page so everything you see here is the feed so this middle component is the feed and that's where we're going to pretty much have all of this component sitting right now right so and you can also see oh damn it's got me and frankie come up in the uh the little widget that we built somebody asked somebody asked if if it gates if that specific sidebar gets updated what are we calling that right sidebar sony uh yeah so this is the widgets yeah the right type yeah exactly so yep sunny says that we use iframes for that right sony yeah so this is actually an iframe and it's pulling the information uh live from facebook so that's actually working dynamically yeah yep that's the real clever programmer website that's where it's getting that information that's awesome man exactly yeah really really cool nice so now what we're going to do is we're going to actually go ahead and make this perfect size there we go and we are going to go ahead and build out the feed component so let's go ahead and do that so what we need to do is create the feed.js so feed.js do rfce save like that class name of feed so let's go ahead and do class name of feed and let's go ahead and import so to import feed.css like such right so that's awesome and then we also need to create the feed.css file oopsfeed.css like so and now we have the import at the top and we can pretty much start building out the feed so the feed let's go ahead and check out so the feed what we have here is we have a few things right so let's go ahead and do our tactic that we like doing uh where we pretty much mask things out right so in this middle section we have this beautiful story real like this this story rail that we see at the top right so this story rail right here pretty much is what we're gonna write here so that's going to be its own component so this one is going to be called the story real right and the next component underneath that is going to be what we call the message sender component right and thank you saeed imran for another super chat awesome dude and oh wow oh nice check this out again wow thank you so much man he says this is for frankie to capture senior deb chair hey let's go man this chair is awesome i'm still getting used to it i don't know about this pillow but it's it's pretty good man at least um i get my back straight so do you guys so much it's like you guys got paired up and dropping the donation at the same time we love that thank you yeah yeah exactly i love it's weird how that happens right like everyone everyone always doubles yeah yeah it's insane all right so then we're gonna have the message sender component so the message sender component i'm referring to this so that's we're gonna call that the message sender um yeah so let's go ahead and build out the so firstly it's complaining now because it's saying feed is not defined so let's go back into oh i just don't want to save that one let's go back into app.js and let's go ahead and import this so import feed from feed so there we go uh back into feed save this file and this hide so we clean things up so here we're going to basically have a story real component so this is going to be something like this it's going to say story real like so and we save it and now it's going to freak out because it's like oh well we don't have a story real component so storyrod.js we need to create once we go in here rfce do it like this and then we're going to go ahead and create a class name so a class name of story real remember naming convention camel casing right here and then we're going to do import story rail so story real like so dot css save it create the css file so story real.css boom we have it and then we're back so now we have this stuff ready to go so the story rail pretty much consists of you can imagine right so where we have that story real we have several oops i always do that by mistake we have several uh stories inside of it so you guessed it these are also components these are going to be story components and we're just gonna pass in props and we're gonna render it out differently based on which prop we pass in so you see like this is the beauty behind react guys like it's it's why react is so powerful it's why i love react it's why like i just just don't waste your time letting anything else just spend it you learning reacting it's just so powerful how we're going to do this so the goal here is to have essentially a few different stories like so um syed imran just dropped another donation nice dude wow i've just learned html csc i mean i think he means css js what's next react is next bro go ahead and follow these tutorials man i think that's the next step for you for sure yeah 100 reacted react nice and thank you for the donation again thank you bro all right so we're going to have this story component several times and we're going to pass in different props right so now what i'm going to do is create a story.js so story.js rfce and boom we get that and here i'm going to say class name of story so like so and at the top we're going to say import story.css story.css which means you guessed it we have to create the story.css file right so you see once you get faster doing that it becomes very quick to do that step right and that's going to be something which you do want to get speed up use things like snippets to make it faster those tasks we don't want to spend too much time on when to spend time on the juicy stuff right so let's go into the story now the story is going to have the props passed in at this point here right now we're going to destructure this prop these props at this point and we're going to pull a few things right so we're going to pull we have an image here so we have the actual image so you see the background image that's going to be an image so we're going to have that so we're going to say image then we actually go ahead and we have a two things we have this uh sort of profile picture so this one right here right this profile picture right here we're going to have and then we also have some text right so you see where it says sunny sang you see where it says rafikaze where it says frankie aaron bernard and nars um so we're pretty much going to pass that in as another thing here so for the profile picture we're going to call it profile source right so i mean don't hate me the name was in a rush but we're going to call it proposals and then this one is title uh and another beautiful donation from aditya pawa awesome again wow that's really seems like it's the same people dropping donations thank you guys so much man i really really mad it feels so great to see familiar faces dropping in donations multiple times it just shows us how grateful you guys are and really we're so grateful for being able to share this with you guys as well thank you so much yeah honestly definitely like it's huge guys uh i just wanted to ask frankie where are we at with the the donations right now so chat donations right now we're at 106 thank you so much damn and guess what our likes are at 1 659 so smash that like button let's get to 1 700. this is one of our most liked builds as far damn that's love that dude love that let's keep this energy going guys so we have the story which takes three props it has image it has profile source and title so we're gonna have a few things inside of here right we're gonna have an avatar and the avatar is gonna be the avatar that you see on the right and that's going to take you guessed it here's the source but we're going to use the profile source as the input for that avatar so that should actually go ahead and pop in the person's picture so there we go and then we're going to have a h4 which is going to have the title that we pass in right now for the background image so for this background image what we're going to do is and also to make this very easy to understand and see what we're going to do is where we have the story real let's go ahead and actually just render out a few of these components so let's go ahead and go back to our story realm and now what i've done here guys i've saved you a bunch of hassle and i've gone ahead and i've just created a few component calls here with the correct props so i'm going to quickly make this full screen for a second so you guys can go ahead and pause the video and look at these so you guys can see that we also need to import the story there we go and i'm going to go ahead and pop that back to the side and basically these are some dummy props i've gone ahead and and sort of put out to save you a bit of time now we have that let's go back into uh it says inside of feed the story row is not defined so we need to import that boom save it and then it should start working again there we go so now the story we can see okay nice we can see each of the different uh each of us we've got sunny me frankie obviously we've got me quasi frankie aaron and nars right now for the background of the div i actually want to set that as the image that we pass in right so i want to actually i actually want to make that uh the image that we passed in yeah i know i just read that yeah me too i saw frank saying don't scroll down i think we made non non-suitable for workbook by mistake damn it guys keep it clean we don't want to bring it bring that website down because of you guys everybody wants to learn we want to see it you know function so keep it clean guys exactly keep that clean guys um so at the div at this point so for the div what we're going to do is we are going to go inside and it's it's also funny that sunny for my picture he put jeff bezos because i'm freaking bald as well he said he couldn't look at my he couldn't find my picture i was like yeah i'm probably rich you know i didn't even realize until uh sheila pointed it out that he was both because i didn't actually pick it because he was well i was like yo here's a badass like that because i couldn't find a picture of frankie and i just thought about that jeff bezos is a badass then i realized subconscious yeah oh man so now guys we're going to use something called an inline style so you can start with css but you can also style inline and here what you do is you pass in an object in your jsx like this and you would do background image so it's not usually we're used to something like this but in when you do it this way you do it in a camel casing fashion and here we're going to use backticks i'm going to say go to a url and that url is going to be the image that we pass in right so with that said now this should actually set the background image of this div so each of these divs to the image that we passed in so if i save that now we should see we should see the background images you see that nice we actually get the background images uh pop in so we're gonna make this look like what we see in the react app so this right we're gonna make it even with the hover functionality so you're gonna see how we can go from that to that which is just some css changes so hopping into the story.css the first thing we're going to do is also for this avatar what we're going to do is we're going to give it a class name of story under squad underscore avatar to make it easier to target that yes we can target the uh class that material ui gives it but it's kind of easier to do it this way so we're going to go ahead and save and then we're going to go inside inside of story.css like so inside of here now what we're going to do inside of here is we're going to go and do the following so this is a few rules so get ready for this one guys so the first one is we're going to say target the story containers the outer container and we're first going to do position relative so that way when we do absolute positioning with the child components they're going to be relative to this parent so that's something which is very important and you should check it out a few people are saying styled components yes we will actually be using style components in some future builds because i love style components as well and i do use them in some of my builds so the first thing we're going to do is background position center center background size cover background repeat no repeat so what this will do is it should center the images now you see some of them are being repeated now so if i save this we should go ahead and see that it doesn't happen anymore it doesn't repeat it just kind of it still looks weird but we're going to go ahead and fix that with a width and a height so let's go ahead and drop in a width and a height of 120 pixels 200 uh height there we go so now you can see that sort of card dimension coming into play then what we're going to do is we're going to add a box shadow so box shadow will give it that nice 3d effect so let's go ahead and add that in and now you can see guys i'm seeing that there's a little bit of flashes on sonny's screen right now am i the only one looking at that or can you guys see it also just just so we know thank you just drop it in the comments below if you guys are experiencing that it's not something too overwhelming but i just figured it out let me know oh yeah i can see that actually uh maybe let me go ahead and go back to the screen so let's see if that works so maybe that's better yeah nice but if that does happen guys i would apologize for that i'm not sure why that's happening um we'll try to we'll try our best to fix it for sure and guys we just crap we just crossed 1 700 likes on this video let's go there's so many people hey some people are saying i see the flashing too we can see it we can see it awesome yeah we'll try to get that fixed for you guys we just got another discount dude another sorry a donation it says is there any student discount for profit with javascript course how old is the content of the course so thank you an answer yep so discounts for students no man right now we don't and that's really for a reason too man it's it's it is an investment it will be an investment on your part because you're investing in yourself and ultimately you know that's the best thing that you can do if you're starting off with your career and really with your life it is really a shortcut so it's going to be very worth it man the old the age of the course is very very recent we started developing it in late december 2019 to this point we're still putting in new modules so nas just finished uh what was it a google chrome extension i think like last week so he's about to shoot that so it's still in development just because new technologies are arising and everything it is very very relevant and it's top of the line so it is completely worth it thank you so much for your donation man yeah exactly and guys what i will say is the price right now is actually discounted for everyone so the price you're seeing right now is going to be only a limited price very soon we're going to have a challenge we're going to be doing a react challenge and once we do that challenge guys the price goes up and it stays up so once that price goes up guys it does not come back down again all right so we like if you if what i would say is go ahead and check out that price right now and make sure if you're on the fence just remember that it will go up in in maybe in like three weeks time two weeks time so don't miss out because once it goes back uh up you're not going to get it back at the price you're seeing it at now yeah man you don't want it to go up if you don't have the money right now tell your mom tell your friends tell your father tell everybody anybody you know that can help you with your development that's going to completely you know help your life it's going to be completely worth it for you and actually frank says sonny's crushing it crushing the code too hard the monitor can't keep up hey anymore so i think we got rid of that yeah see it's funny because when i stop coding it's like whoa we can breathe nice so there we go so now what i'm going to do is i'm going to go ahead and do this so border radius of 10 pixels margin right 10 pixels and this right here so this will actually change it to a pointer cursor so we get that and then this will actually prepare it so that we get that nice animation in a second so to get that animation what we do is we add the following we say story hover like so right we do this now what this does guys is can you see it actually hovers as i hover over it grows and this is scaling to seven percent bigger so this is one and seven percent so it's like seven percent scale so that's what we do when we do this now the transition here is saying make that transform last 100 milliseconds and ease in the transition so here you can see that we get a very nice ease in transition effect so that's going to be another donation dude and amazing dude we're at 114 in chat donations right now thank you so much carlos he says your streams make me not get afraid to clone big websites muchas gracias thank you so much man we really appreciate that 50 mexican pesos thank you that's dope dude yo like that man spanish is so sick i think it's the coolest language it just sounds cool he said yeah i love it it's kind of it's kind of a sexy language and also if you know spanish you can also learn portuguese really easily a little bit of french italian too so all of those romance languages thank you thank you that's nice dude right the next thing we're going to do is target the avatar right so that little avatar that we see we're going to do margin 10 pixels and we're going to do a border around it which is like the little blue border and then the final thing to style here is that h4 tag inside of it right so we're going to go ahead and make it absolute positioning but because we set the parent to relative it's going to be absolute within the parent container so we're going to say bottom and left of 20 pixels and then the color will be white so now you can see we've got this nice effect right we've got this nice finished little effect and you can see guys this is actually looking a lot like the actual app it's just the layout it's different yeah it looks beautiful it looked it looked super big once you when you implemented it at first but now that you fix this it looks just like the facebook app it's amazing and also pranav left another donation of 40 indian rupees thank you so much man he says waiting for mern whatsapp clone keep it up thank you man yeah stay tuned for that sonny and david are going to kill it next week with those builds and yeah you're going to learn a lot from it the mern stack the most right now demanded stack for us so exactly thank you awesome that is all coming next week so exciting stuff for you guys so with that said we have the story pretty much done so now we're gonna go into our story reel and we're gonna go ahead and style this so it looks the way we want it to look so what we're going to do here is we're going to go over to our story real.css and all we need to do here is very simple actually guys we just need to do a story roll um over here we need to do story real and what we do is display flex right so as soon as i hit save on that boom it goes into a row so you see that we get a nice little row going on right and then what we want to do is we're going to go ahead and do the following so each of these should also have a little margin next to them so we're going to go ahead and say each of the stories should have a little margin next to them actually we got rid of that sorry we don't need to we just need to say display flex there we go happy days nice so with that said now we have the sidebar and we have this right here now obviously this doesn't look this doesn't look right because everything's sort of like positioned incorrectly so let's go back to our app.css and we're going to make some tweaks over here so that we get the positioning correct as we want it so if we go back to app.js we notice that everything is inside of app body we have the sidebar the feed and the widgets so everything that you see here in terms of the fill full build you have these three sections you have the um oops not that one sorry we have this over here so we have the um the sidebar the feed and these widgets right so these are very very important to take note of right now so we have those things inside here and what we're going to do is we're going to style it so they actually sit next to each other so right now they're obviously stacking on top of each other because inside of our body by default it's uh by default it's um it's display block okay now let's go ahead and go to app.css and let's go ahead and do the following we're going to say app body app body and we're going to say display flex right so display flex like this save it boom and you should be able to see now that boom it goes next to it right so we actually get that nice behavior right there so it goes very nicely like that we're also going to make the background of the app turn to the gray that facebook has so if we do that and then the header had a background of white so you should actually stick out so now you can see however big the app is it will show us the background of it and what we could do for now just to make sure that we can see the entire app covered is we can say a height of 100 view height and we can get rid of this afterwards so there we go so you can see we've got that looking pretty sweet now what we're going to do to continue on with that is we're going to make this a little bit bigger so we can see it the entire thing there we go we're going to go ahead and jump into so that's that component done for now which is clean what we're going to now do is actually have it so that let's go ahead and check something quickly so where did we render these story rows inside of feed so in feed and what we're going to do guys is feed let's go ahead and start feed a little bit as well because feed we should actually have some padding and stuff like that because right now it's kind of scrunched up to the top right so the feed i want it to have precedence i want to say flex 1 so it should try and take up as much room as it possibly can i'm then going to add some padding i'm going to say 30 pixels on the top and bottom 150 on the left and right then we'll say display flex so anything any child inside of it should now go into a column flex direction and then we're going to say justify content seller align items center so as soon as we save that not this page sorry oops now we should actually see that it spaces things out a little bit so that's a lot cleaner and it looks a lot better in that sense so we actually get this at the moment um and it looks a bit strange for now because i think we haven't done the sidebar all right so i need to go ahead and also start the sidebar and for the sidebar i'm just going to do a flex of 0.33 and i'm going to say padding of 25 pixels and this right here 10 pixels all right so right now it's aligning center because it only has this one child but once we put more children in it it will align it centrally like such right so that's why we see it like this but for now it's actually looking pretty clean like it's doing pretty good right so amazing yeah yeah so everything's looking pretty clean and now what we're going to do guys is we are going to go to the i'm going to get rid of this comment so the comments actually help you figure out and actually help me even figure out what we're doing next so message sender is next so what we're going to do is inside a feed let's go ahead and check out so message sender refers to this right here guys so this part right here so this component right here oops that was horrible talk about this one here yeah so this right here is the message sender component and this is going to be responsible for how you essentially push some messages out onto the platform so let's go ahead and do message pretty much make posts huh yeah exactly here's how you're gonna post things so let's go ahead and create that file so message sender message oops message sender.js boom rfce go ahead and do this rfce like so let's go ahead and do oops div give it a class name of message sender so message sender like that let's go ahead and do import message sender.css like so and now inside of here what we're going to do is we are going to have a few things so this one actually is broken down quite into a sort of complicated sort of more complicated structure so here we have a few things that we need to take note of right we have the let's go ahead and make this smaller so we have a few things we have the header top so this is the header top and then we have the header bottom and then inside of here we have a few things that we're going to do with containers that allow us to achieve this design right so what we're going to do is we're going to draft it out here so we're going to create a div and this the first div is going to be message sender underscore top so it's going to be the top section and then the next one is going to be message sender dot bottom so message sender bottom so it's gonna be the bottom stuff over there now inside the top we're gonna have a few things we're gonna first have an avatar so it's gonna have an avatar so this is gonna refer to the avatar that you see on the right right so this is actually gonna refer to this avatar right here so this one right here and then we're going to be able to call that same avatar from the beginning right when you put it in the header to begin with yes so that avatar is the same component right now we're not actually passing in and we got somebody here guys who is this guy oh oh my god fresh bro look at that looking fresh nice bro you want to take over i don't have to take whatever you guys can keep new a special guest here cazzy looking clean looking 10 years younger nice rough good boy looking fresh yeah yeah he's saying he's not the only one with a clean cut today oh yeah let's go nice bro let's go i'll be here tomorrow you know yep so kazzy's gonna be here tomorrow for tomorrow's live stream and that's gonna be what builds sunny uh i am not wait tomorrow they're not doing anything i think tomorrow's you bro oh yeah actually [Applause] [Music] so stay tuned guys i was trying to you know push him to go live tomorrow because you guys are missing him so much but yeah you'll have me don't worry about that nice dope dude you'll be sitting with me yeah you were working with the avatar honestly yeah so we're working with the avatar component so we had over here the avatar component and that is let's go ahead oh i didn't actually make you guys full screen there we go guys how you know you can see kazi then nice so let's go ahead and carry on so we had the uh message sender component so we've split that up into message top message bottom now for the this section right here so we're going to actually assume that this whole thing by the way like we have hit over 114 dollars in revenue that is insane yeah 23 000 views so thank you guys so much for that that is absolutely epic frank says how's it looking nice sharing appreciate it insane dude insane so much nice so here guys this is we're gonna actually wrap inside of a form so over here we're gonna say form and this form we don't have an action here so it's just a form and here we have two input fields so i'm gonna say input one like so and input two right and the first one is going to be the so it's gonna have a placeholder of just which says what's on your mind right so the first one's gonna say what's on your mind so it's gonna have a placeholder and that's what they say on the actual facebook one so it says what's on your mind boom like so save it and there we go let's go ahead and import the avatar as well so we've got that at the top and then the bottom ones we can go ahead and remove this input type because by default it is typed text so we can go ahead and get rid of that and now here guys we're going to go ahead and give this one a class name as well so the first one we're going to go ahead and say this has a class name of message sender input the second one we're going to give it a placeholder which says image url which is optional so this one's going to be for the image url and the first one is going to be for the actual message that you're sending right so once we have that in place we're then going to have a hidden button right so this is actually i'll explain why we have this afterwards but this hidden button is crucial now we're going to this is going to fire off a handle submit function so i'm going to say const handle submit takes an event and so anytime you have some kind of on click it actually gives you something called an event so here it's going to be e and we don't want it to refresh when we submit so we're going to say e dot prevent default like that and this will actually trigger this function when we click and also guys by making it type submit it means that when we're inside of this function so if i type something and i hit enter it actually submits the form right so it actually submits the form and that triggers this function right here so how so if you literally with the on click event when you submit it's going to show it right there because of the line that you just added right the e dot prevent default so if you couldn't add that line then it would refresh or how would that work so yes if i actually got rid of this sign for a sec so let's go ahead and do this and let's go back to our one so it says message for sender not just go to feed oh oops feed let's go ahead and fix this import message sender we need to import that into our app so let's go save it and if we refresh we should see now that we have a very ugly looking input and it says cannot resolve message sender.css i need to create that file i forgot to do that messages.css boom and now this will actually should pull it in so we should see the file come in there we go so we've got the avatar and what's on your mind so now if i type in here type in here and i hit enter it refreshes you see that so you see at the top isn't here i see the it refreshes now we don't want that and we actually hate refreshing so we by putting e dot prevent default it's preventing the default behavior so now when we do it we should notice that if i type i type and i hit enter i don't even have to go to that button if i just type enter now it's not actually going to do it so it stops that default behavior from happening right beautiful so the next section is the bottom message center bottoms uh part right so here we're gonna have a few things we're gonna have three options right and each of these options are gonna refer to this live video photo video and feeling an activity so we're gonna go ahead and create that we're gonna say dev dot message sender message sender option like this right it's gonna be the first one guys we just crossed one thousand eight hundred likes on this video let's go okay likes that's insane 1 800 likes wow that's 1800 people clicking the button until it turns blue that's insane hopefully we can reach the 2k mark but thank you guys so much yeah that's insane dude like if i think we will break 2k i think you guys can help us do that if you're enjoying the video all we ask is that you smash that thumbs up button and share with others as well so we can all exactly share with others tag us in your instagram stories our links are right here dope nice with that said guys we are gonna inside of the option so the first option is gonna consist of a video camera icon so it's the video camera icon is this one right here material ui and a h3 tag which says live video so let's go ahead and import the video camera icon uh i'm going to actually import all three so we have three icons up here i'm going to go ahead and drop them in here so video cam icon photo library icon and the insert emoticon icon so we have the first one here and this one is actually going to go ahead and pop in the following for us you see we get the icon and we get live video now that's going to give us that the second one is going to be the photo and video and notice guys so i'm actually also passing in an inline style which changes the color of the icon to red and this one the color of the icon to green so i like to mix it up no i don't always like to use direct css i'd like to show you guys a mix of inline styling as well so that way you guys can learn that in case you didn't know how to do that the next one is the photo and video one as well and then we're going to have the last one which is feeling an activity just go ahead and drop that in over here so save and we still have we still also have over half a thousand people watching this video guys so live right now it's just mind mind-blowing like to think that there's that many people right now that's like a little stadium of people like insane literally imagine all of those people in a room that would be insane like it's insane right is it proper crazy to really look into live events that's crazy and yeah these icons like the live icon then the photo icon and the smiley face icon are all those material ui icons or what yeah they are material ui icons because yeah they really look they look very legit does facebook use the exact same ones because yeah so so they don't use the exact but they're very similar and a lot of them are actually a lot of them are actually the exact ones yeah all right so it's really really good um nice so dj frankie from kenya says you guys are amazing picking lots of tricks up from the stream awesome dude very very glad that you're getting value from this keep stay tuned guys because we get very very juicy soon so we're going to have the real-time database implementation we're going to have react context api we are going to have a firebase deployment there's so much stuff coming out certification as well yeah and user authentication so like how we're going to get through this like stay tuned and you'll figure it out right so let's carry on going so we've got message sender so message sender dot css now what i'm going to do here is go to our message center dot css and the first thing i'm going to do is apply the following styles so i'm going to say to the overall container i'm going to do display flex margin top 30. effects direction should be column so all of the children get stacked up i'm going to give it a background color of white border radius of 15 so you get this nice rounded effect box shadow which gives it this floating card effect and a width of 100 so it takes up the full width of the screen uh or full width of its parent container the next thing we're going to do is that top section right so we're going to go ahead and start start that top section we're going to say display flex which pushes the avatar in line with the rest of them we're then going to do border bottom one pixel solid so that gives it this little break uh here padding bottom gives it a little bit of spacing at the bottom and the padding around it 15 pixels awesome so we can actually go ahead and get rid of this one if we do that nice so with that said we can then go ahead and target that form so i want that form to actually go ahead and take up all of the room it possibly can and i want it to then be display flex as well so that will help us with the next part which is actually going inside the form and targeting the input container so we go inside the form and we target the input container and here we say outline width of zero and what this does guys is you see this little blue outline it goes ahead and gets rid of that right so it goes ahead and gets rid of that and then we're going to say border none so it should get rid of that and we're going to say padding 5 pixels margin zero left and right um i think it's zero top and bottom ten left and right border radius rounded so it's like a perfect oval and then a background color so if we go ahead and do that we get boom we get these nice little you see that it's very very clean very very nice um and also i want to add this this is bugging me it says what's on your mind question mark it's a little subtle things guys so that really drives me crazy for us says for us khan got landed randomly on your live it's amazing i always wanted that type of content you guys rock wow man it's it's insane thank you so much for us you know it's this type of content is i love it because i feel like it's very easy to digest even when sunny is going through tutorials that might seem so complicated for many people we try to make it the most easiest for you guys to engage and actually you know finish out the whole build which is really the end point that we want to get you guys to exactly exactly and we're just really glad that you guys are enjoying it because we'll keep it coming we'll definitely keep it coming guys if you're enjoying this nice so we added that net that portion this which is the input right so the next thing that we are going to do is actually go ahead and add in the following we're going to say target the button inside of that form and do display none so you see the hidden submit we don't actually want to show that submit button so it's very simple and there's a reason being because you just wanna it's a very intuitive experience right when you go here and you say what's on your mind and you just type in like hey uh i'm good or something or like hey uh i'm pumped or something like that it pumped and you hit enter you just want it to work we don't want to go to a button click here you just want to have some natural behavior hey what's in your mind um hitting the gym or something like that right here in the gym and you just say enter boom sends it off right we don't actually want that little button so what we do is we hide the button but it keeps the functionality and acts as a submit so when you hit enter key it actually triggers the button and then what we're going to do is change the whole experience of everything because yeah man you don't want to be hitting submit every time it's like you want to do you know everybody cares about their time it's the most valuable assets that we have and if really your design is made in a way so that you can you know share that with others and actually make it so that it's it's important for your design and your users then that's going to take your whole build the next level so that's great nice and dude i love this comment so jurgen hector actually said though i only know javascript fundamentals and i haven't started any type of react.js this tutorial isn't very complicated to understand that's what we're going for like that's exactly what we're going for that exact sort of thing right um what i always say to people so i always get a question of when should i learn react or when should i start my journey with react just start as soon as possible because like like jordan said yeah just start right now and just literally start by following along with the tutorials follow along with the builds and guys before you know it these things come like everything will come to you in the natural place right so very very important stuff we're at 1878 likes let's go what is it 22 more likes to get to 1 900 likes guys help us out with a thumbs up if you guys are still here for those of you who are just jumping in right now we're building facebook literally building facebook so you guys can see so like that video let's get to 1 900 guys thank you so much exactly nice awesome dude so let's go ahead and the next thing we're going to do is actually go ahead and target the message sender input now this is the input which says what's on your mind i gave it a class name and i'm going to say flex one which will push everything else it'll try and take up as much room as possible because this is an optional field this is the main field so that's how why i chose to do that in that way now the actual facebook doesn't have this image url optional we added that because it actually simplifies how you can have the image functionality without the sort of file picker yep i like this comment says the submit button is useful for mobile devices you can make it disappear in desktop screens what do you think nice yeah so submit so very s is true yes it's a good point so the submit button is actually useful in mobile devices but um yes that's true actually very true good point so if you are going to be doing it that way what you could do is you could use something called a css media query and that will actually you can then conditionally render this component based on the screen size so it's very simple to do that um and you can actually go ahead and i think it's it's literally written something like this it'll be something like at media and you say when there's a max width or something like this you do win this max width of like a 1200 pixels then you would apply this raw and you would basically say show or like a visible or something right that's how you do that and that would say that that's amazing yeah so that's that's called a media query and that's what you'll be able to do and i actually need to move the comment so there we go and yo what's up logan how's it going man he says hey guys how's it going bill looks sick hey we got logan's profit with javascript he's part of the the clever programmer community as well so what's up man stay tuned guys moving on with the build nice he goes the facebook stories makes this build pop off yeah awesome do you agree yeah that was a fun thing to build nice um somebody said if only we can click the like button many times use your ipad use your phone use different gmail accounts get that like yeah your brother-in-law tell your sister exactly the video nice oh my god we're at 1 900 likes on this video guys man holy crap 2 000 people liking it amazing and we're also good chat donations thank you so much sonny you're killing it man i'm glad hey cheers bro it's been amazing going on our live streams together and guys we'll have many more of these coming up so i love going live with frankie it's always fun nice so let's go so we've got the message sender bottom next so let's go ahead and give that a display flex which means that all of the children including the live video photo video and filling activity should go into a row right so there we go goes into a row and space evenly with justify content and then what we're going to say is for each of the options i'm going to apply the following all right so let's go down here let's go ahead and do the following so we're going to say padding at 20 pixels display flex which means that the icons now aren't sitting on top but they're in a row with them a line item center which means that these are central to the actual um icon itself the color is great and margin of 5 pixels which is awesome and then we're going to talk about you off sonny but i we just got a really really cool comment right here by abishek he says hey sonny thanks for so much hard work you guys are putting i have built more than three clones so far whenever i see video notification from you guys it gives me boosts to do more coding wow three builds man that's insane hopefully they're on your portfolio man hopefully you know you don't just keep them on your computer or anything share them with people actually even teach people and then if you're enjoying this guys share this with others as well we're at 1937 likes let's reach 2k thank you so much guys that's awesome dude and exactly like if we if we can motivate you that's insane like and he's done three of the bills which is insane keep it up abhishek saying and also i think i've seen uh a tag on instagram uh where you tagged us in it so like if that was you then awesome dude keep doing that and it's cool to see your work nice so um oh nice niraj bowada it says interesting live i'm here since the start thanks a lot for the live awesome dude glad you're still watching that's amazing nice let's go so we've got the message sender option at the bottom and then what we're going to do is we're going to target the text and that text is a h3 tag i'm going to say font size is medium i'm also going to push a margin left of 10 pixels which would push it away from the icon the next thing i want to do is also add a hover so right now when we hover over it then nothing actually happens so i'm going to go ahead and do this so we're going to hover over and you'll get a nice little gray hover effect now as a natural ui element what we should be doing here is for that element we should do a cursor pointer so if i save this now now it has that pointer element which is a lot cleaner than if we didn't do it without right so that's a lot better to do it in that way [Music] says having no idea about react.jso still able to follow all that you're doing and it's just amazing that's what we're talking about that's exactly the kind of style we're going for even if you haven't coded before um so core says i joined late is it too late it's never too late to carry on burning you can literally jump in now and you'll be learning something new we still have the react context api the real-time database all of those juicy things coming up so stay tuned yep yep never mind and also really you know most people think that they don't take the psychological or the fun aspect of coding to be an important part of it an important role that's really what makes most people you know stop in their journey as to become programmers and that's really what we want to share with you guys you can have fun you can have fun with your friends engage crack some jokes while you're coding that's actually going to make your journey go the long term so never forget that guys that's why we do it we teach you guys in this way and it's just you know pretty much two two buddies here hanging out and coding and teaching you guys on the on the path so yep exactly that literally it's just two bodies teaching you guys how to code that's how we like to think of it nice dope so let's go ahead and carry on so now we've got message sender let's go ahead and check it out so we've done so pretty much at this point message sender itself is functionally complete but we need to do two things we need to keep track of the input so right now when i type we don't actually track this in the state we don't actually do anything with that in the state so now what i need to do is go ahead and introduce two pieces of state so stay inside of react is essentially how we write a react variable so in this case we're going to have one to keep track of the input the input so here we say the actual variable name is called input and then we have a modifier or a setter function called set whatever the variable is called so in this case is set input and now what we're going to do is we're going to use the use state hook because this is a functional component damn dude we just got a massive donation jessica apollinar thank you so much 100 mexican pesos cn pesos i love it as usual all of you guys never disappoint me i have no words to thank you i work as front end dev and i've been learning a lot of new stuff you're amazing thank you so much jessica we've seen jessica before right she's dropped a lot of donations before she's always coming up and showing up in these uh in these live streams so we massively massively appreciate you jessica and that's awesome she actually works as a front end dev and she's still learning so like guys these cater for anyone who's starting out on coding even if you're an experienced developer we have people like frank logan who's in the in the chat right now who are experienced developers and they are actually still learning and continuing on that journey so even i by doing these builds i'm learning so make sure you guys are always upgrading going that next step and keep staying tuned and have this positive energy like jessica that's awesome thank you so much never stop learning guys thank you so much jessica what part of mexico are you from drop it in the chat we want to know and also we're at 1969 likes 30 likes away 31 likes away from 2 000. oh my god i'm so excited thank you guys so much 119 in chat donations dude wow that's insane love that dude nice and we still have over half a thousand people holy crap this is so dope once you say like that it sounds like whoa yeah it's insane because we just see a number and we kind of get used to the number when you think about it it's like yeah this is crazy right that's true so we've got this input set input and by default it's going to have an empty value as its initial piece of state we need to then import it from a react so what we need to do is go here and say use state and that will import it from react we saved that file and then we go down here and what we need to do is this is a very slick way of implementing this so here is where we have the input field that we want to map to our state right so we're going to go ahead and do a value of the input field it's mapped to our input and the input is the actual um the the key the variable that i've named it here now notice when i type so actually we need to go to the actual app sorry notice when i type so let's go ahead and do this notice when i type it doesn't let me type in so i'm actually banging away at the keyboard right now i need to actually add something called an on change and on change will fire off an event every time i uh i start to type and what we're going to do is we're going to set the input to e.target.value which is essentially what i just typed right so it's a very like sort of weird thing but that's exactly exactly what you're just typing in uh forehand kureshi says top quality content amazing delivery content quality sorry react is super cool especially when it's taught this way hats off to you guys i appreciate that dude massively appreciate that thank you papa react hey that's it papa frank nice so we've done that for the input fold and now when i type it works you see that so everything's good on that front we're going to do the same thing for the second one and we're going to give this one just a simple we're going to say image url right set image url there we go and for this one we're going to do the same thing we're going to say value equals image url so value equals image url and then we're going to say on change when we start typing in it fires off an event because it's an arrow function we're going to say set the image url to become e.target.value which is essentially what we just typed in now to test that everything is working and that we haven't broken everything we can go here to the image url and we can start typing in and it works so everything is hooked up correctly justin phillips says you guys make programming so damn easy and fun love that dude that's what we're going for oh man you guys keep us pumped man thank you so much appreciate exactly 1994 likes guys oh my god six likes away from 2000 let's freaking go that's insane dude that's awesome dude we're about to break 2k likes 1995 that's when i was born exactly 2 000 likes hey let's go insane thank you guys so much guys if you were here when we just broke 2 000 likes shoot and story and tag me and uh frankie and let us know that you were here at this moment when we just broke 2 000 likes that's insane guys thank you so much on instagram guys thank you so much that's insane yeah thank you all right so what we were working on is the we actually just went ahead and finished the message sender right so we did that and what we're going to do is also when we type in what we're going to do is naturally that behavior of when we sort of enter something is in what what we would do when we enter is we'll do some some clever database stuff right here so we'll say some clever db stuff over here but then what we would do is we would want to reset the um reset the values inside of this so now what we should see is when we type in so let's go ahead and type in so we can see type in here and we can go here and type in here and if i hit enter boom it resets the fields which is really clean very very nice right so now what we're going to do is sub courses should i show these projects on my resume yes 100 show them on your resume uh it will help you get a job and a lot of people are actually getting jobs with these resumes and we've seen it so make sure you go ahead and do that so now what we're going to do is we're going to go back to our feed component so feed.js and here what we're going to do is we are going to this checkout feed here we actually have the post next right so the post is the interesting component that we are which we know facebook for is how you can post content onto your feed and what we're going to do is just keep it simple right now we're going to go ahead and do this we're going to say feed dot uh sort of feed yeah there we go and the feed oh sorry no feed sorry post post there we go and let's go ahead and create that component so post dot js as such we do rfce boom we see that we do class names let's go ahead and do class name equals post and we need to go ahead and import the css files import post.css go ahead and create that file so post.css and now what we're going to do is and somebody actually just said it's it's really it's really cute that you guys enjoy and appreciate every little like and support guys we we see every single donation every single thumbs up everything that you guys give us in terms of support we see every single thing and and knows one thing is bigger than another like we really massively appreciate any support that you guys show us isn't that right frankie like it never changes for us like when we that's one thing which got us to this position and it's something we'll never let on to let hold of yeah it's true man like that's what i talk with cause a lot of times you have to be humble in your life because once you have that level of humility to yourself that you can enjoy every small win then you're gonna be able to recognize bigger opportunities because once that you're in that that mind zone of thinking like oh i'm too good like sonny can think he's too good but no he's a very humble guy and he's always sharing everything with you guys he doesn't think he's like the best or anything that's what's going to get you to the next next levels and we just got another donation by faraz khan thank you so much man and he says recently working with react and d3js have basic knowledge knowledge of react following your session will make me pro soon hell yeah awesome lots of stuffs you guys are amazing thank you nice man d3.js is a really nice way of handling data is in that i think it's number crunching pretty much so it's whenever you're handing numbers or sort of graphs you can use d3.js i think that's what you're using it for uh but that's awesome yeah really really nice uh somebody says man maybe mark zuckerberg is watching this live dude can you actually imagine mark zuckerberg saw this live like it would be so funny huh i mean i could man who knows like yeah that was in facebook and somebody was building out to be like damn these guys are pretty lit you know yeah imagine him dropping a donation that'd be insane exactly like hey this is mark here this is a hundred million dollars you know just a small token of appreciation nice it's what was in my pocket exactly yeah nice so we'll go ahead and we import that component which is the post right so we're gonna just uh sort of exaggerate and drop like three posts and each post is going to have a few things it's going to have let's go ahead and open up our post it's going to have uh let's go ahead this is where we get the props so we're going to destructure the props and we're going to get a few things we get the profile picture the image the username the timestamp and a message from our from what we expect so i'm gonna go here and do this and then what we're gonna do is we are gonna go inside of here and the post consists of a few things right so let's go ahead ahead and look at this main app so right now we actually haven't got the post here but we're going to go ahead and create it for you guys so the post has a few sections so the first one is the top so we're going to say post top just like we did before and inside of the post op we have uh we have an avatar and we have some text right so i'm going to go ahead and drop that in so we just got two dollars which says global persistent to keep log in on refresh please um so today thank you so much firstly for the donation so persistent login is by default when you do a username and password logins with firebase authentication but when you're using google authentication it doesn't persist you're right so we are we haven't actually covered that in this in today's world um but we will show that in a different build um it's a little bit of work to do that and i think we have a lot of stuff we still need to build so we're going to try and get that squeezed in instead of getting the uh persistence yeah thank you thank you so much appreciate it man thanks dude so now what we're going to do is here is the avatar that we're going to be popping in the avatar by default we'll take the profile picture prop then we have the um times so we're going to go ahead and remove this for now sorry so we're going to have a p tag so let's go ahead and drop this out the p tag here will say the time so it will say something like uh i'm just going to say a timestamp goes here right and then here we have the username prop so it's a h3 tag and so forth so the avatar is not defined so we need to go ahead and import that so i'm going to go ahead and do our little smart import trick that pulls it in at the top nice so once we have that we can see that we've got three posts we've got timestamp timestamp and an avatar so it doesn't look too great at the moment but we're getting there uh we're gonna have a bottom section so let's go ahead and add a another div which says post bottom uh such there we go and then this one is going to have the message itself which sits inside so this one will have a p tag which has the message itself so this would be the post message inside of that underneath the post if we're actually going to have another div which says post underscore image and this will be the actual image that shows up right so this would be the actual image like that um and then this will have uh and this will have actually a image tag which will take the image which comes this through as a prop up here so that that's where it comes in like that uh we just got another one oh damn from priyank again again thank you so much man yes dude you guys are so humble and amazing thank you thank you man so so much so much we really do appreciate every little thing yeah whoa whoa thanks to william cruz we know what chf means and that means i think it's uh swiss wiz franks right yeah yeah five five swiss francs that's awesome so much appreciation thank you sonny you think you can um can we see like what the code is connected to on the real build so right now you're doing the message and then you're doing the image right yeah that's what we're writing right now so where would that be uh so this right now is actually so the reason being is i think the database went uh i think it didn't go down but i think seriously yeah it might have got pulled yeah so let's go ahead and quickly try and log in if we can't then and somebody says the image is flickering right so yeah this is i don't know why that's happening guys but it's a very small problem uh that we can't really get around while we're live so i'm sorry about that but yeah it should be fine for sure but yeah what i'm going to do frankie is i'm actually going to pass in some dummy there so we can actually see the component as we do it nice sounds amazing yeah i think that'll be that'll clear out a lot of people's doubts views and also know exactly where we're at right now awesome so let's go ahead and actually do that right now so inside the feed where we have the post what we're going to do is i'm actually going to go ahead and pop that in right now so we have a feed and this will actually take in a bunch of props so let's go ahead and do the following so for a post you can have a bunch of different props so in this case we're going to have let's replace this so the id we can ignore that for now the profile picture let's go ahead and grab a profile picture so i've got one over here so copy image let's do this save the message will say wow this works i'm like wow this works the timestamp let's just go ahead and say like um this is a timestamp just for very like like very obvious reasons and then they're here we'll just say the username the student the instagram handle says do ssango or something the image uh here for the image we're actually gonna go ahead and grab an image just go to google images i'm gonna quickly pop it off camera for a sec so let's go ahead and google image because we never know what pops up on google images um let's just type in code i'm gonna grab a picture real quick for you guys so let's go ahead and use this one awesome boom boom boom and then here i'm going to go ahead and pop that back in right here so there we go now in this video it was fast yeah so that's it so we have like a we have a post here and i'm going to go ahead and post another one um so we have two posts and this one the second one is not going to have an image the first one is going to have an image so we can see two examples of how that will work yeah and then well that's a good idea frankie actually that you said that because then we they'll be able to get a very visual representation of what's going on nice that's awesome i see that mohamed asks what roadmap should be in one's mind and what list of things should one plan out like documentation class diagram and dfd are these necessary before actually writing codes for project um i can't actually see that uh so just say that again yep he says what roadmap should be in one's mind and what list of things should one plan out like documentation class diagram and dfd are these necessary before coding so honestly guys this is what you learn at like university where they're like oh you're gonna need class diagrams dfdes and this and that like truthfully screw all of that stuff like screw all of that yeah take it from a developer who's been coding a long time like honestly like it's only when you get into very like technical discussions and things like that if you've got a bunch of you developers sitting around and you need to break down a really complicated problem then maybe you might introduce diagram but even then it's kind of like a custom diagram it's not like a class diagram or dfds honestly i would say just start coding these projects right it's like start coding these projects start doing actual practical hands-on coding but truth be told guys yeah don't worry about all that stuff i remember because i used to do this stuff uh i used to like draw diagrams and all that and you just waste time if i'm honest like so don't bother wasting your time we got another oh we got another donation dude wow hdk with 100 indian rupees thank you so much man he says awesome content kudos to the team hey that's cp team the cp family thank you guys so much no i appreciate you all awesome dude thank you so much the greatest ever says screw all of that with british accent you know hey and guys and this is living proof so frank's a developer inside of pwj right now and he's had he has over 10 years of experience he just signed a six-figure client right so sonos the company that do the amazing speakers frank is working with them right now and it says just he says just push to production no diagrams exactly guys just do it like when you make the mistake you'll learn but doing all these diagrams and stuff like that you're just wasting time so just start and do the thing as it happens right yeah like she already both says just do it just exactly you know he he actually had a point he actually was talking about code you guys didn't know yeah exactly now you know yeah so let's go ahead and actually style this right now so this stuff right here let's go ahead and make this look a little nicer so what we're going to go ahead and do now is i'll make this a bit smaller so you guys can see that um what we're going to do now is we're going to go to post.css and inside of post.css let's go ahead and drop it here suppose to css the first thing i'm going to do is do the following so i'm going to say a width of 100 a margin top of 15 pixels border radius 15 pixels background color white and a box shadow so you can see now there's a very subtle box shadow but you can see this image is messing everything up right so this image is messing everything up this is inside of a container called post image so we're going to directly attack the child and say it only should be a width of 100 of what the parent container is and immediately that pulls everything in all right so immediately that's going to pour everything in and it still saves the day a bit right so the next thing we're going to do is we're going to target the post top so let's go over to the post top and we're going to say display flex position relative so that way all the children inside of this container if we do absolute positioning they'll be relative to this parent container and then we're going to say align item center to keep everything on the vertical axis we're going to say padding of 15 pixels we also have a very good comment here by one of our own students david jonathan he said it's quite unfortunate some clients waste development time on it yes it's true they do waste a lot of time doing this stuff like the diagrams and stuff like that um but it's actually um it's a it's a it's a good point and david jones is actually doing very well right now and he's inside of bw speaking with him on one of the coaching calls so that is awesome to hear from you dude uh nice so the next thing we're going to do is for the avatar so the actual image i'm going to give it a margin right so that way it doesn't touch the text so we pop that in and it pushes the text away a little bit next thing we're going to do is add a h3 so i'm going to go ahead and do this so h3 font size medium and that will drop the text to make it a little bit smaller we're going to target that timestamp underneath which is a p tag a p tag sorry inside and that's going to be small and it's going to be great so that's became gray underneath there um awesome samet angelica says i recently did a netflix con and i received yeah and i received an amazing response on linkedin i think i actually might have seen this one um and you guys i feel more and more confident every single day credit goes to you guys thank you that's so awesome dude reading stuff like freaking awesome man yeah those projects are going to build up your confidence guys the more that you build the more confident that you'll get and also linkedin is an awesome platform to share to meet new developers and yeah like i said share your projects so sumeet yeah i think we actually saw that man that's amazing if you guys do use linkedin follow clever programmer so you can see what we're up to yusuf is the one that's actually posting there a lot so thank you guys so much exactly naveen just dropped a good question he says hey any clone with google authentication dude you are in the right place today we are doing today we are doing google authentication so you're in the right place my friend uh and also is esau mirai maurice says what do you think about style components and how to know when to use them a quick thought on this because i do like start components they're very powerful because they allow you to combine props with css in an easy manner that's all i'm going to say at this point but definitely go ahead and play with them if you have heard of them before and we'll start using them yeah we're at 2 2093 likes let's freaking go almost 2 100. wow that's insane guys and 131 dollars in chat donations that's going to be more thankful that's amazing thank you guys love that nice and the build is looking really clean with the with the new image precise man i love it yeah it makes it very very simple to follow makes it very very nice for the bottom half of the image now where the text is we're going to add a little bit of padding we're going to say margin top of 10 pixels margin bottom 10 pixels and padding 15 pixels 25 so top and bottom and left and right and we go ahead and do that and it pops in like this so you're starting to look very clean as we do this now the next thing we want to do is add those buttons that you see underneath so before we actually had some buttons under here which were like the like button the share button those sort of things right so how do we go ahead and do that so i'm going to create a div underneath here and i'm going to say div dot post options like this and each option is going to have its own div so we're going to say div post option so singular is going to be each of the individual ones right so the first one we're going to have is a thumbs up icon with a p tag which says like just go ahead and save that and this thumbs up icon let's go ahead and import that i'm going to import a bunch of things at the top so i'm going to go ahead and do this go ahead and do boom as such and also the account circle icon let's go ahead and do this so i've just imported a few different imports at the top there we go and this one actually you can see we get the like button right so you get a like button at the bottom so i'm going to do the same thing for the comment share and for the account button so i'm going to go ahead and just drop those in underneath here so these are the same things but for different icons and different pieces of text and the last one has a downward carrot icon so there you go and what we're going to do now is we're going to style it so each one had a post option and the outer one was post options so for the outer post options what i'm going to do is i'm going to say post options padding top of 10 pixels border top of a one pixel light gray which give it that light grey at the top and then display flex which meant that it went into a row justify the content to space them evenly so as it resizes it'll be even font size medium color gray cursor pointer so we get this nice hover effect and then the padding of 15 pixels so that's very clean and then for each of the attention sorry about that pay attention to the small details like that like the border top the light gray color of it sometimes like we don't pick up these little details but it what it's what makes an image stand out on your app so you know don't forget those little details it's going to take it to the next level for you exactly they're going to be really really important points guys i realized that i might have put the camera over a little bit on the side so i've just moved that now um yeah these little things are very very important guys so make sure you don't miss those um nice so now what we're going to do is for we want it so that it has a hover effect so when we hover over the option itself uh it's not so sorry for the first thing we're going to do is actually target each of those options and we want to center those things right because right now the icons are slightly off so we're going to do display flex align item center justify center padding 5 pixels and flex 1 so that they try and use up the entire container there we go and then we're going to target that text and we're going to push it slightly away from the icon so that's the p tag we give it a margin left that pushes the text slightly away and then we want a nice hover effect so let's go ahead and add the hover effect right like this so it gives it a hover effect and now if i hover over it you get this nice little hover oh it looks so clean now it looks like individual blocks of post super clean right yeah really really nice and now if we go back to our app.css and we can get rid of that height 100 view height which was stopping it from showing before because now we have an app which is long enough to show the rest of that bro look at this praharsh says wonderful stuff guys this is my fifth build fifth build loving it so much it's 2 a.m right now and it's third day in a row wow oh it's amazing man thank you so much for sharing appreciate you exactly and that summer there guys will pay off so keep on coming up keep on showing up that's awesome someone says well here is 5 30. esl maurice oh nice and says it's crazy to see that you guys are from just different parts of the world it like it's just seeing what we're doing and the fact is that me and frankie have never actually met in person which is insane and we're doing this stuff like so yeah we've got some insane missions yeah we will we'll meet soon dude definitely nice yeah for me for me it's 1 30 p.m at pst time and then sunny is in what time is it for you 9 30 p.m bst right pretty yeah nice man so it's late at night for you and yeah we're here we're all getting connected together at the same time learning react let's go exactly let's go guys nice so um the next portion that we're going to actually do is the widget right now the widget is actually it's pretty interesting because the widget is actually easier than we think to build this part so let's go to app.js and here we had the widget portion which was the right side of the app so when we talk about the widget we're actually referring to this part right here so this actually it's very very nice sort of widget that we can scroll down and see right that one right there so in order to do that what we're going to do now is actually go ahead and do the following so and what i'm going to do is i'm actually going to swap the position that they're in reason being is that so that way everyone can actually go ahead and see the widget that we're building on this side right so here we have the widgets right so i'm going to go ahead and create the widgets component so the widgets component and we're going to basically go ahead and do widgets.js oops that should be widgets rename widgets there we go rfce wait for it boom there we go and then we do move our screen to the left side bottom left side uh yeah i've actually moved us into the center okay you think that looks better oh we can oh yeah we can actually yeah we can move it there that's good i think it might yeah i think it might look a little bit cleaner because of a lot of things going on in the center yeah there we go nice that's better so so now we have div class name equals um widgets there we go widgets and then i'm going to create a import so i'm going to say import widgets.css like so there we go and then for the widgets guys so this is actually um an iframe so the way we got this is i think you can actually go ahead and uh it's an iframe that we got from facebook themselves and it links to the clever programmer page and this is something which is available on facebook i won't show you guys it but all you have to do is pretty much type in facebook embed and you'll be able to see that and suddenly what is the knife frame because i didn't know that before going into this call so an iframe is simply basically imagine like you had another tab open right and you had a website on that tab but imagine you're basically just rendering that just in a portion of your web page so it's like in some sense like an embedding another web page into your page right so that's the way that's essentially what we're doing so in this case where we have it like this is our feed we're going to render it here right on the right so what i'm going to do is now is i'm going to pop in the iframe so this is actually got a width of 340 a height of 100 and then here inside the actual uh parameters we're changing the width of 340 and the height of 1500 right so it actually gets a high sort of some height to it i'm also going to change the style here so it's going to be border none overflow hidden um and then this stuff you can keep uh as it is right but you guys can pretty much go ahead and copy that and it will work for you guys um and then what we're going to do is easy wow that's crazy yeah that's literally it and then we go here we all we need to do is go ahead and import our widgets so be careful because it actually does import the wrong widget when you do it that way so we want to make sure we import our local widget not material ui widget do that and if we refresh we should see now it says widgets.css does not exist so we need to create widgets dot cs i don't even think we do we use widgets.css but let's stick to the convention and now boom dude there we go whoa there we go let's go connected to the real clever programmer facebook page if you go to the check the facebook page you go check it out you're gonna you're gonna see that it's exactly these posts and you can see us live right there at that moment so that's exactly that's awesome dude nice check that out guys so that's the actual website right now um it looks super clean and you can see like look it's very responsive and you can actually scroll down this thing and you can actually see everything like this that's going on right now in facebook so this is a very nice enhancement that we added as a little sort of last minute i do it's very nice to have even in twitter clone we actually added a sort of a widget to the right side i thought it's a very nice addition so in this case that's a nice little add-on to this great skill to to have honestly i feel like it's going to look so good if you guys apply that in different projects it it really adds so much more spice to that project and something here from who said this oh yeah so the leroy fernandez says what are the upcoming mern stacks builds about so son you want to take that yeah so we have three big builds coming guys we have the tinder the tick tock so in in the correct order we have the tiktok clone we have the tinder clone and then we have the whatsapp clone all when that are going to be built using the man stack and that is on wednesday thursday and friday respectively mind blown this is gonna be a stay tuned guys that's gonna be insane man that's gonna be a lot of fun david and sunny are gonna kill it for you guys and make sure to if you already did one of those you know builds make sure to add those extra functionalities or learn how to build it in the mern stack yep exactly guys make sure you do that and also guys please don't spam the chat because you're not going to get hurt if you do that i'm just going to block you so yep so don't do that yeah let's keep it to learn here we're at 2141 likes by the way that is nice let's go crush 2 200 likes guys thank you so much and 131 dollars in chat revenue man holy crap insane insane logan says i really need those man stack builds definitely we will bring that in yeah 100 so so with that said let's carry on strong guys so here we have the app and what we're going to do now is we are going to go ahead and actually build in the database functionality portion of the app so let's go ahead and actually build out the database part of the app right so what we're going to do now is i think the first step what we should do actually maybe is actually do the login let's do the login part first and then we'll do the the real-time database right so the login what we're going to do now is we're going to assume so to actually have the login we need to have some kind of user in this state right so we're going to say if there was some kind of user so imagine let's just do a very simple example so imagine there's a user right if the user was no then here what i would say is i would say right if there is no user then render the login page so render a login page so in this case let's just do a very simple h1 which says i am a login right otherwise render out the rest of the app otherwise render out the rest of the app so otherwise render out all of this stuff so that's how i would sort of at a very simple level approach this so this is freaking out because yeah whenever you have sibling uh components like this you have to wrap it in either a div or a fragment so this is a jsx fragment and that will fix that error so now what this will say is there is no user user is no right so if we refresh the web page it should actually say a login right and then once we like we went through our login that's just like our sort of login process then what would happen is it would render the rest of the app so in this case um i think it's maybe freaking out because i've used a normal variable okay yeah so you see we don't have a user but let's say i logged in and the user was just to say very simple level sunny right so now when we was if we had to refresh the webpage it would actually show the app so you're essentially logged in right so at a very simple level that's what we're about to do right so uh somebody says that you're about to do redux anytime in the future we're going to be using the react context api today so make sure you uh stay tuned for that pavan kumar whoa oh my god oh no you didn't bro oh my god oh my god with a 50 donation wow holy crap given so much to us as in value from you know the community donations helping other students out man thank you so much frank we really do appreciate you we got the same name by the way amen i resonate thank you and he says read that out sonny yeah he says oh my god just got the first huge deposit in the bank from the client they sent a speaker device and the new macbook pro all because sonny made an awesome clone of spotify so i could show it to the client i wanted to share this win hustle oh my god damn dude a brand new macbook pro oh my god and then the speakers i love the sonos speakers man yeah them speakers are insane and they're actually like they're pricey speakers dude they're really really good speakers yeah that's awesome dude frank oh man you're crushing it dude and i'm so it makes me like it's such a warm feeling when you said like it came from the spotify clone like man like honestly it makes all of this worth it yeah that was a fun bird dude oh man that's insane thank you so much frank damn dude that's a huge win thank you so much man i'm glad you have the money to bank too that that always is you know once that happens you know it's real before that you're always kind of like i don't know if it might happen but that makes it solid thank you bro exactly appreciate you solid stuff dude that's insane keep crushing dude keep crushing where we are frankie with the donations in right now damn now we're at 181 dollars holy we're making a full-time job out of this that's insane dude 155 likes as well oh my god let's do it guys let's do it so now we are going to i'm going to move our image over to the right now so that's about there we go so now we're going to actually rather than saying h1 login i'm going to actually do a login component oh damn dude if fosu just dropped another five pound donation thank you so much that's amazing he says can't help it guys this is dope would you consider doing something with next js or strap js strap ijs at some point so i think it's a strappy js at some point on xjs yeah so 100 did yes the next gs i've used a previous job it is definitely um something which which uh is definitely tricky when you're picking it up for the first time so i would be more than glad to sort of go through this also to improve my knowledge on it so that'll be that'll be fun um so yeah dude it felt so 100 thank you so much for that donation and sg707 texas i'm sure uh wait no it wasn't that one they'll say tara slim says brother your haircut is fresher than this code [Laughter] yes nice thank you ifosa awesome dude so let's go ahead and create the login.js component and what we do is rfce and there's a bit of setup that we need to do at this point so i'm going to go ahead and create the class name class name of login so there we go and here i'm going to do import and i'm going to do login.css boom save that there we go and now what i'm going to do is uh did i create the login.css i don't even know login.css there we go all right so with that said now what we're going to do is we are going to go over to uh create this login component so the login component is fairly simple it's just gonna have a few things it's gonna have um a a container which says a login logo and this one is gonna essentially just have so if we go back to the actual uh build itself when we refresh we will have a container and this will have login logo and this one will have two images inside of it so they're gonna have the those facebook images so it's gonna have two images you have the facebook logo and then the facebook text logo and then we have a material ui button which has a sign in right so we're gonna have underneath that we're gonna have a material ui button which says type submit and so we on click sign in so it's going to fire off a function called sign in which means that we have to create that function so at this point i'm going to go here and i'm going to say const sign in so consign in equals and we're going to do an arrow function and this arrow function is going to basically do some clever sign-in stuff right so that should do that now this is what we want it to look like how does it look right now let's go ahead and check it out so let's force our app to render there by changing the user to null right so let's go ahead and do that and if we refresh this now it should go ahead and force the user to go to our new login component and this might fail actually because we haven't imported login there we go i thought so so we have to do that and we should see now it says button is not defined now so inside of here we need to import the material ui button there we go and we do that and that should go ahead and pull it in so there we go so you can see these are huge right now it's got a tiny button and then the massive one uh massive logos over here so let's go ahead and style this so it gets it doesn't look like this horrible stuff right now and the way we're gonna do that is i'm going to first go ahead and target that that image because with the image like that we can't actually see anything so i'm going to target the div i'm going to go inside the login container the first div the image and i'm going to say object fit contain to keep the aspect ratio and a height of 150 to bring everything smaller that will immediately pour everything quite neatly in right the next thing i'm going to do is i'm going to go inside the first div and what i mean by the first div is is pretty much essentially the the container which contains those images display flex direction column that will actually go ahead and change it and now guys you see this is at the top of the page there's a neat trick to getting anything centered in vertically and horizontally and the way you do that is you pretty much go ahead and do you target the overall logging container you do display grid place item center and a height of 100 view height and it gets this really nice centering right the next thing we want to do is target that button so that button looks really nasty right now so we're going to target we're going to say width of 300 pixels give it the facebook color and give it the uh sort of a white sort of background and font weight a little bit heavier but you see when we hover over it by default the hover functionality is is nasty we don't want it to change to that color we want to instead add our own colors so let's go ahead and add that here we're going to say add this color add a white background color and add the text to go blue when you do that so we save this now and we do this uh oops i've actually gone ahead and broke something there so i need to actually change this to be this right here there we go and now there we go so you see it's got a very nice ui to it and when we click it look at that you get a nice ripple blue ripple effect beautiful yeah i see right so what we can do now is we need to actually go ahead and that firebase file that we created earlier we're going to go into that file so we're going to go into that firebase file that we created earlier this one right here and what we need to do is we need to bring firebase into our project so let's go to our terminal and we need to do mpmi mpmi firebase and this will actually go ahead and install firebase into our project right it's going to install firebase into the project and then what we can do is we can start coding it while it's doing that so at the top of the file we're going to say import firebase from firebase and this will pull firebase modules into the firebase firebase variable and then we have a few lines so the first one is we need to initialize the app so this is the key that we got earlier this is our config file and all we need to do to connect our front end our react front end to our firebase back end is this where we say firebase equals firebase.initialize app with that firebase config so you just literally pass in the object right here and that will actually connect everything together and now what we're going to do is we are going to get access to the database so we're going to go ahead and do this we're going to say cons db equals firebase app so the one that we just initialized access firestore and before while we do this guys let's go ahead and go over to firestore and set this up so oh that's a bug on their side uh so we're going to go over to firestore and here guys we go into firestore we scroll to the top we say create database this is on firebase and what i'm going to do is they got a buggy website right now and we go to start test mode next we don't care what location it's in we click enable and this will actually go ahead and build us a real-time database on the backend for us so while that's doing that we're going to go back to our code and we basically use this and this variable will be what we use to essentially go ahead and handle our database stuff the next step is setting up our authentication so here we do const auth equals firebase so the actual firebase module dot auth and this one uh is actually going to allow us this auth is going to allow us to do things like logging in signing in and search etc now what we need to do is we need to go over to this tab over here so it says authentication so if i make this full thing you can see authentication go to sign in method and i want you guys to turn on google sign in so here click on enable and then you need to set a project support email so go here and let's just go ahead and click save and this will actually go ahead and enable the google login right so this is google logging in like this is google login service so what we're going to do then is we're going to go back to our code and what we need to do now is is actually tell the provider and then we need to actually get something called a provider right now firebase gives this in a very nice format we say equals new firebase.auth.google.provider and this will actually tell google this will tell firebase that we want the google login service now to access this stuff outside of the um outside of the file i'm gonna have two exports i'm gonna have one which is a explicit export which is auth and provider and then i'm going to have a default export which is a db because we're going to use a db in more circumstances where as compared to the other two so with that said let's go what i like about this build is that you know we're using react react is made by facebook backend we're using firebase and that is made by google and then we're using google authentication too so we're using a lot of the google's ecosystem on the back and then we're also using react which is facebook on the front so that's it's an amazing way for them to all come together yeah exactly it comes together so nice especially when we deploy it it's like it's really yeah it really really ties in together nice so the next step now is i'm going to actually move our image a little bit so we can see the sign-in button there we go nice so now what we're going to do is inside of our login.js we're going to have it so when we click sign in so to do the sign in stuff you would think we have to do stuff with tokens we have to mess around with all this other weird stuff and all that right but we don't all we have to do is we have to import auth and provider from firebase and this is our local firebase so author provider from our local firebase and then what we say is we just say literally we say auth dot sign in with pop up so sign in with pop up and you can see it pops up for us and then i'm going to use the provider that we just set up so the google one that we just saw and i will say once that comes back then get the result so whatever the result was and go ahead and basically let's just console.log the result for now where it says console.log the result and i also want to do something i'll say if there was any error for whatever reason i want you to go ahead and alert on screen the error message so they usually come back with some kind of message we can do that now frankie do you reckon that was it like do you think that's too easy or do you reckon like it's there must be more steps right like that's kind of like i mean they're i don't know man to me that was really easy i feel like you know there might be something missing but i don't know you tell me i mean it is insane because like we literally we click this button now and boom oh wait no this is the this is not this is not the local this is the local we're here and let's go ahead and actually hook this button up to our on click so we need to refresh so yeah this will actually uh oh so somebody said you've got to blow the air horn so if this goes in right now oh we just got uh an ars what is ars i'm not sure christian david dropped 100 ars currency let's see what that is that is argentinian peso argentine peso peso thank you so much man really really appreciate you really appreciate that he says why are we acting not vue.js sorry if you already answered this one thanks great content three points one the entry uh entry to react is much easier than any other sort of uh library or framework in my opinion two is the most wanted and in demand language at the moment and three it's just such a badass library like right now we're doing we're gonna be covering the mern stack we're gonna be covering we actually i mean we need a little like abbreviation for what we do like in terms of firebase that kind of stack i think we should get something trending um because like we have an amazing stack right here that we we build some really powerful apps off but yeah the main reason is it's super powerful the entry into it is very simple and it is the the mo in most the most wanted and in demand library out at the moment and that includes with frameworks as well so yeah 100 definitely go and learn it nice so let's go ahead and click sign in and boom we get our little google sign in let's see if it works and what i'm gonna what i'm gonna do is while that's loading i'm gonna open the inspector on the uh on chrome oh look at that dope right damn damn dude so just by pulling the provider that you had made on that other what was it was it the okay i don't remember what file it was yeah the firebase js one right you are pulling that provider to the actual the authentication on that other page what is it uh so we're doing it over here in this one so in the login one okay and so that's what's being pulled and that's why it works just by signing in with pop-up and then provider right because you can choose different ways for that provider to appear okay on the page it can be a pop-up like this that's amazing man it's really just like clean how they do all of this like and then even when we click this now so no it's keep an eye down here right when we do sign in let's go ahead and make this a little bit bigger but it should redirect back to the page and it will actually go ahead and console.log the user so this is the user guys so if i go ahead and click the user you can see it has my email it says my display name it even has a photo url so this photo is actually a picture of me wow that's insane so this is all my google like sort of like user authentication stuff like this which is insane right like it's really really crazy that we just did this that like uh and also sg707 actually gave a really good answer he says honestly it really doesn't matter which library he goes just learn the tech that can get you into the company you want really good way of putting it so true man and also i love the way that you every time you implement something sunny you test it out right away so i think that's amazing and it helps with the speed of your builds and also just saves you a lot of headaches at the end of the day too 100 dude like that's the main thing that we want right like we want to test everything we do it as we do it so now we have a problem though like we get the user at this point so essentially inside of here if i do result.user we actually have the user at this point now how do i then use the user at app.js right so how can i actually get the user here and i don't want to do prop drilling i don't want to have a piece of state and pass it down here and there so now we're going to introduce something called the react context api right now bro don't want to don't want to distract you but we're at and ninety 2195 likes man two hundred that's insane guys thank you so much we're also at 189 dollars in chat donations whoa man 200 almost for this build in this build in this moment oh my god thank you guys so much that's insane that is insane guys and they love us oh it just broke 2 200. hey you guys for listening paying attention smashing that like button we really really appreciate you exactly guys we love you guys and we massively appreciate you watching and being here supporting us when we drop this value to you guys we just got another donation by ethical whatever uh dropping in hey 40 rupee that's awesome dude thank you so much nice so guys with that said let's continue on strong so we have the login right here now we basically need a way to keep track of the user throughout the app regardless of what component we're in right so essentially imagine like we have our entire app so let's just say this is the entire app what we kind of want is something like that kind of wraps oops some we want something that essentially wraps everything right so it kind of wraps all of the stuff uh we just got another donation dude from the goblin 306 you're doing a great job my knowledge increases thank you dude that's awesome almost man i appreciate that yes poland slothy is the is the actual currency for that so from poland i love it man thank you so much awesome dude so now what we're gonna do guys is essentially what we have here is we're gonna wrap the entire app with something that i like to refer to as somewhat of a data layer right so this is a data layer and this is what we refer to as either redux or in this case we're going to be using the react context api so they're two different things redux in the react context api but there's the same pattern so if you learn react context api you can use redux very very easily right the same pattern basically sunny what are you yeah were you gonna explain that what do you what do you see as a dif uh so the it's it's mainly the implementation effort so redux is extremely powerful but it's very it's much more difficult to implement react context api is extremely easy to implement uh but they both use the same pattern so there is overlap right so there's lovely overlap there and also context api is really i mean like you can do everything you can do in redux uh without the sort of plugins and stuff like that but yeah really really powerful stuff so with this said when we push things inside of this data layer whether we need it inside of the header component whether we need it inside the sidebar component inside of the widgets or inside of any of the children components so imagine inside of widgets we had another use case so you see like it could be no matter how many levels deep inside of a component you go you can actually use anything that we push into this data layer all right so when we log in so every time so imagine when we log in in the login page we push the user into the data layer yeah into the data layer so we push the user into there and then basically what happens is once they're inside the data there we can access them inside of any component and we also dropped a really really good video about all of this stuff guys so with that said you guys can actually go ahead and check this out um you can go ahead and check all of this stuff out inside of that video but we're actually going to move what is it called it's called something like the missing explanation for redux right we got it on our channel exactly it's like the missing explanation for redux and that's actually a really awesome video and it will take you through everything that you may be unaware of or unsure about when it comes to this stuff but we're going to move fairly fast through this part so what we're going to do now is we're going to essentially have something called a state provider which is what we sort of assume is the data layer essentially so state provider dot js and inside of here guys honestly at this point i want you guys you can copy and this will be pattern recognition uh i want you to watch that video afterwards and it will explain but i'm going to quickly run through a breakdown of what this code is so at the top we have our imports we're importing the context api stuff we're importing the user reducer and the use context hooks this is essentially preparing the data layer so right here we're essentially preparing the data layer the next line is essentially something what we call a higher order component and we're going to be using this to essentially wrap our app so the main purpose of this block here is it allows us to have something called a state provider and we basically just wrap the app inside of the state provider and it provides that sort of data layer functionality now whenever we want to pull something from the data layer we use this use state value hook right so a nutshell that's what we're doing so you guys can copy that code and then what we're going to do is we need to introduce something called a reducer so reducer.js right now reducer.js i'm going to keep coming back to this file um but and then not sure what i'm going to do is i'm going to drop the code in right now and explain it so this is the initial state of the reducer so this is what the data layer initially looks like so right now when we start off we're going to have a user which isn't logged in and then no we then have somebody some actions right we then have some actions and basically what these actions are is imagine we had a data like when we have that data there you can dispatch actions into the data there so and then what we do is inside the reducer we listen to it so we say if you just received an action for example the set user action then what we want to do is we want to return what the what the new data layer will look like so we're saying return whatever it currently looks like but change the user to whatever we passed in as a user payload inside of the action that we dispatched and then if we don't listen to the certain action we can return the state now this may be confusing it may be sort of uh a bit like sort of abstracted but you want to go ahead and check out that video we explain it and break it down really nicely but the main thing is guys again just look at how we use this that's the main thing that i want you guys to focus on right so let's go to index.js let's go over to index.js and inside of here what we're going to do is we're going to have we here we have the app and we're literally going to wrap the app inside of the state provider component right so we're literally wrapping the app inside of the state provider components you see it's actually wrapped inside of the state provider and then we're going to import the state provider from the state provider file and we're also going to import the reducer and the initial state from that reducer file that we just created now those three steps right those three steps are honestly so somebody says personally redux state management seems more logical than the context api honestly it's the same pattern it's actually the same pattern you're dispatching things into the uh reducer and you're dispatching actions the reducer listens to them it's the exact same as what we do inside of um inside of redux so it's essentially like somebody said it's like a global state right it's like a global store so that's how you prepare the data layer now how do we use it so let's go back to our login uh login.js so login.js let's go back to login.js and where we have this console.log we don't just want to console.log here but instead what i want to do is i actually want to dispatch so what we're going to need to do is first thing we need to use this very powerful hook so the use state value and remember that was the hook that we built inside of the state provider which allows us to pull information from the um the data layer so this gives us two things it gives us the state and the dispatch dispatch is like a gun that we can use to shoot into data and it allows us to shoot different actions we need to import these two things we need to import this the use state value hook and the action types and then what we can do is we can say when we get back the login we can say dispatch right we say dispatch and then what we can do is we can say dispatch the type and the type that we're going to use is we defined it inside of the action types dot set users we're saying set to the user and then we're passing the user as the whatever we got back as a response the the user object now what this does is it pushes that into the data layer so now we have the user inside of the data layer why is this so powerful because now inside of app.js what we can do here is we can actually go inside of app.js and do the following so now we can say go ahead and don't use some basic thing like that we're going to go ahead and say remember this first one was the state right it was what the store looks like it's what that data layer looks like so we're going to destructure and say go and get the user out of it and we need to import the use state value so we need to go ahead and grab that import use state value there we go and save and now what happens is we should actually be able to test this phone and this will work right it's funny man amman jain says sunny i can literally listen to this as if they were a podcast solid comes that's insane i love that man that's really awesome to hear that yeah well working on the walking on the park or something you can be listening to this yeah that's amazing dude nice so now what we're gonna do is we have the login page we're gonna click the sign in button and this pop-up pops up like we see and then what's going to happen is we are going to click a login thank you very much to latvia says sunny you're great and anna says you're great guys awesome thank you so much we appreciate you we're going to click the login and notice what happens now so i'm going to quickly explain what happens so as soon as i click this we're going to actually go ahead and so let's go ahead we're going to sign in we'll get back a result right that result if we log in successfully we'll have a result.user what we're going to do is we're going to dispatch the user into the data layer right which means that the user now exists inside of that data layer then what we're going to do is we're going to actually map it inside of app.js and we're going to say if there is a user then we're going to we should see the app actually load out so now if i log in if everything went well we should see the upload hey there we go wow it looks amazing man it looks clean so we actually got the app loading right now we there's a few areas where we actually want to use that information so we want to pull the user profile image here we're going to pull the name here we want to pull the name and image here and pull the name and image here so i'm going to run through the app now and actually go ahead and do those things so the first one is inside of header so inside of header.js let's go in and actually go ahead and grab the so i'm going to go ahead and pull the information for the user from the the store let's go ahead and do the appropriate import like so and then what i'm going to do is i'm going to say where we have the avatar so for example on down here we have the user's avatar right now we don't have a source so the source for this would actually be the user dot photo url and this is actually the picture of your google account so we actually be able to use your google account picture here and then for the h4 what we can say is this one should be the user.displayname so this should be the user.displayname if i save that now once we log in in the header we should see the photo url and display name i'm not going to do it just yet i'm going to do this all in one so you actually see all this stuff come into play in one go then we're going to have the sidebar.js so let's go over to the sidebar.js boom and inside of sidebar.js right now we have a set value here so again all i do is i pull it from the data layer so you can see the power here is immense because all we do is we just pull the user from wherever we need it once it's pushed inside the data layer right so now what i'm going to do is i'm here i'm going to go ahead and oh we just got five canadian dollars dude damn that's insane salman he says matt clone yet again thank you for everyone it's annoying from everyone it's annoying how i don't know which clone to work on next y'all got to slow down low love you guys hey we love that dude it's amazing thank you so much man we're at 186 so we're four dollars away from breaking that 200 donation mark thank you guys so much we really appreciate this it's fun let's continue on let's get that energy up guys let's go exactly guys almost broke 200 damn we love you guys that's insane love love to see that right so now where we have the um so rather than having this source right here we are going to go ahead and do user.photo url so we want to use the same photo url here and also for the title instead of this i'm going to say user.display name so this would actually be your google name so display name boom we have the name of the user logged in that works really well and actually we'll go ahead and pop the user into the sidebar the next place we're going to need it is inside the message sender.js right so the message sender message sender.js so this would actually be oops this would actually be and did message ender would be here so what we need to do again is grab the user so let's go ahead over here and pop it in here and then what we're going to do is we're going to import then necessary imports so let's go up here boom done and then we are going to actually go inside and replace the things that we need to replace the avatar here would be source equals user dot photo url that would be the user's image the next place that we might have want to have it is where we say we have all of this stuff and then the input what's on your mind right so where it says what's on your mind let's actually go ahead and pop the user's name in so you'll say what's on your mind sunny sanger what's on your night uh what's on your mind frankie it's a cherry on the top i love it yeah you see all these little customizations actually add to the entire user experience you know so with that said you guys are 196 donations yeah i know man it's insane right what i'm insane right here i think you guys so down here crazy dude everybody's going crazy over facebook man wow it's looking freaking phenomenal and it's a giant build right sunny was talking about it and he's like he there's a user authentication on this one yeah login log out the look of it is pure like the new facebook look with the regular so it looked great i made an instagram post on it it's a pretty nice that's awesome dude yeah like oh you guys still got 449 people yo guys that is fantastic smash the like button if you guys are here if you guys like my new haircut and subscribe to the damn channel we love your face and break the 200 donations and let's keep going that's it let's do it i think this is a good question man uh ron dreyambani asks how how you can maintain the user logged in even if we refresh the page right so when you're using um the google authentication login you actually have to use the token to keep the persistence of the user but we don't cover that in this build right we don't cover that in this build because that's going to add to the build time and there's already quite a lot we need to do still but if you're using the username and password it will by default keep persistence so if you're using the username and password authentication with firebase it will by default do that for you so just a top tip there um and that will actually help you out we just got another donation dude we just crossed the 200 mark hey thanks to deepak thank you guys so much deepak this is i think your third donation today look at this somebody somebody play the goddamn airhorn [Music] nice that's insane man wow deepak is super super active i love you man thank you appreciate it that's insane guys that's the oh my god i thought whatsapp status king was google [Laughter] because i was like oh [ __ ] google just sent that to chat nice so you can see now at the top guys we've got the um the user's image the user's name the user's image the user's name and even says what's on your mind with the name right so this is super personal to what you're doing right now the next thing we're going to do is we need to actually go ahead and set up the um we need to actually go ahead and do the firebase instance so this is where we actually uh connect the database to the build right so um frankie can you hear me or is it going a bit weird yeah i can hear you okay fine cool nice so now we're gonna get everything to the database now right yeah yeah now we're gonna push everything and so now we're gonna basically we set up the firestore database earlier and all we're going to do at this point is basically go ahead and set up our collection so now what we're going to do is you can see previously what we've done is inside of the feed what we were doing is we were rendering out like these manually typed posts right so what we're going to do is we're going to create a collection of posts so this is just like a nosql db so just like you're doing mongodb you have a collection of posts in this case and then the document itself the first one is going to be the post itself so we're going to have a profile pic and that profile pic let's go ahead and grab this one so let's go ahead and do this and then the next one is a message and i'm gonna say i am from the database yeah wow wow and then then we're gonna have and then we're gonna have a timestamp and i'm gonna change the timestamp here to be the today's date there we go uh and then i'm gonna have a username so the username in this case is going to be let's just do uh this is anger or something there we go and then the uh image is going to be let's go ahead and add the image that we have right now there we go so awesome so that should actually yeah ticktech asks does ads display and clone uh no thankfully not yeah this is an ad free build yeah nice so i'm gonna go ahead and save this so this will actually add it into the database so imagine think of it this way a collection is just like an array of uh objects in this case we have each document so if i added more here it would each would resemble a post right now we want to pull this in so the way we pull this in is we just set up the database before uh previously inside of the inside of we set up the database previously inside of our local firebase file so we actually pull that in like so and then what we need to do is we need some memory so we need to actually go ahead and say let's keep track of the post so let's create a variable to keep track and let's go ahead and create a setter called set posts and we're gonna set up this piece of state and we're going to give it an empty array as its default value the first thing i'm going to do is import this right now so i'm going to import the use state from react there we go and then what we need to do is we need to run a code run a piece of code when the feed actually loads but we only want to run it once so what we do to do that is use a use effect hook so this is a very powerful piece of code and what this does is by putting empty this is what we where we put dependencies by keeping this bracket empty what it does is it only runs the code once when the feed component loads so i here i say db dot collection and what this is doing is it's actually accessing this collection right here so posts and then what we do is we say on snapshot and snapshot is basically like it's a real time snapshot which means that when basically anything is updated added uh changed anything inside this collection it will give us the real time uh sort of snapshot or like imagine you've got a camera take a picture of it at that real time point and then actually go ahead and pull it into your code right so at this point what we're going to say we're going to say when you get that snapshot update the posts so set the posts to whatever the snapshot is dot docs so this is all of you at this point you'll get an array of docs you get an array of docs here snapshot.docs and then we're going to say don't map through every single one right map through every single one and for each dock i want to return a custom object with an id which is the document id so this this is the id the unique id here and some data and the data is going to be the doc data and doc.data is essentially all doc.data is is this this stuff right here so all i did here guys was i basically pulled in all right so let's go ahead and make this a little bit bigger at this point so you can see that so what i did here is i actually pulled in everything from here so it's mapped this is a real-time connection to the database in three lines of code there's a real-time connection and it maps to our state right so it actually maps to the state it's extremely performant and it works really really well so with that said now what we're gonna do is we are going to actually render those posts so right now we can see we've got two posts here but i'm going to print the donation man super active navin thank you so much man we really appreciate you man we see you on every live stream you know stick through it actually apply all of these you know projects to your portfolio man don't just you know be watching it's cool if you're watching it's cool if you're enjoying the content but ultimately that's where you're going to get the most value out of this so that's amazing thank you so much 100 make sure you definitely go ahead and do that yeah and sunny every time that we make a post then it gets fed to the database just automatically pretty much not yet we haven't done that but yeah no actually yes if i manually added a post here then with the snapshot would fire off and it would actually pull uh refresh our posts variable with all of this information right so what we need to do is we actually need to show that on the screen so rather than having this hard-coded stuff right here what i'm going to do is i'm going to say posts.map so posts oops posts so map through every single post map through every single post and return the following so map through oops it should be an arrow map thing right through every single post and return the following so i'm basically gonna say uh get the following so return a post uh component where we have the following so each of these things right each of these things right here is going to be post dot profile picture poster id the key here is so keys are necessary for efficient react rendering so in this case we're using the unique id here and we're passing that as a key if you want to know more about keys i'd recommend reading up on react keys for performance rendering but then here you've got the profile picture message timestamp username and what this is doing guys this is just mapping to the post image post message post profile picture post timestamp post username and what we should see now is that if we've done this correctly let's go ahead and make sure the correct everything's imported uh in the nice way there we go we should see now a message once we log in that it there's a there's a post on our feed that actually yeah let's remove the naveen comment because of the code oh yeah oops i actually got that yeah thank you yeah thanks to kazi he actually pointed it out from all the way from the bean bag hey let's go oh nice so yeah there we go uh so now what we're going to do guys is we are going to sign in so let's go ahead and sign in and what we should see yes once we sign in the post that we is actually rendered on the screen is going to be fetched from our firebase database and then it's going to be rendered on the screen so it's actually going to get a snapshot so we should see it pop up here if we've done everything correct um okay so see so we've something happened but it didn't work as we expected it right so something almost say almost did what we wanted so let's fix that let's find out why it didn't do what we wanted so let's go ahead and check out so here what i'm going to do is jump into post and we've got profile picture image so you can see here we're not actually using the time stamp so here's a little hack for you guys whenever you have a timestamp and you kind of need to pass it and show the actual date just use this snippet of code right here right it'll save you a bunch of headache you basically say new date you pass that timestamp that comes from firebase use optional chaining because it will defend it against if in case it's broken you say to date which is something that firebase gives us and then you say two utc string and this will actually render out a readable date so that's actually a little hack for you guys and then here what we're going to do is see you see it showed something but it doesn't show correctly right so it's a bit strange so the username is being passed in let's check out what's happening here post.username let's check in here we did post.username okay so this should be pulling in image post or image there we go don't mean to interrupt you man but guess what my bro we just crossed the 2.3 k likes oh dude that's insane oh man you guys are amazing 36 000 playbacks what insane in just three hours and 30 minutes we reached 2 304 likes 200 in chat donations and 36 play 36 000 playbacks wow insane guys thank you so much cp family we would never be able to do this without you guys thank you so much for sticking around building these builds with us and just having fun all around thank you yeah honestly amazing and with that said i just figured out why the data wasn't rendering guys because exactly where's the thank you post because he's asking instagram 66. i know let's go i need i need that big thank you post coming dude nice so now guys inside of profile pic message timestamp username image because these are all pulled in right i pulled that inside of a data object which means that here i need to say post dot data dot image.profilebit.message.timestamp.username.image there we go now if i go back here what we're going to do is we're going to have to uh let's login so let's go ahead and log in my new andreas actually just said just join the family you guys are awesome nice dude hey thank you so much man we really appreciate you love it it's a family at the end of the day you know we're all here for one reason we're all here to learn we're all here to implement you know just theory isn't enough and really coding alone isn't enough either man get people around you that code and we're here for you if that's what you need oh damn frankie checked out oh i didn't save it damn it i didn't save the oh man okay so let me go ahead and save this let me go ahead and save this sister's do a refresh but basically it is pulling from the database now so let's go ahead and see so soon as soon as we sign in now if we see a message which says i'm from the database with a correct time stamp then the air horns are going to go off because this shit's about to get real because it's working right ready let's go from the database wow nice so you see it works guys it does exactly what we want now what we're going to do is we're also going to actually go ahead and add an additional line here so we want to actually order those posts by we're going to do order by i think it's ordered by yeah exactly we're going to do order by timestamp and we're going to do descending so the the most recent ones come to the top in this case right so that's awesome now what we're going to do is we are going to actually go ahead and add the functionality so that when we are when we type into the message sender field so the message sender field you see here when we actually hit the submit so let me go ahead and log into the actual uh deployed version so we can actually get this on the screen and it doesn't keep refreshing let's go ahead and login so now you can see what we're going to do our goal is right now is that when i type in here so like abc or something like that or like yo as soon as we hit enter and and we pass in maybe an image url it's going to push so remember previously i actually manually added this document right i manually added this stuff now we're going to programmatically do it right so it's going to actually programmatically push that information into the database and how do we do that we basically go ahead and say this so firstly we need to import two things we need to import the db and we're going to need to import uh firebase from firebase so this is from our local firebase this is from the firebase uh itself module itself and then here what we're going to say is when we hit the submit so when we hit the enter key we're going to go to the collection posts so we're going to go to the collection post and all you need to do guys is actually go ahead and say add and we're going to add an object and the message itself so the message inside so this message right here we're basically going to map it to our input then we're going to say the timestamp so the timestamp is a very clever part here right we say firebase so we don't want to use our local timestamps because frankie's timestamp is going to be different to mine because he's in la right now and i am in london right now right so our timestamps can be off so instead we're going to use the one that exists inside of firestore so we say firebase.firestore.filledvalue and then we say server timestamp so you're going to use the one that's on the server right now and that would mean that everyone say frankie pushes a message and i push a message it's going to be actually um it's going to be actually sort of at the uh they're going to be the same time right and then it gets rendered locally based on our machines or our browsers which is what we want so the next thing we're going to do is profile pic and here we're going to actually use the user's image so we're going to say user.photo url so that would actually mean that the user's image gets saved there as well and then we're going to add two more things we're gonna say the the uh the username should be the user's display name and the image should be the image url which is inside of that input field so the image url is this one and the input field is this one so if we did everything correctly right when we start when we type into this box and when we sort of enter it maybe an image url here and i click enter that should push into the database and then what i explained earlier was inside of feed.js this is a this is this snapshot always listens to any change and then it re-renders based on if it gets that change right so if we did this correctly and if i say it's true then everything should be working at this point so let's go ahead and sign in so this is pretty exciting stuff so let's go ahead and actually get a picture for this let's go ahead and get something like a let's do a funny gif let's see what funny gif comes up oops phooni let's go ahead and this like baboon is gonna come on right it's a low res baboon though so let's go ahead and drop this now let's do this but let's go so copy image address and then what we're going to do is so we're going to go ahead and do something that's language i love when he gives i know right so now we should log in so you see it's insane like the actual functionality of this app is pretty cool like when we see it so now our messages should load here awesome and then we should say something like yo it works yeah now i know what i'm gonna do is i'm gonna pass that gif in here and now what we should see is this image this is i'm logged in as my account right now so if i push if i hit enter now we should see a message pop in here with that image a gif and it should see even have my correct image and everything boom dude damn let's go oh my god gives coming out that's insane that's insane dude and look at that it was instant there was no refresh no nothing the date eventually sort of loaded in there you can see it works everything i love that dope dude and it works and this would actually work now even if i engrocked this and shared it with frankie it would actually work everything would actually go ahead and work in the way that we expect it to and it also supports without so even without an image this works and then we can do like a rocket emoji yeah so even if i do this it's able to just pull any image or give from the from the web right it doesn't actually have to be a jpeg or maybe or an svg notice it can do a gif so like it like for example that's how i'm that's how i am right now that's how i'm feeling yeah it's like oh my god it works exactly let's go hey [Applause] [Music] guys if that made you laugh smash the thumbs up button oh man so we've got the little dog sort of like super happy right now so you can see guys that's a real-time database and everything's working at that point right so we have a real-time database we have um we have authentication we have everything in that front and this is pulling in here we have react context api we have a beautiful looking design right here we even have a lovely little embed over here on the right so this is a really functional app right now that we've got you see it's very responsive as we pull in we get that lovely responsiveness and that behavior that we expect um so this is really really awesome and we have some nice little hover effects we have some hover effects over here everything has been accounted for in the way that we expect it to be and the functionality works guys right wow so really really powerful exactly really really powerful and also guys we're going to make it so that we're going to protect our uh our app here we're going to say if the input if the input actually we're going to leave that one we'll leave that let's keep it as that we'll keep it as that that's good so so with that said now what we're going to do is i think at this point frankie we just reached the deployment phase dude oh my god my favorite who's ready for deployment drop it in the comments below if you're pumped as nas would say exactly guys let us know if you're pumped for this deployment like and literally let us know if you want to actually go ahead and access this app so we're only going to deploy it if we hear if we hear this from you guys so we're going to show you how to go ahead and do this and how to actually go ahead and deploy this um but let's go ahead and prep everything in the meantime right so let's go ahead and set everything up to you to make this work so we actually set everything up in firestore previously over here so what you're going to need to do is open up your terminal and inside your terminal what you're going to want to do is just go ahead and keep the app open over here hey we've got people saying yes please deploy let's go go live nice awesome right so hey we got so we got everyone getting pumped up for this right so now what you want to do is you want to do sudo mpmi dash g install firebase tools right so this line right here is going to install uh i don't know if they can see that actually frankie um i i can let me see oh they might not be able to actually yeah i've just made it so that you guys can see this right now so let's go ahead and there we go nice so you can see so this command is is important and this will do is you're gonna have to enter your password i can't take that dog seriously dude so staring right at your soul he is he's like he's like that dude that dog is ready to deploy guys so once that's ready now what we're going to do is we're going to say firebase i'm going to log out quickly firebase because i need to log into kazi's account because that's the one that we set this up on so let's go ahead and log out so i'm gonna do firebase login and what will happen is so you guys are gonna need to do firebase login when you come to this step click on y if you want and then this will pop up and now all you need to do is click on uh the appropriate account click allow and it will actually redirect you and it will log you in so that's dope close that you go back hey [Music] and now the thing is about to be deployed and dark thank you for 14 czar yeah awesome dude nice so the next important step that we need to do before we go live guys is we need to do firebase init right so this is how we essentially set everything up to go ahead and deploy the app so this step now you'll get this uh pop-ups you need to go down with the arrow keys tap hit the space bar on hosting hit enter and then you want to click on use an existing project and then here you want to go down and find the build so we're doing the facebook clone today so let's go ahead and do that and then what do you want to use as your public directory this is very important guys you're going to type in build right so here you want to type in build so i'm just going to make this a bit bigger for you guys so you can see this so here you want to type in build right so let me go ahead and type this in so build build build there we go build that's very important and then where it says configure as a single page app you want to type in y for yes because react is a single page app now once we do this we need to go ahead and do mpm run build right and this will actually go ahead and create an optimized production build so what this will do is it will actually go ahead strip all of the developer tools out of the react build and it will push everything like a really streamlined version into the build folder right so we'll go ahead and make a very fast efficient version go into the build folder and then once that's done we can actually do firebase deploy and that will actually go ahead and push that build bundle we call it so it's called a bundle when it gets into that really optimized state we can actually push it and then that'll go and it'll fly out into the web so now while this is happening uh frankie maybe let's go ahead and answer some questions and we can keep the chat going alexandros what's up man we always see you here with your plus comments everywhere even on instagram when he messages me there's a plus sign in the store i'm always i'm almost wondering if he somehow like is typing this from the command line yeah right it makes me think that is he a bot is he a real person what's up alexandros i've seen his instagram page that's awesome dude you're always following that's i love it we like i said guys we remember every one of you that stick around through different live streams we know you by name so you know if you do some funny things we'll call you out so exactly you're sure to behave well on everything that's an ugly dog it's like a corrupt politician in the body of a dog he's just waiting for us to deploy like yo james hampton says i recently graduated from a coding bootcamp and have learned more with react watching your videos than i did the entire eight weeks in the camp awesome stuff let's go that's awesome dude i know dude that's insane guys here yeah that's where the comment is nice it's still i don't know why it takes a while whenever we're live it takes a while but it shouldn't take you guys this long when it does this um let's see let's let's take more a little bit more questions somebody says can you can you contact sidebar facebook please what does that mean guys write intelligent questions please oh we just got the uh so we this is what you guys will get once the build is done right so now you see inside the build you'll get this static folder and everything is built in inside of it so you don't want to touch the build photo right but at this point it's very important to know if you make any change to your code now you're going to have to run npm run build again because it only builds that that sort of optimized bundle at that point in time so now with that done you want to go ahead and do firebase deploy so i'm gonna i'm gonna wait for it i'm gonna queue it up now frankie should we do this causey should we do this let's do a countdown guys let's go yeah let's go lead let's go says five four three two one let's go guys let's go and hit that deploy hey let's go and let's see how fast this does it once that link goes live guys i will drop it in the chat and hey there we go guys [Music] i'm dropping that in the chat guys there we go go ahead for y'all go ahead and check out the app and guys keep it clean please so that we can share what you guys are showing but otherwise i don't want to see like a bunch of like random [ __ ] on there so like keep keep that [ __ ] clean keep it clean guys it's for everybody to learn like we say all the time we don't want to not share these projects with you yeah exactly so let's go ahead and we'll see what starts flying in hey we've got some people coming in hey sharpen theater hey how's it going bro yo why are you on localhost honey show me that oh yeah come on let's do it let's do it because i'm still connected to the actual thing but let's go ahead and jump into the actual app so this one sign in nice so this has a back end no or yeah yeah yeah this is a full background somebody said a more real-world solution we're going to build a back end too gino john said it does have a back end but don't worry next week we're also going to be doing the burn stack so yeah you're going to be doing mongodb express node all of that good stuff exactly look at this guys we've got people coming in they're loving it so deep goes yo no way bro cp fam hell yeah man let's go nice who's pumped damn that's insane so many of you guys live stream right now and we just deployed the facebook app and all the people are in the comments chat actually everybody say hi [Laughter] well done christian david nice man i'm i'd love to hear you guys i'd love to see you guys in different platforms different screens it's insane how much we're able to actually you know remember your guys's names that's insane but it just shows how much connection we really do have with all of you and that that gift was so funny guys this is so cool to see you guys go from the facebook chat to then seeing her inside the app oh my god what's that one look we got some gifts coming in he's like what are you doing now hey exactly so guys real time db in there as well this is so dope man clever programmer book guys make sure to go into it and make a good profile cp book oh man that's awesome dude so just to run through this app again guys today we built and this is so jokes today we built a app with a it has a real-time database so the firestore db it has this lovely material ui components everywhere throughout the app it uses the react context api which is a sim sim very very similar to the redux api so which are very very similar to redox sorry we're using a embedded facebook plug-in over here on the side which allows us to have this beautiful uh actual live feed from facebook uh the entire app is responsive so you can see it pops in oh [ __ ] somebody just dropped my youtube channel nice dude oh damn nice let's go subscribe guys [Laughter] nice and we also have full google authentication guys so this entire thing is working this is insane to see you guys popping in like this honestly it's so cool to see that this is really really lovely yeah really really cool to see this guys um and yeah with that said guys i hope you enjoyed that look at this is so funny with the kids how i feel right now yeah and guys if you haven't already please smash the thumbs up button because if you enjoyed that or you checked out the live site we massively appreciate it and yeah we would love to go ahead and have a chat with you guys right now we're at 2376 likes guys at the end of what was it three hours and 54 minutes of this life wow that was amazing if you guys put in four hours of your time you'll get an amazing project in your portfolio at the end so we ended up with 208 dollars chat donations thank you so much it wouldn't be possible without all of you thank you so much cp fam and yeah i mean is this a rap sonny yeah it's a wrap i mean like can you guys imagine if you went to your employer and said hey can you just go on to my website and then you start chatting to them through here like they would be like holy crap like what's going on right now on posts on the facebook post you know what i mean yeah that would look dope oh man it's cracking me up with this stuff yeah dude i think on that note that is a perfect place to wrap up here today guys and frankie any last closing things that you want to say um it was a it was an honor to be here with you new papa papa react and then papa python over here at the end and behind me as well dude it was so fun i love this i love it that it's so relevant you know like i said we're dissecting the top tech companies right now in the world and teaching you guys how to build their front end and a little bit of their back end too plus we're gonna be teaching you guys how to build a full stack functionalities of them in the coming weeks as well so stay tuned guys really put in the work put these projects in your portfolios we've seen so many people get jobs off of them right now our goal for clever programmer in this year of 2020 is to make 5 000 developers get a an actual job so thank you guys so much this was a blast sunny what do you think guys just want to say like as frankie nailed it with that guys and i want to say like pretty much just massive massive thank you to all of you watching as always uh we massively appreciate every single one of your beautiful faces so like this has been an amazing live stream i think on that note guys let's wrap up and frankie and also yeah also also guys remember if you do want to become a javascript developer check out the one hour training that we got here kazi put a lot of love into that it's a very well explained route that you can take to actually make money with javascript and become a kick-ass javascript developer so check that out and also check out profit with javascript if you find this build to be useful for you smash the like button and smash that like button exactly guys smash that like button free one hour training link in the description make sure you check it out it's free guys completely free so like what are you doing if you haven't signed up yeah nice so with that said guys let's wrap up there um until next time we will see you in the next live stream peace guys thank you guys so much peace peace

Channel: Clever Programmer

Views: 440,790

Keywords:

Id: B-kxUMHBxNo

Length: 237min 38sec (14258 seconds)

Published: Thu Aug 27 2020