FREE JavaScript Training 👉 https://event.webinarjam.com/register… ⭐ Github REPO + LIVE demo 👉 https://github.com/CleverProgrammers/… ⭐ Do you want to master React JS & learn how to make an income with your new skills? Click here & enroll NOW: https://www.cleverprogrammer.com/pwj?… In this FREE LIVE training, Qazi & Sonny will show you how to build a Tik Tok Clone with REACT JS 🚀. #reactjs #tiktok #softwaredeveloper

 

excited for today’s session guys today we’re going to be building the tick tock clone right over here and sunny are you pumped about this or what oh dude i’m pumped this was a hard build and we’re going to show you guys a few little tricks in this build super excited super excited yep so this build it has a a ton of functionality that we’re gonna cover and we’re gonna make sure we demo the entire app first so in the start guys we’re gonna demo the app for you so you can see all the functionality that we’re gonna add in there and then we’re gonna go ahead and build out the app and i think sunny we should even cover maybe all the technology needed to know to build the app in the start yep so we’re going to be covering material ui guys firebase so all of the information that you see is coming through on firebase at the moment so we have material ui we have firebase we have firebase hosting we’re going to show you how to go ahead and deploy this app and we’re going to use a bunch of libraries guys and a bunch of techniques to get the ticktock functionality that you see so in case you’ve never used like third-party libraries we’re going to be showing you a bunch of that today as well and even you can see at the bottom even that little unique ticker so you see where it says the song right yeah like showing and we have that nice little animation where the spinning record so this little ticker over here exactly even all of those little things are going to show you guys how to do that today awesome and let’s to cover the functionality here so we got the heart so you can actually heart a video yeah right um also if i actually turn on the audio and uh awesome we got a lot of people uh hold on conless pumped uh this guy goes my fifth live stream with you guys how you doing that’s awesome so now some of the functionality we’re going to share with you guys i want to turn on system audio so you guys can actually hear the sound too of the video i’m just going to go ahead we just got priyank patel dropped the phone whoa first donation thank you so much really appreciate it two dollars love it so um here is the functionality right let me click it yep so do you have instagram no snapchat still no then what do you have a life [Music] there we go probably blew up some people’s ears yeah all right hopefully you guys heard that now i’ll be able to scroll down and guys notice how it like snaps so like if i scroll down to the next tick tock it like snaps and locks you see that how it snapped and when i scrolled past it it snapped again and it just puts it perfectly into review and now i can actually click this so the first tick tock you saw was sunny with his girlfriend and sonny put one with me and my girlfriend and let me play it for you guys [Music] so all right so you guys see how the functionality works we can like things we can there’s ability to the you can actually see how many comments this has how many shares it has and then this nice little spinning disc over here the spinner with the tick tock the your name is right here and your captions look literally like how the tick tock captions look along with this little tick tock um you know logo at the bottom right so yeah i mean i’m pretty pumped to build this thing are you guys excited i’m super excited guys let us know if you’re excited about this by smashing the thumbs up uh because this was a challenging build guys this was quite a challenge because it’s it’s got some different functionality it’s not a normal website right like even how how you have this like snapping functionality uh well i can’t pronounce that name he said wow whoa wow programmers can have a girlfriend yeah because you’re living through there’s hope vishal thanks for the donation really appreciate it another super chat thank you so much for that donation yep another one man this is awesome love this um yeah so guys

 

somebody asked is this video for complete beginners

 

yeah absolutely you’ll be fine if you watch this and you build this out with us you’re gonna be just fine i wouldn’t worry about that now sunny before we start getting into the build let’s just cover again all the tech so here uh we started talking about it so let me just go here and write it out so you guys know what’s coming up so we got material ui that’s going to be a part of it then and we’re going to say tick tock clone tech stack okay yeah uh next up is what did you say it was like

 

firebase

 

right and this is going to be used yep are we using a database at all we’re just hosting today okay using a database yep got it what else are we going to be using flexbox what third-party things you mentioned earlier something third-party so like let’s just list every single thing out that they will need to know so a bunch of css hacks today so literally just label it as css hacks uh and then in brackets we can write flexbox so we’re going to be covering a bunch of flexbox and there’s the css hacks which is even new to me guys is this snapping functionality so you know you saw when we were scrolling it kind of snapped into place and stuff like that right that’s going to be something which we’re going to teach you today how to do because that was actually a new thing for me even i’ve never actually had a use case where i had to do it vertically i’ve used it for a carousel but this was a new sort of thing for me so that was a really cool thing to go over anything let’s have a look what else we’ve got we have got a bunch of third-party stuff so we’ve talked about material ui um we also did use something else what was it um main thing here guys is we are actually going to be oh yeah we’re using the use ref hook for once so use ref so we talk about use state we talk about use effect but today we’re going to show you guys how to use the use ref hook yeah which is a completely different hook and there’s a there’s a few odd cases where you run into this and you’re going to need to use this in some situations and we’re going to show you how to do that here yeah okay beautiful and if i could have i’m gonna what i’m gonna do is let’s see if i can pop out of the whiteboard mode real quick let’s pop out of the whiteboard mode and um if we start taking a look at this you know the material ui is going to be used for what thanks sonny material ui is going to be used i imagine definitely for these icons that i see over here on the right hand side yeah so it’s going to be used for the icons even the one that you see on the bottom left so the um the the song icon even for that one we actually have a material ui icon right here so yep that’s material ui icons and now what is uh firebase hosting used for we got another super chat thank you uh unchill really appreciate it appreciate that we are actually getting somebody for c plus plus uh and uh michael so he’s actually going to start doing c plus stuff so okay so we got material ui icons now firebase hosting is going to be used to host this app online on a certain url right yep okay great and then what about the database what what is that going to be used for yeah so we’re going to be using the

 

firestore database

 

and the reason why we’re going to use this one guys is because it’s real time which means that let’s say for example you’re on the website and somebody adds a new video to tick-tock or your feed it’s going to pop in in real time and then show you that on your feed because remember that’s a really important part of tiktok you want it to be real time you want to be uh really quick and really fast so we host all of our data on firestore which is firebase’s database yep okay got it and then what types of things so one we’re using so right now we’re going to be using it for hosting videos yep no so we’re not actually hosting the videos these videos are actually on tick tock what we’re doing is we’re storing the url yeah including the url to that video on firestore got it makes sense so all these videos that are being shown here are actually being pulled from the database yes exactly so it’s different everything was pulled from a database yeah okay got it so that’s important you guys it’s not hard-coded like that’s important for you guys to know these videos are actually being pulled from a database so it’s already a really dynamic app okay yeah and then um we talked a little bit about like css hacks now let’s just talk about where are we looking to use them so flexbox first of all where is flexbox being box being used what are we doing on this app with flexbox so notice how we have where it says for example champagne mommy and then it has the description and then it has the song playing all of that stuff right we’re using flexbox to correctly layer layout and position things even if you notice like the the icons on the right hand side and the way it’s like a it’s a sort of vertical stack we’re using flexbox there so like there’s a bunch of different uh use cases here where we’re trying to uh get like an easy responsive design and we’re doing that with flexbox as for the css hack the csx a really interesting one guys it’s called scroll snap so scroll snap and that’s gonna be what pretty much how we achieve that functionality is as to when you scroll how does it snap into place like every time and and that’s going to that’s actually something which is quite a tricky problem to solve but we’ve actually simplified it quite a lot today so if i go so if just so we can talk about it like you guys see how it snaps when i scroll through like scroll scroll scroll scroll scroll scroll scroll and then at some point you guys are gonna notice that it just like snaps you know this is why kind of automatically as i scroll through the videos will like snap to the top and that is one of the things that he’s talking about yeah exactly okay said they are not sharing github we will be sharing a github at the end of this uh we’ll be pushing the code to a github repo yeah yeah thank you vishnu for a snooper chat and then work digital really appreciate it and yes we’re gonna upload this video and it’s gonna be on our youtube guys so don’t worry about that yeah exactly yep okay and then um where’s the music being pulled from is it a local file from it’s part of the video file so got it video part that we actually use has the music inside of it yeah okay got it and so snap functionality is definitely one of them and then when you say third party like things like use ref hooks what are we using use ref hooks for yeah so they use ref hook is basically whenever we have that video right we we need to somehow capture it so that when that when you click the video we can actually do something so in this case when we click the video it plays the video and when we when we stop the video we when we click it again it pauses it right so we use a combination of state so we use use state and we use use ref and what we’re using use ref for in this case is to specifically say this video is the one i’m clicking on right so it’s like basically attaching a reference to that video and then so when i boot so when i click on it and it plays [Music] hold on it’s blowing up people’s ears i’m really sorry guys um so let’s play maybe this one as well here and i’m gonna just hit it so that’s usrev yep so that’s used rep and what we’re doing there guys is we’re actually like sort of capturing a reference to that video that’s on the screen so that video element so just how like in simple html what you usually do is get document by id or something like that and then you get the element right in react we use references to actually target individual elements when we’ve got specific use cases like this um so it’s really powerful actually it’s really nice way of doing it uh but when we reach that point it will be a really cool thing to run through so stay tuned for that guys yep and one thing i did want to let you guys know guys if you’re enjoying this so far here’s the thing that doesn’t cost you anything but changes our lives and keeps us going guys please go ahead and smash that like button really really helps the channel grow and this video to go out if you’re finding value there’s a high chance one other person is going to be finding value and if you just hit that like button it goes it makes sure to go out to that one person so we would really appreciate that and thing number two that i wanted to let you guys know is that tomorrow i don’t know if you even knew this sunny but tomorrow we are actually gonna be doing car tracking with python i saw dude i saw it pop up that’s so cool like literally yeah i mean is it using some kind of machine learning or what yep exactly it’s going to be using machine learning so uh an ai and basically we’re going to show you guys with just a few lines of code how you can track cars that are going by so pedestrian traffic and that’s going to be like one huge thing we’re going to show you guys how to do that with python tomorrow that’s insane even i want to watch that i’ll be dope nice nice so that is taking place tomorrow at 10 15 a.m so tomorrow it’s gonna be july 31st friday at 10 15 a.m so mark down your calendars and make sure to show up for that guys yeah 100 and guys like you can’t miss that that’s a really cool thing like to go ahead and see like how we use ai to go ahead and track cars and and figure out which what is the car and what isn’t so super impressive things coming tomorrow yeah pump for it all right so let’s just get d uh into the build now sunny i think we’ve overall like road mapped it really well what uh uh what tech we’re going to be using the overall tech stack things like that i think at this point we can kind of just get into the build let’s do it dude so the first step guys is we’re going to go ahead and use a a tool called create react app so every single time we do these builds we use it it’s something built by facebook and yeah we do create react app and we’re going to say tick tock clone there we go i’m going to go ahead and request read write access there we go great and have i got access to your 3000 as well let’s go ahead and give me access to 3 dope will do that so i will i mean i’m not i’m not running anything right now yeah well while that’s installing and setting everything up for us what we’re going to go ahead and do is go ahead and

 

set up firebase

 

so all you need to set up a firebase account is a google account so you just need a google account so it’s super easy and simple to set up um let’s go ahead and head over to firebase yeah yeah so once once you’re at firebase guys firebase is just a set of tools so it’s imagine like aws right so it’s like aws which is amazon web services it’s essentially the same thing but the user friendly version right so it’s a really really nice way of doing it it’s very very like user friendly to get started with firebase and it’s so powerful guys so once you’re on this page you just need to hit the top right where it says um go to console or in the in the burger menu and then once you’re logged in you’re gonna click the add project button yep i’m just logging into the right account and then i’m gonna hit the button that you’re talking about so i’m gonna click add project here so and then this project is going to be tick-tock clone right that’s right yeah cool there we go awesome people are like hey i smash that like button people eat babar hey nice nice happy eating everybody by the way guys happy eating eat mubarak guys where is my why isn’t it writing my tick tock clone okay there we go tick tock clone all right let’s hit continue continue yep create project dope and you guys don’t need to add google analytics on it unless you want to yeah and on the bottom left go ahead go ahead yeah i see a question where we say it’s a saga already says it’s five is expensive all of this is free guys completely free so not only is the tutorial free but we also have like uh firebase which is completely free for the quote uh for very generous quota so it’s going to be something which is definitely worth going ahead and doing so all you need is a google account and you can pretty much go ahead and use firebase and we remember you travel with zane thanks for coming through really appreciate you i remember you said you were booked for today i remember rifki’s here i see sneha and also steve is here so yeah we remember all you guys that were here yesterday i remember him awesome we got a lueno awesome nice he’s back yeah nice awesome so guys uh i think it okay still installing on the bottom left okay nice so what we need to do then is go ahead and configure it so we’re going to go ahead and

 

register the app

 

so here we write tick tock clone and we make we need to make sure we tick the also set up firebase hosting tick nice oh yeah let’s also talk the next button here and i’m going to just continue to the console and uh one thing that we want to do is what pull the config file yeah exactly we need the config file so we need to go to the burger menu click the uh that little cog and then go down to config and basically you want to copy this and then inside the uh folder so i think it’s okay so i’m just gonna make like a firebase.js yep and i’m just gonna paste it in there for now and hit save so you guys can do the same thing just copy your config let’s get rid of all of this copy your config and then just drop it into your firebase.js like that exactly and we’re going to use that later on guys for the next steps so um nice um also venkat asks are you creating an app using redux in the future we can definitely create an app using redux in the future guys if a lot of you guys want that we’re happy to go ahead and build that soon so uh we can definitely do that maybe with the spotify clone we could use redux so yeah awesome yeah nice dope so now what we’re gonna do is um we’re just waiting on the uh the create react app setting up still so i mean should we answer questions in the meantime we’ll have a look yeah we can take out we can people are pumped to be here we’re waiting on the react app to finish installing you guys so after that we’re going to move on to the next step so till then um ariane aurora says congrats sonny on 3k followers thank you we’re almost at 4k we crossed the halfway mark so oh yeah here 3 500 on yeah i think 3600 now yeah yeah guys we’re to build some stuff with redux as well i think that would be fun i still want to go uh there are a lot of bills that we just want to do for fun and for business purposes anyway and we’re thinking to do some of them together with you guys like the youtube thumbnail one yeah is one and then um i think some projects that are gonna require redux um is the spotify clone gonna require that sonny or no um i mean we i think for spotify we could build it with it but it might be overkill um for what we need to do um something we could definitely look at i think when we come to building it i think there may be better apps to use you know for for we could do some machine learning stuff too with firebase and everything right because google has cloud vision yeah that would be dope that would be actually really cool maybe have it so that we did that same project that you and aaron did but we do have firebase oh that would be awesome yeah yeah because i love python but i couldn’t even get aaron’s vision project six lines of code to work on my machine aaron i spent like one hour and we were late to the stream and then we ended up just sharing his screen whereas what i love about um javascript is all the stuff is pretty much going to run the same way everywhere yeah exactly awesome nice we have um oh it’s installed yep spill nice so once you get this happy hacking message what you want to do is do a cd and go inside that folder so cd tick tock clone okay enter and then once you’re at this point do a ls ls just lists out the files and make sure that you’re in the correct directory right now once you have that what we’re going to do is we actually okay so we already went ahead and added the firebase.js let’s go ahead and cause let’s move that firebase.js into our source yo for some reason i can’t follow you really yeah like i’m you i’m clicking your orange button and nothing happens and then i’m back in right and then i like click follow participant you know what i mean see what’s happening yeah i think now now it’s following you i don’t know why i was doing that now yeah now it works awesome all right so now the thing is built should we go ahead and remove the before we do that we just want to do mpm start so

 

npm start

 

inside the terminal and if everything’s gone well guys we’ll see a like little react app start up on localhost 3000 and that will have a little spinning cog on it right yeah so that’s what you’re going to need to do and then if you get to that point firstly well done like that’s really that’s a good point to get to because you know everything’s working and everything’s like good okay and then what you want to do is once you get that screen where it’s got a spinning wheel on it then we essentially want to have it so that we need to clean it up we want like a blank canvas to start from right so we don’t we want we don’t want all of those um hey here it is nice so oh somebody just said in the chat we should make

 

chess

 

we should make actually i would love to do that because i love chess so we should we should do something with that yeah that would be dope actually yeah i mean i’ve never done a game uh i don’t think i’ve never done a game in react so that’ll be a really cool one to do yeah yeah we could use react we could use redux for that maybe oh yeah yeah that would be fun so now what i’m going to do is i’m going to go ahead and delete the test stuff so guys logo test.js and setup test.js just to clean everything up we just go ahead and delete them and now everything is going to crash because it’s going to complain we don’t have the logo so if you guys have been following us so far you’ll know that we go to this file app.js and remove that line and also everything between the uh div of app we’re gonna go ahead and also remove that and then we’re just gonna put h1 here and it’s gonna say hello clever programmers let’s build the tick tock clone and i’m just going to put a rocket emoji the exclamation mark hit save and what is the problem that we’re getting oh yeah okay the h1 i don’t know it always does this weird thing to me yeah it’s annoying though so now i’m going to hit save and boom here we go everything is there and now because everything is centered i’m going to actually go ahead and talk about this sunny nice i love this dude yeah so we’re gonna follow a bem convention and uh i feel like i’m just regurgitating i feel like a proud dad yeah yeah yeah so now we’re gonna follow a bem convention you guys and we’re going to make sure that this is a lowercase app and then what are we going to do sunny we’re going to

 

create an app.css

 

now so the app.css is created by default buttons to go inside there remove everything yeah remove everything all right guys so i’m just gonna visually to show you guys i’m gonna make a big x on this thing just so you know we’re gonna chop everything in uh inside of our app.css so go ahead and do that and then what’s going to happen is this is going to stop being centered that’s your one cue that you should get because right now it’s being centered so once i remove it and hit save now it’s not centered anymore and even when i go full screen it’s not centered okay exactly now guys notice how there’s a slight gap above hello clever programmers so what we need oh yeah whenever we start an app we need to go to index.css and let’s add the following rule so we could do it in here but i prefer to do it in index uh dot css just because let’s go to index.css boom yeah and now here what you want to do is actually go ahead and write the following so you just want to write not just body but everywhere right yeah exactly and you want to say margin zero and that will go ahead and get rid of that imaginary margin guys cool should i remove this from the body um you can do i mean i keep i’ve kept it there before because it doesn’t really change anything but yeah we can remove that because we’re already saying now appended like to everything uh change it yeah watch it’s gonna break some snap functionality in the tik tok app later yeah awesome nice so now guys we have a clean slate right we have a clean place to start our work from um i think you need to re-follow me again quasi oh i thought okay there we go there we go nice uh so now what we can do is i am inside the app and guys this is where we kind of do our sort of what we like to do here is just kind of script out everything so what are we going to build first you know like what are we going to have uh inside of our and because this is different to a lot of our previous apps right this one is kind of it takes a different sort of turn because all we essentially have here is like a video carousel like when i say carousel it’s like a swipeable video feed right so it’s instead what we kind of have is we have the app right so we have this where it says hello clever programmers and what we’re going to do is we’re going to create a div right we’re going to create a different we’re going to say app underscore underscore videos because it’s going to be essentially a container of videos and inside of here we’re just going to essentially have a bunch of imagine they’re just like video components so we’re just going to render like a bunch of video components and this the end goal is that this is presented in such a way that we pretty much have the finished product so we can swipe through it so basically one one video component so basically when you say video component you’re talking about like this video card as the video component or this video is the video component right yeah the entire card is the video component and inside of it we have lots of smaller components for example inside of that video component we have a video footer which is where it says champagne memory it has the music and everything and we also have a video sidebar which is where we have the heart the chat messages and the share button yep oh awesome guys we’re up to 714 people live watching this guys let’s keep this energy flowing thank you guys so much and make sure guys smash that like button and let’s just keep spreading this love because this build is gonna be super powerful and again remember you get to put all of this on your portfolio and everything like that so guys let’s just keep the ball rolling on this amazing let’s do it guys and we also thank you very much dhruv sharma for that uh super chat great work yeah oh yeah like a whatsapp clone we would definitely yeah we can make it well i think what’s up club would be pretty cool that’s actually even that’s cool yeah somebody else the other day said a slack clone which would be kind of cool yep exactly i think people are going to yell at you for video card again uh but i think guys but it doesn’t matter it’s okay like main thing guys i wanna we wanna highlight here is let’s break down this video component that we’re gonna build because it’s gonna be an important thing so this video component what are all the things it’s going to have so sonny what’s um it’s going to have this thing over here right yep so we are going to have no no no so that’s actually part of the video dude that’s actually i said oh i see it that’s part of the video so what is this going to have talk talk yes this is going to have a video footer element so it’s going to have a video footer um at the bottom so we have where oh just one second we got a five euro super chat thank you thank you so much dude yeah you guys it’s a lot of money you guys go crazy on this stuff thank you um all right let me put this here oh damn i removed everything all right let me go back boom okay cool so go go for it talk me through what is uh yeah we have the video footer which is going to represent the it says the name tags in this case it says champagne mommy it has the description it has the music and then it has that spinning record on the right side right so that’s going to be the video footer right and we have the video sidebar and that’s going to be where we see that heart where we see that chat where we see that share button right so they’re going to be two different components and they’re going to basically sit on top of the uh video and the photo footer has what the spinner yeah the photo has the spinner yeah and the disc is also part of the footer yep so the the little ticker which is that thing where it shows the song that’s going to be um inside the we have the spinner which is the disc [Music] i see i got it yeah i see got it ticker and then the disc spinner yeah okay and i’m just gonna visually also draw it out guys so you know what exactly what we’re gonna be building so when we say footer it’s going to be this guy right here and i’m just gonna put a circle around it cool and then when we say video sidebar it’s going to be this guy right over here okay does this make sense guys if this makes sense let me know and just drop it in the chat because like we don’t want to move on unless these things make sense and you guys are able to follow along with us i think that’s really really important so let me know if this makes sense so far yeah and all of this is going to be this is going to be one video component yeah exactly so the goal here is that we can literally just pop in video components with a bunch of props so props meaning properties which customize one component from another so that way they don’t look the same every time we’re basically going to pass in some props into that video component and it’s basically going to just output that card so that what you see right now with that one sort of card and it’s going to output that as a video component so it’s very clean the end result but getting there is going to be a bit of a journey and we’re going to show you all of that now um but like we see so when we scroll through those cards it pretty much will show you so pretty much imagine we’re snapping on each of the different video components yeah yeah exactly awesome and then like look here’s another video component here’s another video component once you build it you guys can just keep reusing it again and again exactly awesome so then all you got to do is type this thing in video and then boom out you get this entire thing at once exactly dope beautiful so that would be the end result guys um so logan says are we eventually going to make a map a list of objects to create the components yes exactly uh i have a i have a question sunny for you yep would it uh would it ever help uh to have like additional components so for example what i mean by uh by that is like would it ever help to have you know say this thing be its own component yep you know this footer be its own component you know and then to combine it or is it better to just have all of that be part of one component so that’s a really good question and yeah we actually do exactly that so inside of the video component we have the video component and the video sidebar component so the video for the the actual video component will be consist of two as well as two other components so you see we have this component tree right yeah so yeah you can keep nesting and that’s honestly how apps are built guys like you end up having these really uh nested sort of apps with different components being reused in different places yeah i see because yeah because there’s a video component if we have that right here that’s gonna be using multiple things like it’s going to be using the sidebar component so let’s just say side and then it’s going to be using the footer yep and it’s also gonna be using the video itself exactly got it okay so that video is just built up of like two components plus itself exactly yeah cool okay awesome all right so let’s let’s keep it moving then nice so and now what we’re going to do is we’re actually going to go ahead and build that one that’s a sort of template for that first video project so let’s go ahead and do that so i’m going to create a so if you show the first file that we create and then after that i’ll be i’ll sort of just create them as we do it so to create the file guys we go inside here we click on the add file button so and then we basically go and go ahead and type in the video here so video.js and this is going to be the component for the video card right so then we’re going to use a es7 snippet so it’s a handy little extension and what we’re going to do is rfce and that will go ahead and pop out that code for us really nice and once we do that guys it’s always a good convention to go ahead and give it a class name so in this case what’s the cast name going to be cozzy class name for what the div for this div video yep so just be class name is video and then what i’ll do is while kazi writes that i’ll go ahead and do an import and import the uh video.css file so video.css and let’s go ahead and add the class name here so class name and let’s do here video there we go nice nice so what i’m going to do now is i’m going to go ahead and create a video.css so video.css and we’re jumping into that file now so we should be going into that now yeah there we go and now guys what we have is if i just do a lot i like to say it’s just a h1 or something like ryan says um this is a video something like that right so this is a video and guys this is what we were saying before so imagine the end result is we’re gonna have the video footer so imagine something like this it looks something like video you wanna you wanna decide i’m calling it video card um i think for now let’s just call it the video we can call it yeah we can change it but in this build i think this goes video yeah all right steve you know it’s going to break your heart but you know i tried i tried he’s going crazy over it so we got video for a video signed sidebar sorry side bar there we go nice so we have the and that’s basically what’s gonna happen and that will give us the end result of the card right so um why do you have to import react in every component so yeah good question actually logan so logan asks why do we have to import react in every component so when you’re using react components guys you just have to do this for every c or uh every file which is a component it’s basically react’s way of i mean it’s a little sacrifice to pay for for what you’re essentially getting back that that way it allows you it tells sort of react when it’s compiling that this is jsx it tells you how to handle everything in terms of what is a function what is a class how to build that together into the final app but if you’re if you’re building a component then you have to have import react from react to the top of every uh react file so just something that you do have to do when you’re using react which is actually a small price to pay compared to angular right so angular you have to have a huge amount of code just to get up and running um yeah so this is a video so they’re nice and what we’re going to do is we’re going to go to appinapp.js and we’re going to go ahead and import it so we do import video from video like that nice so you save it and now what we should see on our app so let’s go ahead and open up our app quasi nice we see this is a video this is a video this is a video right so what we’re going to do now is just to exaggerate this a bit so that way we can sort of see this visually in a very nice way i’m going to go ahead and give this something like a border one pixel solid black right one pixel solid black so imagine that’s a video right here so imagine that’s a video right so we can see now that we’ve got a bit of a bit of size to it and what i’m going to go ahead and do is give a width and height of 100 because i want these videos to kind of take up the full width of the screen so let’s see if that works in the way that we expected so right now that’s actually only going to use up width of a height of 100 of what its parent is right so at this point actually we may be able to if i just demonstrate a slightly so we do height of let’s just say 100 pixels so 100 pixels in height and that should give it a bit more sort of size to it so let’s go ahead and exaggerate that let’s say 500 pixels nice so you see like everyone’s kind of like a video right at this point so what we’re going to do now is we’re going to go over to app.css so app.css where is it app.css and we are going to go and do the following so this is where it is honestly this is where the magic kind of happens guys so annoyingly we have to kind of add this rule so i found that like there was a bug with react when you’re doing this but you have to do the following you have to say for in html so you have to target html and you have to add this line of code right and this this is basically some of the magic that allows you to have that snap functionality so you need to say in the html make scroll snap type to y because it’s vertical right and make it mandatory right so this is just something we have to include and i found i did try and test it and i tried to test it with and without uh without that rule in react it just wasn’t working so um i we do need that rule okay now what we’re going to do is we’re going to go ahead and say so the first thing that we’re gonna do is go ahead and say um that the app videos so let’s go ahead and open this file we can see all of the videos sit inside of this container app videos right so we’re gonna go ahead and do dot app videos and here i’m going to say position is relative to its parent so this is a rule which is basically the reason why we have this is because later on you see how the final app was centered so they’ll come into play as to why we do that right they’ll come and display us why we do that afterwards but what i want is essentially to have it so that even no matter what screen you’re on that app videos it’s going to have like a set sort of phone kind of shape to it so it always kind of looks like it’s a phone so what i’m going to do is give it a height of 800 pixels uh and we save it and let’s see what that does so you can see that’s going to give us a height of 800 pixels but right now if we do overflow hidden you’ll see why so right now it doesn’t actually look like much happen but if i do overflow hidden you will see that it will actually should go ahead and hide the the rest of it so um let me see why that’s not playing so we got an import app videos we go back to app.css our videos okay interesting so now what we can do is let me go ahead and debug this one second guys if i pull this over to my screen so i can see it so we have this is the video oh yeah nice yeah you can actually see that so if i go ahead and make this smaller it’s because everything’s white right so if i go ahead and make this 500 pixels watch how it cuts off right so you see it will actually cut off the where it says this is a video so it is actually sort of cutting at this point because of overflow hidden so what we want is we want to keep it at 800 pixels but we want the overflow to be scroll right and what this would mean now is if cause if you just go ahead and scroll through this you’ll see that there’s a scroll bar now right can you see that so there’s now a scroll bar scrolling yeah the whole time yeah so you see it’s scrolling now so and you see a hello clever programmer stays at the top so we have like this container which is scrollable right nice which is awesome oh so i see so it’s not like the whole page is actually scrolling it’s the four components or five components of video that you have that are actually in a container and they’re scrolling because i mean nor initially i thought this was a sticky header but it’s not just a sticky header because okay got it that makes sense right yeah so now that container that uh kazi mentioned is called app videos app underscore underscore videos and then we have our overflow scroll which is why we can scroll through it so what we’re going to do now is we’re going to have a width of 80 because i don’t want it to be take up all of that room right so i’m going to go ahead and give it a width of 80 and you’re gonna see that that should come in a bit more so you can see now it’s sort of coming a bit more nice right so that’s pretty cool and we’re going to say a max width of 500 pixels that way when you go on big devices it’s going to limit it right but the magic here guys actually happens with this next line so remember we added this to html but you also need to add it to your container that you’re applying the rule to so here i’m going to say scroll snap type y mandatory right and what this is saying is like set a scrolling snap uh like mode to a vertical axis so we’re saying like you wanted to basically sort of look out for any snap kind of events where we want to snap to different points and this will make sense in a second guys so that’s pretty cool but it we don’t actually tell it so how does it know when to what to snap to etc how does it know that right so the way we do that is we go to the video right we go to video and what we do is we go to the video child and we say scroll snap align right so we say scroll snap align start right and then here what i’m going to go ahead and do is set this to be something called position so this one is going to be position relative and relative means that it’s now relative to its parent which means that we’re talking about the app videos container so it basically changes some of the measurements inside of it and then we’re going to set the width and height to 100 so width because a hundred percent height is at a hundred percent nice and then we go ahead and remove the width tonight real quick thank you guys so much we just broke 10 000 views you guys are amazing that’s insane dude that’s insane wow it’s like in 40 minutes today actually so that is huge you guys really appreciate you guys are helping us just crush it uh if you guys are enjoying this so far and you guys are enjoying what sunny has put together for you guys make sure to smash that like button yeah we love that guys it’s going to help more people reach this video which is going to be always nicer right so quasi go ahead and swipe on that box now and see what happens okay so i’ll okay so when you say swipe you mean just scroll yeah so if you scroll is it snapping now ah yeah so okay hold on yeah i can actually i see it like snaps snaps yep yeah so as soon as you sort of swipe now it’s going to snap so if you swipe enough it’ll snap to the next one and it’ll snap underneath that’s basically that that whole thing happened guys from these two rows so we set the container so this magic line oh i have to actually let it go so watch this right so if i scroll down and i let it go boom snaps scroll down let it go snaps scroll down snap oh that is clean and it works in both directions as well which is now ah look at that so boom snap this is what what the functionality is gonna look like guys if you think that’s cool drop a comment below and let us know if you think that if you find this to be like super sweet like look at that ah like i just scrolled down a little bit that’s really cool and also guys we just hit a thousand likes that’s insane dude oh my god thousand like when said it was a thousand like oh my god amazing amazing seriously that’s insane thank you guys and yeah we’re even the chat donations or super chats at 13 which is crazy we just kind of got started exactly right so what we’re going to do now is we are going to go ahead and check out the so yeah those two lines of code are magic guys so you see the scroll snap type why mandatory and then we actually go ahead to the chart and say scroll snap a line start where jess singh just gave us a donation thank you so much he says great work guys keep it up we appreciate that thank you so much damn thank you nice so what i’m going to do now guys is sort of emphasize that sort of phone look right so we wanted to kind of look a bit more like a phone so at this point what we can go ahead and do is go back to app.css and let me just sort of black out the background so it looks a bit more sort of like you know like a bit more dynamic and sort of interesting so i’m going to go to your app um the actual app itself and what i’m going to do is so say i’m going to say app and i’m going to say app is referring to this by the way guys so this outside container right here so i’m going to go to app and i’m going to say background color so background color of black there we go and i’m going to save that and look at that guys so the whole thing’s black right now all right so it’s kind of confusing you already know what’s going on here um but what we’re gonna do is just to say emphasize everything we’re gonna make this one have a white background uh border so we can kind of maybe see it a bit clearer yeah so you can see that we’ve got that black black background color and then here i’m going to make a background color of white so now if i save that should we see this is the video a and then we go let’s go ahead and make this one like let’s call it let’s just make it red so i’m going to emphasize all this stuff so you can see it a bit clearer right so you see now it’s got sort of a red border and let’s go ahead and make that five pixels so it’s very pronounced right so there we go so this is a video and then now if you sort of snap scroll through them so cause if you scroll through it now it should actually be very clear as to uh sort of that snapping because i’ve got a red border snap snap snap snap city i love this yeah and you see like in the tick tock clone we don’t see those uh scroll bars right so a lot of people when they want to hide the scroll bar they go ahead and do something like this they say overflow hidden or something like that right don’t do that guys because you actually lose the scroll functionality so you that’s sort of like a rookie mistake you don’t want to do that instead you want this snippet here so it’s these lines of codes right here so these ones are right here so what this is saying is saying add videos go ahead and access the webkit scroll bar and say display none so you keep the functionality and what this one’s going to do it’s going to hide the scroll bar for chrome safari and oprah and for this one you need to do a different one for internet explorer edge and firefox and these are the rules that you need to apply so this basically you can go ahead and copy that so since we were since we were talking about snapping i got something for you guys i’m actually going to be bringing in lots of gifs i just had a breakthrough idea yeah we should we should like hook them up to the stream deck you know yeah oh yeah that’s actually smart yeah so so now if i click save guys notice how that scroll bar is going to disappear now which is super clean so now when we’re scrolling through it it’s just going to pretty much not have a scroll bar which looks even nicer ah no scroll bar let’s but it still snaps and no scroll bar keep the scroll functionality but then not have the scroll bar right you know what i gotta do for that one [Laughter] now we’re gonna do color white i think let’s try and do color white here and save and let me see if we can do that so okay so i’m not going to do that here but we can see there’s still some text at the top right so what i’m going to go ahead and do is delete that text so there we go and now it should snap to the top of the screen and you see right so this is this is okay but it’s not ideal right we don’t really want this to be the case so for app what i’m going to first say is 100 so a height of 100 view height so 100 view height if i do that firstly you’ll reach the bottom of the page so there we go and now i want that stack container to actually take up the middle of the screen and kazi i found this out in a really nice google chat that i popped in the sort of team channel the other day and basically what you can do is this really nice little hack and the hack is um you basically what is this hack for so it’s basically you see that container you have here so it says this is a video yeah if you want to center anything right all you need to do is do display so it’s really nice you say display grid and then you say place items so place items center and now what happens when i send to this that when i save this sorry so oh dang that’s it that’s cool right and it literally will always be center like which is such a nice little hack that is clean yeah so it’s a really really nice one okay here a really newbie question but like what happens if i do like literally i wrap it in html center tag which is as far as my css skills go i mean that might be curious that might work let’s go ahead and try it [Laughter] if that works that would be mind-blowing dude i’m gonna quit because that’s my hack you know that’s how i freaking do this stuff let’s wrap it you i don’t know what is up with that like little weird yeah i know right why do you say if this works dude okay okay so let’s send is it it centers it horizontally but then but not on the vertical yeah not bad actually but still that’s a pretty good hack guys like if anyone found that yeah you can use that you can definitely use it and that’s a very quick way of doing that so nice um what we’re going to do now is go ahead and uncomment these ones because that will center it both vertical and horizontally yeah some people lost their minds when you showed the grid one jaya is like that is insane hey oh steve said yay sunny has learned uh great honestly we’ll do some more videos on grid because grid’s really powerful guys it’s really really powerful and nice to use um leroy says yo guy kaz you gotta make up video on the behind the scenes for all the prep that goes into these live videos that actually could be cool yeah dude i if i did that you guys would see the frustration of coding yeah yeah yeah yeah yeah sunny will come to me and i’m like sonny this sucks what is this people are going to be pissed when they see this come on we got to step it up so now what we’re going to do is we are going to go ahead and check on so go to app.js and firebase let’s see we’ve got app.css so now we’re going to do guys is actually go ahead and focus on that video card so what i’m going to do is inside the video card so let’s go ahead and open that what we’re going to have in here guys is remember we had this is the video and then we have the video for and the video sidebar right so for the first one what i’m going to go ahead and do is just type in video and my emmett pops in like that and this one i’m going to have no image no video and to begin with so if i go ahead and just save that it’s actually going to go ahead and not do much for me so it’s going to head in so you see like it just seems like a white page right now right so i’m going to go ahead and just find the url so i’ll use the one that we had previously oh my mouse just found the time to die there we go um so i love that snapping functionality yeah it’s clean right so now i’m going to go ahead and grab a link of a video so guys if you do want to use whatever video you want just go over to tick tock so ticktock.com and all you need to do to get it working is go ahead and just pretty much right click and inspect and copy the source of a video so in this case like it’s a massive url so i’m not going to go ahead and copy that into the the screen because guys like it’s better you just go on tick tock and grab that so in this case we’ve got a video here right so now we’ve got a video and what we can go ahead and do is go ahead and add a class name first because right now it’s not styled right so it’s not started but every single one is that same video card right but we want to basically style it so that we have something there so let’s go ahead and do video class name so class name equals and i’m going to say video underscore underscore and let’s just call it the player right it’s a video player or like in this case yes i and and this is where steve is going to say sonny i told you we should have video card video but i know i know i was thinking the same thing i’m like bro we’re gonna there’s gonna be video and then video card but it’s okay yeah it’s always gonna be a naming thing guys but in this case we’ve got video player um and then what i’m to go ahead and do is video player is referring to that video right so if i go into the css now for that video player what i want to do is firstly actually to make it a little bit more prettier let’s go ahead to app.js and let’s give it a rounded border radius inside that container over here and let’s give it a branded border radius for 20 pixels so look what happens when i do that you see we get a nice sort of rounded corner on that tick tock display which is kind of nice that’s how tick-tock have it yeah yeah we can go ahead and get rid of that red border that we were showing earlier uh awesome so if i go ahead and get rid of that so now we’ve got that so what i can do is go to that border uh border a video player sorry and i can say set the background color to black in case the video ever sort of resizes and now i’ll show what that does so right now let’s exaggerate it and set it to red and i’ll show you why we do that and then what we need to do is we need to set the following we need to set height and width of 100 and object fit to type fill right so i’m going to show you this and what i’ll do is i’ll demo exactly what this does but as soon as i hit save guys notice how it basically brought in the exact size of the video so before it wasn’t actually the correct size and if i go ahead and do width of 50 and i get rid of object type object fit fill look what happens so you see that nice yeah so that’s why i’ve done the background color as red but if i was to now go ahead and do object fit fill yeah look what it will do it will fill up that 50 and then obviously what we can do then is make it 100 and we then get a perfect coverage right but we do want to account for the background color so i mean in this case it’s fine we can we can actually go ahead and get rid of that so object fit fill height and width of 100 and now we get the perfect sort of sizing so now as you scroll through them you’ve actually got perfectly sized videos all right so your perfectly sized videos by the way thank you so much phil philippe uh duarte gory i really appreciate that five euro donation thank you and he says guys to import components use control plus space and then press tab but it doesn’t work for all keep smashing greetings from brazil awesome thank you so much yeah we try and do that actually on the live stream but when we’re using vs live stream it doesn’t always work but i always actually do use that shortcut really really good shortcut to use it’s a really good shortcut to use so what he’s talking about is like if we ever go to any of our files like app.js all these import statements you don’t have to write them you can actually go to the end of the thing and then actually hit control space doesn’t always work but when it does it’s really nice yeah and it will pop up a little drop down you click video and then it will import the video file for you which is awesome yeah right so now what we’re going to go ahead and do is actually go ahead and say so the first thing is videos actually have this uh attribute called loop so we want when the video finishes playing we want it to loop through so let’s go ahead and do loop um no i just reading my my hair is like sonny looks so fat in this video that’s what i was saying and it’s because the [ __ ] just destroying your self-esteem yeah yeah on youtube hey man you gotta start working out more you gotta start you know yeah lockdown was uh lockdown wasn’t the kindest at times guys that just goes to show you you can still get a girlfriend when you look like you get a bit weight you can still get a girlfriend there you go yeah as long as you learn react that’s when yeah like then react that’s that’s the hack that’s the only reason i got mad [Laughter] if you make the height even smaller you’re gonna be even fatter yeah exactly remember we were messing around with this earlier guys and we’re just having some fun and changing this to 80 pixels 80 and look what happens like uh because you’re trying to debug it and like yeah okay then you’re super fat wow awesome right so uh next let’s go ahead and uh uh hona says you guys are making programming fun nice love that thank you um so what we want to do now is we actually want to go ahead and let’s let’s tackle the problem that is uh kind of like a we don’t know how to address this in the beginning right so like in the beginning i was kind of thinking how do i basically on videos i don’t want to show the controls right so you can actually go ahead and do something like this you can say controls and what this will do is i’m sure it’s controls and this will go ahead and actually refresh the page but it will show the player control so you see now we’ve got a plus play button at the bottom so you can go ahead and play the video and it will work in that way but we don’t want nice do you have instagram what like i see so you what you want it like this where i just click it and then it does instagram and then i can click and pause exactly when we click it it will play as opposed to like being any different right so um so now i’m going to go so i’m going to go ahead and remove that controls right but how do we have it like how do i target this video like how do i how do i even go about that right so the way we do that is we actually use a reference right so a reference in um in react basically refers to we want to we need to capture some kind of reference to this video right so so that we can actually go ahead and do things like video dot play video dot pause right but at the moment we can’t actually do that right so what i need to do is i need to go ahead and say const and let’s just call it video ref so it stands for video reference i’m going to say use ref and though it’s like there’s use state use effect use all these other things use ref is just another hook and in the beginning what we say is we say give it a value of no so there shouldn’t be a reference in the beginning right the way we the way we actually attach that reference is super simple with hooks it’s really easy to attach that reference we go to the video and we just basically say ref equals video ref and that will do all the work for us so that will actually go ahead and attach a reference to um the video ref so now we’ve actually got the video ref and real quick overall what what are we trying to work on right now the video component yeah so we’re working on getting the video to play when we tap it okay yeah so we’re getting it to work so when we tap it um and the way we need to do that is we need a reference to be able to say that like so that eventually what we can do is we can say something like this we can say video ref dot uh play video ref dot pause right something like that right so when we tap the video how can we capture that click or tap right so in this case we can use on click right so we can say on click so we’re all familiar with like an on click right so here we can just say on click and then let’s go ahead and make a function called on video press right so i’m going to create a function called on video press so now what i’m going to do is i’ll say const oops const i’ll say on video press on video press all right and this is basically going to go ahead and be a function and what we’re going to do now is i’m basically just to test this guys what we’re going to say is we’re going to say video ref and then once you have a reference you need to do something dot and then you actually go ahead and type current so you’re saying the current reference whatever it’s attached to get that reference and then you say dot and then you actually get the object so in this case we’ve got the video now and we can say play right so let’s go ahead and save this and now kazi if you click play on that so we need to import the user by the way somebody in the comments uh said get an extension on visual studio code called auto import and that app apparently works all the time that’s good um but my own experience with that guys is it started to import like the wrong imports at times so uh sometimes when you import things you’ve got like a bunch of different options so it can have its sort of good and bad size that’s where that’s where i’ve seen this is one of those things where when i say jetbrains ide like they nail that stuff like they have never failed me on that like ever so yeah i mean i don’t know how it is for react but like for python it’s king yeah i guess python’s been out a long time compared to react as well so they’re slowly getting out the kings yeah got it okay so now what you want to do guys is go ahead and cause if you just go ahead and click the video uh-huh so click on the video yeah you’ll see it like it should snap start yeah you can’t pause it right so that’s a problem like we can play it but we need to be able to pause it but right now we have no way of telling if it’s actually playing or not so the way that we tackle this problem is we use a piece of state so here i’m going to say const and i’m going to create a piece of state so in react this is how you essentially write a react variable so you say play is the react of the variable name and set play is what allows us to change it right so here i’m going to say use state so use state and by default the video is not going to be playing so we’re going to say false right so we need to go ahead and import this so i go here and i say use state import and then we’ve got the play and we’ve got set play right now what we’re going to do is we’re going to say we are now going to say if the video so if play so if the video is playing then we want to go ahead and pause the video so we’re going to say go ahead and pause the video else like if else if the video is not playing so if it was already paused then go ahead and play the video and now by using a piece of state what we’re actually going to go ahead and do and remember guys what we need to do is that’s not everything by the way so if it’s playing we need to pause it and then we need to set the state to tell it that it’s now playing uh now that tonight is now pause sorry so we need to say set play false and then when it’s not playing and we play it we do set play steve says uh playing karma set playing steve wins this war steve winslow there you go i’ll change these two there you go playing playing there you go that’s nice if playing then pause it make sure you’re playing make sure current.playing is capitalized so it probably has to be oh yeah this should be play oops yeah like the grammar police of react.js developers yeah i mean today dammit you know like i’ve had people saying oh [Laughter] oh man guys give give sonny some love you know in the comments below because it seems like there are a lot of people trying to break down break him down you know oh man i mean like you do you do like weeks of live streams and then you slowly get shot doesn’t sort of play in your head i know if we now go ahead and so some people are saying you can use a single line if else you can’t because there’s two there’s um two lines of code here if you add one line of code yeah you can make this single line but you you don’t i mean sometimes guys it’s actually easier just having it written like this me and kazi had this debate um it is just nicer having it as a as a normal if block rather than having like a ternary or tertiary or whatever it’s called so now if you play the video you can actually go ahead and play it and you can pause it now if you click it so go ahead let’s try it do you have instagram no snapchat nice i can actually pause it and uh by the way guys let me know if the audio is too loud of the video i’m putting it pretty low cool awesome got it awesome so now you can see it’s it’s uh it’s like when we click it and when we uh like it’ll play and when we sort of it’s playing we click it it’ll pause awesome um steve ram said east or west sunny is the best thank you yeah people are saying great stuff ricardo’s like they are brothers steve says i’ll have you programming like a pro in no time sunny yeah you fixed my naming convention right man awesome so that’s really good guys we have that set right so we actually have the videos playing now so that’s really cool um but now what we want to do is we want it it’s much better than you get picked on rather than me you know yeah now what we’re going to do is we’ve got the video for and the video sidebar right so the video photo is what we’re going to tackle next so to do that what we’re going to do is we’re going to do this we’re going to say video footer and i’m going to go ahead and create that file oh wait hold on hold on hold on i don’t think we were following you for a while so did you code anything significant no no no no i was always on the screen there yeah it was always on the screen video yes so now we should snap into that video footer.js file awesome and i’m going to do rfce and here i’m going to say i am a footer right so i am a footer nice future code says he just learned a new reactor awesome that’s what it’s about dude future code is actually um she is elizabeth and adelson and she changed her name to future code oh nice thank you so much elizabeth thank you awesome i’m glad you found value in that nice um so video footer and what we’re going to do now is we’re going to go ahead and import that so we’re going to say import or import video for from video footer and then do that nice um so he says i need some more coffee nice um so now what we’re gonna do is wrecking you i’ve been seeing him in the chat he’s like sonny needs more energy sunnyvale pattan amez is on fire today dude now we got the best the best roast for sunny gets a thousand dollars i’m kidding i’m kidding no all right keep doing a video for dude imagine that it goes viral and we have some crazy [ __ ] yeah yeah no guys just keep uh positivity alive in here and let’s keep it going nice so we’re gonna create it’s gonna freak out now because we haven’t got video footer.css and i’m going to do video footer damn nicholas says i love this community i am reacting positively to the state and effect of these tutorials you guys are serving it hot nice that’s awesome dude oh i’m stuck she said i roast him for free you know what’s hilarious is we should actually make a shirt and that should say react positively oh yeah dude that’s what i mean we should do that like that like manage your state you know yeah like that actually could be really cool exactly that’ll be amazing we should uh yeah yeah that oh yeah manage your state oh damn yeah i like that i like that right so now what we’re gonna do is go ahead and check on the video so we go video footer and we are going to go ahead and say position relative so video for position relative nice so it’s basically relative to its parent but the reason why we’re doing that every time guys is because when you do a relative it means that it’s gonna basically all the rules are just gonna apply from within it’s within that parent container right so sometimes especially when you start doing nested things like um absolute positioning and stuff you have to do that otherwise it can kind of get a bit annoying right so what we’re going to do now is we’re going to go over to uh video footer and we’re going to go and say let me just pull it up so video4.css uh yeah so now what i’m going to go ahead and do is actually right now we can’t actually see it right we can’t actually see the video for us so we’re actually rendering it on the screen we do video footer here um but let’s go ahead and see if we’re actually popping it out so video footer and here we say i am a footer so it should actually be showing so in order to get that out i think we need to go ahead and do we’re going to say okay so we need to say as the bottom firstly so video footer dot css save it and i’m going to say bottom 50 pixels so that means that from the bottom of the screen so from the bottom i want to be 50 pixels up so can you see now it’s actually very hard to see but if i do go ahead and make the color white uh color white look what happens now so you can see at the bottom it says i am a photo oh god freaking out so now you can see i am a uh so you can see now we’ve got uh yeah so it says i am a footer and the color is white right oh nice sambulocenda said uh just donated five pounds thank you dude you guys are awesome oh yeah that is today signed up oh nice dude welcome that is awesome sambulo just want to say thank you so much for the five euro uh super chat and he says you guys are awesome learning a lot from you thank you today signed up for profit javascript thank you that deeply means a lot because you have so many choices there’s like courses on udemy and udacity and coursera and all over the internet and for you to trust us and jump in thank you we’re not gonna let you down we’re gonna help you crush it so that is amazing exactly really appreciate that guys thank you so much um awesome um so now what we’re going to do is we are now going to bit so you can see it says i am a footer at the bottom of the screen right yeah so obviously right now that doesn’t look great that doesn’t really really look like we want so we’re going to go ahead and put some information in there so we’re basically going to do a bit of an outline first right so we want to kind of have a div which is basically going to have all of the text so where it says like the person’s name where it says everything else and then we’re also going to have a record right so we’re also going to have like a record um a record being like that spinning sort of thing that we saw on the bottom right so cause let’s go ahead and show them the app and then let’s show them sort of what we’re trying to get to so they can see a visual comparison so this is the actual app you guys so you see that i’m text right there yeah yep so we want to go from this over here yep to the one on the right exactly cool and right now we’re going to work on the footer right sunny yep exactly cool so we want our footer to go to this thing here so we need a spinner and a ticker so this is the footer including no actually including the text where it says champagne mommy and the description uh is all of that considered footer yeah so all of that is considered for anything which is attached to the bottom is considered the footer at this point got it okay so all of this let me actually make that very clear because i did not know that yeah by the way dude feel free to correct me because you probably heard me say that as a footer so just feel free to correct me because i think it’s at the end it’s going to help everybody more just so yeah it’s accurate and then steve isn’t going to yell at you and everything so it’s going to be great he’s not going to go crazy um so that’s going to be okay cool and so we’re trying to get to that awesome yeah so we have that um yeah exactly we’re going to get to that now guys so we have the way we’re going to do that is we’re going to have a um two divs right now so we have the internal div which i’m going to say is the video footer i’m going to say this is all the tech stuff right so it’s going to have the ticker it’s going to have the the username it’s going to have the description and everything like that and then next to it i want to have an image right and that image is going to be i’ve got an image right here so i’m going to go ahead and pop that in and i’ll drop this on two lines for you guys to pause and look at so let’s go ahead and drop down to lines now so you see that is the link that you guys can pause and sort of copy that out if you want oh one thing i forgot to mention to everybody i think shobham just brought it up he says i want to sign up uh is it free javascript training in the description so profit with javascript program is not free profit javascript program is a paid program that we have where we do coaching lots of weekly calls with you there are training modules so it’s a paid program but we do have a one hour free training on how to become a javascript developer in the description below it’s filled with value and at the end of that training we’re gonna pitch you the profit with javascript program at which point you could choose to join it or two not join it but either way you’re going to get a ton of value and you’re going to get a clear roadmap on where you need to go as a javascript developer so you can actually start making an income you know javascript react.js they’re both similar exactly yeah so joe do click that link and jump in that free training that we have for you guys in the description below it’s epic it’s like packed with value so i would definitely sign up for that exactly yeah go ahead and give that a try guys um and what what do we cover in that training cozy uh in that training we cover like the exact road map to becoming a javascript developer like the technology people need how can they go from beginner to landing their first job and how can they go from their first job or making being able to make one thousand dollar to like how can they like get to the six figure mark as a developer so just lays it out and what does that timeline look like does it look like three months one year four years so all of those things we have because most when it comes to practicality most people don’t know how to go from just code typing code to being able to turn that into an income for them and that’s why a lot of people quit exactly yeah and guys like that’s really where we separate ourselves from like what’s currently out there is that we actually go ahead and show you guys not just sort of like the skill set and the coding abilities and all that stuff but also how to go ahead and take it to the next step and make some money from it which is obviously what we’re all doing this for we’re trying to make some money we’re trying to like do our best and become the best developers we can become so that we can go ahead and get a job and become a developer yeah nice and there are many reasons right oh yeah thank you akonch and we got another donation too so thank you guys for that and again guys it’s time money and impact right so it’s like being a developer allows you to make an impact on the world getting a job allows you to make an impact you also make money which is not bad and that also gives you the freedom to spend more time with your friends family so the practicality you know we don’t want to just teach you the coding skills and go okay enjoy how do you turn it into really being able to change your life that’s the important key thing there but let’s get back to the training exactly yeah so guys what we have now is we have the image right so we have this image and then we also have this uh text right here so the first thing i’m going to do is may actually go ahead and make this h3 and this one is basically going to say for example here it will say rafaeli for example and that would be like the header right so the sort of their handle so in this case it’s kazi’s handle um so if we go ahead and pop that and you can see now at the bottom in the first says rafikaze right and then what we’re going to go ahead and do is have a p tag which is going to have the description right so we’re going to go ahead and say this is a description for example right so i’m going to save that and we should see that maybe pop under at this point yes we can we can just about see that pop in there the image right now we can’t see because it’s kind of like underneath everything right so it’s underneath it all right now so to go ahead and fix that just so we can get a clear idea of what’s going on now we go to the video footer and i go ahead and make this a display flex um so display flex right so video for display flex um and now what we should see is you can actually see the the sort of it’s very hard to tell uh what i’m gonna go ahead and do is style it at this point so we’re going to go video footer dot js and i’m going to go ahead and give this image a class name so image of class name of let’s say a video footer i’m just going to say logo all right so video for a logo um so like that so one second guys let me go ahead and pop this to the side there we go so we’ve got video for uh uh right now i’m not gonna call it video for uh logo i’m gonna say video footer record because it’s kind of like a record the spinning right so let’s go ahead and say video call photo record nice and then what we’re going to do is we’re actually going to go ahead and target that so i’m going to go ahead and target that and this is what i’m going to do here guys so i’m going to do a few cool things for this video file so firstly what i’m going to say is i’m going to go ahead and add in this follow the following right so i’m going to add this animation in so it’s a keyframe animation and it says app logo spin you can actually name this whatever you want so we can call this one spin the record right so let’s go ahead and call this one spin the record and what this is basically saying is it’s a set of keyframes which is basically like how you define an animation and this is saying go from a transform so a rotation of zero degrees to a rotation of 360 degrees right and this is actually what you actually get by default inside of create react up in that start approach that’s why the react logo spins around which is kind of nice right so what we’re going to do now is we’re going to go ahead and say video footer so video footer underscore under scopes i’m just going to underscore record dope and then here i’m going to say animation and i’m going to go ahead and give it the animation i’m going to say spin the record right spin the record infinite amount so keep spinning it and i want the duration from it to go from zero degrees to 360 degrees in five seconds and i’m going to say linear right which is basically the way it speeds up so i’ll go ahead and save that now you i don’t think you can actually see it too well but that thing is actually spinning so you can actually see underneath it’s kind of spinning but we need to get the size right so at this point i’m going to say height of 50 pixels so i’m going to go ahead and i’m going to say height of 50 pixels and that will make it a hell of a lot smaller so now you can actually see it and it’s currently there but it’s hard to see so right now because it’s black we can actually go ahead and invert it so a very cool trick for you guys is to go here and say filter and say invert one and what this does is it goes ahead and inverts the color so it gets a white color now you can see the whole thing look at that little thing spinning at the bottom that’s really nice right so that’s really cool and now what we’re going to do next is i’m actually going to go ahead and give the text so the text right here so this one right here so if we go to video for uh remember all of this text so roughly causes this description i’m gonna go ahead and target that and say go ahead and target that and say i’m gonna make it flex one now flex one is gonna set the weight so it’s gonna say that text description box where it’s got raphael causes this description that should take up precedence which means as soon as i hit save here yo just real quick sunny where did you get to spin the record is that a library or part of like the animation that comes with it what is that no so that’s the that’s part that’s ah okay got it got it got it you created the css animation okay dope nice zero degrees to 360 degrees oh that is very clean nice right yeah very clean and what’s up with invert the imba is uh whether it’s going clockwise or counterclockwise that’s what it is this is the color yeah what’s the color normally so it’s normally black right okay i couldn’t actually get like a white png with like that with a see-through okay super that’s a clean solution that is very nice yeah so i just invited the color which is nice um and then if we go ahead and save that so now you can see it gave flex1 to that text box so which is why it just pushed it away so it pushed it to the sides which is really clean like it looks really nice like that um so let’s go ahead and check out the finished one so nice so what i’m going to do now is i’m going to actually go ahead and give the um give that a bit of padding because right now it looks kind of squashed up right it looks a bit squashed up there so i’m going to go ahead and say the video foot uh record so video footer i’m going to say position zero color white so that’s no we don’t need that one i’m going to go ahead and space this a bit nicer now so what we’re going to do now is go ahead and give the video for a text and the five second in the animation gerardo asks what does that mean it means five seconds so it’s five seconds to go from zero five seconds to zero to 360 right yeah yeah to go from zero to 360. and then because it says infinite it basically just loops so even when it finishes it just carries on doing it right so now if i save that we should see a padding around it okay so that’s not what we wanted one second um we don’t want to do a padding around this sorry i’m going to do a padding around the video footer so padding and here what i’m going to do is i’m going to say padding and i’m going to do 20 pixels there we go nice and that should actually go ahead and comment by vabov and he says learned firebase from you and used it in one of my projects rather than mongodb it was amazing great work guys hey love that nice that’s what it’s about guys yeah so once you actually use firebase you’re going to really see the beauty and then the sort of value in it guys so really really nice stuff so what i’m going to do now is actually go ahead and change this um oh i see i did it slightly different before okay so what i’m going to do now guys actually we will use flex yeah because flex is a really nice solution to this um nice so i’m going to go ahead and do now is say bottom 50 pixels up okay awesome um and what we’re going to do is go ahead and add that that sort of um the next element which is the sticker right so that little spinning sort of that thing that which kind of flies across so the first step is we need the music now icon and we need a bunch of icons throughout this project so let’s go ahead and install material ui fuzzy let’s do it so okay let me let’s open up the command line and let’s also go to material ui right here and so install it guys we are going to need this one line over here npm install i’m going to open up a new terminal yep and i’m just going to cd and not not even though that’s not necessary but i’m just going to do it anyway and we’re going to install the material ui core and that’s one thing we’re going to need the second thing we’re going to need guys is go ahead and make your screen full size and go to icons now once you’re in icons you’re going to need to also install the icons because we need them right sunny for yeah right all this hard sign that you guys are going to build the comments for all of this stuff you’re going to need that so let’s go back here and we’re going to just right click it and i’m going to put it here and i can actually open up another uh new terminal and i can just paste it there so that will install the icons yeah and one thing i want to show you guys with the icons is you can just click the search full list of icons and here are damn i remember all of this stuff i did it’s so nice like going cause you take it away yeah and here are all the nice icons you guys have for material ui so whether you know you guys want to have um so if i look at this app here i’m gonna just type in heart i even have i haven’t even done this sonny done this but like i’ll just type in heart and see what i get back and i imagine he’s using this one called favorite border so that’s the heart and for comments i’m gonna just type in comment and let’s see what i get so i feel like sunny is using chat for that one so if i look boom that’s the one and then we’re probably gonna need another one share which is i think sunny’s just using this one and exactly right there so that’s the use of material ui you guys yes and love that love that explanation guys and that’s the truth so whenever you see us importing something if you go ahead and click on one of those things it actually gives you the line of code that you uh that you need to import inside so if we go ahead and click on like uh the heart for example it will say import and you can pretty much just copy that in and use that as a uh as a import and then you can pretty much you render that on the screen which is really clean right yeah awesome so the one we need is something called a music note icon so i’ve got it here so i’m going to go ahead and pop that in here so it’s music note icon and what that is is essentially where we have the ticker so i’m just going to pop it on the screen for now so we can just have a look at it so if i go ahead and chuck that in we should see that actually pop in the screen at any point so let’s go ahead and save wait a sec is it loading okay so it’s actually kind of pushed underneath a little bit now so what i’m going to go ahead and do is go to the video footer and make it a little bit further out from the bottom so let’s do 100 pixels from the bottom and this this should push it up there we go nice okay so i’m gonna go ahead and do that and uh what we can then do and say is actually go ahead hold on have it hold on hold on hold on are we are we following you uh yeah i think so i think so i think so okay keep going keep going let’s just have the app open up on the on the right yep there we go nice okay cool all right so we pushed it up a little bit we have that little icon right so the next thing i guess that we need is that little ticker right so we’re going to use something called react ticker so it’s a library that someone else has built it’s called react ticker so i’m going to go ahead and install that so i’m going to say npm uh oh i can’t need request read alright so there we go hold on so when you’re doing it make sure we can all see it because right now we can’t see it so yeah i will switch to these i think you’re on probably the second one type i was on this you might be on the third one yeah i was on the third one yeah so i don’t see you typing anywhere so it’s the third one third one though type i see you yep so now it’s cd so we need to cd firstly to make sure we’re in the right folder and then we’re going to do npm install and then i’m going to do a react ticker right and this is going to go ahead and bring in the code that someone else has made and to use it guys once that’s already now once that’s installed i just go to the top and say import ticker from react ticker right and the way we actually go ahead and use this is it has something called render props which are really cool and the way we do that is we pretty much we put out the react ticker oh why is it doing that and what this it’s got this neat little attribute here called mode is smooth and i’ll show you what that does in a sec and basically what are render props right so render props are basically something which tell us like it gives us some information by by having this component here we can actually go ahead and get the index so in this case we don’t actually use the index but i’ll show you because it’s quite a cool demonstration as to what is happening here so if i go ahead and paste this in so what are we trying to achieve right now the ticker so got it yeah so if i as soon as i hit save now so the song is not file yeah so here for example if i say uh yo what’s up guys yo what’s up guys and i save now check this out so if i save this we will actually go ahead and have a ticker at the bottom of the screen so you see that it says yo what’s up guys yeah yeah so it says yo what’s up guys and then basically this the mode smooth the reason why we need this is if you get rid of this is mode smooth basically says stop showing the next piece of text when the other one starts disappearing so you get a nice transition but if i get rid of that oh nice yeah it kind of does it like that so they have already accounted for that and then whoever built this done a good job of making it very easy to implement so the index by the way is also if you ever want to keep track of which number is showing it then what you can do is you can actually say this so you can put the index in and now it will say let’s go ahead and see us here say what’s up guys xero and i’ll say yo what’s up guys one yo what’s up guys two yo what’s up guys street so that’s an example of something called a render prop uh which a lot of libraries actually give you oh wait hold on it’s how is it incrementing yeah so they’ve done that on their end so they built some functionality inside of there um and you can actually go ahead and pull out yeah it’s really cool right damn so infinite like as long as they keep zoning i’ll just keep incrementing it yeah just keep incrementing it yeah nice wow okay nice miguel nicholas says this is pre-recorded right no this is live dude this is live we’re live right now yeah this is live right now nice um awesome so and now what we’re going to do is i’m going to change that because we don’t want it to essentially be this huge thing so let’s go ahead and make that p tag so let’s do p and i just save it like this and now i should say yo what’s up guys in a smaller way which is kind of already cleaner right nice that is looking clean yeah so we need to kind of solve this or make it look a bit closer to the final result right the final end product so let’s go ahead and start styling this so firstly do we need to give any more sort of css class names uh i think let’s go ahead and give the this outside container so right now we’ve got the music now icon and the ticker what i’m going to do is i’m going to chuck that inside of a container i’m going to give it a class name of a video footer so here class name a video for a ticker and i’m going to click enter there we go i’m going to chuck this stuff inside of its own container because i want to style this stuff right i want to have the music note icon next to the ticker so i want to kind of have them next to each other so as soon as i do that as soon as i do that we should be able to see that like not much visual change there because this we’re using block right but what i can do now is i’m going to also give the music note icon a class name because i want to style that as well so i’m going to go ahead and say give that a class name a video footer icon so i’m going to go here to music now icon and say boom video footage icon there we go now if we go back to the video for a ticket inside of our css file i can actually style it right so for that video for a ticker what i’m going to say is i’m going to say the the text i want it to be so the text inside of that ticker container so i’m going to say target the p text and i’m going to say here i want the uh the text to be um font size of 12 pixels and a padding of seven pixels above it so if i do that and save it so that’s a bit too small at the moment actually i think what we had is actually pretty good maybe so it’s actually kind of nice uh we have it at the moment so if we go ahead and get rid of that it was actually kind of cool how we have it right now so that’s pretty good um but for the for the um what am i trying to do here so we’ve got the video for a record we’ve got the h3 we’ve got so firstly let’s go ahead and style the text a little bit more so we had the uh where it said where it says rafaeli that’s kind of bunched up at the moment right yeah so right now i’m going to go ahead and target that it’s a video for a text the h3 inside of it which is this one yep yeah we’re going to target you know a lot of a lot of people are saying you know they’re a bunch of people at least one person in the chat he’s like angular you guys give respect to angular you know what are you guys doing just talking about react but here’s what i have to say to that here’s what it feels like when you uh you know can code with react and make stuff work so i’m just going to pop it up so everybody can actually take a look at it here’s like here’s what it feels like guys when you make when you make [ __ ] work and react so that’s why we’re gonna code and react guys no angular here get out of here with that [ __ ] let’s go [Laughter] oh man gurnaratha says keep going guys thank you yeah and honestly guys i see so many comments about angular like guys if you check the market share right now why why are you guys interested in angular react is literally on fire like in terms of it’s literally so opinionated and traps you into that framework react this like javascript at the end of the day and it’s just a library um exactly it’s just a it’s this massive framework it’s very hard to get it sort of started like honestly guys like react is the way to go react is the way to go it’s going to save you a bunch of like time and effort you’re going to actually get a big payoff from react nice seriously so we’ve added a bit of padding and what we need to do is every time we do this i’m just going to go ahead and pull this a little bit higher so it kind of gets a bit sort of doesn’t get squashed to the bottom there we go um and what i’m going to do is give it so make it a little bit lower so let’s go ahead and do 150 to the bottom and see how that looks okay it looks a bit better i’m going to go ahead and give this a margin left of 40 pixels so i don’t want it to touch the side so margin left to 40 pixels and let’s see what that does uh nice so that’s already looking a bit cleaner where we had the video footer so this one here guys where we had the video for a ticker i’m gonna go ahead and set that to a display flex so video footer ticker and say to set that to display flex right so as soon as i do that that should snap the okay i remember now yeah so guys this is actually a bit interesting right so usually this would work right usually this work but the library the way they built this is a bit uh it’s a bit like tricky so i had to kind of come up with a hackier approach of getting this one to work right so what we did is because whenever you do uh display flex on it it kind of freaks out it freaks out a little bit uh for that sort of uh the ticker that they’ve built so the way i got around this is for the icon i made it position absolute so that little music icon i made this position absolute so if i go ahead and add that line here so position absolute and save it you’re going to see it will go ahead and it will actually sort of snap up so now they’re next to each other right but the text goes through it right so the text goes through that music emoji right or music icon sorry oh thank you very much for the super chat really nice uh appreciate that dude and then what we’re gonna do is i’m gonna go ahead and target the ticker right so the tick i inspected and i saw they give it a class name of ticker so what i’m gonna do now is i’m gonna say um video for a ticker go ahead and target the inner ticker and say firstly the height should fit the content the margin left should be 30 pixels and the width should be 60 pixels so margin left it should give us enough room so it doesn’t actually go ahead and touch the uh the ticker so now what we can see is the ticker actually sort of stops before that low the icon now see that so it kind of stops before the icon which is really nice it’s like a bit cleaner um but what i’m going to do is i’m going to give that that ticker text a little bit of a padding at the top of it so it kind of aligns a bit nicer so i’m going to say padding uh seven pixels at the top so let’s go ahead and do that seven pixels at the top and we save it and now there we go so now what we have there is very clean it’s very nice the description is the last bit there which kind of looks a bit off so let’s go ahead and save that description so because that needs to have a bit of a bit more padding to it so we need to give it a padding bottom of 20 pixels so i’m going to go ahead and say inside the text container target the part of the p tag and give it a padding bomb 20 pixels so if i do that now it should push it a bit down so you can see like those little tweaks and already you’ve got like a much nicer looking sort of app right uh the only thing to fix here is that spinner icon right so the spinner right now what we can do is because we’re inside of a relatively positioned container you can do it you can actually go ahead and do a little hack here right so to get this one to work really nicely you can go ahead and actually sort of rather than messing around too much with the flexbox tricks you can say go and target that record and you can go say the position make it position absolute right position absolute and as soon as i do this you’ll see it would break it and it’s going to kind of fly over to i think the left it might yep so it flies over to the left right because it’s kind of sitting on top it’s saying no absolutely position me so right now what i’m gonna say i’m gonna say bottom should be zero so the bottom should be zero and then this will kind of snap it to the bottom of that container and then i’m going to say right zero and this is why setting the parent to position relative is very important so setting the parent position relative is very important because now it knows where to be relative to in terms of being absolutely positioned so now you can see it’s snapped to the right right but we we kind of we don’t want it to go all the way to the right so i’m going to say 20 pixels from the right so 20 pixels from the right is good so if i go ahead and do that boom now you’ve got like the exact positioning that we wanted and look everything is in its place everything is where it should be um so and now what we’re gonna do is we are gonna basically i think that’s actually the video footer done dude i think oh guys yeah the video looks pretty clean [Music] that’s sick i just threw some horn sounds the video is done let’s go guys i think you just gotta deal with it uh at this point i think we should keep them coming that’s my dude hey guys who’s enjoying that [ __ ] that i’m dropping you know comment below so we can keep the you know i’m the i’m the jeff dj so let me know i’ll keep it coming exactly now where we render that video for we want the video for it to be customizable right we want to be customizable um we want it to be able to take some kind of props so what i’m going to do now is i’m going to make the video for except a bunch of props so here is where we we usually define props so i’m going to destructure at this point and say the video footage should take a channel prop should take a description prop and it should take in a song right so in this case what we’re going to do is we have the at and then i’m going to basically go ahead and pop the channel in here right so it should say at whatever we passed in as a channel then here i’m going to replace rather than saying this is a description and place this with a description prop so you now you can see on the right it’s actually coming up with nothing because we’re not passing in those props and here even for the song what i’m going to say is let’s go ahead and pop in my song here so there we go so now we’re passing in those props so what we can do is what we call it what we can say is the video for here we can say channel equals let’s just say rafikaze so rafe kazi and then here we can say description is actually going to be let’s just go say um check out this dance for example check out this oh this dance yeah and then it’s gonna be um the uh song let’s just say i don’t know what the song is in this one but let’s just go ahead and say something like let’s just say sunny yeah yeah what are we working on so now we’re working on we actually put in the props so for a video for we just gave it some props so now if you see it takes a channel a description and a song right and what happens is that gets passed into the video footer here as the props and then we use them here so that’s how we can make this reusable now so every time i call video footer i can just pass in props and it renders it in the correct way cool so i just said working on displaying songs at the bottom um we just did that one now we finished that oh nice okay okay beautiful nice um so the next step is we want to so we’ve got the video sidebar uh i think yeah yes we’re on the video side by now awesome nice okay so video sidebar just to make it super clear guys is actually that sidebar with the icons on comment and share i wrote it at the top as well and it’s gonna be this one over here guys the sidebar with a heart comment and share that exactly so remember we actually gave it a little outline over here so we said like we’ve done a little comment draft so what i’m going to go ahead and do is do a video sidebar so video outside the jeff god now hey nice gift card uh are you guys working on ui or back end as well so we are we will be working on a sort of a firebase back end so keep tuned and smash the thumbs up if you’re excited for that so we’re going to create a file called video sidebar which is going to be for the sidebar component so vsibo.js and now when i’m inside of here i’m going to use rfce our lovely little extension trick boom and then we get this and now here i’m going to say a h2 and i’m just going to say i am a sidebar oh god i wasn’t doing that i’ll say i am a sidebar okay nice and then we need to basically go ahead and get rid of our little draft and we’re going to import that so video cyber i’m going to say import video sidebar from video sidebar and save and now what that will do is it will actually it should come underneath it but i don’t know if we’re going to see it okay so we’re not going to see it yet because remember the way we position things around it’s not too clear so at this point don’t lose faith guys all right you just kind of have to trust the process don’t lose faith and remember guys that respect the sidebar okay that’s what we’re gonna be building i was like i was like i did not expect that did you create that one it’s a little bit of a secret you know you guys keep going we’re going to import the the css so now it’s a video sidebar.css video sidebar.css boom and i’m going to go ahead and do a video sidebar.here so i’m going to make that file video cybercss and we should pop into it in a sec boom there we go so i’m now inside video about sidebar css so now what i’m going to do guys is i’m going to target that and i’m going to give it a special kind of positioning right so i’m going to say do position absolute so position absolute absolute and i’m going to say from the top of the screen go 50 percent down right so let’s try that out let’s say from the 50 down i’m going to go ahead and save that going to go ahead and save that and let’s see if we can actually go ahead and see that so video cyber.css so right now it says i am a sidebar you see that on the left side of the screen right um oh nice nitesh kumar just donated he said please explain course content you provide on the website crazy i think you’re muted maybe i’m muted yeah because i was talking actually for a second my bad guys so um who do who donated because i don’t see them natash kumar oh i see okay so um by the way the link is in the description we don’t want to spend too much time on this because we just want to make sure we provide you guys value and we build um you know the course the app here for you guys but the course content guys it’s going to be 15 modules that you guys have in the course on javascript training and if you watch that video that we have for you so this video if you watch it that’ll pretty much explain everything so you want to become a javascript developer here yeah so if you watch that video it’s going to explain pretty much everything that’s covered in the program so you’re building real world projects and we teach how to make an income so that’s what that is nice exactly guys link in the description go and check it out yeah awesome um so yeah you can see now that the sidebar is actually popping in on the left so it says i am a sidebar but that’s not really the right position we want to be it needs to be and so what i’m going to do is i’m going to go ahead and say that it needs to be um right so let’s go ahead and make it right so video sidebar i’m going to say right 10 pixels right so 10 pixels to uh and basically if i gave it a 0 it would snap all the way but that’s why it’s got that tiny gap so you can see it’s very faint it’s very hard to see at the moment basically give it a color of white so color of white and you should see a bit more clearer um because of this right so now we should see um it says i’m a cyborg so we’re going to basically transform that into the finished product that we had earlier so video sidebar dot js now what i’m going to go ahead and do is pop into video cyberjs nice and we’re basically going to we so there’s a bunch of icons that we need so i’m going to basically go ahead and import them all at once at the top so it saves us a bit of time so we’re going to have that at the top import favorite icon the favorite border icon so these two are variations for when we like it and when we unlike it the message icon and the share icon right so we talked about those earlier um and what we’re going to do now is i’m basically going to go ahead and pop all of those icons inside of so each icon you know is how a sort of um it had a sort of structure to it i had the icon and then it had a number which was corresponding to how many people had liked it how many people had commented how many people had shared it so this is a little trick for you guys it’s sort of a good standard to follow whenever you have that kind of situation make a div all right make a div and hopefully in this case make it like video sidebar and have underscore underscore selection so in this case it’s going to be like a selection or you can call it something else you can call it whatever you want at this point like but in this case i’m gonna say it’s a sidebar selection right so here so sidebar selection oh let’s just call it sidebar option options a bit clearer sidebar option or sidebar button there say sidebar button just go ahead and call it sidebar button right so now what we’re going to do is we have the sidebar button and we are going to basically have it so that we have the three icons uh oh that’s not cyber cyber that’s it so the first one is going to be a favorite icon so here i’m going to do favorite icon favorite icon there we go and then i’m basically each one the reason why i want it like this is because imagine we had the icon and then i’m going to have a corresponding p tag which says how many so in this case let’s have like 300 likes quick i just want to say guys thank you so much we just broke 20 000 views holy crap you guys are brilliant and i think this is also a good point to just be like guys we are what one hour 52 minutes in two hours this is where the energy starts to go down this is what’s going to make the difference between you actually retaining this information versus losing it and kind of just like like watching it’s like a derpy state so get out of that derpy said that happens right sunny it happens with you probably when you’re watching long movies there’s like this dude that happens when i’m coding even so like you do need to like kind of like sort of like flex out stand up shake off you could flex out or grit out whichever way you want yeah literally you’ve got that make sure you just get up at this point kind of just shake off like give you just wake yourself up a little bit and then kind of just carry on because we’re almost young guys so yeah this is like finished this is what i recommend go get your perrier go get your coffee if you need to and just be pumped like honestly get your state high tag us in the instagram story if you want to connect with me because like i’m chatting with you guys i’m engaging i’m even responding to ig stories if you want to do that but like just get your posture right get your mind right and let’s get back even if you’re watching this as a replay like this is just a trigger to like hey wake up wake up it’ll wake you up and then you’re ready to pay attention we’re ready to kick ass so with that said if you guys are ready let’s get back into it and in the chat below just tell us if you’re pumped and you’re ready to go and finish this app because we’re getting to the close drop that in the comments below and let’s keep it moving awesome let’s do it let’s do it so remember guys we had that that div around the icon and the p tag so what i’m going to do now is i’m going to make it life a bit simple i’m just going to paste it paste it again so now if i save it we’ll see three hot icons with 300 underneath them so awesome so they’re kind of bunched together right now but i’m going to go ahead and change those so this one’s going to be the message icon so the message icon so let’s go ahead and pop down here and this one’s going to be the share icon so share icon here nice and then what we’re going to do is change these numbers up so here i have like 230 and here i’ll have like let’s just say like 10 shares because the shares are usually less all right now as soon as i do that you can see the icons have changed but the spacing is not correct right the spacing isn’t correct so what we’re going to do is go ahead and do it as it’s a video about our side selection so now what i’m going to do is go and target that that button so that that sort of container with the button inside of it i’m gonna say give it a padding of 20 pixels so first let’s see what that does so let’s give it a padding of 20 pixels and you can see whoa look at that one simple change and it just made everything a little bit cleaner all right one simple change in it so i’ll give everything that’s how a nice finished kind of look right and then what we’re going to do is we’re going to say text text align what did i miss show me so i will show you now so what i’m going to do is i’m going to uncomment these two yeah so literally these two lines look how much of a difference they make so that’s sort of um i don’t i didn’t see anything bro you’re lying to the map i see yeah all bunched together but i gave it i basically put the number and the icon in the container and then i done that for all three and then i basically gave each one 20 pixels padding and boom nice that is clean i love the simplicity of some of these solutions because i know a lot of people including myself like i would just have so many things achieving maybe the same thing but they’re so much more likely to break because they’re just like overly like complicated so this is nice how simple this is exactly and like what i used to do when i was learning and stuff in the beginning was i used to kind of do all these views and like these different css rules and stuff and it used to kind of get a bit haywire and you’re like whoa yeah i have like 10 different rules and i really don’t know which one but i’m scared to touch anything yeah um so when you get to that stage just take your time to kind of learn the little bits and bobs like so that you kind of you only have to give one rule and it basically fixes everything you know that’s what i’d recommend so what we’re going to do now is actually go ahead and uh we finished with the styling there but we kind of want that like functionality right we want it so that when i hit that like button it basically unlikes it and it likes it etc so you guessed it we’re going to be using a piece of state so we’re going to have a piece of state and it’s going to say liked so i think steve will be happy with this one and says liked and liked to be true or false right or like has liked something like he’s going to and then you stay and then here we’re going to say like i know like in in a production app they could have liked it before but in our demo app we’re going to pretty much say that they haven’t liked it before right so when you come onto the page they’re not going to have liked it so what we’re going to do first is i’m going to go over here and i’m going to say react and let’s go ahead and do i need to import it first you stay so we have a piece we have a variable called light which is declared by the initialize with the value false so the first thing i’m going to do guys is i’m going to render this button based on if that’s true or false so what i’m going to do i’m going to say if it’s liked then show me the favor icon right otherwise okay okay hold on i think i can visually show what you’re talking about so this is important so guys see over here we got this empty heart icon and now what we’re working on is if i like this you’ll see the number go from 1207. you guys see that it went from 1207 to 1208 and also the heart icon became failed now i always thought it fills up like somebody actually fills this icon with color but sunny is actually just using a different icon which already is filled right sunny yeah yeah material icon if i go here and i type in heart you guys will see there is favorite and favorite border so basically if it is if the state is liked yeah this state over here if the state is liked then it’s gonna pull this favorite one and if the state is not like which in the start is false it is going to be this empty one so does that make sense so far guys does that help okay awesome dope so now what we’re gonna do guys is we’re going to have the favorite border icon so this is the one that’s not filled i’m going to say show that if it’s not liked right so now uh to finish things off so that’s the first step right and if we save that it should format it nicely there we go and basically what we’re going to do now is that whenever we click on either of those icons we need it to basically toggle the liked state so for this one what i’m going to say is for the first one i’m going to say uh oh nice so nitesh kumar says does the javascript course contain uh react uh like react content as well uh we have live react coaching calls with myself every tuesday so yes it does and i run you through projects like this and sunny even shows up to those live coaching calls exactly i’m there guys we can pretty much have a chat like if you get stuck in something we can go ahead and pretty much debug it on a live zoom call so it’s not just a chat it’s a zoom call so you can actually have a i can see your face we can talk we can pretty much do all of that stuff awesome so for this favorite icon what i’m going to do is i’m going to say on click right on click and i’m going to say e dash so whenever on click event it’s fine so every time i click that icon i’m going to say set liked right so in this case i’m going to say set liked to false because it they would have already liked it if you had reached this point and i’m going to go ahead and copy this and i’m basically going to do the same thing here but i’m going to say set like to true all right so now check out what we just did so in that very slick line of code uh what we can do now is if we click on the liked button so kazi let’s go ahead and click on the i love when you’re like trying to cue me in a really nice way and i just don’t get it you’re like okay guys now we’re gonna go ahead and click on the hosted engrack app and i just don’t get here okay guys now we’re gonna yeah yeah yeah just call me just be like yo kazi click on this yeah okay i got you so here we have like but remember when we like it it should say 301 in this example right so in this case what we’re going to do is we’re going to say rather than showing 300 we’re going to say if liked yeah and guys i’ll show you yes it’s not going to be fixed to 300 i’ll show you how we fix that as well if it’s liked then it’s going to be 300 plus 1 in this case else it’s going to be 300 right so this is just a demo sort of example here and let’s just do that as a sort of um let’s do that as a string here so there we go so now go ahead and try it it should work and it should say 301 and then if you unlike it’ll say 300 yeah so so basically what is switching between back and forth is if it’s 300 this is what you see and then otherwise it’s 301 got it exactly that’s that plus one right there nice so you see like that’s how we get our functionality working right now i saw a bunch of questions which were regarding like why is it 300 why is it set at that number so what we can actually do here guys and firstly also the icons of the the icons are looking kind of small right now so i’m going to go ahead and target all of them so i’m going to click on all of them and i’m going to basically i’m using a multicast right now and i’m going to say on and i’m going to say sorry font size so they accept an attribute called font size so font size i’m going to say equals large so this is something in material ui and you can pretty much do that very simply and save it and now you’ll see all the the icons will be slightly bigger which is looks much cleaner yeah right so that much cleaner uh so that’s cool and then what we’re going to do is yeah so most people said like oh hang on but how do you determine what the like shares and messages numbers are so at the moment we gave it fixed values what we could do is actually go ahead and pass it in as a prop so here what i’m going to do is i’m going to say um i’m going to say likes shares and messages like shares and messages and kazi pretty interesting question sai sarath al-uru says your choice profit with python or javascript i mean if you are starting out right now i would push you towards profit but javascript unless you’re already interested in python and you have experience and you want to go the python route then go with python but our profit with javascript program just has so much more in terms of like the coaching calls you get and the community is just so strong so you know i mean get both that’s the best get both because they’re both amazing programs we have literally the best programs when it comes to the javascript or python but if you’re gonna decide between one and you a beginner right now you’re deciding i would go with the javascript one yep exactly exactly definitely agree with that um nice so what we’re going to say now here guys is that we passed in these props as like shares messages notice we’re destructuring as well so don’t forget to do that um and then what we’re going to do is change this so where we have likes we’re going to basically pass that in here so we’re going to say likes plus one and even here i’m going to say i’ll show the likes and even here i’m going to say instead of this i’m going to say show the shares so show the shares and then here i’m going to say instead of this show the messages all right show the messengers and then what we can do is where we render this out now so where we render it so for example here what i can now do is i can say likes equals let’s just say equals one one one so i’m gonna should make this very easy to show that it’s working like this is one one one channel um so what’s it like uh messages equals two to two and uh shares equals three three three if i save that now we should see that the uh it gets updated and it says 111 323 and 222. so the reason why that is saying that is i actually set messages to 222. so i’m actually i’m using the props in the wrong place so we have the messages here so i should need this needs to be messages this needs to be shares so make sure you do check your white guys because a simple mistake to make um and then that should actually fix it and flip it so save that and we now we can see that it says yep one one one two two dope and if we click the the heart it says one one two nice okay so that’s perfect guys now what we can do is we can actually go ahead so we have that working and if we go ahead and scroll through oops we go ahead and scroll through the app so guys if you scroll through the app i will scroll through the app hey yeah nice right so everything’s working and you see like nothing gets messed up so those icons actually move with that card so they’re actually like positioned with that card which is really nice right that video component they’re positioned inside of that video component so they actually move alongside it so it kind of like looks like it’s like all stuck to that that video uh component i see it’s a really nice finishing touch right so that’s something to keep in mind um and now what we’re gonna do is we’re actually gonna go ahead and i guess i think at this point we actually are ready to whoa hold on before we i’m not going to skip over this one i don’t care daniel said daniel says daniel costa says i just got my first internship with react because of you guys thank you so much next monday love that dude dude that is amazing uh you’re welcome to jump on this show so uh if you want to reach out on on my instagram um or even just tell us what your skype username is and then frankie will actually hook you up and then you can actually jump on a video call with us i’d love to have you on the call exactly that’d be awesome dude that’d be amazing congratulations that is so amazing that is what makes us do this this that is like the number one driver yeah that’s insane i love that i love that so much uh and thank you for coming to watch it so we’re really glad they helped you but uh yeah the fact that you watched it all we really appreciate that um awesome let’s carry on guys so the next step is to actually right now we’ve got this fixed data right we’ve got this fixed data coming through so instead of doing this and we sort of render out this video video video video video stuff instead i want to pull this from a database right on a post from a database and i actually want to sort of pass in some props which then go ahead and get passed through to the video footer and to the video sidebar so what am i going gonna need i’m gonna need channel description song likes messages shares so what i need to do now is go ahead over to video and i’m gonna go ahead and pop these in right here so what i’m gonna need now is i’m gonna need the following so here video boom and let’s go ahead and get rid of this so you have url channel description song likes messages and shares and now what i’m going to do is i’m passing these through as props right so i want to basically have it so that these pull from our props so this would then become the following so it would say so we would have the video sidebar which would be this so we’re basically going to replace it with the following so it’s going to say likes equals likes messages equals messages shares equals shares like like such right so we have those and then for the footer i’m actually going to go ahead and see the same thing so it’s not going to pull from our values here but it’s going to pull from the props are passed through to it so it’s gonna say video footer and if i save now it will go ahead and format and you can see that it says channel description and song equals song so if i just drop this onto a new line to make it clear for you guys we’ve got the description we’ve got the channel there we go so you see something like that right so we’ve got that for you guys so the channel description song and then we’ve got the same for the video sidebar so now it’s pulling in from the thing so now we can see that nothing’s showing on the right because we’re not actually passing those props in so what i’m going to do to fix that is go ahead and show you guys a completed sort of one now so here if we pass in the correct prop so we had the following we had a url so a url of some kind we had a channel so in this case let’s do a channel um and let’s do raphe kazi let’s do that one and let’s go ahead and do a description and we can say like uh wow this one i think uh and then we can do a song so let’s just do uh the sunny song right and then all the sun is only okay i actually thought i was writing something there wow my brain’s going too much right and then i say likes equals one two three so we’ve got 123 likes let’s do a number instead so 123 likes we have messages let’s just say it went viral and we had like i don’t know so we have a bunch of messages on it 400 and then we have the shares so shares here is going to be let’s just say 200. so that’s cool but the url we need to grab a url so i’m going to quickly grab a url quickly so give me two secs uh a url that i would do is i’ll do cards video here so let me go ahead and copy the video address and paste it nice and now guys these props are going to get passed through the component and into those video footer and video sidebar areas so now what we should see is if i save this let’s check it out it should be reloading in a sec um because you may need to refresh is that working no wait oh wait no it’s not grab the right url let me go ahead and grab this one oops weird it’s not working huh yeah it’s not getting the correct yeah i knew i was going [Laughter] right so let me go ahead and copy it oh god my computer is like having a heart attack right now um let’s go ahead and let’s go and copy what bear with me guys copy this is insane radon just sent on 29 super chat oh and he says who clicked on dislike i can’t believe 29 dislikes this is the best coding hangouts online here you go 29 kazi sunny and the team holy crap that’s the energy we won guys that’s amazing and radon just joined the program actually yesterday as well and i was actually text uh texting him on the phone so i saw your messages i’m gonna get back to you on on some of them oh amazing that’s wicked to see dude yeah thank you guys for the love we appreciate the support i don’t know how many likes we’re at but i know we broke a thousand likes we broke 20 000 views so you guys are absolutely amazing and the chat quality is also awesome i’m in the chat so you guys will see me look this way a lot and i’m like responding to all of your guys’s chats and i’m seeing you know kirtan and fawad raj pimple ibrah like steve all of you guys and hajira thank you guys really appreciate the you guys are like dropping really valuable stuff in here and it’s helping everybody out exactly really is helping everyone out guys um and then oh nice nice gimbals i’ll see you in the course once i get my salary tomorrow hey nice thank you for the super chat hajira is like i just don’t want to sleep anymore this is grabbing all of my attention the gifs kazzy’s face and sonny’s coding hey i love that nice um it’s a sunny take it to us for the cure heart attack of your computer yeah it’s hilarious see in the course of march steve says one dollar for each dislike oh nice that’s how i i see now nice yeah awesome right so guys we passed in the props and uh i couldn’t actually for some reason i’m grabbing the other url but i’m going to use this one then fine um so you can see it’s actually rendering the correct video right so it’s got the video coming in oh i see why it’s not using it silly mistake the video guys is still using the old source so you need to go here and actually go ahead and use the url so i was doing it right the whole time but i kind of was like yeah that was correct the whole time um so now if i save this it should come up with kazi’s video hey there it is hey let’s go here so does it work are we able to play it or no yeah yeah we can play [Music] nice all works guys and that’s exactly what we want and expect so if we swipe through now it’s obviously blank because there’s no other we haven’t passed in the correct props for the other ones so with that said what we’re going to do now is go ahead and actually use the firebase that we used that we set up earlier so what we need to do is open up the uh command line so let’s open up the command line uh-huh so kazi open up the command line you got it yeah and uh let’s open up the yep zsh and we need to npm install firebase to pull in the firebase um npm install firebase there we go right and while that’s doing that what we’re going to need to do is we’re going to need to import firebase into this file so we need to go and go ahead and say import firebase from firebase and we need to go and write the following so this line okay is like sugar sha is so cool that’s my girlfriend that she’s the one right there on the left she taught me how to do that dance move nice so we have the um nicholas says i think everything yeah yeah yeah kazzy sunny and has his names as variables absolutely class i love that dude or actually here’s the funnier one i think every object oriented programming javascript book should have kazi sunny and nasa’s names because they are absolute class hey i was waiting for this where is it yeah there we go so guys this line is going to be magic for you pretty much what it’s doing is it’s using the config that we pulled in earlier and it’s initializing a firebase app instance right so basically in this one variable we have access to that firebase app and then what we do is we say make a variable called db which stands for the database and basically go into our firebase app instance and go ahead and grab firestore so go ahead and grab the file which is the database this is the database instance right so once we have that what we’re going to do is i’m going to say export so export default db and what this does is it basically is going to export the db and export the db and allow us to use basically go ahead and access the database right so with that said what i’m going to do now is just go over to firebase and this actually adds some information inside of there okay firebase got it here we go yeah so let’s go to uh firebase let’s go to the database oh i found a bug on firebase hey they need a developer to fix this oh [ __ ] all right you know they use material ui wow like guys look at this our front end is sometimes even better than theirs because even these guys got bugs yeah look at that all right what are we doing sonny what do tell me what to click on we are going to uh the database okay i got you i got you i just didn’t know what we were so database tab and then what we’re going to click on is create database yep make sure you start it that’s my test mode cool yep next and then here you want to click on done and this will go ahead and create you a database guys so it’s as simple as that uh once this is created it uses the following so it uses a like a collection document collection kind of structure now what does that mean let’s use this point of context so we’re to have a collection of posts right the tick tock posts and each one is going to have a document inside which is basically going to represent the post itself so in this case the video all right so let’s go ahead and click start collection quasi okay start collection here we go and now there’s gonna be a collection of what videos yeah we can call it videos let’s call this one videos what were you gonna call it because you sounded like you’re not gonna call it that i mean actually post is not that bad either okay well we’ll let the people decide for now i’ll just call it videos auto id and then what so now all of the fields are going to be corresponding to let’s look at the code for a sec so we basically need to add all of these into our database so let’s go ahead and show the code show the code okay yeah so show the code so you see we’ve got the url channel description song likes and one two three so let’s go ahead and add this information into the database nice all of this okay cool yes so i’ll do url and i’ll copy this url yeah yep okay and i’ll paste it guys this url we got from tick tock the video itself we went to the video go in inspect mode and then bada bing bada boom you got it channel okay so channel i’m gonna blaze through this thing rafikaze description uh uh-huh there we go okay we got song we got the sunny song why is it with the it’s with an o bro why do you put it with the u no there’s a there’s a sunny song uh with the you yeah yeah that’s how i was like because everybody misspells your name in the um in the comments all right so now we’re about to get to different types so this is going to be a number i believe we’re going to put one two three in here and then we got shares boom add field and messages i believe will also be a number so i’m going to put 400 in there copy and there you go okay hit save just click add yeah and that’s it guys so now if we uh make that full screen we can see we’ve got a collection of videos and don’t worry about don’t be scared of that unique id that’s generated randomly that’s just one video with a yes silly name yep so that’s a unique id for that one video and then we basically want to have it uh all of the uh item as in all of the data are inside about that video so these are called documents here right yep and what are these called inside yeah the documents filled okay so guys here’s the important thing right so your collection all your video collection is like just this one thing here right then every single video you pop in is just going to start stacking up in here so right now it’s one video then after this you can add like another video and that’s gonna have you know whatever another random id and then you have video three so on and so forth and inside of each of those videos it contains its own information and we’re now going to show you how we’re going to be able to access it pretty soon if you guys are pumped yeah smash that like button drop it in the comments in the live chat exactly and guys think of videos it’s just like an array it’s just an array of uh videos inside of it so that’s awesome so cardi i think as i explained this next bit and i could sort of code it through maybe if you could add another uh document so we’ve got two documents that way we can show that it’s pulling from the database okay cool go for it yeah so what we’re going to do now guys is inside of the app what we’re going to do is we’re going to make use of the uh so we need to create a piece of state which is going to basically pull from the um so pull from it it’s going to pull from the database right so in this case we’re going to can you give me one more url uh yeah let me go ahead and drop you on one now so give me one sec dude you can drop it in slack too whichever one yeah so i would do it um let me joking slack there we go got it oh nice so now what we’re gonna do guys is we are going to go ahead yeah so we need a piece of state to keep track of the videos right so i’m gonna do videos set videos and this is to be by default so you’re setting up by using a used state hook and we’re going to say an empty array right so use the empty array and then we’re going to say use state like this all right now what we’re going to do is we have the videos here so the end goal is that basically we’re going to say something like this we’re going to say videos oops videos dot map and for every single video what i’m going to do every single video what i’m going to say is give me back so for every single video give me back the following so i’m going to say render out a video but and i’m going to at this point the video we’re mapping through each video but i’m going to actually destructure at this point to make life a little bit easier i’m going to say destructure out of the video the url the channel the description the song the likes the messages and the shares so i’m just pretty much typing that out now so it should drop onto a new line so we can see yep we’ve got the url channel description songs likes uh messages and shares and then here what i’m going to do is i’m actually going to pass them in through as prop so it’s going to be something like this can say url equals url channel equals channel song equals song likes equals likes messages equals messages and descriptions the description equals description and then shares he’s gonna basically guys he’s like looping through each video and then he’s just gonna like write it out what it is exactly so it loops through all of those videos inside this array and it’s essentially going to loop through that and it’s at this point it’s empty so it’s not going to show anything but we’re going to populate this with the database uh and it’s going to be a real-time connection and the vignesh says we should definitely do a session on graphql plus apollo for react that actually would be a fun one dude let’s actually do facebook ads with graphql yeah we could do that that’d be dope yeah definitely so to prove to you guys that it’s not uh pulling from here anymore i’m gonna go ahead and delete all of our hard-coded stuff so now you can see that like if i go ahead and save this it’s actually gonna it’s gonna show anything on the screen so it’s gonna be blank right so just to prove to you guys there you go nothing is being shown it’s a blank screen of just like oh right so now we’re going to use a use effect so use effect is basically a essentially all the user effect is guys it’s really powerful and it replaces all of the life cycle hooks um inside of a class-based component because anytime you see a hook uh it replaces all the client life cycle methods in a class-based component but because we’re using hooks we’re inside of a functional component here so here’s how you write a use effect you basically have a function so like this and then you have as a second argument some dependencies so if you don’t include any dependencies here this code will fire once so it fires once when the component loads so when the component loads but never again after right but never after so it fires once but never after if you put say for example videos in here then it’s gonna fire once when the component loads and then um and whenever videos changes and whenever those changes because that’s the dependency so it’s dependent on it right so that’s something to bear in mind so now what we’re going to do here is we’re going to say db so we’re going to go ahead and get the db so i need to go ahead and import that from our firebase module so i’m going to say import the database from firebase so from our firebase notice how that i’m doing the forward slash dot to refer to the one that we have in our local um and also uh i need to i’m just going to move our firebase into our source there we go nice yep so now we say db dot collection so this is actually going to that videos collection that carsi created on firebase and then what we’re saying is get like literally take a snapshot of that at that exact moment or a live snapshot of what this sort of uh videos collection looks like get that snapshot and what do we want to do with it i want to set the videos in our state to the following so i need to set this and this is the array that we initially declared up here right so i’m going to say set that to whatever is inside of that snapshot get the documents which is all of those videos that we saw inside of firebase map through each one and for every single document go and get me the doc data right go and get me the doctor oops go and get me the doc dot data all right and what this does guys is this is actually a super powerful line uh super powerful thing right here so what this is doing is it’s setting the videos and any time this is a sort of a live listener so what it’s doing is every time it’s like just one second uh he’s like is the component did update lifecycle method is it like that yeah so a component did update is every single lifestyle method has been replaced by the use effect method nice the hook yeah right yep and i’m gonna pop open on the right hand side what you were um talking about right now sonny which is like the snapshot.docs guys i think you know one easy way to kind of see it is the snapshot.docs this will actually get you access to all of these docs right here and um here where he’s getting collection to the video collections that he’s accessing this then he goes hey get me the all the videos inside of that collection yeah and then what sunny can do is basically loop through the each document so here’s doing doc dot data and that actually so he loops through this is the first loop and then the second loop will get you the second video and by doing doc.data this part over here he can get each of those videos you know all of this all the data in it exactly and that bubbles up into an array so we have like an array of objects and then we render those array of objects uh over here where we do videos.map and we pretty much render those out like yeah look like this guys but like video one video two and then you can you can then you can do things like oh god damn it i didn’t want it to go away one second i’m gonna write that again so here it’s going to bubble into something like this you guys it’ll be like video one and video oops video two like that and then at the bottom you’ll be able to do things like video dot url oh oh yeah um and that will actually be able to pull you this guy right here map is what allows you guys to you know loop through it in an easy way which is where you’ll see this map thing but like ultimately this is how you’ll be able to like access uh access the url of each video or access the channel or whatever you want exactly exactly nice um funny when you take three shots of coffee no um so now what we’re gonna do is um i’m gonna save right so let’s get our app open on the right hand side uh because you just get the app open yep so now what i do is when i save it this is gonna go ahead map and on snapshot gets a live listener so if anything gets added to that database or anything it’s gonna go ahead and and sort of refresh and sort of go ahead and pop in the new data here not going to refresh though it’s going to dynamically sort of import it in right so as soon as i click save now watch how when it refreshes on the right side so when when our app sort of refreshes we’ll actually get that data being pulled from the database now if everything went well okay so let’s take a look i’m refreshing so whoa you’re telling me it’s pulling from the database yep yeah that’s pulling from the database now oh by the way yesterday we built youtube guys so if you you know missed out on that then make sure you go check that out on our youtube yeah when you say it like that it’s actually insane yesterday we built youtube you know today oh yeah yeah yeah yesterday we built the youtube clone bust it out in days um so here we go guys here is so let’s see so the first one says wow this works so here is the description that i see in the database here we go so boom wow this works and i see that right over here wow that works and the channel name i see rafikaze and then the sunny sunny is what’s being passed in the ticker so yeah guys what do you think of that i mean that’s pretty freaking cool right like we’re able to actually go literally to a database pull it out and it was all in real time without even refreshing good luck doing something like that that fast with postgres now because it showed the dynamic uh updates i was just gonna literally do that so what we can say is we’re live on youtube right now and let me actually go like that hit update and let’s see what happens look at that look at that that dynamic just popped in no refresh or anything guys yeah that is what is so freaking sick about firebase you guys like this is what we’re trying to get through and crash into your head like yo firebase is king look at that 400 and it just did it instantly it was so fast and now 401 and i can change this to be 320 and i can now go and click it and it’ll be three i mean come on you guys no refresh nothing all in real time two-way database thing give it up for sunny guys smash that like button yeah yeah guys if you found that cool smash the like button because that is like seriously when we first started getting that working like it’s so powerful and it’s really like it looks so simple how we did that but like just appreciate it like that’s really complicated under the hood like that’s actually something so powerful so simple and yeah and all of it happened so damn fast you guys and if we change the url of this video i’m sure we would actually get a different video in there so it is awesome now let’s see if i can scroll down oh there i actually scroll down i got another video right over here and let’s actually go to it sunny sang actually let’s make it his uh annoying uh instagram handle there we go that is nice nice guys be sure to uh if you enjoyed that make sure you actually shoot an instagram story and tag us in it and uh we love to chat with you guys we just hit 1.5 likes oh snap 1500 likes guys that is amazing love the community uh who said that tushar says i smashed and broke my mouse so guys hey what’s up rachel whoa frank says sonny’s killing it again hey rachel so nice to see you rachel is the protector of the realm you guys she’s on the clever programmer team and she’s a badass and she’s actually gonna be running one this sunday yeah that’ll be dope she’s a little nervous guys but if you guys can just drop some support for rachel and just pump her up so she’s ready to come here on sunday and crush it please do that because we want rachel guys you have no idea she’s gonna bring so much value and she’s the smartest person on the team i mean sunny looks good but she’s actually the smartest so i mean she actually she is the spices she she is just incredible wait till you guys meet her so we would be pumped to do that so excited that she’s here um but yeah guys take a look at this all of this is super fast dynamic i can actually go up it snaps right all of it is happening instantly i can click boom it starts playing i mean you guys this is fascinating yeah this is dope crazy crazy crazy stuff guys and like we see i see a lot of people who have actually watched this the whole way through which is so insane to see that like we really appreciate you guys watching this and if you’re re watching this after the lives over again like thank you for being here if you enjoyed it smash the thumbs up button it tells us a lot and it’ll help this video reach a lot more people by the way hats killer just said you wrong dudes i did the netflix clone and i got a web dev job oh nice that i love that love beautiful to hear that’s insane damn okay all right let’s keep it moving rock and rolling and we’re almost finished with this app you guys so if you’re enjoying it stick around and let’s go ahead and crush this yeah let’s do it i think we literally just finished the final part which means well now yep we actually are going to the major step right now which is the big deployment guys and you guys want to play with the app and see it for yourselves we’re going to show you guys how easy it is to use firebase hosting to actually go ahead and deploy so if you’re excited let us know in the comments now let’s guys it’s going to be awesome we’re going to show you how easy it is to actually deploy this app so i’m going to show you guys the process that we actually go through so first things you guys got to do is make sure you do firebase init yep all right once we do this it’s gonna open all this stuff up we just want to do hosting and nothing else right sunny yep just hosting hosting we’re gonna do existing project because it’s already existing hit enter for that we’re going to choose the tick tock clone and then we’re going to say build this is important because on the left hand side what it’s going to do is create a folder um right over here that’s actually going to say build so that is going to be awesome so let’s go ahead and do that i don’t see anything where was i writing there we go build all right and now make sure because all react apps are single page applications spas you want to do why don’t sleep on this you guys because no is the default so make sure to hit yes yo frank what is what is happening bro why do you do this i’m gonna cry one day on these streams so much i’m actually gonna just tic tac amazing dude popped us up so guys uh i’m pop popping this up on the screen frank just dropped 25 thank you so much and he says he has the instagram youtube and now tick tock in his react portfolio that is absolutely sick and um you know that’s some boss stuff right there frank so um you know we’re gonna get something uh what’s up i said we massively appreciate you frank and like like we said like once we’re in the l.a sort of mansion like definitely come through that’ll be insane and uh here’s the actual footage of frank you guys [Laughter] that was he didn’t know we were recording him all right guys so let’s get back all right oh [ __ ] it’s actually built the index folder is there so we go or the build folder is right there which is awesome and now we just got to do a few things guys so now it’s time for npm run build yep and what this does is it strips off all the developer stuff inside of our build so it makes it super lightweight gets rid of all the unnecessary stuff shrinks the code down so that it’s really fast um so that way when we deploy it it’s just going to be super super fast um and then once that’s done kazi what is the next step after that yep so let’s go once this is done um the next step is going to be after this is just deploy you guys we’re pretty much done we’re just waiting for this folder to build out what react is doing right now is just creating this nice little folder we’re storing i almost imagine like react as this like little guy and then when you build this build folder he has like this briefcase and that briefcase contains everything inside that build folder and that’s what’s going to get deployed onto firebase so there’s this cute little briefcase he’s a little guy and he just puts shoves everything in there and like closes and tries to cramp it because he has to compress it so everything is fast and can fit in this lean briefcase you know so you know exactly gets stripped off everything in here yeah uh i think actually at this point oh there we go there we go there he comes in so then you’ll see once it’s finished npm on build you get that stack folder and a bunch of other stuff also guys something to remember if you make any changes to your code now after you do npm run build you have to do npm run build again before you deploy because it’s not going to be the most up-to-date sort of optimized uh build inside of that briefcase that cause he was mentioning right yep and now guys we are getting ready for the final step if you are ready for the final step make sure you drop it in the comments and let us know because now it’s time to pull some boss moves and hit deploy yeah hey i love these gifts man all right let’s do it if you’re ready let us know in the comments you guys this is it there’s the moment of truth and

 

you guys will be able to play with it now

 

exactly you guys will be able to mess around with this to play around with it and just you know see our videos up and live yeah and guys it’s so fast when he does this deployment like he just clicked upload a deploy and there you go there we have it live let’s go ahead and drop that in the comments all right we’re gonna drop it in the comments but first i gotta check and make sure it runs because that could be really embarrassing that it doesn’t run oh yeah hey it is here you guys and you guys will be able to click on it watch it guys before i give this app to you first of all i want to know do you actually want it if you want it then we’ll drop it in the comments otherwise we won’t because youtube gets mad at us sometimes secondly i have to show you how to use it so make sure what you guys do when you have this app is scroll and then stop okay scroll don’t keep scrolling because otherwise you will never get to see how the snapping functionality works so scroll stop scroll stop and then you can actually click the like button right you can actually appreciate the ticker here at the bottom and all of that stuff so i’m about to drop it right now in the chat some of you guys were tech savvy you already saw the link so you’re probably in here that’s all good but guys the damn thing is deployed and now all we can do here is just drop the air horn for you guys if you guys enjoyed this guys smash the like button drop it in the comments below and let us know that you’re pumped you appreciate the effort that sunny put for you guys and hustled and let us know how you like the app yeah we love that dude we love that whenever it gives us energy steve mccarthy says another great stream guys would have been better if sonny could it video god i agree dude i did i agree with you would have been wet or what uh steve mccarty says another great stream guys would have been better [Laughter] that is hilarious all right they’re like drop drop drop we want it let’s go amazing oh nice becky g just registered for the webinar and it’s in one hour from now um hey nice make sure guys if you want to be a part of that webinar the link’s in the description if you want to join the course that links in the description too so go ahead and jump in and isaiah just actually joined profit with javascript so shout out isaiah thanks so much appreciate you hi love that thank you yeah man this is awesome thank you guys and the chat is almost at 83 dollars so thank you guys so much for that i mean holy crap that is like we always really appreciate that and somebody was like why are you guys flipping out over 25 bucks guys not 20 it’s not 25 bucks that we’re flipping over it’s almost like vote of confidence and how it’s kind of like how much you guys are enjoying it so we just love that that’s what really keeps us going you know so it’s like that vote of confidence or somebody’s like hey i got an internship and you know whether you can pay or not like it’s just we love having you guys here exactly and it really like is something else like it’s not just 25 guys like it’s really is like somebody showing us how much they believe in like what we’re teaching what we got what it’s trying to help you with and guys like it means a lot like it it means it’s like 25 means like it’s like a thousand dollars like that’s how we see that like it oh yeah everything you see that yeah literally about that number yeah like any donation that is made like it’s huge to us like and we really really like it’s like it shows us that you guys really are interesting you guys find value from it which is why we love this and why we put in the time to do that yeah seriously thank you and hajira says um don’t stop with the faces and the future streams yeah and if you guys enjoyed you know i had some gifts coming in hot for you guys so you know maybe we can show more of that in the next streams too yeah definitely but yeah says sonny would you make a video on higher order components very good point we might make like a small series i guess of like snippets videos i guess or something like that that would be kind of cool or like maybe in the next uh episode or something we can pretty much go through some app with higher order components in that’d be cool nice yeah that was becky’s favorite question becky asked that many times during the stream okay i’m glad because we just never had a great time to answer it but sometimes we queue it up for the end so sometimes just be patient with those guys we can’t cover because sometimes we’re making these tutorials in a way where if somebody’s watching the replay they can still get value and if we keep doing too many q and a’s in the middle it kills the flow for somebody who’s watching the tutorial so you know if the question is relevant to what sunny’s doing right then and there then i can pause pop it up on the screen have sunny answer it or i can answer it because if some replay person is watching it’ll still help them but if it’s too like different then we can address it later at the end yeah v han v says this is like watching a movie i love that nice yeah yeah that’s great yeah i mean we put in a lot of work so we want to improve it later by doing a lot of things like um we’re at 83 dollars right now radon asks how much left to get to 100 we’re at 83 right now so i think 17 but this is all good because you know we we don’t expect any of this but we really just appreciate you guys so anything is just really awesome i mean we’re going to be coming in here kicking ass and hauling ass for you guys regardless every day and tomorrow guys here’s an important thing we are doing car tracking with python so we did image detection face detection and everybody went crazy now we’re gonna be doing car detection with python so you know pedestrian how does it track pedestrians versus cars and all of that so that is going to be happening tomorrow july 31st friday at 10 15 a.m so go ahead guys and put that into your calendars and let me know when you are booked for that okay so if you just put your alarm on your phone or put in your calendar let me know you’re booked and i just want to shout out your name everybody who’s doing that i’m going to give you a shout out and guys while you were here like if you enjoyed that and you find value in it make sure you shoot an instagram story and tag us because that way we can start a conversation with you guys and we’d love to do that we love to sort of speak to you guys see who’s watching it’s a way of us really easily being able to talk to you guys and actually see who’s on the other side of those live streams yeah and something really funny i just saw lenny says now they can ban tick-tock um i’ve cloned mine oh yeah hey thank you dude wow thank you so much roduane i don’t even actually see it right now i think we’re getting so many freaking uh messages and things like that i see it now thank you love thank you thank you thank you thank you thank you we have hit 100 wow dude this is the third stream in a row sunny that’s crazy bro man it just makes me so freaking happy yeah it does it’s like the best like validation to that guys uh marijuana’s in the chat she said well done thank you very much you guys if you guys are wondering that was her instagram so that was my girlfriend’s uh no it’s an instagram toy uh tick tock so go check her out here’s the actual here’s actual footage of radon for giving us the 17 donation helping us hit 100. nice look at that becky g is asking how can i donate i don’t even know how you actually oh there is a money button okay i see yeah there’s yeah somebody isn’t at the bottom oh yeah yeah i actually didn’t even know until some of the people donated here i was like what there’s a button yeah yeah yeah wow legends thank you guys so guys get booked for tomorrow start setting your alarms i’ll show you guys exactly when it is so i’m in los angeles time i got my alarms going 10 8 10 am 10 15 am i’m actually gonna set some up for just a little bit earlier so we can make sure to be on time so these are actual my real alarm set for tomorrow so go ahead and uh set yours uh up for the python tracker the uh face detection or sorry the car detection that we’re gonna be doing tomorrow and show up even if you’re doing react it doesn’t matter you can learn these things and you can then bring it to the world of react and once you guys do this or put it in your calendar you guys just drop it in the comments and let me know that you are booked so i’m actually going to take a look at everybody who uh dropped that as a comment and we’re going to give you a shout out yeah thank you so much siobhan shukla for that donation thank you appreciate it okay bavarian says booked real awesome pumped to have you there yep that’s it you only have one person coming to the training tomorrow and eat mubarak you guys oh yeah remember guys oh i see i see it’s lag of um when they actually see these messages i i get it okay cool i’m gonna leave this here so if somebody’s skipping to the video and replay and seeing what we’re building it’s a tick-tock clone guys that we just built it’s

 

deployed

 

um you can pause the video and pull out the link unfortunately we’re not going to put it in description because youtube is going to ban us and uh sunny maybe you want to go and push it to github so everybody can get access to the code yeah yeah becky thank you so much is amazing uh let me actually pop that up on the screen as well becky really appreciate the hold on i can put it like this thank you so much really appreciate the five dollar donation that’s awesome yeah amazing love to see that thank you so much it says book meet says done awesome booked for tomorrow vish also has booked for the fourth time savaram says booked ednan says i’m coming momo says booked awesome book for tomorrow radon says and he says this is my specialty ai beautiful nice maybe you can even help us one day and we can bring you live and then we can actually do some python training that would be cool guys okay awesome pumped to see you guys tomorrow don’t miss out putting on your calendars 10 15 a.m los angeles time so do the math if it’s specific time so if you are in another part of the world make sure you do the math and uh show up but just remember it’s gonna be around the same time that we did today and we’re gonna be pretty much bringing this for you guys on a daily basis sunny uh when are we going to do the what’s going to be the next build that we’re going to do um i think what we got scheduled next i think spotify is next let’s do spotify next and unless somebody guys if you have ideas drop it in the chat whatever is like the most uh you guys want to talk about we can do that so there’s spotify i know people are asking for a twitter clone people are asking for a facebook clone like actual facebook build the ui so there are a few different ones but unless we see a specific one from you guys we’re gonna go with the spotify and uh where are we gonna do that is monday we can do that on monday yeah okay beautiful so let’s do that on monday you guys spotify that’s going to be 10 15 a.m so make sure you guys have your alarm clocks and everything set for that too and that’s it that’s it built the twitter clone or ticktock.com got the tick tock tone done guys another one added to the react portfolio that’s amazing yep awesome guys here is the last dj air horn for you guys and uh just like that guys you guys have crushed it thank you guys so much for you know coming in and like enjoying this with us and just being a part of it and adding in all all the seriously just all the good vibes and all those things we really appreciate you guys and with that said that’s it from me sonny you got any parting words i want to say a massive thank you as always guys for you guys watching we really appreciate you guys and we love and love and love and really cherish all of the support you guys give and history it makes it makes this job of doing it guys not a job like we enjoy this we we enjoy coming back every day and if it wasn’t for you guys we wouldn’t have the energy to do this so again like really really appreciate you guys uh and thank you for watching and again yeah if you found value from it smash the thumbs up that’s all we asked to get out to get the video out to as many people as we possibly can smash that like button and yes we’re gonna do i see a lot of in the chat you guys saying spotify so we’re gonna do spotify you guys and uh the github we’re going to post the link to the repo right after this video so literally as soon as this ends sunny and i are going to push this onto github and put the link to the code in the description with the link to the app in the description of the github and just a disclaimer this is not the real tick tock app this is a clone that we built so there love you guys that’s it and we will see you in the next video peace guys and subscribe if you haven’t already we might break 2 000 in one day 3 000 everything right we might break 3 000 oh my god we’ve never done that love you guys peace guys

Leave a Reply

Your email address will not be published. Required fields are marked *