-: We've now got our backend server put together
and in this section,
we're gonna start working on the front end application
to interact with our backend server.
We're gonna first get started
by generating a new client project
inside of our auth directory, right next to our server.
So, I'm outside of the server directory.
As a sibling to that folder,
I'm gonna make a new React project
by using create react app.
So I'm gonna do create react app
and I'm gonna call this project Simply Client,
'cause that's what it really is.
It's the client to the server that we just created.
So, while that installs, let's talk a little bit
about the application that we're going to be building
inside this new project.
All right. So, a couple mockups to go through here.
We're going to essentially build out the entire login,
logout, and signup processes.
When a user first comes to our application
which we hosted at Local Host 3000,
we're gonna show them a simple welcome screen
like the one you see right here.
The welcome screen in this application
and all the screens that we're gonna put together,
are gonna be pretty straightforward in styling.
Again, the entire focus of this application
is all about functionality,
we're not gonna spend too much time
on the CSS side of things at all,
really just focused on React and Redux,
'cause we do have a lot of code to write
to put this thing together.
And once a user comes to this page,
that can click on one of the three buttons up at the top.
The Redux auth button right here
will take user back to the homepage of local host 3000.
They should also have the ability to sign in or sign up.
If a user tries to sign up,
It'll show them a form
that they can use to sign up to our application.
The minimum number of credentials to sign up
via our backend API is the email and password.
So, we're gonna present a form
where a user can enter both those, click submit,
and sign up to the application.
Essentially, we're gonna take the email and password
and send it to that backend route
that we already put together to create a new user account.
The signed in form is gonna look very similar,
pretty much identical for that matter.
So, this is the sign-in form right here.
The minimum set of credentials to sign into our application
is also just the email and password.
So, we're going to record
both those on this form right here,
send them to the back end and exchange those credentials
for a JWT token.
If a user tries to sign out after they've logged in,
they can go to the slash sign out route.
When they sign out the application,
we're gonna put a simple message on the screen that says,
"Hey, okay, peace. See you later."
And presumably we'll probably have to do something
with our token that we've gotten from the server
to really indicate that yes, the user is truly signed out.
And then finally, one of the more important pages
is going to be a feature page of sorts.
So, once a user has signed into our application,
they're going to get access to this feature page.
The feature page is really just a text message on the screen
that a user should only be able to see
if they are signed into the application.
The secret message that the user's gonna fetch right here
is going to be retrieved from our backend server
and we're going to want to make sure
that a user should not be able to access this secret message
from the backend
unless they are logged into our application.
So, that's pretty much it on the front end.
Let's take a pause right now.
We're gonna come back the next section
and we will install a couple more packages into our project
to handle navigation and forms and whatnot.
And then we'll get started with our implementation
in the next section.