🔴 Let's build SNAPCHAT with REACT.JS! (with Camera, REDUX & Firebase)

what's going on guys welcome back to the channel things are going crazy lately and i just want to say firstly a warm welcome to the entire papa fam you guys are insane you guys the value the love the support everything that you guys bring i just want to say a massive massive thank you to all of you and without all of you i would not be here right now and i wouldn't be able to do what we're doing so let's get started off by firstly saying thank you to all of you and your beautiful faces and yeah let's get the energy up this is the papa fam now and we're going to crush it in today's build with the snapchat cloning you guys are excited let me know [Music] [Music] as you can see guys we have a fully workshop working snapchat thank you frank just dropped that first donation thank you dude and you can see this is what we're building today a fully functional snapchat now let me know if that's dope i'm excited i'm bloody excited about that built with the react you can click it even the timer when that timer goes ahead and hits zero the whole thing goes ahead and shuts down that red signal goes wait for it boom there you go and you can't tap it after that completely gone scrollable list everything works has persistent refreshing so persistent login state boom this whole thing is built with react we do use redux we use firestore we use firebase hosting we use firebase storage we have loads of stuff happening inside this build loads of power and potential inside this build today guys i see tons and tons and tons of love right now and everyone's saying deploy deploy deploy if you stick around to the end you're going to see it get deployed and that's going to be a lot of fun so guys with that said this is going to be an amazing build we have 160 people live right now if you're excited about that build smash the thumbs up button and let this video reach as many people as possible because the papa farm is growing at an incredible rate guys i don't know if you've seen but we are actually at nearly 14 000 subscribers right since new year we've literally grown like about 10 000 subs which is insane so the quality is better i'm working on improving this stuff i know we had a bit of lag before but hopefully everything is going to be good today so without the music without the chaos matthew thank you so much for the five dollar donation appreciate that dude thank you aman kavira for coming in clutch as well with another donation amazing stuff guys now i'm going to run through the app one more time and then we're gonna go ahead and get everything off and running okay so you can actually log out by clicking the little avatar on the top right hand corner and then you see we've got the sign in screen so over here hit sign in you get the google authentication and then it's going to basically go ahead and populate your user status inside of the redux store so let's go ahead and log in as myself and then you guys will see here we get logged in so everything's all good there it's persistent like i showed you in that demo just a second and uh if you guys stick around to the end we're going to go ahead and show you how to go ahead and sign into this app yourself so that way we can see everyone snaps over here and hopefully there's no uh crazy stuff that everyone starts snapping but you can click this button here we get a live camera use this is something we've never done on a build before so you've actually got camera use inside of react and then you can go ahead and click send now and uh yeah you can see that so the message is unread if i click these ones it won't open but if i click this one it does open right we have react router powering this stuff everything is damn exciting we have 250 people watching this isn't crazy crazy uh and i can't wait to do this for you guys okay so without further ado thank you guys um for the love and support uh before we get started i just want to mention we are now live with the course zero to full stack hero is now live thank you so much sashithiran for the four dollar donation appreciate you dude and yeah we we literally are live now we have a course right but we teach you all about like react the basics of react we go up and crazy and all sorts of stuff happens inside the course the papa farm is already 150 plus members strong so if you're interested in the course you want to know a little bit more all you need to do is first link in the description go and check it out and the course is literally booming right now we have so much happening inside you can see for yourself everything but enough of that you can literally see that if you're interested first link in the description and uh yeah let's go ahead and jump in today's build but we're gonna go and build this snapchat clone which i am actually there are a lot of builds i'm excited about but this one this one is gonna be a lot of fun gabriel graves nice dude always coming in clutch and if you guys aren't already i actually build this stuff on twitch as well so twitch gabriel's always coming and clutch over on twitch so make sure you guys come in and watch me over there it's a lot of fun okay if you haven't already subscribed make sure you subscribe and yeah this is amazing the stream is already a lot better thank god i know we had so much pain the last time we went live um but yeah guys without further ado let's jump in i'm gonna be trying a bit of new stuff with the music so hopefully let me know if you guys enjoy it and if you like it um i found a really nice set of music last time but i'm just going to go ahead and and give this a shot so we've just got a bunch of random music here thank you amen forgot the message finally contribute unlike on twitch lots of love thank you so much dude appreciate you let's do this guys let's start so let's open up a terminal to get started you want to go ahead and full screen that to make it easy just let me know if you guys need it bigger or anything like that and i can go ahead and help you out okay so i'm going to open up my desktop i've got everything now inside of a builds folder so i'm going to open up my builds folder and then inside here you can see i've already got snapchat clone so i'm going to go ahead and do create react app create rectap nice amazing tool by the guys over at facebook allows us to go ahead and get things up and running quick i'm going to use redux today which means i'm going to use the redux template all right so i'm going to go ahead and use my little autocorrect thing here and i'm going to say redux and there you go you go you're going to do mpx create react app snapchat clone and i'm going to say yt for youtube the dash template at the end is simple it allows you to go ahead and set the app up the template that we're going to be starting with but with the redux sort of power base behind it let's put it that way okay make it simple in english i'm gonna go ahead and enter while that's happening we're gonna go to our chrome and we're gonna go ahead and open up firebase okay firebase we are tools provided by the guys over google okay it allows you to have loads of different things so we're powering our authentication we're powering the database even the way we upload those snaps so they upload the images over to firebase we handle that with firebase storage okay we're gonna do all of that today i'm also going to host the app at the end and we're going to have a lot of fun because everyone's going to be able to sign in together so that's what we're going to need in order to get everything up and running um to power this crazy app that will you guys see okay so jumping in right now what we do is go to the top right hand corner make sure you're signed into the correct account so i'm going to sign into my official papa react account and let's go to the console so you want to hit go to console okay so now you're going to click snapchat add project sorry and then okay i think we're back right i think we're back so sorry about that guys uh sometimes my mic has this way of cutting out and uh when it does just go ahead and write in the chat and everything will be good but we're back i try and keep that up and if you watch my twitch stream you notice that's a little bit of a problem we've had but we ain't gonna let us stop us right now okay so here what i do is i say snapchat clone dash yt for youtube i'm gonna click on continue okay over here i don't want google analytics i'm gonna leave it create project and then we're gonna go ahead and wait for a sec right while that's happening go back and check on your code so here you should get to this screen over here so i'm going to make it very clear so you guys can see that it says happy hacking if you get to this it's all good right and then what we're going to do is we're going to say cd snapchat phone dashboard so you make sure you're inside that folder i'm using all my zsh by the way if anyone's wondering okay uh yes vishwa it says i'm watching it live for the first time welcome dude to the first time being live on the stream so now i go ahead and say code insiders. nice and then what i'm going to do is it's going to load up what i need okay so give that a second amazing aman kavira what's up he says zero full stack hero nice little donation he says zero to four sakura is a crazy amount of awesome the link to zero to four stack hero first link in the description go check it out love to see you inside we have 150 members inside right now it's crazy it's booming everything's going insane right let's go ahead and open this up we've got our code open so we're going to do a clean up process okay i'm going to press command j this pulls out my terminal thank you cyber bee bro you are awesome thank you so much hashtag proper react appreciate you did appreciate the love to get this app started we're going to say yarn star hit enter i'm using yarn if you are using npm it's simply npm star how do i know which one i'm using you might ask right if you see yarn.lock you're using yarn if you see lock then you're using uh npm okay whatever you use it doesn't matter but make sure that you stay consistent now if you do end up overlapping just delete the lock file whether it's the unlock or a package lock and then run the install from whichever one you want to use and that will fix all the headache and issues that you're going to end up having okay so now i'm going to open up the on this side i'm going to grab my stuff and then this will be the screen where we have everything let me move my epidemic sounds over to this side so you guys can make it very simple for you okay cool so now with that done we're gonna go ahead and you should get this template okay so this sets up a dummy app so you see here we can add different amounts we can add asynchronously and you can just have a bit of fun with this template okay now we're gonna clean this up and make sure that it's all clean all simple everything's working right so we're going to go ahead and go to our source go to app.test.js and then i'm going to start by moving this over to the trash i don't really care about it i don't want it in there we're going to get rid of the logo i'm going to delete that and move that to the trash next i'm going to delete setup.js if you've ever watched any of my clones you will know that it's going to go ahead and we just like to do a cleanup process in the beginning so i like to delete all of app.css get rid of that all right then what i'm going to do and we're going to have loads of different changes in the tempo of music today right i'm going to make it a lot more of an enjoyable viewing experience for you guys so that way you can buy you can vibe to this think of it as entertainment think of it as you know something that you can code along to learn do it at your own time afterwards in css i'm going to go over here type in asterix and i'm going to say margin 0 and i'll show you what this does afterwards right this will get rid of like this imaginary spacing that gets present sometimes save that app.js we're going to go ahead get the header drag our cursor all the way down get rid of this and here i'm going to say h1 let's build let's build snapchat guys we are nearly at 500 likes we have 300 people watching let's get to 500 likes let's get this up guys i'm gonna change this and i'm back with the sound i'm back with the sound okay cool uh sometimes that happens don't worry if it does happen i'm gonna find out about it okay it's all good don't worry so just know that if that does happen it's we are good we're live again we're back sorry about that guys it's not actually lagging so the actual stream itself is fine it's just it's just when we have to experience this stuff okay so i'm also going to go ahead and fix something on my stream deck because for some reason that's kind of freaking out so that should be able to get fixed relatively easy give me one sec and we should get back to for power um let's change this to scene okay awesome everything seems to be fine i can't actually change the the camera right now which is interesting um let me change if i can do it i can do it manually okay that's fine we can do it manually that's all good i can make this work right sorry about that guys um someone said airport time yeah when that happens ash can thank you he says just once again i've started learning react again after three months break just because of your awesome course zero to full stack hero thank you so much guys and uh make sure if you want to check it out first link in the description all right if that happens again don't worry and we'll get this up and running in no time okay so let's carry on do this um so somebody says are you gonna make udemy course i've got something better than udemy course we've got the best community and that's the first link in the description check it out okay so we're gonna delete these two lines over here now we're back see i don't let this stuff stop me okay i don't let this stuff stop me it's gonna be fine if it does happen again i'll go ahead and i'll fix it and we just carry on okay so here i click refresh everything's good so why that happens but we're back okay we're back cool so now let's go ahead and we're gonna go and don't worry as many times as it happens i'll keep fixing it it doesn't stop the papa fam okay so this is stuff that we just have to get used to when we're streaming but it doesn't stop us okay like uh this is just how you do it you have to handle this overcome stuff we don't let any of this stuff stop us okay what's up arry what's up jimmy what's up akshay what's up avnish so here once you get into this folder over here right counter what you want to do is get rid of the counter.module.css we're using the bam naming convention today i'm gonna go to count a slice we're gonna use that one but we're gonna get rid of counter.js okay pran beer i use screen brush to draw on the screen now over here i'm gonna go ahead and drag counter slice to the features folder and then it says move and i click yes i'm going to delete the calendar right so make sure you do this and it's going to help you out okay so this is just the steps that we need to do to get everything up and running the next thing i'm going to do is i'm going to come and rename this file right now as i'm renaming this because i'm not going to go ahead and use the counter slice i'm going to use something called app slice and this bit i want you to just follow along when we get to this bit when we get to this bit then i will go ahead and explain what we're doing okay but right now i just want you to follow along i'm simply doing a refactor here so i'm going to change this to app slice i'm also going to go down here and i'm going to change select count anywhere i said count i'm going to change that to app right and over here this is not app this is going to be here and this one is going to be app so i'm just trying to refactor my code i don't really care about this bit right now and over here we're simply going to get rid of these two functions to simplify some of our code up we don't have this anymore so we'll get rid of this and i'm going to get rid of the comments because we don't want anything that we don't unnecessarily need this is how we basically go ahead and set up redux okay so this is what we're going to be doing with redux now i'm going to hit save here now i'm going to go to my app over here and i'm going to go to store.js now here previously it said counter counter slice and all that stuff so what i'm going to do now is change this to that it's actually app okay so it's going to be the app producer which pulls from not here it's just going to be the features folder so features app slice okay now we're going to go ahead and go here happy new year guys by the way and here i'm going to go to count and change this to app just to a producer okay that's all good everything is pretty good if you got to this point right now i'm going to hit command j and then it says compiled successfully if you get a problem at this bit go ahead and make sure that you resolve the issues that way you can carry on without any errors okay i'm gonna hit command j and then i'm gonna go ahead and do the following so command j to close that go back to our app let's get started with this build right so i'm going to pull this to one side and i'm going to go back to my firebase i'm going to go to continue because we have to get things set up right we have to go ahead and get things set up to get it up and running okay so here i'm going to go ahead and say i'm going to open this little arrow and i'm going to say authentication we're going to be using google authentication right if you want to join the slack community you need to be a part of zero to full stack hero all right so the first link in the description feel free check it out join us here i'm going to click get started right code to cloud what's up um yeah feel free to use shazam my sound service is epidemic sounds a lot of people are curious about that um so now what we're going to do thank you nazim kalam for the kind words dude um so i'm going to go here and i'm going to find google i'm going to click it i'm going to click enable right and i'm going to say project support email proper react that team there you go right now somebody says i had a question can you build apps without android studio of course you can you can use react native google enabled that's perfect the next thing i want to go to cloud firestore so you see we're working our way down this list then i'm going to click on create database i'm going to click in start in test mode okay start in test mode click on next everything's good i'm going to click on enable we don't really mind about the server contents right now nazim says sunny we all love you and everything you do and i got several job offers inviting me just make by making those wonderful clones you thought oh amazing that's amazing well done that's really really awesome honestly well done and i can see this stream is actually a lot smoother today which is great because i was actually experiencing a lot of stress we're dealing with that so it's just back yeah we're back all right so i'm going to go ahead and next i'm going to do the rules okay the rules are there are we they're very important because this will actually allow you access to the database now the main thing is uh i saw someone say you're not good at programming and i was like oh okay and he said you're god i was like oh [ __ ] okay can we add snap camera to this yes we have a snap camera to this okay so allow read and write that's what i'm gonna do here and publish now obviously that's not a production like convenient but you don't want to do that in production you want to make sure that this is a uh this is just for one way sort of testing things right and even one you say your security rules are public make sure that you understand that keith thank you my portfolio is filled with your clown's amazing stuff for the first time you act on redux first yes i'm gonna change it up every time you know keep it funky all right i'm gonna go down to storage and that's the next thing i want to get set up right so in storage i want to go to rules now over in the rules section thank you apple and netflix clown helped me land multiple job offers papa react it's incredible honestly like it really is amazing to see that right and i want to say like targeting job offers then reach out to me and let me know i want to see it i want to do all that stuff because it's amazing when we when we have that stuff and the community getting stronger this is what the papa farm's about we're here to change the game and change the space right so here this is all good now i want to go ahead and change this and just say allowed read and write and publish okay so for now we're just keeping an open database um again not production convenient but it will get there okay i'm gonna make this a little bit bigger for you guys so you guys can see it there you go all right now i'm going to go over to hosting okay so you see we worked our way down to this the reason why we didn't do real time databases because we're using cloud firestore here i click on get started and then i want to click on next initialize project next right next that's fine right and then this gets set up the next step is we go over here to the cog we click on project settings right hema says hey your courses have made me the best coder in my area thanks a lot all right amazing stuff beast night says am i late no dude you're in perfect timing in fact so do not worry all right so now what we're going to do is we're going to go down into our settings so i just went to the project settings at the top i go down to this little web app icon okay click this and then i go to the name of the app so i'm going to say snapchat clone youtube set up firebase hosting we already did that but i'm going to register app it doesn't really matter sunny you are beautiful and your apps are beautiful like you thank you so much dude uh and then here i click on next right we don't if it's your first time you're gonna have to write sudo and then npm install dash g firebase tools right so you have sudo dash and then do firebase tools um and then you're gonna click continue to console uh for those of you asking why this is happening honestly it's just since i've updated to big sur right so i just keep getting this unexpected like input it keeps cutting my input i don't know why um so i'm trying to figure that one out but i don't have control over that all i can do is reset so when it does happen i'm going to fix it i'm not going to use the airpods yet because i want the audio quality to be crisp okay so now what we're going to do is i'm going to go ahead and do the config so i'm going to copy this config and then i'm going to go ahead put this over to one side and over here i'm going to make sure that i create a new file called firebase.js i'm going to copy uh paste sorry my contents here what's up priyanchu good to see you in the house dude and then i'm gonna go ahead and do command j right i'm gonna split the terminal so i know those of you have preferences for this but i like to split the terminal and have a second terminal up on so click that now it's a little bit so frank what's up he says sunny introduced me to react with the clones announced react native and my own youtube channel so grateful for the papa fam thank you so much frank for another beautiful donation frank is crushing it go ahead and check out his channel as well guys so now i'm going to go ahead and here this is where i'm going to say yarn add firebase right if you're using npm remember you just use npm install firebase but i'm going to use yarn hand i'm adding firebase to the project dependencies okay now at the top of the file all i need to do is say import firebase from firebase okay now people asking to zoom in so let me go ahead and try and give you a zoom in it's a bit hard for me to code like this so now and then we can go ahead and see if it works okay so this is installing so now what i'm gonna do is i'm gonna please don't spam you're gonna get blocked from the chat so i'm gonna press command j uh to hide the terminal there we go and then i'm gonna go ahead and say um simple blocked all right now what i'm gonna do is i'm gonna say const initialize app right and then here what i'll say is or we can just call this one firebase app right so this is gonna be the firebase app instance that we have when we set everything up now what i'm gonna do is i'm going to say firebase dot initialize app so firebase.initialize app then i'm going to pass in the firebase config right so the one that we just pasted i'm going to go ahead and grab that one right thank you so much guys for the love honestly we are almost at 600 likes i think we can get there guys help us get to 600 likes and help this video reach as many people as possible if you're watching the replay please go ahead and smash the thumbs up button it helps the video reach more people it helps support the channel here i'm going to say constdb equals firebase app so firebase app dot and then we're going to say firestore because what we just did is we configured it and now we're connecting our db and making it accessible via the db variable that we just created here okay and now what we're going to do is we're going to go ahead and initialize our authentication module because we need authentication inside of this app yeah here what i'm going to do is we hit 600 thank you so much guys let's hit seven let's keep this going all right firebase.org and this is a functions we have to invoke it to get authentication as a parameter the next step is we go to storage next storage equals storage so firebase dot storage all right and then i'm gonna hit the column there we go and this gives us access to the storage so this is the storage api on firebase it allows us to upload stuff wolf says let's get to 700 guys i think we can do it i think we can get 700 right who knows we could get 10 000 maybe today that would be insane right so at this point what i want to do is i want to say const provider provider equals and then i'm going to say newfirebase.org right and then we'll say google auth provider so google auth provider and this is a function again so i need to invoke it there we go and now this one will go ahead and give us what we need to basically have google authentication as a provider inside of our app which means remember that little pop-up that we had initially on the snapchat clone so let's go to the snapchat clone right over here so remember this little pop-up that we had so let me go ahead and log out of the account so let me go take a picture let me send the snap and then we go ahead and log out right sign in you guys remember this little pop-up right this is the provider this is what we do it this is how we do this this is how we do that functionality see how quick i'm getting with that fix it's all right we can carry on with it right so that's how we get that functionality going okay so now what i'm gonna do is i'm gonna go ahead and export what we need so i'm gonna say export db auth storage and provider provider right so like so oops that's a comma nice now i'm going to go ahead and hit save okay so what we're going to do now is this one will not have push notifications by like a national but thank you guys for watching we're on 325 people let's get up to 400 people invite your friends get to 700 likes push this video out as many people as possible all right now we have setup firebase so this is all the setup that we need to do right um but you guys can follow that at your own point and then it's going to go ahead and grow with it okay so let's start with the first part right so in fact where do we begin with this crazy load right i think it would be a cool idea to start with the camera right the camera we've never seen this right this net we've never seen this sort of stuff happen before so the camera module right so we're going to go ahead and create a webcam capture all right so let's call it webcam capture and you guys have never seen me do this so this would be a lot of fun okay this will be a lot of fun stuff so i'm gonna go ahead and do this and what i'm gonna do is go ahead and install a dependency and the camera module that i'm gonna be using is something called a react webcam okay thank you ben that's amazing dude he's putting out in the chat what the song is because loads of people ask what this is right if you want to know about typescript we will be teaching that all right we are back i just want to say it's just crazy how um it's crazy how we are constantly going ahead and growing at the rate we're growing out because we have literally gone ahead thank you rich programmer it's frank at switching out smash light button again let's go thank you dude um you guys can see i have to deal with so many like little things that come into it right we don't anticipate but we get past it right i always wanted to say that the the following is growing at such a crazy rate and thank you guys i appreciate you all yes i remember you avnish what's up so here what we're going to do is webcam capture we just installed react dash webcam as our dependency okay now anyone who's watching it says the webcam's not working again if it cuts out i will fix it and they're all good there so don't worry guys so at this point what we can do is let's go ahead and create a webcam capture 650 likes amazing thank you guys thank you so much let's go ahead and create a webcam capture dot js file okay now inside the webcam capture file we need to do a few things we need something called video constraints this is going to be responsible for the sizing of the video itself okay so this is video constraints now this is going to be the the camera itself is going to be 250 the height of 400 and the facing mode that's the basically saying the front-facing camera okay we have 300 viewers as well it's like incredible incredible we're growing at such a cool speed right now what i'm going to do is say rfce because we all love react functional components okay now if you didn't know you don't actually need to write import react from react anymore but we'll leave it at the top so it looks normal to you guys okay go ahead and hit save at this point what you want to do is you want to go ahead and for the class name i'm going to go ahead and give it a class name in case we need to star and this one's going to be called webcam capture we will be using the bam naming convention today i teach more about this inside of the course or if you've watched any of the other builds it's a it's the way i like to handle my class names okay so what we can do is from that camera uh module that i imported we can go ahead and import it right now it's very easy to use the webcam module all we need to do is go ahead and say webcam and then in here we need to add a few attributes okay so 670 likes thank you guys this is what we're talking about honestly this is insane thank you there is actually support for video on on the uh the the module however we're going to be doing all uh pictures today okay so what's up from nepal thank you here we're going to say yo and i'm gonna say audio equals false okay so audio equals false and then i'm going to say height is equivalent to and then let's go ahead and say 400 right so you could do a few things here to keep it consistent you could say video constraints.height okay and then here i can go ahead and say ref because we need to actually attach a reference now the reference in order to get a reference if you've never used a reference in react um we do teach outside the course but here what i'll say is const webcam reference now this one this is basically like a big pointer right so imagine that you've got a big point and you're just pointing it at the webcam so that way we have a way to reference it if we need to someone say use ref no a lot of modules need this kind of functionality so we're going to go ahead and import this from react there we go okay now we've got the reference all set what we can do is go ahead go to our ref here and we can go ahead and add it so we can say ref equals webcam ref right webcam ref there we go cool the next thing we're going to do is again i'm just adding to this list of things we're going to say the screenshot format we want to actually save it as a jpeg because jpegs are compressed images it's a lot easier to store and it's just going to help us out a bit the width here i'm going to say is equal to the video constraints.width okay that's going to be pretty cool the user um next thing we're going to go ahead and do is we're almost at 700 likes incredible support thank you so much guys we're going to say video constraints here we actually passed the entire object so we actually passed the video constraints object and this is what you basically need to go ahead to get everything up and running okay so this is really really nice thank you praveen i do see your messages uh i just haven't got around to try it all right that's awesome right so now what i'm gonna do is i'm gonna basically export this as a webcam and let's firstly just test out if it works right let's see if this actually does anything let's see if it if it shows on the screen how weird it looks or if it wait look if it works at all so this is the app the final product what's up there maybe in the house um and yeah she's she's she's uh she's such a she's literally the best support guys she's always in every video she's always helping out with stuff um i'm actually gonna use the epidemic sounds library okay but it was kind of crashing the audio which is why i stopped using it but let's go ahead and give it another try if it crashes the audio i will fix this um and i will go ahead and save it we just got another five pound donation from nick hill thank you so much dude for that five dollar donation incredible stuff incredible support i appreciate you did so now what i'm going to do is somebody said mute the background music i'm going to keep the background music but i'm just going to put it a little bit lower in that case right so now what i'm going to do is go to react redux app and it says webcam capture is not defined okay so what i can do is here i can go over and say control and i can import save come back now we're at 690 likes guys incredible that's what i'm talking about right i'm gonna go ahead and refresh counter slice is not defined okay so when we were setting something up something broke so let's go to our store and let's double check store's all good let's go to app slice here counter size so we were refactoring and we forgot to say apps like hit save on that hema says dude you are awesome thank you so much appreciate i love you guys i'm gonna go ahead and hit refresh and it says okay host wants to use your cameras you have to click allow and wait for it wait wait look at that guys so now you get to see two points of view so this is like some inception stuff happening right now okay so on that note water break have some water just let that sink in that we have react on um on a webcam on our react app can we hit 700 while we're on a water break i think so i think we can 6.99 about to hit someone 701 there we go thank you so much guys killing it let's just keep pushing let's keep pushing guys i think we can hit a thousand i'm telling you i think we can do this um nice we've got a new member of two zero accurate amazing stuff go ahead check out the link if you want to join the pop-up farm amazing stuff right so what we're going to do now is we're going to go back to our app and we're just going to keep on working with this stuff right so 700 likes thank you guys so now i'm going to go to the webcam capture and let's kind of add a capture functionality so we can actually capture a picture for this right so first thing we need is we need use of some kind of icons right so you guys know me i love i loved oh my god we just got 20 likes over in a second that's crazy guys i love you guys the support you showed me is incredible we're going to go to material ui material ui.com i'm also really happy that the stream quality is fixed up i'm gonna go to material ui course save that stuff hit command j inside my terminal and i'm gonna say yarn add and then i'm gonna say material ui core so let me go ahead and make that more visible for you guys yeah and what i'm going to show you is you can actually install two dependencies at once you can actually go ahead and add afterwards so i'm going to go ahead and block people who spam guys symbolize um and any moderators in the chat feel free to keep it clean as well um we don't tolerate spam okay that's it the next thing i'm gonna do is i'm gonna and we're back okay so it happens it happens we're gonna go ahead and keep it keep it good right if it does happen it's going to be it's going to be fixed in a sec we're going to go to the search bar we're going to click icons then i'm going to click here the reason why the stream was laggy before is i upgraded my router recently so hopefully it's all good the only thing we need to fix now is the mic issue okay but we can we get good right we get good okay so i'm gonna go back to my code and say yarn add material ui icons okay if you watch me on twitch by the way it's so bloody smooth over there honestly 350 people watching right now nearly 800 likes we're gonna crush this build okay so while that's installing i'm gonna go ahead and get a button called radio button unchecked icon now don't ask why they called this again i'll show you how i actually find these icons you can search the full list of these icons well back sorry about that guys i really don't know why it happens i really don't know what happens here what i'll do is go ahead and say radio button so let's just type in radio so there's this one here click this guys it's not lag when that happens by the way it's just um it's just sound okay so what we're gonna thank you so much jack the positivity that's what i'm talking about so when you click it it's going to actually go ahead and give you the the line of import that you need okay so at this point what i'm going to do is i'm going to go ahead and say um command j and then i'm going to go ahead and import the top of the thing yeah so most people some people asking what's why this stream quality is different on here compared to twitch it's because it's two different platforms remember i'm streaming um content so there's a lot of complications that you need to factor in so i'm going to pop that in here and then what i'm going to do is i'm going to give this a class name so we can start this i'm going to say webcam capture underscore underscore button and then we're going to have a on click function so i'm going to call the unclick function capture so let's go up to the top here and i'm going to add a function called const capture and this is going to use something new it's going to use a callback right so i'll explain this in a sec use callback right and this is a oops i'm going to use callback this is a nice little react hook that we've never used before in a build but it actually allows for an option a suite optimization which means that we don't actually have to have unnecessary renders if we don't need it we're going to pass the webcam reference inside of it so this means if it basically what use callback means first let's go ahead and import that so import at the top over there now what we're going to do uh is go ahead and say okay so a used callback is really cool because what it does is it basically says this function so this could be a this could be an expensive function right so what could happen here is if it will do the function once when it runs right and then it would actually save the output of the function so that way if it ever gets called again it knows what to do without the sort of heavy weight of doing the calculation again so it just uses the previous answer from the result of the function now that's really powerful and how does it determine when to rerun the expensive function again it's if the dependency changes cam ref changes then all it will simply do is then it's like a flag to react to say oh by the way you need to run the expensive calculation again once it does it it catches it and until the web camera changes again this means that when capture gets executed it's actually going to be faster the second third fourth fifth time than the first time okay so that's actually going to be something really really good okay so what i'm gonna do now is go ahead and say const image source right so this is going to be the image source and here i'm going to say the web camera if go ahead and get the webcam reference we're going to say get the current thing it's pointing to remember i described it as a pointer and then get screenshot get screenshot like this okay so that will help us out a little bit and basically what this is saying is the the webcam element has a function on it called get screenshots it's actually going to take a screenshot of it okay now at this point what what it will do is this will actually give us an image so to this image it's very simple we can literally just go ahead and right now i'm just going to console.log it to prove that it's actually capturing something so i'm going to say image source okay so that's what i would recommend you do image source now what we can do is test it by saying your course is as good as your live stream thank you so much my the the content inside the course is crystal clear because it's i record the stuff so it's actually going to be like silky smooth 60 frames right now what we can do is anyone in the chat as well feel free to vouch if you've if you're actually a member of the course right now so what we can see and we're back okay cool so what we can do now is uh what i'm actually gonna do is go ahead and keep some of this music going instead and then hopefully that doesn't break it so now what i can do is let's go ahead and hit that capture button and we see it does actually do anything so we haven't actually set up a capture right so we need to go down here and the on click was hooked up to this and then what we need to do is go ahead and i'm going to make it a font size large one size large okay now here i'm gonna do is save it and i'm going to open up my terminal so f12 right guys don't freak out when it happens i've said it a few times it's just literally a case of uh again the input just dies for some reason we don't know why but it's going to be fine so i'm going to click this little button over here click it and you can see that's actually believe it or not that's how images get encoded right so that's that's known as a base64 image okay so this is actually a base 64 image so at this point what i'm going to do is play a little cool trick is i'm actually going to stay called image so i'm going to say const image equals use state and i'm going to show you guys a little example that this does in fact work right so i'm going to say state and then here i'm going to make a blank source we'll just say no for now and then when we get this image source i'll say set the image uh oops sorry this should be set the image or slack there but let's say set the image to the image source that comes back from the webcam now what we can do is if i go underneath here and say there's an image right and the source of that image is going to be our image inside of our state click save now what we should see if i go back here veloshan thank you so much dude he says please join the course you're definitely going to get the immense value sunny sunny's content is the best period first link in the description guys amazing stuff um and now what we do is we go to the top and we need to import the use state hook okay so i'm going to go ahead and say import use state save and we're good i'm going to hit command r and you guys can see there so it's loaded up so now watch this guys so now if i hit like if i hit a pose and i hit this button boom it takes a picture of it right and if i go ahead and change the picture so let's just do a song see that is storing the image in state right so this is actually really cool and it's just a demonstration of how it's actually doing it because this image this text right here is actually the image being base64 encoded and it's in a jpeg format so again just to prove everything works when i click it okay so everything works when i click that button simple as that everything works okay so if you don't have redux experience it's completely fine to follow along with the stream dude all good right so this is already getting pretty fun we're nearly 800 likes let's go ahead and keep going guys i'm going to delete this image tag because that was demonstrational i'm going to go ahead and delete this and i'm going to delete the console log right i'm going to delete this set image so we actually have the image source right here now what do i want to do next right firstly i want to go ahead and redirect the user to the next screen so that's one thing we need to solve so we're going to use react router to do that the second thing is i need to take this image source and push it into the store okay so what i'm going to do is quickly draw something out on the screen okay so imagine we have our app right so imagine our app is html html css and javascript right this is our app right now our app is surrounded by react okay so our app is surrounded by react this allows us to have a lot of power behind yeah right we all know that we will see this sort of stuff happening okay thank you so much from brazil thank you so much from sri lanka what's up guys so what we want to do is whenever we have a reactor we want data to be passed around that react app so between components all that sort of stuff what we want to do at different times for example when we take a picture is imagine we wrap our react app i imagine we wrap it so we wrap it in like a data layer of some kind right and we call this data layer redux right and redux is basically where we say imagine i take a picture with a webcam i say pop it into the data layer and then at any point inside my app i can grab that value and just pull it into the app so it doesn't matter where i try and access the value or where i push information into the data layer it will work and this is using redux okay so what i want to do at this point is i'm going to go ahead and set up our redux store so that we can keep some information about the camera stuff that happens okay so here inside of app slice what i'm going to do is i'm going to say i'm going to create a new one called camera slice oops camera slice dot js okay now this one is going to be responsible for keeping all the sort of state inside the app but the camera related state right here is about the general app state so this could be anything could be the user that's logged in it could be all that sort of information but in the camera size we keep everything that's revolved around the camera this way we keep the app separated based on sort of logic and concern so it becomes a little bit more all right now i will explain readouts a little bit more along the way don't worry about that right now what we're going to do is i'm going to go ahead and copy all of this right i'm then going to go ahead thank you so much abdel kadir for the one dollar donation dude appreciate that i'm gonna go to camera slice and then i'm gonna go ahead and paste okay so here i'm gonna go ahead and paste and then here i'm gonna change this now again just like we did previously all of the places where it says app i will change simply to camera right so the name is camera here and so forth everything is now camera okay so that's fine just for the beginning and what we're going to do here is i'm gonna have two functions that we're gonna have inside of redux okay now again we do explain a lot of this stuff inside of different builds and inside of the course so redux sort of content don't worry if you get a bit lost it's fine watch one of the other builds or join the zero to full stack around we're going to basically go ahead and get things moving all right so here what i'm going to do is say set camera image and i'm going to export that next thing we'll say is reset camera image and down here reset camera image now i need to create a reset camera image this takes a state and what the reset and the camera image does is it goes ahead and firstly we're going to change this piece of the size to say so rizwan says are all the modules available inside the actual course are these builds available with explanation to beginners all the explanations for these clones are actually while we're live and while we're doing it and also all the modules inside of the course they're slowly getting released week on week right so we have react basics which is up and running right now and then you've got me working overtime 24 7 to go ahead and deliver content every single week alongside with weekly coaching calls so when we set the camera image right what we want to do is we want to go ahead and change the state so it changes the camera image inside of our state to whatever we pass in the action payload okay so this will make a lot of sense when we do this stuff the next one reset camera image whenever we call this action we're going to go ahead and say state dot camera image equals no okay so this one when we call it it's actually going to replace reset camera image to know so that's going to help us out now we're gonna have a selector this allows us to pull information from that store remember we talked about pulling information from the store so here we say select camera image and this will go into the camera slice and it will get the camera image okay so that's what it's going to help us out now we've created this right here but we need to connect it inside of our store so that everything works the way we expect it to so inside of store dot js what i'm going to do is i'm going to create another slice to the store so here i'm going to say camera okay and this one is going to be responsible for connecting the camera reducer right so camera reducer and here what i do is i simply copy that line and i just change it up for how i need it so instead of the camera slice just undo that and click command d as multicurser and that allows us to do this so now we're importing from the camera but i'm putting camera reducer from the camera slice on okay so your boy papa react is back hell yeah rock he says sonny is back hashtag paparat you guys are back you guys are the papa fam and we're almost 800 likes we're five likes away from 100 likes 800 likes i think we can do it when the beat drops then we can do that let's do it guys let's push over that 800 like mark amazing stuff guys amazing stuff i can see that number creeping see that j john he says one from my side same says send you rocky my boy keep it up 800 likes there we go crazy stuff i love all of you guys honest and it's incredible the support you give me say gonna go back to the camera size everything is pretty good we got camera image and reset camera image right so now what we do is we go back to our webcam capture and here where we took the image right what i'm gonna go ahead and do is say i'm gonna go to my webcam capture and i'm going to go and do the phone i'm going to say to get the dispatcher which so the dispatch allows us to shoot one of those actions that we talked about before so remember in the camera size we had actions like camera image reset the camera image which allow us to modify the state inside of our redox store so what we can do is here we can get a a dispatch object so we can say dispatch equals use dispatch this is a handy little hook provided by react redux token use dispatch and it imports it from react redux then what we can do is i can go ahead and say dispatch now at this point i can go ahead and do i can say set camera image now i need to import this from features camera size so you see we've got the selector as well but we want to set the camera image at this point and i'm going to pass in as the payload so you see it actually takes a payload you can see that right there so what i'm going to do is go ahead and say set payload image source image source i love how alexandrios always comes in clutch with the plus use dispatch hook honestly it's so cool all right so now what i'm going to do is hit save and if you're getting shut down by nightbot i apologize guys it's just to help control spam so the next thing we're going to do is actually just check that this actually works okay so let's go ahead and see that this works so hit refresh and then what i'm gonna do is open up so you're gonna have to download the redux dev tools for this i really recommend you do it because it really helps you out in terms of understanding a react app you can use apps things like typescript that's fine but here you go app you can see here's our app store which is empty app slice we've got the camera slice over here and it's pretty cool how you can see me chatting over here in two different parts of the screen now you can see camera camera image no okay so so at this point what we're going to do is we're going to go ahead and say we've got that yes i'm going to go ahead and click this button so you see when i click it it updated the camera image right with the actual picture that we saw earlier so the way it did that is if you click on you see it dispatch an option interaction inside of our camera slice with so inside the camera size is dispatch an action called set camera image if i click it and then i go ahead and see where dispatch the type of action was camera set camera image and the payload was the image itself so remember i showed you before this image can get rendered onto the page car cash back says guys i can personally vouch for zero to full security i'm a professional rails developer getting mad into react that's what i'm talking about that's the energy we have inside the community papa fam is growing strong and it's never stopping he goes oops i just realized i'm commenting with a client's youtube account nice how can you contact me inside the course guys first link in description you can contact me inside there and it's all good right so at this point what we're going to do is we're actually so we've got that set right so that allows us to the next thing so now at this point what we want to do is we want right so at that point what we're going to do is we want to redirect okay that's cool do this one yeah we want to redirect so what we're going to use is react router in this case so we're going to go over to react router.com and i will figure out the input issue i don't know why my mic keeps cutting but we'll figure it out but nothing's going to stop us it's as simple as that guys so here npm install react router dom so i'm going to highlight react router dom go over to my app go ahead and command j to pull up my terminal and say yarn add [Music] react oh god not all of that stuff but react okay yarn add paste and i don't wanna know that okay yum add react we're done here and uh and then it will go ahead and add all of the dependencies for react router so we can trust that that's going to happen and then at this point i can go down here what i like to do is i literally just go ahead and grab the entire sort of router section and i'll show you how i do it every time right so this actually allows me to never get it wrong i basically go ahead and pop it inside here so inside of our app so at this point we don't really care about the webcam capture just for a sec so i'm gonna go and just leave it underneath so we don't need to say let's build snapchat we know we're gonna build snapchat and we're gonna hit command v to paste in that code right so at this point we need to have a look at this we don't need any of this stuff at the top so we don't need the navbar stuff so we can delete it right very simple now at this point we've got the router and what we want to do is actually go ahead and give this class a class name of app underscore body so very simple and just underscore body and then we've got the switch now the switch basically says that depending on which route that we land on it's going to render the component inside so we don't need any of this stuff over here for now we don't even need the comment for now right and then what we're going to do instead is say on the home uh on the home path so we're going to say on the exact home part to make it a bit more robust we're going to grab the webcam capture and chuck it there so if you're on the forward slash so the home page basically it will go ahead and take you here now what i can show you to prove that this works is i can say let's just say test for slash test and then here i can just say h1 uh yo what's up i'll show you how this works all right go ahead and hit save go back to our application and now it says root is not defined a bunch of dependencies on in defined so what we can do at this point is very simple we can go to the docs we can grab the imports and we're not going to use the link here but we need the rest of it so you see you don't need to remember this stuff right will it be recorded yes this video is going straight back up back up on youtube after it's done all of the live streams do nice so at this point i can go ahead and hit refresh i'm sorry wrong bit i can go down here and hit refresh so now remember on the home page it will load the web capture component so if i go to forward slash test it says yo what's up nice okay now what we're going to be doing is we're gonna go ahead and say this is incredible we have 828 likes incredible stuff and we have 300 people still watching amazing all right so at this point this is the power of the papa fam we're just not going to stop growing guys we're not going to stop growing right so after we take a picture right so let's look at how the original app works this is the beautiful snapchat app that we built let's look how it works right so if you go ahead and take a picture so we're on this screen and then i go ahead and click the take a picture button we have a preview screen right we have a preview screen so at this point you can see at the top it says four slash preview so at this point what i want to do is i want to create a four slash preview route okay so i'm going to go here now this one doesn't have to be exact it's fine you can get rid of the exact name but i'm going to say four slash preview and i'm going to go ahead and create a preview uh component okay so i'm going to go ahead command b open up my docs i'm going to type in preview because this is going to be the preview screen so i'm going to say preview.js enter rfce for our nice little snippets and then here i'm going to create a div with a class name of preview because we're following the bam naming convention and i'm going to import the appropriate preview.css so that way we can style that screen command b create the preview.css file boom done right everything's working really really good right now exact what do i mean by exactly means it has to exactly match this part not forward slash blah blah blah right it has to exactly match that part so that's what i mean humor so now at this point with the preview what we can do is i'm going to go ahead and import the preview so i sometimes my oo import doesn't work so i have to say import preview from preview there we go save and now what we can do is inside of webcam capture when we took that picture i can actually redirect i can force a redirect right so this is going to be really really uh what's the naming convention papa mentions i'm not familiar with it it's called the bem naming convention so if you don't know i'm a huge fan of the bem naming convention and it's a class-based naming convention um which allows you to sort of it's a naming convention for naming your classes sorry we go through this inside of our course here to full stack hero if you wanna be part of the papa fam you already are but if you're gonna be a real cool part of pop fam then go ahead hit the first link in the description we teach all this stuff okay so feel free to check that out now at this point we're gonna do a redirect programmatically so at this point what i would do is i will import something called const history and here i say use history right use history and what this does is it gives me the history of the web pages for example imagine like when we're on the web page it's going to give us the history of the web page and what we can do is we can push your page on so it's essentially a redirect so we can say history dot push right history.push and i'm going to say forward slash preview so what we're doing is essentially redirect redirecting the user to the appropriate page on the webcam capture okay so i'm going to hit save on that go back to our app over here now what we can see is if i hit enter it took me to forward slash preview so that's a really good sign that's a really good sign that it's working and this is uh really really this isn't working really really nice at the moment okay so 330 people watching we have 856 people who have like smash the like button okay so if you haven't already i don't know what you're doing smash that like button get up to 900 guys i think we can hear a thousand in today's stream that would be dope i mean look you've got two of me today so it's gonna be pretty cool right uh thank you sora for sending those uh handy little suggestions to everyone in the chat that's really handy actually so at this point guys what we're gonna do is we're now gonna go ahead and make life a little bit more simple and just start creating the preview page okay so the preview page firstly the style the webcam capture right so webcam capture we want it to look a certain way but before we do that i'm going to actually first modify our app.css because our app.css will determine how everything look and feels right so let's go to app.css and the first thing i'm going to do is we have an empty app so i'm going to go ahead and start the app and i'm going to say okay so the app body right so actually we can do this one afterwards let's do that afterwards the first either style the webcam capture because that'd be a little easier to do let's go to our webcam capture so we created the file but we didn't create the css file so i'm going to create a webcam capture dot css file and then here at the top of the webcam capture file and say import webcam capture.css there we go save right so that's pretty cool now we've got access to our webcam.ca webcam capture the css so at this point the because we're using them i can be confident that i named the outer the webcam capture so here i can say webcam capture i don't know why that's such a tongue twister but here i'm gonna say position relative because i want the children to be relative to this when we do absolute positioning now at this point the button i gave a class name a webcam capture right so what we're now going to do is i'm going to say webcam capture button position absolute right now what i'm going to do to make this a little bit easier for you guys is we're going to go ahead and drop this on the same screen so you guys can see what's happening as we do it okay so oh this is the actual this is the finished app let's go to 3003 no 3002 i think it is on there we go okay so now you guys can see i hope this actually makes it a little bit easier for you i think it will because you'll see as i apply the style so absolute positioning suddenly drops it over there and now what we're going to do is i'm going to say bottom 0 so you see it returns to the bottom of the the um the screen ben says that was quick hell yeah dude we moved fast over here dude fifty percent go ahead and you see it chucks it over that way right but that's because it's 50 of the overall thing now what we need to do is say transform right translate and this was an amazing little trick by ben so appreciate you ben he actually helped out on twitch with this one go ahead and do minus 50 minus 50 and we say cursor pointer and i'll show you what happens so we say color white and save it now at this point it's actually i think it's behind it but what we can do is oops we can do color red this will change it to red for now um so right now this is obviously not correct we have to figure out why it's not happening but let's go to our webcam capture and we see this is webcam capture perfect let's see over here right so we've got the sizing which is slightly off right so at this point let's go to our app.css and what i like to do is have the app at the top and then let's have the css underneath let's have app at the top and then let's have our css underneath all right so this will help us out a little bit so here you can see we've got the app outside so i'm going to target the app now for the app i'm going to say display flex and this will be used for later on as well i'm going to say flex direction to display flex flex direction 888 likes holy crap dude column there we go align item center right so hit save and you see boom suddenly throws it right into the center of that that bullseye you see that guys that's nice right now nearly at 900 likes we're moving fast today guys we're moving fast so at this point we're going to go ahead and say we have a line i'm saying justify content center nobody can mess with the papa found guys we are too strong too strong right and now here i'm going to get the snapchat yellow so i actually had the fun of finding this color before so i'm going to say background color of yellow and we can change that together so this is already there so snapchat color and then i'm going to say height 100 view height so that way it fills the entire height of the page right there we go so there you go right we have kind of this is the finished product um we'll be in the middle of the page and this is where we are currently okay so this is really awesome hajira what's up she says thanks ma congratulations saeem and sam says oh i have been selected for the google intern inter interview thank you man so much i followed your project at my point built google clone and netflix kind of helped you rock dude that's incredible dude that's amazing holy crap let's play the let's play the papa flam song when we hit a win like that right this song is the official papa ram song i think right so at this point you see we've got a little red icon here now so we could see it very nicely before we don't need to worry about that just yet for now so what i'm going to do instead at this point is go back to our webcam capture and i'm going to change that color i think it was white right it's this song gets me hyped up i don't know about you guys but i love this song man this is like the song when uh you know when we make a win we all make a win because we are the papa fam and that's how we do it guys we support each other we grow together we're gonna be absolutely crazy we just hit over 900 likes perfect for the drop let's go guys let's keep going strong so you see it redirects us to preview when that works amazing at this point what we're going to do we're going strong right now so let's go over to our preview page right so preview page is over here now for the preview page what we're going to do is we're going to have a few things present inside of here so the first thing obviously is the image right we want the image to be there in front of us first thing so the image now where do i get the image sourced from right remember we push the value into the i love how ben is dropping the current tunes amazing stuff dude right so at this point what we're going to do is we're going to pull that image from the data layer from redux we're going to go ahead and grab it right so at this point i'm going to say const camera image right and then what i'm going to do is i'm going to say use selector so the selector at this point allows us to go ahead and pull a value from the data store all right so at this point what i can do is i'm just going to go ahead and make this a bit smaller there we go and then i'll say use selector right now over here for the selector what i can do is remember guys inside the camera slice we created a select camera image so for the select camera image what i'm going to do now is go ahead and say use selector select camera image this will go ahead and pull the camera image from the data layer right so from redox at this point i can go ahead and say the source will be the camera image right so what we can do and just to prove to you i can say h2 this is your preview right save now let's have some fun let's check this out let's see if it works right so i'm going to go ahead and hit play also there we go this is your preview that's pretty cool i i this is why i was so excited for this build it's so much fun right like uh so now what we're gonna do is you see it says this is your preview right so i'm going to hit refresh and you see it disappears because remember the the state is non-persistent okay so we can go ahead and if we refresh at this point and go back it's it's not going to be there so at this point what i actually want to do is i want to include little clause which says that if there is no camera image it will throw us back to the home page because that's actually an important user functionality standpoint right so we're going to go ahead and use a use effect now use effect is something handy in the fact that it allows us to do certain life cycle uh like functionalities we add life cycle like functionalities to our functional components inside of react so at this point i'm gonna say when the preview component mounts so that's what we do by the empty brackets i'm going to say if there is no camera image if there is no camera image right then what i'm going to do is i'm going to get that neat little history object that allows us to do the redirects and we'll say use history so is a nice little hook provided by let's check it react rear dom import it and then what i'm going to say is if there is no camera image then let's make sure to go ahead and say history dot replace and i'm going to go ahead and chuck you to the forward slash which is the homework now notice i said replace which means that you can't then go back to the previous page right so it's going to go ahead and replace the history at that point which is going to be a lot easier for us to handle okay so we now need to add in the dependencies so what is this dependent on inside of the use effect right is it dependent on the camera image so you have to add that in it's also dependent on the history variable okay so here we have to say the history saves khan says papa fam please react to this comment biggest fan from india what's up dude and let's go back here and say import like so where we've imported it and now watch what happens it says the use effect now notice how if i go to forward slash preview without anything inside the store it just redirected me right so forward slash preview let's do it once again redirect and you see it said this is your preview right so it gets there quickly figures out oh [ __ ] there's no image goes ahead and throws us back right so that's actually very very handy i think we can hear a thousand likes today i think really do you think we can hear a thousand likes in this room this is incredible right so at this point i'm going to go ahead and get rid of that and then what we're going to do instead at this point is go to our we're going to add a icon whoa check in just set it in a nice donation i love you paparik you've changed my life please keep posting don't ever stop i will not stop guys right nice um avnish says you are going so firstly avnish was here yesterday so you saw what was happening during on twitch and secondly guys you can rewind and pause and go through this video at your own pace no you know no nothing there needed we don't need anyone else here we're pretty strong as a papa farm so don't worry dude um siam that's amazing dude amazing um so click back the back button okay so if i click the back button you see that it doesn't take me back to oh it takes me back for that because it won't take me back so let's go to do four slash preview and if i click the back button it didn't take me back so that's very good right uh bad boy says sonny never stop go harder that's it hashtag proper fan that's what we're doing guys so we're going to get a close icon all right so i'm going to add a little x at the top left okay so this will go ahead and help you out with that now at this point what i'm gonna do is um and then at this point what we're gonna do is we're going to go ahead and import the close icon so i can't put it in close icon where is it and we're going to go ahead and import that at the top and then i'm going to go ahead and give it a class name so we're going to give it a class name a preview close so here i'll say class name preview oops preview close that right and then on click of this so when we click this i'm going to trigger a close preview function right close preview function so here i'm going to say const close preview and the beautiful thing about all of this guys is it's recorded afterwards so that way you can go as fast as you want as slow as you want anything you want to do right you can go as fast as you want to slow as you want uh carl says sunny just want to tell you i did four react clones and i did one month cycle and these builds are so good thank you so much dude appreciate the love and support right at this point i'm gonna go down and uh let's create that code oh we created a close preview so when we do the closed preview i'm going to do a very simple thing i'm going to go ahead and say dispatch and i'm going to reset the camera image so remember the dispatch we need to go ahead and grab that so i'm going to say const dispatch and then we'll say use dispatch all right so use dispatch and this will give us the dispatch object which allows us to dispatch actions into the redux store okay um so at this point let's just check so suddenly you are the best keep making these videos thank you so much guys um for the support appreciate you all um so at this point i'm gonna say dispatch and we're almost at a thousand likes wow uh so here i'm gonna say dispatch and i'm gonna go ahead and say reset camera image oops reset camera image features camera slice there we go and it should have imported from camera size yep and then what this will do is you actually need to invoke that as well let's not get that twisted boom invoked and then what we do is we're going to say history because we're going to do a redirect we're going to say history dot replace history dot replace and then we can do a four slash right but in fact it should actually replace us because it will trigger the use effect hook and then we can do so actually let's try that out let's see without that we may be able to do this in a nice way so let's go ahead and refresh and it says reset camera image is not defined so let's go ahead and pull this in there we go and refresh and now if i go to my there you go so i've got a little x in the corner so if i hit that nice and you see why that worked guys because it would go ahead and reset the camera image back to null with the uh redux action which then triggers the use effect because this is now dependent on the user effect and it says if there's no image which we just set it to history dot replace four slash four uh forward so which goes back to the home screen so you can see it works really really nice right and that's pretty cool peppa phone going strong what's up azam khan um because i would tell why someone used papa because it's you guys gave me the papa react title guys so i ran with it and you know me i don't do things small i do things big i'm bigger than anyone guys we're gonna keep on going with this all right so with the styling for that now what i'm gonna do is we've got the little x over here right so let's go ahead and open up our preview dot css all right so let's go ahead and start styling this up a little bit so for preview i'm going to say the preview container is going to be position relative okay position relative and then what we're going to do here is go ahead and target the position and i'm going to say position close oh no sorry preview close so preview close okay and now at this point i'm going to say position absolute because remember we're going to be absolute with this cross in respect to the parent component which is the preview divs and then what we're going to say is top of zero top of zero and then i'm going to say margin of 5 pixels this way it won't stand so close to the corner there we go and then i'm going to say a font size of 18 pixels right so a font size of 18 pixels so a font size of 18 pixels on size of 18 pixels and then what we do is we go ahead and we want to override this because we need to make sure that it works otherwise it won't actually call it at this point i mean that actually looks pretty small maybe we could leave that out we could say cursor pointer and color white and then that should go ahead and say and then i'm gonna go ahead and hit save now at this point you see works and now when i hover over it as well we get a little plus icon so a little cursor pointer which is nice okay signal clone i actually want to think i actually want to do that i actually was reading the paper today paper i was reading an app the news app today and then it actually came out with signal and elon musk saying that we should use signal now because whatsapp updated is privacy time so i i think it's not a backlog i might actually work on that okay so at this point uh if i click that little cross boom there we go we go back okay so see everything works really nice and then i can go ahead and boom so it's really cringe when it pauses on your face um right so at this point three 13.8k subs guys amazing stuff we just grew 200 in the in this one stream uh the next thing we're gonna do is and let's see if we can get five a thousand likes in one video it's crazy so inside the preview.js now we're going to have a toolbar section on the right okay so we want a toolbar section on the right now what i'm going to do down here is i'm going to say dev dot we don't even need the dell it means they say dot preview i'm just going to score toolbar toolbar right hit save and you see we messed that one up don't do that say preview and i'm using emmett for those shortcuts in case you're wondering now i've got a bunch of icons so i'm going to rather than doing one by one i'm just going to go ahead and pop them all in over here so these are all the toolbar icons that i came up with so again i found them on material ui alex says i've been struggling with redux for a while but i finally had to figure it out on linkedin and gmail clan thank you sonny amazing anyone else who wants a more you know detailed breakdown of redux check out those clones because we really do go into nice detail with a lot of drawings and stuff and and uh hopefully just like alex it can help you figure it out as well so thank you so much for the kind words dude so at this point go to the top of the file go ahead and say import boom like that save right so somebody said react is very hard it's not hard guys and if you really are new to react what i'd recommend is join the course honestly zero to four stack hero first link in description we cover react basics as number one all right number one that's what we do the web dev says thank you for the donation again an awesome bill popper you're the reason i didn't stop working on my youtube channel and kept on sharing web devs knowledge pop off bam do share some love on my channel i definitely will do thank you so much for dropping that donation appreciated so you can see here we dropped in the toolbar icons okay so at this point i'm going to go ahead and style this up make it look a bit neater go over here do preview and then over here what i'm gonna do is say on toolbar right i'm gonna say color white color white hit save and you guys can see this will take effect immediately position absolute right zero there we go it pushes off to the right and then display flex and you guys will see a nice little thing that happens right here goes ahead and it stays in a row but if i say flex direction column uh jonathan says damn i missed this but from the beginning but i'll definitely reach this layer yeah because i built three of your clothes they're so hopeful dude amazing i want your energy inside the community uh so i appreciate you being here dude and yeah feel free to watch it when you want margin five pixels and you can see boom we get a nice little let's get a little position absolute means it's gonna be absolutely positioned so i recommend you check out absolute positioning uh on w3schools or something like that and it will go ahead and help you out i'm going to cover that inside the course in the web dev essentials pack and css mastery as well so loads of good stuff coming your way guys now what i want to do next is each of these icons i want to give them some styling so here what i'm going to say is target the toolbar right and material ui svg icon dash root which means that's the class that material ui gives those icons right so we target that and i'm going to go ahead and say font size of 20 pixels margin to bottom of 8 pixels and a cursor pointer i have to give it important to override the font size so we can go ahead and save it uh i'm grabbing the snack should i get you guys something too dude i'd love a love a coffee dude um this is awesome so hey hey sonny i've made every clone you have made on tv channel i feel great amazing stuff dude i guarantee you a little bit better of a dev for it so that's amazing right so now we've got the toolbar done which is really clean right that looks really really good guys and i'm really happy with that at the moment the next thing we want to do is target the um we're going to target the footer i guess so let's have a look at our preview and see what else we need so inside of the snapchat clone notice how we had your clones are getting having more knowledge of my college man i trust me dude that's why i've worked so hard for that i'm gonna hit and then let's do a sort of smile okay that's not a nice one let's do another one there we go and then you see here we at the bottom of the preview we have a send now okay so i'm gonna go ahead and start that up so here i'm going to go ahead and say inside of the bottom we've got the image tag i'm going to add a div and this is going to be the footer of the preview right so i'm going to say preview footer oops footer like that save it drop it h2 would send now inside of it and now and then i'm going to have a send icon so this is another icon that we're going to import from material ui this one is going to have a class name of class name of where is it gone oh my god let's go one there we go yeah it's past name uh preview send icon preview send icon we still have 330 people watching amazing support from you guys i honestly can't believe it with the retention that we have incredible just comment papa fam if you are part of the papa fam all i want to hear it right now is just comment papa fam and that's it i know you're here i know you're watching i know you're proud i know you're here with this movement we're a community where the strongest community there is and that's it that's it guys nice look at that i see it flying then guys i see it flying in that's what we're talking about papa fam open up preview now i want to do is target the footer right so at this point look at that guys that's what i'm talking about how can we have a like there's no community like the papa fam that's what we're about i love you guys honestly i love you guys we're nearly a thousand oh my god crazy stuff dude here we'll say preview i started typing in papa there we go preview a footer there we go and at this point what i'm gonna do is i'm gonna go ahead and say the background color it should be yellow so let's do background color i've just i'm gonna do a basic yellow at this point uh look at that guys oh my god look how many papa farms we have this is incredible and we have so many young students as well honestly really enjoy that and love to see that all right color we're going to say color of black oh let me go ahead and pull my one up there we go so it says send the icon is not defined so let's actually go ahead and fix that with an import so the import for this one is actually going to be send icon boom boom boom boom there we go and then inside of our preview we're going to go ahead and do the following color and you see there is it says send icon is not defined so it's just there we go and then i'm going to say it's in there and they have to smile a little bit uh yeah i'm not fan of that one there we go and then we say color uh white oh black sorry let's do black and then what we'll do is we'll say display flex and then we'll say justify content space evenly because i like space evenly cool nice we still got papa vam coming in nice hashtag papa that's what we're talking about guys strongest community out there of coders period uh a line item center there we go cool and then here we're gonna say border radius of 30 pixels or the radius of 30 pixels nice and then we're going to say a padding of 7 pixels oops padding of 7 pixels there we go still coming in incredible still coming in we are nearly a thousand likes oh my god cursor pointer saying there we go so you see it's right there okay so that's pretty cool but what we want to do next is actually sort the star the positioning of this one out so what i can do now is i can go ahead and say position absolute and then i can go ahead and say bottom zero and then i can say right and i'm gonna do minus 25 pixels and it's 25 pixels right and there you go it kind of goes a bit way off on the right right so at this point i say transform translate i'm gonna do my little neat trick let's go ahead and pop this in boom and there you go it says send now on the bottom right okay now this doesn't look fully finished yet it doesn't look fully right so we need to tweak a few different things here um so let's have a look we've got this in motion there we go the padding everything done pretty good um so what we actually need to do right now is we've got preview footer let me have a quick look so we've got the font size asset so let's go ahead and target the h2 inside and we're going to say font size of 8 pixel margin right of 3 pixels and i'm going to target the send icon next okay so i'm going to go into preview to go down here send icon so we're going to go ahead and target that one and i'm going to go ahead and say that this one is a font size of this one is not 16 but 10 pixels and we're going to say important to override their styles and boom there you go you get that nice little send now icon perfect all right so everything is looking pretty good at this point we're actually doing very damn good for time 981 likes we're almost at a thousand likes we're about to break the tutorial space whenever i hit 1000 likes it's incredible the energy that's what we go for every time and uh yeah let's keep on going strong guys so at this point when we hit the send now button let's have a look at what it does so inside of the where we have the div preview footer i want it so that when we click that preview footer it's going to trigger a function what function let's go ahead and maybe trigger the send post function okay sendpost now if i go down here i need to make that function const send post and do the following all right nice so sunny mutual face to the left uh okay so maybe i should just move the camera to the left oh that's a bit better actually look at that oh god i should have had that the whole time right thank you ethio code for that one um that's actually a lot nicer to look at now uh so at this point with sempost what we can do is uh we're going to have some quite pretty bit of cool logic over here to actually send this post over to firebase um and we'll explain that in just a sec but basically what we want to do is when i click this button i want to send the post and then i want to do a redirect to forward slash chats right please make your image small it's blocking of you guys keep it you know it's not really blocking much so it's fine plus look at that there you go happy days right so with this in mind now what we can do is we can go ahead and start the same post procedure okay so here i'm going to go ahead and say uh let's go ahead and install up a a library called uuid okay so uuid we need to firstly go ahead and install so i'm going to go ahead and say yarn add uuid and this is because we're going to need a unique id to go ahead and get this working so we need a unique id when we upload our image into the database and we're going to do that with uuid the library once that's installed what i'm going to trust that's going to install there we go i'm going to say import version 4 as uuid so version 4 is the latest version of uidm but we're going to install it as uuid or use the variable as uuid so this point when we send the post i'm going to say const id right equals uuid so this will generate a random string it's a safe random string it prevents collisions with multiple sort of ids and stuff like that so that's pretty good deepanshu says i got a job offer in india because of your papa react project thanks a lot oh man that's crazy dude i love that that's insane that's the kind of energy we go for every time that's what we want inside this community all right so here what i'm going to do is i need to ins uh we're gonna have an upload task all right so the first thing we're gonna do is now we're gonna upload the image to firestore okay not firesaw firebase storage sorry so here i'm gonna say const upload task right we have to get this as a variable so it's going to be the upload task and i'm going to say storage so again storage where do we get it from source firebase so i need to pull that in from our local firebase file now at this point i'm going to go ahead and say uh so we almost at 1000 likes by the way crazy stuff right so now let's say storage dot ref okay so we're getting a reference point for when we push this into our storage database so here i'll say posts right and then we say forward slash and i'm doing backticks this is interpolation string interpolation then here i'll say id right so this will go ahead and say post four slash id and this will go ahead and upload the task into that place right but what we're going to do here is because we've got a base64 image right so remember that basics develop a massive long messy string that we saw right we need to go ahead and say dot put string oops put string right and then what we're doing is we're saying camera image and then we say comma and then for the second thing for the format we say data underscore url okay save now what this does is it makes an upload task right but what we want to do is actually have it so that when it's doing the upload task it's going to like when it completes i want to trigger off some code right so imagine it uploads the image and then we want to basically go ahead and do something when it's completed okay so the way we do that is we say upload task upload task dot on right and what this does right so you can have something called state change this is part of the firebase storage api and you can check out the docs if you want to find out more but what we can say is state change so whenever the state change the var uploads so when it's uploading and doing its thing um it's gonna go ahead and trigger this off now guys we are just two likes away from a thousand that's incredible wow literally i have no words to say for that like holy [ __ ] wow uh so i'm gonna have a quick two second break and there's gonna be a water break make sure you have one too but guys that's incredible we just hit a thousand likes holy [ __ ] if you have if you're watching right now and you haven't had a water break have one because i for sure need one so give me one sec i need to switch water bottles sometimes this is incredibly incredible if you want to be a part of the papa fan by the way first link in the description feel free to join us it's just kicking off the energy we can't contain it crazy stuff crazy stuff a thousand likes let's keep on going guys let's keep on going love all of you so at this point we're going to say on state changed right so it works a little bit weird with this one right so you actually get every single parameter is a different thing so the the first bit here you can actually have this the next parameter would be for something like a progress function but we don't care about that so we're gonna hit no the next one is an error function so here what you can say is error do a little inline function and here we can say uh just console.log if there's an if there's any error when an error occurs right so go ahead and do that and then here i'm going to go ahead and say comma right and then i do the complete function so i'll explain this in just a sec right so this will make a lot of sense so here we have the error function so if anything ever happens when it's uploading it'll go ahead and ping off here here we have the on complete function so imagine when the upload finishes that's when it goes ahead and triggers off right so um this is going to be by the way everyone this is going to be inside of the um this is gonna be inside of the uh inside of youtube afterwards straight after it's gonna be inside of youtube okay so at this point now what i'm gonna do is um this isn't this isn't anything to do this is papa fam guys it's gonna make that very clear so at this point i'm gonna go ahead and say on the complete function storage right so when it completes i'm gonna say storage so bear with me this bit will make sense storage dot um ref so we're gonna go to the reference we're gonna say posts all right and then i'm gonna go to the child which is we're gonna use the id so remember the id that we use to upload to the database right so the storage database we're going to use that to go here as well right you can do refworks slash id i think as well but it's fine and then we're going to say get the download url so think about what's happening here right here it would go ahead and upload it to the store firebase storage here it basically after when it's completed it gets the download url right now this returns a promise and when it's satisfied it will return a url okay so once we have the url we can then do the following right so we're gonna say go into the db right so at this point we're gonna import the db from our local firebase file and we're gonna say db.collection and then here what i'm going to say is the collection i'm going to say posts right so posts and then here i'll say dot add right so i'm going to add something into the database at this point right so i'm going to add an object right now here what i can say is i'm going to add a few things inside where i'm going to say the image url is going to be the url that we get back the download url next thing i'm going to say is the username so these are going to be the posts that you see inside of snapchat so imagine if i send this one these are going to be these posts that you see here all right so the username in this case we're going to hard code it to be sunny just for now right oh this is hardcoded to be papa react there we go and then we're going to have red so red is going to be by default false so this means when you submit into the database this is going to be red or false and when you open it it's going to change to true you see that that's how that works right so by default red is going to be false now what i'm going to do is i'm going to go ahead and say the profile pic right so profile pic will go ahead and adapt afterwards but i'm going to add this in and this will be the profile pic that you see but we need to implement the login functionality afterwards to get that working and then the final thing i'm going to say is the timestamp right so for the timestamp i need access to firebase so i'm going to say import firebase from firebase go back down here and i'll say firebase dot firestore dot field value and this gives you the server timestamp which is a function which needs to be invoked but this gives you a consistent timestamp regardless or irrelevant of where you are in the world think about why that's important it doesn't matter if you're in india doesn't matter if you're in nigeria doesn't matter if you're in london doesn't matter if you're in the states you're all going to be using the same service timestamp okay so it doesn't really matter what you're doing right so at this point what we can do is after that i can go ahead and say history dot replace and we're going to take you to the chat screen all right so we're going to take you to the chat screen so remember history we talked about before we've got over here that's going to go ahead and do a redirect now so many things just happened right the sound is good sound is going to get no it hasn't i think we're good uh i think we're good right let me know if we're good but i think we're good um and then what we're gonna say uh yeah so that's fine uh history don't replace chats and then over here yes mehmet this will all be hosted online afterwards okay no worries dude so at this point here actually i went and did it and it pushed us over to four slash chats so this means that two things just happened in the background there right so if we go over to our database right now i should have just uploaded a post right so post new post and we've got an image url and everything's uploaded but let's even check something else this should go into hosting which we've never done before no sorry storage which never done before and then you see it uploaded a post and they uploaded it here so we actually have the image being uploaded in firebase posts and firebase hosting sorry firebase storage sorry it uploaded the image in firebase storage and then it gave us that download url and then what we did is we used that download url to store a reference to it inside of our database all right you see how we use two technologies or two different services it offers to basically go ahead and have a storage mechanism alongside a firestore yo what's up sweden's in the house what's up carol good to see you here dude that's amazing stuff guys over a thousand likes already in this video it's honestly incredible if we get any further than that i'm just i'm happy guys honestly incredible so at this point let's go back to the app and let's continue strong because we're going so goddamn strong right now and we want to keep this energy high mayan mirror what's up noob that's good man all right so now we're at the four slash chat so what we're going to do is we're going to go to app and we're going to make sure that this will work so i'm gonna create a route for four slash chats and i'm gonna create a component called chats all right so let's go ahead and create that component so chats.js chats.js and i'm going to say rfce and then here i'm going to have our you know our standard procedure we say chats.css oops chats.css and i go down here to divs when i say classname of chats there we go chats and then i'll go ahead save the file go ahead and create one called chats.css boom there we go everything's good so anyone who's asking about the code on github just know that this code will be uploaded to a repo on github however it's only available for platinum and diamond members inside of zero to four stack hero we are gonna eventually make it available as an add-on for silver and gold members but however right now we only give access to the papa github repo for users who are papa platinum or papa diamond members if you want to know about that more be i'm joined the papa fam officially first link in description join the full stack zero to full stack hero community right so go ahead to app.js and you can see this and you've got chat is not defined anyone is inside of our community already you guys are going to get access to all of this beautiful code afterwards so it's going to be a lot of fun for you guys so at this point we've got the chats so what i mean by the chats is this right here so we're going to go ahead and build this out right now thank you molly swarron he says you are doing a great job appreciate you dude i'm super thirsty today wow this is crazy so i apologize all right shreya says love your content let me react the conventional way felt so boring upon these amazing builds love love love hashtag papa fam ayush says sunnybrook just want to say that your videos on your channel are way much better than on uh on different channels they interrupt so much thank you dude um so at this point what i'm going to do is i'm going to go ahead and refresh and we've got this so perfect so at this point i'm going to have a chat header section first okay now the header section for our build is going to be this one over here so this where it says friends at the top so that's what i'm gonna be uh bothered with first let's say so i'm gonna say dev dot chat's header and remember i don't need to actually put div there but it's fine so i'm gonna have an avatar on the left so i'm gonna import that from material ui see i would tell on the left and then we're going to have a class name so let's go ahead and give that class name to style it i'm going to say chats underscore avatar and then here what i'm going to say is we've got three sections we've got the left which is going to be um the avatar we've got the middle which is going to be the search section and then we have the right which is going to be the um chat icon right so it's gonna be the chat bubble icon okay so at this point and you guys know that i'm multitasking i'm banning users who are spamming so that's crazy anyone who noticed that that's pretty cool so here i'll say chat underscoring score uh such that's what you call multitasking blocking spam while you're coding on a live stream on youtube right so here and now what i'll do is i'll say i'm gonna have a search icon so i'm gonna pull this in from material ui right and then let's go ahead and do this uh anyone's asking me about how do you do yarn add uuid that's a uh search what am i looking for search icon yeah i need to go ahead and import the search icon boom we've got the search icon go here and then we should have the search icon on the top of the page so let's check it out boom now this won't look very good in the beginning trust i know that it's fine uh we'll make this look a lot cleaner once we get it looking right so there you go so that's what's here in the beginning but we'll get it there right it's a work in progress right so at this point i'm gonna say input so inside the middle bit we're gonna have an input there we go that's fine the placeholder for this one is gonna be friends because that's what you see in the final build right sonny has that hardcore gamer multitasking ability i love gaming too dude uh so yeah i do uh i might start gaming on twitch i think i've had a few suggestions here we've got chat bubble icon class name of chats icon chat chat underscore chat icon cool so at this point i'm gonna import this it doesn't pop up sometimes so annoying when it happens but let's go ahead and import that into our code so over here boom chat bubble icon and then i'm gonna go ahead and refresh so we should have the chat icon up and running here perfect so with that done let's go ahead and style this header so it looks pretty decent because right now it looks ugly all right so the first first thing we're going to do is go ahead and style the let's go ahead and pop this down under here i like doing it this way because you get to see as i do it it works right how many days it took you to become a developer um i'm not gonna answer that one but guys if you expect to be a developer overnight then you're being realistic with the amount of work that it needs to to go ahead and get in right i read a book once and said you need to have 10 000 hours to even consider yourself as an expert or something and truth be told i don't even consider myself an expert yeah right so height of 400 pixels width of 250 pixels is safe there we go now we've kind of set the sort of constraints the position i'm going to do relative at the top and now for the header so chats underscore underscore header and ma says sunny what's up all right ben says don't don't style it it looks perfect like this i think it looks beautiful guys i don't know about you i think you smash the thumbs up button for this design right here right uh nice so is ayush says is m1 mac good for web dev yeah dude m1 max dope for web dev i someone say display flex i mean why wouldn't it be lex justify content your your ipad could be good for web dev honestly you don't need anything special space between may use what you have otherwise this is an excuse right align items center and then we'll say padding left padding right i know there's a short hand for it but i'm not interested today i'm just going to do this one uh when there's that padding left padding white oops oh god oops padding right there we go and then what i'm gonna do is you see everything looks a bit chaotic right now i'm gonna give this a background color of the blue that snapchat have i went ahead and found that yes i have a life i do this stuff too i say height 40 50 pixels and then boom why would we get this top bit uh oh we have a flip but a flip club flick cart clone coming soon so yeah keep an eye out there's going to be some stuff like that coming um so at this point we've got the header sorted right so i'm going to go ahead and do the search code next so i'm going to say chat search and then here i'll say display flex and then i'm going to align item center right and then i'm going to say flex 1 because i want that middle field to take up the majority of the space and i'm going to say padding to the left of this padding to the left of eight pixels okay so that should look pretty good right so something's messed up here but we'll fix that now i'm gonna target that avatar in just a sec i'm gonna change the dimensions of the avatar to 25 by 25 and i'm going to do an important tag which would shrink it down so this looks pretty good at this point right so the input filled inside of the uh chat search we want to target that one right so what i'm going to do is i'm going to go ahead and i'm going to show i like to mix it up with the selectors to show you the capabilities so here we're going to go inside the chat search div and we're going to target the inside input now when we're inside here i'm going to say outline none and this gets rid of the little blue highlighting thing that you see when we click into it so that makes it look good ah please don't spam the chat dude otherwise boom band all right so at this point what i'm gonna do is i'm gonna go ahead and say background color transparent and then i'm gonna go ahead and say border none i'm actually shocked that i can communicate with you guys while i'm coding it's a skill that i've built up over time i'd say like you can just kind of code and talk to you guys as well it's crazy like it's crazy how it happens but it works you know now that that looks pretty pretty ugly i'm not gonna lie but what i want to do is i'm gonna go ahead and say chat search all right so i'm gonna say chat search so chance i'm just going to go search and then i'm going to go ahead and target the input fob i'm going to target the placeholder all right so i'm going to say the placeholder should have a color of white and then i'm going to say opacity of one right opacity of one and then we'll hit save now you can see that changes the actual placeholder text to white which is actually pretty nice right it looks pretty good right suddenly got super code in here right so now once we've done that we're gonna go ahead and do the next section now the next section here is going to be pretty sure i kind of passed out for an hour pretty sure i was subconsciously learning still nice car cashback that's so jokes all right so at this point i'm going to do is i'm going to go back to my chats and i'm going to go ahead and do the following so we've done the header bit and at the bottom we're going to have the posts underneath this right so i'm going to say chat post so chat underscore posts like this and then inside of here i need to loop through the posts and do some cool stuff now how do we figure that one out all right i'm gonna have to figure that out in a sec um but firstly let's just style out the chat post so that way we get like a rough idea of what the design will look like so it's going to chat and then let's check out chat posts and let's see here so chat post is going to have a height and this height will be 359 pixels and believe me it has a purpose it has a purpose right 159 pixels and then the background color of this is going to be white so the background color here is white i'm going to hit save and chat posts is actually needs to be saved and then we're going to go ahead and there you go we've got a little nice background and now what i want to do is i want this to kind of come into the top right so notice how in this build it's got a nice little kind of 3d effect where it kind of comes up into the top we want the same thing to happen here right so what we're going to do nitesh thank you so much judy says you are awesome man you are awesome dude for watching thank you um so we've got the chat post and now here what i'm going to say is a box shadow so i've already figured out the box shadow for this one so i'll show you how we do it so i've used this box channel generator oops i don't open out i'm going to say box shadow and there you go we've got a nice little 3d box shadow happening there and then i'm going to say a margin top of minus nine so it will pull it upward if anything so margin minus nine that counteracts the nine over here so it's 350 uh to and then we've got a set sort of height for our app and then here i'm going to go ahead and say border top left and border top right of 10 pixels okay so this will give it a nice little rounded corner effect so boom it looks like a little bit of a 3d effect now and then the finals finishing touches i'm going to say an overflow of scroll right so that would look awesome so june razar says you're uh you're also saying i got rejected from a company four or five months ago i followed your close now i got a chance again to get interviewed by this time i cleared it amazing dude that is honestly amazing well done you should be honest you're proud of yourself that's cool dude so now you can see this little drop down over here on the and on this is overflow right we don't want the overflow scroll bar so at this point to get rid of the overflow scroll bar what we do is there's two things we can add so one uh gets rid of that sort of scroll bar on the major browsers and then the rest you have to sometimes account for internet explorer edge and firefox so we do that and that will go ahead and get rid of that for us so if we go ahead and hit refresh we shouldn't see the overflow oh let's see why we see our overflow so chat posts we've got webkit scroll bar none overflow scroll interesting okay so we'll fix that in a sec okay so i'm sure i've saved that uh chat post none cool i mean we'll fix that in a tech that's fine um so at this point we're going to go ahead and continue on with the chat post right so i'm just going to test something i'm going to say h2 hello and let's see what happens here okay interesting so we'll come to that in a second we'll finish that one that's fine chat posts oh sorry there we go chats chat chats there we go i messed up that's my bad so don't mess your naming convention otherwise it will break chat there we go so i save both of these and we fix our error there we go so now we get rid of the scroll bar perfect all right so debugging 101 don't give yourself a heart attack you just have to slowly break out and try out thank you you are for the suggestion dude it's always nice to have here little suggestions helping me out right all right so at this point what we're gonna do is we're gonna go ahead and say chat posts um anyone asking for a redux basics tutorial please don't spam but i will be building a lot of this stuff inside our core zero to full stack hero if you're interested first link in the description otherwise be patient that's all i can say okay um so for the chats at the top we're going to go ahead and do the following so we need to pull in the chats right so what we need to first do is let's get rid of the css file at the top of the file we need to have a piece of state to keep track of what swap for the trap for the posts so here i'm going to say const posts all right let's mix it up i'm going to say const posts set posts and then here i'll say use state it's so weird how my mic works right i don't know why it does it when it feels like it's doing i don't know but here i'll say use effect so when the chats component loads on a fire of some code now how many times i want to fire it off i don't want to fire off on mount so i'm only going to add in the single dependency okay so at this point what i'm going to do is i'm going to go ahead and say db so we're going to import our db from our local db database file we'll say collection of posts remember we pushed into the posts collection earlier and at this point i'm going to say order by right remember i added that timestamp regardless of where you are in the world it's going to use the same thing i'm going to say order by the timestamp and do it in descending order okay then what i'm going to do is i'm going to say on snapshot on snapshot so this will go ahead and say whenever something changes inside the db go ahead and give me the latest database snapshot so if something is added to the database so it gets removed inside this collection of posts go ahead and give me the latest value okay when that comes in i'm going to say update the posts so update the post and what do i want to update the post to okay so i'm going to say get the snapshot i'm going to say get the docs they'll get returned with the snapshot get a map through it and now for every single dock i want to return a object now what's inside this object this will make a lot of sense in a sec we're going to have an id which is going to be the document id so let's look inside of our firebase firestore so you can see here we've got the document id and then we've got the doc.data over here right so we've got doc id.data so here i'll say the data is doc dot data oops that's not nice i don't want that doc dot data and then hit save and now what this is going to do is this sets up a listener right it sets up a very nice listener and what's going to happen is every single time the db changes it's going to go ahead and give us the most recent value and update our posts does that all in a very nice call okay so that's very very slick works really nice right so the next thing we can do is we've now got access to our post so inside of the state right now we should see the posts right so what we can do is we can go over to the bomb and we can go to our post so we should be able to map out our posts so here i'm going to go ahead and say posts dot map and then i'm going to say for every single post go ahead and return the following now what do we return i'm going to actually go ahead and firstly destructure the post right so this is es60 structure and say get the id and data that we originally put the objects into bombers hey also destructure the data because we've got some more stuff i'm interested in get the profile pic get the username this is all the stuff that i pushed into the database username get the timestamp get the image url and get the red stairs so all those things right and then in the return block here i'm going to say okay render out a chat block now the chat block is going to have firstly an i a key right key for rendering is important when you've got a long list of things right so what we're going to then say is we've got a bunch of different props now i'm going to keep the prop names the same so then we're just going to pass them through as props everything looks pretty pretty good right so with that said we're going to build a chat component two still 265 people watching this is amazing i love you guys and appreciate all of you i'm going to go ahead and say chat.js rfce this is going to be the component responsible for each individual list item right so let's go ahead and say here muhammad says what are you using for streaming right now i'm using streamlabs so class name equals chat and let's go ahead and create a css file so it says say chat dot css save and then here what i'm going to do is i'm going to firstly create a chat dot css so it doesn't bug out chat.css inside of the chatsa plural i'm going to go ahead and import that chat that i just created save right now what we should see inside of chat dot here address the props come in here we can go ahead and destructure it and pull out what we need as from the props so at this point what i can do is i can go ahead and grab the props that were passed in so those were the following i had to use name timestamp red image url profile pic doesn't matter about the order just because they're keys to the object okay so that's pretty cool and then what we're going to do is we're going to have a avatar first thing we're going to have an avatar the u source of the avatar is going to be the profile pic now it doesn't matter if it's if it's no or if it's undefined it will simply render an empty avatar the next thing we're going to do is the middle section right so the middle section is going to be the chat info so the chat info a bit what is that about we're going to have a h4 with the username so for example it will say sunny in the top bit right so this will be the username the next bit we're going to have a p tag this p tag will say the following it'll say tab to view tab to view dash the profile pic is encoded in base64 yes so base64 images can obviously be passed in as i say obviously i'm sorry i don't mean obviously but you know i mean it can be passed in as a source uh object so remember we pull that information in from the db and then it goes ahead and get we and then we render it as a chat component public's content is always fire thank you pooja now here what i'm going to say is i'm going to pull in a quite a nice react time to go timer goes or comparison you see how we have one hour about two hours ago and so forth what we can do is firstly if i just go ahead and do a little trick right so we've got the time stamp but the time stamps in this weird format right now to render it out you have to do the little trick you have to say timestamp it's an optional because it could be undefined in the beginning we have to say new date pass it in today and then you have to render it to a utc utc string right so that's a little trick that you can do when you're rendering this stuff out so if we do that at that point let's go ahead and check our app right it says refresh and it's dying it's saying avatar is not defined let's go ahead and refresh import thank you so much the code crews said why did you leave cp to pursue my own journey dude that's it um and now what i'm gonna do is i'm gonna go ahead and style some of this out so the avatar here i'm gonna go ahead and say class name equals chat underscore underscore avatar there we go and then fricative code says sonny you're so amazing continue doing what you're doing i'm enjoying the rich content you share for free and planted great peppa farm right here in my country in africa cameroon dude join our public fam dude everyone can everyone is we're international dude we've got people nigeria cameroon we've got loads of individuals from everywhere literally a hundred and sixty members strong at the moment in papua farm inside of zero to four stacker of course which is incredible seeing as we just opened it ten days ago which is absolutely amazing right so now at this point israel nice um so at this point i think we almost about to hit 1.1 k likes guys that's incredible um so we're going to style this up a bit right so obviously this doesn't look ideal at this point and obviously if it's a new message i want it to obviously be something like this so imagine if i smile and i say send now the new messages have a red status okay so how do we get the red stairs we just say if it's not red so if it's unread then we're going to go ahead and render the stop rounded icon so stop rounded icon from material ui and i'm going to give this one the class name chat red icon so last name chat red icon so this one here and i'm gonna hit control and i can't import it because the gods are against us so let's go ahead and say import at the top there we go and then here what i'm going to do is i'm going to save it go back here and then we're going to go ahead and refresh and now we should see a little dot okay so now i'm going to start this up make it look really pretty and everything should work as we expected to so chat.css let's go ahead and style this out and i'm going to go ahead and pull this down because you guys like to see the code as i do it so the first thing we're going to do is the chat itself okay the chat itself how do we get this thing sorted out so i'm going to say chat and then here we'll say display flex right display flex i think we can hit 1.1 k soon guys let's keep going item center justify content space between space between the retention on this channel is actually incredible honestly it's incredible padding of 8 pixels 8 pixels and then here i'm going to say border bottom border bottom of one pixel solid white smoke if you know about the white smoke then you've been a true loyal fan cursor pointer right i'm gonna go ahead and there you go it's already looking kind of kind of better we're gonna start that chat avatar with a height and width of 35 pixels we need to override in order to beat the styles i'm going to give the red icon a color of red right so red the color not red yeah chat info is going to be flex 1 with a padding left of 5 pixels because that in middle section i wanted to take all the space now at this point it looks super crammed in there so we need to go ahead and get in there and fix it up so firstly chat info we're going to target the h4 and we're going to add the following to it we're going to say thank you bharat joshi for a nice little donation there appreciate you dude go ahead and hit save we got papa react drops in a bit smaller and the p tag will give a font size of nine pixels say that boom looks like automatically a lot cleaner now this doesn't look great tap to view with a timestamp we don't really want that we want something to be a lot cleaner for that right so how do we do that let's go ahead and install a nice little package called react time ago okay so react time ago nice little package i'm gonna go ahead and say yarn add react time ago all right jay says love this sonny appreciate love you bro we're absolutely crushing it today it's already going pretty damn good and uh we're making good pace so far so you guys enjoying the stream make sure you smash the like button we just hit over 1.1 1.1 k likes that's 1 100 people who liked this today honestly incredible incredible stuff thank you guys so i'm gonna go ahead and drop the terminal and now you can see we've got this up and running so where we have the old timestamp i'm actually going to go ahead and use a component called react time ago react time ago okay and this one just takes a date and all i'm going to do is i'm just going to pass that day in pretty easy right pass that date in and then i'm just going to close it off and here i'll go ahead and make it a self-closing tag and now for the react time i go to pull it in i need to go ahead and import at the top so i just go ahead and say uh there you go and now check this out guys so this will actually do a time ago boom look how nice size and that's actually a very nice row time sort of one as well so as soon as we do it it's actually going to go ahead and show you like one second two seconds three seconds ago and so forth so really really cool stuff amazing thank you so much bro for the kind words we're doing we're doing pretty good right 1.1 like she's just had dinner and i see this and honestly it's crazy we're killing it the energy today is insane all right so now with that said guys i'm gonna go ahead and for the chat i'm gonna firstly go ahead and hide this for a second because we don't need to show that but you can see we're actually getting pretty close right we're getting pretty close to what we're getting to so here on the div on click actually what i also want to do is let's go ahead and go back into my chat i'm actually going to have it so that when i hover over the chat it has an opacity of 0.8 thank you junaid raza for that nice little donation appreciate it dude so this will allow it to have a nice little hover effect and i like a little opacity trick because it looks like you have some level of interaction when you do that trick so it's a nice little kind of nifty trick that you can have right so that's pretty dope so at this point we've got all this up and running so i'm going to go ahead and have an on click on the div so when i click on this div what i want to do is trigger an open function now let's go ahead and create that function over here so i'm going to say const open uh let's open equals and then i'm gonna render out a function not render but you know what i mean and we're gonna say if it's not red right so only if it's not red right so if it's red then you can't open these messages obviously so we'll say dispatch and obviously this is not exactly how it works inside the snapchat they probably actually delete the message but this is a functional way it will work select image so we're going to go ahead and say select image now at this point we have the camera slice remember guys we had inside of the camera slice select image so which we don't have at this point right so we need to update our camera slice to to have the support and functionality that we need so the first thing we're going to do is oh we do have it sorry i'm getting confused that's all good select image right so this one will say this one we will then go ahead and say select image image url so i'm going to go ahead and say um so i need to update my app slice that's it so right now inside of app slice we're gonna have it so that we have a piece of state for the current selected image that is being rendered on the screen we're also at some point gonna have a user so here i'll say user no okay so at this point oops user is no so i'm gonna go ahead and create the implementation of what i need here to support the app afterwards so here i'll say login so i'm actually gonna create change this and do command d to change it here and say login is one of them and when we do a login it's going to change the user to the action.payload all right so that'll be a easy little thing we're going to have a logout now this one just takes the state and it's going to be pretty simple what it does is it just takes a state.user and returns it to null and then we're going to have a select image now this one is for when we tap on the image that we are sort of hovering over inside of the chat screen it should go ahead and then say or show us a preview of this selected image we say selected image equals action dot payload it's looking perfect bro exactly dude and then here we say reset image as well so these are all things which are going to allow us to go ahead and have some control over the state when we do what we need to do so i'm going to go ahead and pop this here and i'll say state dot selected image equals no so remember that's like a very simple state now we need to go ahead and export this stuff so i'm going to here i'm going to say login log out uh select image and we're also going to say reset image there we go cool nice so now it's available outside now i'm also going to create two selectors for the one for the user one for the selected image so i'll go ahead and pop this one out of the way create one for the select user which will go into the app and grab the user so this one here and then we've got another one select selected image which goes into the app and gets the selected image so go uh boom there we go alexander thoreau says hey sonny my favorite youtuber i'll be creating this later week just came to say hi what's up dude appreciate you thank you for dropping the kind words um let me know how it gets on so now at this point we can go ahead and pull in the select image from our app slice done right that looks pretty good and we're done but yeah i'm joking i'm not done yet i just got like a wave of energy when i did that so when we when we do that we're going to dispatch the select image but we're actually going to pass in the image url so what this would do is when i click on the image right so dispatch is not defined so we need to pull in our dispatch so when i click on the image inside of the chats list it will go ahead and push the image that i kind of clicked into the store because remember we're going to need that to render on the screen at some point go ahead and hit save on that oops save on that i just said then i go back why is this hashtag papa because it was the you guys gave me the name of the papa fam that's why all right so this will dispatch the image into the store so if we go ahead and inspect at this point so if i go ahead and inspect when i click when i go ahead and click so let's go ahead and open up my redux so you guys see if i click it select image and what this did at the first point is it changed it from node to the image itself right so this is the image download url so this one here you see that right so when we click it it selects the image and pushes it into the store so that's very clean right so at this point what we're gonna do is go over here to if uh unread then go into db.collection and then we're gonna say okay go into the posts and then we're gonna say uh go into the document with the id that we passed in as a prop and then we're going to say set now set you have to be careful with right because we're using this to update the red property to true so when you click on that field it will change the red property to true which means that that little red dot of an unread message will then disappear right so it will go away after you do that for the first time but what we're going to do is we're going to say merge true now if you don't put merge through just override everything or delete everything inside the document and just put red true but merge means it just goes inside and changes it ben says sunny water break thank you dude i don't know about you guys i get way too carried away faizan says sonny looks so tired man i'm i'm good dude we just started the papa fam in record time so i've been working pretty hard dude that's why that's why all right how many bottles you got dude i've got unlimited bottles over there i tell you i get ready for this all right so at this point what we're going to do um your eyes there for the sleep thank you dude uh so at this point we're going to go ahead and do after we update i'm going to redirect the user so if we ever whenever we do a redirect we're going to need access to the history object right so const history and then we'll say use history boom i'm going to go ahead and pull this from reactor dom like so right and then what i'm going to do is um dimitri said why not just use update then oh uh i think you could use update i mean i'm used to using set though because i it gives me a bit more flexibility but if there is update you can definitely use update um but here history there was a reason why i didn't do it though i can't remember the exact reason now but there was a reason why i previously used it but it's fine if you find another way it's all good dude history.push so we're going to go ahead and push them into four slash chat four slash view so we're going to create a view for this as you guessed it and this is going to be where is your paid courses first link in the description if you want to get to four zero to full stack hero i want to see you in there dude that is booming we've got literally hundreds of users already 160 users already it's crazy we've got uh papa farm growing on youtube at a ridiculous rate it's honestly crazy history.push and at this point it will redirect them to chat store view so if we go into app.js you guessed it we're going to create another view right so here chats forward slash view right so at this point what i'm going to do is i'm going to create another component called chat view okay so this one's going to be called chat view right um ben is an amazing dude he's such a core piece of the papa farm dude that's what like that's a spirit we have here dude right so chat view over here what i'm gonna do what i'm gonna do now is i'm gonna create a chat view thank you dude frank says let's give sonny more energy let's go that's what i'm talking about frank that is so dope man thank you so much five donation chat view.js so here i'm going to say rfce right and then i'm going to go ahead and do uh so aisha said is set same as update no if you set without using merge true it overrides the entire document with what you put in the object update i'm guessing just goes in and flips whatever object like key you passed in with the value that will go ahead and update that so that's just something to be careful of okay so here i'm going to say class name equals chat view chat view like this and i'm going to say import and then let's go ahead and grab a css file so chatview.css and then i'm going to go ahead and say chat view dot css boom and then i'm going to go save it and we're inside the chat view at this point when we're at the chat view we're going to have a few things happening in here so i'm going to have the image itself which is going to be the selected image now remember we pushed it into the state right so here i'm going to say click i'm going to grab it from the state so selected image equals use selector import from redux and then we'll say select selected image right select the image and then there you go right and then what we're going to do is i'm going to say cons history because i'm going to do a redirect at some point i'm going to say use history and then i'm going to go ahead and import that boom save and then we go back down here and over here what i'm going to do is i'm going to say we're going to have the image itself right so the image tag boom and then what we're going to have is the source now the source here is going to be corresponding to the selected image all right cesar says you're amazing thank you so much hashtag papaya thank you so much dude for watching none of this would be possible if you guys didn't watch it so i i honestly really really appreciate you guys um so uh what i'm going to do here is say on click and we're going to trigger a function called exit and then i'm going to have a const function called exit so this is going to be a simple function that gets triggered off one exit we'll implement it in just a sec but what i want to do again remember if you might land on this screen and you're and you might not have anything in this state right so i'm going to create a use effect we're going to protect ourselves against that so we're going to say use effect right and then what i'm going to say is boom the use effect at this point what we'll do is it's going to be dependent on nothing at this point but i'm going to say if there is no selected image yeah so if you just kind of try to come here through the browser and be a bit sneaky about it then what it's going to do it's going to say exit okay so it's going to exit 270 people still watching that's crazy i think we're going to hit 1.2 k in this video as well honestly it's insane we're going to exit at that point uh not uh exit in the code i mean okay x7a it's 1.2k now because we're using a variable vehicle selector image we have to include it in the dependency array so here i say selected image like so and then when we trigger the exit function what do we want to do we want to say history dot replace and then we're gonna go back to the chat screen okay so we're gonna go back to the chat screen like so okay now i'm gonna start pumping on the music to get energy up and running right so let's go ahead and say save and now chat view so if i go into app.js i need to import chat view like so go ahead and hit save refresh i love watching the growth on this channel it's absolutely crazy i wake up in the morning i'm like wow we just got another few hundreds or thousands of subscribers and that it makes everything worth it so now if we click it right so if i click it oh it said okay db is not defined so we need to make sure that that doesn't happen so if we go into chat.source it said db dot collection or post so let's go ahead and say source firebase and do the following to refresh and now here if i click it see that it took us two four slash chats four slash review now because what it did there is it went uh so moji's game dev tutorials just said are you live or you just premiered i think that answered it for you dude so here we've got the the chat uh the sort of it pushed the image into the selected image and then we're rendering it on the screen right uh go back basically we'll just go ahead and pop something off the stack replace means you actually replace whatever image you're currently on with the image that you put in so with the uh the uh address that you just put in right so at this point what we're going to do is we're going to go ahead and go to the bottom we're going to actually implement oh i've got a fun one for this but basically when i have it so when i click this image look so i've got it on click of this entire image it will exit so it will push us back to if i click it now boom you see how it it changed the red status right so if we go back to our image which we can't do at this point which will make possible in a sec let's go back to home screen let's take a picture so say and then we say send now and then i go ahead and click it so i can't click the one that's read but if i click i'll get ready to tap tv in a sec as well and if i do this one hey sonny if you say boom after every sentence i will subject to your channel subscribe to your channel you mean all right so if i click this one and boom it works dude there you go and then here click all right so now i'm going to do something really cool here right now we found something yesterday on the twitch stream which was so dope right it was so so cool and uh we're gonna do that today but before we do that i'm gonna go ahead i i got you on the subjective subjective i don't understand i'm confused ben says it's amazing sonny thank you so much dude um so uh ben you are you're literally part of it when we're building search i don't know what search means dude uh so here i'm gonna say click and then let's go ahead and hit send so if i go ahead and view this now now obviously snapchat has like a timer function on it right so first let's go ahead and style this up so it looks a bit better and then we're going to go ahead and do things differently so first thing i'm going to do is style up the chat view right so the chat view right now if we go into chat view oops what have i done chat view chat view dot css there we go sunny manuel says you're just amazing thank you so much dude you guys are amazing for watching right now here i'll say position relative because oh position it's like i freeze when that happens position relative and then i'll say chat view and then here i'll say image right now for the image i'm going to change it to a cursor pointer so that way you know that you have something to click right then here i'll say chat view underscore timer and then here i'll say position absolute right top of zero and then i'll say right of zero and margin of 10 pixels now you're wondering what the heck is the timer what is he talking about what is that thing all right and i want to show you this stuff afterwards so keep that in mind for later um but right now let's go back into chat view now we want to have a sort of uh a sort of spinning you know kind of countdown of some sort right so what we're going to do now is we're going to import install something called react countdown circle timer right react countdown circle timer now to do that i'm going to go ahead and say yarn add react countdown circle timer and then that will go ahead and start the installation of that so that'll be done in just a second hashtag proper fan we've got people doing all sorts in the public family now at this point we're going to go ahead and drop this down so you guys can see it's installed already so i'm going to go ahead and import something called the countdown circle timer from the uh from the dependency that we just installed so underneath the image i'm gonna go ahead and pop that in right now this is a it's not a self-enclosing tag so we're gonna leave it as this for now but what we're gonna do is we're gonna say here so it takes a few different attributes so the first one is is playing right so we need to say is playing is true that's fine and then the duration is going to be 10 seconds right so duration is 10 seconds right then we're going to say the stroke width and this is for the you're gonna see something come into the screen and this is gonna be the width of it right we're gonna set this to a value of six they have some predefined values on there we're gonna say a size of 50 on here because this is like the i went through their documentation it's what they allow us and then you can provide three different colors and the sort of uh the ratio for which you want it to use uh the sort of so if you put 0.3 it'll be like every three seconds it will change to that color right so and these are three different colors now what this does is it gives you something called render props so what we're going to do is we're going to say the render props are pretty cool actually what they say is here you have the render props and you can destructure it so give us the remaining time right and then what you can do is you can return some stuff with it all right so here what we're actually going to do is just say return the remaining time okay this is what we're going to start off with first now you guys can see check that out guys right so if i go ahead and do a refresh our first our use effect should kick in so we might actually need to take a new picture at this point in time so let's go ahead and take a new picture let's go ahead and hit send and then what we're going to do is we're going to view it and now check this out guys 10 9. hey look at that that's cool right i think the colors are changing that's amazing right thank you man he says are you a papa fan want to join the pop fam then join full zero to full stack hero by the one and only papa react all right the link is the first link in the description to join this amazing family of developers we don't get stuck because we have each other to fall back on and help each other out and overcome any obstacle that's what we're about right link is in the description if you enjoy what you're seeing right now you want to be more involved in this sort of stuff then your boy papa react is trying his hardest to build out the best community of coders in the world period so go ahead and check it out if you're interested in that but now what we want to do right i want to do something cool i want to say if the remaining time hits zero do you give tutorials yes i give them like a complete brace react basics uh weekly sort of coaching and stuff like check out the link if you're interested um but check this out so what i can do is i can say if the remaining time is equal to zero so if it hits zero then i want to trigger that exit functions that i had up here so now let's check this out right let's go back to the initial let's go ahead and save right send now and if i click it watch this so it's counting down ten nine eight seven six five oh suspense will we hit 1.2 k in this time and watch this boom it went ahead and redirected us that's so cool man that's so cool that it worked and uh we're gonna style it up now so it looks pretty cool right so to style that countdown timer to get in the right position i'm going to add a div right now this div is going to have a class name this class name oh so why have i done this i could just do the emmett where i can say div of chat view timer i remember that time i was talking about before right i'm going to grab this entire time huh copy and then mansurbak says can i join xerox full stack hero later will it be available yes it's going to be available at any point you can just come and join up whenever you want join us in the party you see it also look at that it worked right that thing so now what we can do is just go ahead and check out remember in chat view dot css i timed i started it with the parent being relative the child being absolute so it's absolute to the sort of parent container with a with the top zero right zero margin 10 pixels so we should see it over here right so let's go ahead and have a look send now and then it's 12 o'clock in india right now but i'm still going strong due to sonny's energy that's what i'm talking about dude we just don't get tired when we're together right i'm gonna hit click and then boom look at that it's in the top corner that's so cool man i find that so god damn cool all right i still can't get over it to this day right like that wow and it's unread that's it that's right so i also want to change something while we're here i'm going to go into chat and i didn't do this in yesterday's blog but i'm actually going to change it now when i say red if it's red i'm not going to say tap to view right so here i'll say red if it's not red then i'll render tap to view right then i'll render the tab to you otherwise don't render it right simple look at that yeah so now we should see the tap to view if it's unread so if i say send now see that tap to view on the unreads boom and then it's gone really nice right so that's always cool um muhammad says amazing content so i always like to tune in thank you dude appreciate you being here almost at 1.2 k likes a crazy crazy support from you guys honestly amazing all right so at this point what we're gonna do is we have that up and running and up and set so that's cool and then what we're gonna do now is actually sort of upgrade this a little bit more so we have a login portal like a login portion of this right so what we want to do is have it so that when you're not logged in it will show you a login screen okay so let's go to app.js and we saw the journey starts in app.js okay so firstly inside of the app slice right we had the user we had the select user to be able to go ahead and grab the user who's currently logged in we have a login which will allow us to change the user state and log out which refreshes the user state so if we go back to here and i say const user equals use selector right and then here i say select the user and then i go ahead and say wait for it boom and i go ahead and say you selected there we go save it right now over here what i'm going to say is i'm going to get the dispatch object because i want to dispatch inside of the store afterwards uh manuel says we're sending you rack superman kumaran says great session thanks a lot thank you so much dude uh here was a use dispatch and here i'll say use oh no we don't need anything here we just go ahead and import boom same now after that what we're going to do is we're going to have a we're going to say okay if the user doesn't exist so inside the router here if we don't have a user then i'm going to render a login screen okay so it's very simple i'm just going to log in the login screen i'm going to pass the login screen otherwise we'll render the rest of the app so i go ahead and click this div to show my corresponding ending div i go ahead cut this out and i just paste it in here cool so at this point it should go ahead and freak out because it's trying to load the login screen okay so at this point what we do is we create a login component so i'm going to go ahead and say login.js rfc do our typical login sub so shubham just says i am an angular guy but i started to learn react after watching sunny's clones uh so ben yes technically these are protected routes yes exactly because if you're not logged in then it will basically kick you into the login screen so yes exactly a good chat on that one it's a protected route there's many ways you can do a protected route this is one of them right nazim says not damn you guys are still drilling nice keep the heat up that's what we're talking about now for the login screen what we're gonna do is we're gonna have firstly we need the dispatch because at some point we're gonna have to push into the store i'm also gonna create the login.css file so login.css boom now over here i'm going to go ahead and say return oh we've already got the return so i'm going to go ahead and give a div with a login container so login nazim says saying you've got many job invites just from your clones that's incredible man thank you image here so the image for this one is actually just going to be the snapchat image i've already got it over here i've got a big snapchat image over here and then what i'm going to say is i'm going to go ahead and do um i'm going to create i'm going to pop a button in here so i'm going to import that from material ui and this button will just say sign in okay very simple and the variant for the button is going to be outlined so material ui provides us a bunch of props that you can pass to their button components one of them is outlined okay we're gonna have our on click for that so when we click that button it'll say sign in now what i'm going to do when it signs in i'm going to go const trigger this function sign in okay now over here give it a sec big mounting from london pretty boy thank you uh we're representing london yeah and now here i go to login and go ahead and import source login so we can go ahead and do that boom save it refresh everything at this point should be pretty good except that that logo is huge okay and then we can't see the button anywhere so that's not very great right at this point i'm gonna go ahead and obviously style this out so it doesn't look so crazy right so login.css let's go ahead and pull this underneath so you guys can see it nicely and then here what i'm going to say is dot login so target our login we're going to say background color i've already got the background color repaired beforehand so this is actually the snapchat background color so the yellow you're seeing over here but firstly so that we can actually work on this i'm going to target the login container image which is the image inside of the login container give it a height of 300 pixels with object fit contain okay uh rudet says you inspire me sir hats off man love from india thank you so much dude uh renault says what salary can the fresher expect after learning react in good way freshman industry so it depends honestly i started at 23k and i made my way up to uh 75k within three years of coding and then i boosted my pay up to 100 plus with freelancing and teaching so uh looking image there we go it's all dependent on you so for the container what i'm going to do is i'm going to go ahead and give it display flex flex direction column which will pop it in line that looks good next thing i'm going to do is i'm going to say display grid so it's going to go ahead and make it in line so display grid flex place items in the center nice little trick and then here i'll say height of 100 view height and i'll say a width of 100 so this one means that it doesn't matter what it scales to it would go ahead and fit perfectly okay so there we go we got the sign in button there when i click the sign in button you get a nice ripple effect which is always cool right oh outlined oops there we go i was wondering that looks a bit different let's go ahead and refresh so you see the outline is actually a lot clearer to see all right so i think we're almost at 1.2 k likes guys let's keep pushing all right so when we hit the sign in button right so here over here when i hit the sign in button so i've already done it on click sign in so thank you just head saying coffee's on me sunny ps4 an interview lined up tomorrow after building sonny's linkedin and gmail clone dude thank you and amazing stuff let us know how that interview goes i hope to god you get the job keep crushing dude and uh yeah i can't wait to hear how that goes for you but amazing stuff after gmail i think thing clone you heard it there first guys it's proof in the pudding so hopefully go ahead and give it up for justice thing thank you dude for the very kind donation appreciate that i'll get my coffee with that right so now we're gonna go ahead and code the login so i'm gonna get the dispatch object here so i'm gonna say cons dispatch equals use dispatch and then here i'm going to go ahead and import my stuff over here perfect so i repeat these background music yeah right now i'm not messing around with epidemic sounds guys yesterday i was messing around with all these new stuff but um right now my mic keeps cutting out whenever i try anything so i'm not going to touch it so auth and then i'm going to pull in my auth from our local firebase file so uh let me just do it manually i'm gonna pull in auth and i'm gonna put in a provider so remember the google provider that we set up thank you ben for dropping the sound the soundtrack inside the chat love that dude so here we say auth and then here we say sign in with pop-up okay so this is the little pop-up that you're gonna see sign in with pop-up and then here we just pass in the provider which we already set up to be the google provider and then we say dot then and then we say the result of this sign up so if we if it was successful or whatever the outcome was here i can console log the user right so we can actually go ahead and console the user if you want to sort of check what's inside that result which i recommend you do to see how it works but then we're going to dispatch a login action okay so i need to go ahead and pull login from features.app slice right and then the payload for the login action is actually going to be an object now the object here is going to be we're going to have three things we're going to have the username which is going to actually correlate to the result it comes back from our login dot user can you please drop the volume down a little bit okay yeah all good dude so at this point we can go ahead and say dot display name and then here i can say profile pic and we can go ahead and do result dot user dot photo url and then id and then we can say result dot user dot uid because it stands for unique id all right so this is pretty good at this point go ahead and hit save and then what we can do is go to the end of our block which is if the then block is here then we can say catch and we can say okay catching errors that occur and i'm going to say alert on the screen the error dot message oh god error dot message uh madu patel sunny thanks for the react tutorials amazing stuff thank you ayesha ben says if only a song author could be known uh yeah i know man we have been ben is our personal shazam shocker solutions bro looking for a pwa advanced course we cover that in zero to four stack error uh so he's actually coming up with the complete react guide so um at this point we're actually pretty good right so what's gonna happen here is we're gonna dispatch a user into the app so if i go ahead and now refresh make sure everything's good and then i go sign in okay now we should go ahead and see this pops up and if you get an error at this point and it freaks out then you need to enable it inside of firebase but here i'm going to get sunny.sangregima.com oh god damn it i'm going to close that one so ignore that for now let's go and refresh let's go ahead and do the other email so i'm already logged into this one why should you start going oh look at that guys i was uh 17 i think when i quoted first so you guys can see it popped up right so that's because it logged us in which means that the user is no longer no oh god sorry no so that says drinking water app login so you see that it triggered the user and it pushed it i pushed in the payload which was the username and the id right now the photo url is actually not being pushed in so we need to double check it's this you got make sure you don't mess up right so i'd recommend you do check this out before to make sure everything's smooth we can see if we sign in but you see right now it's not persisting i'll show you why and how we fix this in just a sec all right so you see now if i go ahead in f12 and i go to the redux and then it go to the action payload and now we've got the profile picture perfect that's what we wanted right so at this point what i want to do is i want to make it persistent so i'm going to app.js i go here and i go i type in a user effect so we want to go ahead and when a use effect happens so you know so i think it's a use effect for the uh no it is a user effect yes it's a user fact so here what i do is i go ahead and say on the first mount i want to go ahead and trigger the following code so here i say auth so let me go ahead and get my auth object from our local firebase file and then i say on auth state changed okay so on author state change and here what i say is i say get the auth user and then i say go ahead and what this is meaning is if for any point the authentication state right at any point if the authentication state changes or even if you're persisted so if you've logged in before they have a way of tracking it okay they have a way of tracking it and um that's how we can do it okay so they have a way of tracking that so here what we can say is we can say if if auth user right so hit alt user then i can say dispatch right so dispatch and then here i can say login and then just like we did before except this time it's just going to be from the auth user it's not like result.user we're grabbing the same fields as previously before and if they're not logged in then what i want to do is i'll listen to that and i'll dispatch a logout action okay so i'll dispatch a logout action now i'm going to pull that in from our file so apps there we go i'm also going to pull in the login from our app slice there we go cool i can go ahead and hit save now so if i refresh the app now notice how it will go ahead and check the persisted state so obviously we need to go ahead and import the use effect first for it to work so there we go so now it will go ahead we refresh it loads and then it logs us in same thing if i go ahead and do it again those logs are sent so everything works defense thank you dude um do you prefer to use export for mobile native apps so i prefer to use expo in the beginning depends on the level of customization i need for the react to hear that um everyone's live right now that's it dude everyone who's live right now drop papa fam that's it um so there you go everything's pretty sick on that front so what we want to do now is actually increase the sort of look and feel of this app so when you're logged in it shows you a bit more information so let's go into chats let's go to our avatar and let's go ahead and say we need to pull our user from the chats section okay so here i'll say cons user equals use selector import this and then i'm going to say select the user okay so select the user import that from oh what happened there select user yeah and then i'm going to import this from app slice there we go see sometimes it takes a little while for that to kick in and work properly but it's fine if that happens for you we can fix it all right so at this point what we're going to do is i'm going to go ahead and go into the avatar down here and i'm going to make it so that the source is actually going to be user dot profile pic okay so it's going to be the user's profile picture and then also what i want to do here is i'm going to make it pretty cool i'm going to say on click if you click the user's profile picture it's actually going to go ahead and trigger an anonymous inline function so in the essex arrow function and then i'm going to go ahead and say auth so i need to import my authentication module from our local firebase file and i'm going to say auth dot sign out and now obviously because it signs us out it will go ahead and remove all of our authentication which triggers that that use effect inside of our app.js which will actually go ahead and kick you back out yo what's going on guys i have no idea why this stuff happens but we're good and we'll fix it so i don't know man i really don't know why that happens it's so annoying but hopefully it doesn't happen um but yeah so at this point when we're inside the chat screen i'm gonna have that little sort of button so now it's in our snapchat clone we have this little button over here right and then we also want to finish the rest of the ui so if i click this button it takes me back to the chat screen right so we need that in order for the app to work functionally correct okay and we also want to go ahead and do this one over here so let's go ahead and firstly into chat over here see well right now we do have a profile okay perfect so that's all good so we need to go ahead and do that little button inside the chat so underneath everything here what we want to have is underneath our final div over here i need the radio button checked icon so this one and then i'm going to add a class name and this one is going to be chats underscore take pic icon that's what i'm going to call it and i'm going to on click and the on click for this one is going to trigger a function called take snap and the font size for this is just going to be large all right so i'm going to do a large font size because this is something which will simplify the design aspect of this now i need to do two things i need to import this i need to create a function called take snap so here is a cons take snap there we go and then i can go ahead and import this as well at the top so let me go ahead and pull this into our app 1.2 k likes that's what i'm talking about guys amazing stuff ben says i love the uh iphone wrapping up same dude it looks so clean when we do that so we will get there very shortly all right so at this point um we're going to go ahead and say loads of people saying why do you leave why do you leave blah blah just doing my own journey simple as that guys right so now i'm going to do chats.js there we go so what i'm going to do now is i'm going to start that little button right so here what i can do is say in chats.css i'm going to go ahead and say um take where's it going take pic icon yeah so here what we do is we target it so we say take chats underscore take pic icon and then we go ahead and we say and then we go ahead and say uh position absolute position absolute and then i'm going to save it every time i do this so you guys can see it uh yeah there we go let's start tp icon and then we'll say background color of white right background color of white there you go oops white just to white yep you can see it's starting to change so it's starting to change down here cool um and then what we're going to do is do a border radius of 200 pixels this will give it a nice rounded cover to do it and then we'll do a color of gray and then i'm going to give it a font size of 40 pixels one size of 40 pixels and we're going to override the material ui so we're going to get important it's a little bit bigger there you go cursor appointed so we have a kind of a ui aspect to it so you know that you can actually press the thing and then we're gonna do bottom zero and i'm gonna do left to fifty percent and you see it goes there but now we're gonna translate to get it perfectly in the center so we're gonna go here translate -50 there you go and we get perfectly in the center guys so that already looks pretty damn sleek now when i hover over it i'm going to do something i'm going to change the opacity to 0.8 okay now here you can see that when we hover over it you get a nice little bit of feedback you see how the color slightly changes there's a very subtle feedback but it shows you that it's actually a button okay so now if i click it nothing happens why doesn't it happen because we needed to create this take snap functions we created it but it does nothing at the moment so at this point what we want to do is we're going to go down and we want to do two things we need our dispatch right so i need to go ahead and say const dispatch equals use dispatch over here like so and i'm gonna go ahead and use auto import save and then i'm gonna go ahead and say at the bottom over here i'm gonna say history dot push right and then do forwards and this is wrong this would be history there we go now here what i'm gonna say is we are have an error and it says unexpected reach of history oh yeah because we need to put in our history history like this equals uh use history like so and i'm gonna go ahead and auto import there we go refresh nice everything's working pretty damn good cool and now what we can do is we have this looking pretty nice i also noticed how the top icon that chat icon is white so i need to change that and this icon is white in the other one so i need to change those few things but if i click it now boom look at that it takes me there right so that looks pretty good and then i can go here and take another picture send now and you see now we've already got like an app flow sort of happening right so this is really nice and really slick uh but here let's go ahead and fix those few things so the search icon i'm gonna give it a class name of chats underscore search icon on this underscore search icon and i'm also gonna give the um yeah i'm going to style that right now so i'm going to go to my chat store css and then we're going to go ahead santosh says sonu what's up santosh so here we're going to go ahead and do chat icon firstly the search icon i'm going to say color white font size 13 so let's go to our chats and then here best hours of my life amazing stuff dude and here i'll say search icon white there you go it's very smaller much smaller than that so it's actually matching perfectly with that one now and then the uh the icon on the right the chat icon right so i'm going to do the same thing for that we'll say color white font size of 18. there you go look at that it's all pulling together pretty nice guys this is pretty sick look at that everything's pretty good right so we have loads of stuff happening and if i click this i log out which is awesome all right so let's go ahead and log in new man hi sonny just joined welcome dude welcome to today's build it's awesome today we're actually going through the snapchat build everything's actually doing pretty damn good zayn i said this is great i recently tried to get crowdfunding reactor what method did you use we're using react dash camera the dependency react dash camera and everything was pretty good right so everything's pretty nice to see if you go back it works like that oh god damn it i signed that again oops all right let's go ahead and do uh sign in one more time right so now what i'm going to do is i'm going to finish styling the app so let's go to our app here we go and then here what i'm going to do is firstly uh you see it's not actually passing in the profile picture which we need to fix so let's go to chat remember when we go ahead and push in that image so firstly the take snap so we didn't actually finish there sorry let's go to chats and when we did the take snap we actually need to reset the camera image right let's go ahead and reset the camera image so if we don't reset the camera image let's see what happens actually so if we do this yep you see that so i actually want to reset every time so i want to say dispatch reset camera image right almost 1400 youtube damn it guys let's go we almost we climbed so much in that oh my god that's just crazy in one stream we just climbed so many subscribers it's insane [Music] all right 13.8k subs let's go uh aj i'm no longer part of cpt this is the papa fam dude let's get it right dude papa fam i've need to 13.9 right so now what we're going to do is we're going to go ahead and there you go everything's pretty good it works cool so what we're going to do now is have it so that uh 13.9 k holy [ __ ] okay cool man damn i think we can maybe hit 14k right so at this point what we're gonna do is uh we've already done that so i'm gonna go ahead and style it oh no we're gonna pass in the chat let's go to chat yeah so when we actually go ahead and post the snap which is in webcam capture nice and webcam capture when do we actually post the thing is it's in we post it here set camera get screenshot so i need to go ahead and say enchants let's go ahead and check out all right so yeah when i actually go ahead and post it it would be inside of the preview screen there we go preview alright so here profile picture remember i left this as a blank so over here what we want to do is go ahead and go to our preview and we want to make sure we do the following we just need to simply have it so that the profile pic here becomes the user's profile pic now look what happens guys it says user is not defined right so the user we need to go ahead and pull in from the top right so not here but inside of the preview itself so we'd say const user equals use selector and i'm going to import that from we already done that i think yeah we have select user boom import there you go cool now if we go ahead and refresh now if i go ahead and take a snap and we go ahead and send now now look at that we've got the actual user that picture who it sends in and boom nice that's awesome right everything's pretty damn good if we go to app.css app.js sorry now what i'm going to do is i'm going to go over to app.js and here what i'm going to say is regardless of what we render right so inside of outside of app so app body i want to have an image tag now this is going to be the snapchat logo and pop that now it's freaking out because you can't have two adjacent elements so we have to wrap it in a react fragment so there you go and now you'll notice that this will actually make a huge snapchat pop on top right so that doesn't look that great so we need to fix that so let's go to app.css and here we go app.css now over here what i want to do is i'm going to have firstly style that image so i'm going to say this is the app logo so let's go ahead and pop this underneath so this is going to have a class name this is going to be a us name of app underscore underscore logo right now here what i'm going to do underscore underscore logo and then here i'll say app on the sponsor logo it's going to be objectfit contain a height of 100 pixels right so 100 pixels like this save it and uh stevenson says guys it's absolutely insane a snapchat bill can i get a let's go that's it guys let's get energy hyped that's what i'm talking about guys benson let's go that's what i'm talking about 1.2 k likes like wow the ratio of likes is incredible on this channel right that's it manuel avnish that's what i'm saying guys so what we're gonna do next is a nice little trick that actually ben mentioned right so here what i'm gonna do is underneath here we've got because the papa farm is more than just me right it's going to be everyone coming together to build a crazy insane app so here we're going to create a body background body background right and then what i'm going to do is i'm going to take everything inside the switch all right everything inside this switch oops every inside switch go ahead pop it like that cool go ahead into my app.css and let's go ahead and put this underneath and you see everything looks pretty similar pretty same everything's pretty good at this point um but i'm going to target the app body background all right now here what i'm going to do is firstly i'm going to set the body background with a background color of white now the reason why i'm going to do that is because whenever we have any sort of loading or anything i want a white background and we say a height of 400 pixels and now this means that whenever we have anything where it's like you see it went white in the background when it's loading right so whenever we have any kind of transition i want it to be white in the background first before anything else happens okay so that's pretty cool and then what we do here is etfs there's nice background music amino says wait wait wait let's go another smashing video by harpri hey what's up hubs that's it now what we're gonna do here is for the app body um i'm gonna set a background now i'll show you what we do here but for app body uh app body i'm going to go ahead and say background now the url is going to be this url right here now this is a url of a phone so if you notice that this is the final build right so we've got a phone surrounding the background so here we go ahead and say show me the phone no repeat and center it so if you see if i add this in i don't think you can actually see it right now because nothing's showing right so everything looks pretty boring at this point if i say background size contain height of 400 pixels right so let's go ahead and pop that in background size contain height of 400 pixels and then i go into width and i give 250 and a padding of 74 pixels then boom look at that guys if i go ahead and get rid of the width all right so if i get rid of the width it actually looks pretty damn good as well i'll get rid of the padding you see it gets it goes away so this is the perfect dimensions to get snug and fitting on the phone so that's how you guys that's how you actually get that sort of functionality done so that's a really nice little add-on to that so now boom you see how it goes ahead and does it right zayn says impressive your streams are epic mohit says oh my he is still doing this that's what we're talking about guys so now if you go ahead and take a picture and then you see that the white background so now it doesn't go ahead and look weird right we have a white background and uh ben had a lot of input in that so i can't even take credit that was actually an awesome little catch by ben so yeah look how cool that looks guys amazing right incredible stuff now remember you can log out if you click on this s over here or your name but now i think it's the moment of truth right i think at this point we go ahead and we deploy this thing right we deploy this thing and we go ahead and we get this thing up and running um so let me know if you guys want to see us deployed let me know if you'll see us deployed i'm going to get this thing actually out so you guys can mess around with it obviously keep the snaps pg all right this is this is not i'm a bit worried about this one i'm not going to open everything i'm going to probably going to open only a few here and there maybe my one but here what i'll do is to deploy right so to go ahead and get everything deployed to uh firebase you need to do a few things so let's go ahead and zone in on this for a sec right so we're going to say firebase and then right now what we're doing here is we're initializing firebase with everything that we need in order to get everything up and running in the internet go to hosting hit spacebar enter right now here we say use an existing project and in fact i'm actually in the wrong firebase file so i'm actually going to say firebase log out because i'm in my other account so wait for this firebase logout so you guys are gonna have to do firebase login firstly right and at this point you can click yes no ever i'm going to click no for that and then it's going to pop up and then i'm going to log into my email account click allow and then there you guys log me in right so now i can do firebase and knit again rahu says your work is really amazing thank you so much dude uh alexandra i'm always curious what the pluses mean dude i feel like you're you're snapping it so you can watch it back later if i'm right then let me know uh hosting space uh remote config yes they added it finally that's amazing all right so we hit uh space and hosting so i can carry it away go ahead and click use an existing project right and then you can see the two ones so my one was the youtube one so i'm going to hit that and then what you want to use as a public directory so here it's extremely important what you put in here right so what i recommend you do here is you go ahead and say build right so this is build you have to put build in there configure it as a single page app yes so put y in there right and then set up all my builds no we're not going to do that stuff yet so this is n and there you go okay so the next thing we're going to do is mpm run build right now what this does is it basically gets the entire app strips out all the developer dependencies all the sort of heavy [ __ ] that gives it like the hot reloading and all that stuff and then it basically makes an optimized production build and it puts it inside of the build folder so inside the hero as we speak it's populating a optimized production build now please bear in mind and be careful about this that when you change any file after you go ahead and make your like and run npm run build and get that build file if you change any file you have to run npm run build again okay so don't forget that you have to then do it again right npm one build off that so it's very very important that you do that assad says sunny you are great bro mohit says really inspired by you you're so much into your work and so focused thank you so much uh devon she says this is amazing lucy says say yes and you are amazing thank you hitesh says papa fam you guys are incredible guys i love the support you always give me with that said we're gonna go ahead and hit firebase deploy so you guys know how we do it we have the proper fam theme song right and when we hit the deploy on this i want you guys to go ahead and check it out keep it clean please please please keep it clean all right because we are live right now and it'll be nice to keep this stuff clean uh but also i wanted to say if you enjoyed this at all make sure you check out the papa farm first link in the description and yeah with that said let's go ahead and deploy this thing so to deploy it we go ahead and say firebase deploy right now what we're gonna do now is go ahead hit firebase deploy hopefully this goes smooth without any sort of bugs or anything so it says deploying hosting found the build it's uploading the files uploading finalize there we go it's right there guys i'm gonna go ahead and drop this inside of the chat right now if you guys are ready for this go ahead and check out the app and i want to see things coming inside i've just dropped the chat go ahead and check it out let's see if this works together guys and we can celebrate this app together as a team hey [Music] oh the usernames the usernames okay we'll fix that in a sec but the usernames are slightly off look everyone sent in snaps there we go we got some people coming in hey what's up dude hey this is what i'm talking about guys this is dope if you saw your picture there that's awesome man that's so cool look at that we actually had people sending in snaps [Music] this is dope i'm gonna be careful in my opening anymore but let's fix a bug right now right there's this tiny bug where it says papa react all right i'm gonna quickly fix that live for you right now right so the reason why that's happening is actually pretty simple let's go ahead and fix it right now live and i'll show you a hotfix in action so as people are adding to the app so we've got the preview screen right now the preview screen goes ahead and pushes popup react by default so we just want to push in the user dot display name instead and now what i can do is i can do npm run build because the app change but i can chain it with firebase deploy and now check this out guys so i'm going to go ahead and literally i just done a hotfix right now so i'm changing the structure in which it up it pushes your posts over so that way you should be able to see not pop or react but you'll see your names your corresponding display names come up so it's creating an optimized production build and then it should actually fix that so this is pretty cool i see so many people loving that smash the thumbs up button if you enjoyed that but let's fix that bug because that's the minute it actually goes ahead and gets properly truly working so bear with it just a second and it's uploading right now so it's uploading the new files it's already done it so all you want to do is make sure you hit a refresh and it should be working for you right so refresh and carry on using the app so now if i try it it might have cached it might have cache but if it doesn't it would work right i think it might have crashed here okay so it has crashed it looks like it's crashed let's quickly check it oh god damn it right let's quickly fix this bug together right let's fix this bug together let's go over here i want to check this out because i'm really really curious as to what it was that wasn't working is it very simple to figure this one out by the way you go to here you go to redux and all we need to do at this point is go to state check out app user and it was username there we go i don't know why i did display name but it's fine here we go to user.username save it and then i run that same command npm run build firebase deploy and you guys are seeing it right so we're gonna do this we're gonna fix this for us right restart restart the tension right it just get really tense let's get really really tense let's see if it works guys all right this is a 200 people watching everything is on the line right now right every thing is on the line right now if it doesn't work it could be a huge disaster you know i mean like who knows go ahead and check it out let's see if this works right it says for me papa react but i need to refresh maybe it's maybe it's not working the way i need it to right now oh my god there we go it's all working everyone's coming in with their names i was scared for a snack i was like holy crap i didn't think it would work so some people who are still sending it in as papa react you just need to refresh your uh your app that's all it is but jimmy let's see what's up jimmy hey let's go ahead and see assad hey what's up dude this is it guys this is a papa fam in action ben let's see what's up ben how cool is this guys the pasha this year guys if you enjoyed that pull out your phone right now and go ahead and shoot a snap right on instagram so my instagram is on the bottom left sssanga and tag me in your stories and show the whole world that you are literally sending this out right now so we've got abnesh we've got peter we've got a few others and i try and you guys have been awesome because there's not been any dodgy snaps yet right someone speak too early but it's amazing stuff right everything is good there we go nice dude if it still says papa react you just have to go ahead and refresh we've got johnson let's go ahead hey look at that hussain assad nice this is awesome guys i think that's pretty cool honestly lucy says sonny please upload the complete video for the review 100 i will definitely go ahead and do that ben's got the right idea he's got a cookie i i'm starving dude i'm gonna go eat straight after this that's what i'm talking about wait for the count to go to zero boom works everything works as we expected that was so fun that was so much fun and as we just go ahead and cue out i'm just going to leave this on the screen man this is so cool guys if you enjoyed that and you haven't already smashed the thumbs up button please smash the thumbs up button i love and appreciate every single one of you all the support you give the papa family is growing at such an incredible rate it's honestly like hard to believe at certain points that this is real um i sometimes get so like tripped out by i speak to jay like one of my my sort of uh friends who's working with me at the moment i'm like dude dude like this is insane like what we're doing right now and uh honestly it wouldn't be possible if it wasn't for you guys so with that said i'm gonna go ahead and wrap up uh i'm on kavira let's check you out what's up dude go papa bob nice that's awesome man the link in the description if you want to go ahead and check out the course so guys i'm going to go ahead and pop the screen out now so let's go ahead and show you here we go nice so with that said guys if you enjoyed the content that you've been seeing right it's been a big journey and it's it's moving fast it's moving so fast to the point that i'm trying to keep up with it we've already done the linkedin clone the gmail clone the snapchat phone now and the portfolio if you want access to this code you need to be a platinum or diamond member inside the popper farm but if you just want to get involved in the papa farm then drop a link like hit the first link in the description to check out what we offer i teach stuff i break it down it's silky smooth videos the community is 160 strong already and we just started about 10 days ago so it's insane what we're doing i think we have over nearly 2 000 members on discord the papa family is growing so strong you guys have been incredible and awesome and i just want to say as always guys i love you guys and i will see you in the next video peace [Music] [Music] [Music] [Music] me

Channel: Sonny Sangha

Views: 219,181

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

Id: 1kGISk5ft2w

Length: 196min 40sec (11800 seconds)

Published: Sun Jan 10 2021