All right.
So now we're going to make it so that on our product pages we can have our product name in the page
title and you can custom basically add custom titles for any page.
So we're going to do this with a package called React Helmet async.
So I'm going to stop the server and this goes in the front end.
So make sure that you CD into front end and then NPM install, react dash helmet dash async.
And this has a provider, so we have to wrap it around our app.
So let's run the server again.
And then can close this stuff up.
Let's go into our index.js on the front end and we're going to import the React helmet provider.
Okay.
So it's going to be.
React.
Think it's.
I think that let me just check this real quick.
Oh, it's just helmet provider.
So helmet.
Provider.
And that's from React Helmet async.
And then we're going to go actually what's going on here?
Missing script Dev.
Oh, I got a CD into.
Yeah.
There we go.
All right, so now, NPM run, Dev.
All right, so now down here where we have the rest of our providers, our redux provider, PayPal script
provider, we're going to add helmet provider around all of those.
So right here, let's say helmet provider, and then we'll end it here.
So now what we can do to use this.
Well, actually, what I want to do is create a custom component called meta that we can use.
So in components, let's create a component called meta dot JS.
And if you want to create subfolders because we do have quite a few components here, you might want
to create like a UI folder for like header loader, etcetera.
But I mean I'm just going to keep them all in here.
So let's create this component.
A FC.
And we're going to bring in helmet.
So we'll import.
Helmet.
And this is going to take in a few props.
So we're going to Destructure and we're going to have a title description and keywords.
So basically you'll be able to customize this for every page.
Now, since we are this is a it's a single page app.
We're running React on the client side.
So this isn't really going to have much weight with search engines.
It's really just for, you know, for aesthetic reasons for the page title and stuff.
So what I want to return here is helmet as the wrapper wrapper element here.
So let's say.
Helmet.
And then in here we can have, for instance, our title, which is going to be whatever the prop is,
the title and the prop, the description.
We'll put in a meta tag and then the keyword.
And we can have some defaults.
So let's go under the function and we can say meta default props.
Our title will be Welcome to Pro Shop Description.
I mean, you can put whatever here.
That stuff is fine for me, so let's save that.
And now wherever you want to use this, you can just bring in wherever you want to customize this stuff.
You can just bring this component in.
So for instance, let's go to our, um, let's go to our home screen.
And then we'll bring in the meta.
Component.
So import meta and then we'll just put it.
Where we have our H1 right here.
I'll just put it right above it.
So just meta.
So if I do that, we should have still just have welcome to pro shop, but if I wanted to customize
it.
I could say title and I'll just say hello.
And now if I come back here, you can see now the title is Hello.
So I don't really care about the home page.
I'll just use the default.
So we don't even really need to use the meta component here.
Where I really care about it is the product.
Product screen because I want to use the name of the product for the title.
So I'm going to bring meta into the product screen.
And then we're going to go.
Let's see.
We're going to come down here to we'll just go right, right in here, right in the fragment.
And I just want to add the product name for the title.
So now if I come over and I go to a specific product like this, AirPods, you'll see that.
Now the page title has the product name.
Okay.
And I mean, you could put the description, you could pass in description and keywords as well if you
want, although yeah, I mean you could put the product description as the page description.
It's really up to you.
I just wanted to give you that option.
Okay, cool.
So let's just take a look down here because it looks like we have a couple of things that haven't been
used.
So just on the home screen, we'll get rid of Meta.
Unless you want to use it there, that's fine, but I'm going to get rid of it.
And then also loading up load on the product edit screen.
We never used that.
So product edit.
And let's see loading upload which is.
This right here.
So that's when we upload the image.
I mean, you don't have to use that, but I'll just go ahead and.
Let's put it where the image is, the image upload.
Yeah, right here.
So I'll just.
We'll say load if loading up load, then show the spinner the loader.
And that should take care of all of our warnings.
Okay, cool.
So that's pretty much it as far as our application goes.
So we can obviously go through the process and add products to our cart and check out.
Through shipping pay with PayPal.
Place the order creates the order.
And then as an admin you can see all the orders.
As a user, you can go to your profile and you can see your orders, you can update your data, your
info, you can look at the products and create new products as an admin upload images.
So I mean we, we did a lot.
There's a lot of functionality in this little project, especially for our course project and I might
add more to it and add more videos later on.
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
section.