🔴 Building the Tesla Clone with ReactJS (Redux + Styled Components)

what is up everybody this is nas from clevver programmer and today i know you're already i know you're excited we are building the tesla cologne check out this amazing tesla clone here's what we got here it is a teslacon web page you guys know teslas are amazing uh they're really amazing cars so what have we got we're going to use react gs right that's part one we've got to build this okay with all this happening we're going to do a few things to style all of this we're going to use style components that's the one thing you need to understand right so style components are going to be used throughout here on top of that look at let's go ahead and take a look at some of the pages we got model s page the model 3 page you know uh so forth if i go to for example this model 3 page right here if i scroll down oh look at this beautiful beautiful page that we can see now you can see how we have all these animations right now right uh when i scroll down we have these beautiful animations that kind of pop up well that's using something called react reveal react reveal which is a really really cool module that we're going to use in this one of course as well we have ourselves a nice sidebar right here okay and to make all this work of course in to save the data the car info data that will also be saved in where while in something called react redux so you guys get the chance to kind of create your own react redux component here as well right so this is going to be one of the most amazing clones you get to build um we should be able to build this in one take no problem whatsoever right so if you're ready let me know give it a thumbs up go ahead and smash the like button for us it honestly means the world to us it tells us that you are excited that you are you know that you like what we're doing and this allows us to do more of it as well of course right and this of course allows youtube to get this out to more and more people so of course we can go ahead and teach more people at the same time and so forth all right all right all in that let's go ahead and get started right away who's ready who's ready who's ready i see all of you amazing people right there all right let's go ahead um so the first things first that we need to do let me go ahead and put this beautiful music kind of in the background while we're working let me see make sure is how is everybody doing oh hello hello hello we have so many amazing people we have uh penguin hello hi we have pumped bhavik says beautiful i love it nas what's up what's up how are you doing good good good good good let's go hello dignity and i like it too all right let's go ahead and get this party started to build something like this will of course require a few different things right uh we just start up with first is the react redux uh application right this is the code as you can see um nothing crazy we have the homepage the header page the section page this is our goal in terms of where we need to get to um but for now a few things let's go to about finder right now right uh if you're on windows of course it's gonna be for you it's gonna be a different situation um just open up your what is it called my computer whatever it has to be and let's go ahead and create a new folder i'm going to open up a new folder inside where well inside pretty much something called a terminal hopefully you guys can have that it's at the terminal right there beautiful and i'm going to zoom in so you can see much better okay all right and let's go ahead and do the following thing for this you of course need node.js right so hopefully you installed that if you have not installed that install node.js on your computer and everything will be good from there all right um so we'll do npx create dash dash react dash app we'll give them a react the name so let's go ahead and do tesla clone task clone beautiful and we'll do template and redux is the name of the template right right there hit enter there we go it's kind of compiled it's gonna do all necessary things it needs to do it's gonna work it's gonna go this and okay anyways i'm just you know passing time as it's kind of loading so as you can see it's creating the initial repository that you need right for for what well for basically for um your application okay that's what it specifically needs somebody said hi my name is tesla that's funny happy hacking is what we currently have happy hacking beautiful it's exactly what we need to get to right that means our application has been complete not completed but it's installed all right uh once that you can go ahead and close this out no problem no problem and at this point let's go and go ahead and open obvious code i will do new window on my side i do not need this portion of this right here that portion goes somewhere else for me i could probably do it somewhere else let me go ahead and put this portion desktop too there we go all right beautiful all right so this is obvious code let's open this up on the left hand side and put my testicle on the right hand side so it's a little bit better all right i like it and let's do file open file open beautiful go to github and then go to nas and then this is the tesla code that we just opened up right so i will open up tesla clone here okay beautiful all right so okay and let's see what we've got so far all right there's a tesla car that got beautiful um what do we have well to actually start this let's go right click this go ahead and open in integrated terminal all right and what we will do is we'll do yarn what yarn start so we're gonna use yarn this time because it's okay you can use both npm and yarn are both amazing so and yarn start boom that's going to start our application hope you guys can hear me all well yeah it's going to start application uh this is not pre-recorded this is actually live guys by the way it says i'm live i can see you i can see you right now in the comments if you say hi i'll say hi back to you as simple as that all right let's go ahead and do that beautiful nice nice nice nice nice okay let's see let's see let's see okay all right so this is our webpage that we have right now this is not a v-test local don't you worry okay uh this is just a starter application that react usually comes with right so at this point uh what are we going to do all right we need to erase some of this stuff let's go ahead and go to app.js right here and let's go to the header and let's remove this stuff honestly we don't need any of this stuff right here sayonara baby done you're away all right now we have a white screen which is pretty good too right we've got ourselves the white screen all right hit enter all good let's go to some index.css some of this stuff we don't need as well so we can remove some of this stuff which is just unnecessary too okay all right beautiful and so here we go now at this point a few things that we need to do as well is we need to divide this into application into a few different pieces correct and what kind of pieces would you divide this into well let's think about this right if i will if i have something like this right here's we have we have this application this might be like the whole app right so this is the whole app after that what do we have well we have the header right we have the header which is this one right this header might be divided into a few different parts as well we've got the logo we might have ourselves the menu like maybe we call it like the left menu icon or the left menu bar and then we have the right menu right there right underneath that we have the actual content or which is this we will call like a section right and now this section now has a few different things right let's think about it okay well the first job is like this text component so this contains like the model s the order online and stuff like that right so that's what called a text component okay then what do we have we have a button component right here okay it's a button component that will contain the buttons like custom order existing delivery and so forth and our last one is going to be this really fancy bouncing bouncing bouncing bouncing uh arrow okay um and that's pretty much it and our goal is to repeat these components so forth and so forth as you kind of go forward and so forth i see right there see right so that's pretty much it and as we repeat uh you know there's nothing else to it um and of course after that we'll figure out how to create the other pages like the detail page and so forth okay all right beautiful so let's go ahead and get started alright beautiful so as we said the first we need to create is going to be the header component and let's go ahead and do that so i will do source new folder and i will say components i'm not component components components component okay let's go do a new file and we'll say header dot js okay all right and i'm going to use something called react snippets as you can see right here we have something called es7 react snippet so hopefully you guys can install that as well on your side um right if you install those don't have them go ahead and click install i already have them installed but what they will help me to do is if i go to header.js check this out all i got to do is type at the following rfce done hit enter right like this is pretty cool what do we have ourselves well we have ourselves a function component that's what we had ourselves right here okay and if i say header here right here right and then i'm going to import the header into app.js so let's do that right now so we'll go ahead and do import what import header from from what well a few things components so we'll have to hit the components folder slash header voila beautiful all right and we'll use the header now like so okay save that and let's go ahead and see our new beautiful what is it our beautiful header component which is just pretty much just a header text um let's actually make it much better right so here's what we can do now at this point guys is let's go ahead and go to index.css and a few things i want to do is to change right um let's go ahead and target everything right now right so again nothing crazy so far let's go and target everything and the first thing is we're going to change the one with change the font family right to make it more robotic you know it says rubik rubik's cube whatever it's going to be all right that could be the first one let's go and change the color of also of this specific what of the specific um good of this webpage so this will apply to everything pretty much right this color will apply to every every any type of text right i just want to keep it consistent i'll give it a margin of zero so that there's all these headings do not have all these crazy margins which i don't like and give it a padding of zero as well okay good all right awesome and we're going to use the code something called border size oh no box sizing border box now for those of you who don't know what this is it's basically when you say the width of something it's going to include the padding within that div it's a little bit confusing but basically uh this will allow us to better control the width of the actual dibs that's what that will allow us to do box sizing will say border box border dash box there we go so i know i have a hard time typing sometimes guys so you can see [Laughter] all right let's go ahead and focus on the body now so we'll do body and we'll give it a width of what width of a hundred percent right here okay good and honestly that's pretty much it okay with 100 that's all i need so far okay good uh let's go back to our this okay you see our header now looks a little bit more different which is completely okay after the header what do we say we need to create we need to create the actual home home page right so we have the home page and we have the header okay um let's create the home page now and components do new file and we'll do home.js beautiful all right all right and we'll do rfce again i love this one rfce and you got yourself a seat i don't know whatever all right uh same thing this one let's go ahead and do home okay we'll import inside app.js right here and so forth home dash like this okay import it right here so import importante import home from what components compontentos commonentos component dash home okay don't judge me [Music] all right good let's see what we got so far and we got ourselves a home component i'm going to come with the header one for now just temporarily because i'm going to focus only on the home component right now okay and again i just want to make sure this is clear if you cannot follow along don't worry about it you know this is you know this will be available after you know the this is done so don't worry about if you cannot follow along just go ahead and review it again all right beautiful so the home component is there which i really really like um now let's focus on a few different things within the home component uh and let's go to home.gs now for the styling we're going to use something called style components and we need to install them first so go to your terminal let's go ahead and click plus on it and we'll do yarn add and we'll do styled dash style dash components style dash [Music] yarn add yarn there we go so it's going to go ahead and add the yarn all right save that that's all good and we will now import import styled from what okay improved from styled dash components good save that all right now for this component the first time we're going to create something called the container component so we'll do this container no not container container okidoke okidoki container there we go container that's going to be our first component we'll do and with the container component let's go ahead is equal to style so this is basically will give us allow us to style the specific div right that's the power of style components instead of doing it inside css we do inside javascript and so it just makes things a lot easier for us right and now we'll do a height height of what 100 vh oh 100 vh good how are you guys doing by the way all doing good is everybody doing good everybody's still kind of on track with me if you guys are let me know let me know let me know let me see everybody's doing amazing [Music] somebody uh somebody says i like how nas uses the different boxes to show us the different uh yeah different things that's amazing awesome thank you thank you i appreciate you guys all right so a height of 100 vh so let's go ahead and save that and let's look at what we have so far nothing okay it's kapusta it's pretty much nothing right now okay again what we're making right now is what well we're making the component that's going to be this component right here so it's this whole component right which is this yellow component that's what we're looking at right now right this whole yellow component that's the home.js okay um and within this home.js let's think about kind of well how are we going to create all these sections right we have this one section another one section another section and you can see the style of them was just pretty much the same you see they're pretty much the same right there so logically speaking what if we just create another cabinet called section and that will allow us to reuse it every single time so if i right click on it let's do a new file and i say section section and we'll do rfce here too and enter okay section is what we need to type in go to 100.s and let's import our first section so say import section section from what from from what well because our current home.js is inside the components folder we don't need anything else besides that right um we don't as anything else besides that instead what we need is is just simply dot slash section like this right because we're already in the components folder okay let's go ahead and type in section to actually use it okay good beautiful all right awesome and then let's see what we've got so far nothing well we've got this section which is good all right in this section that gs now i promise now this is where the magic happens okay the magic happens now here all right okay so if we go to our section.js a few things that we need to really consider okay just how we consider this what do we say let's go ahead and create this text component first uh that's the first one but before we doing that i'm going to create a wrap so here's what i'll do i'm going to create a wrap here right there wrap and that's going to be component we'll just call the wrap we can call the container whatever has to be and so forth all right let's import style components so import i'm going to use here we go import import importante import styled styled from what from style dash components okay good all right that's so good and then uh let's go ahead and create the wrap so const wrap is equal to what styled.div okay stop.dev now this is where again our fancy styled div component you know is going to happen but they were almost at 496 likes if you can get us to 500 let's do that guys 500 likes that'll be amazing and i just want to also let you know guys by the way uh one really important thing um down below what's gonna happen right now is we are we have a full-size master bootcamp that we've launched a while ago and we have a new class starting in june and so there's limited spots to go ahead and join and so we have a limited availability for new students to join um full stack mastery we've had a lot of students joined full-time mastery in the previous classes and it's been amazing so many positive results so many people getting jobs and so many people just getting results in general if you yourself are interested in actually being becoming a developer and you want something that will push you give you kind of accountability give you some guidance give give you proper guidance a proper road map like a full-on roadmap for six seven eight months right but you will stick with us the whole time you get mentored by me by kazi and the whole team here at clever programmer right like i said fullscreen master bootcamp is what we've created to help you do that um if you're interested go ahead we have a seat reservation down below to reserve your seat all it is is just seat reservation and then we figure out all the financing later this tells us you're serious and that's pretty pretty much it right like i said link is down below right but the most important part i'll just let you know not everybody gets in some people get denied unfortunately because you know you might not have either good energy you may you might not be positive or you might just be you know not might not be a good fit so we look at a lot of different things for people to be able to join something like this it's a very much it's a very serious thing that we we uh of course we take we take care of take this very seriously of course so if you're interested come in there with good energy right put down a your c reservation link down below and after that we'll get a call and then we'll figure out how to actually get you into the boot camp okay awesome that's pretty much it let's go ahead and continue on beautiful all right uh a section okay what's gonna happen in this section uh the wrap is nothing nothing crazy the wrap is gonna be width of a hundred percent width of 100 v we'll call it vw vw it's like the car vw you know that was my first car actually 100 vw which is the full view width right that's the fuel view width that's what it means okay then we'll give it a height as well and we'll give it a height of what a hundred vh right here a hundred vh so a hundred vertical height pretty much is what it says okay all right let's get the background color background of like orange just so you can see exactly what we are working with all right there we go right so this is all working right write the whole view view with the whole view height okay all right um at this point let's go ahead and give it a background image and the background image should be this one right here now where you get this background image again what's gonna happen is we have a google drive folder with all the images down below right so if you all you have to do is just simply open this on this one up you open the google drive folder the images folder and you put it inside your public folder like so so right now i have no images folder of course i can actually open it open up the google drive folder inside my application let me go ahead and take a look at it where i can do that [Music] let me see where do i have it one second i think i have right here actually yeah i have the images folder right here there we go so i have my images folder right here right so this is the one that that you guys will get um if you go ahead and download the google drive folder just go ahead and go description below download it from there and you'll be all good and then all you need to do is need to unzip it of course and then once you've got that just grab that and then drag it into the public folder right like like so just drag it in done right and now it's all in here right this is a lot of different stuff for you um you know between the model s the model three all these different images that you need to use okay so if you got that let me know down in the comments and then we'll make sure to take care of you okay beautiful all right uh let's continue on okay all right so when we do the background image well we have a background image called model s.jpg so hopefully everybody was able to get those images like i said link is down in the description below alright uh background image so far nothing showing up which is completely fine let's go ahead and remove this background no i don't want that it's quite hideous there we go um the image is actually there we just don't see it because we need to center it vertically so we need to center the actual background image and to do that what i like to say something like background that size is equal to cover not covered but cover boom you see now all of a sudden this becomes a very different image right there see okay now let's do at that point let's go and center this image the background image and to do that we'll do background um position so background background dash position position and we'll give it a center boom voila center right back position back no i i did this one back go round position there we go see now this car is pushing the center which is exactly what we want to do then let's go ahead and make sure it does not repeat itself so we'll do back on repeat now repeat so we'll do background dash repeat i will say no sorry about that repeat there we go now repeat but no repeat no right there now repeat all right so now it's going to change at this point right we still have ourselves everything we need to have and that's pretty pretty much it okay okay that's what i want you to focus on for now now let's go ahead and add in the tax component stuff okay all we need to create of course is not going to be this text component which is right here and we're going to call it something called item text so item text okay and inside this item text a few things we need to go ahead and create is of course if we look at our test.com what do we have we have a header and we have like a subheader and to make that happen here's what we'll do we'll do an h1 tag each one and this h1 will have the title for now let's just say the title will be model s this is the one the title so model s for now this is temporary data placeholder data okay model s okay beautiful and then uh we'll do another one that's gonna be what the p tag p tag oh let's go ahead and remove that right the p tag and this one's going to have order online for touch as delivery right there boom it and i'll be honest with you it actually is touch's delivery when i ordered the tesla it's like literally it was like chris's morning i woke up in the morning and the car was there on my driveway it was pretty insane i will say like they bring it into you and you you don't have to do nothing you just sign and you sign in on your on your tesla account and then you just say okay take delivery it's pretty cool i will say okay order online for touchless delivery all right and then once we got that let's go ahead and save this of course and to create the item text component here so we'll say const item text is equal to what styled right here styled div okay good all right and with this one uh what do we need to do nothing nothing too crazy we're going to give it some padding top so you can see you already have it here it's pretty good so we need so we'll do padding top dash top and that will be 15 vh 15 vh vh that's pretty funny okay and then we'll do text line center because you know just to align the center technically where it is centered but it's okay okay there we go you see now model s is right here all right that part is done let's look at our next part that we need to figure out which is gonna be the what that's going to be now the buttons right so that's gonna be these buttons right here okay button group okay uh all right let's go ahead and create that component we'll create the component that will actually wrap these buttons right so uh the buttons that we need to go ahead and wrap are these buttons right here right so this is going to be the button group that we're going to create right now okay called the button group right button button sorry my hobo handwriting but i'm trying my best button group okay all right so i'll say button button i'd like to say bhutan in korean means bread group you know and then there'll be a few bundles that we need to create inside here the one is going to be left button and then it's going to be a right button as well so we'll say left button you like my accent and then the right button right but done okay good and then of course all these buttons will have a few different uh there'll be one is gonna be custom order so let's go ahead and do the custom order one so this could be custom order no i'm not i don't know what that was honestly [Music] custom order save that and the last one is going to be existing inventory existing existing inventory inventory inventory existing inventory that's the one that we're looking at okay beautiful all right existing inventory and let's see what we have so far um well that we need to create the actual combust groups of course so let's do that right now all right so we'll do the what we'll do const button group is equal to styled.div uh that there for now okay uh nothing crazy so far let's go ahead and create the button the actual that button so we'll do const left button is equal to also style that div okay boom and now for the right bouton the right button we're going to now use the left button as a reference so what does that mean if i say right button button is equal to saying style div style.div can be styled button left button you see this lab button why because it's allow us to inherit all the css of the left button that's pretty much the reason okay now with the button group what are we going to do with the button group uh nothing too crazy so far um let's go ahead and actually focus on the left buttons that's what i want us to focus on right now specifically okay okay so left bouton all right um okay let's do the following let's see what happens here nothing oh we have some stuff we have custom order and stuff like that okay that's fine all right um for this specific section here's we'll do we'll do background color of this left bouton is the following right background color is this color right here okay good that's the background color all right remove this stuff right here on this side that's a background color and then what we need to do is let's do a height of 40 pixels height height of what 40 pixels okay and then we'll give it a width of 256 pixels width of 200 256 pixels okay good all right save that okay sure it's all good and let's see we have so far and so far like it's just it's nasty right so but that's okay don't worry about it right and then what we'll do is we'll give it a color so color of white so white okay now yeah white so that's gonna be the text color so you can see now here the text color right here that's a white text color okay now these are two divs and let's go ahead and center them in the center right so the mini will do display flags on them flex it always selects it splay fox and then we'll do what uh we'll do justify content to center horizontally right horizontally justify content center so we'll do justify let's go ahead and do it this way [Music] justify content that's going to be center good all right and then we'll do online item center as well right items center as well okay good okay now what do we have so far right justify content align items center okay um now these are two buttons right so let's go ahead now to make them more look like buttons let's go ahead and add a border radius so we'll do what border dash radius right and that was going to be what let's go give it a 100 pixels oh would you look at that now we have our sometimes now we like to look at right i was going to get opacity it's going to be 0.85 right okay so now we have an opacity that just kind of stays there which is pretty pretty cool okay all right then the next one is going to be what well let's do text transformed make sure it's all uppercase so text transform form all uppercase okay nice that looks sick that looks amazing let's give the smaller font size as well so font dash size is going to be what that's pretty much just 12 pixels something's nothing crazy ah there you go good good good i like it i like it right so that's that's the font size and then what um we need to stack them from left to right that's what we need to figure out how to do right how do you stack them from left to right that's a big question right so to do that uh well a few things we need to go the button group and say display flex on this one boom boom right there you see right away we know what right away it stacks from left to right that's what this display flex allows allowed us to do okay now how do we put this custom order this is the inventory kind of from more at the bottom that's the question i want us to ask right well this happens a few ways well because if we go to the wrap right the wrap controls what let me go ahead and remove this portion now at this point the wrap controls what controls this whole thing right this whole thing right this whole thing right and if i do display flex on it i can actually push these away so that this goes all the way to the bottom right that's what my goal is right so on the wrap i'm going to say display flex display i will say the flex flex it flex it flex it like i said don't forget it display flex beautiful and then at that point what's gonna happen is we'll do what flex direction column right so basic column means we're gonna put it from top to bottom that's what that means okay right direction column there we go see now it's back to normal again now to actually fully make your work all i got to do and actually push this to the bottom well i do something like um justify content space between so justify content right and then space dash between boom oh you look at that it's like all the way over there you guys see that right there that is beautiful all right let's go ahead and do a line item center to align it horizontally so interesting part is you need to know is justified content usually does alignment for horizontal section right so if you want to write align something horizontally right that's what that's the content is for and usually like items is going to be a vertical alignment okay but when you switch the flex direction it switches it flips now justify content is going to be for it's going to be for this one is going to be for vertical alignment vertical and then align items now if i do center right here that's going to be for horizontal alignment or horizontal you see what i mean so the flips when you do flash rushing column you can see now the custom order they're actually they are actually properly aligned right now okay beautiful uh what i want us to focus on now is going to be the [Music] the button group let's go ahead and take this button let's give it a margin bottom margin bottom margin bottom off about 30 pixels nice so it's kind of it's a little better now there too okay so i like that a lot better now right and what else do we have let's for these specific buttons let's give them what let's give them a cursor pointer as well so left button this could be cursor cursor pointer okay save that all right so now there i can let me see cur sir cursor okay save that you see i can now exist at the cursor as well all right now a few things opacity is 0.85 that's so good opacity is good a few things i want to focus on um let's add this specific portion remember this one this this like well that is just simply an arrow that's all it is nothing too crazy um so to do that what we'll do is we'll create something called a down arrow and it's all it's just an image right so here's what we'll do we'll create outside the button group and we'll say the following we'll say down arrow like so source is equal to what source is going to be equal to images down here that's vg so we have that inside the images folder again if you want the link to it down below okay boom down arrow okay down arrow images down here right here it's not defined again it's going to create that let's create that down already to create to create so we'll do here we'll do what const down arrow down arrow okay is equal to what is equal to styled dot image right there okay on this image a few things we need to kind of create we'll do margin top margin dash dash top that's going to be 20 pixels to give us some spacing right and then we'll give it a height so a height oh height of what 40 pixels okay nice so it says style styled styled there we go all right so the arrow is now there the custom order is there so it's not the best solutions we need right so um don't worry we'll fix that in a second here okay so you can see what do we have now here's the issue this is now here and this is now here bad right because why because when we did justify content we did space between meaning it's going to create as much space in between every single component here right that's what space in between means right but how do we fix it well very simple by actually making this making this one component right right so for example if i say simply there's buttons i give like this buttons okay check this out buttons okay boom what's gonna happen now what do you think oh new component correct yes yes yes yes that's gonna create new components so called buttons we'll say const buttons buttons equals equal to style that div save that right there see you see what just happened right see this just became like this right see but they're beautiful right it's exactly what we need what we need for this for this right there right there see beautiful and let's go back to now our page application now um how did that happen well because this whole thing became one component that's what happened right this whole thing became one component and so this just pushed it down like this all right all right uh up next let's go ahead and create a little margin between every single button so if i go to my left button i will do margin what i will go ahead and do the following which is margin i think we'll give it 20 pixels i think that's pretty good um either that or just maybe eight pixels see margin margin e pixels like this okay much better much better now i would like for this thing to hop so uh we're gonna make it hop how uh well we're going to create animation we're going to create animation okay uh to do to make that happen here's animation it's gonna be animation called animate down and if i go to my down arrow in here boom right there check this out so right now nothing's happening because we have not created animation you see so it's just kind of like it's like meh right it's mac right now but don't you worry we got you okay don't you worry we got you um what i'm gonna do now at this point is very simple is i will go to index.css right here and i'm going to create the animation myself right this is using keyframes right using keyframes is what it's going to do and i'm just going to copy and paste this here because i'm going to type it out all for you right and what these are is very simple here's what happened imagine like for example that you know uh so keyframes are like percentages of like uh of the actual um of the actual text or the diff for example right so at zero twenty percent you know nothing now forty percent we're going to translate translate basically five pixels up you see right there you see then the same tips are gonna translate three pixels up now at fifty percent we're gonna translate to zero so that's what creates this up and down feeling so if i save this right now boom see that's what crease is upside down up and down filming you see up and down kind of like feeling type and so forth right um this also creates a little bit of an issue with overflow as you can see right here so what i'm going to do is i'm going to give overflow hidden on this specific down arrow right here so this down arrow you see how it creates an overflow well we can fix that by just going to section right and i'm going to say overflow hidden overflow overflow x overflow dash x is going to be hidden boom okay overflow overflow axis hidden let's see down arrow is that let's go ahead maybe fix it using what what can we use fix it using what da da da da da da da da da what if i maybe i'll remove this portion let's go and remove this okay i kind of like that i don't want that margin top it kind of pushes away too much all right so that's good overflow x hidden uh if i go the body let's go to index.css oh okay i need to also do overflow overflow dash x can be hidden boom boom see to make sure we don't have the horizontal scroll bar that was there which would look hideous which i don't like all right so there you go so we got now our translation which is really good okay so we have a translation what's the next step where we are going to work on and that's going to be let me see what you guys are saying some sense is awesome that's awesome sweet uh scs is the way to go yes we'll actually go into scss at some point as well on this channel too uh are you building that using the react yes i am strange my buttons are not all the way down there what you put but yeah so now they're all down sweet now it's all good now it's all good now it's all good okay sweet all right everybody still with me everybody still with me yeah beautiful of course you are because you guys are amazing that's all i can say to you all right and again guys let's go and hit that like button smash the like button help us out with the youtube algorithm that's it that'll that really we'll write 673 likes let's get to 800 that'll be great all right um all right so we got that portion look at this uh let's go and change up this button now the existing delivery button because it actually is different here pretty simple because we go to our section.gs here's our button all we got to do is just change the button color so the right button instead of doing here nothing the right button will be the following the right button will be background color of white background that's gonna be white boom oh that's cool and i'm gonna give it opacity to opacity right 0.65.65 we go okay and then we'll give the color of the text it's gonna be more on the darker side colors will be black there we go nice you see there you go now you got these two buttons and they look pretty good look at that look at that that's it that's all we just did we just did everything we need to do look at this huh how cool is that huh awesome all right so we're almost there now here check this out all we gotta do now this one is just replicate the same situation right so if i go ahead and go to sections now hold on yes if i copy this section and paste it everywhere all right if i paste this section check this out what's gonna happen we have more sections of the same sections there you go that's it now i want us to really figure out the one is like for example if i go small you see how the custom order just kind of like goes outside the boundary we can fix that too actually we can fix that very easily using like media queries right so so basically what we can do is on uh let me go ahead and take a look at let's go to section here you see button this button group right here this button group is it's actually fl flex direction row but if i would go ahead on the media what is what can do i can do media width like this so on the max with basically four four four like small uh max width of 768 pixels those are like small um screens i do flash just column and so they go into column basically meaning from top to bottom like this all right so to the side you see that just happened look at there you see right and how did this happen because when the width becomes 768 pixels you see it applies this right here css flash direction column that's what allows us to do this and that's it there's nothing crazier than that honestly all right so now here's the question now um how do we go ahead and make these model s stuff and make have all this stuff working differently right because what do we have right now it's just all panel s and of course we have model y by the way this is the one oh this is exactly the one i have by the way such a beautiful card look at this oh so good such a good car i love it the special is in this blue color it's so good once you guys agree with me like in a blue color like that's my favorite color by the way yeah uh anyways let's go ahead and do the following we have all these sections right and they're all the same so the question is like how do we make them different right how do we make them different so that they're all different i guess you can say um well we can just pass in something called props right and what are props props are like parameters for a function that's pretty much all it is it's a parameter for a function right so if we currently have the model s right and we have one section we can reuse this just change the title here so here's what i'll do i'll go to home or let's go i'll go to home here and for the section here look we'll pass in a few parameters it's just kind of like your passing parameters for a function that's pretty much it inside here i will pass in two three parameters so let's go ahead and do title okay not like this title is equal to what and this is gonna be model s right and then the description is all gonna be well pretty much you know delivery so the screw is going to be order online that's the description right here let me go ahead and make this better for you order online without just delete that description after that let's go ahead and do what let's do background image background image that's going to the model s one then we'll do the left button text right we have a left button that's gonna be the custom order and then the right button text is going to be existing inventory there you go okay let's go ahead and comment this portion out for temporarily okay because i want to show you how we're going to do this so this gets passed into props if i go into the section itself let's go ahead and go to section itself okay and i have props here they're basically like parameters if i just click console login because unlock props look this is i'll show you this for a second here so look props right click inspect element on this one and i'll show it to you within the console right here good all it is is props is just an object like that's all pretty much is and look at this all this stuff has been passed in right the background image the description the title and so forth and so now all i do is something like for example i do this i do the following what do i do i do props props.what dot title all right i save that browser title look at that look at that model s right here see the title like it was replaced by the actual title within the actual what the actual component right that's all we pretty much had to do okay now we can even be smart about this by being the following we can unpack this using something like this so i can do it like this title boom right there how cool is that okay okay how cool is that check this out so title is right there and i can replace this with title and all this done is this basically just unpacks this whole object this whole object has key and no key like background images so forth but this right here is called unpacking and we're unpacking the object to include to actually just get the get the actual keys that's that's all pretty much does all right so that's it let's go ahead and stop this for now good all right so we have that next one that we're going to unpack is which one that's a description good description which is which one comma description and we can use that here now description boom right there awesome you see again shows up right here okay beautiful just as just the way we like it okay next step is gonna be what the actual left button text so this is this one left button text right here that button text is going to be this one and then right there and then the right button text is going to be right here right button text so we'll use that as a prop as well okay right by text of course we do unpack them as well so we'll do what left button text copy that left button text right here comma right button text command c command v alright so we have unpacked all of these items inside here so if we save that right you can see you know still and nothing really changes but here's what can change if i go to home and if i uncomment some of this stuff okay now i have three different sections what i can do is just change the actual data so here's what i can do here inside this one i can give it the following here's my data here boom this one is title model.p y model one p y model.y that's the they ask the other one description order online background images now model y image and then left button text custom order and same thing here so if i save this oh look at that you see model y has changed now one thing has not changed is the actual image and we'll focus we'll we'll fix that in a second here next one let's do model three okay let's do model three now same thing you see so all we do is we're changing the props we're just passing different props and we're using the same html that's the coolest part about react.js good boom there we go save that let's see model three now again imaging does not change we'll change that a little bit okay next one model x let's do the model x one model x all right we'll do the following there so model x okay there we go okay model x all right same thing look at this model x you see it all just kind of works you know automatically no problem whatsoever now the one big thing we need to figure out is okay well how come the images are not showing well in the section because the image is the same right the image is which image it's uh this image right here that's a background image right um to fix that it's pretty simple actually let's go ahead and go to the home.js and inside actually let's go to section.js section and we need to pass in the actual background image you see we pass on this background image let's go ahead and copy this background image go to section and let's go ahead and unpack this right here comma unpack it right here unpack it so now we have it you know we actually have it inside our component and we need to use it somehow actually okay how do we use it well we use it by actually passing in um well passing in an actual component or a prop into a style component because you can do that too so we'll do bg background image background image background image and we'll say what equal boom right bg image that with a background image that's all and now all we do is inside what is inside our actual what our actual vga immersion wrap you see how we have the wrap here basically instead of doing this here's what we'll do in this case do it like this we'll say background image on this image okay let me just do it properly so you guys can have it let's see right here back on image okay and instead of doing like this i'll do like this okay props so we can actually get props inside style components we'll do props okay and after props what are we gonna say check this out okay dot dot we'll give a url here so i'll say url actually we'll do like this we'll say url and we'll be dash images dash dash the actual prop that we just passed in dash what that's what huh boom look at this tata look at this one that's pretty cool i will do props dot props.what wg image right there off the bg image cross wg image okay so let's see happens now so okay we have this images url and that has images is inside of that okay good okay let's see let's see let's see and then of course i think i think we need to close it as well let me go ahead and make sure it's all good so that's all good that should be all good url is right here that's the url back on yeah i think that's an issue all right let's go and say this background image okay cool now you're ready let's see if it actually changes anything so what's going to happen here we pass in the background image here voila okay then we happens then is that gets passed into the wrap style component right there see vg image then that gets passed to the prop so we have we get props from the actual style component now we have props and we set the background image using the prop so props url images props to bg image that's it save it oh let's go oh oh oh oh oh look at this look at this guys mother y model three model x how cool is that right we just pass in the props and now we have all these different components that are there for us to use look at this oh oh oh it's so good oh my god somebody help me how cool is that that is pretty insane i will say so what do you guys think so far what do you guys think so far let me see what are you guys thinking oh everything's working everything's working almost 800 likes let's go let's get to a thousand guys you guys are amazing you guys are amazing 800 likes let's go so again we're passing in props at this point and here's what we look at this we build ourselves a full on tesla i mean we haven't built the tesla clone just yet fully but it's getting there it's getting there it's pretty cool all right let's finish up the actual um section so i will go to here and i will do the following so let's go ahead and go to home.gs and we have a few more sessions we need to finish up right next one is going to be the solar panels section so let's do a section section section all right it's a solar panel section okay and i have it right here for you guys so you guys can kind of just copy this out yourself boom right there okay all right title lowest cost solar panels description money back guarantee like an image is this one order now this done let's see it now let's see it oh it's so good it's so good guys it's just so good so good okay next one solar for new roofs so that's another one we're gonna also also create right now so here's another section we're going to create you see how easy this stuff is is so easy to create now right because all we're doing is just we're using the same component but but with different uh parameters what it is now oh so good oh my god oh my god it's so good guys i don't know i just love these images i love these images that i can tell you next one last one is gonna be the accessory section which is gonna be this section right here last section accessories so feel free to cover this on your own by yourself as well title accessory description is nothing the left button is nothing and then right button text we don't have any of that as well let's go ahead and remove that nice let's go ahead and see okay now here's one issue that we found right so here's an issue we have the shop now button right shop now button and then because we only have one button here this created what issue well the fact that this channel is not the center which of course is bad so how do we fix that pretty simple if i now go to my section gs basically here's what i'll say if the right button exists only then while i go ahead and showcase it so here's what i'll do check this out i will say right button right button text okay then i will go ahead and do the following and then only then will i do this right there that's all save it look at this you see shop now but is exactly the mail because why before the right button was always there just it had the empty right button text but now now what happened is we just said hey if the right button text exists only then do you show the right button the actual right button but if it's not does not exist forget about it don't even show it and the left button is going to be the only one that's left and that's pretty much it okay look at that look at this is so good oh my god you guys this is amazing oh oh yes yes okay okay next portion we're going to work on is the header are you ready with me yes or no yes yes yes all right let's see who's here still with us let me see let me see beautiful everybody says let's go let's go if you guys still with me let me know down in the comments below let me know down in the comments below car animation yes there's a condemnation yes correct beautiful beautiful beautiful i'm just like cool let's go really good yes thank you thank you yes everybody's still with me that's what i'm talking about yes let's go hey that's what i'm talking about awesome guys let's go campbell's like cheeky picky that's what i'm talking about yes all right next up here's what we got we're at 780 likes you guys are amazing as always and i want to thank so thank you i'm going to open up some water for myself here and you can take a break a little bit here too there we go [Music] so good so good i always drink your water guys okay i also have this all right if you're still with me let me know in the comments below one reminder [Music] don't mind me all right okay one last thing we decided from one we have a boot camp that's starting june 1st ending date comes in a few days for you to be able to reserve your seat so if you are someone who's really interested in becoming a developer and you you are maybe you're stuck in tutorial hell maybe you were just stuck and just you really want to become a developer or you've never got the chance to become a developer and you really need the proper guidance full-size mastery something they created a while ago to go ahead and get that for you right you know ankh for example who just got his first job making seventy thousand dollars we have was apple martin recently you know who got his first job making fifty six thousand dollars right it's crazy right and they didn't finish the boot camp now i mean not they're still in the boot camp and we have two more people who currently have reactions internships are in the boot camp as well you know another one by name liz she got her first freelancing client making 15 hours it's pretty insane right what you can do we focus on a foundation you focus on building up your developer skills and just giving you the proper knowledge and giving you the proper guidance basically the whole way through you get taught by me and the five other coaches it's pretty insane if you're interested in doing something like this like i said it's a very serious matter you have to be dedicated with a minimum of 20 hours a week 20 hours of work per week if you're not ready for that don't even bother if you're you're not ready to put in time don't even bother also if you're someone who who who really thinks that you know oh i am just fully can do this by myself i don't need anybody else's help don't bother as well we are here to help people who want to be helped that's it if interested like i said see reservations down below doors are closing very soon to be able to reserve your seat they're closing actually in the next few days so if you interested go ahead and click down below and we'll be all good all right awesome guys all right let's get anyone all right there we go so what have we got we've got this now i want us to focus on the header that's what i want us to focus on now at this point all right uh let's go ahead and do this let's go ahead and in our oh this this whole git do add and we'll say sections sections for the tesla it's pretty funny for the tesla okay save that beautiful all right section of the tesla all is good next up um a few different things huh what are we gonna say what we're gonna do we're gonna do head.gs here's what we're working on now let's go ahead and put the header inside here right go let's go let's go the header is pretty big actually and it will require some a good amount of work guys okay require a good amount of work oh 800 likes that is pretty pretty awesome pretty awesome all right let's go ahead and import style components so import styled from style component style dash component there we go all right sweet sweet sweet sweet tweet good let's go ahead and do the following we'll do create the what create a container here like we always like to do container right there all right so create a container here as well all right let's go ahead and create this in there so import style up no no const container is equal to what style.what dot div there we go that's going to be the container okay and now uh for this container a few different things and this container will have the first thing it will have is of course let's think about it what does it have initially well a few different things let me go ahead and show this to you we'll have the header and so we need what we have the kind of like the um we have the logo that's part one and we have the menu that's part two and we have the right menu that's part three okay that's part three so we'll divide them into three parts let's do our first let's go ahead and do the logo okay i'll create a tag right because that logo will have we'll have a link and we'll give it a little an image right here look at this out image right here this is the image the image that's only so image source images logo.svg that's it save that let's see does it show up somewhere ah not really why because in the home.js actually inside the app.js we're not importing this there we go let's go ahead and comment the head.gs so we can actually use it beautiful hey you guys have a toaster look look at that it's a beauty it's such a beauty yes oh something happened that's really interesting i don't want that okay header nice all right let's go ahead and click on the menu so we'll do menu menu menu menu okay sweet so that's the menu okay menu is not defined because we're going to create this right now so i'll say const menu is equal to what styled dot div customize your style dot the viv okay also nothing crazy here let's go ahead and give some data or some styling for the actual container the actual header so the header will have a few things number one let's give it a min height min height of what of 60 pixels there we go okay 60 pixels okay good that's the min height right there see so it's a little bit bigger now that's good and you see it's white but we actually kind of want to be on the one position fixed so we actually want to be a in you know actually have fixed positioning and so to do that here's we'll do position fixed right position fixed means what means that it will just be here right here you see it's always there on the top no matter what it is no matter what no matter where where you are okay next um let's do the following to display flags to display flags to align a vertically to align them vertically center so display display flex right here flex okay good all right next up we'll do online items center oh that's not the one good now see the tesla centered okay good let's go ahead and give some padding so we'll see padding 0 20 pixels done oh okay good beautiful all right all right so now look at that it's pretty pretty much there look at that the tesla clone okay all right so that's all good uh the next thing we need to work on is going to be the what the menu the menu has a few different things um what does it have well you've got ourselves what model s model 3 model x model y that's what it has okay that's what it's got to make that happen let's go ahead and do this okay in the menu let's give it a p tag p tech and i said that that would be an a tag href is equal to currently nothing nada okay boom okay good and so that has the following that has let's go ahead and say for example like model s model s for now okay that's the model that's the that's the p tag that we're going to use all right all right let's go ahead command c command v commander so though might be what model x there's going to be model what is it where are the models here what is it the model s model 3 model three who's excited for the roaster by the way that's gonna be really cool model x i'm really excited for the roadster that's going to be a crazy car if model y is a crazy car model ass is a crazy car i mean all them are pretty much crazy i just can't imagine what the roast is gonna be all right okay good awesome sweet so that's pretty awesome all right let's see what happens now okay there we go okay um so what happens here is you can see we have the a tag which kind of makes it you know has underlined we can very much easily fix that by going inside the index.css boom let's give the a tag so let's target all a tag a tag and we'll do text transformation or text transform none what does that mean or text equation not so text decoration because by default it's underlined where is it right here that's the default one but instead we'll just say what none so if i say that see it's gone nice beautiful all right next one is in the menu you see how they're kind of one on one one on top of each other we can fix it also by using display flex let's go to menu okay and in the menu all we gotta do is the following it's just display flex it display flex display flex it that's how we do it and we'll do online items no no we'll do display flex which let's go ahead and save that nice beautiful we will do align item center good beautiful that's amazing okay nice nice nice line up center that center is it let's go ahead and also give it maybe some spacing i would say so as well uh and to do that let's go ahead and target the actual uh let's see uh p within this here so we'll do what font wait i will do what let's do it here let's do a font weight wait it's going to be 600 okay good nice beautiful and we'll do a text decoration text decoration creation that's going to be uppercase boom did now workout text decoration text transform actually text transform my bad transform there we go model s models three beautiful nice and then let's go ahead and give it some padding so for every single pizza i will give a padding so padding padding is gonna be 0 10 pixels 0 this in this case means top and bottom so basically top of bottom 0 left and right is 10 pixels that's what that means boom right there see right there see oh let's also do a flex wrap flex um wrap let's do no wrap all right to make sure it's not wrapped because i like the fact that it's wrapping like you know and so forth um i think it's just no wrap like this i feel like that ah maybe i'm wrong anyways so here's what we got so far which is pretty good all right um a few different things i want us to focus on as well what we're going to do is we're going to make this menu basically a full width so flex one so by giving a flex one we're giving it a full kind of weight flex one and then if i say something like this for example if i say just the content center check this out justify content boom i'll justify content center what happens here no nothing ah justify content align item center let me see here container display flex let me make sure it's all good why is it not doing so justify content center flex 1 why is it not because here's the goal i wanted to also fully be the full width here so if i do inspect element let's see what happens happening here right now okay we have this oh it's actually not the full width it's unfortunate it's actually because this is not the full width oh so you see this right here this is why inspector is so important sometimes guys you see the full header is not the full width of the actual page now to make that happen it's pretty easy actually check this one out try this one out so to make that happen all we have to do is the following um is we give it right here so this container you see this container the header is i do the following i say top 0 right that will stick it to the to the zero to the top okay that's left zero we'll stick it to the left okay now right zero is we'll stick it to the right meaning it will expand you see right there it says what happened it will expand the header with the full width that's what just happened you see that right there the header is the full width how cool is that right how cool is that so that's what just happened so now we have these specific models okay great the last the next thing you need to work on is going to be what well uh that's gonna be uh this shop tesla account let's go ahead and make that one happen too so that's pretty easy as well and again some of this stuff is also going to be like we'll change it up later on to make sure it's actually like you know the menu is right so now we'll do the right menu right menu right menu okay and inside the right manual there'll be a few different things we'll have first it will have ahref is equal to what let me go ahead and actually i think this shouldn't be p i think we should remove this stuff i think this should be just a tags honestly that's something in here same thing with this boom remove this just so we have an a tag there's no reason to have all these p tags so we just will consistent throughout the whole thing okay and you can use command d to make sure it's all consistent okay so ahref and uh it's gonna be nothing of course and this will be a shop okay okay next one's gonna be a shrap a shrap is gonna be equal to what is equal to each draft is equal to which one which is actually tesla account so let's go ahead and do that will be tesla account good good good good and the last thing we need to do is we need an icon that's like a burger icon right here so we'll do that in a second here but first i'm going to focus on the right menu that's what i want to focus on for a second here okay so let's do right menu so save that of course we have that does not define right now so that's not a problem whatsoever so we'll do menus this menu okay so we'll do a tag here instead of p make sure you're targeting a tag now at this point you see okay good all right let's go ahead and do const right menu is equal to what style dot div that's all it is okay um let's see here right menu is not defined yes it is you just need to refresh it there we go all right same thing we can do also the same thing on this one and also target the actual individual what the individual a tags using something like this boom you see save it hey let's go beautiful all right so that's that's pretty good i kind of like that so let's find way 600 textures from uppercase on the right menu padding let's go don't think i will remove probably is going to be like the the padding and also i'll do do margin margin right 10 pixels so now the sharpness are kind of more closer that's the only thing i'll do at this point and then let's go ahead and remove this donate this okay good i like that um the only thing that's pretty much we need to do is let's see let's see let's see it's going to be that the little hamburger menu that's what it's called so if i go to my tesla account you see there's a hamburger menu we can fix that so we can actually make that work it's pretty cool check this one out to make this one work it's it kind of works like this um we're gonna use material ui so material ui icons let's go install that one let's go here beautiful all right and here's our material icons and you just type in menu done here's our menu see right there dune let's go import this command c okay and import it into our actual what right here so import that now how do you actually need to install of course immature ui so to install into install materia core and material ui icon so let's go ahead and do install material ui right there there we go right here so the first thing to install is going to be i'm actually going to use yarn so i'm going to say yarn add material ui core so to do that let's go ahead and open inside integrate terminal right there beautiful and we'll do yarn add material ui course that's the core uh bits biscuit with your ui see that add that beautiful very very beautiful we're almost 854 likes let's go let's get to 900 you guys are amazing as always 900 likes that'll be awesome okay next one is going to be material ui icons and to do that we'll do yarn add material icons right here okay okay command k boom boom voila we're done okay while i do this i'm gonna drink my so good so good so good alrighty beautiful nice nice nice nice nice while that's doing hope you guys are still with me hope you guys are enjoying the build all the tesla clones gonna be interesting one i think i'll be really cool to build is actually the tesla clone dashboard you know how there's a dashboard where the tesla's used inside there that'll be amazing to build and we're working on that one as well so that's gonna be really cool um but yeah so many exciting things happening guys you have no idea oh there you go all right let's see so that's all good now to to use mature ui we've done already here look at this we install material ui and now we just import the menu icon that's the only thing we now need okay let's see [Music] i thought it was pretty funny don't you guys think so yeah i think somebody right guys let's go ahead and continue on you guys are always as always are amazing [Music] someone said party code you know it that's how we do it all right all right guys so is math important for coding no it's not i'll just answer that for you math is not important for coding at all in fact it's you don't need it at all like zero zip not knowledge nothing just so you know all right oh beautiful all right now at this point let's go ahead and add a menu icon we're going to create our own menu icon because uh we'll change the styling of it so we'll say custom menu custom menu right here right here and we'll use the menu icon like so so let's go ahead we'll do right here so const custom menu is equal to styled styled what styled nope styled what style menu icon style menu icon right there see style menu icon okay now what can i do with the style menu icon really nothing i'm kidding it can do a lot so here's what happened here check this out oh it's so good that's so good all right beautiful i like it um for the right menu let's go ahead and display flex it so display flex to make sure it's all align center so display flex display flex okay beautiful and we'll do online items center just another center i don't think there we go display flag center align item center there we go it's right there on the menu icon we'll do a cursor pointer cursor that is going to be a pointer good good good good good good good good good good good cursor pointer refresh it oh let's go and nothing's happening so far i don't worry about that just yet okay now another thing i want us to focus on is going to be look look at how by the way guys just want to say how good this look already look at this guys this is sick this is amazing so proud about one thing i want to change you see how this model actually gets squished well we're going to make the change that you know whenever you get to a small screen you just remove it now to remove it again how do we do the last time we're also going to use uh media queries just how we did the last time right and with media queries it's pretty simple you just do like this try this out so on the menu group on the menu on the menu right here so we'll say what media again max with us 768 pixels meaning basically when we get to 768 pixels browser width we say display none on the full thing so save that boom right there see oh let's go boom now what's happening here you see that shot past the account for some reason is doing this thing where it's like going all the way to the left hand side and we can fix that by what go into the container and currently we say align item center but to make them space out we say justify content content and then we'll just space between that's it wind there we go look at that oh oh oh yeah there we go so beautiful i love it so how cool is this guys huh that's pretty pretty amazing 893 likes guys you guys are amazing 900 let's go okay so that is all good that's cool good all right the next thing i want to focus on is you know how inside if i refresh this page it has like this really slick animation and it's pretty cool i kind of like it you guys want to install the animation i think so too so how do we make this animation works it's going to use it called react reveal check this out react reveal and all this is just a module it's basically just a module for react uh for animation library you see this pretty much anything you want i mean we can even use different effects if you if you wanted to there's a zoom effect and so to creationally add a fade effect it's pretty simple you just you know you install react reveal like so right and then you do what then you do basically you add not zoom but you do see where's the fade i want to do fade home fade fade fade face fade effect there we go right there fade left you know you just give the fade that's pretty much it that's it see that's all happens so let's go ahead and make that one work that's pretty cool um if i have my model s here no matter why yeah that's cool all right so open up in terminal right here and let's do yarn add yarn add and what react reveal let's see one more time tutorials instructions react reveal right here react reveal so you're an ad direct reveal boom adding that to the react good good good beautiful nice okay all right now that that's happening all it's gonna happen now at this point let's go back to our react reveal let's go into the fade effect we need to import the fade right here so import fade okay let's go and import fade here on this is the the let's go ahead this needs to be done on a section so import fade here boom and all we need to do is now just basically you know group the fade of what you wanted to fade it's as simple as that right so here's what i'll do on the item text i will say the following i will say fade where is it where is it i will say here fade faded i'm so faded fade bottom from the bottom boom and i will give it a round this could be around the item text boom okay let's see it now oh how good is this check this one out guys all right i like that next let's go ahead and do around the bottom group right here so do the following so we'll do fade same thing also bottom boom oh so good so good sugar oh my god i love this this is so good oh i love that the animation is so good i mean who doesn't come on guys come on come on come on give me a break come on how good is this huh how good does this look i mean if you're not getting i don't know what's going on with you you know so i'm getting very close okay the next thing i want to start working on work on is going to be what is going to be the actual um kind of sidebar right so the sidebar that kind of comes up from here when i click on this we need to have a sidebar that comes up on the right hand side okay um so let's make that one happen sidebar is what called a broker nav menu um and for now let's go just let's go ahead and just create a program menu and that will be done so the head.gs right there so let's do this so burger burger nav okay and this one will just have a bunch of like for example like items so here are the items they should look like so we'll create a few items like this for example we'll say we'll use uh ally elements so we'll say li like this and we'll give an a tag so we'll say a ashraf is equal to nothing so far okay nothing so far but inside there for example we have things like existing inventory inventory right we also things let's go ahead and copy this right here so command c command v commit uh command v command right uh we have a few different things that we're going to say so in the same inventory we have used inventory right for example used inventory we have for example trade-in right trade uh trade dash in you know and so forth and so forth let's go ahead and maybe modify some of these right here babies oh the cyber truck who's excited for that one cyber truck right here there's maybe the roadster that's a pretty cool one too right there and so what we're building right now is pretty much the following right we're building this menu boom this menu on the right hand side that's our building right there oh this money on the right-hand side everything else will build now we just need to go ahead and focus on that one okay uh you can see these where they have model x use inventory that's just pretty much those items right there all right awesome sweet so we got that portion that's so good um and the burger nav of course is not existing right now so we need to create that so we'll say const const what const burger nav burger now is equal to what burgernav is equal to styled.div right there all right oh that looks hideous don't worry about it guys okay so don't worry about this so the burger now right now uh let's go ahead and do the following we'll just put it on top of everything else that's that's kind of needed all right um so for one it's gonna be position fixed so position fixed why because it's always in the top no matter what right it's always gonna be where on the right hand side right always going to be here no matter what page you're on okay so there's no fixed now where i'm going to say top 0 right i'm going to say bottom 0 to stretch it over to the bottom and then i'm going to say right 0. that will take it all to the right hand side boom okay you see now to the right hand zero good next all right at this point let's go into background color back background white nice you see so it's kind of getting there a little bit all right so it's background white let's give it a width width oh 300 pixels good nice okay i like it good good good let's also give the z index because obviously it's like kind of like i think it's kind of like the index so does the index of like 10 100 let's see is it 100 um i think it's because in that case we need to go ahead and make everything else is the index of smaller that's what we need to do in that case so that means that everything else oh man that's a lot okay so the whole section now let's do this let's go to section how and this right here will say z index index of 10 let's just say would that change anything because i want this to be on top you see what i mean i want it to be on top is what i'm trying to get to let's think about it here [Music] the index 10 that's gonna be maybe negative one negative one no that's not at the index of let's just say the index of ten so what's what's being overwritten so let's see okay let's see let's see let's see let's see so well for one is the item text so i think we need to focus on item text here so let's do item text let's do this one it's gonna be z index it's gonna be 10. come on give me something so item text z x minus one does that mean the home just needs to have a smaller z index i'm just trying to think here guys what do you guys think here so home maybe this is going to be easy index of 10 maybe no did not change nothing okay let's see how do we go ahead and make sure that this kind of works the way i wanted to so z index of 10 what do you guys think you have any suggestions and we have any suggestions sometimes refresh no home 10 it's max but do 10 for sidebar okay so for sidebar let's try that for the header for the burger now let's try that i mean i can't do anything like let's see still not nothing [Music] [Music] how do we fix the z-index issue the index of let's try this the init of 16. i'm just thinking here let's see easy index oh maybe it's this other contain really let's see if i go to here and i say this container is z index of one oh what the heck oh that makes sense oh so we actually so it was competing the weight was competing not with everything else it was actually competing with the actual header which is the container which is above it because this remember this broken app is within this so in order to have this show up above this the container we need to give this as small as the index and give this one a zenith of like 16 let's say okay that makes sense okay so there we go all right so cool we kind of got that that's pretty awesome i kind of like that don't you agree okay so now let's go ahead and focus on we have the index okay let's do the burger now and top zero with that's good that's good now okay let's go ahead and remove this list out because it's horrible list style it'll be none okay good next let's do padding 20 pixels to give it some padding all around good nice nice nice nice nice nice nice okay paint 20 pixels then let's go ahead and do the following then we'll do back around no no no so the list style is kind of like not the way i wanted to because why because it's centered which is not what i like so to make that work i just do display flex on this one just place the display flags on this puppy there we go good and then we'll do flight direction column got there ah it's still okay don't worry and then uh we'll do what flex um justify content justify content okay flex start good oh like this like justify content really come on really nothing is it text online text align what start okay never mind you don't need this livestream column in that case i mean that could still be useful actually but we don't need this one so texas line start which is good which i like okay uh let's see where are we at so on this one we have model three model s okay i like that so now let's go ahead and focus on each line so li okay so a lie on this one we'll do the following on this a line we'll do so we'll have padding top and bottom padding 15 pixels for every single one and then left and right is gonna be zero for now okay and we'll give it a border bottom boom right there good okay good and we'll give it a tag so on the let's go ahead and see let's see now oh let's go that looks good that looks good okay i like it i like it i like it let's go ahead and give it and the tag let's just give it a more of a font weight so we'll do font weight weight font weight by the way we're almost at a thousand likes guys come on let's get this party started fund weight 600 good ay let's go now of course now the thing you need to work on is how do you actually make it work so that it actually shows up properly you know what i mean because right now it's just kind of there right so right now it's just kind of there um yeah it's top right bottom zero you know and how we need to hide it somehow so how do we hide it well for one let's go ahead and add an x button so in the material ui icons it's going to find a find material icon so let's do material ui icons material let's find an x button x there we go close okay good exactly what we want so close icon all right all right oh look how good this is guys oh my god it's so good okay let's go ahead and import our close button here okay so inside the broker nav we'll create we'll actually go ahead and do this close button right here oops oops so we'll do um we'll do what custom close so we'll say this custom close custom close so it's going to create a custom close button and how we're going to do that well by using style components so let's go here const custom close is equal to what styled uh no styled what let's see style close icon right there there we go close icon good nice okay good gotta go i like it okay uh let's need to actually make sure this one gets aligned not there but actually somewhere else so to do this one we'll do let's see let's see let's see just kind of thinking here and this one we need to wrap it in that case so let's do we'll create a closed wrapper close wrapper because we need to actually shift this to the right hand side right so if i go ahead and do it this way so i'll get this bishop to here right we need to put that here you know to shift that properly how is it going to work well to shift it properly right i'm going to create a div around it a wrapper and then display flex it and put it here that's i'm going to create it okay just so you know that's a pretty good way of doing this kind of stuff right so just so you know custom close okay so if you want to like align something remember this rule wrap it if you want to align something wrap it you need to there's always need to be a parent wrapper in order to align something vertically horizontally left right whatever might have to be right okay close wrapper let's go ahead and create that close wrapper right here okay so close wrapper so const close wrapper is equal to styled dot div now look at this one now you see check this one out okay all i do at this point is very simple i say the following i say display flex flex and here's what i do check this one out okay let's play flex and we'll say um justify content content what flex end boom right there see just as simple as that that's it and now that's there okay next up let's go ahead and do the following we'll do um let's do on the actual custom close we'll do what cursor pointer pointer save that nice right there there you go beautiful beautiful good good good good good awesome sweet look at this oh my gosh this looks good guys this looks so good all right who's still with me you guys still with me i hope so let's go all right all right so we got this portion now we need to figure out how do we close it well we're going to use use state to make sure that we understand when is there when there is a closing factor or when there is an open factor right so for example let's go and do this let's use your state to figure out when i click on this i'm going to trigger a use state to say hey you know i'll close it right if i open it i'm going to say that we have an open state now that's what's going to happen now okay so let's do this i'm going to say you stay it's going to open import you state here use state beautiful okay all right nice nice nice nice and at this point you just feel a few very simple things okay god this is so clean guys by the way such a clean such clean coat which i really love by the way all right so we have use state and the site here let's do the following boom and we'll do const here i'm going to create our use state so we'll say burger status so for the burger i'll say open burger open or sat um said i'll just say booger status i think it's good i kind of like that one status right there and with a set burger status at brooker stat this right there it's equal to what use state initially we'll set it to false so right now right now it's actually closed so story status is closed right there right so that's what's going to happen okay so process is closed now how do we go ahead and make sure that you know that this stuff is actually closed or open well very simple is what we can do is the following so look at this on the burger nav i'm going to pass in a wrapper here i'll pass in a parameter here and this can be show is equal to the status of the burger status say burger status burger status right there i guess that is inside the burger now we're gonna have all i'm going to do is check this one out i'm gonna say for example here um if we have so look at this one i'm going to transform it some say transform check this one out transform okay i'm going to look for the prop so props like so but we just have done before and basically here's what we'll say if if it says prop start show props dot show right it basically says props or show we're going to do what transform you know nothing so here's what we'll do we'll do ifssprops.show we'll just make it you know show basically um translate x0 so here's what we'll do so translate translate x oh it needs to be like this right here translate x 0 and what does that do so if i go to translate x go ahead and do it this way otherwise we'll do translate x 100 translate x 100 okay okay let's see so right now it's false okay oh now it's false okay so what just happened let me see and make sure it's all good let me see i think i need to actually go hey let's go so now now look you see so right now translate x basically if it's show we have translate x0 so translate x what does that what does that pretty much do um let me go and show it to you tran is late x right here look at this one guys this is pretty cool right so i can move something basically so right here for example i can translate x 10 pixels i'm going to translate 10 pixels to the right hand side right and so what's gonna happen is is the following if i go ahead and actually if i do for example if i do show and i say here a hundred percent boom let's go and see this see this see this props does show is it working at all let's see am i missing something um processor should be false if it's false i think it should be translate zero yes yes yes yes yes there you go so let's get this out so this will do if props does show basically we're not part of the show is false right now of course so what's gonna happen is it's going to translate what zero it won't move it at all right right so that's going to happen if it's false it won't move it at all that's that's that's that's kind of what happened of course but we're going to say this if it's false what happens actually if it's true if it's if we say props dot show right then we actually need to move it not nothing because basically we do nothing right so if it's true we don't do nothing to this right this stays the way it should be right but the second this is false this is false we need to move to the right hand side it's full width right here see that's why he shows it that way now check this out what we can do now at this point is we can have another click so when i go ahead and i click open so this come on click button so unclick unclick is equal to what right tata when i say right well i'm going to say what i'm going to do the following i'm going to say sad broker status to true that is to true so set it to true okay true so means if i click on this i know icon set the progress status to be true minis mini open so let's try this right now oh look at that see that means open right there how cool is that that means open okay now closes now work right now because of course close nothing right so now to actually change that to make that fully happen what to do on the on the click of this one what we're going to say is equal to what boom we'll say what status what cyborg status to what to false there we go look at this now right so now we change it to false i'll do this how cool is this guys burger status is now officially what officially now true or false now again this is where we now make it very beautiful look at this one let's go ahead and make it very beautiful now okay guys how good is it starting to look aren't you aren't you pumped aren't you like like excited for this and by the way we're almost at a thousand likes guys 977 let's go ahead and make sure we have that you know let's get to 1k it's not that much come on you guys got this it's been working really hard now all right so that's good 977 likes let's go all right to make it flow very nicely we just add a small transition tool check this out you see this transform all i do is look transition i say the following transition trend position and i do what on the transform factor transitions form and i will say what 0.2 seconds i'm gonna say ease in right now you ready for this my friend are you ready for the reveal all right oh look at that boom boom boom boom boom i kind of want to make it even better though i kind of want to make it look even better let me see let's see i want to say ease and ease out i will say easing is dash out i don't like that better no here oh that's not it hold on um let's see there we go much better i like oh let's go that looks so good how cool is that guys let's go ahead and give us a thumbs up for the following and we're at a thousand likes you guys are amazing as always just want to say something easy now thank you hey let's go how cool is that beautiful it looks so good okay now let's go ahead and actually add some data to this right we're going to add some redux to this all right but pretty much look at this we're almost pretty much done we're so close to finishing this a tesla clone uh it's so clean the the code is clean that's the really cool part about this all right um a few things now we're gonna do is the following let's go ahead and add some data to it about like our cars right so as you can see here we have for example you know we might have cars for example car titles so here for example model s and so forth right model asmr and so forth now let's go ahead and create uh our redux store that will contain the cars that we will be using here okay we'll be using here so here's what we'll do let's go ahead and look at the redux the component that we need to create so let's go features and the one that we have currently is like a weird one that's like a counter feature we don't need that one at all so we can actually fix that one let's go put it at the hand side we can't fix that one um don't get the counter instead let's go ahead and create a new folder on the features folder and let's call it for example car slice car slice right there okay counter you can remove that one so let's go ahead right click um delete move to trash now we only just have car slices that's nothing we need so inside the car so let's go ahead create new file and what actually now let's do let's see uh let's rename this to car rename this to car not car slice car and inside here we'll create a new file called car slice car slice dot gs beautiful okay all right let's go to our app go to store and remove this counter reducer because we don't need that one okay okay good on the counter slice on the car slice all right we need to of course import redux toolkit so let's go ahead and read the import redux toolkit for create create slice and what slice is is basically in redux is imagine reading is like this whole state of data that you have right imagine redux is like for example you know where this is this whole state right and the slice is just one smaller state right one small one piece of the state so in our case our slice will be for example just car for now and that's why it's called slices right it's like a slight slice of pizza right and every single for example when you're trying to save data in the global state of the whole website right you might have a car slice you might have an inventory slice who know for example right inventory you know and so forth and so forth and all that is just data that's shared across all your web pages websites all your pages on your site that's pretty much it okay so let me create a slice that's what's happening here all right beautiful let's go ahead and go next the next one we'll go ahead and do is we've got the car slice that's great um let's create initial state so we'll do const initial state and we'll give it a few cars so we'll say um cars i'm giving the cars right here and this will be actually an array of objects x just actually just honestly just an array of cars so say for example model which one what do we have model s model three right model s model 3 model x model y so model s model s model 3 okay model x model x and then model y model y there we go all right so we got ourselves the cars okay let's go ahead and now get this car so to create the actual slice we'll do const car slice car slice is equal to what's going to create the slice right we'll create a slice of pizza right create slice right there and that takes a few different things the amount we're going to name it let's name the slice right there this could be car for now okay and then we'll give an initial state and then she'll state right there okay and then we'll give a few reduces now we don't need any reducers at this point right because our goal right now is just to get the cars that's it so we don't need anything like that of that sort that's way too complicated instead once that well what we will however do is we'll get the cars themselves so say export const and the trajectory or how usually you do it inside slices inside without toolkit is you for example do select so it's like selecting a piece of object selecting a piece of data so in our case i'm selecting cars right here okay is equal to what is equal to state is equal state and then it's going to return to me this will turn to be the state state.car the car is the name of the slice right here dot cars that's it that's going to be this right here that's with this whole array that's pretty much it okay so this right here is mapping directly to this right here and select cars will have that for us that's it and of course we're going to export now default uh we could ask for the reducer because we need to actually access some kind of reducer even though it's empty default and we'll say car slice dot reducer beautiful nice all right once we've got that we need to actually import this let's go ahead and go to store and we'll do import import and this will be the car reducer so we'll say car car reducer right here from what okay we need to go back now we need to go into features let me go ahead let me see this i need to go back let me go into features right here and for that we need to go into the car right there car um and then we go car slice beautiful right there and so instead of this kind of reducer we just change it to car reducer car is gonna be car reducer right there right so that's pretty much all you have to do on the redux reducer side okay so just keep that in mind always okay guys uh you know the store you tell what producers you have okay the slice is basically every individual reducer you can see right individual slice and this contains the actions and i'm not going to go deep into redux of course that there will be another video of itself um but redux there's always a few different things we also have we always have the initial state that's a state that you will have when you initially start the application and you will have reducers and reduce strategically just functions you can use to manipulate the state maybe you have a function that will add a new car you know or something something else so that's what kind of the redux reducer is there for right there's also actions but we'll talk about those later most important thing is the fact that we have select cars which will get us the cars individually okay nice okay so all right at this point we are pretty much almost done let's go to home.gs and what we need to do is the following let's go to section here section here uh no actually not here uh header header right here we're going to import our car slice so so let's go import import okay and we'll say select cars right this will give us the actual car select cars from from what from features right here slash car slash car slice good and we need to actually import you selector so in order to select something that's usually something called the use selector which is a hook which is a react hook right here good good right here so you selector and then we're going to select the actual car so we'll say const cars is equal to what use selector from what well select cars boom done you see that's it right we've started the cars from the actual use selector right so if we now console.log it that's going to consolidate the cars cars okay console login right now let's go ahead and right click inspect down on this one console let's go ahead and see how this works out let's go ahead and refresh it it says legacy context api has been deducted within this restrict mode 3 don't worry about this one but look at this here it is model s model 3 model x y beautiful that's all we need to do let's see this is some fade stuff we don't need to do this one should mitigate to the new version all the piano will be 24 that's fine right so right there here's our array and now all we do is for example for this which so now here as we'll do if cars cars and and cars dot map right i'm gonna get the individual car car and then i'm gonna get the index boom done all right enter karma the index and then that's gonna give us what okay good so then i will go ahead and do a shrap doom right here i will give it some kind of a thing like this okay that closes that beautiful there we go so model s okay now check this out all we gotta do now at this point is just give it a car ah oops car and i can remove this now done so now let's see oh let's go another thing we want to figure out is give the key so because if i right clicked inspect them on this one the console here see it says each child in the list should have a unique key the reason why they do that is because react actually tracks individual child by the key so let's say any changes happened it will know where to make those changes i'm going to do that by using the index like this right there see so if i inspect them but now okay the console and let's go ahead i refresh this again see the child is no longer that issue is no longer there beautiful let's remove this console of cars guys we're almost done so close to being done and finishing up this tesla clone that is pretty pretty insane i will say all right and the next thing i'm going to do is i'm we'll do the same thing with this specific situation here with this cars and i'll put in here cars that map but in my case i'm going to use it like this boom and this will be the actual car itself car right there and again a lie and then we're going to give it a key is equal to the actual index boom boom boom boom don't need any of this stuff boom right here that's that's it and so this is going to be that let's go ahead and take a look at that one so cars down map so let's go see oh would you look at that guys look at what we have got for ourselves let's go ahead and do add and that's going to be uh redux for cars right there but yes cut b look at what we have got four ourselves whoo oh my god look at that guys look at this model s model three we have some beautiful animations look at that oh my god two two two two all this stuff and if you compare it to an actual tesla page i mean let's go ahead and take a look at the tesla page actual tesla page let's take a look at it here look at that like what like okay just compare it here like hold on look look like what guys do you see the magic that we have just done like can you tell the difference i mean yes we have this fancy feature like the scrolling feature we can work on that later but look it's there i actually hate i actually hate this kind of um slim features or like where they you know they don't allow you to scroll i hate that oh let's go look at oh my god how good is this guys this is so fresh so clean you know it uh guys that is pretty pretty insane wow wow wow looking dope nas jessica's dope that's awesome sweet howdy hello colleen let's go let's go beautiful so what we've got like i said we've got everything we finished the application it looks so good it looks clean model s model y model three model x guys you put this on your portfolio it's gonna be a winning portfolio for yourself this is going to be a winning portfolio put this on your portfolio you're going to just it's going to be so good that's all i can tell you all right look at that oh my god yes oh my god it's so good that's so beautiful guys that's pretty much it from me uh hope you guys enjoyed the build like i said guys if you're interested in actually joining the boot camp and to join a bootcamp actually become a developer link is down below in the description to go home and reserve your seat all it is is you just put in a small deposit just to go ahead and join the boot camp more information about the boot camp is on cleverporter.com you know uh on cloudport.com which is actually right here if you go to cleverblockcleverprogram.com let's go and see this right here go to coding bootcamp and you'll you can learn more about the koni boot camp or you're right here right so we've been at this for quite a while some of you some of our instructors and students have joined so many amazing companies look at this right and so forth so if you're interested go ahead and check this out and then you click the link below to go ahead and put in your and reserve your seat like i said see reservations close very very soon uh actually by june 1st we have seen reservations closing so you won't be able to join any more at this point um but that's it from me in that case hope you guys have an amazing day let me see how you guys are doing let me go ahead and comment with you guys show store the gs everybody somebody said show the gs okay sure i can show that no problem to show store the gs so the gs resistor the gs right there that's it there's nothing crazy about this guy store the gs that's it that's it store.js right here like this car reducer that's all it is you have to import the reducer right here and then set it right there that's all you gotta do okay that's pretty much it guys look at this by the way i don't know if you can see this but this is also uh oh this is actual tesla phone this is actually also like user friendly too not user friendly but mobile friendly as well which is pretty insane oh so good so good guys who think this is an amazing build who enjoyed it let me know thumbs up the video if you enjoyed this specific build i sure did i really did actually it was really really good it was really good let me see all you guys saying here all right nice there's a building for jingle clone that's going to happen definitely sweetness thank you awesome adrian i'm happy you enjoyed it nas let's go muhammad yes go super thanks nas awesome sweet thank you thank you thank you some set luisa elbow cough that's awesome uh with portfolio yes i do mean github put this on your github put in your portfolio because some people you might have portfolios where you showcase the actual application so definitely put that there let's see super clean super fancy i agree with that nice nice nice nice night let's go nice let's go lulac is currently in full stack mastery let's go hey hey let's go look i love you too bro super clean now that's what i'm talking about there's two kid that's an actual an import that's going to take a look at this on google.com it's an import guys it's a new way to do redux it's pretty awesome thank you so much i'm not number one fan oh let's go daniel okay thank you i'm your fan i'm your number one fan number number two maybe number two fan [Music] oh my god all right guys that's it from me uh hope you guys have a great day and i'll see you in the next video

Channel: Clever Programmer

Views: 134,175

Keywords: software development, learn web development, full stack developer, web development tutorial for beginners, web development, web developer, how to become a web developer, web development 2020, web development guide, web development tutorial, web dev 2020, web design, web development projects, web development roadmap 2020, web developer salary, web development 2020 tutorial, web development roadmap 2021, 2021, javascript, javascript tutorial, react, css, html, clever programmer

Id: lUeS9Wsj6dk

Length: 135min 40sec (8140 seconds)

Published: Fri May 14 2021