Creating a Powerful E-Commerce Search and Filtering System with React

YouTube channel so in this video we are going to be creating this project by just using react.js which means like we're not going to be using any back-end services like mongodb Mongoose and expressjs and all of that kind of good stuff but instead we are going to be just building this project by just using react yes so this is not a huge project to be honest but we are going to be rendering a few components and we are going to be learning about how we can do a filtering in react.js so like we can filter items through search and we can also filter through this buttons right here and also these uh what do we call it custom radio buttons and all of that kind of stuff so let me just show you what this project is all about so let's suppose if I want to search for a specific product like I don't know I'm going to search for this one so if I just type the Nike so I'm going to just write like n i k e so here you can see it from Long uses all of the products right here which Nike has so I'm going to just write space and then I'm going to just write for zoom and here you can see it run log uses this specific product which I'm searching for okay so I'm gonna just clear that and here you can see it will not gives us their products once again and now if I just click on this Nike and here you can see it from now gives us all of the products which Nike has and now if I click on and by the way all of this data is totally random and they aren't specific Nike and Adidas and you can provide a specific products for them but for me I just put random images of shoes and sandals and stuff okay so you will found a link in the description below if you click on it it will bring you to my GitHub repository and you can download all of the code or you can download their um dp.js file and then you can grab like all of their arrays of data okay so if I just click on this edit dance it will now give us all of the products of Adidas and once again all of these products are totally random like I don't even know the names of these and here you can see we just specified the amount of stars they get and also the reviews they get in the previous price and the new price and you can change there however you want and I'm going to also show you how you can provide that functionality in this app as well if you click on the van certain log uses one of the product which this man's have okay so this is the second filtering this is the first one this is the second filtering let me just click on this all products right here and here you can see it will not use all of the products if you click on this all one more time so here you can see it will now gives us all of these products if you click on the sneakers and here you can see it will just gives us their sneakers if you click on the flares it will give us flares if you click on the sandals and it will give us the shoe this shoe and sandals as I said like all of the data is totally random but you can specify like different kind of images for the sandals and I'm gonna also show you how you can do that if you click on the heels so here you can see it on Long uses heels and you can also filter through you different kind of prices like if I click on this all it will not gives us all of these products which um these Pro prices like random prices we have if you click on from 0 through 50 it will give us all of their products which has this 50 uh what do we call a 50 price right here let me click on 50 300 it will now gives us all of the products which are 5300 and we have 150 and we also have Uber 150 so here you can see the prices and you can also change there however you want all right so that's there now you can also filter through the colors if you want to so I'm going to just click on all and here you can see if unlock uses all of the colors but if I want to just get the black color I'm going to just click on blank and here you can see it now gives us all of this black color and I mistakenly put this one right here inside a black color as well but anyways that's also awesome you can also change that if you want to and now I'm going to click on the blue it will not just gives us Blue Products and if you click on red it will just gives us red products right here if you click on green it will just gives us these green products right here and finally if you click on a white so here you can see it will now give us all of the wired products right here I'm going to click on this all products one more time it will now gives us all of these products right here and so this will be a good build and this project will help you master different kind of techniques in reactors like different kind of ways to filter through a data using just react.js so we are not going to be using any Redux toolkit and all of that kind of stuff but we are going to be just using react.js and also react icons for these icons and we are not going to be also using any um bootstrap react bootstrap and also we're not going to be using a what do we call our 10 and CSS and all of that kind of stuff for styling I'm going to be using CSS just a pure CSS if you don't want to write it so you can also get all of the styling from my GitHub repository and by the way all of the code will be available in the description below you just have to click on that link which will bring you to my GitHub repository and there you can just assert through different commits or you can also get all of the code if you want to or if you want to follow along with this video feel free to do that alright so I'm going to just start from the very very Basics so here you can see I just opened my terminal I'm gonna go to my desktop first of all and here what I will do is that I'm going to just write npx create react app I'm going to just give a name of like Advanced filtering or something like that I'm going to hit enter and it will not just generate their project for me all right so now here you can see we've generated or create drag amp so what I will do is that I'm going to just write a CD and this Advanced filtering project and now I'm gonna just you know I'm gonna just go back first of all and I'm gonna just write code and then I'm going to just write Advanced filtering and now I'm going to hit enter so here you can see it will now open this project right here inside this window right here okay so I'm going to just zoom in a bit so that you guys can see everything a bit better and I'm gonna just hide that up above from me there all right so here you can see my sidebar is right here if there annoys you so you can just I don't know you can just right click on it and send it right here you know I'm gonna just stick with this setup right here because for a lot of developers that would be preferred where to go and what I will do is that I'm going to just remove this air.css file and also this index.css and not this index.js file but just this logo svgs and all of that kind of bad stuff not bad stuff to be honest so now I'm gonna just go inside and I I'm going to remove this GSX from here and I'm going to just write H1 uh let me just write h21 right here of hello world right here okay and I'm gonna also remove this logo from up above and also this app.js or app.css file I'm going to remove their Wireless from here and also their react strict mode as well remove this one and also this one now I'm gonna sell my file and now what I will do is that I'm going to close this one out and I'm going to just write npm start to start my project right here okay so I'm going to just wait for it to start my project it will not okay would you like to run the app in another importance okay we've already opened this one so I'm going to just close that in a few seconds so I'm going to just close that in a second and then I'll come back now let me just close the hit Ctrl C now I'm going to just use npm star so it will now just start this project right here inside this window and what we are seeing is this hello world right here which we've run inside this app.js file right here okay I'm gonna just close this one right here from here all right so that's there the first thing which I would do is that I'm going to create a folder right here and I'm gonna just give a name of like DB and inside this DB folder I'm going to just create a new font I'm going to give a name of like data.js and inside this data.js file I'm going to grab a lot of things so I'm gonna just grab that and I'm gonna show you where you can found there here you can see I have all of this data right here inside this project and you can found all of this data in my GitHub repository so it's not much but here you can see we are just getting this data array and inside this data array we have just a few objects right here and we are storing the image property and we are just specifying different kind of images to it and we're also providing a title for a specific product and we have a star which is just a icon which we are going to be installing right here and I just provide a class of like rating star and here you can also see we have reviews and I just borrowed like one two three you can provide how many you want then we have a previous price and the previous price is this one or used to be this one and the new price is 200 or something like that and we have a different kind of companies like Nike and we have I don't know different kind of companies like Vans and puma and stuff like that and then we have different kind of colors and also different kind of categories like sneakers and heels and I don't know there was a lot of them so what I'll do is then I'm going to copy all of their content and I'm going to place it inside this project right here so I'm going to just sell this file and this is a lot of items right here and you can specify more if you want to and now I'm gonna just cut this data dot JS file right here and I'm going to close this DB and what else do we have to do the first thing I would do is that I'm going to just create a components folder where we are going to be storing just our custom components you will see that just in a second so I'm going to just write components there we go and we are going to be creating a few components right here so I'm gonna just write button.js and I'm going to also create a new component I'm going to give a name apply card.js then we have another one which is import uppercase input.js there we go and I'm also using this extension car let me just open that extension uh this es7 and rear can redex uh so let me just click on there and I'm also using this extension if you guys don't know about there uh so feel free to check on my react.js course or you can just click Google search like what is that uh extension I was talking about so now I'm going to just close there and I'm gonna also place this import statement right here and let me just import it right here so let me just zoom in a bit so you guys can see everything a bit better I'm going to use RFC and I'm going to just cut there I just like it that way if you want to put it right here like this import serum right here so feel free to do that but in my case I just kind of want to work with this kind of structure so I like the structure I prefer this structure uh and yeah you can choose like export Sermon Just in one liner but in my case I'm going to be using like this and now I'm going to just write like 100c and I'm going to remove them let me just copy it and I'm going to place this input right here at the bottom so now we successfully created this card component input component and that button component but we are not going to be using it right now so say bye to this components folder right here so now the next thing which you're going to be creating is that we are going to be creating a navigation section then we are going to be creating a product section then recommend it and inside there or not inside but we are going to be also creating a sidebar so let me just create a new folder I'm going to give a name of like navigation there we go and now inside this navigation I'm going to first of all create a nav.js component and I'm going to also write like a nav.css right here as well okay so I'll just write like uh R A or RFC and I'm going to remove them and I am going to just write my navigation right here okay and I'm gonna also import my CSS inside this file one more time as well so I'll just go one level and then now.css so we are going to be placing all of our CSS inside here so what I will do is that I'm going to render this component to the browser so I'm going to just use it right here remove there and I'm going to just write a nav right here hit enter and it will now grab this snare from the navigation component right here and I'm going to also change the name over to like navigate location there we go I'm going to hit enter right here and I'm gonna close it manually so now if you sell a file so here you can see we are now just getting NAB right here okay so everything is working the way we expect them to work and yeah that's cool but what else do we have to do we have to create another component or another folder for products so I'm going to just write products inside this product so I'm going to create two files the first one will be just products.js and the second one will be products.css so the same things will apply right here as well remove them I'm gonna cut this component export for Dots there we go and now I'm gonna also import this um what do we call it products not this one but products.css there we go okay so that's also cool but now what I will do is that I'm going to use my react fragments because I'm going to be rendering a lot of components right here and I'm going to just use products okay and it will just import it by default if you're using a visual recorder so that's going to be awesome so here you can see we have navigation and products and you probably know all of this stuff and I'm going to close this one as well now let me just create one more which will be recommended so recommend there there you go that is c-o-w-m-e-n-d there we go I'm going to copy this one name because it's kind of a long name so we have recommended dot JS and we have recommended dot CSS file so I'll just write out of FC remove there copier and then we have our recommend oh come on recommend there there we go I'm gonna also get my import sermon of uh let me just copy this name it's kind of a long name to type you know what I'm saying so I'm gonna just write recommended.css and also let me just grab it from Rick not react on but recommend ah r e c o w m e n d a d okay it's not helping me in this case so I'm gonna have to import it import recommend there there you go recommended come on from go up level and recommend it and we have recommended so I'm going to save my file and here you can see we have this recommended right here anyway so that's cool I don't know why I just closed this file but now let me just create a sidebar and inside that sidebar we are going to be creating different kind of folders so I'm going to just write Side bar inside this sidebar I'm going to be creating different kind of folders inside that folders We are going to be having different kind of categories of components so I'm going to just write category and inside this category I'm going to just write caddy gory.css or not just CSS JS would be fine I'm gonna copy them and we are going to be also creating category.css as well so I'll just write RFC remove there and come on category and yeah let me just grab my okay T come on category dot C dot CSS there you go semi file remove both of them and now inside this sidebar folder I'm going to be creating one more folder and I'm going to just give a name of like colors uppercase color there we go and inside this colors folder what I'll do is that I'm going to be creating two folders or one component and one will be for styling like colors.js and we have another colors.css is that color yeah I I write a colors that are going so cool anyway so I'm going to just remove that start man cop here and then we have colors okay it's kind of a little bit challenging for typing and stalking so sometimes it's kind of it's kind of challenging so I'm gonna just save my file remove both of them okay so let me just save that file let me just create one more folder inside there and I'm going to give a name of like price and inside this price I'm going to just give a name of like price.js price start CSS there go and now let me just write RFC remove them and let me just cut it from here giving them a price let me just import my uh one let's just go one level up above price.css there we go and now let's just remove there and now here you can see our folder structure is now poorly complete inside this navigation section first of all I am going to start from jsx so I'll just write navigation is the navigation tag and inside this navigation I'm going to just write a div with a class of nav container because we are going to be placing our input inside their container and as a time will be set to text we are going to be changing that and we are going to be also taking care of their own change event handler and stuff later on but in this section enter your search search uh shoes will be fine all right that's cool but I'm gonna also give a class of something like to style it I'm going to just give a class name of like search item or search input will be fine rather okay so that's going to be for this div and inside this div we just put our input tag Right Here and Now underneath this div what we have to do is that we have to create another one so it will be a profile container so this is kind of a useless one but here we are going to be also putting it and I forgot to install react icons here we are going to be using icons so I'll just create a new terminal I'm going to open new terminal and I'm going to just use npm install if you guys can see it and come on man what I will do is that let me just go back so you guys can see it I'm gonna just drag it right here and say goodbye to this one now let me just zoom in a bit so I'm going to just install it by using this Powershell I'm going to use npm install react react icons okay hit enter we'll just install it in a few seconds all right so here you can see we successfully installed this react icons so I'm going to just close this Powershell and now the first thing that you have to do is that we are going to be grabbing a few fonts so I'll just grab like f i and then heart and I'm going to just import it first of all as if I hard kind of an awful name from react um icons and we are going to be grabbing this one from fi and we will also need to import these parts which is a i a lowercase i and then we have out line and then we have shopping cart and then we have ai outline user add okay so I'm gonna just grab that from react icons and go to AI so I'm going to save my file and now I'm going to use it right here so here you can see we have this first anchor tag right here I'm going to use it right here so we have f i hard okay I'm going to just use them and I'm going to close it not like there but just let me write a forward slash and here what I will do is that I'm going to just give a class of uh nav and also icons as well and now let me just sell them underneath this anchor tag I'm going to create one more anchor tag and it will go to nowhere and inside there what I'll do is that I'm going to use my AI outline user edit or whatever kind of font you have okay so now I'm gonna add that I'm gonna just write uh I guess this shouldn't be a user error but it should have to be a shopping cart there we go and and I'm going to also part a clustered like nav icons okay so I'm going to just duplicate there and now I'm going to change this icon name to AI outline user edit there we go okay so it will go to nowhere I'm gonna just for the forward slash right here and I'm Gonna Save my file and what are we getting okay AI outline shopping cart is not defined let's go to the react icons all right so here you can see we have this react icons right here I'm going to just search for a shopping card there you go and now let me just grab there and I'm going to put it right here okay so name was totally awful and the second one we have is uh I don't know outline user edit or something like that uh I guess this will this one would be fine so I'm going to just click on him and I'm gonna place it right here save my file and now let me check how and we have okay so I'm just met a type I'm going to copy it from there and I'm going to place it right here send my file and here you can see we're now getting these icons and we have this import box right here all right so now let me just throw a little bit of styling to it so I'm going to just close this one and inside this SRC what I will do is then I'm going to just Square index.css file for just a research so what I'll do is that I'm going to just provide a different kind of research so you can fast forward if you want to so I'm going to explore margin box sizing will be set to totally born monks foreign family will be set to send Seraph and we are going to be selecting all of our anchor tags and text decoration will be now set to none and color I'm going to just pass like RGB of 0 not 0.97 if I can get 97 I'm going to copy that place it two times so I'm going to remove that comma from the from the bottom and now I'm going to select every Ally which we have inside this app and I'm going to just remove him like a list tile will be just removed and then I'm going to be creating this uh buttons class for later buttons once you are going to be jumping into the button so we are going to be using this class and that will be magic so I'm going to just provide a background of transparent and then we have a border I'm going to set that to none and Border 0.6 pixels solid and totally CCC just a lighter borrower and I'm going to also provide both radius not this one but more radius will be now set to 5 pixel and then we have a color of uh three three two three two three two one more time okay so this is going to be the color and cursor will be a pointer we are not going to be using these buttons not right now and then we have to go to in this nav.css file let me just highlight this so I'm going to just go inside this nav.css file I'm going to click on them and I'm going to just start from the navigation first of all I'm going to be selecting this navigation container right here okay so I'm going to just select that and I'm going to provide a display of all the flex and Border for the not bull radius but border for the bottom I'm going to pour a two pixel of solar F3 F3 F3 so this is going to be the color which I'm going to be providing justify content will be now set to space or yeah space around was totally fine and align items was totally set to Center and I'm going to also part a little bit of padding all around and then we have a z index of 999 because we are going to be using a display of whatever you call it display of flex so now let me just write margin of 2 pixel and now let me cell there and here you can see we are not just getting these icons right here and we are just getting this input box so now let me just go bank and Hunter will be fine okay so you can increase or decrease that if you want to but in my case that's going to be totally fine now let me get all of the inputs which we currently have let me just remove this one from here and I'm going to provide a padding of oh well pixel would be fine and then 20 pixel and Border I'm going to remove all of the borders from here and then we have a background of this um F7 uh F6 F come on F6 one more time okay so then we have the outline of none and then we have a margin for the right of 20 pixel and Border a radius I'm going to provide is like five pixel would be fine and Position will be set totally relative and width will be 14 pixels kind of open voice I just met 14. go back all right so that's cool and now let me just get my nav icons which are all of these icons which we provide these classes to it you probably noticed that but I don't know why I showed that 1.5 RAM and then higher it will be 1.5 for Ram and we have a margin for the left and it will be now set to two rims if you sell our file and that's looking more than awesome here you can see we have our input search field and then we have this unwind specified color to it we have to provide some sort of a color to it um import and I forgot to include some sort of a color to this anyways we will change that later we don't have to worry about that oh yeah we can change it right away not import but icons let me just change the color of them to I don't know yep that's looking yeah that's fine that's totally fine so this is our first navigation section so that was it about this navigation section so the next thing which you have to do is that we have to jump into this product section and this product section will be responsible for all of the products where we are going to be rendering all of our products inside the cards and stuff so we later we are going to be creating a component for cards but for this case we are going to be just uh rendering a few items so I'm going to just write a section right here and I'm gonna just give them a class of like card container crti ner because sometimes I made a lot of mistakes so that's why I'm just double checking these spellings alright so that's the card section so the next thing which you have to do is that we have to create a section for a card so now inside this card section we have to render our image so for this case I'm going to go to my database right here my database my DB file so I'm going to just copy this image from here and I'm going to just place that image right here as alternative text I'm going to just write like a shoe and now underneath there what do we have to do we also have to create a component or not a component about card uh details section and now inside this card details section I'm going to just write H3 of the car title I'm gonna also give them a close of like card title and now I'll just put some sort of a title like I don't know shoe and now underneath there I'm gonna also provide a different kind of section uh not different kinds of section but just a section with the class of card reviews r e v i e w s there we go and now inside this card's reviews what do we have to do we have to get or start so I'm going to just click here and I'm going to just write star okay so let me just get this one I guess this one will be fine okay I'm gonna copy that and I'm gonna just place it right here and like so and now what we have to do we have to also grab it from Oria components so I'm not really a component but from react icons I'm going to destroy it from and then react uh icons and now I'm gonna go to the AI okay so now if you sell file here you can see we are now getting our shoe we are getting the title and we are also getting old star but we will need four star for this one so one two three four and now if you sell that here you can see we are now getting four stars right here okay so that's cool as well and I'm gonna also provide a span of total review so I'll just give a name of like another class of total reviews and now I'm going to just put like I don't know five reviews or four reviews will be fine okay so underneath this section what we have to do we have to create a new section with a class of card and then price and now inside this car price we have to put our price right here okay and now inside this price we are going to be writing our Dell and we are going to be rendering some like different kind of price like uh I don't know 300 would be 300 kilometers would be fine so their price is deprecating now we have to add a new price so I'm gonna just add a new price of like 200 or something like that and let me just put the dollars oh you know we're not going to be adding any uh dollar sign and stuff like that now let me just get my bag so I'm gonna just write back and now we have to just search for a bag back which is I guess this bag would be fine so I'm gonna oh you know like this one would be fine copy them I'm gonna paste it right here like react component less than so come on let's oh my goodness less than sign and now we have to grab it from a react icons okay so I'll just write import and then get this from react icons for slash BS so now if you sell file and now let me just refresh my browser to render the component so here you can see this was a previous price this is a new price we have four reviews and we have this backward here so now it's time to style this component and then yeah that's going to be headphones so that's going to be it so I'm going to just go inside this product starts CSS and I'm going to first of all select my car container okay so I'll just write a display of flags Flex rapid vanilla trap margin for the left will be now set to 20 rim and now I'm gonna support the margin for the top of two room and also the Z index will be now set to minus two right right here I'm gonna also select my card I'm going to provide a margin of 20 pixel and Border let me know sir not just come on what the hell more will be no come on will be announcer to 2 pixel solid e d e d e d okay and I'm gonna support a pairing of 20 pixel and cursor will be pointer and also I'm gonna just select my card image okay so did I provide a card image name to it I didn't so let me just provide a card image so I'm going to save this file I'm gonna also save this oh you know what I'm not gonna save this file right now I'm gonna put it with of 13 uh 13 rims and I'm gonna also pour the margin for the bottom of one rim there we go that's cool and I'm going to also select my card title and the margin for the bottom I'm going to just provide one Rim as well and now underneath there I'm going to select my car reviews there we go our ebi ews let me just double check sometime I made a lot of typos so that's why I'm double checking it so I'm going to just put a merger for the bottom like one ram would be fine and I'm gonna also provide a display of goly flex and underneath that I'm going to be selecting my rating star which I forgot to include but we will provide different kind of colors to it so like yellow color we find D5 a b55 this is going to be the color which I'm going to be using for a star I'm gonna copy this class from here and I forgot to include it right here because uh we are going to be putting all of these icons inside our data file we already have there but we will take care of that later in the refactor section so now let me just remove uh these stuff from here like so and we just provide this closet yep that's cool semi-file and now I'm going to refresh it and I don't know why it's not working that's because we didn't import it correctly I guess we did import it but I don't know what's going on let's just refresh our browser why it's not working yep that's that's because we're in service file so we have the seven and here you can see we have our recommended shoe and we have this card right here okay so now that's cool we have these yellow colors and we take care of all of them now let me just take care of their total reviews which is this tutorial reviews where is that all reviews all right there we go so you're going to be taking care of them I'm gonna just provide a font size of 0.9 Ram straight and I'm gonna also provide a margin for the left of 10 pixel okay so then I'm going to just write card price and this player with holy flex and justify content will be now set to space around and and align items would be now set to Center okay so finally we have to take care of this bag uh not this bag but we have to take care of let me just put a class of bag icon or icon just a singular I'm going to save this file and we have to get that icon right here and we just have to pour the color of five three five three five three so if you sell a file let me just save it and here you can see this is our component will look like right here so we can duplicate that component again and again so let me just go back so you guys can see everything a bit better I'm going to just select this section right here and I'm going to just draw a little bit of items to it so I'm going to just duplicate that you don't have to do that you don't have to do that but here you can see all of my items will be placed right here let me just select all of these items uh through here I just kind of wanted to show you like how all of my items will look like duplicate there and now let me just refresh my browser and here you can see this is how all of my products will look like right here okay and everything is working like the way we expect them to work everything is A-Okay but now we have to refactor we're not going to be refactoring our code not right now but we will refactor all of our code later but I just kind of want to render some items so that we can see something first of all and yeah and there's going to be it for this section and once again we are going to be refactoring all of this code at the end of this video not at the end but just in a few seconds but uh we have to take care of the other stuff but we cannot work with them all at once we'll have to take care of them one by one so we are going to be removing all of these jsx from here and we are going to be just providing our results this results variable and that's going to be it I promise we are going to remove all of these jsx from here anyways so that's a product section alrighty so that was a product section so I'm going to just close both of them from here and I'm going to go to my recommended so I'm going to just open my recommended dot JS and also this CSS right here so what I would do is that I'm going to just remove this recommended section from here and let me just zoom in a bit so you guys can see everything a bit better and what I'll do is that I'm going to first of all using my react fragments and then I'm going to be using my div right here and then I'll just pour some sort of a title to it like H2 of Raycom uh r e c o w m e n d e d I'm gonna copy this and I'm gonna place it right here and underneath this Edge too what I'll do is that I'm going to use my recommended buttons right here okay and now inside there we are going to be placing a few buttons so I'll just write button and we are not going to be providing any stuff or you know what I'm going to just give a level like all products okay so we have all products then we have Nike ads and Puma I'm gonna remove them I'm gonna put a Nike or Nike some people call Nike and some people call it Nike whatever then we have a puma and then we have orange Vans there we go I'm gonna support a different kind of cloud not different but we are going to be providing a cluster and the class will be just buttons right here so if it's several file and you will not see there I don't know why you will not see it let me just refresh my browser and you have to see that somewhere I don't know why it's not working maybe master of something I bet and yep we did okay we are getting the recommended section right here at the bottom but we should avoid it right here I'm gonna go to my app and then what I'll do is that I'm going to just place this recommended section up above this um product section or kind of or component so I'm going to sell my file and here you can see we are now getting all of these buttons right here and also this title right here as well so now the next thing that you have to do is that we have to take care of the styling so what I will do is that I'm going to just select my recommended recommended and then we are going to recording recommended flex and display of links and I'm gonna also put a margin to the left of like 20 rims and also I'll just select my recommended title and also I'm going to provide a module for the left of like 20 rims and margin for the bottom I'm gonna pour a 20 yep pixel Bitcoin and I'm going to also pour the margin for the top of 20 pixel and font size will be now set to 20 pixel as well so if you sell a file refresh it nothing is going to happen because we didn't use these Clauses so I'll just copy this class name which is recommended blanks and I am going to just place it right here inside or you know what not inside but inside these items so we just provide recommended buttons I don't know why I did that I don't have any idea why I did that but it should have to be a recommended Flex so now if you sell there and here you can see it will now just push all of our items right here and what else do we have to do is that we have to also provide recommended title right here so I'll just put a class of recommended titles so if you sell a file and here you can see it will also push this title right here but that's not looking that cool uh let me just go inside this index.css file right here and I'm going to just scroll down and I don't know why that didn't apply it so I'm going to just cut this styling from here and I'm going to just place it right here so I'm going to just send my file and here you can see this is how my buttons look like and we can also change the smart family if you want to so I'll just go to my phone what do you call it index.css and I'm going to just select everything we did provide font family of sensor but I don't know why it's not working you know I'm going to just close it from here and I'm going to pour it right here so I'll just part family of Saint surfboard here semi-file and let's just refresh it okay I just put it in the wrong way I'm gonna cut it and I'm gonna place it right here so phone family of sand serif and that's looking cool and here you can see we have our buttons we have our search fields and we have a few items right here all right so that was it about recommended section so now the next thing which you have to do is that inside this sidebar I'm going to be creating one component given name of like sidebar.js I'm going to be also writing a sidebar dot CSS file as well right here okay so inside this component I mean like inside this folder but outside from this category color and price components right here so I'll just also write the RFC remove them and I'm going to just cut it from here and then let me just grab my sidebar right here I'm going to zoom in a bit and now I'm gonna go you know first of all let me also get my import sermon from here like sidebar dot CSS and now I'm gonna go inside this sidebar I mean like this app right here and we have to use it right here and I'm gonna be placing it at the top so I'll just give a name like sidebar and now I'm Gonna Save my file I'm going to go inside here and here you can see we have this sidebar right here okay so we are going to be placing all of our content right here so what else do we have to do you know what first of all I'm going to be writing my uh whatever you call it uh kind of forgot the name of this one what do you call it okay fragments there we go I forgot the name of it now let me just create a section I'm going to give my name of like sidebar and now inside this sidebar I'm gonna be creating a day with a class of logo container and here we are going to be just running H1 and I'm going to just place like card logo or something like that I'm gonna place it right here and that's going to be fine underneath this div I'm going to be creating or you know what let me just get my category see it come on c-a-t-e-g-o-r-y if you can get it we can't so we have to import it manually so I'm going to just go and category come on it's not helping me guess I don't know why but let's go inside this category and then category I'm gonna copy that copy this category and what else do you have to do we have to just place it right here so we have our category I'm gonna duplicate that three times just two times not three times and I'm going to change that to price and then we have to change that to price and we have to go to the price I'm gonna change that to uh colors and I'm going to remove them and let me just put my colors uh and inside these colors we are going to be just pouring that color so I'll just copy this price from here and I'm going to just place it right in here and I'm gonna also copy these colors and I'm gonna paste it right here so I'm gonna just zoom out so you guys can see everything a bit better so now if you save it here you can see we are not getting category we are also getting a price component and also our colors component right here and here we are also getting our logos so now the next thing which you have to do is that we have the style or component so that's cool I'm gonna go inside this sidebar and I'm gonna just style it so I'll just write a sidebar Dash title zoom in a bit and I'm going to just for the font size of 22 pixel and I'm gonna also pour the font weight of normal and margin for a bottle I'm gonna just pour it like 20 pixel okay so then I'm gonna be selecting my sidebar and I'm going to just for the 15 of the third you can just specify however you want and then I'm gonna just pour it position of fixed rate height will be 100 percent and then we have a border uh to the right we have two pixel solid and we are going to be reusing E5 E5 E5 one more time okay so the Z index I'm gonna just play three third and the display will be set to pull reflex in this case and flex direction will be nicer to column and align items will be also set to Center okay so that's then now if you sell our file and this is how it looks like right here uh this is how currently stuff looks like but we have to put this underneath so we have to now select our logo container and we have to put our margin margin for the bottom we are going to be just writing four rim and also we have to select our logo container one more time and select for H1 and margin for the top I'm going to provide 1.3 Rams towards if you sell file and that's looking totally awesome right here so here you can see we are almost getting there we have our um what do we call navigation we have this component we have all of our products right here and then we have all of our categories price and colors right here so now we have to take care of each of this component one by one so now we are totally done with that so now the next thing which you have to do is that we have to take care of this category component so I'm going to go inside this category component and what I'll do is that first of all I'm going to just remove this category from there and I'm going to just write H2 with the Clause of Side Bar title right here and I'm going to just provide category and now I'm gonna go back so you guys can see everything a bit better inside this div we are going to be writing a label label right here and I'm going to also provide a sidebar label container cluster okay so we are not going to be providing any html4 attributes to it inside this level what we have to do we have to just write input with the type of radio instead of text and we also have to give them some sort of a name of like test would be fine uh yeah that's going to be fine and then we have to find it right or a class I mean like spend with a class of check mark there we go and we have to specify a level for it so if you just sell our file and here you can see we are now getting this one uh what do you call it checkbox or check mark right here we're specifying that all but we are not getting it okay we are getting it right here but we have to take care of the styling but before we getting into all of them we have to duplicate this jsx right here and once again I'm going to be refactoring all of the GSX into multiple components but for now I am just writing all of these j6 so that we can see or markup right here okay we're going to be also formatting only like refactoring all of this code again and again so I'll just duplicate that I don't know like three times no not three times but four times so one two three four okay and now I'm gonna just change these levels to something else like I don't know we have all then we have our sneakers uh sne n e a k e r s there we go and then we have instead of sneakers instead of all we are going to be also providing flats and then we have a sandals so sandals there we go and then finally we have our heels so heels cell file and yep that's looking holy a okay so for now I am going to be writing a lot of CSS right here but if you don't want to write a CSS so you can just go to my GitHub repository and you can grab all of these CSS from there if you want to so the first thing which I'll do is that I'm going to be selecting my sidebar and then sidebar I mean like sidebar title and I'm going to be providing a font size of 22 pixel and font weight will be totally normal and margin for the bottom I'm going to just for a 20 pixel right here and then I'll just pour my sidebar items right here and I don't know what the hell I just I'm going to close that and now inside there I'm going to be providing a module for a top of 20 pixel and now I'll just go up a little bit down and sidebar uh label container inside that we are going to be writing display of pulley block and we have position of relative because the other one was a fix and then we have padding for left and I'm going to destroy 35 pixel for the pairing left margin for the bottom I'm going to for 12 pixel and then we have cursor and set to pointer then we have uh just one webcad uh user whatever you call it select there we go and we're going to set that To None then we have our moves for Mozilla and user select will be now set to fully none okay we want to just remove that and then we have an MS user and then select we are going to be also removing there and finally we are going to be writing a user select and that will be set to totally none cell file we are totally getting there but that will take a little bit of for a while or something that will take a little bit of a while so I'll just write a sidebar and then level container one more time and I'm going to be selecting my input field I'm going to be providing a position of poly absolute opacity of zero cursor will be set to poorly for winner and now let me get my check mark which is I guess check mark was that a check mark or something check check mark there we go I'm going to place it right here for double checking position or totally absolute top zero the left zero height will be 20 pixels width will be 20 pixel and also the background color will be set tutorial eee three times e and more radius will be set to 50 percent there we go and we are going to be also taking care of that sidebar label container and once we hover over each the input we want to select or check mark okay so then we are going to be also writing a background color of totally CCC that's fine duplicate that and what we are going to be doing is that once we checked instead of power I'm going to remove this hover from here and I'm going to just provide this checked on the input so once we checked our checkbox so if you want to just change the color to 2 1 uh nine what do we call it a nine six uh F3 kind of a blue color but not that much blue and we're going to be saving them and here you can see this is how currently things looks like right here so if you click on it and yep that's looking totally A-Okay I'm gonna just go back and now let me just select my check mark one more time and I'm going to be using my upper Studio selector so content nothing position absolute and we have a display and let's just remove them okay and now I'm going to just use a sidebar items not sorry but uh items but label container I'm going to be selecting my check mark let me just get my check if that's checked so what you want to do you want to select for check mark and we want to use our upper selector on it and we want to just put a display of totally block turd in this case in this offer case we provide a check mark of display of none and here we are just specifying I mean like once that's checked like the input is checked so you want to just put a display of block to it if you sell a file I'm going to click on it you cannot see that you will see that just in a second but let me just get it sidebar uh label container let me just get there let me get my check mark and I'm going to be using my upper selector right here the top will be set to like here I'm specifying different kind of widths you can increase or decrease there however you want uh six uh one what do we call the 6.4 pixel and then we have a width of 7 pixel height of only 7 pixel and then we have a radius of a border radius of 50 just a poorly around it so that's why we are providing there and now if you zero file and here you can see we are now getting that white circle right here so if you click on it and that's looking more than okay okay so that's fine but the final thing that you have to do is that we have to get this line right here from somewhere so we are going to be just writing a line uh and we're not going to be using this line right now so I'm going to just provide like three rims and more color will now set to just like uh F7 F7 come on F7 F7 there we go and yeah that's totally fine so fine nothing is going to be changed all right so that was totally cool we are totally getting there but the second thing which you have to do is that we have to take care of that price component and color component and then we are going to be refactoring all of our project and finally we are going to be providing our functionality to this project all right so that's then now let me just take care of their price and then we are going to be taking care of their colors so it's not going to be looking that awful we are going to be going into this colors you know we are going to be taking care of their colors a little bit later or yeah can we take a call I don't know you know I'm gonna go with this price and price will be fine and now I'm going to remove this price from there and I'm going to just provide a class name of ml to it okay for margin left or yeah margin level be fine and then we have H2 of that same title side uh sidebar and title and then we have a price title as well because we are going to be just supporting a little bit of styling to their price title and now you know I'm gonna go inside there and I'm going to copy a little bit of code from here so I'll just copy this label from here and I'm going to place it right here so this is going to be for one time and then I you know I'm gonna just duplicate this level um what do you call it jsx a few times so we have uh for all then we have for fifty dollars we have 400 150 and we have a 200 okay so I'll just provide a test of like I don't know a test of two so I'm gonna just select one hit Ctrl D Ctrl D Ctrl D or command D whatever and I'm going to change the label I mean like to a name to totally test two and here this one will be set to all and now this one will be now set to zero you know I'm gonna display zero dash 50 dollars okay so just fifty dollars will be fine and I'm gonna copy them their pattern and I'm going to just duplicate it right here and I'm going to just change the values to like 100 100 will be fine and this one will be now set to 50 okay and this one will be now set to 100 1 000 and this one will be 150 and this one will be finally uh or uh 150 so sell file and here you can see we're now getting all of these prices right here totally fine uh but you know I'm gonna go inside this ml I mean like this price styling and I'm gonna just select my price title like so and I'm going to provide a monitor for the top of 20 pixel and I'm gonna also part I mean like I'm gonna select the ML and I'm going to provide more than for leftover 20 pixel zero file and that's looking a bit better alright so that's also done so now the next thing which you have to take care of this uh color component so I'll just close these files from here I'm gonna go into my color component I'm gonna select my color.css file as well and I'm going to do that same copying and pasting one more time and once again I'm going to be refactoring all of that called from scratch so you know here I'm going to remove these colors from here and then what I'll do is that I'm going to just pass all of these jsx right here okay so we have that same level I'm going to change this all you know the first one will be all yep the first one will be all the second one will be black color let me just remove these labels or we can do this so this one will be now set to blank and this one will be now certain blue then we have a red category like so and then finally we have all white categories we have white but we also have a green one as well so let me just write uh green and then finally we have white cell file and let's just see here you can see we have all category black blue red green and white finally and here I'm gonna be also passing my color title so we have a colored title right here send my file and now I'm going to go inside this color title right here I'm going to select this color title and I'm going to just provide a margin for the top of two rims and I'm gonna also select all clause and here we are not using this class but we will very soon so I'm going to just use linear gradient and I'm going to put blue and Crimson okay so if you sell file nothing will happen except here we are getting just all of these components right here so now it's time all right so now we are totally done with these components so now it's time to do a huge refactoring in all of these components because currently our code is looking more than messy like we have all of these components right here but trust me this is like totally a mess we have to create a component I mean like separate component for buttons and we are just reusing that input again and again and we also have this color we are reusing it here we are reusing it right here and we our core is like totally mess so now let's just refactor all of our code so before we getting into the refactor first of all we have to unscore ourselves a few questions like where we are repeating all of our chords so now what I'll do is that I'm going to go inside this product section right here and here we are reusing this component not a component but this jsx like a lot of time like more than a lot of time right here okay so what do we have to do first of all I'm going to just select this one right here and I'm going to just select it through this section right here okay so I'm going to just select it and cut it I'm going to just cut it just right click on it and hit this uh cut button right here or you can also use this shortcut which is control or command or control or command X I am going to remove all of the rest of this content right here so I'm gonna just remove all of this content through this section right here okay so now we see successfully remove that content from here so now the next thing which you have to do is that we have to go inside this component folder and we have to find this card.js right here and we have to just place all the four GSX which we copied right here okay and this is also like really messy still but now if you sell our file but instead of copying and pasting all four uh gn6 one by one what we are going to be doing is that we are going to be getting this card and we are going to be just rendering just this card okay so I'm going to just save my file and it will give us an error that's because we didn't copy it and we didn't place this right here so if you sell that and it will still give us error because we have to import that card from that card component cards if you sell that and here you can see card is not defined card is non-defined where is that let me just refresh it and here you can see it will now just gives us one card right here so instead of copying and pasting all of these jsx now we convert all of their coding and one component and we can just reuse this component like how many times we want see if we sell there and here you can see it will now gives us all of their uh items right here so this is just a first three Factor but this is also not a great refactor to be honest we will come back here one more time so let me just refresh it and this is how it looks like right here so this is just a first three factor for this card component so we just already created this component and we are just reusing that component again and again so this was the first three Factor so now the next refactor which we are going to be doing is this uh input Fields right here so that's going to be totally simple and here let me just open this category right here we are repeating all of our labels right here and input like label and input and all of that kind of stuff right here and we are also repeating inside these colors we are repeating it inside this price component as well so what we have to do we have to come up here and inside this input tag whatever you want to do we are going to be just going into one of them and I'm going to just copy this single lever from there and I'm going to just replace it with this Dev okay so I'm going to just zoom in over so you guys can see it a bit better and now I'm going to save my file so here you can see we are just getting like um what do you call it sidebar and we are just providing a sidebar and by the way this is not going to be the final refactor we are going to be still refactoring this component but I just kind of want to show you like the second way of refactoring or writing this code okay so we are going to be still passing a lot of prompts and we are going to be doing there once we jump into stair management and all of that kind of good stuff but for now here you can see we just specify this input and this level right here inside this input container so what we have to do I'm going to just uh get my input container but before I do I'm going to remove all of these inputs from here and this input from here as well oh no we are not going to be removing that but here we are going to be just rendering or input container okay so now let me just my file and here you can see we are just getting all and we can just duplicate there like a few times like we have four times or five times right here and here you can see we are now just repeating all of our component one by one word here okay so that's only okay but we will have to take care of their labels and stuff but that's totally normal so now let me just use their component like their input component so I'm going to just use import and I'm going to close it and it will not import it because there was to level up above okay so input like so and then we have to go to the components folder and then we have to go inside this input so if you sell a file let me just duplicate that we will take care about there a few in a few seconds so here you can see we are now reusing that component right here one more time and now it's time to go inside the colors and we have to remove these jsx from here so I'm going to select it save a byte all of them I'm going to get my input container right here okay so not like so but let me just close them send my file and here you can see uh huh I messed up something because I removed the label and I should have done that so we have this input title you know I'm going to leave this all from here uh we didn't specify a color to it or label to it let me just specify some sort of a label to it so we can differentiate between components so sidebar title and then we have color title as well so I'll just provide colors sell my file and here you can see we have all of these colors but now I'm going to just remove this label from here and I'm going to just get my input from there semi-file and we have different kind of inputs and here you can see everything is not only reusable anyways so that was just a little bit Improvement inside our core so we just like really refactor our code like a little bit but there is also going to be a huge refactor inside all of this input component and all of this button component and all of that card components so we will have a huge refactor later but for now we I just kind of want to grab all of that code from one component and so that we can reuse their component again and again so now it's time to pour a little bit of functionality to our app and then we are going to be reusing I mean like then we are going to be refactoring all of our component to the final version of that refactoring okay all right it's now it's time to provide functionality to or apps so here what I'll do is that I'm going to do a little bit of weird thing which a lot of people won't like it but I will do it anyways because I don't want to repeat myself again and again so what I would do is that I'm going to treat this app component as a store if you are coming from a Redux world so which means like I'm going to be placing all of my state inside this app component and then I'm going to be providing that stand to these components by using a prop so if you don't like this approach totally A-Okay like you can go to each of this components and then you can create your separate set and then you can change it there if you want to but for me I'm going to treat this amp component as a store if you're coming from a readex word so the first thing which you have to do is then I'm going to just write first of all uh select it uh query right here or not query but category okay so then we are going to be just writing set selected category and it will be now set to the use stat right here and by default I'm going to be providing a null value to it so I'm going to just put a little bit of spacing in there and now that's there but now the next thing which you have to do is that we are going to be writing or import filter first of all we are going to be taking care of that input filter then we are going to be jumping into the radio buttons so what I will do is that I am going to just create my query and then I'll just use like set query and it will be not equals to the u stand and by default I'm going to be providing um like totally empty video to it and now what else do we have to do I'm going to be creating a function which will be really useful for a lot of functions for a lot of uh things to be precise so I'm going to just write handle and put change so whenever this import changes like whenever user passes some data into this component into this search field so whatever you want to do if you want to get what it went right here like uh like whatever the user type and we are going to be passing it right here so event let me just write it event come on event dot Target dot value there we go t a r g u t there we go so now we successfully create this one so now the next thing which you have to do is that we have to get all of our data which we have inside this DB folder right here okay so we are going to be getting all of that data and we are going to be iterating over through that data all right so the first thing that you have to do is that we have to import it so I'll just write like a data base right here and I'm going to just import my little database so we have a data oh you know I'm going to give a name of like products okay so products will be fine and I'm going to go one level and I'm gonna go to my DB folder and then we have our data right here you can give any name you want but in my case we are storing a product so that's why I give a name of perks right here you can give my data if you want to but here we are going to be iterating over through all of these items which we currently have inside this array and then we are going to be performing different kind of filtering on our title on what we call it on uh previous price and also on a company and also on a color and on a category as well okay so that's going to be awesome as well so now the next thing which you have to do is that I'm going to just write fill uh third items there you go and it will be now equals to products dot items not items but products.filter because fill sure there we go because we are going to be iterating Ur through all of these items right here each of these items and what do we want to do with them we are going to be just specifying over each product and I'm going to just set that to like one liner so that product.title in this case we are just iterating over through all of these datas right here like all of these items right here and we are just taking care of this title like we are just getting this time value from all of these items right here which we currently have okay so we are just using them and then let me just convert their two lowercase as well so it doesn't matter if you pour like uh uppercase it will just by default convert it to lowercase and now I'm going to just provide index off and then here I'm going to be specifying my query like where are the user type and I'm going to be also converting that to lowercase as well and if that's not equal to -1 okay so I just messed it up here let me just cut that from here I'm going to press it right here so if that's not equal to -1 so we want to get all of that items and we just store that inside this filter items right here okay so now underneath this that's going to be it for the uh input filter so I'll just specify different kind of separators right here I'm going to copy then I'm going to paste it right here and now let's take care of the radio filters so we have these radio filters right here okay so now let me just filter all of the data once the user click on this each uh what do we call it this each radio filter okay so what do we have to do first of all I'm going to be just writing const handle change and it will be now equals to event and here what are we doing we are going to be just setting the set category selected category which we are specifying right here so we have selected category and then we have a search selected category and by default we're just specifying the null value to it okay so I'll just execute them and here what you want to do you are just specifying event dot Target dot value right here okay like whatever like whichever kind of input the user selects so you want to get the value from that each event right here like whichever kind of uh whatever you call it custom radio selector user select so you want to get the value from that selector okay so that's how we can get there and we store that value inside this handle change event right here so that's going to be also as well so now the next thing which we have to do is that we have to create a filter for whatever you call it a button so buttons so once we click on each of these buttons so what you want to do we want to provide a filter for that okay so const handle I'm I'm just creating all of their functions right here okay which we're going to be passing into our components by using a props very quickly so I'm going to just write Set uh selected category once again we are just selecting that selected category right here and we are just changing that state like one when somebody clicks on it so what you want to do you want to just get the value from there so I'll just write like event.target.value okay so that's simple that was simple like how to filter data and this is also simple like when somebody clicks on each of these item so you want to filter through all of that data okay so that's going to be totally fine so now the final thing which you have to do not a final thing yeah this is going to be the final function which you are going to be creating inside this app component so I'll just write like function and here this is going to be the main function where we are going to be doing all of our filtering so I'll just write fill chart data so this is going to be the name of my function and what are we getting we are first of all getting all of the products and then we are going to be providing a selected like whichever kind of thing is currently selected are we selecting something inside this category or inside this price or inside this color or we are clicking on something right here or we are typing something inside this input field like what are we doing that's why we provide this selected prop or perimeter or whatever you want to call it and then we are specifying our query right here okay so now and let me just write like lit filter data I mean like fill on third products so filter products and formula equals to all of our products okay so this is going to be aired for our products now here let me just write a comment for myself like filtering filtering uh input items okay so now let's just take care of that filtering item so I'm going to just specify if we have some sort of a query like if we selected something so what do you want to do we are we are just going to be selecting that filter data not filter data but this filter products I'm going to just specify it right here and it will be equals to filter items so filtered items right here okay so which we are getting from this filter items let me just go back so you guys can see everything a bit better so here we what we are doing if if we have some sort of a query so we are going to be just setting this filtered data like all of the products through this new array which we are getting from this filter items right here like we are iterating over to our their item and we are just specifying it right here and this filter data like order for data will be now set to that filter data if we specify something inside this input so that's going to be happening okay so this is going to be it for the filtering items in filtering input items and then underneath there then we are going to be also writing a selected filter as well so let me just zoom in over so you guys can see everything a bit better and now here what I'll do is that I'm going to just write selected okay if something is selected so where is there selected coming from that selected is coming from right here we are going to be executing this function and we are going to be providing our first of all our products then we are going to be specifying like whichever kind of thing is selected are we selecting something from a category or from a price or from a color or like where which kind of selector do we have so this is going to be selected filter which we are going to be writing so we already have our filtered products which is right here and it will equals to filter products one more time and then we are going to be using our filter method right here so we are going to be iterating over through this filter uh method right here we can specify just a singular thing right here but here what I'll do is that I am going to use my es6 magic so perimeter restructuring so I'll just write caddy gory we are going to be getting our category from this data right here so we are going to be getting our category we are going to be getting our color as well like this color from all of this item we are going to be also getting our company we are going to be also getting our new price and we are going to be also getting our titles so now let me get all of there from all of this data right here so what I'll do is we already selected or category let me just get my color and let me just provide my company there we go CMP and what do I spell company correctly oh no let me just put it right here and that's awesome okay so that's there now we are going to be also providing a new price trade and then we are going to be also getting my title right here so we have uh let me just show you so we have this new price right here and we also have this title right here anyway so that's looking okay oh we are writing this curly braces like extra calibrates we shouldn't have done that we are going to be writing our equal to sign and now what we are going to be doing is that we are going to be just writing category and it will be now equals to selected right here okay and if you if you weren't doing this instead we are going to be just doing is like we were doing like product or uh I don't know category and it will be now equals to that selected so we will have to do that but now we already desstructured our data right here so we don't have to provide this product dot category product dot title product dot color and stuff like that so I'm going to just remove excuse me so I'm going to just remove their product and we are going to be running I don't know why we are getting this error I'm not sure about that now we are going to be writing our code like this like category uh is equal to uh triple equal to selected and then we are going to be also checking the other stuff but if we weren't writing this code like if you weren't destructuring or items right here so we would have to write first of all product for ducks to be uh precise and then we are going to be selecting our category then we will write like product start color and then product start Company products are new price product start title we don't have to do that we are going to be just restructuring all of that so I'm going to remove these products from here and now we are going to be writing our old statement and color it will be now triple equal to selected and now let me just write one more old statement then we have a company and Company will be also set to selected and then we have old statement then we have a new price will be also set to selected let me just write one more statement of or and title will be equals to selected so now if you sell a file and I am still not getting all of that I don't know why we are getting some sort of error or something uh I guess we are getting some sort of error but I'm not sure uh let me just close it right here something was wrong in here so I'm going to now finally pass this score right here and now I'm gonna send my file and yeah that's going to be it for a selected filter so now the final thing which you have to do is that we have to return something right here so there's going to be it for this if statement and also for the selected filter the final thing which you have to do is that we have to return this filter data and we are going to be iterating over through that data so we have this filtered products I'm going to use a map method right to iterate over to all of their items and here what we are going to be doing is that we are going to be restructuring a few properties so I'm going to just destructure that IMG and by the way we are destructuring all of their properties and their properties are coming from all of these items like we are currently iterating over through all of this item and we are getting the image the title The Star reviews and all of that kind of stuff we are destructuring right here and we are going to be reusing it right here inside this card component and we will refresh after all of this card component in a second but for now what I'm gonna do is that I'm going to just destructure that stuff so I'm going to just write image title star and make sure the spinning is totally correct I will also do my best to provide uh the spelling correct so I'll just write a new price and then we have a new not not new price button yep a new price your new price is totally okay and then I'll go back from here and I'm gonna use my curly braces but I don't know why we are getting this next year and here we are going to be rendering our card components so here you can see it will now just import it right here at the top of the file so now it's time to provide all of this data into this card component as a prop and then we are going to be reusing it inside this card component so I'll just first of all start with the math not random and I'm going to just close this component right here and that's going to be fine okay so here I'm going to just save this file so that I get uh that formatting so that was it for the key and do not write code like this but in this case I'm not using any uuid and stuff so I just remembered a random I'm going to just write image and it will be now set to image and now what else do we have to do we are going to be also writing a title and title will be also set to title and I am going to also provide a star and it will be also set to start the destructuring version of that star to be precise and now let me just get this reviews and finally we have our new price right here and we are going to be also providing a new price to it now if you sell a file so what are we currently doing first of all let me just review all of that stuff which we are currently doing okay so now here you can see we are just first of all getting uh like these two let me just cut that from here and I'm going to place it right here like so first of while we are specifying this stair into this used hook right here so we have selected category and then we have selected set selected category then we have a query and set query and by default we are providing the default value of null and empty uh string right here so then we are creating that function for the input filter right here so like when somebody okay so a new price is not defined uh we do have this new price let me just uh come in here and then okay we have free price now I'm going to set that to preview price and now let me just check him out new price is not defined let me just refresh my browser still not defined uh okay so we are going to be copying it from here I've got included semi-file and now new price will be defined right here anyway so that's a great story but hey here you can see now if somebody types something in the input we are going to be getting their value then here we are iterating over through every single character of that user like whatever the user type inside this input box right here we are iterating over through there and we are just getting our filtered items then we have our radio filter and we are just iterating over through all of these filters like if the user click on this one or in this one or in this one we are just getting the value of them or and then we have this handle click and which will be responsible for these buttons right here and then finally we have this function right here and inside there we are going to be just specifying three parameters so we have this products parameter then we have selected and query parameter and we are going to be specifying the values in a just just in a second but here you can see we are just declaring a variable and we are specifying it into the products like whichever kind of products the user provide and then what we are doing is that we are just providing that filter for our input items and then inside there we have this filter product so what is the filter products filter products are all of the products which we are specifying right here and it will be now equals to filters filtered items and then we are providing a filter for the selected items like for these kind of buns right here we can just write this code without a destructuring but I write this code with destructuring because I don't want to write like a code like this like a product Dot and stuff like that then we don't have to destroy the product so then we can just remove that and we can just write like product if you wanted to we can still write this code and that will be totally valid core but I don't like this approach I want to use this structuring so that's why I restructure all of that code right here okay so this is this might look a little bit confusing to for some developer but for me that's totally awesome for me that's totally okay and then finally we are just returning all of our film the products right here so now it's time to call this function so we've created this function I'm going to just call this function right here so I'm going to just call this function right here and I'm going to provide a few various to it so I'm going to first of all providing a products which is over database right here so we are getting all of their products from this database right here and now the next thing which you have to do is that we have to also provide this selected category and we have this selected category right here okay so like whichever kind of thing we selected so we are going to be specifying it right here and then finally we have our query and we have this query right here for this step right here okay so now we successfully call this function so now the next thing which you have to do is that we have to store in some sort of a result variable you can give this variable like any name you want but for me that's totally okay so now let me just say on my file there was a lot of writing and that was a lot of explanation so now the final thing which you have to do is that we have to provide all of the that stead values like these functions and all of that kind of data into this each component right here so that we can reuse all of their data inside this component so for sidebar what are we are going to be passing we are going to be passing this handle change right here so where is that handle change we are going to be specifying this handle change for the sidebar so like whenever click on this button or this button or this button I don't care like whichever kind of button the user click on we want to select and we want to get that value and we are specifying that inside the set selected category so what we have to do I am going to just pass my handle change into handle change as a prop so now what I will do is that I'm going to come inside this sidebar right here let me just go inside this sidebar and I can desstructure this so I'm going to just use my destructuring method right here and we can log there into our console if you want to so I'll just write handle change and now let me just open my console right here and now let me just refresh it here you can see we are now getting that function right here so we have event.target.value we can execute that function but we are not going to okay so I'm going to just remove that from here so now the next thing which you have to do is that we have to pass this handle change from there I'm gonna copy there and I'm going to place it in both of these area as a prompt so I'll just pass it as a prop right here okay so now if it's several files so we have that function available inside this category we have that function inside this price and we also have that function inside these colors so like let's suppose if I want to go to the colors I mean like that price and we can destructure it right here and we can also console log it send my file and let's just refresh it open my uh console right here and here you can see we have that function available inside each of these components right here so I'm going to just remove there from here so now we have this function available in all of their components now the next thing which you have to do is that I am going to remove that from here and I I am going to remove it from we are not going to be removing it from here but now that you know that we are just pressing that state value like whenever we change something so we are just passing it inside the sidebar and then we are also passing it inside each of these uh components right here okay so now the next thing which you have to do is that we have to come to or input container right here I mean like in input component right here so I'm going to just zoom in a bit and here what I will do is that I'm going to specify a few items like a few perimeters so I'll just provide like handle change first of all so this is going to be the first case I'm going to remove them I'm going to provide this handle change right here so the next parameter I'm going to be providing is the value is like which kind of value we are going to be specifying inside this input container then after that I'm going to be also providing the title like which kind of title we are going to be using inside this component and then the name and also the color okay so a color we are not going to be using it for that much reasons but we will pass it right here okay so we have this sidebar level container right here the next thing which I will do is that I am going to use this handle change I'm going to copy there and now once we change something so we are going to be calling this method like handle change right here and we have the type of radio that's completely fine now we have to uh what do we call it control this component so if you want to control this component so we are going to be also passing this value to it so I'm going to just paste this value right here and now the final thing which you have to do is that we also have to copy this name from here and I'm going to place it right here here so let me just place it right here as a name and yeah that's completely okay but now the next thing which you have to do is that we also have to specify this color so I'm going to just copy there and I'm going to also provide a style create and then here what I'll do is that I'm going to just provide a background color of this color right here and now the final thing which you have to do is that we have to remove this all from here and I'm going to copy this title from here and I'm going to just pass it right here randomly so if you sell a file let me just remove this space from here semi file and here you can see we are getting these things but that's not working and that's not cool Hussein so what do we have to do we have to go inside first of all a sidebar right here and then we have to go into the categories and we are reusing these inputs right here so the first thing that you have to do is that uh you know what I'm going to remove all of them from here and I'm going to just first of all write a label and the first one we cannot change so that's why we are going to be writing it manually so sidebar label you can check that in your spare time if you want to but I don't want to check it right now but we can change it like I I think I think of every possible way but we can change it right now but I'm going to change that to radio so the first all we have to specify that like um we have to specify that like manually so we have this handle change which we are getting from this uh as a prop right here so we have access to that handle change you already know there and now what else you have to do we are going to be specifying the value of nothing because we are going to be selecting everything and the name will be now set to test okay so that's then I'm going to be also supporting a spin to it with a class of check mark and now as a level I am going to provide all okay so if it's sell file and let's just refresh so here you can see it one long uses all right here so now the next thing that you have to do is that we are going to be reusing our basic Imports so I'll just write input right here and now let me just close there and here we have to specify all of our prompts so I'm going to just provide like handle uh handle change and I'm going to copy this handle change from here and I'm gonna just place it right here okay okay so now the next thing which you have to do is that we have to provide a value for this input field so we have a sneakers right here and I'm gonna also provide a title of uh sneakers as well underneath there I'm going to be also supporting a name of like uh I don't know man uh test would be fine and I'm going to just duplicate this component like one time and then two time and three time okay so we are not going to be changing this one we are also not uh we will change this one so we have to change that to from sneakers to Flats and also this one do Flex as well okay and test would be fine so you will have to just change this value to just um I don't know sandal would be fine and this one will be also same dolls and that's going to be fine and then finally we have a hills and we have a heels right here okay so knife is server file and here you can see we are now getting sneakers and flared sandals in here so this component is now poorly reusable like we can reuse this component anywhere inside our program anyways so that's done now the next thing which we have to do is that we have to go inside a price tag so this price one right here and first of all I'm going to just uh get my handle changed right here and I'm going to just remove this component from here okay and I'm going to also copy uh you know I just removed there right here so I'm going to just copy this component because we cannot do anything we have to just specify it manually uh value uh and stuff like that so this one will be for all we have a test uh and this one will be Test 2 and we have everything we need and that's cool anyway so that's cool so now the next thing which you have to do is that we have to just get our input tag right here which we've been already using but I just deleted it there but we are going to be first of all providing a handle change and then we have our handle change right here then we have a value and it will be now set to 50 then we have a title and as a title I am going to just specify the string of like zero dollar to fifty okay so now finally I'm going to just provide a name of like uh Test 2 right here okay so now I'm going to save my file I'm going to duplicate that a few times so let me just go back and I'm going to just duplicate that to like I don't know three times so one two three and I'm going to just change the value inside them so it will be now set to 100 and this one will be now set to 50 100 like so and this one will be announced at 150 this one will be set to 100 and 150 okay so then finally we have a 200 right here and then let me just remove that from here and I'm going to just specify or 150 dollars okay so if you sell a file and now here you can see it will not gives us all of their labels right here and all of their products anyway so that's going to be awesome as well so that's working the way we expect him to work so now the next thing which you have to do is that we also have to go to the colors as well so I'm going to just go to the colors so I'll go to the price one more time and I'm going to copy that from here and I'm going to just replace it right here okay so underneath there I'm going to get my input and let me just close it manually ah come on like so and we have to specify these values so we have a handle change will be now set to handle change and are we getting it or not we are not so we have to are destructured from the top and now what we have to do we have to just specify value of blank and the title will be also set to Black and then we have a name of test one okay so this is going to be the test one and then we have a color of totally black one more time and now I'm going to duplicate them um I don't know maybe uh one two three four times maybe so I'll just write one two three four so I just duplicate that component four times right here so this is a black color I'm gonna just replace the two blue color and also this color is totally blue as well and also the color will be set to Blue and I'm going to also change that to from a black to whatever you call it uh red would be fine but the title should be uppercase and I am going to select it one more time and this one will be set to green and this one will be also set to green and I'm going to finally select it to I don't know um uh White would be fine so I'll just select it to White the title would be white but we cannot see the tile and you know what I just realized that the final one we also have to create it manually so like we cannot do anything for this one as well so we have a label with a class of sidebar and then level and container as well okay let's just remove the HTML from here and I'm going to just specify um whatever you call it our input area right here and I'm going to just change the type to like radio and on change will we now start to uh hand handle change there we go and now after that I'm going to also provide a type of radio uh we already provide type of radio turn didn't we yep we did the value will be now set to totally wine and also I'm gonna put a name of test one as well so now underneath this input area what we have to do we have to write or span with a class of check mark and we also have to specify some sort of a styling interval so like an inline styling so I'll just write background will be now set it totally white and I'm going to also provide a border of uh two pixels solid poly blank okay so now if you sell file and here you can see we are now getting all of these colors right here so if you click on it and all of their colors right here but we cannot see their white one we can change the label of that if you want to uh but you know what I'm going to change that color to something else like uh I'm gonna support a color of white to it not white but black would be fine so if you sell there and you know what I am going to remove that from here and as a level where is that span check mark and then we have wires or white text did we just put a white X or something okay we have to put it right here so I'm gonna just place my white text and now here you can see we are now getting it right there I didn't know like okay so now it's totally working so we have white green blue red and all of that but we also have to specify over all right here so I'll just provide a class name of uh class name of all right here okay so I'm gonna just pour it all right here so if you sell there and here you can see it will not gives us that linear gradient right here why is that that's because we already declared The Styling inside this all uh I mean like inside this color.css file and this is how we can specify and this is how we can pour it alrighty so that was a huge refactor so now the next thing which you have to do is that we have to take care of this card and render appropriate card like based on the user selection or whichever kind of filter the user perform all right so next thing which you have to do is that we have to pass appropriate data to each of these components so what I will do is is that I am going to first of all pass my query into this navigation so I'll just write a query and I'm going to also provide like handle input change so I'm going to just copy there and I'm going to place it right here so the next thing which you have to do is that we also have the part or handle change event right here into this component so I'll just provide it as a prompt so we have handle change there we go and not a handle change but um handle click to be precise not a handle change but handle click I'm going to copy there and I'm going to place it right here as well so the final thing which you have to do is that we are going to be passing all of our filter data into this products component and then we are going to be iterating over through that component and then we are going to be rendering each of these items right here like the appropriate image the title and all of that kind of stuff so here you can see we just have our results right here I'm going to copy that and I'm going to place it right here as a pro but let me just show you like what is this result so I've already read all of the code for it but here what we are doing is that we are getting all of that data from that item I mean like from their database which we have right here so I'm going to just open there real quickly so here you can see we have different kind of images different kind of title we have star reviews new price I mean like previous price new price Company color and all of their categories right here so here we are just destructuring all of their data from each of that component and we are passing all of their data to this card component is a problem so here you can see we have image we have title and all of that kind of stuff right here we are passing all of that there are dynamically into my card component so we will have access to all of that data dynamically inside my card component so what I will do is that I'm going to just send my file right here and now the next thing which you have to do is that I am going to go into my products section right here and I'm going to just remove all of this stuff from here I'm going to remove them the next thing which you have to do is that we already passed this result right here so I'm going to just copy there and I'm going to destructure it right here so I'm going to just restructure there and I'm going to just pass it right here okay so if you just pass it right here if you sell a file nothing will happen so now the last thing which you have to do is that we have to go to this card component and we have to just refactor the early builds so let me just show you that I'm going to just remove that from here I'm going to save my file and now I'm going to go into my card component right here so now here you can see we have like the same image right here we have the same uh title we have the same reviews and all of that same and pre I mean like all of their previous um price and all of their new price right like here you can see we have hard-coded data into all of this card component and we don't want that we want to render a dynamic content into these component so like Dynamic image and all of that title and rating and all of that kind of stuff so I'm going to read Factor this component from scratch so now if you want to refactor this component first of all I'm going to go into my app component and I'm going to just copy them like this restructuring I can type it manually but it will take a lot of my time so I'm going to just place it right here okay so we already structured all of their data which we are passing to this component as a problem so here you can see we just destruct your image and all of that kind of data so the next thing which you have to do is that I'm going to leave this clause and all of that all right here I'm going to just select my image and I'm going to just remove them and here what I will do is that I am going to just copy this IMG and I'm going to just paste it right here okay so now if I do that and if I sell my file and let's just wait for it so here you can see it for now just render all of that Dynamic content right here like all of their images right here all right that's cool so the next thing which you have to do is that we also have to provide that title right here so I'm going to just pass my title in here just for random data and now the next thing you have to do is that here I am going to just remove this shoe and I'm going to replace it with my title okay so now if you several files so here you can see we have this different kind of titles right here and don't worry I'm going to change the fonts and all of that kind of stuff just in a second but I just kind of want to provide different kind of data into it uh dynamically so next thing which you have to do is that I'm going to just remove that start from here I mean like that icon and I'm going to just replace it with star okay so I'll just copy there four times you can write three or two times or whatever so I'm gonna just pass it four times I'm going to send my file and here we are getting uh this black color what was that class a port I forgot the name of that class let me just go back okay so it's this class so I'm going to just copy that from one component I'm going to delete it then I'm going to go into my data and I'm going to select my I okay I'm going to just select there and I'm going to hit Ctrl D and I'm going to select all of these items right here so we already provide this style but I don't know why it's not working class name of there let me just pass it manually I guess I must have something in there oh I just write ratings instead for a thing I just provide s in here so I'm going to just sell my file and I'm going to save this file as well but it will just remove these Stars you know I'm gonna just render it dynamically so I'll just write star not start versus star and four times you can pour it three times if you want to but for me four star would be totally fine okay so we are totally getting there the next thing which you have to do is then I am going to also provide um reviews right here so I'll just write like reviews in here and then finally uh as a label I'm going to remove this label from here oh you know what I'm going to just remove this level and I'm going to just pass my new not new but uh previous price and here I am going to just render my new price right here so if you sell file and here you can see we have our previous price and we have a new price right here for each of these items right here okay so we have all of this Dynamic content right here you can probably mode in that if you want to but for me that's totally okay so here you can see we already pencil um what do you call it or filter functionality right here if I just click on sneakers it will just give the sneakers if I click on the flats okay we don't have fallards uh okay so I'm gonna go into my flats this component where is the category so I'm gonna just go into category very quickly and instead of fallers I'm going to just change that to Flats f l a t s I bet and I'm going to change this one right here as well so if it's our file and now let me just refresh there I'm going to click on Flats it will give the splits sandals and I'm not pretty sure about are these sandals or I guess these are all Sneakers but I don't know I just put a random data in here I don't have any idea about all of this stuff so heels then we have all of the items right here one more time then we have uh from zero dollar to fifty here you can see we are just getting the fifty dollars uh items then we are getting a hundred dollars item then we are getting 150 and then finally we have 200 of items right here so if you click on all of the colors so here you can see it will just gives us all of the colors right here if you just want a blank color so I'm going to just click on a black and it will now give this black color right here if you just want to get a blue we have red we have green and we also have a white color right here okay so that's looking cool but now I'm gonna just click on all of the products so that's not working that's not working we have to take care of that really quickly so that's in this recommended component so I'm going to just copy the name and I'm going to go into the Digicel like how much best I came into this component that's because you didn't take my usual three quarter cost so you gotta go into that course and you have to take that course oh and this is totally my guarantee that by the end of that original story recorded course if you took that course you are going to be calling yourself as a Sonic quarter I don't want to go that much fast in the recording because a lot of people get confused like Jose how did you get this fast into this component and how did you write this code there much faster and all of that kind of stuff so that's why I don't want to just go that much fast in my recording so trust me like when I'm working on my personal project I just go like crazy and if if you're a programmer and you said just uh with me you're going to be calling me a crazy because I try placa uh I you know what that's another story I'm going to just leave them anyways I'm gonna go into my app component right here and here you can see we just passed this handle click right here like whenever somebody clicks on this component so what you want to do here you can see we have handle click right here so we are just getting their data and then we are just filtering it right here okay so you already know all of that stuff but now let me just get there which is uh handle click but you know what uh I'm going to just remove there but first of all let me just create a component separate component for these buttons they are looking they're cool uh we already built their component but I forgot to refactor this component we just write a button right here so I'm going to just take care of there I'm going to just provide a few um what do you call it I'm going to just pass a few values like I'll just pass this values like on click a Handler and I'm gonna also provide a value to it it will take some sort of a value and I'm gonna also provide a title for this button so what I will do is that I'm going to just remove them and I'm going to just replace it with this button right here okay so now the next thing which you have to do is that I'm going to just write on click like when somebody clicks on this button we just want to find this perimeter right here this perimeter um event right here which you are passing and the next thing which you have to do is that we also have the pass or radio which we are getting dynamically and I'm gonna also part a video to it okay and then I'm going to just give some sort of a class name like buttons would be fine okay that's going to be totally fine and I am going to just pass that title finally so I'll just write title title there we go now we create this component right here so now let's just reuse that instead of these buttons I'm going to use my own so what I'll do is that I'm going to remove there you know what um I guess I'm going to leave that first one I'm gonna just leave them and now let me just get my own buttons so buttons there you go and now I'll just put on click Handler which we are taking and then we are going to be just passing over handle uh click event right here and I'm gonna support a value of Nike okay uh I guess I'm gonna have to close that otherwise it probably gives us uh is there buttons or button okay buttons anyways uh I am going to just close it manually like so but why it's giving us this nasty error once we have our Mouse ordered identify unexpected I'm gonna close them and yep that's cool but why it's giving us an error anytime I want to pass some sort of a value to it so I'm going to pass some sort of where you like Nike never start giving us any error and I'm gonna also test the title of Nike as well okay so that's cool so I'm going to just duplicate there for edit dance puma and vans and I'm going to just remove this title I'm going to select that hit Ctrl D and add a d i d s there we go and I'm going to just select Nike hit Ctrl D set that to puma and then we have uh Nike one more time I'm going to change that to events anyways that's cool and for this button we cannot do anything with it you know what I'm going to also duplicate let me just remove this one from here and I'm going to duplicate this one so instead of really I'm going to just remove this video right here and I'm gonna just press uh empty value like empty string and I'm gonna also pass my all um products as a level so now I'm going to sell my file and now let me just refresh that not getting any kind of error now I'm going to click on Nike and then I'm going to click on the products and now it's working alright so now we are successfully done with all of our project but we just have to point a little bit of styling for this typography and stuff anyway so I'm going to click on all of the product then sneakers Flats sandals heels click on all of the product then we have 050 and 100 and over 100 and then we have all of the colors then we have black color blue color red color green color and white um black color blue color red color green color and white color okay everything is working I'm going to click on all of the products then we have a Nike at a dance Puma events I'm gonna click on all of the products one more time and let's suppose if I want to get this one like Nike Zoom freak so I'm gonna just pass the name of him like oh Nike it will give us all of the product of the Nike and then we have zoom alrighty so this one is not working and I don't know why you won't believe me this error took me a lot of time to figure out like where in the world is I'm doing something wrongs here you can see I just write this expression right here I'm gonna cut there from here and I'm going to just place it right here so I'm going to sell my file finally and now let me just search for something like Nike uh Zoom freak if I just write Nike right here so it really gives us all of the Nike products I am going to just search for a zoom it will now just gives us Nike Zoom freak and let's suppose if I want to get this one like uh let me just copy all of the name and I'm gonna just place it right here so everyone uses this item right here so this book took me a lot of time you know what so finally what I will do is that I'm going to go in here and I'm going to select all of their stuff and I'm going to provide found family of sense serve to it and let me just refresh that and I won't start taking all of that uh so we have access to this index.css right here I bet we didn't use that in here so that's why we are not getting all of that stuff let me just use um import and then we have for our index.css so now if we sell our file and here you can see everything is working the way we expect them to work and everything is looking a okay so finally let me just test this for a final time and then we are going to be done for this project and if you are watching this video in my reactor so then we are going to be done with or react course anyways I'm going to just click on all of the products it will give us all of the products if you click on the sneakers and then we have flared sandals Hills I'm going to click on a zero 50 100 and over 100 I'm going to click on this one but I just figured out one more bug and that is occurring right here so we have to go into the sidebar then we have to go to the category so here what we are doing is that we are just providing a test right here and test for all of them that's cool I'm going to go into the price and here we are just specifying Test 2 right here that's also cool but now I'm going to go into the colors and we are specifying test two right here so I'm going to just select that hit Ctrl d uh and you know what I'm going to just specify test three right here I'm going to copy there now I'm going to just select my test one and all of them and here I am going to just specify test 3 if you sell a file and now let me just uh check that I'm going to click on this one click on this product and now that's totally working so if I want to just get like blue I'm going to get blue then red then green then white okay so that's also working let's suppose if I want to just get this product so I'm going to just copy there and I'm going to just place it right here so here you can see it will not gives us just this one product right here and I'm gonna just click on the sneakers and stuff and and I'm going to just click on a Nike then we have Adidas Puma veins and all of these products all right so congratulations we are not wholly done with this project and also with our react.js course so uh I don't know how to end this video but uh so thanks for watching and I'll see you in the next video bye

Channel: HuXn WebDev

Views: 221,904

Keywords: react, react tutorial, react search bar, search filter in react, e-commerce react, react js, ecommerce react, ecommerce react js, e commerce react website, ecommerce react tutorial, creating a server and api with node and express, ecommerce react app, search and sort in reactjs, react search, search react, search bar filter react, search filter react, reactjs search filter, building a search filter, react search filter api, e commerce react app, react e-commerce

Id: lfm_Hu0hEms

Length: 110min 13sec (6613 seconds)

Published: Fri Jun 02 2023