all right then going so we've pretty

much reached the end of this project we

have a fully working moon application

now react on the front end express a

node in the middle and then a mongodb

database at the back so all of this is

working but there's a couple of things i

kind of want to finish up first of all i

want to make this delete button look a

little nicer so we're going to use some

kind of trash can icon for that using

google icons and then this

date time string thing over here looks

terrible as well so we're going to

format that using a package called date

fns

all right then so the first thing i want

to do is make a trash can icon right

here instead of it just saying delete

now to do that we'll be using material

icons from the google fonts library so

i'm going to go into the public folder

then open up index.html and what we need

to do is basically paste in here a link

to that font library so i've just copied

that already and i've pasted this in but

you can find it by just googling uh

material symbols outlined or whatever in

google and then you'll get this link

right here so
that gives us the icons all we have to

do now is apply a certain class to

whatever we want to have an icon

so if we go back over here it's this

thing right here that we need to give a

class to so i'll say class name

is equal to something and the class we

need to give this is material

symbols

and then hyphen outlined because that's

the library

that we've

linked to right here material symbols

outlined all right

so

that's the first step the second step is

to use a specific keyword within the tag

and that keyword will be translated into

a specific icon now it just so happens

to be that the delete keyword is a trash

can icon so we don't need to change this

but you can replace this with other

things instead to get things like arrows

or hearts or whatever you want but we're

going to keep it as delete so i'm going

to save that now so we can preview it

okay and that's looking a lot nicer now

so the functionality of this doesn't

change we've just made an icon instead

of the word delete so i can show you

that if i try to delete one of these it

goes everything still works the same way

so that's the first thing completed the

second thing we wanted to do is format

this date so it looks a bit nicer and to

do that we'll be using a package called

date fns

so this is a package we can install into

our project using npm and it gives us

basically a load of functions to format

dates and times differently so we can

have our date display something like

this three days ago or something like

this

so let's go back to our code now and try

to install this

all right then so let's open up a

terminal and i'm going to just open up a

new terminal over here so we don't need

to cancel out the process in fact we

will we'll cancel out the process

so ctrl c and yes and then we'll install

the package so npm install and it's date

hyphen fns like so so press enter to

install that all right so while that's

going on we can import a function from

that library at the top so let me just

do a little comment to say date fns

right here and i'm going to paste in

this input so we're using a function

called format distance to now and that

comes from date hyphen fns forward slash

format distance to now so now all we

need to do is use that function down

here to format this date

so

the way we do that is let me just cut

that and we're going to use that

function format

distance

to now

and then this is a function that we have

to invoke now it takes in an argument

which is a date object so we'll say new

dates and the date that we want to pass

into this is going to be the created

update

now it also takes a second argument

which is an options object and this is

to add a suffix so we say add suffix

and that's going to be true

so if for example

we added the workout two days ago then

without this it would just say two days

but with this it would say two days ago

all right so that's the suffix

so now let's make sure this is installed

correctly yep okay so now we're just

gonna run this again by saying npm start

and hopefully

it should all start up

yep it does we do get a couple of

warnings right here which i'm going to

come back to in a second but let's just

preview this in a browser first of all

all right then my friend so that there

looks a lot better cool so let me just

go back to those warnings we saw in the

console and we'll try and get rid of

those before we finish up

all right so it says down here we have a

warning and this is in the home page so

let's open that up and it says

the react hook use effect has a missing

dependency dispatch okay yeah so since

inside this use effect hook we use the

dispatch function this is kind of an

external function that's not defined

anywhere inside use effect and when we

use those external functions or

dependencies if you like then we have to

declare them in this dependency array so

let's do that

dispatch and basically that means

whenever the dispatch function changes

in any way shape or form then it's going

to rerun this use effect function now

that's not really going to happen to us

but we have to put it in there in the

dependency array nonetheless and if we

save this now and open up the terminal

we can see that that error has gone away

i am going to try this once more in the

browser to make sure everything still

works

okay so looking good over here i'm going

to open up the console to make sure

there's no errors in the console no

there's not i'll try adding a new

workout the setups yep that works and if

i delete one as well

that works as well so this now is all

working awesome

all right then my friends so that is the

monap pretty much done so hopefully now

you've got a better understanding of how

all of these different technologies work

together we have our react app on the

front end we have node and express to

make an api for the back end and that

also communicates with a database to

fetch or update or delete data and

that's pretty much done now i did say at

the very start of this course that i was

going to add authentication to this

project and we are going to do that but

that's going to come in the very next

series i'm going to release very soon so

we're going to add authentication to the

same application so users can sign up

log in and log out and when they do log

in they're going to be able to track

their very own workout exercises and

they don't see other people's as well so

everyone has their own unique data

stored in the database so stay tuned for

that one coming very soon so my friends

i really really hope you enjoyed this

series and you learned something along

the way if you did please please please

don't forget to share subscribe and like

that really means a lot and if you want

to access all of my youtube courses

without adverts also get access to

premium courses and early access courses

as well you can do at netninja.dev you

can sign up for net ninja pro which is

just nine dollars a month and also half

price for the first month with this

promo code right here and for that like

i said you get access to every course

without adverts without youtube adverts

you also get access to exclusive courses

not found anywhere else you get access

to my premium courses on udemy and also

early access to all of my youtube

courses as well so the link to this page

to sign up is gonna be down below again

i really hope you enjoyed this series

and i'm gonna see you in the very next

one

[Music]

you