React continues to be a popular front-end JavaScript library. And you can improve your skills by building a dictionary project.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to create a dictionary app with React and Material UI.

You will learn to create a dictionary that has support of over 12 languages. The app also allows users to switch between light and dark theme.

Roadside Coder developed this course. He has created many popular courses on his YouTube channel.

Here are the topics covered in this course:

  • Project Overview
  • Initialize New React App
  • Google Dictionary API
  • Material UI Intro
  • Install Material UI
  • Building The App
  • Deploying to Netlify
  • What is PWA?
  • Converting Dictionary into a PWA
  • Testing the Final PWA

Watch the full course below or on the freeCodeCamp.org YouTube channel (2-hour watch).

Transcript

(autogenerated)

Improve Your react skills by learning to build a dictionary app.

In this course from roadside coder, the dictionary uses material UI and supports 12 languages.

Hey, everyone, welcome back to Free Code Camp.

And today we are going to build an awesome dictionary app using react js and material UI.

So this video has two sections.

In the first one, we are going to build and deploy this app on netlify.

And in the second section, we will convert it into a pw a or progressive web app, so that you can install this app as a native Android or iOS app into your phone.

So let's explore this app first.

So this dictionary has support of over 12 languages.

Let's search a word real quick.

Let's search plain.

Now you can see it provides the definition, example and the synonym for that particular word.

And not only one definition, it provides all the definition of that particular word.

And what's even better is this pronounciation audio, you can play this plane, it tells you the pronunciation of that particular word.

So yeah, that's awesome.

And I guess just pronunciation is supported in English only.

So let's go to Hindi language.

And I'm going to search my name, which is bu ish.

And here you go, you have the meaning of this particular name.

So this is an amazing app.

Now what's better in this app is you see in this little corner over here, Tara, light mode and dark mode, he has that amazing feature of this app, you can implement it by using material UI as well as swamp.

That's why I've chosen material UI because it's so easy to implement this dark mode and light mode feature in material UI.

Also, if you're interested in more tutorials on react js, be sure to check out my channel, which is called roadside coder.

Recently, I've uploaded a full fledged myrn stack project tutorial with Redux on my channel, link will be in the description below.

So without any further ado, let's get started.

So what we're going to do is we're going to open a new project real quick, let me select my folder.

I'm gonna go over here and select this particular folder.

I mean, let me close these files real quick.

Yeah, so we need to go to our terminal and type and PX create react app.

And we're gonna name this, we're gonna name this app word, hunt, oops, I made a mistake.

Let me correct this NPM to NP x and press Enter.

Now what it's going to do, it's going to go to the NPM repository, it's going to take all of the files needed to create our create react app, I'm going to bring them over into this word hunt folder.

So Meanwhile, this is initializing.

Let me just show you the API that we're going to use for this app.

So the API that we're going to use is called Google dictionary API.

This is an official Google dictionary API created by this guy, me developer.

Thank you so much, the developer for this API.

So this API provides us these support of these many languages.

And how are we going to use this API, we're gonna provide a language code to this API and a particular word.

So it's gonna go and fetch data in this form.

So we're going to, we're going to see how we can deal with this data later.

So you can see we have a language support, or here with over these many languages, English and the Spanish, French excetera.

Love Languages over here.

This is an amazing API.

So yeah, also, let's explore material UI real quick.

So what is material why material UI is a react components for faster and easier web development.

It's a react component library.

Now what is a react component library.

So react component library is something which provides you with a prebuilt, no prebuilt component in this particular library, which you can use in your own project.

Let me show you by clicking get started over here.

I'm going to close this project, which was already open.

So yeah, we can install this by using NPM, install material, UI slash core.

So we're gonna install this as well.

Let me see if our app has installed.

No, it's still getting installed.

Let's just wait for that.

So it also provides us material UI icons.

So this, let's just leave this for later.

I'm going to show you how you can use this library.

Now.

Let's go to the components and let's go to button.

Alright, you can see we have different different types of buttons over here.

So you these are pre built buttons in the material UI library, you can just straight up import them by just typing one line.

When you type this line, this button will be important.

If you change the color to primary, this button will be imported.

So yeah, this is an amazing library.

And you might be thinking there might be other libraries as well.

Yes, there are.

There's one library called react bootstrap.

I use this library all the time.

But I decided to use this material UI library because it's really easy to work on light and dark feature as well.

And you'll also get to explore something new in react.

So yeah, bootstrap is really, you know, mainstream type of library, but material wise making it plays in the market.

So we are materializing a really good library.

So what are we going to use from this material library, we're going to use something called text field as a text, limiter via text field over there.

So actually, we're going to use this component right here.

So what it's gonna do, it's gonna provide us a pre built input component, where we can search our particular word, we're gonna use that, and we're gonna use this select where to go, yeah, here, here it is, we're gonna use this select component as well.

Alright, so let's check if our app has initialized successfully or not.

Yes, it has initialized successfully, let me just switch to this by typing cd, word hunt.

Or what you can do is go to File, Open Folder, and just go to your particular folder, in my case, this folder and select this folder.

And here it is, it has opened that particular folder in a separate window.

So let's go to this.

And we're going to first of all installed material UI.

So yeah, let's go over here, where was that particular line? Let's go to installation and copy this line over here, copy and paste it over here.

So it's gonna take a little bit of time to install material UI, because material wire is a huge library.

So it just takes a little bit of time.

So once it's installed, I'll be back one, eternity later.

All right, finally, our material UI library has installed successfully.

So what we're going to do now with our react app is that we're going to get rid of the useless files that we don't need right now.

So let's delete these files, these four files over here.

We're not we don't need these files at all.

But first of all, let me just run this app for the first time, and I'm going to show you how this looks when it runs for the first time.

So here it is, this is our react app successfully started.

So what I'm going to do, I'm going to just dock it right over here.

And I'm going to delete these files, as I mentioned earlier, so let's just delete these four files.

And let's go to and you can see, this app is now going to complain because it it was using those files somewhere.

So let's just check.

So logo was being used over here, we don't need it, we're just gonna get rid of all of this information inside of this file over here.

We're gonna go to index j s, we're gonna remove this.

We're gonna remove this.

And that's pretty much it.

Let's go to our app.

J s and run Hello, world.

Hello, world.

Yep.

There you go.

Hello, world, but it boots in the center.

Because I think we haven't removed these tiles yet.

Let's remove all of these tiles in the app j s, we're not going to touch the index CSS or index j s right now.

Because we don't need right now or anywhere, any time because we don't need to do anything with them.

So yeah, the HelloWorld has been successfully printed over here.

Alright, so what? What are we going to do first? So let's just import our API in our app real quick.

Let's go to our API website.

Was that dictionary? API? Let me just check.

Yep, there it is.

Revolutionary API, we're going to need this particular link.

But how are we going to fetch this link, we're going to use a package called axios.

So we're going to need to install that package.

So I'm going to open another terminal over here.

And we're going to go NPM I axios.

And here we go.

axios has been successfully installed.

So what are we going to do now we're gonna create a function.

Let's call this function dictionary API.

Just a second.

Yeah, we're gonna call this function dictionary API.

We're going to create an arrow function over here.

And also, since we are fetching the API, we need to make this function async.

We need to make this an asynchronous functions.

And we're going to type try catch over here to catch if any error ever occurs in our app.

So I'm going to just log this error right here.

And inside of the try, block, what we're going to do, first of all, let me close this terminal over here.

So yeah, we're back in line In terminal, so what are we going to do in this try block, we're going to fetch that API.

So const, let's type data equals await.

So we need this await keyword inside of this async function, otherwise, it's going to give us error.

So axios dot get.

So let's copy the link from the website.

This is the link.

Let's copy this link over here.

Alright, you see, you can see there's some language code let's just provide is by default, an English word, sorry, English keyword, whatever.

So and word for word, I'm just gonna give it let's just give it plain.

Alright, so also, we're going to need to call this function somewhere.

So we are going to call this function, we're going to use something called use effect.

Use effect.

So what is use effect all about? Let me clear it up.

Use it use effect is, when you keep these brackets empty over here, use effect is called whenever your component is first time rendered.

But if you keep anything inside of these brackets, or those are called dependencies, then what is going to do it's going to be called every time those variables are going to change.

You're going to know along the way, so I'm going to call this dictionary API inside of this use effect.

Let's see what happens.

useeffect is not defined, obviously, because we haven't imported you is a fact.

Yes.

I'm going to import.

Use effect.

Whoops, what just happened? Use effect from react.

Yep.

It's not gonna give me any of that.

No, yep.

Data is a sign of value, but never use.

Obviously, we have called this data variable, but we haven't used it.

Let's just log this.

Let's see what we get in this API.

I'm going to log this over here and go to our browser and go to our app.

And you can see our app is empty currently.

Let's just print dictionary.

Yeah, that's all.

Yep, dictionary, the word there.

So let's check the console real quick.

What do we get inside our console? So we get we're getting this data we're getting called fake data headers, etc, which is going to need this data array over here.

So inside of these, each of this array, there is a different meaning for this word called plain.

So let's go to inside.

Let's go inside of one item.

And inside of one item, we can see there are two sections.

First is meaning, and the other one is phonetics.

So for inside of phonetics, we're getting this link.

Yep, that's the pronounciation for this particular word.

So we're going to use that later.

First of all, we need to use this meanings item inside of this array item.

So let's go to the meaning item, we can see another array objects.

So in each inside of each of these objects, we have a definition.

We have example.

And we have synonyms for that particular word.

So this is how this API is going to work.

So let's use it.

So first of all, what do we need, we're going to go inside of this and take this data for that for using that data and storing it somewhere else, we're going to create something called a state in react, we're going to type use state, whoops, use est, enter, you can see it has given us this code.

And we're going to name this meanings.

And since it's going to be an array, so we're going to give this an empty array to begin with.

This part right here contains the initial state of this particular state.

And this is going to be the function which we're going to use to change the state.

And this is going to be an actual variable.

Let me show you now it's going to complain because we haven't imported the US state yet.

So let's just import use state from react.

Alright, so we're gonna import all of this data inside of that set meanings.

So let's just enter and set with one second, set meanings.

And inside of set meanings.

We're going to type data.

Whoops, data dot data.

Yep.

And let's just log this meanings.

I'm gonna go down here and log this meanings.

Yeah.

Let's check our browser.

Let's refresh this page for once.

And you can see we are getting the only the data part of that API table so We need these meanings.

Anyway.

So let's just see what are we going to do next.

So first of all, what we need to do is we need to create another state.

For our word that's gonna be empty by default.

Let's start by creating the header section of our app.

First of all, we're going to go to material UI, again, what I'm going to introduce you to something called container in material UI.

So this container helps a lot in making your app responsive.

Whenever the screen size of your app changes, it's going to adapt to that particular size.

Let me show you all real quick.

So inside of this app Dev, what I'm going to go and write is contain this container tag, and you can see VS code has automatically imported this container.

If you go and press CTR space, it's going to show you the suggestions and you can click on the particular session to automatically import that.

And I'm going to give this container a max width of medium MD, you can go through all of this max with medium small inside of this documentation of material UI, you can see they've given you a small size and accept, accept accept Trump.

Now we'll see what happens to our app, let's just type dictionary.

Let's see what happens.

Alright, let me close this terminal.

And you can see your dictionary has been aligned to the center of the very center.

And you can see when I'm resizing this window, you can see it's adapting to that particular, the container is helping our screen to adapt to the screen size.

So this is how container helps us out.

Let me give this a few styles as well.

I'm going to provide it some inline styles with the height of 100, viewport.

And the background color.

Background Color where it is yeah, it's over here.

I'm gonna give it hash 282 c three, four.

Let's see how that looks.

Yep, that's looking good.

But our dictionary has been hidden.

So I'm going to give it a color as well.

So color, it's going to be white.

Yep, that's pretty much it.

Looks pretty.

Alright, so we're gonna give a few styles to our container as well.

So as you all might be aware of Flexbox what Flexbox is all about in CSS, we're gonna we're gonna give it a style of display, flex so that all of the items are aligned from top to bottom, we're going to give it flex direction, column.

Here we go.

And we're going to give it a height of 100 we edge and the justify content.

Okay, I'm not going to give it right now I'm going to show you all later why that's useful to us.

So first of all, let me just work on this header part over here where our heading, and our search and select box is going to lie.

Alright, so what I'm going to do is I'm going to go to SRC, and create a new folder called components.

And inside of this component, I'm going to create a new file or a new folder called header.

Now in zardoz header folder, when you create a new file called header dot j s, and another file for CSS as well header dot CSS.

So let's go to header dot j s, I'm going to show you a shortcut, r A, F, C E, if you go and type this and press enter, it's going to give you a boilerplate code for a basic react function.

So let's create this header component real quick.

First of all, I'm just going to go and type header.

Or I'm going to use let's say a title over here.

I'm going to give it a span tag.

Give it a class name of title.

I'm going to All right.

Word, hunt.

Yep, that looks good.

Let's give this a class name as well.

Off header.

Yep, that looks good.

Let's just import this inside of our app, your app.js.

Let me get rid of this dictionary over here.

And I'm going to type header.

Now you can see it's giving us auto import suggestions.

So we're gonna click on that.

And you can see header has been automatically imported over here.

So we're gonna make a self closing tag.

And let's see if it has rendered or not.

Here we go.

word count has been rendered.

Sandra style this word 100.

Real quick.

I'm going to go to header header dot CSS.

But first of all, we need to import this CSS file inside of this header.

How are we going to do that? We need to type import dot slash dot means current directory slash header dot CSS.

Whoops.

Yeah, that looks good.

Now we're gonna have to provide this title, some styling, that just provide this title, a little bit of styling.

Let's just say font size of seven viewport width.

viewport width is the width of the screen that you're currently on on your phone or your on your computer.

It's that particular width.

I'm going to type text trans form to uppercase.

So that it's capital, and I'm going to give it font family.

First of all, let's just not give it font family.

Now let's just check this.

Okay, it's looking good, but it's looking kind of ugly.

So we want this to be a little bit of pretty.

So what I'm going to do is I'm going to go to Google, Google.

Sorry, Google, I'm gonna type Monserrat font, if I'm not wrong with the spelling, yeah, Montserrat.

So we need this Montserrat font over here.

I'm going to go over here.

10 100.

Select this style, and go to import.

And I'm going to take this font over here.

I'm going to copy this.

And I'm going to go back to our text editor and I'm going to go to index dot CSS.

Just add right at the top.

I'm going to paste this font style.

Now let's see what happens.

If we type font family.

We're gonna need to correct spelling m o n d, e s e r r a t.

Yep.

Correct.

And sans serif? Let's go and check.

Look, it doesn't work.

Why though? Hopefully, I've haven't put the wrong spelling over here.

Maybe I did? Yes, I did.

Okay, now let's see.

Yeah, it looks really good.

So one piece of advice for you all, if you're gonna make the world a little bit bigger, the heading a little bit bigger, just reduce its font weight.

So it's gonna look pretty.

These are some of the design, you know, tips for a while.

So yeah, it looks good.

So what do we need, other than this heading inside of our header, we're going to need the text component, as you all know.

So I'm going to create another div over here.

Alright, I'm going to give class name of this div as inputs.

Yep.

Also, I think we need to style our header as well a little bit.

I'm going to bring in the styles for our header.

So what I'm going to do over here, what am I doing over here, so I'm providing is a display of flex align items to the center and justify content of space evenly.

So what is going to do let me show you all slid have swapped created this Dev, let me just say anything Hello.

If you go back over here, you can see it's aligning from top to bottom.

This is happening because of this flex direction column, we have set the display to flex flex direction column, and we're setting display justify content space evenly.

So it's going to have even space between them.

And is going to have the height of 35 viewport height.

If I increase this to let's say, 50 viewport height, see you can see the height has been increased.

So we want is 35 viewport height you can see there's a space between these components.

So and it is going to be 100%.

So these are all the styles.

I'm not going to go too in depth in the CSS because it's a react project, not the CSS project.

So yeah, bear with me.

Alright, so inside of inputs, what do we need now? We're going to need a text field.

So let's go to our browser real quick, too much.

Do you really why? Let's go to the text field text field.

Whoops, here we go.

We're gonna need this standard text field.

So I'm going to copy this up and copy this right here and go to our text editor.

I'm going to paste this over here.

And you can see it's going to give us error because the text field we have an important text field yet, so we're gonna I'm gonna go over here, CTR l space, it's gonna show me suggestion, I'm gonna click over here, and you can see text field has been imported.

So yeah, VS code helps a lot while coding.

Okay, it's dark, right now you can see because the background is also dark, and the component is also dark.

So it's not working out.

So what do we need to do over here? We're going to import a dark theme over here.

Where do we find this dark theme? And we're going to go to material UI, we're going to search dark mode.

Here we go.

And I'm just gonna copy this up.

This one or another one? Let me check.

No, not this one.

We're gonna copy.

Yeah, I think I'm gonna copy that one.

Yeah, we're gonna make a little bit of changes to this one.

So here's the dark theme, it's gonna complain, because we haven't imported create em UI theme.

Let's click import that one as well.

So type is dark.

So I'm gonna just what I'm going to do, I'm going to copy the name, and go inside of this, and import something called theme provider.

So theme provider allows us to, you know, apply themes to the material UI components.

We're going to go over here, theme.

So I've auto imported this by typing CTL space, you can see it has been auto imported.

I'm gonna go over here, type theme equals dark theme.

Now let's check our component real quick.

Has it improved? Yes, it has.

But still, you can see when I click over here, it goes a little bit of dark blue.

So we don't want that.

So what are we going to do over here? inside of the palette, we're going to provide it a primary color.

Primary of main, it's going to be how hash, F F F.

Also, comma is needed over here.

I think this should work.

Here we go.

When we click on it, it's gonna go active with a white color.

So yeah, we've imported our dark theme over here.

What do we need other than this? We're going to need a select component.

Let's find our select component.

Let me go back to the text field.

Yep.

Let me scroll down to here.

This is what we need.

All right.

Okay.

Whoops.

Yeah, I'm going to click over here.

You can see it's provided us a ton of code over here.

So what do we need? We need the first one, right? Yeah, we need the first one.

I'm going to go and copy this one, this text field over here, from here to here.

Let's copy it up.

Paste it over here.

It's gonna complain because it's missing a lot of things.

First of all, this text field is all yeah, that's important.

We don't need this menu item, I'm going to go CTL space and press enter.

So my new item is important.

But you can see these currency and handle change.

These are all their data, they are not presenting the file, you can see currency handle change currencies.

So what are we going to need this select for? First of all, we're going to need this select for our countries.

Let me just remove this.

Remove this.

This map function as well.

Yeah, we're going to use desc later.

Yeah, inside of the menu item, I'm going to type, let's say English.

I'm going to remove these key and values as well.

Let's see if it works or not.

It does.

Yep, you can see, but it has only one component.

So what do we need to do, we need to import all of these languages.

So what I have done for you have already created a file.

Over here, let me just go to text editor and create another folder with the name of data.

And I'm gonna go and create a new file called category.

Category dot j s.

Yep, category dot j s inside of this category.

I'm going to Go and provide this particular data.

So if you want this particular data, what do you need to do, I'm going to provide link in the description to my GitHub repo, you're gonna go to my GitHub repo, you're gonna go to this particular GitHub repo, you're gonna go to SRC, to the data to the category.js, you're going to copy this file, I'm going to copy this inside of your code, so we're just going to do is it providing the value, and the label is just in the documentation of that API, you can create it yourself, or you can copy it from my GitHub.

So we have created this category.js.

Let's save it.

And inside of our header.js, I'm going to import this up.

Right here import category from, I'm going to go one step backwards.

Another step backwards, and inside of the data, you're going to need category, here we go.

So we need this category variable right here.

So we're gonna, we're gonna map through this, inside of this menu item.

So what I'm going to do now, this, and category roadmap, we're gonna go and look through this, I'm gonna provide this menu item inside of it.

And let's give this name, variable name.

give it the name of option.

And inside of this, we're gonna go and type option, dot value, because we want the value to be inside of our select box.

Let's see if it works or not.

Yes, it does.

But we need to provide it a key and value as well.

So let's go over here.

inside of this key, I'm going to type option dot value.

Sorry, option dot label.

and the value will be option dot label.

Let's save this real quick.

And let's check it out.

Still the same? What do we need to do now? We need to provide a value to over here as well.

So we had earlier created a state for this, I guess we haven't created a state.

So let's just create a state called category.

So I'm sorry, whoops, what am I doing? US state? category? Yep, that looks fine.

And I'm going to provide a default value of English.

Yep.

We need to bring both of these things to that header component.

How are we going to do that? We're going to go over here to the header component.

To this, we're going to send this as a prop, the category and the set category as well.

Yeah.

So we're going to go inside of our header, and we're going to receive these both variables over here.

But doing destructuring by typing curly braces, enter, and Diggory.

Yeah, both of these are over here.

Let me just rename this to categories.

Get a go race.

So we don't get confused between this and this.

So categories, yep, that's fine.

All right.

So what the value is going to be value is going to be category.

And on change where it's going to do it on chain, it's going to set that particular category on that thing.

So on change, we're gonna have an event set category, e dot target, dot value.

Let's save this and check this out.

Hopefully should display language first.

Yes, it's displaying English over here.

Alright, let's make this thing work.

Its display displaying standard currently, we're gonna also have to name that one as well.

So we're just not going to need this ID over here.

In place of label we're gonna type search word.

And we're going to give it a class name of search.

Oops, doing this in the wrong place.

It's supposed to be over here.

Both of these things are supposed to be over here.

There was the select one.

So instead of the select one, what we're going to do, we're going to label it language.

And we don't need this helper text right here.

Let's remove that.

Okay.

Alright, so inside of this one, we need to bring our word state that we created.

Let me show you what.

Where is it? Yep, word and set word.

I'm going to take both of these and send it to header.

So word equals word.

And set word equals set word.

There's not going to be any commas over here.

So yeah, we have sent this, let's just receive them over here.

Word and set word.

Yes, I'm going to give this a value of word.

And on change, what's going to happen on change? It's gonna change that set word.

So he set word, e dot target, dot value, let's see this thing in action.

What I'm going to do over here, is I'm going to check if, is there anything in Word? I'm going to type like this in curly braces? Is there anything in Word question mark? If there's anything in Word, we're gonna render word.

Otherwise, what we're gonna do, we're gonna render, word hunt.

It's going to update it in real time.

There, check it out.

Let's type over here.

Look, you can see, it's working absolutely fine.

Whenever we changing it.

It's calling this on change function, to change this state, and providing this particular value to this particular box.

And changing this, if there's nothing inside of it, it's not going to change if there's anything.

Yep, it's working fine.

All right, I see a problem.

What here? Why is this compressed? So little, because it doesn't have a way over here.

And neither does this thing over? Here have a bit.

So let's see what I'm going to do.

I'm going to give it a class name of search, I'm gonna give this a class name.

Let's give it a class name of select.

Yeah, that's fine.

Now I'm going to go to header dot CSS, first of all, I need to provide inputs A little bit of styling.

Also, we need to make sure of one thing over here, I'm going to make these two responsive as well.

Because when you go over here, when you make this smaller, you can see what hunt becomes little too much tiny.

So we want this to look a little bit of better than that.

So we're gonna make it responsive.

So we're gonna make it responsive by using media queries.

So add media, whoops, media, we are type max width.

If the max width is lesser than 900 pixels, what's going to happen? It's going to do is dot header is going to make header justify content space evenly.

And height is gonna be 25 years, we're going to decrease a height a little bit.

Second thing, what we're going to do is in the title, we're gonna increase the font size of this word hunt.

So font size of, let's say, 11, VH.

Whoops, what does happen over here? I think I need to provide it a little bit more of a height.

Let me check.

No, it's fine.

Let's see.

If I go over here and provide styling to inputs, I'm going to style the inputs first.

I'm going to provide it a width of 100%.

And I'm going to provide a display of flex and justify content.

I'm going to provide it a space between these space around so you can see it has the space between of these.

Let's check this I think I need to make it with the width of 100% if I'm not wrong, but I have provided the weight of 100% then what's wrong over here? This is correct and just fine.

In the center, hello, sorry, spaced evenly.

I don't think I need to provide it over here once again, so I'm gonna remove that.

Everything looks fine.

Let's figure it out later.

For now what I'm going to do, okay, that's the problem I have given it v.

H, I need to give it v w.

Yeah, that was the problem, because it was in respect to the height of the screen.

Okay, that was a problem.

So yeah, it looks good.

Now.

You can see, it doesn't get shrinked too much.

When responsive.

So yeah, we're talking about this, let's give it a little bit of weight over here.

First of all, I'm going to style this input box over here.

So search, search is gonna have a width of 43%.

And same is gonna be for select as well.

So I'm going to do is comma, dot select.

Both of these classes are going to have 43%.

Yep, that looks pretty, you can see looks really good.

If you provide anything, it's going to change the state.

So here we go, we are done with our header.

Let's go to our app JS again, let's see if we have anything left in our header over here.

I don't think we have anything left in the header.

All right, one more thing I think I'm going to do is whenever we type, we're going to search a text, let's say if I search plain, and if I change the category, so what it should do, it should clear this out, and the meanings part as well.

The meaning state as well.

So what I'm gonna do, I'm gonna create another function over here, const, handle change.

So we're gonna call this function right here, this text field, I'm gonna call this function right here.

And inside of this, since it's sending us this e dot target dot value, we're gonna receive it over here, what this value has it value has the language.

We're gonna provide this language to set category.

language should work still the same, and the set world should be empty.

Now.

Let's try this out.

Can I change our category? Yep, it's empty.

If I type anything, change it.

Yeah, it's empty.

It's working.

Great.

Alright, one more thing that we need to do, that we have left out is how do we change our API? When we change this box, or this particular select box? So we're going to use backticks over here, remove these normal string tags.

And we're going to use the backtick and go to language part.

We're going to type dollar sign and these curly braces, I'm going to type category.

Antara instead of this word.

We're gonna do the same thing and type word.

Great.

Let's let's check if our API is responding to that.

Whoops, what just happened? Yeah.

Let's go to our console.

Yeah, it's, it's showing an error because there's nothing inside of it.

Let's just type Hello.

And again, see? Yep.

What was it still showing what okay, because I think I have no words.

I haven't worried it.

Fine, it looks fine.

Let's just reload this page once again.

And type Hello.

Okay.

Okay, React hooks has a missing dependency, of course, because we need to call this API every time we change our world or category.

So we're gonna provide it word and category.

So that is what's gonna happen.

That is what was wrong in the previous one.

Every time we change this word, let's say hello.

That's gonna call the API again.

You can see it's calling the API.

And you can see it's providing us with the meaning and everything that we need to work with.

Yep, that's great.

That is what we need.

So let's start working on this.

We're gonna remove have this console over, let it be over here.

We're going to work on this below pike.

So what I'm going to do, I'm going to create another component for that.

I'm going to go Here, instead of our components, we'll create a new folder called, let's say definitions.

I'm going to make it a capital.

It's very important.

Not the folder, but the file that you create.

It should be in the capital guard GS, and another file for CSS.

I think I have created it inside of the header.

So I'm going to take it out of the header.

Yeah, now it's fine.

So our definition.js, let's go and type A f c and get the boilerplate code.

Let's just type Hello.

And I'm going to import it.

First of all, let me just create a CSS file for it as well.

Definitions dot CSS and import that CSS file inside of here.

Import dot slash definitions.

dot CSS? Whoops.

Yeah.

Let's just import the definitions in our app j s.

Below this header.

I'm going to type definitions.

Yes.

exhibits out auto imported.

Yes, it has.

Let's go to our app and check.

Yes, hello, is printed over here successfully.

Great.

So what do we need to create inside of the definitions, we need to create a box as I showed you earlier, inside of that, we're going to render all of our meanings for this particular, you know, Word, and the category.

So let's see what are all the things that we need to send to the definition? So I think we're going to need to send this word and the category and no, ha, yeah, we're gonna need to send this word and the meanings because the categories not needed over there.

Because category is changing the API.

That's all it's doing.

So we're gonna send the word, let's first of all, send the word.

And we're gonna send the meanings state.

All right.

And we're gonna set the category as well.

Let's see if we need that or not.

category.

Let's just close the useless folders.

Yeah, let's go back to the definition and receive all of that word here.

Word, category.

And meanings.

Alright, let's save this.

Also, I'm gonna render this definitions only when there's something inside of that meanings.

You know, if there's nothing inside of the state, then we don't need to see anything over here.

So what I'm going to do is when a provided in curly braces, when they say meanings, and this, so there's something inside of the meanings only, then the definitions will be rendered.

Let's go inside of the definitions.

And let's see.

So first of all, we're going to need an audio component as well, but I'm going to leave that audio component for the later.

So let's just start by typing.

If there's anything inside of the word, so So if, if there's nothing inside of the word, first of all, what it's going to render, it's gonna render a span tag.

A span tag, the class name of, let's say, sub, title, whoops.

title.

And it's gonna say start by typing a word in search.

Yeah.

What if there's something inside of the word where it's gonna render? To render this something else? Let's say something.

There's something over here.

Oops.

I'm just gonna do this.

Yeah.

Let's see.

Yeah, start by typing a word in.

So let me just style it a little bit.

I'm gonna provide this div a class name of, let's say meanings, or meanings.

We have imported at CSS all as well.

There's a style both of these first, so that we're done with that.

I'm going to go and type meanings.

What are we going to do first of all, we need a border as I displayed earlier, but first of all we're going to do is going to type Display flex, brilliant, we're going to need to make it flex box.

And we need everything to be aligned from top to bottom.

From top to bottom.

We're going to do flex direction has column.

And yeah, and we're going to do when there's a lot of items being displayed over here, we're gonna have to do overflow.

Why as a scroll? Or flow? Why as scroll? You know what I'm thinking, let's just apply this style later.

So that, wait, something's wrong.

No.

30, something to see, first of all, I'm going to import something instead of instead of this something written over here.

So yeah, well, first of all, let me demonstrate if it's working or not.

You have anything you can see there's something printed, if it's nothing, it's going to say start by having a word in search.

Let's style this subtitle.

I'm gonna go and style this subtitle only.

For now.

So title, I'm going to give it a font size of similar font size that we provided earlier, five, viewport width, and the font family is going to be the same.

Monserrat, let me just copy it so that I don't make any spelling mistake this time.

Yep.

Yeah, that looks good.

To me, font size five VH.

And what I'm thinking? No, yeah, that's fine.

Anyway, so yeah, well, what we're going to do, we are going to render this meanings instead of this thing.

So let's go over here.

I'm going to type meanings.

I'm going to map through this.

And map.

I'm going to give it a word mean.

And just do that.

Let's just log it.

Let's see what we get inside of it.

I mean, there's something wrong.

Yeah, semicolon.

Let's see, what do we get? If I type anything plain? Well, you can see we get a lot of things over here, we get an array of word and the phonetics and Okay, that's not the final word that this is the final word.

We're getting meanings and the phonetics so we need to hurry through this meanings.

For going, I'm going to remove this now.

Alright, so what I'm going to do is get out of here, your mean, dot meanings.

dot map.

I'm going to name this variable as item.

Let's see what's inside of it.

Let's log it.

Item.

Now, let's log base real quick.

And first of all, I need to remove this log from here, so it doesn't create some confusion.

Let me just close this terminal.

Yeah, make some space.

Let's see what we get.

Let me refresh this over here.

I'm gonna type plane.

There we go, we can see a lot of things over here we can see our definitions.

So now we need to render, you know, map through this definitions.

So we get each each of the definitions and the other thing has to be synonyms and examples.

Okay, it doesn't have over here.

It's gonna be somewhere right here.

definitions.

What's going on? Let me just check this.

It has to be inside of this somewhere.

It's gonna be somewhere inside of this.

parts of speech parts of speech definitions.

You can see example.

And this one has one extra thing it's going to be synonym.

We're going to make this example in synonymous optionally, because you can see somewhere it's appearing somewhere, it's not appearing.

So we're gonna make that optional.

So let's go back to our code.

Let's just remove this inside of it.

I think I removed something else.

Do something wrong.

No.

I'm supposed to remove this.

Yes, so inside of this.

So we have our item.

So with our item, let me shift it backward here.

With our item what what are we going to do we need definitions.

We're going to map to definition.

I know this is a lot of mapping over here.

This isn't mapping hell.

So I'm going to do is definitely item dot definitions dot map, and let's give it the variable name at D, F.

Alright, now we need to create a div.

Whoops, the IB.

Yeah, there's our div, I'm going to give it a class name of single meaning, or single mean, whatever you want to call it, I'm gonna give it a style.

Little bit of styling.

I'm giving I'm gonna give it a background color.

The single component is going to have a background color of white, let's say.

And what else do we need, I'm gonna give it since it's wide, I'm gonna make the content as black, color, black.

Let's see if I type anything inside of this.

Let's print our definition first.

So I'm going to print the definition in bold.

So def dot definition.

Let's check.

Alright, here we go.

These are the different definitions that we're getting from the API for the word plane.

If I type ball, here we go.

We're getting different, different meanings for the ball.

So we did we just don't need just the definitions, we're going to need the examples as well.

So I'm going to create a line between both of these.

I'm going to give it a style of background color.

Black and the width, not the width of 100%.

Let's say.

I hope it's gonna create a little bit of separation.

Yep, it does.

mean see this overflow is also over here.

I'm going to hide it in a while.

So we have got this HR No.

All right.

Now these optional parts def dot example.

If there's an example, then where are we going to print this, we're going to create a span tag.

Instead of the span tag, first of all, we need to type example.

So we're going to make the example as bold example.

All right, and we're gonna print d f dot example.

Let's check that out.

Okay, this is not appropriate.

It was having some shady meanings.

Yeah.

So yeah, you can see example definition.

Definition example.

Yeah.

There you go.

So what else do we need? We need the synonyms.

Right below the example.

I'm going to type def dot synonym.

If the synonym exist, synonym s, also is going to be there.

So if doesn't only exist, what are we going to do, we're going to do the same thing that we did over here, we're going to copy this.

I'm going to paste it over here.

I'm just going to change synonyms.

And d f, dot synonyms.

synonyms, since they are many synonyms, I'm going to do I can do a map through the synonyms.

s.

And I'm going to do with the backtick.

I'm going to do is this.

I'm going to print s and comma.

Let's see how that looks.

You can see synonyms example, but looks kind of ugly, you know it's in the same line.

So we need to do, what do we need to do is we're going to have this in all this in different lines.

So first of all, let's just style the outer container first.

I'm going to style this meanings container first, right? When I go to definitions dot CSS, and let's continue from here.

I'm going to type this ugly scroll bar I need to make it a little bit smaller.

So I'm going to type scroll with I think, yep, scroll bar width, I'm going to give it 10.

Now you can see a scroll bar is looking much better.

You can see the side scroll bar is thinner.

I'm gonna give it a height of 55 viewport height and the border and get a border of 10 pixels 10 pixels of solid I have a color over here, we're going to copy this, you can just copy this color where you can just experiment with these colors by clicking over here and just select a color.

I've chosen this color, it was looking good.

And I'm going to give it a border radius of 10 pixels.

Let's see how far it looks.

Okay, it's not very good, I think I need to give it some padding.

I'm going to give it a padding.

In top and bottom, I'm going to give it 10 pixels and left and right, I'm going to give it 20 pixels.

And the overflow x will be hidden, we don't want the bottom bar overflow x will be hidden.

Yes, we just need this bar.

Also, we need to create some separations between these two.

Now I'm gonna provide that style.

But let me just check if it's responsive right now.

So if you can see, we make it smaller.

It has a little bit of gap between this.

I mean, below this.

We're gonna make it a little bit higher height when it's smaller.

So I'm gonna do a media query.

max width of 900 pixels.

Let's do his meanings.

Yep, meanings, and I'm gonna give it a height of 60, viewport height.

Yep, looks much better.

And overflow.

See, why am I leaving a little bit of space over here, because we're going to have a component at the top, which is going to be responsible for switching our themes.

So I'm just leaving the space for that.

overflow, x is going to be hidden and overflow is gonna be scroll.

Yeah.

Better.

So in this single meaning component, let me just get back to this.

In this single meaning component, we need to style this div as well, you know, each of this devs need to style this as well.

I'm gonna go over here.

I'm gonna type display flex.

The moment I type this, you can see it's just all horizontal line.

It looks really ugly.

So I'm going to type flex direction as column.

Yep, that's a lot better.

I'm going to give it border radius of let's say 10 pixels.

Let's try it looks good.

Yeah, it's looking better.

We'll just create a spacing between them by padding of 10 pixels of top and bottom and left and right, it's gonna be 20 pixels.

Yep.

Okay, four spaces between now I need the margin.

For I just need the top and bottom spacing and left and right is going to be zero.

Yeah, that's much better.

You can see.

So we're halfway through off dictionary app.

Let's see if our Hindi works or not.

I'm going to type my name.

Yep.

It's looks.

It's working man.

Great.

Tap yourself in the back.

You've done a good job.

Anyway, putting the cringe aside.

So what are we going to do next? We're going to create a theme switcher component? Do we need this category? Now? I don't think we need it.

Let me just check.

I think we're gonna need this in our audio component.

Yes, I'm going to what I'm going to do is while creating the audio component, if the category is English, only, then we're gonna print the audio component because audio component is not available in the other languages.

So just create that real quick.

So meanings.

It's only available in the first item of this meanings array.

So I'm going to type if meanings, first item is available.

And if there's something inside of the word, if this is true, and third thing that needs to be true, is if there's something inside of Kanu not something inside of I mean, if it's English, if the category is English, if these three conditions are true, then only it's going to go and render our app.

Sorry, audio component.

I'm going to go inside of here.

And now I'm going to render the audio component.

Alright, if the audio component not supported, I'm going to type your browser doesn't support audio element.

That's better.

I'll just have to give some message or some shit like that.

Sorry.

Yeah.

So inside of this tile, we're gonna name background color.

We're gonna use a background color of hash F F F, which is white, and the border radius of 10.

Let's see if it's raining or not.

Of course, it's not raining because we haven't typed anything.

Still doesn't render.

Okay, we haven't provided it.

Obviously, we haven't worded it the SRC that's provided the src.

So SRC will be inside of our meanings.

The first element of our meaning.

That's why I included the first element inside the phonetics, as I showed you earlier, phonetics, and sorry, phonetics, instead of the first element of the phonetics.

So okay, sometimes what happens is the phonetics is also missing.

So I'm going to test if the phonetics is present or not.

So phonetics is there, it's present, then we're gonna type the same thing again.

And inside of this, there's something called audio.

And also, I'm going to provide it control.

So we have the controls to pause and play the audio etc.

Now, here we go clean, there you have it, you have the audio component you there are your controls to increase the audio or decrease the audio, etc.

So here's the audio component.

So what's the last thing that we need to do, we need to create a theme switcher component, we need to create a theme switcher component over here.

Alright, let's go back to our app j s.

And what I'm going to do, first of all, I'm going to go back to this material, you why I'm going to import something called switch, we need because obviously when we're gonna need a switch to switch the theme.

So these are the normal switches with secondary, primary, uncontrolled etc, we are going to need a switch which from which we're going to change its color.

So here's the custom color component, I'm gonna copy this up, I'm gonna go over here and copy this particular component, this is the component, you can go through our documentation, you will also understand what's going on over here.

So I'm going to copy this up.

Let's go and see drlc have copied it up.

So inside of our app, j s, I'm going to paste it right over here.

And it's going to complain, because some things are not imported, like with styles.

Let's import that with styles.

There's something else yeah, the purple color, but we don't need a purple color.

We're gonna replace it with gray color.

So enter, you can see in gray color has also been important.

Switch is not defined.

Yep, switch, we also need to import the switch, important the switch, and hopefully it's going to work, or it's not going to show over here.

Until we render it down in our app.

Let me just create level of spacing over here.

Let's face over there, so I'm just gonna render it right or no, right over here inside of our Comm.

container.

Yeah, just above the header.

What I'm going to do is I'm going to give it another deal.

Because we're going to make this div as absolute.

So that is, the position of this div is always the top right corner.

Make this absolute and the style is gonna be position as absolute.

And the top will be zero.

Let me just write something inside of this, let's say theme.

You'll see your team appears over here.

We're gonna make it right.

With let's say 15.

Yeah, that's a sweet spot.

And we're going to provide a little bit of padding on the top of 10.

Great.

Alright, now we need to use this purple switch still has the name of purple switch.

Let me just change the name of let's say theme change.

I hope it's not a prebuilt component, material UI.

I'll just call it dark mode.

Yeah, I'm going to call it dark mode.

That's better.

To insert instead of this theme, I'm gonna render the dark mode over here.

Here we go.

Hopefully it's gonna render now.

Yup, there we go.

Yes or So before this dark mode, I need to provide a span tag, which is going to say, some particular mode, let's say for now it let's say it's saying light mode, to switch the light mode, you can just press that, and it's going to switch to that particular mode.

Also, inside of this dark mode, when we need to provide a few of the components, let's provide checked.

c, h, e, k, Ed, yeah, checked, equals, we're gonna provide a particular state inside of it.

So we need to create a state four checked, just like a normal switch in HTML, it's just going to work just like that, we're going to provide a value and on change as well.

So let's quickly create state for our dark mode in light mode, I'm going to go create a US state, I'm going to call it light mode, I should have called that component light mode as well.

But anyway, so light mode by default is going to be false.

All right, because you can see, we're going to load this app in dark mode, because our eyes are useful, we don't want to get blind by light mode.

So your light mode over here and on change, it's just gonna flip the switch.

So what I'm going to do is set light mode, and the opposite of whatever the current value is.

So opposite of light mode.

Yes.

There we go.

I think we need to provide the styling to this thing.

The flex is styling to this thing.

So I'm going to go inside of our inside over here, I think I'm gonna have to provide this a little bit of styling.

Or maybe our container, flex direction, column height, 100, VH.

Yes, we haven't provided the justify content evenly.

justify content, space evenly.

Space evenly.

Now, you'll see much prettier.

Now.

If you have any confusion in the code, you just you can just go to my GitHub repo, the link is provided in the description to see all of the code changes, if you have any confusion.

I said that twice.

Yes.

Yeah.

So where was I was on here.

Yeah, dark mode.

So what I'm going to do, if person switches to light mode, this led this text should also change.

First of all, let's take care of that.

I'm gonna provide a JavaScript tag over here.

And let's say light mode, if light mode is turned on, then it's gonna render dark.

Otherwise, it's gonna render light.

Let's see if that works or not.

By default, it's dark mode.

So I'm going to turn it on See, it's going to show dark mode, if I turn it off light.

Alright, so finally, here's the moment of truth.

How do we implement this feature? So what do we need to do is wherever we have said these colors, we just need to put a condition over there.

So let's start from best place from our app component, I'm going to make it fullscreen.

And I'm going to check next check.

is like more turned on? If yes, then I'm going to provide it a color of white, triple F.

Otherwise, that color.

And the color is also going to be affected by this is the light mode turned on, we're gonna ask this question again.

If it sound, then I'm gonna provide it black.

Whoops, I can't type.

There we go.

It's compiling.

Let's just test this out.

Whoa, works like magic.

But we have still some things that we need to take care of.

Also, we just don't want this just smacking the light mode in our face, just we want to provide a type of transition thread, it's soft, it looks good.

We're gonna provide all point five seconds, you can just configure this according to your own.

And lenio now it's gonna be a little bit of soft There you go.

looks much better.

So I'm going to style this as well.

Or where is that thing? First of all, let me see if there's anything needs to be changed or what here and respect to dark mode or light mode? No, I think we're gonna just send the light mode over here in our header as well.

So that we can work With this thing, right, and I'm going to set this over here as well, man.

Whoops, not the light theme.

Light mode.

Whoa.

Apparently I cannot type light mode equals light mode.

I'm going to provide it to that theme.

And just go oops.

I'm gonna go to our theme now.

I mean head now, I can't talk I can't, right? I'm so stupid.

Yeah.

Come don't use snort a very big tutorial.

Light mode See? light was gonna paste it.

Light mode.

So over here, I'm going to check is the light mode turned on? Question mark.

If it's turned on, I'm going to provide it a black color.

Hash 000.

Otherwise, white.

I'm going to check this again, as it turned on.

If it is I'm going to give it a light theme.

Otherwise, whoops.

Otherwise dark.

Yo, let's check this out.

Again.

Pretty enough.

But let's type over here something.

See? Well, that doesn't look good.

We need to create it a little bit in that just need to give something black theme or something.

Let's see if there's something remaining over here? I don't think so.

So we're going to provide the same thing to our definitions component as well.

All right.

Yep.

Like mode.

I'm gonna go to which I already have came over here.

So what I'm going to do over here, let's see.

Yep, right here, we're gonna check if the light mode is turned on or not.

Question mark is the light mode turned on.

So we're going to provide it a color of which was our background, three b 5360.

Otherwise, white.

We're going to test this out again over here, is there a light mode, then we're going to provide it a white color, otherwise, a black color? Let's check it out.

Here we go.

Damn, that looks really pretty.

Really good.

All right.

And I think with this, we have successfully created our app.

Alright, let's just quickly go to netlify.

And I'm going to host this website.

So how do we host these websites on netlify.

So I've already hosted his website on the netlify.

Already, this, this word hunt, I'm going to click new site from get and then click on this GitHub button over here, then I'm going to log in.

So you can see I've already authorized the GitHub, so it's going to show my repositories, then I'm going to select this react dictionary repository where my code lies.

So after pushing it to the GitHub, you just need to click on this deploy side button, and the site will be deployed.

And that's all that's all you need to do.

And let's say if you want to change the domain of your website, where are you going to do, you're going to go to your web app and click on domain settings.

Click on options added site name, and you can provide a custom site name right here.

So what I'm going to do in the in our next video, I'm going to make this application a pw a progressive web app.

So what is a pw a or progressive web app? So pwd allows you to install a particular web app into your phone natively.

What I mean by that is when you go to that web app into your phone's browser or your desktops browser, it's going to prompt you with an installation icon.

So when you press that installation prompt, it's gonna start installing that app natively into your phone.

So you can use that app just like a native app into your phone or desktop.

So this is an amazing feature of a progressive web app.

So let's get started.

So as you can see, we are running our dictionary app currently in our browser, and I've opened this project file as well.

So what are we going to do now? So we're going to go to Chrome Developer Tools by clicking on inspect and go to lighthouse.

So what lighthouse allows us to do, it's gonna scan our app, and it's gonna tell us what are the features that are missing to make it a progressive web app.

So it's gonna in your case, it's going to show you all of these icons as ticked.

So you need to antique all of these icons except the progressive web app and click on Generate Report.

So it's gonna scan your website and tell you what are the things that are missing to create it progressive web app.

So let's check.

Alright, here we go.

So these are the things these are the red errors are the things that we need to complete.

So first of all, let's start from the bottom.

So first of all, it's asking us that manifest doesn't have a maskable icon.

So we need to create a maskable icon.

But first of all, what I'm going to do is, you can see that, first of all, let's go to the application tab, you can see that this icon has these react icons.

So we don't want this react icons, we're gonna change this icons to our own icon of the app.

So let's go to Google and search dictionary, I can PNG, here you go.

Let's go to images.

And we're going to have that icon with in which we have full usage rights.

Let's go click over here.

And let's choose this icon.

And I'm going to click on this icons, it's gonna take us to the website, and from here, we can freely download this icon, oh, we need to register.

Let me quickly do that.

Okay, so we have download that icon over here, it's going to be free, it's not going to cost any money.

So let's convert this icon into a favicon.

So we're gonna go to the browser, and type PNG to favicon.

Let's go to this website.

And we need to drag and drop our file over here.

So let's take this file, and drop it over here.

And let's click on download.

So it has provided us with this zip file.

Let's keep our zip file over here and extract it.

Alright, here we are.

So what are the files that we need? We're going to need this one.

Okay, we're gonna need all of these.

And this one.

Yeah.

Let's cut this icons over here.

And we're going to go to over here into public folder, and we're going to paste it over here and replace the file.

And here we have it, we have these fabric on file.

So we're here we're gonna remove both of these files.

Yeah, we don't need them, we're gonna remove them.

Alright, so let's go back to our code.

And into our public folder in index dot HTML, we're going to need to add a few lines.

So right over here, you can see there's an apple touch icon over here.

So we just gonna change the H ref to something else.

Let's see what was the name of our file.

Here's the name of our file, Apple touch icon dot png.

So Apple, touch icon dot png, here we go.

It has auto suggested as this name.

And the other thing that we need to add is our favicon.

icon.

So link, short.

Got it? All right, now we need to give it an href.

So it's gonna be fairly corny.

If I'm not wrong.

Let me check.

Yeah, favicon dot Ico.

Yes, we need that.

There we go.

What's wrong? Okay, we haven't closed the tag.

Now we're done.

Let's go to our website and check.

Here you go.

You can see the icon has changed.

Let me just reload this page, and go to inspect and go to application.

Now we can see over here you can see our fabric code has changed successfully.

Now what do we need to do for this step two is we need to generate a manifest file.

So what is a manifest dot JSON file, if you go to your react app, you can see this something on manifest dot Jason.

It has it favicon dot Ico.

It has the logos, different different logos or logo files that we deleted.

We're not going to use this, we didn't delete that right here.

And I'm going to delete this as well.

We don't need this.

I'm going to delete those as well.

Basically everything we're going to delete it over.

First of all, let me generate your manifest files data.

So what I'm going to do is I'm going to go to this website Manny, fast generator.

Let's see.

Here we go.

Hey, you have it.

Let's give our app a name.

Word hunt.

I'm going to give it short name of word hunt.

Team color.

Let's say I'm going to choose black.

All right.

display mode is going to be standalone because we want this to be acting as a native app.

So we're gonna do is stand alone.

Orientation.

It depends on your app.

If your app Support support rate as well as landscape, you can select any.

In my case, I'm going to select any application scope, no nothing to change over here.

So here we go.

We have this manifest data generated.

So I'm going to copy it up.

And I'm going to go to our VS code and paste it over here.

Comma is needed over there.

Yeah.

All right, now we need to generate our icons.

So how are we going to do that? So earlier, we have downloaded that file.

Where is it? Yeah, word hunt, we're going to use that to generate our different different sizes.

So there are four sizes that you need to generate.

First one is 190 2x 192, second, 256 3354, and fourth is 512.

Let's go to our browser.

And let's enter image size.

Yeah, let's go to Image resizer.com.

Alright, here we are, we're gonna supply it our image right here.

So first of all, what do we need, we're gonna need to generate 192 x 192.

Here we go.

Resize image now.

Alright, here we are, there's download this image.

Here we go.

So we're gonna go to our project folder.

And we're gonna paste it over here.

So let's just drag and drop over here.

So here it is.

Now second one.

Also, I'm going to name it.

Let's name it logo.

192.

We're going to follow this convention.

Alright, let's generate another one.

Let's take that.

I'm just going to generate for everything then I'm going to paste it all together over there.

Second one is 256 into 256.

There's download that.

The third one.

Yeah, that third one was 384 into 384.

Here we go.

Final file will be 512 and 251251 2x.

Five one to resize that image.

Alright, here we go.

See had mistakenly downloaded it twice? gonna delete it? Oh, no, nevermind.

Alright, so we're gonna copy all of these files to this folder, public folder.

And then I'm going to name them the same way that I named this logo one and two.

So this one is logo 256.

This one is logo.

384.

And this one was logo.

512.

Here we are.

Alright, so we have all of the icons generated successfully.

Alright, let's go to our VS code.

And let's create our icons.

So what we're supposed to do now is this.

We're gonna enter that.

So what have I done over here? Let's see.

Yeah, so we're going to provide the SRC of wherever the location of icon is.

I'm gonna remove this.

And type logo 192.

Same for this one as well.

Logo 256.

Logo 384.

Lastly, logo 512.

Let's see what application.

Let's save it.

Yeah, and let's go to the Chrome.

Let's refresh this page.

compiled successfully.

Let's go to inspect and application.

There we have it.

We have all of the icons over here.

Great.

And also we need to add a ServiceWorker.

I'm going to explain what ServiceWorker is later.

Let's go to our lighthouse over here.

Let's generate the report.

And now let's start working on that.

Alright, first one is that manifest doesn't have a mascot bell icon.

So what is the mascot bell icon.

So masco bell icon is something that when you install the app in your phone, the icon And that is displayed over there in your menu.

That is what mostly well I can is.

So how do we generate a maskable icon.

So there's a website called mass cable dot app.

I'm going to close both of these, I'm going to go to Mass cable, dot app slash editor.

Here we are.

So we need to provide it.

First of all, we need to provide our icon or the image that we need to use.

So this one, I'm going to drag and drop over here.

So here we are.

Now we need to make it according to our, you know, according to our liking, so I'm gonna do is, let's say, rounded rectangle.

Yeah, that looks good.

I'm gonna provide it a little bit of padding.

I'm going to shift it a little bit over here.

That looks good.

I think that's good.

I think that looks fine.

Yeah, so I'm just gonna export it.

It has downloaded that.

Let's go to our public folder.

And I'm going to drag and drop that over here.

Let's drag and drop over here.

I'm going to give it the name of maskable.

maskable.

Yeah, great.

So now in our manifest file, we need to provide the location of this maskable.

Let's go to the manifest or JSON.

And at the top over here, I'm going to open another curly brace.

Just like the others, we need to provide it as RC First of all, whoops, as C.

So what is going to be the SRC maskable.

The name that we gave, must not be in.

jpg.

So what's the size, size is going to be 1-967-219-6196.

In 2196.

It is we need to add the type type is going to be image slash PNG.

And the purpose purpose is going to be any maskable.

Here it is.

Let's save that.

And let's check our website.

Let's go here, over here and refresh it.

I'm going to close it and open into a new tab.

Go to inspect To the Lighthouse and Generate Report.

Once again.

All right, here you go.

Manifest has a mascot bell icon.

Let's see what else is left.

Better.

Alright, next thing, what do we need to do is does not redirect HTTP traffic to HTTPS.

So it's gonna be fixed when we deploy it to netlify.

Since netlify, directs all the traffic to HTTPS, so it's not going to be the problem.

So let's leave this one for now.

And the third one is that does not register a ServiceWorker, that controls page and start URL.

So all of these three are linked together.

So we need to provide that let's go over here.

Where is it? So as you can see, we don't have any ServiceWorker file currently.

So how do we need to generate the ServiceWorker file? So let's go to a new window.

What I'm going to do is, I'm going to open a folder.

Let's open a folder right over here.

I'm gonna name this folder, service.

work or something, anything doesn't really matter.

So what I'm going to do is I'm going to initialize a new react app.

But it's not going to be the conventional way.

What I'm going to do is I'm going to enter NP x create react app.

And what do we need to do? Yeah, we need to write any any name, let's say my app.

And I'm gonna write a template for CR a dash template, dash pw A.

So when you type this, it's going to generate a react app, especially configured for a pw a application.

So let's enter that.

And let's see what happens.

Alright, here we go.

It has successfully initialized a new react app.

So what do we need from this react app? We need these two files serviceworker.js and service worker registration dot j s we're so we're gonna select these and copy these and copy these into our Project over here into the src folder, I'm going to go and paste it.

So we have both of these ServiceWorker files.

Let's go back to that project.

And let's go inside of index dot j s, let's see how these files are being used.

So it's being used over here.

And we need to add this line as well.

So I'm going to add this line first, let's import that, copy and paste into our index.js file.

Here we go.

Let's go back.

And let's copy this part as well.

Copy and paste it over here.

And let's save that.

And let's see the app has compiled successfully.

Let's go back to our local host.

And I'm going to open this in new tab again.

Let's go to inspect and check lighthouse.

Let's read the report.

All right, let's see what happened.

Okay, it's still giving the same error.

Why? Because Because of this, when you go to index, sorry, ServiceWorker, there's something called inside of register, you can see it only works on a production app.

So our app is currently in development.

So let's build this app.

And let's see if it works or not.

So what I'm going to do is I'm going to type NPM, run, build.

So it's going to build our app, a production ready app.

Alright, first of all, whoa, whoa, whoa, we forgot to do this.

Instead of unregister.

We need to change it to register.

Yes, so that it can register our ServiceWorker.

So now let's run the build.

Alright, app has been built successfully.

So what does it say it say you can run this command to run the production build.

But first of all, if you don't have this, sir, what do you need to do? You can run NPM I sir, dash g when you run this command, sorry, not an om, it's NPM.

So when you run this command, what it's gonna do, it's gonna install this command server on your machine.

So let's just run this command now.

Sir, dash s build.

I'm going to copy it and run it over here.

So it says it is serving on our localhost in our localhost 5000.

So let's go to localhost 5000.

Now.

localhost, I'm going to change this to 5000.

And our app is running, let's go to inspect and to the lighthouse.

And let's generate the report again.

All right, here you go.

These checks ended the experto.

Now you can see it has lightened up this progressive web app icon.

So all we need to do now is does not redirect HTTP traffic to HTTPS.

So when you deploy this app to netlify, so what it's going to do, it's going to have successfully direct all the traffic from HTTP to HTTPS, then it's going to be created as a progressive web app.

So if you don't know how to deploy this app on netlify, you can check our previous video where I have where we have created this dictionary app.

So let's check our deployed website.

Now.

Let's go to word hunt dot netlify dot app.

This is our deployed website.

Now final check of First of all, you can see there's one Install button over here.

If I click on this install button, it's going to ask me to install this app, just like I showed you earlier in phone.

This is how you can install it on your desktop.

Let's click on Install.

And here you go in this app has been installed successfully.

Here you go.

Our app is right here, word hunt when we click on it, it has installed as a native app in our PC.

And check the final time there's a new report and it's going to show us that our app is now successfully a pw a.

Hey, you go.

There you have it.

Our progressive app is working fine progressive web app is working fine.