1
00:00:00,230 --> 00:00:00,560
All right.

2
00:00:00,560 --> 00:00:06,290
So now we're going to make it so that on our product pages we can have our product name in the page

3
00:00:06,290 --> 00:00:10,310
title and you can custom basically add custom titles for any page.

4
00:00:10,310 --> 00:00:14,480
So we're going to do this with a package called React Helmet async.

5
00:00:14,480 --> 00:00:18,710
So I'm going to stop the server and this goes in the front end.

6
00:00:18,710 --> 00:00:27,740
So make sure that you CD into front end and then NPM install, react dash helmet dash async.

7
00:00:30,560 --> 00:00:34,490
And this has a provider, so we have to wrap it around our app.

8
00:00:34,490 --> 00:00:36,350
So let's run the server again.

9
00:00:36,910 --> 00:00:39,490
And then can close this stuff up.

10
00:00:39,490 --> 00:00:46,810
Let's go into our index.js on the front end and we're going to import the React helmet provider.

11
00:00:48,910 --> 00:00:49,390
Okay.

12
00:00:49,390 --> 00:00:50,680
So it's going to be.

13
00:00:51,430 --> 00:00:52,540
React.

14
00:00:53,450 --> 00:00:54,350
Think it's.

15
00:00:56,330 --> 00:00:58,640
I think that let me just check this real quick.

16
00:00:58,640 --> 00:01:00,560
Oh, it's just helmet provider.

17
00:01:00,860 --> 00:01:02,990
So helmet.

18
00:01:04,920 --> 00:01:06,060
Provider.

19
00:01:06,650 --> 00:01:09,560
And that's from React Helmet async.

20
00:01:09,920 --> 00:01:13,760
And then we're going to go actually what's going on here?

21
00:01:17,660 --> 00:01:18,850
Missing script Dev.

22
00:01:18,860 --> 00:01:20,630
Oh, I got a CD into.

23
00:01:21,470 --> 00:01:21,860
Yeah.

24
00:01:21,860 --> 00:01:22,350
There we go.

25
00:01:22,370 --> 00:01:24,260
All right, so now, NPM run, Dev.

26
00:01:24,500 --> 00:01:30,710
All right, so now down here where we have the rest of our providers, our redux provider, PayPal script

27
00:01:30,710 --> 00:01:35,360
provider, we're going to add helmet provider around all of those.

28
00:01:35,360 --> 00:01:40,610
So right here, let's say helmet provider, and then we'll end it here.

29
00:01:42,390 --> 00:01:45,240
So now what we can do to use this.

30
00:01:47,040 --> 00:01:51,690
Well, actually, what I want to do is create a custom component called meta that we can use.

31
00:01:51,690 --> 00:01:56,610
So in components, let's create a component called meta dot JS.

32
00:01:56,980 --> 00:02:01,650
And if you want to create subfolders because we do have quite a few components here, you might want

33
00:02:01,650 --> 00:02:05,760
to create like a UI folder for like header loader, etcetera.

34
00:02:05,760 --> 00:02:08,590
But I mean I'm just going to keep them all in here.

35
00:02:08,610 --> 00:02:10,830
So let's create this component.

36
00:02:11,100 --> 00:02:12,480
A FC.

37
00:02:13,800 --> 00:02:16,890
And we're going to bring in helmet.

38
00:02:17,130 --> 00:02:18,960
So we'll import.

39
00:02:20,430 --> 00:02:21,510
Helmet.

40
00:02:22,600 --> 00:02:25,360
And this is going to take in a few props.

41
00:02:25,360 --> 00:02:32,740
So we're going to Destructure and we're going to have a title description and keywords.

42
00:02:32,740 --> 00:02:36,360
So basically you'll be able to customize this for every page.

43
00:02:36,370 --> 00:02:40,180
Now, since we are this is a it's a single page app.

44
00:02:40,180 --> 00:02:42,640
We're running React on the client side.

45
00:02:42,640 --> 00:02:46,060
So this isn't really going to have much weight with search engines.

46
00:02:46,060 --> 00:02:52,330
It's really just for, you know, for aesthetic reasons for the page title and stuff.

47
00:02:52,950 --> 00:02:59,550
So what I want to return here is helmet as the wrapper wrapper element here.

48
00:02:59,550 --> 00:03:00,210
So let's say.

49
00:03:00,240 --> 00:03:00,960
Helmet.

50
00:03:01,710 --> 00:03:07,190
And then in here we can have, for instance, our title, which is going to be whatever the prop is,

51
00:03:07,200 --> 00:03:08,940
the title and the prop, the description.

52
00:03:08,940 --> 00:03:11,550
We'll put in a meta tag and then the keyword.

53
00:03:12,380 --> 00:03:14,480
And we can have some defaults.

54
00:03:14,480 --> 00:03:19,460
So let's go under the function and we can say meta default props.

55
00:03:19,490 --> 00:03:23,930
Our title will be Welcome to Pro Shop Description.

56
00:03:23,930 --> 00:03:25,700
I mean, you can put whatever here.

57
00:03:25,970 --> 00:03:28,910
That stuff is fine for me, so let's save that.

58
00:03:28,910 --> 00:03:35,930
And now wherever you want to use this, you can just bring in wherever you want to customize this stuff.

59
00:03:35,930 --> 00:03:38,030
You can just bring this component in.

60
00:03:38,030 --> 00:03:43,850
So for instance, let's go to our, um, let's go to our home screen.

61
00:03:45,160 --> 00:03:47,740
And then we'll bring in the meta.

62
00:03:48,580 --> 00:03:49,480
Component.

63
00:03:49,480 --> 00:03:53,140
So import meta and then we'll just put it.

64
00:03:54,150 --> 00:03:55,950
Where we have our H1 right here.

65
00:03:55,950 --> 00:03:57,540
I'll just put it right above it.

66
00:03:57,720 --> 00:03:59,280
So just meta.

67
00:03:59,310 --> 00:04:05,460
So if I do that, we should have still just have welcome to pro shop, but if I wanted to customize

68
00:04:05,460 --> 00:04:05,970
it.

69
00:04:07,310 --> 00:04:10,430
I could say title and I'll just say hello.

70
00:04:11,850 --> 00:04:15,390
And now if I come back here, you can see now the title is Hello.

71
00:04:16,709 --> 00:04:19,260
So I don't really care about the home page.

72
00:04:19,260 --> 00:04:20,490
I'll just use the default.

73
00:04:20,490 --> 00:04:24,500
So we don't even really need to use the meta component here.

74
00:04:24,510 --> 00:04:28,380
Where I really care about it is the product.

75
00:04:28,890 --> 00:04:33,690
Product screen because I want to use the name of the product for the title.

76
00:04:33,690 --> 00:04:37,530
So I'm going to bring meta into the product screen.

77
00:04:39,530 --> 00:04:41,510
And then we're going to go.

78
00:04:44,170 --> 00:04:44,770
Let's see.

79
00:04:44,770 --> 00:04:50,680
We're going to come down here to we'll just go right, right in here, right in the fragment.

80
00:04:50,680 --> 00:04:53,800
And I just want to add the product name for the title.

81
00:04:53,800 --> 00:04:59,590
So now if I come over and I go to a specific product like this, AirPods, you'll see that.

82
00:04:59,590 --> 00:05:02,440
Now the page title has the product name.

83
00:05:04,320 --> 00:05:04,740
Okay.

84
00:05:04,740 --> 00:05:10,050
And I mean, you could put the description, you could pass in description and keywords as well if you

85
00:05:10,050 --> 00:05:15,960
want, although yeah, I mean you could put the product description as the page description.

86
00:05:15,960 --> 00:05:16,770
It's really up to you.

87
00:05:16,770 --> 00:05:18,720
I just wanted to give you that option.

88
00:05:20,020 --> 00:05:20,740
Okay, cool.

89
00:05:20,740 --> 00:05:26,830
So let's just take a look down here because it looks like we have a couple of things that haven't been

90
00:05:26,830 --> 00:05:27,790
used.

91
00:05:28,880 --> 00:05:34,790
So just on the home screen, we'll get rid of Meta.

92
00:05:35,600 --> 00:05:39,050
Unless you want to use it there, that's fine, but I'm going to get rid of it.

93
00:05:40,390 --> 00:05:44,230
And then also loading up load on the product edit screen.

94
00:05:44,230 --> 00:05:45,610
We never used that.

95
00:05:45,610 --> 00:05:47,770
So product edit.

96
00:05:48,710 --> 00:05:52,940
And let's see loading upload which is.

97
00:05:53,690 --> 00:05:55,070
This right here.

98
00:05:55,070 --> 00:05:56,990
So that's when we upload the image.

99
00:05:57,530 --> 00:06:00,980
I mean, you don't have to use that, but I'll just go ahead and.

100
00:06:03,150 --> 00:06:06,570
Let's put it where the image is, the image upload.

101
00:06:06,600 --> 00:06:07,500
Yeah, right here.

102
00:06:07,500 --> 00:06:08,430
So I'll just.

103
00:06:09,290 --> 00:06:14,930
We'll say load if loading up load, then show the spinner the loader.

104
00:06:14,930 --> 00:06:17,720
And that should take care of all of our warnings.

105
00:06:19,450 --> 00:06:20,230
Okay, cool.

106
00:06:20,230 --> 00:06:25,320
So that's pretty much it as far as our application goes.

107
00:06:25,330 --> 00:06:33,160
So we can obviously go through the process and add products to our cart and check out.

108
00:06:33,840 --> 00:06:36,420
Through shipping pay with PayPal.

109
00:06:36,450 --> 00:06:39,000
Place the order creates the order.

110
00:06:39,000 --> 00:06:41,850
And then as an admin you can see all the orders.

111
00:06:41,850 --> 00:06:47,730
As a user, you can go to your profile and you can see your orders, you can update your data, your

112
00:06:47,730 --> 00:06:53,760
info, you can look at the products and create new products as an admin upload images.

113
00:06:53,760 --> 00:06:56,850
So I mean we, we did a lot.

114
00:06:56,880 --> 00:07:02,940
There's a lot of functionality in this little project, especially for our course project and I might

115
00:07:02,940 --> 00:07:06,180
add more to it and add more videos later on.

116
00:07:06,180 --> 00:07:12,780
I'm not sure, but for now we're going to move on and we're going to deploy this to render in the next

117
00:07:12,780 --> 00:07:13,500
section.