🔴 Build a TWITTER Clone with REACT JS for Beginners

and today i'm here with your boy sunny the react god pepper react super excited for today's build hey guys papa python meets papa react and it's time that we start building some amazing things so today we're actually going to be building the twitter clone you guys i hope that you're excited this is you're going to be learning about all of these things how do you actually have a sidebar like this how do we have a feed and if you already know react you're going to start thinking in components so you'll be like oh a sidebar component maybe a feed component so all of these things we're going to be building and uh sunny and i actually have a nice slide presentation prepared for you guys thanks to alex so shout out alex thank you for this and this is what it is so let's actually start this from the start so we're gonna be building the react twitter clone now talk to me sonny are you excited about this and just walk me through this as well yeah so super excited about this guys we're gonna be covering a few things which we've done we've done so we've touched based on some of this stuff in preload but we're also going to be touching on some uh some new stuff today so some of the stuff that we're going to go through we're going to be using material ui so material ui is going to be used to cover all of the icons all of the designs getting everything looking that really nice slick uh sort of final getting that final design in place we're gonna be doing that we're gonna be showing you how to actually go ahead and get the design that they have inside of twitter so if you go ahead and go to the twitter website for a sec um just i just want to show you one thing on the twitter site so you'll notice that the the sidebar and the right so the left and the right part don't move but the middle scrolls ah yep they don't move yeah so we're gonna show you guys how to go ahead and build that and we're also gonna be showing you guys i know a lot of you guys go crazy when we introduce firebase so we're gonna do that we're gonna introduce some firebase into this and we are gonna go ahead and go ahead and make it so that when you write a message or tweet and you post it it's going to go ahead and fly through so exciting stuff for you guys today nice we got a lot of people we have uh living fate watching from south africa keep it up we got lucy she's like hey i'm ready sarin says let's rock and roll quasi karen says can't wait to learn all that beautiful now i'm gonna go back to the slides that we were sharing with you guys and um awesome we have over 400 people watching live right now so thank you guys so much for that now we're going to be covering all these technologies like firebase material ui css3 react.js and this is what you guys are going to be building okay this is the exact thing that you're guys gonna build we're gonna show you how to do this step by step now we're gonna be using material ui and flexbox for this type of stuff so material ui is gonna be used for all these icons that you guys are seeing on the left hand side for maybe even all these icons right over here and that's going to be material ui next up we're going to be using firestore so this is the firebase database so it's a real-time database and we can use it to even store things like comments so we'll show you guys how we're going to be using it uh in this project and we're going to talk a little bit about css variables in this one is that right sony yeah that's the first guys so this is the first time in one of these builds that we're going to introduce css variables so really exciting stuff and they're so powerful even when i was building today to the app today it actually does make everything so much simpler so we're going to go ahead and show you guys how to use css variables yup and if you just join right now don't worry to miss anything yet we haven't even gotten started to build we're just walking through what we're going to be covering we're going to cover animation so one library we're going to be using is the react flip move super slick you guys can see how nice it looks over here i mean wouldn't you want your app to look like this and feel like this and this provides so this is going to provide animations when we're posting tweets and it's going to give a overall really dynamic feel to the site exactly really really slick animation library guys and adds that finishing little touch whenever you're sort of building any app and that's really impressive when you show that to people when they see that animations kind of moving around so my torah says the kings of web dev tutorials strike again looking forward to another amazing build let's go let's do it now if we go over here now we're going to be using firebase to actually deploy it online meaning you can send this link out to your friend to your mom to your dad to your grandpa doesn't matter anybody and everybody will be able to go to your.com and use it so that's the thing we're going to be using firebase for exactly the greatest ever says i think this will this is going to be the best build yet this one will 100 percent be insane hey nice and we will be sharing the code with you guys in case you're wondering we'll we drop a github link in the description and you guys will be able to go ahead and check out the code once we're done yep so now we're gonna drop the yeah exactly we're gonna put the link for you guys for the entire repo but again just a quick snapshot at a glance these are all the technologies you're going to be learning and even more we're going to be using firebase for a database and hosting there's going to be a lot of design stuff and of course you're going to learn react in this twitter clone that we're going to be building and this is what you're going to build with that said i hope you guys are excited i'm excited we just broke over 500 people live and guys if you are excited about this build what should they do sunny right now all we ask guys is that you go ahead and smash that thumbs up button so you can get this video out to as many people as possible that's all we ask guys hit that thumbs up button if you haven't already yeah that actually like uh roots in being super serious about this that really helps us out a lot we spend a lot of time making this we share that with you guys every day and we spend hours and hours building this out so when you guys smash that like button it just helps send it forward it shares it with more people and that's all we're really looking for so thank you guys so much and we just got a donation from romell and he actually left a message in spanish which i think frankie will be able to actually tell us but thank you so much for the donation also sahil chaudhary just says i got my first job because of you guys that's amazing dude whoa where where did that happen just slightly above the uh the donation oh wow that is freaking amazing oh i see it yep like on my first job because of you guys that is beautiful thank you so much all right awesome so thank you guys for the donation thank you guys for liking the video and helping us spread this message subscribe to the channel if you haven't already and just i think kind of one cool news i wanted to share with you guys which is actually huge for us so just a few days ago you guys i made um our official thousandth post on instagram so that was actually a really big deal and what's special about this post is you know we have a big news and it's official we just got our team cp mansion so it's a clever programmer mansion that we got it's crazy sonny yeah i'm excited dude and i'm flying down soon as well so we'll have the entire team in la it'll be exciting stuff so this is going to be amazing because i don't think in the software development world this has ever been done where you know how like uh gaming streamers get all of their like they'll get a mansion or a place and then they all lived and work from there and you guys will see this happen even with startups as they're growing they do that they get like a big place and then they all live in their work from there so finally we're going to be doing that in the clever programmer team and it's going to be absolutely insane and around september 3rd sunny will also be here in l.a and we will all be working together so i think exactly that's super exciting um you guys can see me here running with frankie because we have we discovered there's like this water slide which is so freaking sick and you know i just wanted to share this moment and thank you guys for giving us opportunity to do this but really the one of the biggest reasons why we even got this place is so we can relentlessly produce this content at the highest level for all of you guys you know nas is going to be there working with us every single day frankie's going to be there i'm going to be there putting in the work and hopefully sunny comes down from uk as well and we're just going to put that work for you guys and just crush it exactly 100 guys but we'll get together like if you guys are enjoying it right now imagine when we all get together that'll be insane yeah all right we're gonna blow this up that would be really crazy so super excited about that thank you guys it's been a huge deal for us now living fate gave another donation he says would you ever do flutter tutorials i'm actually talking to somebody about flutter so let's talk about that and um i'm also it's just like a boot camp for esports team yeah we're also thinking about hosting events for clever programmer there so we can actually help people in person and get jobs or learn skills and do boot camps that would be cool yeah awesome with that said i think sunny let's just get straight into the build let's do it so guys uh like we said we're going to be touching base on firebase and we're going to be building a dope twitter react app so with that said the first step guys is we actually need to go ahead and use create react app so i think i have access to the terminal uh or this might be my local uh you might need to share the terminal quasi yep i will do in a second i love this comment here i'm just gonna share it on the screen and uh nashant says can you actually see that comment sunny uh actually i am i'm sharing it with you right now you're in it i can even see your cursor in my terminal uh i can't see it no okay all right here we go cool i just sent the link again it's the same oh no no i'm inside i'm inside the uh the live show i mean the terminal oh okay my bad my bad got it got it got it got it okay so let's go here terminal and i'm gonna go right click make it read and write for you so you can have access to it but yeah i just love that nishant says you guys are awesome just completed your tinder clone i'm a seasoned react developer and still learning so many things from you let's roll love that that's amazing we definitely want to have more developers on this platform too yeah also just want to say guys we see every single one of the stories that you guys post and we literally we love it like it's so cool when we do these videos and you guys actually go ahead and rebuild them go ahead and share them with everyone so on instagram just tag me in kazi do the same thing keep that going because it really does motivate us keeps us going and it's just so nice to see when you guys get involved you guys here it is like literally you guys sharing this with us so this is one student sharing yesterday's stream with us logan federally say our also shared yesterday's stream um another person shared it what they were doing diego finished his covet 19 tracker i'm actually showing uh showing them my phone screen share right now sonny yeah i see him there so i could so that that's what happened v coder shared like one of the facts from developer knowledge so you guys can share all this stuff with us like eunice just shared he was up late night learning and then we re-post this on our own instagram stories so you guys feel free to send us all of this we love to connect with all of you and then repost all of the things that you guys are actually sending us it's actually a lot of fun exactly we really love it guys i think so it allows us to have a chat with you as well so the amount of people that do jump on to sort of in the in the dms and we sort of go back and forth and i can help you guys fix problems if you're having them just guys if you do ping a question don't ask generic questions make it super direct because we get like hundreds of questions that come through so if the only way i can help is if you say like here's my problem and this is a screenshot of it then i can help you out otherwise super hard to help you guys out just want to make that sort of shout out while we're over here yep yep super helpful okay dope nice so what is what is now now that we're just diving into the actual code you guys some of the questions we're going to take on later and now we're just going to start with the build so where are we starting now sunny we're going to be doing the npx create app exactly so first step guys you want to open up a terminal and do mpx to create react app right so create react app and then you want to type in whatever the app you want to call it so in this case we're going to call it twitter dash clone you don't want to have spaces you want to do dashes instead guys so that will go ahead and actually create the entire starter template with the tool that facebook has given us create react app and basically this just gives you like a perfect starting place so yeah that would take about a few minutes to set up we need to go ahead and do what now cause so here is just a visual of what sunny just talked about and he actually posted this also on his instagram story or instagram post and this is how you can create your own react app so you guys can see it's just like a very simple three-step process and then you just have to do npm start to run it and then boom volume now you have actually created your own react app exactly so really simple guys and if you do forget the steps that we said like cause he said go over to my instagram i've got a post on there which actually shows you all the steps to get that up and running i love what the greatest ever just said he goes i want to thank you guys cuz he goes because lol i have never been in a position where i'm happily turning offers down because i know that what i have recently learned is insanely valuable the that's nice dude i love that that's huge yeah awesome so now it's installing you guys can see at the bottom and we're finishing installing this and then we're going to move into it and should we do the firebase thing right now sunny or do it later yeah let's go ahead and set up firebase right now okay cool help us out so boom let's just jump into and add the firebase okay so guys firebase is just a suite of tools by google and they pretty much allow us to do a bunch of things so in this case we're going to have a database today with firebase and we're also going to have the hosting uh managed by firebase you can you can do authentication you can do a bunch of stuff like that go ahead and check out the amazon clone if you want to check out the authentication side of things but today we're going to be using the database and the hosting so if you guys know if you guys know aws firebase is just aws but a lot easier and simpler yeah it's like the friendly aws yeah that's the simplest way to i think that should be their tagline the friendly aws that's it i think they will kill it exactly they just make it so you only have to do what you need to do like you don't have to any setup or configuration or any headache behind it all you need is a gmail account and you can pretty much get started yeah yeah in the glow says these sessions i have to admit these sessions really show why i love coding and learning to code various clones awesome nice awesome so so i'm opening this up now i'm going to create a add i'm going to add a project okay so make sure you guys do that and then in this project basically i'm going to name it so here guys i'm going to name this project because we're doing twitter clone i'm going to call it twitter clone yep i'm going to hit continue now you don't need to have analytics you can have it disabled or enabled i'm just going to enable it continue and then i'm going to connect it with some analytics account and create project yeah and this will go ahead and set up your project guys once this is done there's a few steps that we need to do to go ahead and grab a config file and now what this config is basically going to allow us to do is pretty much go ahead and connect the react app which is our front end to firebase which is going to act as our back end in this case so firebase is really nice because you don't have to do the traditional back end sort of headache and setup it just does everything super quick so now we could continue i love it js says thank you both of you i left my cab driver job to learn front end development with you you have changed my life oh my god love that's insane yeah that's amazing damn thank you really awesome right he says please share your instagram damn raja says i'm a software developer at ibm but still learned hooks and a lot of other stuff that i'm not able to do during my daily job just because of you guys damn developer at ibm that's huge so it's huge for some reason sunny i'm not showing at the bottom of the screen or i'm actually just not showing at all frankie camera died no no no it just died right now so let me actually fix this here real quick guys i saw apologize about that thank you for the donation and mutations is it a mutation nas thank you very much it's fine that's fine frankie i'm just going to use this let's go ahead cool all good all good i can answer a few questions oh and also thank you just because of you i could teach react to my teammates that's what we went ahead did we love that if you can teach it after watching our live streams then we've done a good job of teaching you like your amazing stuff there yeah really really awesome yeah oh man this it's still installing i don't know how long this thing is going to take is it doesn't take this long right yeah i know sometimes it's got a bit of a weird thing it could be like the internet because we're streaming with you guys but once it's up and running we'll get we'll get done pretty quick oh it's just shot through so it might be pretty quick i just saw a really good comment there goes you guys have been so right about hajira caitanya says you guys have been so right about pattern recognition it seems very familiar now best way to learn exactly we always talk about pattern recognition and this is basically where you keep repeating something until you notice the little patterns which kind of appear over and over again so for example by doing these live streams even if it seems like you're not taking in any information guys it will like you'll pick up you'll notice similarities and you can go ahead and check that here's the instagram you guys i'm touching it this is our instagram i'm literally oh it feels nice and soft it's like jelly oh look at that it's so good so just you know you can follow us there and uh boom there we go we are up and running now the most important thing that i always forget to do is cd into this bad boy right there we got another donation thank you so much thank you very much hey canadian 10 i think is that what it is right uh mine's a bit delayed courtney wilson he says the amount of knowledge you're sharing and helping people is awesome keep the positivity creativity and motivation you have in growing cp to endless possibilities let's go thank you so much courtney that's amazing thank you so much really appreciate it and by the way i want to just shout out to all actual developers who also have the ability to speak and have a passion for sharing hit me up on instagram uh hit sign me up on instagram too and we want to give you a voice on this platform so if you develop in flutter if you develop in java if you develop in c plus plus or you develop and react.js or whatever javascript we want to have you even come on and teach other people we want to make clever programmer the vision is to have clever programmer produce the most amount of developers on the planet than any other institution including schools exactly exactly that's our main mission guys to get as many developers up and running as we possibly can yep so thank you for that all right so now we're up and running and we've cd'ed into this so now sunny what we're gonna be doing is guys get into your twitter clone right over here and also just hit npm start and that should start your app and it should open up your localhost on the right hand side a few other things we're going to do because we kind of do them really really often so i'm just going to go ahead and do them a little bit faster now is we're going to delete some of the stuff we don't need so test app test logo and the setup test we don't need so exactly as soon as our local host starts running we're going to go ahead and delete that romel thank you for another donation really appreciate it yeah we could delete that right now actually it wouldn't break the uh the development so okay cool cool cool let's do it we're gonna go ahead and so there you guys see the at logo is spinning i just wanted them to see the spinning logo you know oh yeah we're gonna go ahead and delete that so now it'll complain because it doesn't know it doesn't know where the logo is anymore it's because we took it out so now we're just gonna go ahead and remove the logo we're gonna hit save and it's still gonna complain a little bit but we're gonna get rid of everything inside of this div okay so i'm gonna grab everything inside of this remove it and uh here instead of anything else we're just gonna replace it with this and we're gonna say hit clever programmers let's build a twitter clone of course i gotta have my rocket emojis hit save and boom it should be up and running there we go now you guys see how it's like centralized um now that's really cool but we want to take that design we want to take that away another thing you guys will see is that there's like this invisible 10 margin that's there in all react apps by default so we want to like get that get rid of that as well so now i'm going to go ahead and do a few things i'm going to go to our css file so we're going to go to app.css and um here i'm gonna just go ahead and remove everything now when i hit save you guys will see that this has you know left a line now and another thing i'm gonna do is it's going to be called we're going to follow the bem convention yeah and over here so following the bem convention this one is going to be lowercase app the class name so i'm going to hit save on that as well sunny go ahead you can take it over i feel like i feel like such a proud dad when you go through those don't let go and carry on nice awesome so with that said guys as once we've done that we've pretty much done the cleanup process and then you want to go over to index.css that's the last step um you just want to um whoa rad radwan just sent 20 us dollars he said i am on vacation this week i have to drop now guys please join kazi's program on a data science lead at a top bank but two to three hours a day you'll be ready within six months thank you that is amazing i still oh now i see it okay i'm going to share it on the screen because that's i think awesome so here it is uh radon just donated 20 thank you so much for that he says kazian team i'm on a vacation this week i have to drop now guys please join qazi's program and data science lead at top bank put two to three hours a day you will be ready within six months uh and he just joined our program profit with javascript so i'm pumped to have them and work with them there thank you so much thank you dude really appreciate that and we also just hit 700 viewers i think whoa are you serious yeah wow thank you guys that is awesome if you guys want us if you guys want the video to keep going out to more people and you're enjoying it just please hit that like button and it just keeps spreading it out to more and more people exactly right ready so yeah now you see that because you mentioned that 10 pixels sort of like or like little gap above the text right yeah to get rid of that we need to go into index.css index.css the scary place yeah no that's not the same that is this kind of scary place but the really scary place is the index.js i see yeah so now we've got the margin zero and as soon as we hit save guys you'll notice it should snap up right there we go so that's the entire cleanup process done so with that said we can actually go ahead and get started so we notice how in twitter they have pretty much three sections from the page right we have the sidebar we have the middle feed and then we have the sort of widgets on the right hand side so we can actually go ahead and show them this before we kind of jump in so if we look at the actual twitter website we'll see that you um you have a sidebar you have like the middle feed where you kind of scroll through and then you have that widgets on the right right so if we have a look now so you can see that sidebar on the left really clean and the only scrollable thing here guys is that middle feed so we're going to show you how to make it like that but this is the only scrollable thing here by the way exactly yeah keep going that's the that's the only scrollable thing and then we have the widgets on the right so what i like to do is i kind of like to sort of draft things out so let's go ahead and make that half the screen again or actually have a local host up on the right cool so boom right here there we go and what we're going to do now is we i like to use comments to sort of like mark out what we're going to do so the first three things that we're going to build or like the goal of what we're going to build is we're going to have three separate things one is going to be the sidebar that we saw just previously then we're going to have the feed so the feed is that middle uh feed with all the posts inside of it and then we have so just slow down here slow down here so i want to show you guys this okay so when he says sidebar i just want to make it clear like exactly what each of those components he's talking about so yeah uh this will never ex okay so here when you say feed it's this thing here below the top or is it the whole higher including the home yeah so we have components inside of it but we are we are actually calling this entire thing the feed so this thing is the feed so guys when we think react we think in component based terms so here this is going to be the feed okay just so it's extremely clear to you guys next up the thing that's going to be the sidebar is going to be this thing when it expands okay so we're going to be building this thing that when it expands it looks like this so this is going to be the sidebar okay yep and um then oh thank you the greatest ever just actually did another donation really appreciate that i'm gonna pop that up it's 140 czar and he says i may not have enough for the course right now because more than my monthly allowance and income but i really wanted to do this for you guys for a long time i cannot begin to thank you enough for what y'all are doing for me massively appreciate that dude we appreciate you so much thank you for being here for all these streams like we love all of you guys for being here and just contributing to the chat and like helping other developers out so thank you exactly thank you so much dude so going back to here right so you guys see the sidebar that we're going to be building and then the widgets where are the widgets so the widgets is that right section so you see where it says what's happening and then we all that stuff on the right and the search bar everything we're going to consider that as widgets cool right so it's like these extra sort of functionality so that side stuff is going to be this so this is how sunny will write out as comments like um components that he's going to be making exactly hopefully yeah and then within these components you can have other components inside of them and so forth until you have like this nice sort of finished product so with that said here's the rough layout so the first thing i think we could build is actually the sidebar because it's quite visually visual and it's easy to sort of see so let's go ahead and do that so i'm going to go ahead and create a file called sidebar.js so because if you want to build the first one and then after that we can go ahead and do it okay so i'm going to go right here to files and i'm going to hit boom new file and we're going to go sidebar dot js like that you guys and that's because it's a component components always have the first letter capital okay yeah exactly and then what we're going to use is we actually use something called es7 snippets which we use in all of our builds and it's an amazing extension which all of you guys should go ahead and install and what it allows us to do is write rfce and actually go ahead and press enter for some reason mine's not popping up right now oh no one's like rfce do i have to write this manually is it coming up for you quasi it's not coming up for me either weird huh extensions let me go to our extensions and it's installed so something weird is happening rfce okay so we might have to actually write this out so uh oh man that's a bummer i love this this is a side this is the sidebar js right yeah so the first thing you're going to have to do is import react from react so that's the first thing you do in any file so we can go ahead and do that so we say import react from react and then we're going to say function where are you where you're writing because i don't see it sidebar.js i'm in there but i didn't see that you wrote it i just wrote it in right now oh really yeah so maybe write some other stuff i want to see if we're out of sync or not yeah i think we're out of sync maybe because i just wrote function sidebar but it hasn't popped in yep don't see it right oh something yeah now i see you're writing weird okay yeah that's really gonna let's go ahead and check so function sidebar what about now okay we're good all right i think we're good cool cool for it yeah so function sidebar and then what this will do is it will return some uh jsx right so return some stuff inside of here and then we need to do x4 default and we're going to say export default sidebar right so that's going to allow us to actually use that outside of the sidebar then we're going to have a div inside of it and this is going to have the class name of sidebar so i'm going to go ahead and do that there we go and then inside of here guys we had that sidebar so let's go ahead and just draft out some of the things that we saw so we had at the top of it we had something like a twitter icon so we had a twitter icon at the top and then we had a few other things so we had a bunch of options right we had like the home button the explore button the notifications the messages bookmarks list profile all those sort of options on the side and what i'm going to do here is actually go ahead and create something like this so it's going to be a sidebar option component and then we're just gonna repeat it so we're gonna have several of them right and then at the end of it we had a buttons which said tweet so we had a button which was pretty much just had tweet on it right and that was styled in the way that we expected it to be and then what we're going to do is anytime we create a component i'm going to go ahead and do import and i'm going to import the appropriate css file so in this case import sidebar dot css i'm going to go ahead and create that file so sidebar dot css and i'm going to basically click enter and we should be in that file in just a second so now you should see yes there we go awesome so that's pretty much the uh the sidebar roughly set up to a degree so what we're going to do now is actually go ahead and code what we need to code so the first thing guys is that twitter icon the twitter icon that we see how can we actually get those icons quite simply and what we're going to be using today is material ui so what we need to do is we need to go ahead and install that into the project so posie let's run through the installation of material ui and material ui icons say that again again so now we need to install material ui ui icon yeah and what this will allow us to do guys so material ui is like a design library right it allows us to have loads of these beautiful components but as well it gives us these icon sets so you get pretty much get all the icons you even get the twitter icon uh you get nice really nice buttons you get which which have that nice ripple effect when you press it all those things come included with material ui so we're going to go ahead and uh yeah make sure you'll see this is how you guys are gonna install this by the way you guys so make sure you do material ui core this is installation and if you're using not react then this is how you're gonna install it but because we are using react this is our install now once we're inside of here make sure you guys go to icons because we're going to be using material ui for the icons okay so that twitter icon that other home icon the explorer one so i'll show you guys for example another important thing is once you're on material icons here um make sure to click where it says search the full list of these icons okay click that get inside of here and now it's going to give you the overall all the icons that are available at your disposal yeah once you're in here give it a second to pop up jesse joseph says kazi i'm so thankful for all you have been doing on your channel with your channel i've been able to completely transform my life thanks a lot once again dude that is sick thank you man thank you and the greatest ever just said this right here was such a lifesaver as well i've seen a few comments like that we're really glad that we can provide you guys with value that changes your life in that sense so amazing to see well what is the hashtag one called dude why isn't it coming up when i type in hashtag yeah they don't even have a hashtag one which kind of blew my mind uh we had to use something we had to use the search icon for that one instead but let's go ahead and type maybe type in like a home okay cool yeah so let's say i don't know so i couldn't find yeah so boom we got home right here right this is how you're going to be able to look up all your icons now once you're like hey i want to cop this i'm going to use this in my app click it boom here's your code and then you can use this and just pop it into your own app okay so it's as easy as that so that's how you're going to use material ui and make sure you also install the icons you guys so that's another important step so what you can do is copy this this is the one you need okay and now i'm going to have our command line here and basically what you want to do is npm i and then just paste it you remember guys you don't need to use dash dash save anymore ever again it automatically saves it so this is a weird thing that most people don't know about but that blew my mind when you told me that yeah most people didn't know about this i learned it and i was like yo son did you know this he's like what yeah i had no idea dude i don't think that's that same for years yeah i mean i didn't know about npmi yeah i was like how many shortcuts are these guys going to make what's going to be next ni yeah exactly i think all my zsh yeah so there you guys go this is how you can install so now you want to use those icons it's just as simple as that like little import at the top and then you're good to go with the icons okay awesome nice so with that said guys the way we use it now because we just installed all the dependencies we go ahead and we go to the import on line three and we can pretty much go ahead and pop it in there we say import twitter icon from material ui icons twitter hold up hold up we can't see you wait where were you writing oh i see it nevermind yeah we're good yeah so we pretty much go ahead and do import twitter icon from material ui icons for slash twitter and basically in order to use it it's very simple you pretty much go here you do twitter icon and then you pretty much just do four slash right and as soon as we hit save on that we actually need to actually pull this in so right now yes we have we are using the twitter icon but we don't render the sidebar anywhere so i need to go ahead and go to app.js and where we had the sidebar comment and you can see the comments actually really help you out because they sort of give you like an outline right let me go ahead and save this and then it says sidebar is not defined so in at the top we need to say import sidebar from sidebar yep and then i'm going to click save and now what we should see is it should do a hot reload and on the right it should be popping up so if we click save cyber is not defined yep i think it's just boom nice nice so that little icon is actually coming from the sidebar component because the components being rendered out and it's giving us a tour icon which is really nice so after the twitter icon it's the home icon right yeah so we have a bunch of this is where component based design comes in right we have a bunch of like options which all look the same right they all look the same they all have the same sort of hovering over functionality so rather than writing the same code all like over here when you say they all have hovering over functionality let's just visualize that so this is what he means by it guys you see how when i hover over it it turns blue so that's what we're talking about okay keep going yeah exactly that so that's um that's what we mean when we say that so in order to get that working guys what we're going to do is we're going to go ahead and create sidebar option components so i'm going to create a file called cyberoption.js and we should be popping into that file and now and you can see we're inside there now i'm going to do rfce and hopefully before you make this let me just clarify a few things okay so first thing is this thing that you're making right now this is going to be when you say sidebar options what do you mean by that right so can you uh if you open up the twitter app you'll be able to see on the sidebar so let's go ahead and make it a little bigger you should be able to see on that sidebar you've got home with an icon you've got explore with an icon notifications with nikon messages and each one guys is the exact same in terms of design the only difference here is the icon and the text but everything renders out the same right even the way we hover over it has the same effect when we do that so what we're going to do is we're going to create one component called sidebar option and then we're going to customize it with props got it and that thing is gonna do what that thing is gonna do so if i have sidebar let me just write sidebar options here and functionality wise what that's gonna add is that on hover on hover turn blue yep so turn blue will give it a nice little background color and it's going to be more of a sort of in this in this demo it's going to be just purely sort of a ui component so it's just going to be something which looks nice on the side but we're going to show you how to handle it and style it and do everything to get it looking like you see it right there got it so is it going to be using also like flexbox to add in the spacing between the icon and the text as well um yeah so actually when we when we stack up here we don't use flexbox but you see where we've got the sidebar we've got the feed and the widgets there's plenty of flexbox to get that to be achieved and is that going to be inside of sidebar options or no uh in sidebar options we we do need to actually add a flex rule but we'll cover that when we get to that bit yeah okay got it cool so sidebar options wise i mean overall it's just hovered on hover it's going to turn blue and any other functionality that i can i should list out here yeah so we're going to show you how to actually pass a component as a prop so we're used to passing things like text through props or numbers and things like that but here we're going to show you actually how you can pass an entire component as a prop as well so a lot of people didn't know you could do that i'm going to show you how to do that today okay dope yeah and that component guys that we're going to be passing through is the icon itself right so that's how we have different icons got it so right now we're going to work on the sidebar options yep so it's going to be the sidebar options okay exactly cool nice so with that said guys let's go and hop into the sidebar options right so sidebar option is going to have a class name so let's go ahead and show the code editor there we go awesome so we have div and we have a class name and here we have class name i'm going to go ahead and do sidebar option like this right because we're using the bem naming convention and inside of here what we're going to do is we like for now just to get everything sort of tested and see if it's working let's go ahead and just pass in like this is an option right just to sort of see if it's working uh so i'm going to go ahead and click save and before we do that i'm going to go ahead and create the css file for this so i'm going to say import i'm going to say sidebar option.css like this and i'm going to go ahead and create that file and say sidebar option.css awesome there we go and now guys we have this is an option and then in order to use this now so just as an example i'm going to pull it in here so here we have all of our comments the sidebar option but i'm going to go ahead and do sidebar option like this but we need to import it so i'm going to go ahead and do this i'm going to say import sidebar option from cyber option option yep like that and that will go ahead and pull it in and now if i duplicate this like four times for example and save it we should see now on the right side we should say i am an option i am an option i am not so this is an option four times perfect yep yep right so the next step is all about sort of how do we address passing through props so here so i see what you're saying with the props so basically like you can actually pass it in a prop like you can pass it in uh pass it an icon yeah so you guys exactly like how for your functions right for those of you guys who are not that familiar with react when you guys have your own functions you guys have to pass in arguments for those functions like if you have a function that adds up two numbers you need number one and number two in this case when you're doing building components in this sidebar option you can actually pass it literally an icon as an argument in the function it's kind of like that and then it'll you know show that icon you could also pass it styling and then it can actually use that styling which is kind of really it's it's a functional way of front end yeah that's a really fun thing to do exactly guys and then uh so we're gonna pass it icons and we're also gonna pass it uh text exactly and we pass it through with the prop so what we can do here is use es6 and basically break apart the object at this point and say we're going to go ahead and receive some text right so that's cause you mentioned that's one of the props and then we're going to have an icon right but remember guys if we're passing in an icon which is a component in react we need every single component has a capital letter right so we have to use a capital i right so in this case because icon will be a component we have to pass in with a capital i so in order to render that component once we pass it in so to use the text that we passed through i can go ahead and go here and i can use these curly brackets which actually allows us do you like my uh do you like my text on that those squiggly structuring don't get intimidated by those guys exactly nice so in order to actually use that properly we add the curly braces uh the squiggly brackets and then we add text all right and that will go ahead and pull that variable into our html right there so that's jsx right there and then we'll show the icon in a second but i just want to demonstrate this bit first so inside of sidebar now we can go ahead and do this we can say text equals in this case we could do text equals let's say home so text equals home uh and then the next one we could do text equals explore for example and then oops explore and then the next one we can say text equals notifications right awesome and then we can just show free for now so like this have three and if i save it here you can see it passed through we've got home explorer notifications so that's really nice right now we have different icons for these things right so let's go ahead and we can pass in an icon and the icon that we're going to use for the home is actually something called home icon so i'm going to go ahead and import this and we found this from material ui through the method that we showed you earlier so i home icon all you need to do is pass that entire component through as a prop right and i'll show you how we use it in a second and the next one for the explore what we need to do is we go ahead and grab the search icon so here i do this so search icon so i go ahead and grab it from here and the next one after this is if we do icon equals let's go ahead and do this and we say icon equals the notifications none icon so it's a bit of a strange name but for this one i need to go ahead and grab this so notifications none icon there we go awesome and then what we need to do is we're passing in the icons now but are we actually rendering it so if we go ahead and look inside the component we're not rendering it so here i need to say icon yeah and you notice how it's green which means that it's a it's a component because it has a capital letter if i did lowercase see how it's blue that's because it's not a component right if we use a capital i it knows it's a component and it also is using the component that we pass through to dynamically generate that so as soon as i hit save now we'll see something really nice we should see all the icons pop in awesome so there they are they all come through guys which is really really nice um then what we're going to do is we need to go ahead and style it because right now that's not the prettiest thing uh that we want uh so we're gonna basically go ahead and firstly i'm gonna go ahead and add the rest of the sidebar options so i've got them all over here so i'm gonna go ahead and replace this with this so i need to do a bunch of imports here to get this so there's a few more imports i'm going to go ahead and grab so let's go ahead and do that there we go and as soon as i hit save and i saw a question which says hey sonny why do we store some functions in a variable type constant others not so guys that's pretty much an es6 uh es6 way of writing a function so you could write a function like this or you could do const oops or you could do const sidebar equals an arrow function like this this exact same thing you're pretty much wearing a function that this is a more declarative way of doing it for some people uh so it's pretty much down to preference so you just need to know that that is the same thing guys one thing one thing before we continue that i do want to mention is if you guys want to actually learn all of these skills right a lot of you are here because you want to learn these skills that's number one i imagine number two is you want to learn these skills for what do you want to just learn these skills for a hobby or do you want to actually learn these skills to then get a job to then freelance to then make an income for yourself or for your family so that thing of learning the skill and then turning it into cash actually practicality if that's something that's interesting to you and you actually want to do that we have something for you guys right over here we put together a completely free training for you guys it's top three mistakes to avoid when becoming a javascript developer but if you're interested in react this is still for you and this video we basically show you exactly how do you go from skills and then eventually turning that into cash and um i go down and i lay out the path from going from your zero dollars to making your first hundred thousand dollars from coding whether you do it over the span of six months one year three years five years it doesn't matter but this gives you that full roadmap so if you wanna see this value pack training it's pretty exclusive but we are offering it for free so click the button below and you can actually register for this training you can even open up a new tab right now and go and register for this and then come back to our current training yeah guys please go and do that right now because honestly this is like a hugely jam-packed training where you're going to learn a bunch of stuff and it's completely free like i mean there's not many times that you can say there's just completely free content out there like this so go ahead and make sure you check out the description sign up to the webinar and then come back to the stream and just carry on simple yeah exactly so it's value-packed super value-packed and free all right guys let's get back to the training awesome so guys we just showed how we had the sidebar options that we pretty much went ahead and imported in and we can now see on the right hand side they all come in but they don't look great right they don't look like the finished product that we want so in this case what i'm going to go ahead and do is actually go ahead and style this so we did create a sidebar option.css file so i've gone ahead and given this a sidebar option class so before what we're going to do now is i'm going to go to sidebar option.css and i'm going to do the following i'm going to say 4 sidebar options so for that container i'm going to do display flex so display flex oops oh my rocket's firing off yeah display flex and then if i save that we should see everything will pop snap into the middle so it should snap really nicely into the middle there um there we go so it's all popped into the middle but the alignment you can't actually tell right now but the alignment's slightly off so we need to align item center and that will make sure that everything's vertically aligned perfectly so as soon as i do that you see the icons just came down a little bit right yeah really important to do that and then also we want it so that whenever you hover over them we want the cursor to change to a pointer right and the reason why we want to do that is because it's just a really nice user experience so let me so remove the pointer just so i can show this to all the people who are as dumb as me when it comes to front end so look guys ugh like when i'm over the bookmark and all this it's just weird right but if i go to actual twitter you see it turns into a pointer as soon as i hover over it and it's so simple to do that with css it's kind of crazy i mean with back end you have to program everything but here just do this now uncomment it real quick and watch what happens as soon as i'm hovering on it boom pointer pointer pointer exactly and the reason why that's so important guys is because as a user it then tells them that that's actually something they can click right without that it's very hard to know that thanks so much the yeah you were gonna just say that right thank you so much vishal for the donation really appreciate it and you guys we are at 9 600 views already it's not even been an hour yet so we're about to hit over 10 000 views thank you guys so much and if you're enjoying this right now and it's giving you value if you appreciate the hard work that sunny is putting here for you guys or the team that we put in the hard work for you guys just go ahead and give this video a thumbs up helps just take it so far out and share it with every single person so that's huge even something i wanted to show you guys here is right before this call right here's what we're doing and let me show you guys on my phone on instagram story so even right before this call right you guys can see we have to all these team meetings who actually put together all of this material for you guys and so if you guys want to appreciate that and share your appreciation with the entire team smash that like button subscribe to the channel and we're just going to keep on bringing the value for you guys yeah exactly guys like it's a huge team effort to be able to bring all of this uh value and content to you guys every single day so all we ask is again just smash the thumbs up button and that's literally job done that's all and we appreciate that massively guys because it just gets the video out to more people about 10 000 likes actually damn it's going up let's go all right let's keep going awesome so and now what we're going to do guys is we are going to have it so that we need to target those elements right so the material ui elements and now material ui actually goes ahead and adds a class of its own to those icons and what that class is is this one right here so it's material ui svg icon dash root and i found that through inspecting so what we're going to do is i'm basically saying inside of sidebar option if you find a child which is this so the icon go ahead and give it a padding of 20 pixels padding of 20 pixels and as soon as i hit save small little changes like this make all the difference guys so look as soon as i hit save now it's got immediate spacing right because it's got a really nice immediate spacing flexbox has allowed it to like uh just keep sort of central in their room hey we just hit 1 000 likes thank you guys so much exactly one zero zero zero really appreciate you guys amazing awesome love it all right so now guys what we're gonna do is we are actually gonna have uh we need to style that text a little bit so i'm going to say wherever we have a sidebar option which has a h2 tag underneath it so a direct child which is a h2 tag then i'm going to go ahead and say give it a font weight of 800 a font size of 20 pixels and a margin right of 20 pixels so if i go ahead and do this i'm going to save it and we should see the text will change it became a lot smaller right it had this nice sort of it tightened everything up really nicely yeah and now what we're going to do is i want it so that when i hover over it we get that nice hover effect right so in order to do that we say target the sidebar option container but add the hover property and now what we're going to say is whenever we hover over it this is one the background color that they use for that hover uh yeah when i hover over it now nothing is happening but it will soon be the one where when i hover over it it'll show me colors like that exactly okay so now if you hover over it go ahead and check that out you should see now that we should get over look at that that is slick boy and all of that is happening from that one line right here exactly damn what happening for that one love it and then what you notice is that like in twitter it's not like a flat square that kind of comes around it's got a border radius so it's like a nice little curvature to it so i'm going to go ahead and give that border radius of 30 pixels right then i'm going to basically say i want so now we want the text color to change right but we're going to be using the twitter blue throughout the app right so this is something new that we haven't done on a live stream before but basically we use the twitter blue throughout the entire app so rather than me remembering what the color for twitter blue is instead what i'm going to do now is i'm going to go to app.css and i'm going to go ahead and add our first global variable so i'm going to say these global variables apply anywhere inside the body and i'm going to say i'm going to go ahead and add a twitter so this is how you do it inside of css you say twitter color oops twitter color and the twitter color i have the hexadecimal color for it here so i'm going to go ahead and do this and now we have a variable called twitter color which basically resembles the color of twill so instead of remembering it i just go ahead and use this variable and i'm going to also do one for the background color of twitter which is here because we don't want to keep remembering this and i pulled this from the actual css variables are fancy now we can just use this whenever and then be good to go exactly and if i want to use the css variable in another css file like index.css how can i do that you have to import it no so there's like a kind of you it knows that because we're doing this we're applying this to the body scope so we're saying that these uh these variables exist within the entire body so right now well you can you can have it more granular but this is saying that these will exist throughout the entire body so in this case what i'm going to do is because i want them to be global right i want to be used usable for out so in this case what we can say is when we go to uh the hover over the cyber option i want the color of the text to be we say var to target the variable and i just say twitter color that's it and it will use the twitter color and that's super nice guys and what's powerful about this is that whenever we sort of do that and i kind of want to add a transition as well so before i carry on and add a little transition to say whenever the color changes give it 100 milliseconds and ease out of that transition and the reason why this is really useful guys and quite nice because if you go ahead and hover over it now check out what those small little changes did all right i'm pumped oh my god that is just so delicious i can [ __ ] eat this thing small little changes and the good thing with this guys is say for example twitter one day changed all of their color schemes that twitter was no longer blue it was green right as soon as they changed that variable right or the value of that variable where it wherever it's declared every single place where it's used will then have that new color so that's why it's really really powerful to go ahead and use css variables so if you haven't already yeah i have a so you don't need this color right anymore um background color no no that's a different one that's actually the difference so how come when i comment this out it still looks the same no so if you hover over it you see the color of the text doesn't change but if you if you add the twitter color back now so oh nice okay i see i see the difference now with that okay and then this transition makes go ahead yep steve mccarthy just said suddenly you can add a default after that for when another color in the variable isn't available i didn't know that thank you yeah i'll actually go ahead and play with that so i have i'm starting to dive a bit more into css variables so the more we kind of do these tutorials we can actually go ahead and mess around with those more nice here we are yep awesome so manish says i want to enroll to javascript program but for some reason payment page is throwing some error i can't complete the payment just send me a just send me or sonny a dm on our instagram right here and we will help you out we'll get on a call with you with that said right here transition guys if you take a look at it if i remove if i remove this transition comment it out look at that when i hover over it it looks good but it almost feels like there's something missing to make it give it that juicy feeling that like maybe you feel on twitter where it just is the slick slickness and um as soon as we add this transition in and add in that like 100 millisecond animation it just looks so nice that's awesome you guys could write it two ways you could write it as hundred milliseconds or i think 0.1 seconds as well should work yeah both the same oh yeah you can do it that way as well yeah yeah cool all right go for it awesome so you see guys very few tweaks there to make it look quite like super super slick right and now we've got a reusable component does everything we need it to do that's really really nice now what we're going to do next is we kind of want to have an active state right and the way we usually do this is we usually pass in a prop like this which is which is just active right and in this case what we're going to say is just the first one should have an active sort of uh variable whereas the other ones aren't going to be active and what we're going to do is we're going to target that and we're going to say if you're active and the way we do that we basically go ahead we add some jsx here we get rid of the normal quotes and we give back ticks because we want to do some string interpolation and here i'm going to say if you're active so if there's an active prop that has been passed through then go ahead and add the following so go ahead and add the following so i'm going to say add sidebar option so sidebar option oops upside option underscore underscore active right or in bem what you can actually go ahead and do is use bem so bem the correct way of doing this is you have a modifier so you do this you say dash dash active because we're modifying the state of sidebar option which is actually a really cool thing to show here so we go ahead save that and it's pretty fired it onto the same line and then what we can go ahead and do is go and target this so sidebar active inside of sidebar options and we can pretty much go ahead and say if you're active then we want the color of the text what are we trying to do sunny like what are we functionality was trying to achieve no coding stuff yeah so functionality wise whenever you sort of land on the home on the twitter like home screen for example by default you see the twitter ico the home icon is lit up blue because it's active ah yep it's active i see yeah so whenever you're going to different pages you want that one to have the active prop so we're showing you how to set that up as and have it by default as the home page got it okay awesome yeah because right now in our app we don't have any active props so by default home should be active exactly exactly so in this case as soon as i do that and i click save now we should see the home icon is actually becoming active because it got past the active prop so by default now that that one's going to be highlighted as blue so we already got that nice functionality everything works very slick so that's awesome the next thing we need to do inside of sidebar is we need to go to so let's go ahead and remove our command here now we need to go to the button right so we need a button here so what i'm going to go ahead and do is i'm going to use a material ui button and all the differences is it's just literally a capital b instead of a normal b material ui and then i don't know why it does this annoying issue let's go ahead and do this and then the button is just going to say tweet right tweet and i need to import it from material ui so i'm going to go ahead and do that up at the top so to import it i go ahead and paste the following so i need to go ahead and do this because i think you need to scroll a little bit to the left there we go so we've got import material important button from material ui core and then here you can see that we we have a button so for example if i save it now you'll see that a button should have popped in on the uh bottom left so if i save let's go ahead and save and show button should after it hot reloads it should say tweet on the bottom left [Music] it's quite slow sometimes when it does the hot reloading that's right there you can see there it's got tweet yeah so with that said now we want a variant which is basically a different style that is provided by uh material ui and this one's called outlined and this will change the look and feel of that button so it will now pop up with a outline looks which is a bit more flat a bit more cleaner and it's sort of what we want to go with and we're going to give it a class name because i want to style it so i'm going to give it a class name of sidebar i'm going to just call it tweet right because it's the tweet button and then i'm also it also has another property called full width and full width is built into you know where you're writing oh okay yeah as soon as you start going across like that just let me know so i can follow you because other because otherwise it doesn't show to anybody oh yeah yeah i'll definitely keep an eye on it nice so full width then you can see now the tweet button spans across right but obviously we need that button to look a lot more like it does on the actual um on the actual twitter website right so if we now go over to our sidebar.css we can target this sidebar tweet right so if i go to sidebar css and actually go ahead and target this what i can do now is i can actually go ahead and add the following so i want it to be a background i want the background color of the button to be the twitter color so i can use our variable and i need to give it uh this important tag right so it's question mark important and basically that's because we're overriding the material ui theme so basically as soon as i do that you see the tweet comes in right yeah there's a few other things we don't want a border we want the color of the text to be white and i want the font weight to be a little bold so i'm going to go ahead and add the following so these do those things exactly so as soon as i save that uh you'll see the tweet comes in now what is this for this tweet thing is it for this one you're trying to build that oh this tweet button on the sidebar yeah the two buttons okay yeah got it i'm gonna put that at the top every time you're building anything just like let me know functionality wise what we're building and then i can just have it at the top so everybody could see it yeah i think right now it's mainly just building out the sidebar yeah that's what we're doing i am focused on that yep yeah nice so let's uh continue on so we've got the fun weight of 900 and then what we're going to do is the text you saw guys by default it basically uh capitalized everything so to get rid of that you say inherit sex transform inherit and what that does is it basically inherits the value from its parent which is basically normal as opposed to what whatever material ui does uh so it gets rid of that that auto capitalization and then we're going to love what's right garden tips he says i like the community and interaction i don't understand react and i don't want to learn it but your still your interaction is just awesome and then savaram says same i also just watch for the interaction they're awesome savaram is actually a flutter developer oh nice awesome i actually want to get involved with yeah yeah and i told him to message me on instagram and he has and i said hey make savara make actual videos and send them to me of you speaking and everything just like how we do it of you building flutter apps because we can have you teaching flutter on this platform yeah that'd be so dope obviously that would be really fun awesome so now we're going to add border radius height and a margin top so it's not so close to the last value and i do save and guys a few people asking what important is and it's basically going to override material ui's uh default styles that's why we need to have that if we don't have that it doesn't material ui takes precedent and it looks the way that material ui wants it to look hey we just broke over 10 000 views we're actually at 12 000 views right now total for this stream so thank you guys really appreciate you and uh yeah let's keep on going thank you so much guys amazing stuff right so now what we're going to do also cause if you go ahead and click the tweet button notice how there's like a really nice ripple effect right so that's another big benefit hold on they can't see it so i have to hide us boom oh that looks clean look at that yeah you get this like that's by default with material ui which if you was coding that naturally i don't even know where you'd begin with coding that like so just using the library gives you some packs like that right which is awesome um nice so now what we're gonna do um is basically go ahead and create i think we're actually done at this point with the sidebar so awesome yeah we're actually done with the sidebar yep nice yeah so we're done with the sidebar so the next step is actually hold on right down to the sidebar let's go hey gotta hit him with that and now next up is what so this is good whenever we get done just yeah let us know we're done with that and then let's have a hard transition add in some poo poo poo and then let's get clear on what we're gonna be building next visually and then we'll start coating it up so what are we now gonna work on we're working on the feed and yeah we're going to actually so i'm going to create both of these components and then i'm going to basically uh handle the way that they're spaced inside of the screen and then we're going to focus on so the main thing right now is actually feed let's just focus on the feed yeah got it okay yeah so we're gonna add the feed in guys now so the feed is that nice little place where all the posts on twitter live yep beautiful awesome amana says i feel you i could hit the thumbs up a million times and he goes i'm actually going to do that buzzfeed red says amazing managing team nice community interaction yep we're going to make sure we are trying to interact with almost every single person and i am looking at all the comments so if you guys see my eyes looking this way i'm looking at your comments reading them sometimes i'll even respond to a lot of them and then bring them up albert duke but says sonny i really love your coding style it's still i'm really learning a lot thank you dude really glad that i can provide some value with that and uh yeah keep watching nice awesome let's carry on guys so we're gonna go ahead and create the feed component so eventually the goal is to basically just have it like this where we have feed and it renders out that middle section so i'm going to go ahead and create that file otherwise it's going to scream at me for not working so we're going to say feed.js and we should pop into that file now so feed.js awesome and i'm going to do rfce and it should yes we have our snippets nice and basically with the feed what i'm going to do is i'm going to actually go ahead and have so the first thing i'm going to do is i'm just going to kind of draft this out again guys so at the top of the feed we kind of have this uh we have a header right we have a header at the top of the feed and then we have a tweet box so that's basically where you can tweet something and then we have a bunch of posts right so we have like a post and then basically we have x and like however many posts are rendered out right so that's our layout for the feed so at the top of the feed just so that we can see everything's working now let's go ahead and add h2 and we're just going to say this is the home right it's the home page so i'm going to go here and i'm going to go ahead and import this so i'm going to say import [Music] import sidebar so i'm going to change it to import sorry not home feed there we go and then i'm going to go ahead and save this file so it should pop in there we go and now you can see at the bottom it says home right and this the reason why it's coming under there is because by default this container so what i mean by this container is this app container so i'm going to go ahead and get rid of the hello clever programmers message by default this i can get rid of that comment as well by default guys the app container does something called display inline which basically stacks things on top of each other which is why the feed is appearing underneath it right but if we go ahead and go to app.css and i go ahead and change this so i go to the app and i basically go ahead and do display flex what this is going to do now is it's basically going to change the rules so that sidebar feed and anything else goes into a row right so because over here sidebar is on the left and then feed is in the middle whereas our feed was at the bottom now i'm actually starting to see it in being in a row yeah so now it's in a row right so we've got the sidebar and then the feed is actually now to the right of the sidebar yes now both components are in a row right oh interesting this is a row it doesn't look like a row yeah it doesn't actually look like a row but we've actually got two children there that are in a row yeah right as opposed to in a column so with that said now what we're going to do is we're actually going to go ahead and add the following so right now because we did that we made it display flex uh i want to go ahead and also i forgot to do one thing on that sidebar um what i want to actually do is or we could do it on the feed itself actually we could say um what should i do hey we just got a donation let's go be shake with the uh one dollar or more donation thank you so much really appreciate it thank you so much dude appreciate that awesome so with sidebar yeah okay so for the sidebar i forgot to add one thing so let's go ahead and add a border um so if we go to sidebar i'm actually going to go ahead and say so right now you guys can see we made the container the app flex right which made it in a row but i want to basically do a few rules here so firstly i would just want to give the sidebar a um a border right so i'm going to go ahead and do the following so i'm going to say border right one pixel solid twitter background color so we're using this as our background color which is like a gray all right as soon as i do that you'll see that like you wanna you wanna do something with this twitter icon at the top yeah we'll start with that as well yeah okay yeah so we've got the uh the yeah yeah we didn't start that one awesome nice catch so we're gonna drop down in the comments below actually oh awesome thank you guys we got kenai all right so now we've got the um we're gonna go ahead we added a border right but basically firstly you also want to make it so that because the app container we said to it become like a flex container right so we also want to say we want the sidebar to always use up 30 of the screen so because that's like a nice equal share of the screen and that's how twitter kind of do it so if i go ahead and add flex 0.3 that says use up 30 in the screen right at this point in time it's already using up pretty much 30 so we didn't see much difference we also don't want it to shrink to a point where you can't see anything so i'm going to go ahead and add a min width of 250 pixels right which means that like don't shrink any more than 250 pixels right but we can we can go ahead and comment this out for now because we just wanted to sort of be as responsive as possible for now but that's how you do that and stop it from shrinking anymore and then i want to say i don't want it to touch the top of the screen so i want to do min a margin top of 20 pixels um marginal opportunity pixels i'm going to say give it a little bit of padding on the left and right of 20 pixels right so padding on the left let's give it 20 pixels and padding on the right 20 pixels so it just looks a bit more cleaner so padding left padding right there we go and now if i save this we actually go ahead and we have a perfect looking sort of sidebar right and i'm going to go ahead and style that tweet so we saw the twitter icon in over here so if we go to sidebar let's go ahead and open the sidebar to our icon so in order to style this guys i need to give it a class name of sidebar twitter icon so i need to go ahead and give it a class name here so sidebar twitter icon like this and for this what i need to do is i need to go ahead and do the following so i need to target so sidebar twitter icon and basically i'm going to give it the color so the color of this i want to be blue so i want to be the color of twitter so we use our nice little variable here which is always kind of handy to chuck in also we remember any um icon is actually a font right so if you guys didn't know it's actually a font in the icon so 30 pixels if we do dash important it's because um exclamation marking point is because we're going to override material ui steam if i save that we'll see that it goes blue and it also becomes bigger now to push it in line with the rest of them i'm going to add a margin left and a slight bit of margin underneath it and if we save that now it'll go perfectly in line and we can see that there we go there we have the finished product when it comes to the sidebar right so that's really nice to see for app.css jumping back now what we're going to do is we're going to make the view height 100 view height so if we go to height 100 vh you'll see that border actually will now touch the bottom so before i didn't have that it wasn't actually touching the bottom so if i go ahead and undo that you see that where that that border on the sidebar it didn't actually touch the bottom so i need to go ahead and add a height of 100 view height so a height of 100 view height and that will actually stretch that border to the bottom because it now lets the component use up the entire height of the screen okay and also you'll notice that if you go onto twitter so because you go into twitter make it full screen right so make it notice how there's actually a max width here right it's very you might not be able to tell but the screen is like it's there's got a max width so it's not stretching anymore so you see like you add some padding to the left to add some padding to the right oh it's actually adding margin whoa we got a thousand wow that is huge simba holy crap i really appreciate it he gave us a that's like 12 donation or 14 donation and he said i have so many udemy courses which are unfinished most mostly because the instructor gets boring eventually but you guys teach more interactively keep us entertained with jokes and love sonny's tricks i love that guys that just reminded me i got to bring in my freaking gifs hot nice thank you bro appreciate you thank you so much dude awesome right so and now what we're going to do is we are going to yes you see on the twitter app they have like a max width here right so they automatically add some margins as soon as it hits that max width we want the same behavior inside of our app so right now because if you go to localhost and you make our localhost full screen look what happens you see like we don't have any of that behavior right we don't have any of that behavior right now so what we need to do is we need to go to app.css and add a max width of 1300 pixels because that's what they use on twitter it's about 1300 pixels which means that once it gets to a certain size make it that 800 pixels and then how do we center it right because if you're making a max width it's going to be kind of shoved to the left so what we do is the trick to centering is you say margin left and margin right of auto so automatically sent to doing that we're also going to add a little bit of padding i think another thing that's amazing about teaching it being able to teach it to you guys live is we can get instant feedback so if there's something confusing we'll start seeing it in the chat and then instantly be able to handle it if there's something that doesn't make sense or need more explanation you can't do that if you're just recording a video we won't be able to get that feedback from you guys so that's why it's helpful when you guys drop in all those things on the side just like some person said hey your twitter icon is unfinished boom we just finished it up right away and explained it right away exactly and also really good comment uh from the grace there you go sonny if my flex goes over a combined 100 what happens and how can i check easily spent a lot of time on this today so it's actually a lot of practice is going to help you sort of get over that issue uh the more you kind of think about everything in sort of containers and abiding by flex rules you'll get better at understanding how things are positioned but remember what he's talking about here guys is for example we just set a rule here for the sidebar so if we go into sidebar we said the sidebar should take up 0.3 and then eventually for the feed we're going to say it should take up 0.4 which adds up to 70 0.7 and then we basically have 30 left to allocate to the widget that's what he's saying and that has to add up to 100 otherwise the responsiveness doesn't add up right so you need to make sure that you do that yeah you basically gotta get good at flexing so that's important i saw you lining it up i could see how it's like he's about to say something nice i like that understanding we're under our understanding is getting jacked nice so for the sidebar i'm going to basically go ahead and uncomment this out so it has to have a min width of 250 pixels now um which allows us to sort of space it a little bit more actually in this case no that's fine um if we then go ahead and make it full screen kazi let's see that max width come into play now all right let's go nice i see that little uh you did you achieve this from padding or margin so you use margin left margin right of auto so margin left boom and then margin right this is going to give padding here like this much yeah because think about what he's trying to do margin left auto is saying all right add as much margin left as you possibly can where did you add this by the way you added this right here right padding i know it in here in appdos css eyescatch okay cool yeah so then both sides are adding as much margins as they possibly can which basically naturally allows it to center oh wait let me actually see what you're talking about oh nice so you don't actually even have to define how much margin you just said hey auto it damn yep and that's like if you was to do uh if you was to comment out margin right you would then see it push over to the left yeah nice wow yeah yep that's dope okay very handy trick when it comes to sort of positioning items there's loads of tricks guys that you'll pick up like when it comes to positioning and flexbox so it really really um does um yeah really really does help you out with that so nice so with that said now we're going to carry on with the uh we're going to carry on with the we're working on feed yeah so we're going to work on the feed so here we have the feed and at the top we had this home right so it says home now this doesn't look anything like the one they have on twitter so if we go ahead and open up twitter we'll see the end goal that we're trying to achieve so because let's open up twitter yeah yep so at the top of the page we see a home right and that home is left aligned and it has this nice little square box around it right what square oh i see yeah and also notice when you scroll down notice how home sticks right so it's going to stick as well so that's going to be something we want to achieve here so okay and six right we didn't we haven't actually got that sparkling little thing on the right but we actually do achieve the exact same design i couldn't actually find an icon for that but i mean we could we could stick something in there if we want yeah somebody gave a good suggestion that said for the hashtag icon you can actually use um i like this and then just put the hashtag in there and wrap it up with icon tag oh yeah nice yeah i just wanted to provide a sort of a reusable component way so that way most people would get otherwise you could definitely do that yeah and have it uh yeah nice awesome um right yes so steve mccarthy says sunny margin zero auto does the same thing yes it does but you're also then setting a default margin of zero to the top and bottom if you don't want to do that you don't you avoid that otherwise you're making sure that it's zero on top and one got it okay awesome so and now what we're going to do is the feed so the feed we have so what i'm going to do for that header what i'm actually going to go ahead and say is give it a little div so surround it inside of a div and give that div a class name a feed header so feed header and basically go ahead and chuck this inside of that right so now we have a div with this home right so i'm going to open up the feed dot css so oh we don't actually have v.css i need to import so import feed.css i need to create that file otherwise react's gonna cry and scream so here we do field dot css and we should snap into it now there we go and what i'm gonna say here is i'm gonna say for for the feed so remember we talked about the flex adding up to uh 100 so here i'm going to say target the feed container and say flex of 0.4 0.4 right so we're only using up 70 now but it's still going to basically try and balance out so we're going to say flex of 0.4 and then we want to add a border right here so we're going to add a border right of twitter background one pixel solid which is basically going to add a sort of gray background we can't actually see that at the moment but if i was to exaggerate this to basically show you guys what i'm added there then go ahead and do the following and make it like this right then what you should be able to see is you see like like you get that red right that red sort of big block is getting added right yeah so instead of that what i'm trying to do now is basically just make it a twitter background uh of one pixel so that's why i'm added there and then what i'm going to say is the min width should be a fitting content and overflow y of squirrel and this this is important here guys so the min width is basically going to say whatever it should it must fit the content so whatever size the post is or anything that is inside of that container it has to fit that as a minimum width and then we're saying if you ever scroll like flows over so to get that scrolling function and it would say overflow y right so that's very important and we'll go over that in a sec um what that what that sort of does so now what i'm going to do is i'm actually going to go ahead and say for the header so for that top section right i'm going to target it so i'm going to say header feed header and i'm going to say firstly position should be sticky and this gives us that sticky functionality where it sticks to the top and in order to do that you all you need to do is say top zero all right yeah i think again exactly and then you need to give a background background color the z index of 100 and this is important so you can use any value you can use like two but i always do 100 so that you're just sure that it's on top z index is basically going to say no matter what show this on top right because it's got a high number and then i'm going to give it a border of one pixel solid and i'm going to use the background color so again you can see where the variables are coming into play guys like it's just very easy to declare a consistent styling or theme when you're using this and then i'm going to say give it a padding 15 pixels top and bottom 20 pixels left and right right yeah if i save that now we can actually go ahead and see um we can see that it looks it looks super small right now right you can't actually see what's going on there oh yeah and the reason why yeah the reason why that's happening is because we don't all right firstly i haven't saved it i don't think so if i go ahead and save it um okay so the reason why that's happening guys is because we haven't actually gone ahead and firstly i need to save feed.js that'd be helpful so let me save that yeah the reason why this is happening guys is because we've aligned not like 0.3 to the sidebar 0.4 to the feed and it doesn't know what to do with the rest of it so it's kind of just like figuring out it's like should i use some space or should i not so it kind of breaks our spacing so to fix that i'm going to add the final uh component here we're not going to build this component yet but i'm going to say widgets yeah and i'm going to give this spacing so that way we know that it's just going to use up that space so i'm going to create widget widgets dot js yeah oops uh so we're going to create that file we'll snap into that now rfce boom and i'm just going to add like a h2 saying this is widgets or something right so i'm just going to say widgets and just for now and then basically the bare minimum styling i'm going to do here is i'm going to create a css file so i'm going to say widgets dot css save that file japan jabras asks what does var twitter background mean that's a variable and css so that's what we talked about if you actually even rewind to the start of the video we talk about it but it's just a variable in css and you guys can actually use them now by the way guys just keep in mind if something important right like a lot of it is you're going to learn through pattern recognition so i know some of you guys are going hey this front-end stuff is really confusing with the flexbox and css you know i got this for you like if you guys are actually feeling a little bit like this which sometimes happens to me with front end that's completely okay just keep coming in keep practicing building up that pattern recognition and you are going to be just fine exactly love that uh nice so we just created the widgets component so i need to go ahead and import that so i'm going to go ahead and do import widgets oh god i'm going to import widgets from widgets there we go and that will go ahead and do that so we've got this now and if i save it what we're going to do is just as a bare minimal styling to fix that issue we were having before is i'm going to go ahead firstly give this a class name so we can target and we'll say class name equals widgets and i'm going to go to the css file for widgets so we'll just start css i'm going to target that and now it's going to use up the remainder so it's going to say 0.3 right so now we should see so if i save that file so it should use up 0.3 so if we make the uh that bigger in our kazi so if we make the our screen a little bit bigger yep now we can we should be able to see so let's go ahead and figure out why that's happening so app we've said has display flex and yes so what app js is display flex and then the feed and the widgets feed.css is 0.4 and then our feed.css is 0.4 yep and then in the widgets we've gone ahead and done flex of 0.3 and i need to save this file for it to maybe take effect right nice so now in the feed oh right okay sorry that's why yeah so remember guys we added in the feed and then min width should be fit content if i go ahead and save this now and get rid of this it should actually go ahead and use up more of that room but the reason why is basically because it hasn't got content to sort of fill it out right so this is fine for now actually it just looks like it's incorrect but it's actually okay for now um so okay so moving on so we've got the feed we've got the home awesome so i'm going to go ahead and target the h2 and i'm going to say give it a bit more of a nicer text so font size should be 20 and font weight should be 80 800 so as soon as i hit save on that we should see that save is that is that actually making a difference if i do background color let's go ahead and do background color of like red for example so background color of red uh-huh let's just see if that actually changes the text save it yep i did no i feel like there's some is there some weird caching going on yeah let me uh hard refresh so command shift r on your guys's mac is hard refresh just in case there's some caching no i don't i don't really see any caching going on here man so feed.css was saying okay okay guys this is where you have to be super cl uh careful right so i actually made a big mistake here so no wonder why i wasn't making any changes is because the div here had the class name of feed so this needs to be on the outside and this div is going to have the class name of feed header all right and if i click save yeah that's somebody actually said that in the chat earlier yeah so you see that now it all sort of makes sense and everything's good okay yep there you go nice nice awesome so that's exactly what happened there and that's why and you see there's like this nasty sort of scroll bar that's there right so if i go ahead and make this bigger so if i go ahead and do like abc and i just like spam this so we can actually get some kind of like scrolling going on so if i go ahead and save save save save so now you should see now spoilable but we see that nobody wants to see that scroll bar right it's really ugly nobody wants to see that so there's a little trick you can do and these are the lines of code that you need to add to get that trick working you go to feed dot css and basically you add this so you say feed colon colon webkit scroll bar display none and this will hide it for chrome safari and opera and then for this one we can actually go ahead and add this inside of this feed up here but we're just making it very clear for you guys so we're going to say hide it for in ie edge and firefox and you basically add these lines of code and basically what this one is as soon as i hit save now you keep the functionality of the scroll but you hide the scroll bar so now cause you can still scroll so if you scroll yep you can still scroll right but but it's just we don't have that ugly scroll bar which is kind of important right so that's very very important to get that sort of styling so let's go ahead and now we can see that and also the home stuck which is good so if i go ahead and save now we can see uh there we go so we've got a nice little point now we've got that little home at the top looking the way it needs to look so the next step guys is just go ahead and create a tweet box right so now what we're going to do is we're going to create a tweet box so we can maybe actually add that as the sort of current active activity uh kazi we can add that as the current activity so building the tweets yeah building tweets cool yes this one's gonna be building the tweet box so what we're gonna do now is here we're gonna have a tweet box and this is basically gonna be that box that you can basically tweet from right it's going to have like some message and stuff like that inside of it and then you basically has a tweet button so i'm going to go ahead and create this and it's going to freak out because we don't have a tweetbox component so i'm going to go ahead and create one tweetbox.js and we should snap into the file now and then it should say rfce boom we're inside a tweet box then as usual guys we need to import tweetbox.css so i'm going to go ahead and do the following import tweetbox.css i need to create that file so tweetbox.css so i'm going to create that file and then we actually should be all good to go so now what i'm going to do guys is remember we stick by them so we need to add the class name of a tweet box so tweet box there we go and then what we're going to have inside of here we're basically going to have the um so we're going to have a very sort of more a more simplified version as as compared to the one that you saw previously we're going to have a input field which has like what's happening and you can pretty much type a message under it's going to have like a link like a a chance for you to add an image tag and then you can basically post it and you can you can tweet that out to everyone so because we want to have the enter functionality so when you can type a message and hit enter i'm going to do form it's going to be surrounded inside of a form and i'm going to have a div so first i'm going to have a div which is called tweet box input so tweet box input like this and in here i'm going to have the following so i'm going to have tweet box input and then outside that div i'm going to have a button so button and this button is going to be very simple it's just going to have tweet right so i need to import this from material ui so i need to go up to the top and say import the avatar the button from material i and now the avatar what is the avatar so in this case we're just going to work hard coding a user here so we're going to say get an avatar and advertise basically that circle little image and here we're using one from kajabi uh which is basically which is basically uh kazi's uh the the sort of clever programmer logo right so you guys can go ahead and see this right here this actually by the way i think we're actually going through a possible change oh yeah yeah so we're actually going to be rebranding clever programmer and would love to actually get your guys insight on that too at some point and i'll share some stuff with you guys along the way in the upcoming videos yeah that'll be dumb because then uh yeah we're gonna be changing that logo but for now this is the one that you guys are kind of used to you see it all the time this logo right here guys if we go ahead and click save should i need to get rid of the spacing one sec boom boom you can add any image here guys so add one of your cells um which is just a demo example so we've got the input there and then what i'm going to go ahead and do is add an input underneath it so we've got the avatar and then an input which with the placeholder of saying what's happening right so as soon as i click save now it says tweetbox is not defined in feed because we haven't imported this so let's go ahead and import that so tweet box i need to import your box import tweet box from tweet box there we go save and now we should be able to see it comes in so now we've got a bunch of things we've got the clever programmer logo we've got what's happening and we've got a tweet but we need to make that look like the one it looks like on twitter right and we're also going to have something underneath that to make it even better so we're going to have the input field of saying what's happening and i also want to have some like another input field maybe underneath it or somewhere else which is basically just going to say like something like this so this isn't on twitter but we're going to use it as a demonstration and say enter image url right and this is going to be optional um and basically you can just put an image there and we're going to use that image to basically push on a tweet if you add that in so uh just comment down here just real quick i wanted to share this with you guys as well and let me know what you guys think about this new logo design that we're trying to come up with so that's it's this design right over here i'll try to pause it here a little bit but we're not 100 on it yet but we're working on it so if you guys think this is cool or we're heading in the right direction do let us know because i want you guys behind the process because whatever the next one is going to be is going to be pretty much permanent so uh yeah i'm super excited about it yeah nice um right so with that said oh thank you louise flores you just donated 20 dollars wow whoa thank you and didn't even say anything what a boss thank you so much damn we're guys i wanted to say a few things we're at 16 000 views right now so that is huge thank you guys so much for that and then also uh in donations we're at 77 dollars for today that is huge thank you guys so much yeah i didn't realize you were up that much no i didn't i didn't realize that either all added up so thank you guys so much hugely appreciate that yeah really really love that nice all right so we have the following right now but obviously it looks really ugly we want to make this look a lot better basically what he said louis floors what he said is uh he goes let me actually pop that up on the screen as well oh yeah and he said just finished uh boot camp and this is a great addition to my learning thank you boom beautiful awesome nice and guys if you are interested in a boot camp you've never been inside of a boot camp or like you want to get involved in something like that make sure you check out the link in the description and look at the course because it's pretty much more than a bootcamp could offer so go ahead and look at that if you're interested nice um so now what we're going to do is go ahead and style this so we added the tweetbox.css file so i'm going to go ahead and pop that over here and the tweetbox.css file and now if i go ahead and grab some code so basically let's go ahead and make this look pretty so the first thing we're going to do is target tweetbox and i'm gonna say add a padding bottom so you guys are gonna see this and i love doing it like this because you're gonna see it as we change it so 10 pixels bottom and then i'm going to add a border bottom because in in twitter they actually have a border underneath it which is really nice uh but basically i'm going to go ahead and do this so i'm going to say border bottom and then padding right of 10 pixels so if i save this you can see we've got like a little bit of a padding there nice and then i'm going to say for that form i want to do display flex and flex direction column and now what this is going to do is going to put the avatar and the input field on the same uh vertical axis so now if i go ahead and do that it should actually go ahead and it will do display flex flex direction column so now we should see oh sorry it's not going to do that i've got it mixed up um the tweet box input if i apply display flex to that we will then have the avatar and the input field on the same line what we just did before was actually setting the tweet box which was if we look at tweet box we can see it put this child and this child so the form they actually put the form um it said this so this child here so this one right here and the button it put that into a flex column structure which is why tweet is taking up the entire width right now all right and then we basically got the avatar and the input for looking nice the next step is i want the input field to take up the full width that it can so i'm going to go ahead and do that so i'm going to say target the input field flex 1 so i want it to take up more room than the avatar give it a margin left so it's not touching the avatar font size of 20 pixels and a border of none and as soon as i hit save on that boom look at that immediately like look at that change that it adds guys so like if i undo that so if i go ahead and comment that out this is what front end is all about so if i go ahead and comment out look how trashy that looks right that looks horrible doesn't look very nice as soon as i add this in it suddenly becomes real like as soon as i add that in boom like you suddenly get this nice crisp user experience right 55. awesome so now what we're going to do is we're going to target the button i'll never say fubar i you know if fooba used to confuse the crap out of me dude i used to be like what's going on oh frank frank [ __ ] it every time coming and swinging frank dude whatever i think that just pushed us over a hundred hey dude we just got 102 total thank you frank coming in hot with this 25 donation he goes these layouts keep getting better so many tutorials have an ugly front end this is exactly what a twitter clone should look like let's go dude my energy even if my energy is low and i haven't had my coffee frank comes in swinging and i'm [ __ ] at a tent this makes me happy dude he does dude he just comes in and crushes oh man i love that broke a hundred dollars thank you guys that is huge this is our fifth stream we're you guys helped us break a hundred dollars what the hell that is crazy massive appreciation guys thank you so much swinging okay right so guys the next step what we're going to do now is we're going to target that button inside the form so the tweet button right so instead of doing some complicated nesting i'm going to just go ahead and give this a class name of tweet box button so i say tweet box underscore tweet button so tweet button there you go oops straight button there we go nice and now what i'm gonna do is i'm going to basically go ahead and do this so tweet box tweet button and i need to go ahead and give the following so i want this to look like the twitter button so basically i'm going to apply all of the same styles that we did to the previous button inside of the sidebar so it's the exact same as before nothing different there guys so i'm gonna add the same things in but the only thing different is this margin left so margin left i'm adding now so imagine that the reason why i'm adding that is because we actually added a width of 80 pixels so we actually added a width of 80 pixels here so and then what i'm gonna do is uh one second i'm just going to turn off my flux because oh no it's freezing my computer okay ignore it anyway so margin left right now if i undo this it basically pushes that tweet button to the right so it looks like twitter right we have it like that awesome so there we go and now i want to add in one more field which is the that enter image url so let's go ahead and save that now and we should see enter image url right there so that's kind of ugly i mean i might actually change the look and feel of that so we might have it underneath maybe let's go ahead and do it like that and then let's go and give it a class name so and let's just style that so it looks kind of clean let's go ahead and do input and let's go ahead and give this one uh input image let's call it let's just call it image input like this right and this one is basically going to be like for the demo purposes of when we start pushing this into the database it's going to be used for that predominantly so if i go ahead and do this and now i want to basically say for this one we don't want any border so get rid of the border so i bought a none save it we should see that and we're going to say padding uh let's just give it 20 pixels of padding 20 pixels of padding there we go and then we should see boom okay nice and let's go ahead and make this very subtle actually do this 10 pixels everybody know that um this is here is the github repo for this if you guys want to actually get access to it the code i just dropped it in the comments below and i just put it in the description of the youtube video so it should be there if you guys go and check it out but this will have access to all the code you guys can actually click source and then you'll be able to see everything that sunny is building out right now so for example when we were building sidebar option boom all the code is here when we're building out the css all the code is right here you see we're using var twitter color so either way however you want to follow along whatever is the easiest for you you can go here and then if you want access to this and you guys like this make sure to click that star button and fork it and then that'll allow you to actually code into it and make changes to it and make it essentially your own exactly yeah definitely go ahead and do that guys because i know a lot of you guys might actually want to take this at your own pace so a really good way of doing that is by following us on um oh vinayak nirvani just donated five pounds thank you dude don't stop making these videos hold on let me pop it up let me pop it up first and then speak to it okay here we go go for it nice so he says don't stop making these videos please i learned lots of good things from your videos and you just make everything look so easy to develop i love that thank you thank you that is huge that's like eight eight dollars almost donation so thank you we're up to 109 dollars because of that vinayak thank you so much amazing massive nice so now we have everything kind of looking quite sweet we've got what's happening optional enter image url and then we've got a tweet button which is really nice right so we're going to do the functionality of things afterwards so we're actually going to leave the tweet box there so we've done that and then the next step is let's go ahead and create a post right so let's go ahead and create a post um a post is going to be something which is going to be a lot more sort of customizable because we actually want to repeat it have a lot more things up on the screen so for now what i'm going to go ahead and do is go ahead and uncomment this so we actually need to create a post so cozy let's change the uh current activity to creating a post yep or creating a post component are we done with the home the feed the tweet box yeah hey okay sweet guys you know what happens when we're done with that let's just check that right there let's go and uh we're now we're doing white sunny we are now creating the post component post oh okay so uh add ability to make a twitter post you just speak too much like a developer dude holy crap whoa we got bouchon coming in hot we gotta go in order so first come first serve bouchon coming in hot with 500 that's about seven dollars thank you so much and he says niche technology developer during the day and watching react at night is fun keep up the good work the best thing i liked is you never missed explain stuff even if you have explained it in previous videos i love that too because sunny even i notice when every single time we go into firebase and you explain what it is i love that yeah that's huge we really do try and emphasize that and if we do ever miss anything guys that's what we love about live streams you guys can just shout out this one go ahead and do it oh this one's a big one guys so mandova just dropped thank you so much for sharing the knowledge keep up the good work 24 25 guys amazing thank you we're at 140 dollars in chat guys that is amazing thank you so much we just broke 140 that's huge i think that's the most that's the most i've ever yeah i think that's the first wow thank you so much love that right so and now guys we're going to create the post component right so the first thing i'm going to do now is do post dot js post.js uh there we go and we should be in it and i'm do rfce there you go and now what i'm going to do is inside of here so post let's talk about post for a second right so the first thing we need to do is kind of import a css file because we're going to have to style it so let's do post.css get that out of the way and create the files for post.css there we go so now we go hold on hold on before you continue hold on hold on i still i want to know 100 what do you mean by that so what does that mean like when i click tweet it will post it yeah no so right now we're creating the post component first and then we'll be doing so what does that mean when you say post component that means this button right here no so if you go ahead and open twitter uh okay let me go ahead and open twitter boom hey jennifer shahady she's so awesome but go ahead what's up nice so you notice how all of these posts right so you see like this is a post you've got oh i got it this is the component we're building yeah we're going okay that component all right i'm just going to write that down right here post uh component so okay cool yeah so that changes what i say at the top as well so it's got it's not the ad about to make a twitter post it's actually the post component damn the greatest ever donated again he said wanted to make my donation this popped down the screen dude let me pop in on the screen just a second boom five four three two one here we go go for it sonny nice he says wanted to make my donation worth ten dollars as well and that's all i currently have i'm doing some things to make sure i can join pwa next week can't wait dude honestly the fact you donated anything oh yes we appreciate that so much seriously thank you so much being here yeah thank you so much seriously that's awesome yeah he donated multiple times that's so great but guys this is this is actually what we're building um and yeah suddenly every single time i want to keep i'll keep either asking you but i think that level of clarity is really important um yeah and we'll just visualize exactly what we're building and then we'll move forward agreed yeah definitely cool nice so now we're gonna do is go on with the bem convention so i'm gonna add the post class right here awesome and then what we're gonna do is uh so let's think about a post right a post has a bunch of different props they can receive so it has a display name so in this case let's look at the one on the right we've got paco sanchez which is the display name so display name right there we've got the username so the username is paco luis l so the username is something different to the display name we've got a verified right verified because some users are verified you get a nice little verified badge if you're verified and then we've also got things like a timestamp so in this case the timestamp is three hours it goes like here jennifer shahadi is verified so if you look at this little tick mark right here i mean i think everybody knows what that is but just to visualize but yeah exactly cool yeah we'll leave the time some now we'll do that one afterwards let's do the text oh actually let me actually let me do it like this sonny let's do it like this so i'm gonna draw a square around this and let's just put every single thing that's going to be a thing here so then we can know so okay so walk me through it we got what do we got we've got the display name so the ones that we're going to be doing for the post is display name we've got the username got it right we've got if the user is verified or not so if they have that little like for example jennifer shahady at the bottom has a little blue tick right we're gonna have a little blue badge icon if they're verified so let me display name boom and then username is this one right here exactly cool verified verified yeah and then we've got the text so the text is the message just posted with alongside the post yeah right we've also got an image now this can be a normal image or it can be a gif or a gif depending on how everyone says it i said jeff yeah and then we've got the avatar so the avatar is for example it could be like cars like the clever program logo or like anyone's their avatar so their their profile picture right that's gonna be the so here we have a few different things and what we're going to do is we're going to pass those in as props and is that it that's it yeah that's what we're going to be doing okay cool so awesome guys this is what we're going gonna be building and now if i contrast this with what sunny had on this side over here you guys will now see all of those things sunny is writing them here so you got the display name username verified badge text image avatar all that good stuff exactly for the likes the comments and those things we're just going to do the the sort of user interface behind it yeah but you can definitely go ahead and guys i recommend like when you actually go ahead and follow this tutorial out go ahead and take it a step further and implement those things implement the numbers implement the likes that way you differentiate yourself from just everyone else who's building the clone styling is amazing didn't know these streams and i cannot get enough of it beautiful i agree nice honestly that's how i used to like have this issue i i hated ben when i first heard of it and then i was like why do we need this and then now i live by it so i love this watch ashish says we want crazy frank and crazy quasi talking on the channel it would be so fun to watch their energies together frank swinging in always makes me happy by the reaction cozy and sunny give i love that yo sarin coming and swinging let's go sarin coming in hi uh with eight dollar donation he says i have finished my boot camp recently thanks for sharing your knowledge you guys are helping me polish my skills and learning new stuff at the same time oh man that makes me happy that's amazing appreciate that dude thank you this is insane i love the support they give all right people keep saying time stamp people keep crying like time are we going to put anything with the timestamp where it says 13h yeah so we could do timestamp the reason why i've left timestamp out now is because i want to focus more on getting everything else but with timestamps we can kind of go into it we can kind of you there's ways of manipulating time using moment.js and all that stuff but guys for now i just want to focus on a lot more of the value in the in this case it's going to be posting to a backend doing all that stuff and not messing too much around with timestamps we did do timestamp stuff in previous builds guys thank you this is the first time this has happened we have officially it hit over 150 or actually exactly 150 in chat revenue so thank you guys so much that's huge that's insane dude oh my god i remember do you remember because the first time we got a donation we were like yo i think we're going to hit five dollars yeah i mean i i will be i had never even hit over three dollars and since the four years of this channel so like when we got like three dollars four dollars almost fell off my chair and i feel like i'll keep falling off my chair because i every single time it's massive to me just a massive vote of confidence from people so it's huge definitely huge yeah awesome so let's carry on strong guys so we have the post right and what we're gonna do now is we're gonna actually gonna sort of separate everything into containers so like stick with me during this section because we have a few different containers that we're going to put in place and they all have a purpose michael is like bring in moment.js i know we'll think about it we'll think about it i think about it if we get if we get enough time then we can do it right yeah see us at office hours after the stream yeah nice so what we're going to do now is we actually are going to firstly create a div for the appetite this is where bem comes in big guys right so i'm going to make a div and i'm going to say post and this one is going to be a container around the avatar right and there's a reasons why we're going to do all this stuff and it'll make sense at the end so we're going to have an avatar here so an avatar so that's a little circle icon and i'm gonna use the one for clever programmer so this is the same link we used earlier so if you want to get that you can go ahead and use the link we used earlier so boom if you guys are wondering how to get this it's all in the github that we pushed so you guys have access to that imran says imran says i'm building all the clones which you guys are launching every day one day i will become a clone of sunny and quasi hey i love that i didn't see that coming yeah turn up sunny and cozy holy crap yeah all right all right so amanda is like let's hit 200. so we have we hit the save button on that so now we've got the avatar we should pop in right now we're obviously not going to see anything so what i'm going to actually go and do so we can see this visually let's open up and let's go ahead and pop a post in here right now and then let's go and import it so do this um and then that way we can actually visually see something which is always nice so save right so with that said now we should see that little avatar nice okay so the next step guys is we're going to create the body and the reason why we're doing this is because we want the avatar on the left and then everything on the right so we're in that little gap so i'm going to do here div dot post body so post body like this and basically here what we have is different sections to the body right so i'm going to have different sections inside the body so the first section i'm going to have is a header right and inside of the header we're going to have the sort of like the text to sort of uh if it said like kazi said this or something like that right so here i'm going to have div dot post header right and inside of the header i'm going to have first these i'm going to have some header text right so i'm going to say dev dot header text dev dot header oops post sorry post header text right and then inside of here i'm going to have a h3 and just for now we will be swapping out with the variables but i just want to do it so that you guys can see it so i'm going to say rafaeli said like oh in this case because and i'm going to span reason i'm spanning now is because i want to apply some styles in a sec to just this bit of text right so i'm going to say spam and then i'm going to have a verified badge icon so i'm just going to assume that he's verified in this case so i'm going to go ahead and do verify am i i don't even think i am actually let's go to twitter but i should be at some point no unfortunately i'm not but yeah yeah but put that badge icon next to me you know i've always wanted to see what that looks like yeah so now we'll have a verified batch it's not the exact same one that we're using we're using material ui's one as a sort of a as a replacement for it it's like a sort of shield verified outcome but you'll do a trick for this demo so we have this and then we'll say clever kazi there we go so boom all right and obviously after this oh damn my nan said missed man city versus real madrid for this awesome session dude if i knew that i might have missed this session so thank you for being here that's huge massive thank you guys hey buchan coming in hot oh nice with another six or seven dollar donation and what did he say sonny it says repeat the dollars made my three digit donation to single digit let's make it double d you guys are awesome loving the next gem folks no more interruptions carry on awesome love that thank you so much and we love double d's so let's keep going [Laughter] so now what we're gonna do is we're going to have another div under here i just thought so we have another number here of post this is going to be the header description subscription and here we're going to have a p tag and inside the here i'm going to put the following so i'm going to say p tag and we're just going to say i challenge you to build a twitter clone with the react so this is going to be a demo that we're going to have here um so like some dummy text right and then underneath that div we're going to have oh no you know when it starts you can't stop and then you got an image and then here i'm going to add an image it's just a funny little gif that i found earlier so i'm going to go ahead and pop this in or jeff i'm going to double line this so you guys can see that so uh boom so you guys can see that and you guys copy that but remember guys you can actually go ahead and use the the get uh github to go ahead and grab that so as soon as i do that you should and i'm following i'm following you right sunny yeah okay some of the code is running along so i'm just going to show it to you guys right here all right what do you want me to do let's have a look oh let's go nice all right damn that is nice but that is the ugliest verified badge you could but i mean you know it's yeah i know i know it's ugly we'll make it look a bit better oh [ __ ] okay as long as we can make it blue you know then then it's fine yeah yeah yeah we're gonna style it and it's gonna look really nice okay awesome nice so then so then underneath that image lucas says just wash your tinder clone yesterday amazing i made a tinder for cats with it that is awesome oh nice that is so cool awesome nice so now we're going to have a div for underneath and we're going to have a post footer right so this one be it post footer oops whoa i broke my ms for div post four there we go and inside of here i'm going to use four icons right so this is all from material ui we've got a chat bubble a repeat icon a favorite and a publish right and this is all sort of ones that look similar to the ones that we had and then i'm also adding the trait called font small site uh font size small that's built into uh material ui so it gives us the option to do that and then what i'm going to do is i'm just going to import those at the top so i'm going to go up to the top of the file and boom import those at the top so save and now we should be able to see so if we save it we should be able to see uh yeah we can see the icons have popped in at the bottom right so that's really nice to see now what we're going to do is make all of this look nice right so we've already we've added in all the sort of the the selectors and everything now we're going to basically use css to make it look exactly as we want it right so let's go ahead and go to post dot css so post.css over here and then what i'm going to do is go ahead and change okay so now so now what we're going to do one sec yo damn this is pretty sick check this out so um hussain says hey qazi after following your course especially those django courses attempted to create a interactive web app if you want to see it so i checked has a web app out dude um i actually went to it and look at this i had to log in and it's actually a clone of twitter oh nice it's fully responsive oh dope so let's actually test it oh damn oh nice that's what i'm talking about wow guys like then send us this on instagram tag me and quasi and we can see this stuff like we love to see this yo if you guys like this make sure you go ahead and like the video this is awesome i did i did your one from yesterday wrong but we just started who can like slide it in the smoothness right that would be the best oh this week's uh smoothest sliding goes to nice yeah yesterday i dropped one guys if you didn't see it go ahead and check out yesterday's video sliding it in like this bro check this out go for it i'm sharing it on the screen sliding it in like oh let's go all right let's get back the collection enough of the jokes so now what we're going to do is firstly i'm going to go ahead and target that image right so image right now is inside post body so i'm going to go ahead and do post body and i'm going to say border radius of 20 pixels so firstly you'll see it'll get like a rounded effect on that image so if we go ahead and save it it gives a rounded effect but you see it's like it's currently getting bigger than the screen right now which we don't want right so i'm going to do width of 100 so width of a 100 and that should give it a position which is going to be is going to be 100 relative of its container it should be in this case so if i go ahead and save that it should actually fit inside of its size so if we go ahead and make that smaller i'm just wondering did that no it didn't okay that's because we've got flex supplying okay no problem so we can do that so we don't actually need that in here at this point so you're going to take that out so let's go ahead and do the phone so we've made it sort of rounded in the corners but the actual container itself i want to do display flex right so display flex and then i'm going to do align items flex start so that way they all center at the top so align items um select start and then i'm going to give it a border bottom and a padding at the bottom as well so i'm going to go ahead and do that so following there we go oops my computer's getting a bit hot now so let me go ahead and save this might because i've got that gif running some reason yeah and then i've saved it i'm just going to use your screen as a reference nice yeah so there we go yeah and then i'm going to use uh as the box that is so jacked and now and for the footer what i'm going to do is you see all those icons right if i do display flex justify content space between and give it a little margin at the top that will actually go ahead and spread them out evenly so if i go ahead and do that it spreads about evenly which is really nice right and then what we're going to go ahead and do for the badge so i gave the badge um a class name of post badge so what i'm going to go ahead and do nice i see what you mean yeah it's it's over spread across evenly looks nice yes and so now you're going to make the badge blue yep so that badge i'm going to go ahead and do this so i'm going to say post badge keep an eye on that you bad boys how am i doing post badge on size of 14 pixels and a color and i'm going to use the twitter color variable to go ahead and make it the blue this one is for the boys check it out look at that your boy has been verified let's go exactly it gives a nice little finishing touch there for the header sort of the the special text and that and what i'm referring to there is where we spanned remember we added a span so i need to actually go ahead and add a uh a class name there so where we span some text of where we had the username so i actually went and added a class name here post header special and what i'm going to do there is basically wherever we have the username and that stuff i want to just want to add a bit of styling there so i'm going to go ahead and say give it a fun weight of 600 a smaller font size and give it a gray color and now we should see where it says clever kazi that should change i need to save both files now as soon as that refreshes you see cleverkaze came a bit smaller which is nice right for the header text so i'm going to target so i'm going to go into that container target the header h3 and change the font size 15 pixels with the margin bottom you should see that i've changed as we did that it made rafe kazi a bit smaller with the margin underneath it and then we're also going to go ahead and add in for the description so the header description we have a margin bottom of 10 pixels and a font size of 15 pixels so that will go ahead and change that there we go nice for the post body i'm going to give it um a flex so i'm going to say display flag a flex type of one which it knows to use up as much as it can and then i'm going to say give it a padding of 10 pixels so that's why it's also pushed the things across to the right and then for the avatar just so that it right now it's super cramped all right so i'm just going to give it 20 pixel padding so boom there we go i'm going to go ahead and give it 20 pixels of padding and there you go so now if we make that full screen there you go yep nice check that out guys so that looks clean all right see it looks designed to look a lot more like a post right so now if i go and do for the header footer margin top did i do that yeah margin top make that margin up a little more drastic so 20 pixels maybe yeah so we get a bit more spacing there it's looking clean now bro yeah so it's starting to get that nice sort of feel to it um awesome so with that said now what we're going to be doing is moving to the so imagine now guys like if i have the feed right if i go ahead and like basically add a bunch of posts now right so they're all going to be the same post because i haven't actually passed through any props yet which we'll be doing later with with the firebase stuff so now you can see because if you open up the feed so check this out so boom we've got this nice little functionality right look at that so it's really clean really really nice layout um and you can see guys like very quickly you start to see an app right you can start to see a very functional app right so what we're going to do is we're going to touch base on the functionality side of things afterwards but what we're going to do for now is actually go over to the widgets so we actually just wrapped up on the feed right so we'll be coming back to the feed afterwards to sort of handle the functionality for now what we're going to do is move over to the widget so an app.js we have the last part which is widgets right so let's go ahead and update the text so on the screen now do what are we saying working on the widgets yeah nice so dope so then now what we're going to do inside of widgets widgets is essentially that right side and what we're going to do is we're actually going to do something pretty cool here we're going to use a few different plugins to go ahead and make this look the way we want it so uh that's the thing that's the thing that on this let me go to twitter oh man my computer's starting to freeze please don't die on me okay this is all that what's happening in who to follow section yeah exactly and in this case we're going to be pulling using a special library called react twitter embed right so what i'm going to firstly do is actually go ahead and install that in the console so um let me see if i can see so in the console if you if you do command j on the console give me one second i will do it right now boom there we go yep and now what i'm going to do is mpm oh so you need to open up uh the third console oh no wait the second one it's the second one um oh yeah there we go yeah so now when the mpmi i'm basically gonna do oh i need access one sec i need to i need how do i request access for that i do live share papa it's not even right you need write access yeah i got it yeah there you go you're good mpm i and i'm going to do react twitter embed right so show the yep so there we go npm i react to it so just do uh command b so they can see it yep you got it boom nice so back to him and we're gonna install that guys and basically that's going to give us three very handy so there's a bunch of things it gives us you guys can go ahead and check out the documentation on that uh library in npm but we're going to use a twitter timeline between a share button and the twitter tweet embed just so you guys can get a sort of feel for what it does right so we're going to come to that in a sec and that's going to take a minute to just install but before we do that what i'm going to do is add the search field right so at the top what i'm going to do is add the following source a div which has the class name of widgets input so here div widgets input and then i'm going to do this like this so and then what we're going to do is have inside of that a search icon with the class name of search icon and this is going to be pulled in from material ui so it's just going to be a search icon from the icon library so i'm going to go ahead and do that there we go and then i'm going to go ahead and grab an input field which has a switch which just says a placeholder of such twitter and it has type is text and we're using react yeah we're using react twitter embed so i've popped up alexandros comment on the screen and he's showing you guys what to write to install it npm i react twitter embed nice awesome yeah and now what we're going to do is we have that in place and then i'm going to go ahead and say another one i'm going to call this one the widgets widget container because this is the one that's going to make use of all of these sort of fun quirky uh sort of that plug-in that reacts with your embed stuff so yeah it's inside and quirky embed like this one over here the kids let and then let's add a h2 which says what's happening right so we saw that was in the original one and then the first thing we're going to do guys is actually go ahead so right now what we might have to do cause is scroll to the right on the um on the local host so we can see what's happening all right and also i will put this down so you can have more view and let's go to the local host oh i see my fancy search functionality kicking in yeah what we might have to do now is make it possibly um push this on the left side and have the code on the right maybe um because it's not it's not going to show this part of the screen every time we just have the code here you can see on you i got you some yeah something like that yeah i got you i got oh snap son snap city let's go i mean i could have just scrolled it bro that would have been fine no no but now what happens is when it hot reload is going to jump back so you might actually have to make the window bigger and then sort of pop it you see i mean go into the left oh so make the window bigger i got yeah i got you here we go damn bro not only are we developers but know how to use the computer too yeah problem solvers so and then what we're going to do is i'm going to show you guys the first example which is called twitter embed right so i'm going to do this twitter embed right here and basically this is a tweet from qazi and it's basically a tweet regarding i think it was about the python it was a python post that you've done quite a while back i'm going to go ahead and save that and check this out so as soon as i do that we should actually see on the left side now see what's happening and in a second that looks right yeah i love that yeah so we get that as the first thing and the second one we're going to do this is actually a timeline feed from karzi's account so you can actually go ahead and change this with your twitter profile if you go ahead and change this the screen name and then you can also pass in options here if you want to change the styling of it so we're going to go ahead and add that one so if we save that in now that will actually show the latest tweets that are on kazi's account so there you go that's a real live stream of tweets what's happening right now so you can see it's pulling in the tweets of the bomb awesome steve is back his video call he had a meeting with his devs and now he's like the call is over the devs are happy let's get back to it nice awesome so now we are going to do um i'm going to paste in the twitter share button as well so that was kind of cool and it's just like an example of what you can do with these sort of packages this one if you click it it will take you to facebook.com for slash clever programmer and then the text says react.js is autumn via cleverkaze so now if you actually go ahead and scroll down uh because yes if you go ahead and scroll [ __ ] reaction speed can't spell reaction without react bro let's go see that twitter share button so if you scroll down on the the right side now so you see where it says what's happening on the action oh yeah yeah yeah no that looks clean you see the little tweet button at the bottom uh they can't see it so i'm gonna have to holy crap man i have to do some really weird stuff now it will be visible soon hopefully there now they should be able to see it so if you click that tweet button that will take you to twitter and you'll actually have a share post on it and it will actually attach the the the parameters that we passed in so it's really quite clever sort of plug-in damn i see it i see it and now everybody sees it too also right so that's just from that little simple like and guys this is an example of like using third-party libraries makes your life so much easier and it's something that you guys should definitely go ahead and do uh when you're coding so with that said let's go ahead and make this section really nice right so we went ahead and created a widgets.css so now i'm going to go ahead and do the following so i'm going to open up my widgets.css uh if my computer decides to breathe it's got a comment by epic zeus epic zeus is back in the house and epic zeus says i want to join profit with javascript training only thing that is keeping me away is the thought that are the training modules as interactive like these live videos what do you say sunny yeah so my advice here guys is the way i teach it or the way i sort of tell students is you should always have kind of a split right you should always have like a a sort of an area where you can go at your own pace and that's what we really built the training modules for you can take those training modules go through the fundamentals at your own pace which is really important right and then you have a third of your time with like when you for example with us and then the live clients on javascript yeah so we have those and that's where you really get pushed intensely right so really that we take you to that sort of uncomfortable stage um and then you also have like the other side where it's basically you start teaching other people so we teach you all of this in the course but that's the main purpose of to answer and to answer your question it's even more interactive because you're on a zoom call so sunny can actually see you we have you turn your video on as well sunny and nas all those calls so then you can actually speak back to us like right now there's massive engagement right we're sharing your comments imagine if you're in interface will be like hey epic zeus or whatever your real name is like did you get this thing done show me your code that's why it doesn't work this is why it's wrong this is what you can do to make you know what i mean like it's very just boom boom boom so yeah and we do like we really aggressively do call out students and we make sure everyone's progressing so something to definitely bear in mind if you're on the chance of joining nice so what we're going to do now is target and i love what vague says by the way so vivek says epic zeus is really good to be honest i've recently joined the course it motivates you to learn coding i will give five stars to the course amazing thank you so much vivek yeah glad you're enjoying it and i'll see you on the coaching call yeah yeah nice um let's go so now what we got is uh yeah so widgets input so i'm going to do display flex on the input so this should actually go ahead and i'm going to align item center give it a background color of the twitter background which is like a gray padding and here i'm going to pop it on and then you guys i'll explain it as we see it so i've done a bunch of styling some margins some border radius etc so now you'll see at the top the search has changed right but the input hey epic zeus i'm sorry bro i know you want to keep coding but i'll i'm sorry and to everybody else who's watching but this is too awesome episode says joining tomorrow let's go well as soon as you join we see it actually come through and uh we get on calls with a lot of the people who we get on a call with every single person that actually joins so if that happens we're going to give you a shout out and you're welcome to jump on the skype call with us or the live stream with us tomorrow too exactly yeah definitely do that and um yeah if you join like jump into the coaching coin tell me that tell me your your tag is fxus and i'll we'll have a chat nice um awesome leroy says if sonny was my javascripts uh in my college i would be starting react nine to five i love that thank you dude uh so i'm gonna go ahead and add so i'm gonna target the input field and i'm going to say give a border none and give the background color to be twitter background color as well so if i save this uh you'll see now that it blends in with that so all right so we get that uniform sort of look and the search icon just one shout out for everybody who wants to join profit with javascript uh this is not a marketing tactic we are the subscription plan we're probably actually gonna move away from it pretty soon so um probably in the next two weeks or less it's going to be gone and the only plan that's going to be there is going to be the one time full price and it's going to be somewhere like 500 to higher than that so just something for you to be aware of if you're curious about it you know you can get it it's still a really good deal yeah exactly like guys like like if you're paying the current price now per month it's actually going to be easier for you guys to pay that as opposed to what it's going to become in the next two weeks so definitely go ahead and if you're on the fence consider joining now and you'll keep hold of that price by the way if you join now it won't change for you if you join yeah awesome so um what we're going to do now is also go ahead and style the search icon so i'm going to go ahead and do this so boom search icon and that tends to search i can color gray and then what i'm going to do is actually target the widgets container right so that container that holds everything that we have inside of it i'm going to go ahead and do widgets container and i'm going to do the following so margin top 15 pixels left 20 pixels padding around the entire inside 20 pixels background color of this off gray so it's not the typical twitter gray otherwise i would use the variable and the border radius of 20. now check this out kazi if you open up the uh the left screen so i can just see it a bit more yeah right here you got it as soon as i hit save now look at that container where it says what's happening and boom there you go it gets a lot more of a nicer ui to it right yeah and the final thing there guys to really wrap up that widget section is to target the what's happening text so i'm going to say font size of 18 pixels front weight of 800 so it's slightly bolder and as soon as i do that there we go it's much nicer much smaller and that wraps up the widgets section so that's a really nice way to end the widget section um so this is exciting right now so we've actually got to a really cool point so we've showed you guys so let's go ahead and show them the uh the app right now because on full screen we don't need to do this weird sort of left side stuff anymore nice yeah so that's actually like so the app looks clean right now yeah damn yeah hey guys if you like how this app is looking and you like the app then go ahead and like the video that would be awesome thank you guys smash that thumbs up guys if you're still here as well amazing how many views are we on right now uh we are at right now oh snap doodle we just broke 20 000 views let's go i was wondering i was like yeah sure we must have cracked it by now yeah and uh we got the greatest ever saying it's amazing how long one can code when they have such amazing interfaces my apps are looking incredible and lol today i worked on them for eight plus hours again and still had great fun which was shocking do you know what i love that so much because the fact we're helping people motivate for like eight hours coding sprees is so nice to hear like really really cool to hear that so i love that i feel like and just us sitting here coding for like four hours or six hours straight i think it's also like developing that muscle in a lot of people who are watching that it's okay like look we're here doing it you can be doing it for six to ten hours a day no problem because i think that's actually one of the biggest advantages i feel like i had in coding i could just sit there for 15 hours a day so it doesn't matter even if i'm like dumb and it takes me six hours just to even get started but by the time that i get started between six hours and the 15 hour mark i just fly yeah exactly definitely and i think you're right like it does it helps build that confidence with a lot of people when it comes to those longer hour sessions because we're doing it right here in front of you guys um so we're not just saying that we code for 10 hours we're literally doing it here with you guys david says please what's the duration of the entire profit javascript program guys it's uh the the training material that should last you three months okay and so three months of training is gonna get you where you need to go and you're gonna start being able to earn an income if you put in the work after the three months the program will still continue for you because we're gonna be giving you the live coaching calls ongoing for the whole year yeah exactly so guys like yeah the live the once you're done with the material the training is ongoing so you have those coaching calls available every single week to really keep track of your skills and keep like progressing and another really important thing you guys this is going to be huge we're super excited for it but the channel right now is at 692 000 subscribers because of you guys so thank you so much and our growth has never been more than now ever before and if you guys look our subs are actually going crazy so we were at 2k 1k and then over the last few days since we've been streaming like the growth has been amazing and you guys are just coming in with your full support and i think today we're already at 4k this just hasn't updated yet but nice help us get to the 5k a day mark we really want to grow this channel and make sure it's in front of as many people as possible so they can become better developers get job promotion so you can then you know quit out of your current like uber maybe and actually get a job as a full stack react developer or a javascript developer whatever it may be but help subscribe to the channel so it keeps going out in front of more people exactly massive like guys when we hit 650 we we were like over the moon and like the the growth from 650 to nearly 700 is insane so like yeah i'm gonna keep it going yeah i think at this rate i mean i feel like it might be two days away right or one and a half day away from hitting 700k subs which is like what the hell it's just yeah i think literally yeah within two days i think we'll hit that yeah amazing yeah all right thank you guys so guys we just created the sort of front end and but now remember i said we're gonna go back to that functionality on the posts right and we're gonna get the to the juicy stuff right now so if you guys are excited for firebase and seeing how we use firebase smash the thumbs up button if you already haven't already and let me know in the comment section so let's kind of pump the energy back up because we're about to show you guys some really cool stuff with firebase right now hey are you guys ready and are we done with the are we we're done with the widgets right yeah we are done got the little thing going and now what are we working on sunny so now we are working on actually getting um the database uh or deployment now we're actually gonna get the database and we're basically gonna be so yeah setting up five uh setting up the database yeah all right so add real time database with firebase beautiful we got that at the top let's get rocking and rolling so i'm in my twitter clone and what's next i gotta hit if you guys haven't done this step yet guys make sure you go to firebase.com go to the console and then create a new app we just called it twitter clone now once we're in here we're going to hit this web button and i'm going to go twitter clone also set up firebase hosting bada bam bamba boom register app so um you guys are amazing i'm going to buy your course beautiful would love to see you inside the program love to see you inside dude all right here we go next uh make sure you guys are installed just joined actually really yeah somebody just i just got um something come through it might be delayed but uh may come through in a sec what's the name uh let me see it doesn't tell me yeah it doesn't tell me it just got an email that pinged through so we should get it while we're on the stream the name damn nice okay all right we're just waiting for them to make their username you know and then as soon as their username it'll send us yeah all right firebase wait what happened next next cool guys make sure you use this and install firebase tools we're not gonna do this command because we already have it installed and then just the three commands are going to be useful later on and now i'm going to continue to console now what are we doing sonny are we going to uh project settings yes project settings and we need to grab the config cool so we got a web app at the top and i'm going to go ahead and grab this config and now i'm going to put this on this side guys go here bada bam bada boom create is firebase.js okay firebase.js and pop in all your config stuff right in here and then what's next sunny exactly so that's the next step guys and then what we're going to do is open up the terminal and what we need to do now is actually pull in firebase into the into our project so we do mpmi firebase oh my bad my bad bro my bad hold on that's not gonna work yep i got overzealous that's right i'm typing it in mpmi firebase there oh god damn it oops that's not going to work either let me go ahead let me do it ctrl z there we go mpm i firebase there we go um so once we do that guys uh it's going to pull in all of this stuff so while while that's actually loading we can actually go ahead and carry on um so let's go and find that firebase file that kazi created awesome and what we're going to do is we're going to import firebase from firebase at the top of that file so i'm going to go to the top i'm going to say import firebase from firebase and then underneath what i'm going to say is basically this is very powerful guys we've done this in the previous tutorials as well but just to show you guys how easy it is to connect everything together because you're going to scroll down a little bit so we can see the um yeah right there there's actually we can do come on j we can actually close the um let's do it yeah boom so firebase app firebase initialize app and firebase config so that's the firebase config right there boom now this is pretty much our like portable database okay we're just gonna put in our pocket and then any other file that we go to app.js or anything else we can actually just use this firebase app so we can just use that database variable and then we'll have access to it boom right there so that db yeah we're just carrying in our pocket this how i think of it and then boom you use it anywhere else yeah exactly oh frank joined frank vermouth nice hey frank ramos just joined i don't know if it's our frank but it doesn't matter whoever it is it's our frank now because they're in profit they're one of us exactly welcome to the team dude awesome hey frank thomas yeah yes right so we have the widget container oh yeah sorry i'm looking at yeah so here guys we've got the db right so we initialize the app and basically what we did there is we basically connected firebase to the backend so very very simple stuff uh very very simple because of firebase right and then exporting it allows us to basically go into any file and pull the database in right so that's what we're going to basically go ahead thank you so much ritik for the donation and also daniel cortez for a four dollar donation that is beautiful we are at 161 it is our frank hey let's go nice that's what i'm talking about man frank just goes just join profit with javascript yo frank just coming in swinging non-stop i love it that is that energy we need can't wait to see you in the coaching course dude yeah that is awesome nice right so now we have access to the db right so it's literally as simple as that guys right to access the db so now we need to go back to firebase and we need to go ahead and set up the database classy okay beautiful um yeah so i'm going to go ahead what do you mean okay all right i got you don't worry don't worry i'm just looking at chat messages all right because the greatest ever just goes frank i'm going to be joining you soon buddy so that's pretty awesome all right so now guys make sure you click database on the left hand side here here cloud firestore real-time updates powerful queries and automatic scaling just hit create database right there make sure you start in test mode hit next leave that default hit done yeah wait for it and then as soon as this is done we can actually start using a real-time database and you guys will see how easy that thing is that thing is freaking sick yeah unkit sharma best channel for react nice we love that dude awesome right so what we're going to do now guys is i'm just going to go ahead and we need here is the line 14. he says can you show us line 14 can't see it here it is okay i'm showing it a lot so you guys can just pause it rewind dj with it but it's there nice awesome so what you do now uh-huh go for it yeah so before we actually mess around with the database anymore we need to do a little bit of refactoring so we actually had the post right the post was using like the display name username verified text image avatar right but we hard-coded those values so cause you just go ahead and pop open the code uh pop okay so these are hard-coded right this is what you're talking about yes yes and we wanna be pulling it from our own database yeah we wanna do that but first we need to actually be able to pass through the props right so we need to show let's show the code for a sec so we have the post right so uh you need to follow me i think yep right there there we go so now guys we see we've got the display name user all this stuff as props right and what we're going to do now is inside of our feed you see we're just rendering out at the same post every time right now what we want to do instead is i can remove these comments we'll do instead now is i want to go ahead and pass through the props so you can see we've got a bunch of props here so in this case let's go ahead and say display name so display name equals in this case let's do uh sunny sanger and then let's do username oops username equals let's just do my instagram so sssanga uh and then let's just do verified so i don't even have a verification but let's just call myself verified text in this case to say let's just say yo it's working so let me go ahead and drop this it's easy to see so what is this verified verified is equal to verified is that what that is no that if you do a boolean basically that got it that's true yeah so here we can say yo it's working right and then uh i'm gonna basically have uh for the avatar what i'm gonna do is just keep the same type of program i want so i'm going to say avatar let's just do avatar equals the cover program one and then i'm going to say for the image we're going to go ahead and use the one that we used before so that gif so image equals that same gif that we used before right so it's going to be that i choose you gif that one okay so awesome now here we basically pass in a bunch of props but inside of our post we need to actually change our code so that it uses them right so now what we can do is we for the source here rather than actually hard coding this value we can actually go here and do the following we can say this should be the avatar right yeah then we can say instead of rafae kazi here i'm going to say display name uh-huh instead of clever quasi i'm going to say at username yep oh instead of text here i'm going to say at text and then the image so you can see guys now we're just feeding through the props right so it's very simple we're just feeding through the props um and also for the verified i'm going to do is i'm going to add a condition now so i'm going to say if you're verified only then do we show it so i'm going to say if you're verified so if uh so verified and and that's how we do it that's how we say if you're verified then show the verified badge otherwise don't know so now we're using all of our props and now if i go ahead [Music] if i remove these old posts now we should see now if i save it and i save the post.js i need to save both post.js and feed.js and we should see like sunnysanga yo it's working nice oh i see beautiful beautiful beautiful where is that coming from so that's coming through uh the props now so you see like it says got it that's coming through the props okay i see but not the database yet okay got it not the database yeah right so now what we want is we basically that was the first step right refactor it so we can pass in props now instead of passing these values in here i want to basically have it so that it pulls from the database and it doesn't just pull one post it could pull like 50 100 whatever it does and it just renders them out right so we're going to show you just how simple that is to do that right now guys so get ready um for what i'll show you so next place we need a piece of state right to keep track of the post so what we're going to do is we're going to use state so inside of um this is how we write variables inside of react so here i'm going to say sunny one i'm going to take on one question i think it's uh helpful for more advanced developers who are watching this channel so daniel soliado says hey i have one more question would i be able to integrate payment to a website with just react and without backend code or would i need to use something like node.js cloud functions so if you guys want to add integrate payments and things like that you will need backend code you will need server side functionality but instead of using node.js what which is something that is super amazing that you can do is use firebase's cloud functions so you just use google cloud functions and that will make they'll give you the full pure back-end functionality you're looking for and you know the code is super simple when you're using firebase exactly yeah so you will need some back end to that and you can use a firebases cloud functions as far as you said uh we've actually done that so it does it we it's proof that it works um definitely go ahead and check that out yeah nice so now what we're going to do is so we've got cons posts which is the name of the variable then we write set whatever the variable is called to set posts in this case and then we need to initialize it so we say use state which is something called a hook and this is basically preparing the variable and we're going to say that the default value should be an empty array now to use this we need to go ahead and do this we need to say first you get rid of that i need to import it so i'm going to say import from react the use state right nice and then save prettier makes it look nice and then what we're gonna do is we're actually gonna so i'm not gonna i want this to be our posts right but what we're gonna do now is so let's go over to firebase right so yeah yeah yeah let's go over to firebase now so guys in firebase in the database you have a collection right so in this case what is the collection going to be it's going to be posts right so in this case let's go ahead and create a collection called posts yep and then cardi what's happening here and now guys inside of a post there are going to be like multiple other data points that are going to go in there so it's like what does a post have so in this case our post has a username our post ha oh this is a username right here right our post use the props as your reference right you can use the props as a reference exactly yep so in this case because remember your props it has to match your props uh the keys of your props boom nice so in this case let's go ahead and we can maybe change the value yeah nice awesome so each documents you have a collection and then you have documents inside the collection and each document in this case is going to resemble a post now display name is going to be string username is going to be a string this is going to be a boolean because true or false by def right now we're just gonna set it to be false uh true i mean and then username i'm gonna pop that in display name we're gonna pop that in and then uh what else do we need here so we need uh this is just gonna be a string so so let's just say uh yo it's pulling from firebase or something so that way we know it's coming from firebase nice there we go all right avatar this is going to be just a string and we're going to pop this in right there and then for the image this is also going to be a string and we're going to pop this in right over here cool and if i paste this this is the image so you guys are going to see that or sorry that's the avatar and then this is going to be the image that you guys are going to see yeah dope so this is good i'm going to hit save and now we have created a document so post at the highest level you guys at the highest level we got posts post inside of it right that's a collection inside of it you got documents so you know we got now one post we'll have multiple posts inside of our post collection exactly yeah if we make it full screen i think the firebase ui is a little bit easier to see yeah um there we go yeah so you've got a post and you've got the documents inside the post yep yeah and then they got data inside each document exactly yeah so really nice and now what we're going to do guys is we're going to basically do the magic which is going to connect so we already done the config which allowed us to connect to the database but now we're going to basically set up a listener which is going to be listening to that exact collection posts and anytime a document is added or whatever is in there currently we want a real-time listener which is going to update the posts in our state so inside of our react app and then that way we're going to render it out afterwards and it's always going to be real-time connected to our database right so let's go back to the code yeah nice and what we're going to do now is we're going to use effect so use effect basically is a piece of code that runs based on a given condition right and in this case the condition if we put empty brackets basically says run when the feed component loads so run any code that's inside of here so around any of this code whenever the feed component loads and don't run it again after right but if i was to put something like a name variable or anything in here like name age whenever run it when the feed component loads as well as when name the the name variable changes or the age variable changes so it's very powerful block of code a use effect right and we need to import it as well so at the top we can say use effect and then here we do some very very powerful stuff now so firstly we need to import the db from our local firebase file so you'd say import db from local firebase file so not the not the module firebase but the local file and then what we're going to say is db dot collection right so we're going to go to that collection and the one that we created was called posts inside of the collection inside of the database i'm going to say on snapshot so this is super powerful right now on snapchat and we say snapshot basically this gives us back a snapshot of david so imagine we just took a picture of the database right so it's listening and anytime that data changes or deletes or anything it basically grabs the snapshot and gives it to you so this piece of code that i'm about to write fires off and here what we're doing is we're saying set the post so set the the variable inside of react so set this variable right here to the value inside of here so if i set this it'll be empty but we don't want it to use that we want to use the snapshot so the actual database documents so we're going to say go and get all the docs that came back in that snapshot and then map through it and say for every single dock map and get me the dock data so the dock data is all of those fields that kazi added so the display name the avatar the image the text all of that stuff and what this will do is this will give you an array of all of the posts inside of the database right so all of the data it will be basically bubbled up into an array we set that as our posts so in this case now so guys just to visually show you guys because i think this is the part which just gets the most confusing so first yep okay just think about it super simply collection posts here i'm accessing posts so this one line over this line over here gets me access to this guy here post okay then when i do snapshot docs.map and this dock over here it allows me to loop through each document so first i'm looping through this document then if i had another post it would allow me to loop through that post as well so imagine i had you know one more post there if i had a third post like maybe a post here by barack obama here i have a post by you know i don't know kim kardashian that doc will give you access to each of them okay and then the last part of this thing is the doc.data when you do data this will actually get you access to this entire object okay yeah so the data will contain all of those things so then later you can do things like um you know dot avatar and it'll get you this one or dot display name and you'll get access to this one so i think this one line is oftentimes the most confusing to most people but yeah basically what it's allowing you to do in simple terms is just get access to every single post and all of their data exactly so super important uh point then i think cardi explains it really well when he does that um so literally guys what that's doing is yeah it's mapping to our state inside of our app and that means that greatest ever is saying so people were asking hey is profit would react also inside of this guys so profit with javascript will contain a lot of react stuff in there too and we're going to keep on adding things even if they're not there right now that's our long-term vision with sunny and i that's why sunny joined the team so he can actually bring in a lot of react to clever programmer so yeah greatest ever so should one wait for them to be added because i really love react stuff but what i get in is that look we're gonna you first of all you need to learn the fundamentals of javascript before you just jump into react so we're gonna give you all the fundamentals of javascript and yes we're gonna be adding in a ton of react to that course because it's gonna still react it's just a javascript library yeah so we're gonna give you access to react basically just allows you to supercharge your javascript skills and everything you're doing with javascript so we're going to add that into the program as well and you still have live weekly coaching calls directly with sunny so yes you are going to be building react stuff the instant you join the program yeah so literally every single tuesday we pretty much i run a react coaching call so you're gonna get extremely um yeah you're gonna get extreme intense react sessions in those in those calls where it's a zoom call so what like literally you can ask me any questions you can jump in we run through demos we run through any sort of problems or we kind of go over like somebody just said use callback so if if those questions pop up we run through anything that needs to be sort of go through and it's super intense so it's really really good from the get-go definitely recommend you check it out yeah beautiful nice so we just populated posts from the database right so now rather than rendering it from uh like like how we've hard-coded it on 925 instead what i'm going to do is i'm going to say posts dot map i'm going to say for every single post that we go through i want to render a post component right but now what i'm going to be doing is i'm not going to be so imagine like we're pulling this component right so imagine we're doing this but instead of writing this like this i don't want to now basically oh oops that shouldn't be like that should be open bracket yeah so now i don't want to actually have it so that oh my god what happened here okay so there we go now instead of doing this i'm going to say uh post dot display name yeah display name and basically do this do do that for every single one but you could do this or actually we will do this i want your destructuring at this point because it will be a bit confusing do post dot username right and then here we do post.verified so this is basically getting the database values now so saying post.verified and then here post.text so post.text and then here post avatar post dot avatar and then here so post avatar and then here we say post dot image right so now if i save this so as soon as i save this guys if we did everything correct so cause let's go ahead and get our app on the right so as soon as i save this now it should be able to connect to the database pull that in now it should say yo it's pulling from firebase or whatever we change that to right so if i go ahead and save this so now it should refresh and we should be pulling this information from uh firebase now so let's hope it all goes well god damn da da da opposite of test driven development hey you don't need to do it when you're this jacked so i'm gonna just show you guys what's happening here this is pretty freaking insane so boom look at this guys all right step one our avatar is being pulled from the database our display name is being pulled from the database our username our text every single thing want me to prove it to you watch this i'm going to go over here change this to bunny banga instead hit that boom look at that real-time baby no refresh no nothing guys if you like that one i thought that was pretty freaking sick go ahead and smash that like button break it on your computer you don't need the left click button anyway [Laughter] nice exactly guys like real-time connection to the database uh yeah i just think that's amazing nick and guys there's so much that goes under the hood of that but it's literally like a few lines of code to get that working which just blows my mind every time this is amazing i've literally never watched a youtube live session for this long let's go let's go awesome below our cram says it's firebase free all of this stuff is free you only need to start putting a card on the account when you start doing things like cloud functions even then it's generate massively free [ __ ] sound yeah trump there's a lot of free stuff inside of there guys um yeah so and i actually stole all of the uh sort of like if i ever have a portfolio or something i actually host everything on firebase and then i'll actually have my portfolio on firebase so yeah definitely go ahead and use it um nice right so let's go ahead and check this out i just sent uh i just sent frank a message actually just right now so yeah we'll see if he sends me a text back but he joined us i shot him over a text i love when i see the blue you know because iphone so it makes me really happy nice but let's keep going nice awesome so what we're going to do now is actually connect that top tweet box where it says what's happening we're going to basically make it so that when we type in there and when we enter an optional image url and hit tweet it's going to go ahead and post a tweet and we're going to basically post it as rafikaze so we're going to assume that they signed in as him right yeah so so now we're done with the re so hold on we're done with add real-time database with firebase now what are we working on we are working on um posting a tweet at ability to post a tweet yeah post a tweet to the database yeah post a tweet nice okay i like it says yeah it's the first time i've glued to a live like this you guys rock appreciate that dude love the fact you've been here watching nice nice good i love that okay cool i've changed everything now we're back to coding yeah yep boom let's go so now what we're gonna do is we have um the right yes so the tweet box so we have some text inside of what's happening so that input field and we also have an input field where it says optional enter an image url so first thing we need to fix is create two pieces of state that keep track right so it's going to keep track of what the user is typing in so let's go ahead and handle the first one hey frank just responded back and he goes let's go so ready to crush it and react nice amazing dude see you guys like we get we literally see as soon as you join and we will talk to you jump on cause everything it's all one to one nice so we're gonna go ahead and create the piece of state now so here we say for the input i'm gonna go ahead and call it the input so let's just say uh tweet message right and it was a set tweet message tweet message and i'm gonna say you stay and initially this will be a blank value right so it'll be a blank string so i'm gonna go ahead and import this we don't freak out go ahead and do this nice and then i'm going to go ahead and connect it to the input field so what we need to do to connect is the greatest ever the greatest ever says the fact that we are not moving from our screens and feeling the need to is just a testament to how great this teaching is and this applies to all the amazing teachers on cp thank you prem prem sagar just donated five new zealand dollars and he goes sunny kazi love from auckland beautiful and he goes you guys are doing an amazing awesome job finally i'm confident and react after watching your clone series hey let's go i think it's time for my horns thank you dude and we are we love the fact you're more confident with it after watching our stuff that's awesome to hear yeah nice uh somebody just asked so rodin danny says why don't you use express express.js for back-end guys did you see how much code we wrote to get that working it was like a few lines of code which is why we didn't use express like for a back-end so this is a major reason of using firebase uh it's so powerful gives you a real-time functionality out of the box and it's just insane with how little code you write the functionality that you get so that's my answer to that yeah so now what we're going to do is we're going to map the value here so to that tweet message in the state but it's gonna be stuck now so if you cause if you go ahead and try and type in what's happening what happens when i try to type no nothing yep nothing right because what we're doing is we're mapping tweet message which is set to blank to that input field so what we need to do to get a map to get it reacting to your input is we say on change which basically fires off an event every time we type i'm going to say set the tweet message so i'm going to say set the tweet message every single time you type to become e.target.value which is basically what you type in right now if you try and type for me so let me go ahead and save it now if you try and type what happens hey let's go i can type my fifi and i can type fubar nice awesome so now what we're going to do is we're going to create another piece of state so i'm going to create another one to keep track of the image so i'm going to say tweet image tweet image there we go and for this one i'm going to go ahead and map it so i'm going to say value equals tweet image so tweet image right i'm going to say on change we need to do the same thing we can say on change oops unchange equals set tree image so set uh sorry e so it's going to be arrow function and it says set tweet image to be e dot target dot value right awesome nice now what we can do is because we've done that right and because everything is inside of a form when we hit enter the button type should be submit because we want this to be our submit button for a function and basically what we want to do is we need to add on click so basically when i submit or when i click that button what am i going to do i'm going to say here send tweet right so we're going to create a function called send tweet and here what i want to do is i want to say const send tweet and this is going to be an arrow function so it takes an event which because whenever you click a button it dispatches an event because we're inside of a form guys it's going to refresh the page right so in order to stop that because in react you don't want to do refreshes right so you need to do e dot prevent default and this will prevent so you need to pass e as a parameter so send tweet is being passed in the button on click and then what you need to do is say e dot prevent default massively impossible says you guys are crazy love you guys keep it up you're helping me making my dream projects thank you so so so much for making these projects students like me need you please don't stop keep going let's keep going bro let's keep going amazing nice so e dot prevent default stops to refresh right it stops to refresh which in react we hate right but how do we post in the database so this is actually going to be surprisingly a lot easier than you think right so what the way we do that is essentially all we need to do is go ahead and write the following so we say db so we need to import the db so i'm going to go ahead and import that first so i'm going to say import db from my local firebase so boom boom boom local firebase not the module local firebase and i'm gonna say db dot collection posts right i'm gonna say dot add right say dot add and then basically this is all you need you add an object and that object has the same shape that we did earlier so remember when we basically went ahead and we added um the object kazi basically did it inside the firebase interface right he went in and added display name username so when we do the same thing here we say display name equals in this case the display name we're going to hard code it to be raphe kazi right well let's go ahead and say yeah let's do rafflecard rafikaze says to rafee qazi nice and then we're going to say the username is going to be um there we go we can even open this up right here if you want to look at it yeah yeah so this is exactly essentially what we're doing right now right but programmatically and then we're going to say verify this we're going to assume that it's true so verify it is true right and then we're going to say the text in this case is not going to be like a hard code value it's going to be whatever we wrote inside the tweet message right which we mapped when we did the input field right whoa we just hit 1.5 k likes nice thank you guys yeah just broke 1500 likes right this second and uh also 22 000 playback so just wanted to come in and say thank you guys so much if you are enjoying this so far you want to help us get it out to even more people hit that thumbs up button and also subscribe to the channel because we're going to be bringing you this value every single day guys up coming next week we have things on the agenda like facebook clone twit uh linkedin clone and what was the other one i sent you sonny airbnb clone so yeah if you want to be notified of those things so literally when we drop them you want to get a notification oh i was looking at the wrong camera if you want to get a notification like this on your phone then make sure to subscribe and hit that bell icon next to it as well so turn on the bell notifications and as soon as we go live for airbnb clone or linkedin clone or facebook clone this upcoming week you will get that notification you click it and you just jump in exactly guys make sure you're subscribed make sure you hit that notification icon do not miss these sessions guys and if you do don't worry about it they're all they're all going to be up on youtube forever you guys can watch it take your time go through it the code's going to be a github link amir says people might think we're paid to say that these sessions are the best but that's not true consider the amount of knowledge you gain from these videos and it's all for free these guys are killing it thank you brother yeah we're going to keep going thank you very much nice so we added the text which came from the tweet message steve says what about a slack clone oh that's actually oh yeah you know a cyclone will be fun dude i'm done you could even learn electron electron js oh yeah that would be dope oh yeah oh yeah yeah maybe we'll do it one day yeah so for now we're going to use that clever programmer logo as the avatar so that's going to be hard-coded still we're going to keep that one as a hardcoded value so i'm going to go ahead and do this and then for the image right we're going to go ahead and use the tree image so if we left it blank it's going to be blank that's fine but if we didn't then it's going to go ahead and use this which is the tree image right so that's cool and now what will happen is and basically after you tend to send a tweet you actually want to erase the tweet the sending the tweet message box and the tweet image right you don't want to actually show like anything the sort of previous contents you had in that input file so i'm going to go ahead and do set tweet image and set tweet message to blank after that if you don't do that the image the input files aren't going to reset right nice so if i go ahead and click save now so click save like that now what we should see is uh because if we go ahead and type in what's happening so like let's go ahead and type something into what's happening so let's go this is a real test or something this is a no i'm going to say hold on this is audible nice and oh [ __ ] i posted it bro yeah it did it right let's go ahead and add another one but let's give it an image okay got it yeah so guys did you notice that that was real time right oh [ __ ] my bad we weren't we weren't showing it my bad my bad my bed i think we never showed anything sorry guys show the code change the scene okay sorry damn it i don't know how long i kept it like that i apologize you guys okay cool so this should be good now yeah this is all you coded right yeah yeah they could see this part when we did that oh right now it wasn't sharing extra screen okay so yeah so guys what we're doing here is what we did just to run through again we did dv dot collection post ad and then we're mapping to the objects and the ones to take note of here are tweet message and tweet image which are being mapped to the state which is our input fields and then we basically reset the fields to to sort of clear them right all right all right what if we just did that to just get the chat going um okay cool so this is good um i got pumped because i said this is audible and then it posted it right here but you know all right and now i'm gonna post the image so i just click this pop this image in right there and i'll hit tweet right wait is that is that the same image or is that a different one um let me take a look actually right now paste it in let's go ahead looks good to me let's show the screen let's twit tweet i mean nice you want a different one let's go ahead and do a different one but guys that worked i literally just popped in that is pretty sick that it worked to be honest that gets me hyped up bro that's that's nice all right you need uh we need a different one yeah all right i don't know if this is actually gonna work i think you can use jpeg or just anything jpeg should work or a gift will work i got it i got it all right guys so here's what your life is like after you learn javascript and join our course boom pop that in tweet hopefully it works hey let's go baby nice you know your boy coming in clutch that's dope dude awesome guys if you found that cool let us know in the comments smash the thumbs up button i think that's pretty dope like that's pretty cool man like that she just showed it yeah we just showed them yep yo we didn't actually show one thing so let's go right over here we didn't show them the actual fact that it added it to the database so yeah let's go ahead and do it so take a look at this you guys all these posts you take you see this one right over here this is actually here here it is in the database right there boom here's what your life is like and boom that's the text right there we got the freaking you know what i'm saying so that's freaking crazy that it's all being dynamically shown from a database that we added in front of your face exactly amazing and if you just go ahead and add a simple tweet kazi so like a just like a normal one without an image even and show them uh as it pops in so we'll show them as it pops in i see what you're saying i see what you're saying yeah i got you i got you as would say i got you all right here we go guys get ready boom and now on the left hand side you're gonna see it pop in keep your eyes locked in on the left hand side in the post column boom there it is now i'm gonna add in another one okay get ready hit enter boom right there okay nice and it's all the way at the bottom um as they say in my country garage right so like guys you can see here like you're literally getting a case of um it's pretty much uh it's the reason why it's shuffled if if any of you guys are wondering by the way it's because we haven't put in timestamps random zbr says yo boys i need to go right now i have a meeting i have followed along with most of the streams believe me this is life changing can't thank you guys enough bye and thank you for everything that is amazing thank you man nice thank you dude all right so we're going to give you guys two more treats quickly right one of them was we talked about react flip move so i'm going to go ahead and quickly and show you how to implement that and get a smooth list right so we're going to implement that and then we're going to deploy the app right so stick with us guys and we're going to be pretty much done very shortly right yeah so react flip move to install it is mpmi react flip move so we're going to go ahead and pull up the terminal and do so kazi is chuck in the terminal uh chuck it in the terminal here we go mpm i and then react flip move so that's right frank if you are having trouble joining slack don't worry just shoot me a text i'll help you out all right npm what flip move oh no i i had it in there the nvmi uh flip move react flip move that one there got it dope we installed that go check this out basically what i was doing for uh to get me going on coding uh facebook popped this up from a few years ago so i don't recommend this you guys but um this is you know i had to this is me ordering ton of red bulls i don't know bulletproof coffee and and just a crap ton of lucky jack like ex yeah black coffee and it's like triple shot or something like that so you know i was gonna try that actually the bulletproof coffee i never tried that that's how i used to freaking code you guys but you know not anymore now i'm on a good sleeping schedule i love that the greatest ever says sunny starts laughing at the memes before qazi uploads them just like me kazzy's crazy let's go bro no he said we can't see the code editor again i did it again what's wrong with me i'm so sorry damn all right guys all right all right all right all right i'll get better at it don't worry don't worry i got you i got you all right let's keep going right so all we did there guys was mpmi react flip move so we did this mpmi react flip move and we hit enter and that was it right so in order to basically let's go ahead and add um the react flip move so to do it i'm not going to explain too much of the implementation i'll let you guys go ahead and check out the documentation i'm just going to show you how you can pretty much chuck it inside of this so we want it basically on every post so we want all the posts to be animated right so in order to do that what we need is we need to go to the post itself i'm going to change this to a functional com uh to not not a functional one an es6 function so it's like this right and then what i'm going to go ahead and do i don't know why that's freaking out that's not wrong um let's go ahead and do this yeah and then what i need to do is import forward ref so forward ref is a way of handling references in react so again don't really need to know exactly what that is at this point if you want to go ahead and check out the react docs but how do we use it right we basically go here before the the props and we basically do the following right we write forward ref put another parenthesis so another bracket go all the way down to the bottom what is this for what are we doing what's the point of this we're setting up react flip move oh i see okay do people know what react flip move is i don't think so right so before so yeah so we showed the other uh the sort of slide at the beginning but it might be worth showing them yeah so if we go ahead and open this react flip oh yeah i got you here we go guys here's react flip move boom and voila here we go hey so this is what we're gonna what we're building right now yep so it gives you like a very nice smooth animation right yeah um awesome so with that said now what we're gonna do is we're basically gonna do we put the forward reference so we've done it there added the parentheses here and then all the way at the bottom down here to sort of close everything off so that's nice and now what i'm going to do is go ahead and do the following so i'm going to go ahead and say this actually what we need to do is where we have our props over here need to add print parentheses here and i need to go ahead and do this jj asks do you have any plans to use typescript would react in any future tutorials i think the answer to that is hell yeah right yeah definitely yeah guys we're all i actually code yeah you code and typescript right yeah yeah all about that hype script life you guys so we're going to be doing a lot of that soon exactly so guys uh we pretty much here were the props and what i did is i added this this second parameter when we added forward ref because we gives us something called a ref right and all we need to do here is go ahead and do this we say ref equals that ref right that's it right that's for the first part that's the first part we need to do right and then what we do so that's for the post the individual posts right now where we actually animate the posts so where we have multiple posts being shown on the screen is inside of the feed right it's inside the feed and the way we do it now in here is we basically go ahead and import flip move from a react flip move at the top like this and then what we need to do is basically wrap the the mapping inside of the that flip move so we need to go ahead and do the following so this so now you can see that we've essentially wrapped our posts inside of flip move but in order to get this to work correctly we need to give it a key right now a key in this case has to be something unique in this case the key that we're going to use isn't the best key to use but it will work for this case we're going to say the key is the post text right because in this case we haven't got any text with the same thing but in this case what you should be doing is pulling the document id from firebase and using that as your key but in this case to save time we're basically just going to use the post text as your id and then what i'm going to go ahead and do is save and now kazi if you actually let me go and save this so if you go ahead and open up localhost and maybe refresh it okay yeah give me one second i'm gonna just go ahead and uh do that right here and uh open this up and refresh it all right what are we looking for if you type in like add a post now whoops test clean boy let me check on my local hostess out because i couldn't see it properly but that looks like it's adding it in random places you know so we won't sometimes see that's because of the timestamp yeah i'm going to do it for my machine guys i'm going to say hey there i saw from your machine yeah i saw sunny in the house damn nice awesome right so with that said guys we pretty much showed you how to add a animation library which is so dope and it works really really nice and clean um awesome so yeah so that pretty much has an animation make sure when you are using a key guys use the firebase doc.id which will you get at this point just to show you guys uh because i don't want to sort of mislead anyone with it with the key information so here what you would do is when you have doctor data you can pretty much at this point pull out doctor id as well right so you can do something like doctor id and that's the that's the key that you want to use which gives you a unique id from firebase so in case you're wondering that's the one that you're going to use um awesome so i think with that said qazi we're ready to actually go ahead and deploy so guys if you're excited let us know in the comments uh we're going to show you right now how to go ahead and deploy this app we're going to be deploying this [ __ ] real soon guys so get pumped all right this is my favorite if you haven't already guys hit the thumbs up button if you're enjoying this you know people are like freaking uh getting they were like getting annoyed by how many times he was saying are you pumped the top comment [Laughter] it's like enough of the dj [ __ ] vibes yeah oh man i can't wait to see uh you know i don't even tell nas i want to tell him i want to show him those comments when we're all there at once and show him that he got like 50 likes and then just see his like reactions like face drop he's like can we stop with the over energetic dj someone said wave it [Laughter] oh man people are brutal man all right um i mean we've all had a roasting i had a roast on one of the live sessions like your wife sonny so fat and why is he always wearing this black shirt it's like he's like steve jobs but he just wears a black shirt instead of her yeah people would always make fun of my like teeth they're like your teeth are like [ __ ] up and i'm like well you know i don't know man i don't know what to do about that i'm trying over here i'm trying my best yeah um all right all right time to deploy yeah let's do it so inside the terminal guys is where we did so we don't actually need to do anything on firebase yeah yeah i forget that sometimes you know but okay so guys it's pretty simple we're gonna do firebase in it right yep and then um we're just gonna sit here and wait and then we're gonna look over here pretty soon it's gonna ask us some questions in a second let's go down to hosting you guys because we don't need to do any other stuff right hit hosting we're going to hit use an existing project and then boom we're going to go to this is our what clone twitter clone so let's find twitter clone boom so let's click that now for this make sure you guys say build because that's a folder things go into so for those of you guys who might have trouble seeing right now uh i'm gonna just write it out on the screen so just write build here that's it i'm going to hit enter it's a single page application so say yes don't say no type in y and hit enter so now this build folder should be made for you guys and that's looking good so sunny at this point what do we do with that do we do firebase uh do we do npm yeah build yeah so we do npm and also guys before you do that when you did firebase and net you might be prompted to log in all you need to do is do firebase login if that happens and then it'll pop up on chrome all right so that's just in case anyone runs into that um but yeah now we need to do npm run build and what this will do is so let's go ahead and run that command um qazi i love that uh as soon as i said that frankie dropped in the chat and he's like are you guys pumped when we were talking about the gnostic npm run build right yeah mpm all right and what this does guys is it strips out all the developer rubbish pretty much gets everything super optimal right so it basically creates like a super lightweight build of the app everything that's gonna be online is in this folder okay this is what's gonna be actually online yeah important point here guys if you make any changes after you do npm run build you have to do npm rom build again to get the latest build before you do a deployment hold on sonny you better stop talking boy because we got some fire what why did he get hit and hold on i have to do this one again here we go so sergeant says yo what's up guys just landed a two thousand dollar a month client during this call thanks to you guys teaching me react.js nice are you guys pumping drop it in the comments like drop in the comments below if you guys are pumped sorry man what are you gonna say i was just gonna say we speak to sergeant quite a lot on uh on instagram because he actually posts stories quite a lot and he tags us in there and if you guys haven't already like shoot us uh an instagram story and tag me and kazi our tags are on the bottom of the screen i think you have to switch the screen kazi what do you mean basically yeah my bad for the instagram tags yeah so at the bottom of the screen right here guys just shoot an instagram story tag myself and kakazi uh using the handles over here and pretty much yeah we can get chatting with you guys but that's insane dude i love to see that yeah and like so take a look at this you guys so sajin has been in our community and he's been sending like instagram messages so he's like appreciate and love all of what you guys are doing what you're offering is incredible and this message was on what july 8th so today is august 7th so like look we've been talking to um for like over a month he like sent video messages i responded to them and you know since then he's been working at it building these clones and a month later he just landed a 2 000 a month client so that is freaking sick exactly insane insane yep well done dude right so we just done npm run build which basically bundled the app up into this performance bundle right so it's like everything that we need to deploy now is inside of that build photo you'd never touch it you don't need to touch it what's happening check out frank just made a story which is freaking sick so check this out hold on i'm gonna play it from the start for you guys so this is frank's story you guys he joined prophet javascript as well and he says making twitter in react and then here's this 25 baller ass donation thanks so much for that and he actually joined the prophet javascript course as well so i'm gonna just make his story my story and we will do that for you guys as well if you reach out yeah amazing love that thank you so much frank for joining and awesome work sergeant for landing that client amazing stuff right um nice so i guess at this point if you guys are excited let us know in the comments we're about to hit the deployment phase right we're about to hit one command which is going to send this app into fly firebase that's fair yeah it's going to send this onto the internet and you guys can pretty much go ahead and check this out all right are you guys ready or what if you're excited to use this app right here right now while you're on the stream an epic conclusion to everything that you and i and sunny have done together all of you beautiful people in the chat like future code and henrik and saeed and steve if you're excited about this drop in the comments below guys we're gonna launch this app live in five four three three two two one and this thing is about to go live guys so just give it a second and as soon as that's done boom it's there let's see here's the link yep boom and i'm gonna full screen this paste the link if this is good to go i'm going to drop the link in the chat link in the chat has been dropped so you guys are now welcome to jump on this app and use it there we go you guys here is the link to it so this is this app is actually up and running nice amazing go ahead and check it out guys go ahead and play with it you guys can see it for yourself know that we weren't just coding a bunch of lies the whole time you guys can actually go and play with this it will be posting as rafikaze so we can see a bunch of people actually typing messages in nice hi guys yup hi guys yep people typing in messages so yeah everything's gonna be coming from rafikaze here you guys awesome this is nice okay dope so sunny we have built this app and we have completed it hopefully you guys have enjoyed it i know i see frank says let's deploy it programmer machine says programmer gods youtube byron says amazing awesome thank you guys for all the love hendrix says go go go savannah says ready with that said guys we have done a lot of things and just to kind of recap everything that we did today you guys i'm going to do a quick recap so we built a react twitter clone all right we use technologies like react.js material ui css and firebase this is what you guys built today material ui was used for all the icons all right real time firestore database was used for the comments and the post that we made you guys learned how to use css variables and suddenly you use them for twitter color right yeah we use it for the twitter color and also a background color so css variables are used yeah and then to add those nice slick animations you guys use react flip move and this is what created those dynamic animations when you're posting the tweets so so so juicy and so nice and then at the end what did we do sonny we sent the app straight into the firebase line now it's deployed and live for you guys to mess around with play with and just you know see have a have a play and feel before you go ahead and build it and also guys code is in the github repo that we have actually gone ahead and put in the description and we made a few changes live on the session so i will go ahead and push those changes also to the github repo so you guys have everything fresh and like you saw it on the uh on the the feed today yep beautiful you guys so thank you so much with that said do we have anything else to add sunny just want to say a huge thank you to everyone who is watching we appreciate you guys and we love that you guys turn up every single day and yeah like we said if you guys haven't already shoot us an instagram message um and we can get chatting to you guys uh with that said i think i'm pretty pretty good oh yeah and also join the free training guys the link is in the description quasi why should they join this so this training you guys you know the main thing is you want to go from that practicality of like how can i take my coding and then make a living with it so the number one thing like sudjan commented just a little bit earlier and he said i just landed a 2 000 a month client that's practicality everything else i think is cute and awesome that you're learning but how can you actually now make a living with it how can you support your family with it i think those are by far the most important questions to be asking and so in this training we give you the answers to a lot of those and this training lays out your path from zero to making a hundred thousand dollars whether you do it in six months twelve months two years or three years this will be your like manifesto this training is absolutely free so go ahead and you can even watch this video that's right over here that explains what this training is about and then once you're good to go on that click register and sign up for this exclusive training that's it that's it yeah make sure you guys do i mean it's free training guys like if you're if you were here during this session like definitely go check it out like you literally just going to come out of it as a better javascript developer yep sergeant says all right here's something such and says so sudjan message and he says freaking appreciate you guys from all the app clone trainings to the roadmap trainings plus pwj oh he's also our profit of javascript student right gave me everything i needed to pick up being a developer uh to pick up developer work fast that is awesome nice pump-free amazing i'm really really proud of you man that's awesome there yeah and if you guys want you know just go ahead and you guys can jump into our program profit with javascript which we have mentioned the link is in the description below but again you know if you're ready to just kind of jump straight into it you're going to get weekly trainings you're going to learn how to make an income with javascript which i think is huge and one of the best things with it that i want to show you guys actually is the fact that you actually get an amazing community of people that come with it so you know here is actually sudjan right here who actually joined and he just landed a 2 000 a month client and here is the rest of the community and we have over 1400 amazing members that are a part of this so yeah sergeant just dropped a really crazy comment i said this one client guys returned everything he paid for in pwj so worth every single penny oh damn where did you drop that he dropped that on a comment just now oh i see that is awesome let me actually share that because that's super dope so yep he's like this one client returned everything i paid so yeah guys i mean if you're getting work as a developer i mean whatever you pay for this program is going to be pennies you know oftentimes what people do is there's a saying tripping over dollars to pick up pennies and that's what people often do so they're like hey i don't want to join this program or some other program because it's too much money that i have to invest but then they keep trying to like through failure trial and error figure out their own way and that costs you something you can't ever get back that costs you time time is the most expensive price you can pay and they say that broke people are cheap with their money and rich people are actually cheap with their time so instead of being cheap with your money i think it's a lot better if you're cheap with your time meaning invest money up front so you don't have to make those mistakes and you can learn like sudjan get those clients exactly you heard it guys you saw it firsthand proof that somebody's actually made a huge amount more than they even paid for the course like definitely go and check it out yeah jen last week that we shared with you guys got a job offer for 96 000 a year so she's also part of this community right here and guys interesting story with jen she lost her job due to coved right so she actually lost her job and then she about i think it was like a week or two later landed a job which paid double her salary yeah which was just insane like that's a boss move like that's that's insane and she did that through profitable javascript and this girl she picked up and learned so amazing and super proud of her yeah so that's it guys thank you so much for being here we really appreciate your beautiful face all of you from alexandros to david to janitha to view reality to the greatest ever to all of you guys are here that communicate with us be a part of this community help us keep everything clean and the culture super positive and amazing this is what helps keep us going forward and we're just going to finish this year incredibly strong thank you guys much love smash that like button if you haven't already subscribe to the channel if you haven't already sonny is there anything else you want to say before we sign off massive thank you once again if you haven't already yeah like as he said smash the thumbs up and that's all we asked for guys and yeah until next time i guess yeah that's it love you guys and as always we'll see you in the next video peace

Channel: Clever Programmer

Views: 155,274

Rating: 4.9256353 out of 5

Keywords:

Id: rJjaqSTzOxI

Length: 221min 24sec (13284 seconds)

Published: Fri Aug 07 2020