Let's continue on with some of the set up on the front end of our application.
Now before we just kind of dive into all the client's stuff that we have going on I want to make sure
that we're on the same page as to what we're really working on and what we're trying to accomplish right
now.
As a reminder this entire course is all about building exactly one application and so it can be very
easy to kind of get lost in the thick of things and have a tough time understanding what we're working
on any given time.
So I always want to make sure that it's very clear what we're trying to accomplish.
So let's take a look at a quick diagram now and this diagram you'll see both green blocks green boxes
and blue boxes everything in the green block box is something that is going to be occurring on the back
and everything in a blue box is the front it.
So at this point we've gone through our server setup we've really conquered our authentication flow
and we've covered a tremendous number of topics around that.
We're now going to pivot over to doing some of our client side setup.
We're going to ensure integrate or kind of setup authentication on the client.
And when I say authentication the client I'm really talking about having the ability inside of our application
to decide whether or not our user is authenticated at all after we take care of that.
Well then moved back to the server will take care of some surveys around or see some API is around creating
surveys and whatnot.
And then we will add equivalent logic to the front end as well.
Now whenever you're working on a full stack application I highly highly recommend that you try to make
sure that you are always working on either the back end or the front end.
At any given time if you start to juggle both and both of them at the same time like very actively work
on the back end and the friend at the same time it is a very easy way to end up with some spaghetti
code inside of your application.
In general your life will be easier if you try to segment out each individual task and say this is either
something on the back end or this is something on the front end complete it on its respective side and
then go implement the equivalent functionality on the opposite side.
So always good to make sure you kind of do at least a little bit of design ahead of time.
OK.
So with that in mind.
Let's get to it.
Inside this section we're going to start talking about the client set up and some of the different technologies
we're going to need on the front.
Now you might be thinking Stephen we've already done client setup we've been doing this like endlessly
like we did all this proxy stuff all kind of whatnot and you know what.
Yes we did but we still have not done anything around kind of getting our re-act application set up.
We haven't done anything around redux we haven't done anything around re-act router and so that's the
setup I'm talking about.
I want to make sure that we have a fully featured re-act redux re-act router front end before we start
to dive in and start to add any type of logic to it or anything like that.
OK.
So with that in mind I want to do just a very quick review of some of our mockups.
I've taken some of the mockups and added in some possible different components that we might make over
time.
So on this screen right here we've got our original kind of log in Landing's screen of sorts.
A user should see the screen when they come to the root route of our application.
So on the screen I kind of imagine having like a head or component at the very top and having a landing
component as well that will show some sort of marketing text to the user.
Now we're not going to spend a lot of time on really developing this landing component into something
that has like a bunch of pictures and a bunch of marketing text.
We're basically going to put it there put some text on it and then I'm going to leave it to you to say
hey if you want to turn this into a very serious project you should come back and flesh out this landing
component.
So again I'm going to kind of leave that marketing stylings CSSA design side over to you if you want
to do it.
So that's our route route.
Now once the user signs in they might go to a route of something like email a dot com slash surveys
the user will still see the head or phone at the top and then maybe we'll have some other things on
here.
Some other components like the dashboard component maybe a survey list that shows the user a list of
all the different surveys maybe a surveillance item that represents in each individual survey that's
been sent out.
And then finally we go on to the form that a user can use to create a new a new survey inside of our
application.
The user should probably see this form right here if they go to a route or something like email the
dot com slash surveys slash new.
So if they go there hey show them the form.
OK.
So just very quick review on some of the different screens and some of the different components that
will have inside of here.
Now as we look at this I am immediately thinking to myself OK we definitely need to make use of re-act
without a doubt because say that's what this is all about.
I'm seeing that we have a couple of different routes inside the application.
So like when a user is that the dot com slash which is our route route we want to show a set of components
and then when a user goes to a different route we're going to show a different set of components.
And so as they start to look at this different kind of like routing stuff inside if you're I am immediately
starting to think about making use of re-act router inside of our application.
So I'm thinking that we'll use re-act router to handle navigation and sending users around to these
different screens and showing different sets of components.
And then finally I'm looking at the fact that we want to clearly load up some resources and kind of
have a different list of records.
You know we want to fetch data we want to kind of persist that data between navigating between different
routes.
And so I'm very quickly also thinking that we might want to use redux inside of our application as well.
Now as a reminder when you signed up for this course I had said that yeah I'm really assuming that you
have the basics of react.
I'm also kind of assuming that you have an idea or at least a pretty you know you've at least looked
at redux in the past and react router as well.
Now if you haven't gone through redux and re-act router that's ok we will be talking about these things
at a pretty low level and I'm going to give you a good refresher and make sure you understand how they
work.
But in general I'm kind of assuming that you know I don't have to go through absolute square one with
any of these things.
So if that doesn't sound like you if you are sitting there thinking I've never touched redux before
and I've got no idea how it works whatsoever well maybe drop me a message.
You know we'll figure something out.
I've got a ton of other courses that you can always take to get a very quick refresher on redux and
how it works.
So we can figure something out.
But again we're going to kind of you know move to this stuff somewhat quickly as opposed to covering
all from scratch because the each one of these topics is very heavy duty you know redux reactor under
very heavy duty.
And we can easily spend two hours just talking about re-act router and how it's all set up.
So with that in mind you know we've got some work cut out for us.
We're going to go through the set up of react.
We're going to set up re-act router we're going to set up redux and then we're going to start to build
out this initial landing page right here and make sure that our users have the ability to kind of sign
in or sign up to our application.
So quick break next section we're going to start tackling the front end very quickly.
So I'll see you in just a second.