1
00:00:00,390 --> 00:00:06,210
All right, and welcome to our e-commerce project, where we'll build a online store for a furniture

2
00:00:06,210 --> 00:00:12,510
company called Company Sluff, since the project is quite big and I want to be respectful of your time

3
00:00:12,810 --> 00:00:14,080
when it comes to project interest.

4
00:00:14,340 --> 00:00:19,050
I won't spend too much time on it and instead encourage you to see it for yourself.

5
00:00:19,470 --> 00:00:25,410
The fastest way to get there is probably by visiting Riak project site with all our projects and then

6
00:00:25,410 --> 00:00:27,180
just look for Eastaugh project.

7
00:00:27,420 --> 00:00:30,990
So remember the site where we had all our projects react?

8
00:00:30,990 --> 00:00:39,570
Hyphen project dot net that up, just go there and we've got the basic project, we have the ones and

9
00:00:39,570 --> 00:00:47,310
also large scale project and just click on e-commerce and of course you'll be directed to the comfy

10
00:00:47,310 --> 00:00:48,440
slot site.

11
00:00:48,810 --> 00:00:56,040
And here we have the home page where we have the number, of course, some hero featured products as

12
00:00:56,040 --> 00:00:57,420
well as the services.

13
00:00:57,630 --> 00:01:02,880
And all the way in the bottom we have the form where we can sign up and of course, the footer.

14
00:01:03,670 --> 00:01:06,470
And if we take a look, we have about as well.

15
00:01:06,780 --> 00:01:08,210
And of course, the products.

16
00:01:08,520 --> 00:01:15,600
So in the product will display all the products that are coming from the API and we have some nice filtering

17
00:01:15,600 --> 00:01:16,920
system as well.

18
00:01:17,190 --> 00:01:20,070
So here we can filter by the name.

19
00:01:20,340 --> 00:01:23,380
And as you can see, there's no products that start with S..

20
00:01:23,730 --> 00:01:26,130
And also I can check different categories.

21
00:01:26,130 --> 00:01:30,270
So bedroom, for example, and I can look for different companies as well.

22
00:01:30,570 --> 00:01:33,480
And I believe the living room had more products.

23
00:01:33,480 --> 00:01:39,270
So that's why in here I'm looking for the category of living room and a company of this one, the Marko's.

24
00:01:39,540 --> 00:01:43,600
Then we can also filter by colors, price and free shipping.

25
00:01:44,010 --> 00:01:48,840
Now, as far as the filtering, we're filtering all the products and we're combining the filters.

26
00:01:49,230 --> 00:01:52,220
That's why very fast we're running out of the products.

27
00:01:52,500 --> 00:01:59,520
So if we, for example, look for the product and no products match and of course we just get sorry,

28
00:01:59,520 --> 00:02:03,660
no products match your search, then of course we can clear the filters.

29
00:02:03,900 --> 00:02:06,150
We have two options how we can display the product.

30
00:02:06,390 --> 00:02:10,620
Now we have the column layout and also we have the rollout.

31
00:02:11,620 --> 00:02:17,830
When we display how many products we have sold has it changes also is the value and of course we have

32
00:02:17,830 --> 00:02:19,060
the sorting as well.

33
00:02:19,330 --> 00:02:23,620
So, for example, by default, we are soaring by lowest price.

34
00:02:23,620 --> 00:02:24,910
So lowest prices first.

35
00:02:25,180 --> 00:02:32,890
But we can also sort by highest, then buy the name A to Z or Z to say again, like I said, just come

36
00:02:32,890 --> 00:02:34,780
here and try it for yourself.

37
00:02:35,110 --> 00:02:38,940
And once I like the product, I can just visit the site.

38
00:02:38,950 --> 00:02:46,480
In this case, I click on details and of course I'm in the single product site so I can pick how many

39
00:02:46,480 --> 00:02:47,440
items I would want.

40
00:02:47,440 --> 00:02:52,180
And the reason why you cannot get bigger amount, because this is going to be the amount of products

41
00:02:52,180 --> 00:02:53,370
we have in stock.

42
00:02:53,860 --> 00:02:57,550
So each product is going to have a limit how many items we can get.

43
00:02:57,730 --> 00:03:01,510
And that's why, for example, for this one, I can get only five.

44
00:03:01,780 --> 00:03:05,800
And by the way, of course, we can check different colors, not as this one was black one.

45
00:03:06,130 --> 00:03:10,810
But if I go to, for example, this product notice now we have two colors.

46
00:03:10,960 --> 00:03:13,540
So some products will have two colors, some will have four.

47
00:03:13,800 --> 00:03:17,430
And along those lines, in this case, I'm going to go with green one again.

48
00:03:17,440 --> 00:03:19,840
Notice how we can change the amount.

49
00:03:20,110 --> 00:03:25,960
Then I add to the card and this is going to be my card, where, again, we have the icon here for the

50
00:03:25,960 --> 00:03:31,000
card so we can also navigate to the card site clicking on this icon.

51
00:03:31,000 --> 00:03:34,330
And we clearly can see that we have eight items in the card.

52
00:03:34,600 --> 00:03:40,560
And as we change this quantity notice list, values changing and so are the totals over here.

53
00:03:40,840 --> 00:03:44,910
So let me zoom out, I guess, just so we can see a bit better.

54
00:03:45,730 --> 00:03:47,800
So say we have six items here.

55
00:03:47,800 --> 00:03:54,190
And as I'm changing, my totals are changing and so are the amount of items in the card.

56
00:03:54,350 --> 00:03:58,950
Of course, we can delete the item or we can go back to the shopping.

57
00:03:58,990 --> 00:04:04,570
So this is going to lead to the product or we can just clear the card all together again, test it for

58
00:04:04,570 --> 00:04:11,710
yourself, and also will implement authentication where NORRISH, since we haven't logged in, we're

59
00:04:11,710 --> 00:04:13,360
not able to go to the checkout.

60
00:04:13,840 --> 00:04:17,160
So eventually there's also going to be a page for the checkout.

61
00:04:17,570 --> 00:04:24,640
So once you click on a login or you are directed to log in and you have few options, you have sided

62
00:04:24,640 --> 00:04:27,460
with Google Sign with Twitter or email.

63
00:04:27,460 --> 00:04:31,030
And of course, we'll build it ourselves using off a zero.

64
00:04:31,330 --> 00:04:35,230
So in this case, I'm going to go with Google and I don't want to login.

65
00:04:35,230 --> 00:04:38,380
Notice now the link displays log out.

66
00:04:38,600 --> 00:04:40,270
So that means that I have logged in.

67
00:04:40,480 --> 00:04:44,360
And the moment we log in, of course, now we show the check out page.

68
00:04:44,590 --> 00:04:50,050
So either we can navigate directly or when we click on a card.

69
00:04:50,330 --> 00:04:52,150
Now, of course, we have proceed to check.

70
00:04:52,630 --> 00:04:55,300
So again, we'll check whether the user has logged in.

71
00:04:55,720 --> 00:04:59,980
If he or she has logged in, then of course, we can go to the checkout page.

72
00:05:00,190 --> 00:05:02,320
And of course, we have an option of walking out.

73
00:05:02,500 --> 00:05:05,470
And the moment I log out, notice I cannot see the checkout.

74
00:05:05,620 --> 00:05:10,810
And in the car again, it directs me to a login screen.