All right.
So enough with the mock.
Enough with talking about what our application is going to do it's time to actually talk about how we're
going to build it how we're going to actually write some code to make all this stuff happen.
Now to kick off this process I want to tell you a little bit about the tech stack that we're going to
be using and how it's all going to be communicating together.
This is going to be the first of many talks that we have about the overall architecture of our application
or how all these different components and technologies are going to communicate.
If you're here taking this course right now chances are you've tried to find resources previously to
figure out exactly how to get react to work with express how to get react to work with Mongo D-B or
express with Mongo d.b.
I found over time that there is a lot of content specifically around like how to use react like a course
on how to use react or a course on how to use redux or a course on how to use Express.
But it seems like there's really not a lot of content out there that tells you how to use all these
different technologies together.
And so that's going to be the primary concern of course.
I want you to walk away having a really good idea of how all of these different pieces work together
to make a real application that's going to be just Goal number one for me in this course.
So again it's going to be the first of many talks where we discuss the overall architecture of our application.
Okay.
So then mind let's get through this diagram really quick.
Whenever a user navigates inside of their browser to our domain say email dot com.
We're going to send them back in.
H t m l document and some javascript files that contain a re-act application.
So when the user goes to email dotcom we're going to send them some files that will get some content
or some HVM to appear on the screen.
That's going to be the re-act side of our application.
Now the re-act side of our application doesn't really know exactly what to show.
The user needs some amount of data to show the right stuff.
Right.
Like if we want to show the user a list of surveys or campaigns that they've sent out the Riak side
of our application has to get this information from somewhere in our application.
We're going to use Mongo D-B to record and store all the different surveys and all the different emails
that we send out to people over time.
And so one of the chief problems inside of our application or one of the big problems that we're going
to learn how to solve is to communicate effectively all the data that we store inside of our Mongo D-B
database with our re-act application.
Now the reactor application that we're going to put together is never going to talk directly to the
Mongo divi database.
Instead we're going to put an express API between react and Mongar D-B this express API is going to
contain a bunch of logic a bunch of business logic to take incoming requests from the re-act application
pull some information out of our Mongo DB database and then send that information back to the Riak side
of our app.
So essentially you can imagine that a user visits e-mail the dot com inside the browser.
We send them the react application.
The re-act application boots up it asks the Express API for some data.
The Express API pulls some information out of the Mongo D-B database and then it sends that all back
to the re-act application where it is then used to to show some content on the screen or show some content
to the user.
Now the Express API and the re-act application are going to be communicating entirely through a TTP
requests or Ajax requests.
Every single one of these requests is going to contain some little amount of Jaison the Express API
and Mongo D-B on the other hand will be communicating through a little bit more internal system of communication
that we're not going to quite touch so much but we will discuss it a little bit over time.
OK.
So again just a very high level or view of how are applications going to be laid out and how these things
are going to be talking together.
Really at the end of the day what I want to communicate right now is that our re-act application will
not talk directly to the Mongo D-B database.
Instead there's going to be this express API sitting between the two.
So I think that's enough on kind of high level overview for right now.
Let's take a quick break.
When we come back we're going to start our project by generating a new Express application so we're
going to start with the express side and then kind of figure out where to go from there.
So I'll see you in the next section.