1 00:00:00,690 --> 00:00:01,010 All right. 2 00:00:01,050 --> 00:00:02,460 So enough with the mock. 3 00:00:02,460 --> 00:00:07,460 Enough with talking about what our application is going to do it's time to actually talk about how we're 4 00:00:07,470 --> 00:00:11,780 going to build it how we're going to actually write some code to make all this stuff happen. 5 00:00:12,300 --> 00:00:17,160 Now to kick off this process I want to tell you a little bit about the tech stack that we're going to 6 00:00:17,160 --> 00:00:20,590 be using and how it's all going to be communicating together. 7 00:00:21,030 --> 00:00:26,310 This is going to be the first of many talks that we have about the overall architecture of our application 8 00:00:26,400 --> 00:00:31,210 or how all these different components and technologies are going to communicate. 9 00:00:31,350 --> 00:00:37,020 If you're here taking this course right now chances are you've tried to find resources previously to 10 00:00:37,020 --> 00:00:43,050 figure out exactly how to get react to work with express how to get react to work with Mongo D-B or 11 00:00:43,050 --> 00:00:44,530 express with Mongo d.b. 12 00:00:44,880 --> 00:00:51,270 I found over time that there is a lot of content specifically around like how to use react like a course 13 00:00:51,270 --> 00:00:56,750 on how to use react or a course on how to use redux or a course on how to use Express. 14 00:00:56,850 --> 00:01:01,830 But it seems like there's really not a lot of content out there that tells you how to use all these 15 00:01:01,830 --> 00:01:03,520 different technologies together. 16 00:01:03,630 --> 00:01:06,690 And so that's going to be the primary concern of course. 17 00:01:06,690 --> 00:01:13,530 I want you to walk away having a really good idea of how all of these different pieces work together 18 00:01:13,680 --> 00:01:19,830 to make a real application that's going to be just Goal number one for me in this course. 19 00:01:19,830 --> 00:01:25,380 So again it's going to be the first of many talks where we discuss the overall architecture of our application. 20 00:01:25,790 --> 00:01:26,090 Okay. 21 00:01:26,100 --> 00:01:29,450 So then mind let's get through this diagram really quick. 22 00:01:29,670 --> 00:01:35,940 Whenever a user navigates inside of their browser to our domain say email dot com. 23 00:01:35,980 --> 00:01:37,490 We're going to send them back in. 24 00:01:37,500 --> 00:01:43,360 H t m l document and some javascript files that contain a re-act application. 25 00:01:43,410 --> 00:01:49,020 So when the user goes to email dotcom we're going to send them some files that will get some content 26 00:01:49,020 --> 00:01:51,410 or some HVM to appear on the screen. 27 00:01:51,540 --> 00:01:54,910 That's going to be the re-act side of our application. 28 00:01:55,020 --> 00:01:59,570 Now the re-act side of our application doesn't really know exactly what to show. 29 00:01:59,610 --> 00:02:03,040 The user needs some amount of data to show the right stuff. 30 00:02:03,120 --> 00:02:03,700 Right. 31 00:02:03,750 --> 00:02:08,700 Like if we want to show the user a list of surveys or campaigns that they've sent out the Riak side 32 00:02:08,700 --> 00:02:13,740 of our application has to get this information from somewhere in our application. 33 00:02:13,890 --> 00:02:20,400 We're going to use Mongo D-B to record and store all the different surveys and all the different emails 34 00:02:20,400 --> 00:02:22,940 that we send out to people over time. 35 00:02:22,960 --> 00:02:27,300 And so one of the chief problems inside of our application or one of the big problems that we're going 36 00:02:27,300 --> 00:02:33,300 to learn how to solve is to communicate effectively all the data that we store inside of our Mongo D-B 37 00:02:33,300 --> 00:02:37,710 database with our re-act application. 38 00:02:37,710 --> 00:02:42,270 Now the reactor application that we're going to put together is never going to talk directly to the 39 00:02:42,270 --> 00:02:44,070 Mongo divi database. 40 00:02:44,070 --> 00:02:51,570 Instead we're going to put an express API between react and Mongar D-B this express API is going to 41 00:02:51,570 --> 00:02:58,110 contain a bunch of logic a bunch of business logic to take incoming requests from the re-act application 42 00:02:58,680 --> 00:03:04,380 pull some information out of our Mongo DB database and then send that information back to the Riak side 43 00:03:04,380 --> 00:03:05,290 of our app. 44 00:03:05,310 --> 00:03:10,340 So essentially you can imagine that a user visits e-mail the dot com inside the browser. 45 00:03:10,560 --> 00:03:12,520 We send them the react application. 46 00:03:12,690 --> 00:03:17,630 The re-act application boots up it asks the Express API for some data. 47 00:03:17,760 --> 00:03:23,070 The Express API pulls some information out of the Mongo D-B database and then it sends that all back 48 00:03:23,070 --> 00:03:28,560 to the re-act application where it is then used to to show some content on the screen or show some content 49 00:03:28,560 --> 00:03:30,780 to the user. 50 00:03:30,810 --> 00:03:36,970 Now the Express API and the re-act application are going to be communicating entirely through a TTP 51 00:03:36,990 --> 00:03:39,190 requests or Ajax requests. 52 00:03:39,450 --> 00:03:46,350 Every single one of these requests is going to contain some little amount of Jaison the Express API 53 00:03:46,380 --> 00:03:52,620 and Mongo D-B on the other hand will be communicating through a little bit more internal system of communication 54 00:03:52,620 --> 00:03:58,550 that we're not going to quite touch so much but we will discuss it a little bit over time. 55 00:03:58,550 --> 00:03:58,810 OK. 56 00:03:58,830 --> 00:04:03,870 So again just a very high level or view of how are applications going to be laid out and how these things 57 00:04:03,870 --> 00:04:05,170 are going to be talking together. 58 00:04:05,430 --> 00:04:10,110 Really at the end of the day what I want to communicate right now is that our re-act application will 59 00:04:10,110 --> 00:04:13,140 not talk directly to the Mongo D-B database. 60 00:04:13,140 --> 00:04:17,330 Instead there's going to be this express API sitting between the two. 61 00:04:18,090 --> 00:04:21,470 So I think that's enough on kind of high level overview for right now. 62 00:04:21,690 --> 00:04:22,860 Let's take a quick break. 63 00:04:22,860 --> 00:04:29,130 When we come back we're going to start our project by generating a new Express application so we're 64 00:04:29,130 --> 00:04:32,270 going to start with the express side and then kind of figure out where to go from there. 65 00:04:32,520 --> 00:04:34,070 So I'll see you in the next section.