1 00:00:00,720 --> 00:00:04,440 Let's continue on with some of the set up on the front end of our application. 2 00:00:04,560 --> 00:00:09,270 Now before we just kind of dive into all the client's stuff that we have going on I want to make sure 3 00:00:09,270 --> 00:00:13,500 that we're on the same page as to what we're really working on and what we're trying to accomplish right 4 00:00:13,500 --> 00:00:13,950 now. 5 00:00:14,190 --> 00:00:19,800 As a reminder this entire course is all about building exactly one application and so it can be very 6 00:00:19,830 --> 00:00:24,180 easy to kind of get lost in the thick of things and have a tough time understanding what we're working 7 00:00:24,180 --> 00:00:25,250 on any given time. 8 00:00:25,380 --> 00:00:30,050 So I always want to make sure that it's very clear what we're trying to accomplish. 9 00:00:30,060 --> 00:00:36,120 So let's take a look at a quick diagram now and this diagram you'll see both green blocks green boxes 10 00:00:36,150 --> 00:00:41,190 and blue boxes everything in the green block box is something that is going to be occurring on the back 11 00:00:41,190 --> 00:00:44,160 and everything in a blue box is the front it. 12 00:00:44,160 --> 00:00:48,690 So at this point we've gone through our server setup we've really conquered our authentication flow 13 00:00:48,720 --> 00:00:51,800 and we've covered a tremendous number of topics around that. 14 00:00:51,930 --> 00:00:55,530 We're now going to pivot over to doing some of our client side setup. 15 00:00:55,650 --> 00:01:00,010 We're going to ensure integrate or kind of setup authentication on the client. 16 00:01:00,270 --> 00:01:05,460 And when I say authentication the client I'm really talking about having the ability inside of our application 17 00:01:05,460 --> 00:01:11,010 to decide whether or not our user is authenticated at all after we take care of that. 18 00:01:11,190 --> 00:01:17,310 Well then moved back to the server will take care of some surveys around or see some API is around creating 19 00:01:17,310 --> 00:01:18,630 surveys and whatnot. 20 00:01:18,870 --> 00:01:22,140 And then we will add equivalent logic to the front end as well. 21 00:01:22,500 --> 00:01:28,260 Now whenever you're working on a full stack application I highly highly recommend that you try to make 22 00:01:28,260 --> 00:01:32,700 sure that you are always working on either the back end or the front end. 23 00:01:32,730 --> 00:01:38,970 At any given time if you start to juggle both and both of them at the same time like very actively work 24 00:01:38,970 --> 00:01:45,180 on the back end and the friend at the same time it is a very easy way to end up with some spaghetti 25 00:01:45,180 --> 00:01:47,200 code inside of your application. 26 00:01:47,220 --> 00:01:53,940 In general your life will be easier if you try to segment out each individual task and say this is either 27 00:01:53,940 --> 00:01:59,100 something on the back end or this is something on the front end complete it on its respective side and 28 00:01:59,100 --> 00:02:03,740 then go implement the equivalent functionality on the opposite side. 29 00:02:03,760 --> 00:02:09,240 So always good to make sure you kind of do at least a little bit of design ahead of time. 30 00:02:09,810 --> 00:02:10,290 OK. 31 00:02:10,440 --> 00:02:11,660 So with that in mind. 32 00:02:11,940 --> 00:02:12,730 Let's get to it. 33 00:02:12,750 --> 00:02:17,670 Inside this section we're going to start talking about the client set up and some of the different technologies 34 00:02:17,670 --> 00:02:19,690 we're going to need on the front. 35 00:02:19,710 --> 00:02:23,820 Now you might be thinking Stephen we've already done client setup we've been doing this like endlessly 36 00:02:23,910 --> 00:02:27,860 like we did all this proxy stuff all kind of whatnot and you know what. 37 00:02:27,870 --> 00:02:33,420 Yes we did but we still have not done anything around kind of getting our re-act application set up. 38 00:02:33,420 --> 00:02:38,100 We haven't done anything around redux we haven't done anything around re-act router and so that's the 39 00:02:38,100 --> 00:02:39,180 setup I'm talking about. 40 00:02:39,180 --> 00:02:45,420 I want to make sure that we have a fully featured re-act redux re-act router front end before we start 41 00:02:45,420 --> 00:02:49,070 to dive in and start to add any type of logic to it or anything like that. 42 00:02:49,200 --> 00:02:50,030 OK. 43 00:02:50,400 --> 00:02:55,950 So with that in mind I want to do just a very quick review of some of our mockups. 44 00:02:56,010 --> 00:03:01,380 I've taken some of the mockups and added in some possible different components that we might make over 45 00:03:01,380 --> 00:03:02,700 time. 46 00:03:02,700 --> 00:03:08,100 So on this screen right here we've got our original kind of log in Landing's screen of sorts. 47 00:03:08,100 --> 00:03:12,360 A user should see the screen when they come to the root route of our application. 48 00:03:12,630 --> 00:03:18,540 So on the screen I kind of imagine having like a head or component at the very top and having a landing 49 00:03:18,540 --> 00:03:22,830 component as well that will show some sort of marketing text to the user. 50 00:03:22,830 --> 00:03:27,300 Now we're not going to spend a lot of time on really developing this landing component into something 51 00:03:27,300 --> 00:03:30,880 that has like a bunch of pictures and a bunch of marketing text. 52 00:03:30,990 --> 00:03:36,090 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 53 00:03:36,360 --> 00:03:41,640 hey if you want to turn this into a very serious project you should come back and flesh out this landing 54 00:03:41,640 --> 00:03:42,180 component. 55 00:03:42,180 --> 00:03:48,000 So again I'm going to kind of leave that marketing stylings CSSA design side over to you if you want 56 00:03:48,000 --> 00:03:49,440 to do it. 57 00:03:49,470 --> 00:03:51,780 So that's our route route. 58 00:03:52,020 --> 00:03:58,530 Now once the user signs in they might go to a route of something like email a dot com slash surveys 59 00:03:59,180 --> 00:04:03,810 the user will still see the head or phone at the top and then maybe we'll have some other things on 60 00:04:03,810 --> 00:04:04,070 here. 61 00:04:04,080 --> 00:04:09,720 Some other components like the dashboard component maybe a survey list that shows the user a list of 62 00:04:09,720 --> 00:04:15,720 all the different surveys maybe a surveillance item that represents in each individual survey that's 63 00:04:15,720 --> 00:04:17,060 been sent out. 64 00:04:17,190 --> 00:04:22,410 And then finally we go on to the form that a user can use to create a new a new survey inside of our 65 00:04:22,410 --> 00:04:23,510 application. 66 00:04:23,640 --> 00:04:27,830 The user should probably see this form right here if they go to a route or something like email the 67 00:04:27,840 --> 00:04:30,810 dot com slash surveys slash new. 68 00:04:30,840 --> 00:04:33,800 So if they go there hey show them the form. 69 00:04:34,110 --> 00:04:34,510 OK. 70 00:04:34,560 --> 00:04:39,510 So just very quick review on some of the different screens and some of the different components that 71 00:04:39,510 --> 00:04:41,070 will have inside of here. 72 00:04:41,100 --> 00:04:47,580 Now as we look at this I am immediately thinking to myself OK we definitely need to make use of re-act 73 00:04:47,850 --> 00:04:50,820 without a doubt because say that's what this is all about. 74 00:04:50,850 --> 00:04:54,750 I'm seeing that we have a couple of different routes inside the application. 75 00:04:54,780 --> 00:05:00,820 So like when a user is that the dot com slash which is our route route we want to show a set of components 76 00:05:01,360 --> 00:05:05,740 and then when a user goes to a different route we're going to show a different set of components. 77 00:05:06,130 --> 00:05:11,530 And so as they start to look at this different kind of like routing stuff inside if you're I am immediately 78 00:05:11,530 --> 00:05:15,690 starting to think about making use of re-act router inside of our application. 79 00:05:15,910 --> 00:05:20,020 So I'm thinking that we'll use re-act router to handle navigation and sending users around to these 80 00:05:20,020 --> 00:05:23,420 different screens and showing different sets of components. 81 00:05:23,530 --> 00:05:30,490 And then finally I'm looking at the fact that we want to clearly load up some resources and kind of 82 00:05:30,550 --> 00:05:32,580 have a different list of records. 83 00:05:32,600 --> 00:05:38,020 You know we want to fetch data we want to kind of persist that data between navigating between different 84 00:05:38,020 --> 00:05:38,620 routes. 85 00:05:38,730 --> 00:05:44,750 And so I'm very quickly also thinking that we might want to use redux inside of our application as well. 86 00:05:44,750 --> 00:05:50,500 Now as a reminder when you signed up for this course I had said that yeah I'm really assuming that you 87 00:05:50,500 --> 00:05:52,470 have the basics of react. 88 00:05:52,480 --> 00:05:58,810 I'm also kind of assuming that you have an idea or at least a pretty you know you've at least looked 89 00:05:58,810 --> 00:06:02,550 at redux in the past and react router as well. 90 00:06:02,560 --> 00:06:08,050 Now if you haven't gone through redux and re-act router that's ok we will be talking about these things 91 00:06:08,050 --> 00:06:12,610 at a pretty low level and I'm going to give you a good refresher and make sure you understand how they 92 00:06:12,610 --> 00:06:13,300 work. 93 00:06:13,300 --> 00:06:18,430 But in general I'm kind of assuming that you know I don't have to go through absolute square one with 94 00:06:18,430 --> 00:06:19,460 any of these things. 95 00:06:19,660 --> 00:06:24,460 So if that doesn't sound like you if you are sitting there thinking I've never touched redux before 96 00:06:24,700 --> 00:06:30,000 and I've got no idea how it works whatsoever well maybe drop me a message. 97 00:06:30,010 --> 00:06:32,060 You know we'll figure something out. 98 00:06:32,200 --> 00:06:36,880 I've got a ton of other courses that you can always take to get a very quick refresher on redux and 99 00:06:36,880 --> 00:06:37,740 how it works. 100 00:06:37,780 --> 00:06:39,320 So we can figure something out. 101 00:06:39,400 --> 00:06:44,880 But again we're going to kind of you know move to this stuff somewhat quickly as opposed to covering 102 00:06:44,920 --> 00:06:51,190 all from scratch because the each one of these topics is very heavy duty you know redux reactor under 103 00:06:51,280 --> 00:06:52,170 very heavy duty. 104 00:06:52,180 --> 00:06:57,830 And we can easily spend two hours just talking about re-act router and how it's all set up. 105 00:06:57,850 --> 00:07:00,460 So with that in mind you know we've got some work cut out for us. 106 00:07:00,460 --> 00:07:03,070 We're going to go through the set up of react. 107 00:07:03,070 --> 00:07:06,880 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 108 00:07:06,880 --> 00:07:12,910 out this initial landing page right here and make sure that our users have the ability to kind of sign 109 00:07:12,910 --> 00:07:15,110 in or sign up to our application. 110 00:07:15,130 --> 00:07:20,620 So quick break next section we're going to start tackling the front end very quickly. 111 00:07:20,740 --> 00:07:22,770 So I'll see you in just a second.