All language subtitles for الإنجليزية_(تم_إنشاؤها_تلقائيًا)_en_0_Build_E-Commerce_Website_With_Advance_

This is what we're going to be building

in this project by using React JS,

TypeScript, and Tailwind CSS. So, now

let me show you the functionalities that

we are going to be implementing in this

project. The first thing that we have is

a filter. So, we can select the cheap

products. As you can see, this one is

the cheapest one. We can also select the

expensive one. You can see we have an

expensive product. We can also select

the popular one, and this one is the

popular one right here. We can also

search by the product name. Suppose if I

want to search for a Rolex, so I'll just

write like Rolex, and here you can see

it's going to give me all of their

products which have the name of Rolex.

So, I'm going to remove that from here.

We can reset our filters, so I'm going

to click on that. You can also search by

a minimum price and also the maximum

price. So, suppose if I just write like

the minimum price of 20, and then I'm

going to also provide the maximum price

of like 200 200, so here you can see

it's going to only give me that two

products right here. And we can also

select by a category. So, if I just

select like beauty, so it's going to

only give me the beauty products. We can

also select by different kind of thing

like let's suppose if I click on the

furniture, it's going to only give me

that furniture right here, and so on and

so forth. Okay, so now let me just

refresh that one more time. We can also

select by a keyword. So, let's suppose

if I click on the Apple, it's going to

give me all of that Apple product right

here. We can also search for the

watches, fashion,

trend, shoes, shirt, and so much more.

Okay, so that was the first things. Now,

let me just reset there, and we also

implemented the pagination. So, if I

click on the second one, and here you

can see it's going to brings us to the

second page, and I can choose like

different kind of pagination, and so on

and so forth. So, I can click on the

next button, it's going to show me the

next page. I can also click on the

previous one, so it's going to brings us

to the previous page. And now, if I

click on a specific product, so I'm

going to just choose like watches, and

now if I click on a specific product,

and as you can see right here, it's

going to brings us to that specific

product page. So, we have the product

image, we have the product name,

description, price, and also the rating

as well. Okay, so we can go back to see

all of the products once again. We can

also follow someone and unfollow if you

wanted to. And these are totally dynamic

people like we're going to be sending a

request to the random users API. If I

refresh that, so anytime I refresh that,

it's going to give me all of that random

people right here. And finally, we have

these blogs, and they don't do nothing.

So, now let's get into the setup of this

project, and I'm going to see you there.

Let's talk about the requirements for

this video. So, for this video, you will

have to know the JavaScript. So, if you

don't know what a JavaScript is, so I

have a complete course on that. You also

would need to know a Tailwind CSS, so I

have a complete course on that. You also

have to know a TypeScript and React JS,

and also you have to take this course

which is advanced TypeScript types for

Next JS, but this course is not only for

the Next JS developer. I made this

course for both React JS developers and

also for the Next JS developers. If you

complete these courses, I can totally

guarantee that you're going to be

calling yourself as a TypeScript and

React JS monsters. Now, let's get into

the setup of this video. Now, let me

make a setup for my coding journey. So,

I'm going to open my terminal right here

on my desktop, and I'm going to just

paste this command which is create a new

project by using the weed, and I'm going

to just give it the name of like React

ecom. You can give it a name that you

like. And I'm going to just hit enter

right now. I'm going to write Y and hit

enter.

And now I'm going to choose the React.

I'm going to also choose the TypeScript

because in this video, we're going to be

also using a TypeScript as well. So, I'm

going to go ahead and go to that folder

which is React ecom.

And now let me use npm i to install

every single thing. Now, that's

successfully done, so I'm going to clear

this out. And now we have to install

more packages which is axios, lucid

icon, and also react router dom. I'm

going to hit enter, so it's going to

install that in my machine. Now, that's

successfully done. The next thing that

we have to do is that we have to go

ahead and go to the tailwindcss.com,

then docs, guides, and weed. So, once we

are there, so this step is now

successfully done. The next thing that

we have to do is that we have to copy

this command, and I'm going to place

that right here. Paste it anyways, and

I'm going to also hit enter, so it's

going to initialize my Tailwind CSS

inside my project. Now, that's totally

done, so I'm going to open my VS code

right here inside that specific folder.

Next, we have to copy this

configuration, and we have to go to the

tailwindconfig.js file, and we have to

place that right here. So, I'm going to

save my file, and now let me just scroll

down. So, we also have to go to the

index.css file. So, I'll just write

index.css, and now let me just place

that right here. Okay, so now let's just

remove that from here. And finally, I'm

going to go ahead and go to my app

app.tsx, and I'm going to just replace

that with this code. Okay, and finally,

now let me just run that. I'm going to

be using npm run dev, and it's going to

run that right here. So, and we are now

getting what a hello world right here,

which is amazing. So, now let me just do

a bit of clean up. So, I'm going to just

remove this assets from here. I'm going

to also remove this app.css, and I'm

going to go into my man, and yeah, I

guess that's going to be it. So, you

know what, let me just check this out.

Let's just refresh that. And yeah,

that's going to be it for the setup. And

you know what, we also don't need the

public, so I'm going to also remove the

public from here. So, that was it about

for the setup. Next, we have to create

our components folder, and I'll just

give it the name of like

components. And now inside there, we are

going to be creating first of all our

sidebar.tsx,

and I'm going to just create my

component by using our rfce. Now, inside

this component, first of all, we have to

create our state for the categories. So,

I'll just write categories and then set

categories

just like that. It's going to be equals

to the use state, and not transition,

but the use state. I'm going to set that

to empty array because here we are going

to be storing all of our categories. And

now, I'll just annotate that with the

string of array just like that. Okay, so

that's going to be our first state. Now,

I'm going to also create a state for the

keywords, but now in this case, we are

not going to be changing our keywords,

so I'll just write like keywords, and

I'm not going to just write like set

keywords or something like that because

we are not changing our

state. So, I'll just write like use

state, and all of these item, I'll just

place that right here, and I'm going to

also annotate that with the string.

Okay, so string of array. Underneath

there, we are going to be fetching our

data by using the use effect. And now

inside there, first of all, let me

provide my empty dependency array. Now,

inside there, we are going to be

creating our fetch categories. It's

going to allows us to fetch our

categories by using this function. This

going to be an asynchronous function

because we are going to be calling some

API. Okay, so I'll just write a try and

catch block, and for the catch block,

I'll just write like um console.error,

and then error fetching products. Okay,

and I'll just pass my error right here.

If that's not the case, so first of all,

we are going to be getting the response

by using the await. We're going to be

fetching our data from https, and then

the dummy json.com and products. And now

let me get a data a JSON data from that

response. So, I'll just write data, and

then it's going to be equals to

uh you know, it's going to be equals to

the await, and then we are going to be

using response.json.

But you know, I'm going to also create

an interface for that. So, I'll just

give it the name of like uh

uh fetch response. And now let me just

create that right here up above. And

first of all, we are going to be

creating an interface for the product

itself, and I'll just write like

category, and it's going to be equals to

the string. And now underneath there, we

are going to be creating an interface

for that fetch response, and it's going

to be set to the products, and then that

products interface which we have created

up above. Okay, and it's going to be set

to this empty array. So, that's there.

And now let me just log my data to the

console, so I'll just write like

console.log of data, and also let me

just call this function right here.

Okay, so I'll just use like fetch

categories, and now let me just execute

this function. I'm going to save my

file, and nothing will happen right

here. Why is that? Because we did not

register this component anywhere. So,

now let's just do that. I'm going to go

ahead and go to my app, and here now let

me just register my component. So, first

of all, you know what, you need a few

things. So, I'll just import first of

all my browser router. So, I'll just

write like browser router as router. I'm

going to rename that to the router, and

also let's just import our component

which is a sidebar component. So, I'm

going to copy that from here. And now

inside there, let's just remove that

from here. I'm going to write my router

first of all like the opening and

closing of router. Inside there, we are

going to be creating our div with the

class of flex and also the home of

screen. And I'm going to hit enter right

here. And now inside there, we just have

to call our sidebar. I'm going to save

my file, and now let me test this out,

and now let's just refresh that. And

here you can see we are now getting all

of that data right here. So, we have our

products. Here you can see each of that

product will gives us the category of

beauty, but we want only the unique ones

right here. We don't want to get like

beauty again and again. We only want to

get the beauty one time. Okay, and then

we want to get like I don't know, maybe

uh something else like this one. I can't

even pronounce this word, but yeah.

We only want to get the unique

categories. We don't want to get all of

them. So, how in the world we are going

to be getting our unique categories? So,

we are going to be using like

array.from,

and now inside there, we are going to be

passing our new set to there. And that

set takes an iterable, and it will only

gives us the unique value out of that.

So, I'll just use like data, and then we

are going to be iterating over through

that products. And now we have to use

like map method for that. So, I'm going

to just write like product, and then I'm

going to be using like

product.categories. Now, it's going to

gives us only the unique ones. So, I can

totally store them in the variable like

unique categories, and it's going to be

equals to that code. And now let me just

log the console my unique categories.

So, if I save my file, and now let me

just run that. And here you can see we

are now only getting these four

categories right here. Okay, so we have

our beauty, and so on and so forth. So,

yeah, this is how we are going to be

getting our unique values from our data.

So, I'll just remove that from here.

And I'm going to just set that to my

categories. So, I'll just write like set

categories, and we are going to be only

passing our unique categories to there.

Okay, so this is how we are going to be

fetching our category. And now it's time

to render this. I'll just remove that

from here. I don't know what's happening

with this JSX. Maybe I'm going to have

to restart my VS code. Okay, now it's

better. So, first of all, you know what,

I'm going to have to just provide a few

classes to it. So, I'll just write like

width of 64, and padding all around will

be set to five, and height will be set

to screen. That's It's to be our first

div. Now, inside there, we are going to

be creating our H1 with a class of text

2 XL, font of totally bold, margin for

the bottom will be set to 10, and margin

for the top will be set to four. And

I'll just give it the name of like React

store. You can give it any name that you

like. I'm going to save my file. And

here you can see we are now getting our

React store right in here, which is

looking amazing. I'm going to also hide

this sidebar from here. Now it's looking

better. Underneath there, we're going to

be creating our section. And now inside

this section, we're going to be first of

all creating our input for our text. And

I'll just write like uh the class name

of border 2 pixel and also totally

rounded. Padding for the x-axis will be

set to two. On the small screen size,

we're going to be providing margin for

the bottom of zero. Okay, and I'll also

provide the placeholder of search. Come

on, search product. Okay? And in this

case, I'm not going to be providing any

values to this. I'm going to save my

file. Okay, so that's going to be it for

the first one. Now, I'm going to also

create a div with a class of flex and

also the justify Come on, justify of

center. And we're going to be providing

the items of center as well. And now

inside there, we're going to be creating

our input with a with a type of text.

And I'll also provide a class name of

border two. Margin for the right will be

set to two. Padding for the x-axis will

be set to five. Padding for the y-axis

will be set to three. And also margin

for the bottom will be set to three. And

width will be set to totally full. And

you know, I'm going to also provide the

placeholder of men. I'm going to

duplicate this line of code and I'm

going to also provide a max right here.

Okay, so now let me just save my file.

And this is how it looks like right

here. It's looking awful, but yeah, we

will change that. Next, we have to take

care of our categories. So, I'm going to

come underneath this div. Now, I'll just

write like categories

section. First of all, we have to create

our div with a class of margin for the

bottom of five. And we have to create

our H2 with a text of extra large.

Extra large and the font will be

semi-bold. Margin for the bottom will be

set to three. And now let's just write

our categories inside there. And this is

how it looks like right here. So, that's

amazing. Now underneath there, we're

going to be iterating over to all of

that categories, which we've provided

right here. So, we're going to be

iterating over through all of there. And

then we're going to be rendering like

only the unique ones. So, I'll just

write like categories. And now let's

just use our map. And here I'm going to

provide my category and also the index.

And now inside there, first of all, let

me provide my label. And for each label,

I'm not going to be providing any HTML

for. I'm going to provide my key of

index right here. And also let me just

provide a class name of block. And

margin for the bottom will be set to

only two. Okay, so now let's just go

inside there. And I'm going to be

creating my input first of all. And for

this input, we're not going to be using

text, but instead we're going to be

using a radio. I'll just provide a name

of like category.

And I'm going to also provide the value

of category as well. And you know, I'm

not going to be providing any on change

or anything like that. So, I guess

that's going to be fine. But I'm going

to also provide a bit of styling to it.

So, like uh margin for the right will be

set to two. Width will be now set to 16

pixel. And height will be also set to 16

pixel. So, now let me just save my file.

And this is how my categories looks like

right here. But now we have to render

our categories. And to do that, we're

going to be using my category.

Uh yeah, category just like that. And

I'm going to be using to uppercase. If

you don't like the uppercase, you can

totally change that. But yeah, in my

case, that's looking better. So, yeah,

we're totally good here.

So, that's looking amazing. Now, you

know what? I'm going to also take care

of the keywords as well. So, and I just

realized that I'm going to have to wrap

them in some sort of a section. So, I'll

just cut that from here. And now let me

just put that right here underneath

there. And now let's just take care of

the keywords. I'll just write like

keywords and section. Okay, so now let's

just take care of this. So, first of

all, we're going to be creating margin

for the bottom of five. H2 with a class

of text extra large and also the font

will be set to semi-bold. Margin for the

bottom will be set to three. And let's

just write our keywords right here. So,

I'm going to save my file. And this is

how it looks like right here. You can

also provide like some sort of a margin

for the top of four or something. I

guess that's looking pretty good.

Underneath there, let's just create

another div. And now inside this div,

we're going to be iterating over through

all of the keywords. And let's just use

a map right here. And I'm going to pass

my keyword and also the index as well.

Okay, so now inside there, we're going

to be creating a button. You can create

like any kind of UI if you wanted to.

And I'll just pass like the key of my

index. And also let me just style this.

I'll just write block. Margin for the

bottom will be set to two. Padding for

the x-axis will be set to four. Padding

for the y-axis will be set to two. And

width will be set to totally full. Text

will be set to the left. And let's just

provide a border and also rounded. Once

we have our over it, we want to change

the background color of gray to 200.

Okay, so that's going to be it.

And now inside this button, we want to

use like keyword.

to uppercase. If you want to change

that, you are more than welcome to

change that.

Okay, so here you can see I have my

buttons right here, the keyword buttons

right here, which is also looking

amazing. And now finally, we have to

take care of that one button. Okay, so

I'll just go down here. And now let me

just create a button right here. And

let's just style that a bit. So, I'll

just provide the width of totally full.

MB, margin for the bottom will be set to

4 rem. And padding for the y-axis will

be set to totally black. Background will

be set to totally blank. And text will

be set to totally white. And rounded.

Margin for the top will be set to five.

And I'll just provide the label of like

reset filters. I'll just save my file.

And here you can see this is how my

reset filter will look like. So, we are

now totally done with this UI stuff. But

now the next thing that we have to do is

that we have to take care of the

functionality. We are going to be making

some sort of a changes inside this

sidebar.tsx

file. And we want to render that changed

data inside the main content.tsx file,

which we are going to be creating very

soon. So, how in the world we are going

to be doing that? Well, the first way is

to use a Redux Toolkit or Redux,

whatever you want to call that. And the

next way is to use the context. So, this

project is not that big project. So,

we're going to be using only the

context. So, I'll go ahead and create my

context right here. So, I'll just give

it the name of like filter context.tsx.

Not tsx,

just like that. And inside this context,

first of all, we're going to be

importing a lot of things like uh we

have to import our create context. We

also have to import our use context. And

also we have to import our use state.

And also we have to import our React

node. So, we're going to be importing

all of there from the React.js. Next, we

have to create our big interface. So,

I'll just write like interface. And I'm

going to give it the name of like filter

context type. And I'm going to just make

that as uppercase. And now inside there,

first of all, we have to write our

search query. And you know, let me just

zoom in a bit right here. And it's going

to be set to string. We already know

that. We also have to write our set

search query. And it's going to be set

to a function, which will take some sort

of a parameter of query. And that's

going to be a string. And now we have to

provide our void right here. And also we

have to provide our selected category.

And it's going to be set to a string. We

already know that. And then selects set

selected category will be now equals to

this function, which will also take a

category as a parameter. And that's

going to be a string. Okay, so we also

have to set that to the void. Let me

provide my minimum price. And that

minimum price, we already know that it's

going to be either a number or it's

going to be a totally undefined. We

don't accept anything else in there.

Okay, so either a number or undefined.

Then we have to provide our set minimum

price. And it's going to be set to this

price. And that's going to be totally a

number. Okay, or maybe undefined. Okay,

so let's just provide our void right

here because that's going to be a

function. And let's just provide for the

max price. And max price will be either

a number or undefined. And also the set

max price will be now set to this

function, which will be a price. And now

let's just provide either a price or the

undefined. And now we also have to

return the void because this going to be

a function or a method rather. And now

let's just provide our keywords or

keyword singular. And it's going to be

set to a string. And then we have to

provide our set keyword. And that's

going to be a function, which will take

the keyword as a parameter. And that's

going to be a string. And now we have to

just return the void inside this. So,

let's just go back. And this is how

we're going to be creating our filter

context types. That's going to be only

the types. Okay, so

let's just create our

filter context right here. So, I'll just

write like create context. And now here

inside there, we're going to be

providing only the undefined right here.

But for the type, we're going to be

providing first of all the filter

context type or undefined. And now let

me just filter and then context. And now

we have to store that in this variable

right here. Okay, so everything is

looking good. But we have to just use

these unused variables. The next thing

that we have to do is that we have to

create our provider. So, I'll just write

like export const filter provider. And

you can give it like any name that you

like. And I'm going to be using like

React. functional component right here

in this case. And we're going to be

providing uh our children. So, that's

why I'm using that. So, we're going to

set the children Come on, children to

the React node. And now we have to just

set that to equal to this children right

here. Okay? And now finally, we have to

go to the body. Now, let me just save my

file. It will gives us that error, but I

want you to just ignore that for a few

seconds because it will fix itself.

Okay, this is just a TypeScript error.

So, first of all, we have to define a

lot of state. So, we are going to be

defining like the search query state and

also set um

search query.

It's going to be equals to the use

state. And now inside there, we're going

to be setting that to empty string. So,

I'll just set that to only a string.

Okay, so yeah, that's going to be the

first one. Now, the next thing that we

have to do is that we have to create our

uh selected category and then set

selected category as well. It's going to

be equals to the use state. And now

inside there, we're going to be also

setting that to the empty string just

like that. And also we have to set the

minimum price. And also set min price.

It's going to be equals to the use

state. And we have to set that to

undefined initially because we don't

want to set the initial value to

anything Okay? and you will see the why

I'm providing an undefined right here

okay in a few seconds. Now let me just

annotate that with the undefined and you

know I'm going to just you know I'm not

going to duplicate that.

So I'll just write like the max price

and then the set max price is going to

be equals to the use

state use state and we are going to be

providing the undefined as the initial

value. Okay, so let's just provide

either the string or undefined. And why

am I providing a string?

These are the prices we have to set

there to number. Underneath there we

have to create our keyword and let's

just write our keyword and then the set

keyword. Okay, and it's going to be

equals to the use state and we have to

just set there to the empty string.

Just like that. Now we are totally done

with that. So I'll just write like

return, provide my filter context

dot provider. Okay, so now inside there

we are going to be also providing our

children right here. So I'll just write

like

uh children

and I'm going to also provide my values

right here. So I'll just write like

value and I'm going to de-structure

them. So I'll first of all provide my

search query and I'm going to also

provide my set search query and selected

category and also the set selected

category, minimum price and also the max

or you know set minimum price as well,

set min price and also the maximum price

and set max price and also the keyword

and set keyword just like that. So I'm

going to save my file and then finally

we have to just create our use filter.

Okay, so let's just use our export const

use filter is going to be equals to this

function right here and now let me just

provide first of all my context. You can

give any name that you like and I'm

going to just use my use context right

here and we're going to be providing our

filter context to there. Okay, and now

we have to check if we don't have that

context. So what do you want to do in

that situation? We just want to throw

the new error and you want to say that

use filter must be used with within a

filter provider.

Provider just like that. If that's not

the case we just only want to return our

context just like this. So I'm going to

save my file and that was a lot of

talking.

I don't know where in the world is this

use transition came from but yeah,

there's everything that you have to do

for the filter context. Now that we

successfully created our context you

know the next thing that we have to do

is that we have to go ahead and go to

our main and we have to register that

right here. So first of all we have to

import our filter provider and now we

have to wrap every single thing inside

this. I'll just write like filter

provider and I'm going to close there

and let me just put my app inside this

filter provider. So then it's totally

done. Next we have to use this filter

context inside the sidebar component. So

how are we going to be doing that? First

of all we have to de-structure every

single thing from there. So we are going

to be using like use filter. Now inside

this use filter we are going to be

de-structuring all of their properties.

So I'll just put there right here. And

yeah, we did not use this so that's why

we are now all declared element are

unused so that's why we are now getting

this error like

we have these variable but we did not

use this. Now let's just use them. First

of all we have to take care of the first

input field which is this input field

right here. So I'm going to provide the

initial value of the search query and

I'm going to also provide the on change

and once we change something inside

there so we are going to be using like

set search query and we are going to be

providing e.target.value

like what did we type inside that input.

Okay, so that's going to be the first

one and next we have to take care of

this input field right here like the

minimum and also the maximum. Okay, so

for the minimum we are going to be

providing the value right here and the

value will be either the minimum price

which we are now getting from the top

and now if that's not the case we are

going to be only setting there to empty

string. Okay, so once we change

something inside there so we are going

to be calling this function which is

handle min

price change. This is not big function

to create it separately but you know

what? I don't want to clutter my UI so

I'm going to go to the top and now let's

just create there right here. So I'll

just use like const and handle min price

change and it's going to be taking that

event object and now inside there we are

going to be first of all getting the

value from there so we can use like

e.target.value

and we can also just set there to the

minimum price right here. So value if we

have some sort of a value and convert

our value to that floating point number

and if we don't have the value so we

just want to set there to undefined. And

now let me take care of this event error

right here. Let's use like create dot

change event and now we have to just

pass our HTML input element right here

inside there. So this is how it's going

to resolve that error right here. Okay,

so that's going to be the first one. Now

let's take care of that maximum one

right here. Okay, so we are going to be

providing the value to there. So let's

just write our value and the initial

value we are going to be setting there

to the maximum price and if we don't

have the maximum price so for that we

are going to be using the empty array

empty array but just empty string. Okay,

so then we have to use our on change.

When we want to change something inside

there so for that we are going to be

using like handle max price change. Kind

of a long function name so we just have

to create there right here. So I'm going

to be using there. It's going to also

take that event so you know I'm going to

have to copy this entire thing from

here. Now let me just paste there right

here and let me close there. And we are

going to be doing the same thing like we

have to get the value by by using the

e.target.value

and we also have to change the set

maximum price and then we have to

provide our value if we have the value

so we have to change that to the parse

float and if we don't have the value so

we just want to change that to

undefined. Okay, so I'm going to save

this file and that's going to be it for

the handle max price change. Okay, so

let's just see what else is left and

here you can see we also have to take

care of this input field right here

which is not going to be that much of a

problem. So what I want to do is that I

want to provide my what do you call it?

Um

I'm going to provide my on change. It's

going to be taking this function as an

input handler so I'll just use like

handle radio change categories just like

that and we are going to be passing our

category

category inside there and I'm going to

copy that from here and let's just go to

the top and I'm going to just create

there right here. We are not going to be

doing anything crazy but we are going to

be just creating this function and it's

going to be taking the category as a

parameter and that's going to be a

string and now inside there we have to

just write like set selected category.

Let's just provide our category inside

there. Underneath this class name what

do we have to do? We have to just

provide our checked and we are going to

be setting there to the selected

category and if that's equals to the

category so only just check there and if

that's not equal to the category

then make it disable. Okay, so that's

going to be for the checked and now

let's just take care of this keywords

right here. When somebody clicks on this

button right here so what do we have to

do? In that situation we want to change

the handle keyword click. Okay, and we

are going to be only passing the keyword

inside there. So I'm going to copy that

from here and we have to just create

there right here inside underneath this

handle radio change category. So I'll

just create there right here. It's going

to be taking a keyword and let's just

provide a string to there. Now let's

just change our set keyword and we are

going to be only passing our keyword

inside there. Okay, so I'm going to save

my file and I guess that's going to be

it for the functionality if I am not

wrong. Yeah, I am wrong

because we have to take care of this

reset filters as well. Okay, so how we

are going to be doing that? To do that

first of all we have to provide our

handler right here. So we are going to

be just writing like on click handler.

So we are going to be passing like

handle reset. Okay, so I'm going to copy

that from here and let's just go to the

top and set everything to the empty

string. Okay, so I'll just write like

const handle reset filters and now

inside there what do you have to do?

First of all we have to provide our

search query and we have to set there to

empty string. We have to get our set

selected category. We have to set there

to empty string. We have to get our set

minimum price. We have to provide the

undefined inside there. We have to get

our set maximum price. We have to set

there to undefined and also the set

keyword to empty array to empty string.

So I'm going to save my file and I guess

that's going to be it. So you know what?

The functionality is not totally done

but now the next thing that we have to

do is that we have to render our content

right here. The sidebar is not totally

done. Okay, so that's going to be it for

the sidebar and now let's just create

our main content component. So main

content con main content.tsx

Now I'm going to just write like rfc and

main content inside there. So I'm going

to save my file and now let me go ahead

and go to my app. Underneath this

sidebar we are going to be creating a

div. I'll just provide a few classes to

it like rounded and then the width will

be set to totally full and also the flex

justify will be set to between and also

flex will be set to totally wrap. Okay,

just like that. And inside there we are

going to be just providing our routes.

You don't have to do that but if you

want to do that so that's going to be a

better idea. If you want to create a

separate page you can totally do that

but you know what? I'm not going to do

that. I'll just write like route and

let's just get there from the react

router and let's just close there right

here. I'm going to provide a path to

there and path will be just a home and

for the home we are going to be just

providing a element of our main content

component which we just created right

here. So I'm going to save my file and

here you can see we are now getting our

main content right here which is

amazing. So I'm going to close there and

let's just close this filter and also

the sidebar and now let's just take care

of this main content component. So what

I'm going to do is that first of all I'm

going to have to import a lot of things

from

what do we call it? From our use filter.

Okay, so let's just execute that and now

inside there we have to de-structure

like the search query and also the

selected category and also the minimum

price, the maximum price and also the

keyword. Okay, so I'm going to go back.

Come on, let me just go back and I'm

going to save my file and that's the

thing that we have to import right here.

Next, we have to create a few states

like products and then set products.

It's going to be now equals to the use

state and we can provide like basically

anything.

Anything for the array. Okay, so let's

just provide our empty array right here.

And also, let's just create our filter

and set filter. It's going to be equals

to the use state. And for the initial

not a use transition but a use state.

And the initial value we're going to be

placing all to it. And also So, I'm

going to pass my current

page and then set current. Come on, set

current page. It's going to be equals to

use state.

Use state and we're going to be passing

one to it like for the initial value.

And then let's just also create for the

drop down menu because we're going to be

also creating a drop down menu as well.

And then set drop down open. Okay, so

it's going to be equals to the use

state. Use state and we're going to be

providing the initial value of false to

it. Okay, so then it's all you're done.

But I'm going to also create one one

variable not a state but one variable

like items per page and it's going to be

equals to only 12 item. If you want to

increase that, you can totally do that.

But in my case, only 12 will do. Let me

take care of the UI and then we're going

to be going into how we're going to be

fetching our data. Okay, so first of

all, let me just change this div to the

section. I'm going to copy that from

here and now let me just replace that

with this one. I'll provide a class name

of like for the extra large screen, what

do you want to do? We just want to

provide this the width of 55 rem. For

the large screen, you want to change the

width to 55 rem as well.

And for the small screen,

you want to change the width to 40 rem.

And for the extra small screen, you want

to change the width to 20 rem. And also

for the padding all around will be set

to five. So, that's going to be fine.

And now we have to create our div with

the class of margin for the bottom will

be now set to five. And we also have to

create another div with the class of

flex and also the flex of column. And

the small will be set to for the small

screen size, we're going to be providing

the flex of row to it just like that.

And you know what? I'm going to also

provide a

justify of between and also the items

will be set to center. Inside there,

we're going to be creating yet another

div with the class of relative and also

margin for the bottom will be set to

five and for the top will be also set to

five. Okay, and we're going to be

creating only one button inside there.

And that button will take these classes

like border and also padding for the x

axis will be set to four, padding for

the y axis will be set to two and

totally rounded four and flex will be

also set to item center.

Okay, inside this button, what do you

want to do? We just want to provide

our icon just for now. We're going to be

only implementing our icon which is

telly three.

Telly three, we're going to be importing

that from the lucid icon. And I'm going

to just provide the class name of margin

for the right will be set to two. Okay,

so I'm going to save my file.

And this is how it looks like right

here. So, we're going to be changing all

of that stuff inside there. But for now,

this is looking better. You know, I'm

not going to do that later. I'm going to

do that right now. So, first of all, let

me just check if filter is triple equals

to

all which is already set to all right

here which we have already set there to

all. So, if that's the case, so what do

you want to do? We just want to set

there to filter. And if that's not the

case, so we just want to get like filter

dot character at and you want to provide

a zero and then to lower case inside

there. Not locate but to lower case. We

also have to concatenate the filter dot

slice and number one. Okay, so I'm going

to save that for now. And this is how it

looks like right here. But currently, we

don't have any drop down menu, so that's

why we cannot see there. But you know

what? Let me just create that drop down

menu right here. Okay, so what do I have

to do underneath this button?

I'm going to just create my drop down

menu which we've already created up

above. So, I'll just write like drop

down menu. And if that's the case, so

what do you want to do? We just want to

first of all, create a div right here.

I'll provide a few classes to it like

absolute. You're not providing a

absolute because in this case, we're not

providing the relative value. So, this

will be the absolute value for the.

Okay, so now inside there, what do we

have to do? We have to change the

background color to totally white and

also I'm going to provide a bit of

border and border of gray of 300 and

also totally rounded, margin for the top

will be set to two, width will be set to

totally full. For the small screen size,

we're going to be setting the width to

totally 40.

Yeah, totally 40 just like that.

Okay, so now inside there, we're going

to be creating yet another button and

which will say like when somebody clicks

on there, so we're going to be only

firing this function which is like set

filter. And we're going to be setting

there to cheap. Instead of a full, you

know what? Let me just show you there

right here which was set to full. Now,

we're going to be setting there to the

cheap one right here. I'm going to also

provide a bit of classes to it like

totally block. Padding for the x axis

will be set to four and padding for the

y axis will be set to two, width will be

set to four and text will be set to

left. I'm going to provide the hover

state to it so like when somebody hover

ordered, so you want to change the

background color of that to like 200

of totally gray. So, now I'm going to

just provide the label of cheap inside

there. I'm going to save my file. And

you know, I'm going to just duplicate

that a few times. So, I'm going to just

select this button. And we have a cheap,

so we have expensive and we also have

popular one right here. So, I'm going to

just change that to like instead of a

cheap, I'm going to provide expen

sive. And here I'm going to also provide

expensive. And finally, I'm going to

provide a popular. So, p o p. Come on, p

o p u l a r. And here, popular as well.

So, I'm going to save my file. Now, if I

click on there, so nothing will happen.

So, you know, I'm going to go into my

drop down menu. It is now set to false.

So, I'm going to just set there to like

true. Now, if I save my file and here

you can see we're now getting a cheap,

expensive and also the popular one. I'm

going to set there to false once again.

And now we have to take care of the rest

of the UI. So, next we're going to be

working with the card. Okay, so I'll

just create a div with the class of like

grid. I'm going to also write a grid of

columns and four and I'm going to also

provide for the small screen size, we're

going to be providing the grid of

columns. For the medium one, we're going

to be providing a grid columns columns

of four and also I'm going to provide a

bit of gap to it so like gap will be set

to five. And here we're going to be

rendering the book card very soon. Okay,

so first of all, we have to take care of

the filter product and then we're going

to be jumping into the book card. So,

we're going to be placing our card in a

few seconds but first of all, we have to

fetch our data. Okay, inside this

component. So, what I'm going to do is

that I'm going to be using my use effect

right here. So, I'll just use like use

effect and here we're going to be

passing our function inside there and

also our dependency array. So, for the

dependency array, we're going to be

passing the current page when the

current page changes and also the

keyword. So, you want to just refetch

all of our content. So, based on that,

first of all, we're going to be

declaring our URL and it's going to be

equals to you know, let me just zoom in

a bit right here. And we're going to be

setting there to like https and then

once again, our dummy json.com and then

forward slash products. And then here

we're going to be providing a limit to

there. If you don't want to provide the

limit, so you don't have to do that. But

in my case, I am going to do that. I'm

going to be rendering my content

dynamically, so I'm going to change that

to the template literal.

Whatever you want to call that. I'm

going to provide my dollar symbol right

here and then items per page which is

now set to only 12 item right here. You

can increase or decrease that if you

wanted to. And in my case, I'm going to

just set that to like 12 and 12 will do.

And skip. Let's just provide our skip

right here. And that's going to be

dynamic, so I'll just write like my

dollar symbol. And let me just provide a

current page minus one and then outside

from there, we just want to provide a

times items per page. Okay, so it's

going to give us our URL based on there.

Now, underneath this URL, we have to

check for our keyword. Okay, so if you

already have our keyword, so you have to

change our URL to this URL like http

ttps and then our dummy. Come on, dummy

json. json.com forward slash products

and then search. Let me provide a

keyword right here. And here we're going

to be rendering our keyword right in

here. Okay, so that's going to be the

next one. And finally, we have to use

our axios

to fetch all of our content. So, you can

totally use a fetch if you wanted to.

But in my case, I'm going to just set

that to like axios. But to do that, we

already installed that but we have to

grab that right here up above. So, I

already imported that. Okay, so we have

to grab our axios and now we have to

just call our get method and we have to

pass our URL inside there. And then we

have to pass our then.

Okay, so let's just provide our

response. And now for the response, what

do we have to do? We have to set the

products to response.data

and then that product. Okay, so if you

want to check it out, let me just show

you that. So, I'm going to just copy

that from here. And I'm going to just

log that to the console like

response.data.products.

But I'm going to also provide a catch

statement. So, if you got some sort of

an error, so you want to see

console.error. And here we're going to

be passing like error fetching the data.

And I'm going to just use my error right

here. So, I'm going to save my file. And

now let me show you all of that content.

Okay, so here you can see. Oh my god, we

got some sort of an error right here.

Let's just check it out. So, what's

going on? It should be a products. Not

what the hell I just write like

products. So, I'm going to save my file

and run that. And here you can see we're

now getting all of that data right here

by using our axios. So, yeah, that was a

simple and easy stuff. The next thing

that we have to do, I'm going to just

remove that from here. The next thing

that we have to do is that we have to

take care of the filtration. Okay, so

I'm going to be just creating my

function right here. Like get filter

item. Like get filter products. So, I'll

just write like this is going to be a

huge function by the way. I'm going to

go back. And now let me just provide a

bit of spacing right here. And let's

just create our get filtered products.

Come on, p r o d u c t s. And now inside

this function, what do you have to do?

First of all, we have to set our filter

products

to that filter not a filter but the

products which is that which is a state

which we've already defined right here,

which is now set to the empty array

right here. And now let's just change

that. Okay, so we're going to be setting

that to that filter products. And now

underneath that, what do we have to do?

We have to check if we already have the

selected category. So what do you have

to do in this situation? We want to get

the filter products, come on, the filter

products that variable, which we just

created right here. So I'm going to copy

that from here. And now let me just

place it right here. So filter products,

and we have to call our filter method on

there. now here, what do you have to do?

We have to pass our product inside

there, like as an arrow function. And

then we're going to be checking like

product.category, come on, category is

triple equals to the selected category.

So I'm going to just rename that to like

the filter products, which we've already

defined up above. So let's just place it

right here. And I'm going to save there.

So if I save there, and now let me just

log that to the console like products

right here. So I'm going to save my

file.

But for that, we also have to call that

somewhere. So you know, I'm going to

call that right here. Uh I'll just

create a variable. I'll give it the name

of like filtered products, and it's

going to be equals to the get filter

products, and I'm going to execute

there. So if I execute there, so we also

have to log that to the console. Oh, you

know, I'm not going to store that in any

variable now for now. So I'm going to

save my file. And yeah.

Let me just refresh there. And here you

can see, here is my category. So if I

click on this first one, it's going to

give us all of that data based on that

specific beauty right here. So this one

will have the

This one will have the category of

beauty, and all of them will have the

category of Let me just show you that

beauty right here. So if I click on the

furniture, it's going to give us the

data based on that furniture right here.

And here you can see, both of them will

have the ID. Why am I saying ID, but the

category of furniture is right here. So

now let me just refresh there. And that

was the first filter. Now let me just

take care of the rest of them. But you

know, I'm going to also store them

inside this variable. Okay, so let's

just remove that from here. And that was

our first if check. Now underneath this

if check, we also have to check for the

minimum price. Okay, so if the minimum

price is not equals to undefined, you

want to get our filtered products, and

you want to set that to the filtered

products, come on, filtered

products.filter.

And now inside there, we're going to be

passing our product inside there. And

you have to just check like

product.price, come on, price

is greater than or equals to the minimum

price, which we've already defined up

above. Okay, so now let me just go

there. And here you can see, we're now

getting this minimum price from the use

filter. We want to filter through like

if the product.price is greater than or

equals to minimum price. So in that

situation, we can totally log that to

the console like filter products. But

you know, it's going to waste a lot of

your time. So if you have a free time,

so you can totally go ahead and filter

through that. So I'm not going to do

that. Okay, so that was for the minimum

one. But now let's just also provide for

the maximum price is not equals to, come

on, not equals to

uh undefined. So in that situation, you

want to get our filtered products, and

you want to set that to the filtered

products.filter method. And now inside

there, we have to pass our product.

Product.price

is less than or equals to the maximum

price, which is also coming from the use

filter context. Okay, so it's going to

give us values based on there. And next,

we also have to take care of this search

field as So I'm going to do that right

now. And next, we also have to take care

of this input field as well. If you

search for some items, we're going to be

rendering only that specific item. Okay,

so let's just do that. I'm going to

provide my if statement right here. So

if search query, which is also coming

from the context API, so we're going to

be using like filter product. And now

it's going to be equals to the filtered

product.filter method. And we're going

to be passing our product inside there.

Okay, so let's just use our

product.title. We are only interested in

the title. And you want to set that to

lowercase because there can be a lot of

conflicts between the uppercase and the

lowercase. So that's the only reason I'm

changing that to the lowercase. I'll

also provide the include method on

there. And here we have to pass our

search query, and then to lowercase.

Come on, lowercase. Come on. to

lowercase. There we go. And I'm going to

also execute there. Okay, so now that's

totally done. And you know what? I'm

going to also take care of

uh that filtering as well. So I'm going

to save this file, and now let me just

show you there. Let me take care of

Where in the world is there?

That is now set to false. So I'm going

to set that to true. I'll set that to

true. And here you can see, now let me

just take care of the cheap, expensive,

and the popular one. So let's just go

back.

Okay, so let me take care of that. And I

guess that's going to be the final

filter. So I'll just use my switch right

here, and I'm going to be passing a

filter the entire filter inside there.

And now inside there, we're going to be

using the cases like if the case is set

to expensive, so what do you want to do

in that situation? We only want to

return the filtered products.sort

method. We are going to be using that

sort method. And then we're going to be

passing like two parameters like A and

B. You can pass X and Y. You can pass

anything that you want. B.price minus

A.price. Okay, so that's going to be for

the first one, like for the expensive

one. And I'm going to also just

duplicate that for the popular one and

also for the cheap one. So I'm going to

just write like cheap in this situation.

And then here we are going to be

changing that from the B to A, and also

this one from the A to B. Okay, so it's

going to only give us that cheap ones.

And we're going to be also searching for

the popular one as well. And now in this

case, we're not going to be working with

the pricing. We're going to be working

with the rating. B. B.rating minus

A.rating. Like this. Okay, so then it's

going to give us all of that data. If

that's not the case, we just want to

provide a default state to there, and we

want to only return the filtered

products right here. So I'm going to

save my file, and that's going to be it.

So I'll just log that to the console,

and now let me just show you all of

them. So I'll just use like filter

products. I'm going to save this file.

And now let me just show you all of

there. So here you can see, it's going

to give me a lot of data. Let me just

wipe this out. And first of all, I'm

going to be searching for something like

e w s. And here you can see, it's going

to give us that data, but we cannot see

that data because we did not render our

book content, which we're going to be

doing in a few seconds. So if I just

expand there, and here you can see, it's

going to give us e w s e n c and e i y

and so on and so forth. So that was the

first filter, which means like the first

filter is totally working. If I write

like the minimum value of 19, and then

the maximum value of like 200, maybe.

And here you can see, it's going to give

us the minimum value, and it's going to

also give us max You know, let me just

show you the minimum ones. So I'll just

expand there.

And check out the pricing. So it is now

set to 19 because I provided the minimum

value of 19 to there. And now let me

just check the maximum one. Well, let me

just check this out. No, that's not the

maximum one. Let me provide 200 right

here. But first of all, let's just clear

this out. Let me provide a 200, and now

it's going to give us

I guess 200. Let me just see.

Mhm.

Yeah, it is not equals to a 200. But

yeah, this data is totally coming from

the API. So this is not my own API. So

we cannot test that right now. But

anyways, both of them are now working. I

mean like all of these three are

working. Let me check out the next one.

So if I check out this beauty, and here

you can see, it's going to give us all

of that beauty products. If I click on

the apple, so it's going to only give us

that apple product. And yeah, we got an

error because we have to bind there. We

did not bind there. So we're going to be

doing that in a few seconds. So yeah,

let me Jason Oh, here you can see, I've

made a mistake. I thought I'm going to

be binding there, but no. We have to

change that to instead of us o c m, we

have to change that to c o m. I'm going

to save this out. And now let me just

try this out. So I'll just clean this

out. And here I'm going to just choose

the apple. It's going to only give us

that apple product right here, like

apple apple apple apple. And if I click

on the watch, it's going to give us all

of that watches right here, like we have

a brown leather belt watch and so on and

so forth. And everything is working. And

now let me just refresh there. And now

everything is working the way we expect

them to work. But now we have to render

all of that filtered content inside our

screen right here. So how we're going to

be doing that? Let's just do that. So

what I'm going to do is that I'm going

to go to the bottom, and here we are

going to be rendering our book

component. But before I do that, we're

going to be using like filter products,

and then we're going to be iterating

over through all of the product, and we

have to get the filtered one. And now

inside there, here we're going to be

rendering our book, come on, book card.

Okay, so I'm going to just render there

right here, and I'm going to comment

this out. I'm going to save this file.

It's going to give us an error. But now

let's just create our book card right

here. Card.tsx.

And now inside there, first of all,

we're going to be grabbing our link

component, which you will see why I'm

doing that. And then we're going to be

just using our r a f c e. And let's just

create our book component, book card

component to be precise. I'm going to

uncomment there. And let's just grab

there right here. Save my file.

And here you can see, we're now getting

book card, book card, and so on and so

forth. You get the idea. For this book

card, we're going to be passing a few

props like First of all, we're going to

be passing the key like product.id.

And then we're going to be also passing

the ID itself, like product.id once

again. And we're going to be passing the

title, so that will be equals to the

product.title. And also let's just pass

our image because we're going to be also

rendering the image. So we can use like

product.thumbnail.

Thumbnail. Come on. n a i l, just like

that. And then the price. And price will

be set to product.price.

Okay, so now let me just save my file,

and that's going to be everything. I

don't know why I'm getting this error,

but we will fix that in a few seconds.

First of all, let me just de-structure

all of that data. So I'll just use like

uh

ID. Come on. Let's just get our ID,

title, and also image, price. We're

going to be getting all of that. But

first of all, let's just create an

interface for there. And that will be a

book card props. And now inside this

interface, we're going to be providing

the ID of string, and also uh not a

comma. And the title will be also a

string. Everything will be a string, so

I'll just write like image will be a

string and also the price will be a

number in this situation. We're using my

React functional component, so React

Come on. React.FC

for the functional component. And I'm

going to just pass my book

uh card. There we go. Book card, c a r

d, and then props. Okay, so I'll just

pass it right here, and it's going to be

equals to this function. It shouldn't be

equal, so I'll just remove there, and

I'm going to just change there to this

data. Okay, so that's all you need. And

now the next thing that we have to do is

that we have to use the So, to use the

first of all, let's just remove this

book card, and I'm going to be providing

a class name or border and padding all

around will be set to four and totally

rounded. Okay, so now inside this div,

we're going to be placing first of all

our link, and then let's that link will

be going into That link will go into the

product and also that specific ID. Okay,

so now inside there, let's just render

our image first of all, and I'm going to

just remove this IMG from here, and let

me just pass my image inside there. I'm

going to also change the the alternative

text to the title itself, and let me

just put a class name of like width will

be set to four and also height will be

set to 32. Object will be also set to

totally cover, and be like margin for

the bottom will be set to two. Okay, so

I'm going to save there. And now

underneath this link, or you know what,

instead of that link, underneath this

image, we're going to be using our H2,

and let's just provide a font of um bold

will be fine or semi-bold will be fine.

I'll just change there to title. And now

underneath there, let's just render our

uh paragraph right here paragraph right

here. So, I'll just write like And I'm

going to save my file, and here you can

see we're now getting all of our data

right here, which is looking amazing.

So, we have the product image, we have

the product title, and also the money

the price. If I change there, it's going

to only give us that first one. And by

the way, now let me just show you all of

that filter. If I want to search for

like this Dior, so I'll just write like

d i o r, and here you can see it's going

to only give me there. And if I just

write like Gucci, it's going to only

give me that specific item right here.

And now if I want to search for the

Apples, so if I click on there, it's

going to only give me Apple product

right here. If I click on the Watches,

so it's going to only give me the

Watches, the Fashion, the Trend. It's

going to give me all of that data based

on this filter which we have already

done. So, yeah, that's looking amazing.

Now, let's just take care of the final

thing, which is called the pagination.

Time to take care of the pagination. So,

first of all, we would have our previous

button, then we would have our next

button, and we would also have our 1 2 3

and so on and so forth button right

here. Okay, so first of all, let's just

take care of the first button. I'm going

to also have to wrap them in some sort

of a container. So, I'll just use like

flex, and also flex will be set to

column, and the for the smaller screen

size, we are going to be using like flex

row, and also justify will be set to

between, and then items will be set to

center, margin for the top will be set

to five. Okay, so now inside there, what

do we have to do?

First of all, let's just take care of

the the previous state. Okay, so for the

previous one, we are going to be

creating first of all the button. That

button will take a few styling like

border, and then the padding for the

x-axis will be set to four, padding for

the y-axis will be set to two, margin

for the x-axis will be set to two, and

totally rounded full. Okay, and yeah,

that's going to be it. And here we are

going to be just passing like previous,

and I'm going to just duplicate there,

and I'm going to also change there to

next one as well. Okay, first of all, we

have to take care of the functionality,

so I'll just use like if somebody click

on the previous button, so you want to

just fire this function, which is the

handle page

change. We did not create this function,

but we are going to be creating there in

a few seconds. So, it's going to take

one pre-meter like current page and then

minus one. So, let's just do there. I'm

going to copy the name of there. I'm

going to go to the top. Let me just

create that function right here like

const handle page change, and it's going

to be equals to that page, and let's

just provide our number inside there.

So, before I do there, first of all, we

have to declare a few variables like

const total products. Like how many

products do we want? We want only 100

products. And then const total Come on.

Total pages. You would have like

math.ceil,

and we are going to be passing the total

products, and then let's just divide

them by items per page. Okay, so it's

going to give us the total pages right

here. So, we have to just check if page

is greater than zero and Come on. Let's

just provide our zero right here. And

uh page is less than or equals to the

total pages. So, what do you want to do

in that situation? We just want to write

like set current page, and we want to

pass our page inside there. Okay, so now

if I save my file, but it will not do

anything because we have to first of all

take care of the next one as well. Okay,

so it will not do anything for now.

Okay, so that's all you need. But I'm

going to also provide a disabled state

for there. And to disable there, first

of all, we have to use the disabled

attribute, and we have to provide the

current page is triple equals to one.

So, if our current page is set to one,

so you want to disable this entire

button. If the current page is greater

than one, so you want to just do

something about there. You want to

change there. So, that's all you need.

I'm going to also cut there from here.

Yeah, you know, I'm not going to cut

there from here. Let's just cut there

and paste it right here. Okay, so that's

going to be the next one. So, now let's

just take care of the next one right

now. And you know, I'm going to also cut

there, and let's just place it right

here for a few seconds. And now let me

just take care of the previous button.

So, what I'm going to do is that I'm

going to be passing my on click method

right here. And for this on click, we're

going to be using that handle page

change one more time. And in this

situation, we are going to be passing

that current page. And what the hell am

I doing?

Let's just close there right here, and

I'm going to also remove that from here.

So, current page in this case will be

set to plus one. In this case, we we are

now decrementing one. In this case,

we're now incrementing there. Okay, so

now that's all you need. And now we also

have to provide our disabled state on

there. So, for the disabled state, we

are going to be checking if the current

page is triple equals to the total page.

That was the only reason I made that as

a global variable so that we can use it

right here. Okay, so if that is set to

total pages, so you want to disable

there. Now, the previous button is

totally done, and also the next button

is done. Now, we have to take care of

these 1 2 3 4 5 and so on buttons right

here. Okay, so how are we going to be

doing there? To do there, first of all,

we have to just use So, I'll just write

like flex, and then flex will be set to

wrap, and then just Come on. Justify

will be set to center. And now inside

there, here we're going to be rendering

our

uh paging Come on. p a g i n a t i o n.

Pagination button. So, how are we going

to be doing there? Let's just first of

all create a function for there. So,

I'll go to the top, and we are going to

be creating a new function for the

pagination button. So, I'll just use

like const get pagination

buttons, and it's going to be now set to

this uh arrow function right here. And

first of all, we have to get the

buttons. So, we are going to be using

like buttons, and it's going to be a

number. So, let's just pass our numbers

of array inside there, and now it's

going to be set to totally empty array.

Okay, so not numbers, but just a

singular number. There we go. So, now

let's just also take care of the start

and the the start page and also the end

page. Okay, so let's just use like the

start page, and it's going to be equals

to math.max, and we are going to be

passing one and also the current page

minus two. So, it's going to give us the

starting page. And now let's just take

care of the end page. And the end page

will be set to math.minimum. And here in

this case, we're going to be passing our

total pages and also current page plus

two. Not minus two, but plus two. And

now let me just provide a bit of uh

conditional statement right here. If our

current page minus two is less than one,

so in that situation, we want to get the

end page, and you want to set that to

like math.minimum, and we have to

provide our total pages, and then add

end page right here in this case. And we

have to also combine this two and then

minus current page, and also let's just

provide our minus one right here. Okay,

in this situation. This is going to give

us the end page. So, I'm going to also

duplicate there, and let's just take

care of the what do we call it? The

starting page. So, if current page plus

two is greater than the total pages, so

in that situation, we are going to be

just changing the start like that into

the start page. And I'm going to just

remove all of that stuff from here. Let

me provide one for the first pre-meter,

and then start page minus two, and then

minus total page, and then minus current

page. So, it's going to give us the

starting page. Okay, so now let's just

iterate over through all of that. So,

let's just use like let page is equals

to start page, and then uh page is less

than or equals to end page, and then

finally, let's just use our page plus

plus. You can use I if you wanted to,

but in my case, uh page would be fine.

So, now let's just use a buttons.push

method, and we have to provide our uh

page inside there. Not a edge, but page.

And finally, we have to just return our

buttons. Okay, so I'm going to save my

file, and this is how we are going to be

creating our get pagination buttons. And

now let's just use there right here

inside

this area. So, let's just use there.

I'm going to execute there, but first of

all, we have to wrap there inside these

curly braces. I'm going to also remove

this comma from here. And now we have to

iterate over through all of their pages,

so we have to use the map method inside

there. And we're going to be only

passing the page inside there. So, I'll

just first of all create a button right

here inside there. And first of all, we

have to pass the key, and the key will

be set to page. And we are going to be

also providing the on click like when

somebody clicks on there, so we want to

just pass our handle page change. And

now in this case, we we don't want to do

nothing with there, but we only want to

pass the page inside there. Okay, and

let's just provide a bit of styling to

this. I'm going to be using like a few

dynamic styling like border first of

all, padding for the x-axis will be

four, and padding for the y-axis will be

set to two, margin for the x-axis will

be set to one, totally rounded and full.

And yeah, in this case, I'm going to be

passing my page is triple equals to the

current page. So, in that situation, you

want to change the background color to

totally black. And we also want to

change the text to totally white. Then

it's not the case, what do you want to

do in that situation? We just want to

set that to the empty string just like

there. And here we have to just pass the

page name, and that's going to do it. So

I'm going to save my file and here you

can see we are now getting all the pages

right here. So if I refresh my page and

here you can see we are getting like 1 2

3. I can click on the previous. I cannot

click on the previous right now because

we are now at the first page. If I click

on the second one, it's going to render

my content right here. I can also click

on the next one and here you can see

it's going to also render all of that

content. I can click on the fourth, I

can click on the previous one and now if

I clear click on the previous one, it's

going to just gives us the previous

items right here. I can go to the next

one and so on and so forth, which is

looking amazing. So yeah, I can provide

a filtering in this situation, but I

forgot to take care of this filter right

here. So now let's just do that. I'm

going to go to the top where I have this

drop down menu right here or button

which you can see right here. So we have

this button and I'm going to be just

pasting my on click handler. Come on,

the on click handler when somebody

clicks on there. So what do you want to

do in this situation? We just want to

set the drop down to not drop down open.

Okay, so if that is currently set to

false, it's going to make it true and if

that is set to true, so it's going to

make it false. Okay, so let's just check

it out. If I click on there, I can go to

the cheap item and I can totally select

the cheap item and I can also select the

expensive one and I can also select the

popular one as well. So yeah, everything

is working the way we expect them to

work and they are looking awful. So I'm

going to take care of that in a few

seconds, but yeah, everything is totally

working. I can click on the Apple it's

going to only give me the Apple product

and watches and so on and so forth. Now

we are totally done with the main

content page, but now let's just take

care of the product page. Like if I

click on this specific product, so we

have to also take care of this product

as well. Okay, so let's just do that.

I'm going to go ahead and create a new

component. I'll give it the name of like

product

page.tsx. Let me just use my RAFCE and

I'm going to go into my app and let's

just register there right here. Okay, so

I'm going to just duplicate this line of

code and then we want to go in come on.

Product and we want to go into a

specific ID of that product. And now let

me just render my product page right

here in this case. I'm going to save my

file and now let me just take care of

that. First of all, there will be a few

things that we have to take care of. So

first of all, let me just go ahead and

grab my ID. Okay, so ID will be coming

from the use param and which is coming

from the react router dom and here we

have to just paste the ID right here. So

ID will be totally a string. It's going

to be set to these parentheses right

here. Okay, so it's going to give us the

ID. Now we also have to get our

navigations. We are going to be using

like use navigate for that, which is

also a function coming from the react

router dom and we will just store that

in the navigate

variable right here. N A V I G A T E,

yeah. And let's just create our state.

So I'll just use like uh product and

also the set product right here and it's

going to be equals to the use state and

it's going to be set to initially null

and now I'm going to annotate that with

the product which we did not create, but

we will create that in a few seconds and

also the null. Okay, so either the

product or the null. So now let's just

create an interface right here. So that

interface will be the product and now

inside this product we are going to be

providing the ID which will be set to

number. I'm going to also provide the

title and title will be set to string

and then we have our description and

descriptions are also a string and the

price will be set to a number and I'm

going to also provide the rating and

rating will be set to a number as well.

And then finally we have our images.

Okay, so images will be set to a string

of these empty array. Okay, so it's

going to take that as the

So we are going to be annotating our use

state by using this product and now

let's just take care of the UI, but

before I do that, I'm going to have to

fetch all of that content right here. So

I'm going to be using use effect in this

case and now inside there, we have to

first of all provide the dependency

array of that ID like if that ID

changes, so you want to just call this

function. And first of all, we have to

check for the ID. If we already have the

ID, then we are going to be using the

axios and then we are going to be using

the get and so on and so forth. So let's

just get our axios and I'm going to be

using the get method on there. I'm going

to also annotate that as the product.

Let's just do that. And I'm going to

also provide the HTTPS and that same

dummy JSON API. So let's just go to the

products and we have to render our ID

dynamically. Okay, so if that's the

case, so it's going to give us that

response back. Okay, just like that and

we have to use our what do we call it?

Set product and we have to pass our

response.data inside there. Okay, I'm

going to save this file and now

underneath this then, we have to also

provide the catch statement as well. So

if you got some sort of an error

so in that situation, we are going to be

just using like console.log. Okay, so

console.error would be fine rather. So

I'm going to just use like error

fetching come on.

Fetching product data. And let's just

render our error right here. Okay, so

I'm going to save that and this is how

we are going to be fetching our products

right here in this component. So yeah,

that's cool and you know, I'm going to

also provide a loader right here. So if

you don't have the products, so in that

case, we just want to return

a H1 of loading dot dot dot would be

fine. And now let me take care of this

UI. So I'm going to go ahead and first

of all, provide my padding all around

will be set to five and width will be

set to

yeah, 60% will be fine. Now inside this

div, we are going to be creating our

button and let's just provide our on

click right here and when somebody

clicks on there, so what do you want to

do? We just want to navigate minus one.

Okay, and also let's just style that.

Okay, so I'm going to provide a few

styling like margin for the bottom will

be set to five, padding for the x-axis

will be set to four, padding for the

y-axis will be set to two and background

will be set to totally blank and text

will be set to totally white and totally

rounded. So for this span label, we will

just say back. I'm going to save my file

and now let's suppose if I click on this

icon, it's going to give me the loader

first of all, but

something is not right.

Okay, we are still getting a loader. Let

me go to the console.

And we got some sort of an error.

So error fetching a product data, axios.

It should be dummy. Why am I keep

forgetting that? Let's just save our

file

and now let me just refresh that.

And here you can see we are now getting

our back button right here, which is

looking amazing. So that was the first

thing that we have to create our back

button. Now let's just create our image.

So I'll just use my image right here and

I'm going to be using like first of all,

my product.images

and we want to get only the first image

out of that. And now for the alternative

text, we are going to be providing

the product.title and then for the class

names, I'll just write like width will

be set to 50% and also height will be

set to auto and margin for the bottom

will be set to five. I'm going to save

that and let's just refresh that. So

it's going to gives us that image right

here. I'm going to go back and choose

another one like maybe I want to choose

yeah, this sofa would be fine. Is there

a sofa or I don't know what the hell

this is.

So yeah, here you can see we are now

getting that image right here and now we

have to provide our H1 and I'm going to

be providing a few classes like text

will be set to 2 XL, margin for bottom

will be set to four and font will be set

to totally bold. Okay, so let's just use

our product.title

and let's just save our file and here

you can see we are now getting the

product title. I'm going to also provide

a paragraph with the classes of margin

for bottom will be set to four and text

will be set to totally gray 700 and also

the width will be set to

you know, the width is a arbitrary

value, so we are going to have to do

that manually. So I'll just use like 70%

and close that. And now inside there, we

are going to be using

product.description.

I'm going to save that and here you can

see it's going to gives us that

description right here.

And now underneath there, we are going

to be using a flex. You can provide more

styling if you wanted to, but in my

case, that's going to be fine.

So let's just provide our price right

here. So we are going to be using

product.price.

And now underneath this paragraph, we

are going to be using like margin for

the left will be set to 10 and let's

just provide our rating right here in

this case and then product.rating.

Okay, so I'm going to save my file and

here you can see we are now getting our

price and also the rating, which is

amazing. So let's suppose if I want to

go to the next page and I'm going to

just choose cat food. It's going to

gives us first of all, the image. It is

taking a bit of time because of my

internet connection. So it is now giving

me the image, the name, the description,

also the price and rating. You can

totally change like anything that you

want. So that's there and that was it

about for the product page. And next we

are going to be taking care of the top

seller and also the blogs. That was it

about for the product page and now let's

create our popular blogs and also the

top sellers. Okay, so I'm going to just

create two component. I'm going to give

it the name of like popular blogs.tsx.

And inside there, let me just create my

component and then we are going to be

also creating

uh for the top sellers.tsx

as well. So let's just write our RAFCE

and now let's just register that in our

app component. So underneath these

routes, we're going to be creating one

more div and inside this div, first of

all, let me just render my top sellers

and then we're going to be also

rendering our popular come on, popular.

So I'm going to save my file and now let

me go into the top sellers and now let's

just create that. So the first thing

that I'm going to do is that I'm going

to just create my authors

uh state. So then set authors

and that's going to be equals to the use

state and here we're going to be only

passing array. Okay, so now let me just

annotate that by using the author which

we are going to be creating in a few

seconds and now let's just provide that.

Okay, so now let's just create that

interface right here. So I'll just write

interface and then author and name will

be a string. We are going to be also

providing is following and that's going

to be a boolean and also

and also we have to provide the image

and image will be a totally string.

Okay, so that's totally done. Now we

have to fetch our data. So we are going

to be using the use effect and now

inside there, for the dependency array,

I'm not to provide anything. And now

inside there, first of all, let's just

create our function. So, I'll just give

it the name of like fetch data. It's

going to be an asynchronous function

because we are now fetching some sort of

a data inside there. So, now let's just

use our try and catch block. For the

catch block, I'm going to be using

console.error. And I'll just say like uh

error

fetching authors. And let's render our

error as well. And for the try block,

first of all, we are going to be getting

the response by using the await and

fetch method. And here we're going to be

passing our https and then the random

user.me.

And then API and uh question mark

results equals to five because we only

want to get five users. Okay, if you

want to get more, you can totally

provide there like let's suppose if you

want to get 10 users, you can just write

10 right here. But in my case, five will

be fine. Okay, so I'll just write like

data. Now, let me convert my response to

JSON. Okay. And now we store the inside

the data. So, the next thing that we

have to do is that we have to iterate

over through their data. So, I'll just

write like authors data. And here I'm

going to be passing my author right

here. And that was an array. Now it's

going to be equals to data.results.map.

And now here we are going to be also

providing our parameter, which will be a

user. And for now, we are going to be

only passing any right here cuz we don't

know what kind of data we are now

getting right now. Okay. And now inside

there, we are going to be providing

first of all, the name. And here let's

just provide our user.name.first.

And then we are going to be also

providing uh user.name.last.

Okay, so it's going to give us the

username. And now for is following, come

on. Uh is following will be set to false

initially. And the user image will be

user.pictures.

picture.medium.

And here we have to provide our commas.

And that error is now successfully gone.

Change our set authors and provide our

own authors data to there. So, that's

everything that we have to do for this

fetch data. And let me just call that

right here. fetch data. And now I'm

going to execute there. Let's provide

our JSX. So, first of all, I'm going to

just change the background color to

totally white. I'm going to also provide

the padding for all around will be set

to five. Margin for the X axis will be

set to five. Margin for the top will be

five as well. And uh I'm going to also

provide a border. And width will be only

23 rem and totally rounded. Now inside

there, we are going to be creating our

H2 with the classes of text

text excel and also the font will be set

to bold. Margin for the bottom will be

set to five. And let's just provide our

top sellers inside this. I'm going to

save my file. And this is how it looks

like right here. Next, we have to

provide our UL. And inside this UL, we

are going to be iterating over through

all of the authors. And then inside

there, we are going to be providing the

author and also the index of the author.

And then inside there, I'm going to

first of all, write my LI. And for the

key, I'll just provide my index right

here. You can use the UUID and you can

use all of that stuff. But for now, I'm

going to only provide this index right

here. And for the class names, I'm going

to provide like flex and items items

will be now set to center. Justify will

be set to between. And the margin for

the bottom will be only set to four.

Inside there, we are going to be

creating our section and section will be

a flex. Justify will be set to center.

And also items will be set to center.

Let's just render our image. And I'm

going to just remove there and replace

there with the author.image. And for the

alternative text, we are going to be

providing like author. name as well. And

now let's just provide our classes like

width will be set to 25%. And also the

height will be set to 25%.

Let's just provide our justify center

and totally rounded off wall. So, if I

save my file, and this is how it looks

like right here. So, underneath there,

we are going to be creating our span

with the classes of margin for the left

will be set to four. And let's just

provide our author.name. If I save my

file, and now they are looking amazing.

Okay, so they are looking super amazing

right now. Underneath this section, we

are going to be creating our button. And

that button will have a few things like

uh you know what? Yeah, I'm going to

just provide first of all, my

uh author. So, author.isFollowing.

And if it is following, so we are going

to be using like unfollow. And if that's

not the case, we are going to be only

providing like follow. If I save my

file, and here you can see we are now

getting the follow button. If I click on

there, nothing will happen. And I'm

going to provide that logic in a few

seconds. But first of all, we have to

style there. So, I'll just use like uh

class names. And we are going to be

rendering dynamic content. So, for that,

we are going to be using like padding

for the Y axis of one, padding for the X

axis of three, totally rounded. And here

let's just render our dynamic content

like is author. Uh come on. Uh

author.isFollowing.

If that's the case, so what do we have

to do? We just want to change like the

background color to totally black. Uh I

mean like red. And also the text will be

set to totally white. If that's not the

case, we are going to be changing the

background color to totally black and

the text color to totally white. So, if

I save my file, and let me just check

this out. And here you can see we only

have like these black color. And let's

just provide that functionality right

here. On click, when somebody clicks on

there, so what do we have to do? We have

to just fire this function, which is

handle follow

uh click. And we also have to provide

our index inside there. Okay, so I'm

going to copy there. And now let's just

create there. I'm going to go to the

top. And underneath this user effect, we

are going to be creating this function

right here. And it will take the index.

And index will be a number.

And now inside there, we are going to be

setting our authors. And here we have to

provide our previous author. And let's

just use our previous author. dark.map.

And here we are going to be providing

the author and also the index. Okay, so

let's just wrap there like is a author

and also the index. And now outside from

there, we are going to be checking like

index index triple equals to the index

itself. If that's the case, we just want

to use like all of the author. And then

we want to provide like is following.

And we want come on. Uh if what it will

l o o w i n g. You want to set the is

following to not author.isFollowing.

Okay. And outside from there, we are

going to be only providing our author.

Okay, so now let me just save my file.

And now if I click on there, and here

you can see we are now getting like

unfollow. And also the color is totally

changed. You can follow everyone. And

you can unfollow there if you wanted to.

So, that was the top seller component.

Next, we have to go into the popular

blogs component. And here I'm going to

pass an array. And inside this array, we

have an object. And inside that object,

we have a title. And the title can be

anything. And then the author can be

also anything. And likes can be

anything. And comments can be like

basically anything you want. Okay, so

this is our blogs array. Inside this

array, we have a few objects right here,

which I just duplicated. So, this is my

blogs uh array right here. And now let's

just iterate over through there. But

first of all, let me just remove there.

And I'm going to style there. First of

all, let me just provide the background

color of totally white. Padding for all

around will be set to five. Width will

be set to 23 rem. And I'm going to also

provide margin for the top of four and

totally provide a border. Margin for the

left will be five and rounded. Inside

there, we are going to be providing our

H2. Text will be set to totally excel.

And also the font will be set to bold.

Margin for the bottom will be set to

five. And let's just provide our popular

blogs inside this. If I save my file,

and here you can see we are now getting

our card. Underneath there, we are going

to be providing our UL. And inside this

UL, we are going to be iterating over

through all of our blogs. And let's just

use our blog and also provide our index

as well. Okay, so now inside there, we

are going to be using our UL. I mean

like our LI. And here we have to provide

our key. And the key will be index. And

also let's just provide our class name

of margin for the bottom will be set to

four. And inside this UL, we are going

to be also providing first of all, the

div with the class of flex. And justify

will be set to between. And items will

be set to center. Okay. And inside

there, we are going to be also providing

our span with the class of font bold.

Margin for the bottom will be set to

two. And let's just render our blog

title. So, let's just use our blog.

title. I'm going to save this file.

And here you can see we are now getting

all of the blogs titles right here.

Underneath this span and div, we are

going to be creating yet another span.

And I'm going to provide the classes of

like text totally gray of 600. published

uh by and then the blog.author.

And here are the author. Underneath this

span, we are going to be creating yet

another div with the class of flex and

items

items will be set to center. Margin for

the top will be set to two. And here we

are going to be rendering first of all,

the icon like message circle, which is

now going to be coming from the lucid

icon. And I'm going to also provide the

size to this. So, the size will be now

set to 16. Or just 16 would be fine. So,

I'm going to save there. And this is how

we are going to be getting our icon. Let

me provide my span with the class of

text totally gray 500. Margin for the

right will be set to five. Margin for

the left will be set to only one. And

inside this span, I'm going to provide

like blog.likes.

Come on, likes like there. And I'm going

to close there. So, outside from this

span and also their div, or you know

what? Outside from just this span, we

are going to be rendering one more like

thumbs up. And then let's just provide

our size to this. So, size will be set

to 16.

And now underneath there, we are going

to be using a span with the class of

text totally gray of 500. And also

margin for the right will be set to two.

Margin for the left will be set to two

as well. So, let's just provide our blog

comments. And that's going to be it. So,

if I save my file, and here you can see

we are now getting like all of the likes

and all of the comments as well. So,

yeah, that's everything that we have to

do for now. But we have to change a few

things inside there. So, we have to

change the sizes of these. And let's

just do that. There are a few changes

that I made. So, the first thing that

you have to do is that you have to go

into the app.tsx. And instead of

providing a justify between, you have to

change that to a justify center. And

then you have to go into the main

component and just provide the margin

for the right of 10 rem. And then you

have to go to the sidebar. And you have

to provide margin for the top of three

and also uh you have to provide these

stuff right here like we already

provided some of them but here you have

to provide like with a full and this is

how your UI will look like. So now let

me just test it for the final time. I'm

going to provide like something maybe

I'm going to just search for like red

nail. Come on.

nail so it's going to give me that first

one and then if I search for like

minimum price so I'll just write like 10

or you know 19 would be fine or 20 would

be fine.

Okay and then 200 so it's going to give

me all of their products. Now let me

just click on the reset. You can click

on the beauty so it's going to only

gives us the beauty item. Let me click

on the reset one more time. I'm going to

click on the Apple so it's going to only

give me the apples

product and then if I click on the watch

so it's going to give me the watches and

so on and so forth. Now you can also

select the cheap one. I can select the

expensive one and also the popular one

and we can also work with the pagination

so if I go to the next page and so on

and so forth. So it's going to give me

all of that items right here. Okay? And

we can also follow someone and unfollow

someone and this is how our entire UI

will look like. So thank you so much for

watching and if you like these kind of

projects so feel free to comment down

below and I'm going to do my best to

make an amazing project like these in

the future as well. So I'm going to see

you in the next video. Thank you so much

for watching and bye-bye.