All right, and we already know the drill, so I'll open up localhost three thousand just so we can
have the big screen as well, and then we're navigating back to our project.
We would want to stop the server.
Of course, that's number one and navigate back to the road.
And then I'll clear my terminal.
And I'm just going to say that I would want to navigate to the setup folder now of this particular set
of folder in here is going to be a bit different than the previous ones just because I already prepared
somewhat a lot of stuff for you.
Now, the reason why I did that is because I exclusively wanted to focus on the use of a user, how
to data, how to set up functionality and all of that stuff.
And I didn't see the point of creating everything from scratch because then, of course, we would spend
way more time on the project.
And I didn't want this project to be three hours long.
Well, that's why when you spin up the set up, you'll notice that a lot of UI is already prepared for
you.
Now, don't worry, of course, we will work on the functionality.
But as far as the look, yes, I prepared a lot of stuff already for you.
So the first video we're going to spend going over the setup, just so we all are on the same page.
And then of course, we'll start working with users user not not on the functionality work so you can
click on all the buttons and nothing is going to happen.
And if we take a look at the project, we'll start with Contact Jass.
So I'll close the terminal and we should be already familiar with the context since we have created
quite a few times.
So we have the app provider that of course returns the app context and then that provider.
And then of course I have the value prop where I'm returning the card.
Now, at the moment, card is a state value using use state.
So essentially it is an array and I'm just passing in hard coded items from the file called data.
And if you take a look at the data, it is just going to be an array of items.
And yes, don't worry, eventually when we set up user user, we will fetch this data from the API.
But for the time being it is just an array of items where we have the array, we have the title price
as well as the image and then the amount.
So what is the amount of items in the car?
OK, good.
Then of course in the context, eventually we set up the huge global context or however you want to
call your custom hook.
So my guess of course, is use global context.
Then I return to use context and pass in the app context, and then I export the app context as well
as app provider.
And of course, in the index jass, you'll notice that we import a provider and then I wrap my whole
up my app component in the app provider, and then we can take a look at the app Jazz, where of course
we have two components.
We have the number as well as card container and we import that use global context.
So eventually there will be a loading as well.
So that's why I have commented out, because eventually we will grab the loading value from the context.
And then if we're loading, essentially if we're fetching better, then of course we'll display loading.
And then once we've got there, then of course we return our app, which is going to be the main element
with our two component number and card container.
So let me refresh so we can see our current application in a smaller browser window.
And then if we take a look at the number, essentially we're going to have some kind of return, which
is going to be now and then a little bit of stalling on everything else.
And then in here, you'll notice that for the icon in this case, I'm using the SPG.
So this is just the showcase that, of course, you don't need to always use the react icons if you
don't want to.
If, for example, you prefer using an SPG, you can definitely do that.
So can I just out of the second.
So now of course it is displayed on screen.
All right.
And then in here, eventually this will be dynamic where at the moment it is hard coded volume.
So we have the paragraph with some kind of amount.
I just hard coded to be three dimensional.
Of course, this will be dynamic.
So as we're changing the amount of items in the cart or removing the cart or we're clearing the cart,
of course this will also change.
That's why we write or import use global context.
So we'll hook it up to the global context and then that way it will always be.
Sync with our data that we have the card container where we import the car currently, so we're grabbing
the EU's global context and then I say, yeah, I would want to get the cart because remember, in the
context, we're sharing the cart.
And then if the cart length is zero, then which is display that, you know what, your cart is currently
empty, which we will see later when we set up the actual functionality and then if the court has some
length.
So essentially, if there are some items in the court, of course, we have the section with a cart
and then we have some kind of title and then we have the define where we iterate over the items and
then we display the cart item.
So I'll show you the cart item in a second.
But just to complete this particular component, we also have the footer where we have the total, which
again is just hardcoded for now.
Eventually it will be in sync with our context.
And then, of course, we have the clear button at the moment, just logs clearcut and you can probably
already guess that, yes, eventually there will be functionality where we can clear out the cart.
And the last component that I want to show is the cart item when essentially we iterate over our cart.
All right.
And then for every item, we return the cart item and then, of course, we need to have a key.
And then I spread out the properties that I have in the item.
Again, if you want to double check those properties, you can find them in data and it has title price
image on them up again, something we have done already quite a few times.
So I just thought that I can save you some time on setting up the boilerplate sern here.
I'm grabbing those values.
I would like to get the image.
I would like to get the title price animal.
I also would want to get the idea because we will use that idea for our functionality.
And then I'm returning the article inside the article to have the image.
I have some kind of title.
I have the price.
Of course, there it is.
And then we have removed button, which at the moment just console logs, remove again functionalities
coming up.
And then of course we have the amount button here and then we have again the SPG.
So instead of setting up the icons, I just went with inline SPG again.
Then we have the actual amount, which of course eventually will change the moment.
It is just one and then we have the button as well.
That should conclude the overview of our setup.
And of course we can start setting up use a reduced functionality.