Now that we've got a better idea of what we're going to build We're going to spend this video to set
up our application and also talk about some distinct challenges that we're going to run into.
So to get started I'm going to flip on over to my terminal and you'll notice that I've already changed
back to a workspace directory of sorts inside of my workspace directory.
I'm not going to generate a new reac project right away.
We're going to eventually have a couple of subprojects inside of a single directory.
We're going to have separate project folders for the re-act application or our RCMP server and for the
API server that lists the different streams that are available as well.
So we're going to have separate project directories for each of these.
With that in mind I'm going to first begin by creating a new directory called stream's that's going
to be the general name of this application.
I'll then change into that directory and then inside of here I'm going to generate my new re-act application
by saying create re-act up and I'm going to give this project a name of simply client because it is
the client portion or the browser portion of our streams application.
OK so I'll let that do its thing.
And while that runs we'll talk about some of the big challenges that we're going to run into with this
application All right.
So here's the big challenges.
Now some of these we already touched on very briefly in the last video.
First off we need to be able to understand how to navigate a user around to separate pages inside of
re-act application to do this.
We're going to use a library called re-act router.
So we're going to very quickly install re-act router as a dependency to our project and understand some
of the rules behind it to essentially allow a user to see different screens inside of our application.
Next up we need to build to allow a user to log in and log out of our application to handle authentication.
We're going to be making use of Google off.
So if you've ever seen that button that says something like.
Sign in with Google.
Yeah that's exactly what we're going to built.
Next up we need people to understand how to handle forms in redux.
Now we've already seen how to handle simple text inputs inside of react and we've seen how to put a
form together.
But we start making use of redux the techniques that we use to generate a form that user can enter stuff
into.
It's going to change ever so slightly.
So we're going to spend a pretty good amount of time to understand exactly how forms are created in
redux.
Now speaking of forms what we really are trying to do at the end of the day with this application Besides
learning about navigation and authentication.
What we're really doing here is trying to master crud operations.
Now crud right here is an acronym it stands for creates read update destroy these terms right here are
talking about different operations that we might do on records inside of a web application.
So inside of typical web applications we have the ability to create records.
We have the ability to read.
We have the ability to update and destroy as well.
And that's what we're really doing here with these stream objects right these stream things that we're
trying to show on the screen.
So remember we've got this list of streams right here.
And then we can read a stream we can edit a stream and we can delete it.
So that's the real core of this application.
All this stuff round's handling streaming and video.
Those are at the end of the day total side topics.
OK.
I want you to understand that right now the real goal of this application is to make sure that you master
crud operations because the vast majority of web apps out there like just about every app you can possibly
think of at the end of the day to some degree can be simplified down to a crud type application.
For example Airbnb B It lists records out lists out records that you can book for housing.
So that needs a user to be able to create a listing.
A user needs to be able to read or view a listing.
We need to build to update the listing and destroy listing as well.
Now of course Airbnb has a tremendous amount of other functionality behind it but some of the absolute
core operation of that application is this cruds stuff.
Same thing with say eBay dot com.
Same thing with an email client same thing with just about any application you can imagine.
It all comes down to these crud operations.
So the real goal of this application is to make sure that you really understand these techniques extremely
extremely well.
Like I said the last big thing that might be a challenge inside this application were probably going
to run into errors at some point in time like a user might type in the name of a stream that already
exists or they might not type in any name to the stream whatsoever.
Where are we we might fail to load up video from a stream.
It's incredibly likely along all stages of this application that we will run into some type of error.
And so we want to make sure that we have some general air handling system inside the redux side of her
app.
Then we can show error messages to our users as well.
OK.
So that's going to be some of the big topics that we're going to cover inside this application.
So let's take a quick pause right here.
It looks like my install is completed.
So take a quick pause.
When we come back the next video we're going to start talking about our big first topic right here handling
navigation.
Well actually I take that back we're going to do a little bit of quick setup and then we'll start talking
about navigation.
So a quick follow and I'll see you in just a minute.