All right, and welcome to our e-commerce project, where we'll build a online store for a furniture
company called Company Sluff, since the project is quite big and I want to be respectful of your time
when it comes to project interest.
I won't spend too much time on it and instead encourage you to see it for yourself.
The fastest way to get there is probably by visiting Riak project site with all our projects and then
just look for Eastaugh project.
So remember the site where we had all our projects react?
Hyphen project dot net that up, just go there and we've got the basic project, we have the ones and
also large scale project and just click on e-commerce and of course you'll be directed to the comfy
slot site.
And here we have the home page where we have the number, of course, some hero featured products as
well as the services.
And all the way in the bottom we have the form where we can sign up and of course, the footer.
And if we take a look, we have about as well.
And of course, the products.
So in the product will display all the products that are coming from the API and we have some nice filtering
system as well.
So here we can filter by the name.
And as you can see, there's no products that start with S..
And also I can check different categories.
So bedroom, for example, and I can look for different companies as well.
And I believe the living room had more products.
So that's why in here I'm looking for the category of living room and a company of this one, the Marko's.
Then we can also filter by colors, price and free shipping.
Now, as far as the filtering, we're filtering all the products and we're combining the filters.
That's why very fast we're running out of the products.
So if we, for example, look for the product and no products match and of course we just get sorry,
no products match your search, then of course we can clear the filters.
We have two options how we can display the product.
Now we have the column layout and also we have the rollout.
When we display how many products we have sold has it changes also is the value and of course we have
the sorting as well.
So, for example, by default, we are soaring by lowest price.
So lowest prices first.
But we can also sort by highest, then buy the name A to Z or Z to say again, like I said, just come
here and try it for yourself.
And once I like the product, I can just visit the site.
In this case, I click on details and of course I'm in the single product site so I can pick how many
items I would want.
And the reason why you cannot get bigger amount, because this is going to be the amount of products
we have in stock.
So each product is going to have a limit how many items we can get.
And that's why, for example, for this one, I can get only five.
And by the way, of course, we can check different colors, not as this one was black one.
But if I go to, for example, this product notice now we have two colors.
So some products will have two colors, some will have four.
And along those lines, in this case, I'm going to go with green one again.
Notice how we can change the amount.
Then I add to the card and this is going to be my card, where, again, we have the icon here for the
card so we can also navigate to the card site clicking on this icon.
And we clearly can see that we have eight items in the card.
And as we change this quantity notice list, values changing and so are the totals over here.
So let me zoom out, I guess, just so we can see a bit better.
So say we have six items here.
And as I'm changing, my totals are changing and so are the amount of items in the card.
Of course, we can delete the item or we can go back to the shopping.
So this is going to lead to the product or we can just clear the card all together again, test it for
yourself, and also will implement authentication where NORRISH, since we haven't logged in, we're
not able to go to the checkout.
So eventually there's also going to be a page for the checkout.
So once you click on a login or you are directed to log in and you have few options, you have sided
with Google Sign with Twitter or email.
And of course, we'll build it ourselves using off a zero.
So in this case, I'm going to go with Google and I don't want to login.
Notice now the link displays log out.
So that means that I have logged in.
And the moment we log in, of course, now we show the check out page.
So either we can navigate directly or when we click on a card.
Now, of course, we have proceed to check.
So again, we'll check whether the user has logged in.
If he or she has logged in, then of course, we can go to the checkout page.
And of course, we have an option of walking out.
And the moment I log out, notice I cannot see the checkout.
And in the car again, it directs me to a login screen.