1
00:00:00,290 --> 00:00:00,710
All right, guys.

2
00:00:00,710 --> 00:00:06,050
So I'm going to give you a quick demo of the project and the whole checkout process and so on.

3
00:00:06,050 --> 00:00:10,940
Just so you have an idea of what we're building in your head, because we are going to take it step

4
00:00:10,940 --> 00:00:11,750
by step.

5
00:00:11,750 --> 00:00:17,390
And for instance, we'll start off with just a Json file with some products in it, and then we'll start

6
00:00:17,390 --> 00:00:19,910
to work on our interface and show those products.

7
00:00:19,910 --> 00:00:25,160
Then we'll move to the back end and we'll create some routes and we'll move to the database, start

8
00:00:25,160 --> 00:00:30,740
creating our models for our data and so on, our controller methods.

9
00:00:30,740 --> 00:00:34,400
And we're going to take it really slow so that you understand everything.

10
00:00:34,400 --> 00:00:39,380
But just to give you an overview, you can see on the home page, we do have this big carousel with

11
00:00:39,380 --> 00:00:44,810
the three top rated products, and that's one of the very last things that we're going to do in this

12
00:00:44,810 --> 00:00:45,500
course.

13
00:00:45,500 --> 00:00:51,260
Down here we have our latest products and there is pagination, although it only shows if we have I

14
00:00:51,260 --> 00:00:53,240
think I have it set to eight or more.

15
00:00:53,570 --> 00:00:58,460
But for now, you can't see it because we only have, what, six products here?

16
00:00:58,460 --> 00:01:01,230
So let's click on one of these products.

17
00:01:01,230 --> 00:01:03,990
It takes us to the to the single page.

18
00:01:03,990 --> 00:01:10,260
You can see it has the ID and the URL and it just has some basic info, the description, the price,

19
00:01:10,260 --> 00:01:16,440
the rating down here, any ratings and reviews will show if you're logged in, you'll see a form here

20
00:01:16,440 --> 00:01:22,740
where you can submit a rating and a single user can only submit one review per product.

21
00:01:22,740 --> 00:01:25,410
So I'll go ahead and just add this to my cart.

22
00:01:25,410 --> 00:01:29,850
And you can see up here, it'll show us how much how many items we have in our cart.

23
00:01:29,880 --> 00:01:32,220
It also takes us to the cart page.

24
00:01:32,220 --> 00:01:34,710
So I'll go ahead and just add something else.

25
00:01:34,710 --> 00:01:37,320
So PlayStation, we'll go ahead and add that.

26
00:01:37,320 --> 00:01:39,680
And now you can see we have two items in the cart.

27
00:01:39,690 --> 00:01:44,580
I can change the quantity that will update the price and the number of items.

28
00:01:44,610 --> 00:01:49,440
Now, when I'm ready to check out, if I click proceed to checkout, I now have to log in, either log

29
00:01:49,440 --> 00:01:51,930
in or register for a new account.

30
00:01:51,930 --> 00:01:55,050
So I'm going to log in with an account that I already have.

31
00:01:58,100 --> 00:02:03,740
And since see up here how we have redirect as a query parameter and we have it set to shipping.

32
00:02:03,740 --> 00:02:08,120
So if I sign in, it should take us right to the shipping page.

33
00:02:08,120 --> 00:02:14,240
Now I already have my my address in local storage, so it's picking that up and putting it in.

34
00:02:14,240 --> 00:02:18,170
But when you first come to the the page, it's not going to be filled in.

35
00:02:18,170 --> 00:02:19,400
So I'll click continue.

36
00:02:19,430 --> 00:02:21,170
We need to select a payment method.

37
00:02:21,170 --> 00:02:25,820
Now we're integrating PayPal, but you can also pay with a credit or debit card.

38
00:02:25,820 --> 00:02:27,350
So we'll click continue.

39
00:02:27,380 --> 00:02:33,440
It shows us a summary of our order, the pricing, the tax shipping costs, which there is none here.

40
00:02:33,440 --> 00:02:40,010
And then we'll click place order that creates an order in the database and shows us the basically all

41
00:02:40,010 --> 00:02:41,600
the data that's in that order.

42
00:02:41,600 --> 00:02:43,610
And you can see that this is not paid.

43
00:02:43,610 --> 00:02:45,650
So we see our payment buttons.

44
00:02:45,650 --> 00:02:52,310
So I'm going to click on PayPal and notice that it takes us to the sandbox because in my PayPal developer

45
00:02:52,310 --> 00:02:56,840
panel I have it set to sandbox and I have some just dummy accounts here.

46
00:02:56,840 --> 00:03:00,630
So that's how we can test it without spending actual money.

47
00:03:00,630 --> 00:03:03,780
So I'm going to use this account to log in.

48
00:03:03,780 --> 00:03:05,670
So if I say view edit account.

49
00:03:06,340 --> 00:03:09,970
I'm going to copy that email and we'll come back here.

50
00:03:09,970 --> 00:03:12,040
Just click continue if it does that.

51
00:03:12,710 --> 00:03:16,850
Paste that in, then we're going to put in the password, which is this.

52
00:03:17,620 --> 00:03:19,530
Again, this is just a sandbox account.

53
00:03:19,540 --> 00:03:22,480
We're not dealing with any money, any actual money.

54
00:03:23,300 --> 00:03:23,600
Okay.

55
00:03:23,600 --> 00:03:24,880
So it should give me.

56
00:03:24,890 --> 00:03:25,120
Yep.

57
00:03:25,220 --> 00:03:25,730
Pay with.

58
00:03:25,730 --> 00:03:27,680
I'll click complete purchase.

59
00:03:29,210 --> 00:03:33,050
And now we get orders paid and you can see down here paid on.

60
00:03:33,050 --> 00:03:39,990
And then the date it says not delivered because the admin goes in and checks off when it's delivered.

61
00:03:40,010 --> 00:03:45,860
So now I made that order and if I go to my profile, I'll see I actually have a bunch of orders here,

62
00:03:45,860 --> 00:03:47,930
but you'll see your orders on your profile.

63
00:03:47,930 --> 00:03:50,180
You can also update your user data.

64
00:03:50,210 --> 00:03:54,410
If I click on details, it'll take me back to that order page.

65
00:03:54,410 --> 00:03:56,480
I can see if it's been delivered or not.

66
00:03:57,420 --> 00:03:57,840
All right.

67
00:03:57,840 --> 00:04:04,890
So now what I'm going to do is log out from the regular user and I'm going to log in as my admin user,

68
00:04:04,890 --> 00:04:09,810
which I believe I changed to my actual email address.

69
00:04:12,490 --> 00:04:14,170
And let's sign in.

70
00:04:15,320 --> 00:04:21,769
Okay, so now since I'm an admin, you can see over here I have this dropdown, this admin dropdown,

71
00:04:21,769 --> 00:04:28,250
and I can see all my products, which I'll get to in a second, but I can also see all my orders or

72
00:04:28,250 --> 00:04:31,250
all the orders on the site and who made that order.

73
00:04:31,250 --> 00:04:36,530
So if we look at the last one that was made here and I go to details, it's not delivered, but I can

74
00:04:36,530 --> 00:04:43,580
mark it as delivered and now it gets marked in the database, meaning that the product was was purchased,

75
00:04:43,580 --> 00:04:48,770
it got delivered and everything is all set now as far as products go.

76
00:04:48,770 --> 00:04:51,860
So here you can see all the products listed.

77
00:04:51,860 --> 00:04:56,870
If I click the edit button, we can edit the fields so we have the image.

78
00:04:57,380 --> 00:05:01,880
If I want to delete, obviously I can delete and if I want to create a project product.

79
00:05:01,880 --> 00:05:08,240
The way this works is it asks me if I'm sure I click okay and it creates just a dummy product or just

80
00:05:08,240 --> 00:05:12,860
some dummy data and then we can edit that and make it what we want.

81
00:05:12,860 --> 00:05:15,380
So I'll just say product.

82
00:05:15,380 --> 00:05:15,920
I don't know.

83
00:05:15,920 --> 00:05:22,970
I'll just say Brad's product and set the price to whatever, and then we can upload an image.

84
00:05:22,970 --> 00:05:27,740
Although I don't if I don't upload an image, it'll use this sample jpeg.

85
00:05:27,740 --> 00:05:33,320
But if I go ahead and upload, I'm going to use this headphone image.

86
00:05:33,800 --> 00:05:33,970
Okay.

87
00:05:34,040 --> 00:05:38,150
So you can see that the image actually just got uploaded and it's getting stored on the server.

88
00:05:38,150 --> 00:05:44,660
We're not using any like Cloudinary or Amazon S3 or anything like that, although you could because

89
00:05:44,660 --> 00:05:48,680
we're using the Multer package which does let you use other services.

90
00:05:48,680 --> 00:05:52,550
But I wanted to try to kind of kind of keep that as simple as possible.

91
00:05:52,550 --> 00:05:59,180
So the brand, the count in stock, let's say we have ten of these category description.

92
00:05:59,180 --> 00:06:00,920
And then I'm just going to update.

93
00:06:01,580 --> 00:06:04,100
And now you can see we have Brad's product.

94
00:06:04,100 --> 00:06:08,090
And if I go to the front facing page here, there we go.

95
00:06:08,090 --> 00:06:11,090
So we have the picture of the headphones, Brad's product.

96
00:06:11,990 --> 00:06:17,690
And since I'm logged in, you can see that we have the review here so I can rate these.

97
00:06:18,830 --> 00:06:25,970
Can say awesome product submit and that gets added to the reviews.

98
00:06:25,970 --> 00:06:30,160
And we're using React, Toast, Defy for these little toast message messages.

99
00:06:30,170 --> 00:06:33,440
Oh, also, I can't I can't rate this more than once.

100
00:06:33,440 --> 00:06:37,160
If I try to do that, you'll see product already reviewed.

101
00:06:37,160 --> 00:06:40,040
So I can't just spam a bunch of reviews.

102
00:06:40,250 --> 00:06:43,190
So yeah, I mean that's, that's pretty much it.

103
00:06:43,190 --> 00:06:50,150
So I think it's a pretty full featured e-commerce application, especially for a course project.

104
00:06:50,150 --> 00:06:51,710
So I think you guys will like it.

105
00:06:51,710 --> 00:06:56,390
So in the next video we're just going to start to get set up, just go over the things that you need,

106
00:06:56,390 --> 00:07:01,130
like a text editor, NodeJS, just the basic tools and then we'll get into it.