1 00:00:01,170 --> 00:00:03,120 -: We've now got our backend server put together 2 00:00:03,120 --> 00:00:03,953 and in this section, 3 00:00:03,953 --> 00:00:06,180 we're gonna start working on the front end application 4 00:00:06,180 --> 00:00:08,580 to interact with our backend server. 5 00:00:08,580 --> 00:00:09,540 We're gonna first get started 6 00:00:09,540 --> 00:00:12,120 by generating a new client project 7 00:00:12,120 --> 00:00:15,660 inside of our auth directory, right next to our server. 8 00:00:15,660 --> 00:00:18,060 So, I'm outside of the server directory. 9 00:00:18,060 --> 00:00:20,010 As a sibling to that folder, 10 00:00:20,010 --> 00:00:21,690 I'm gonna make a new React project 11 00:00:21,690 --> 00:00:23,730 by using create react app. 12 00:00:23,730 --> 00:00:26,550 So I'm gonna do create react app 13 00:00:26,550 --> 00:00:28,890 and I'm gonna call this project Simply Client, 14 00:00:28,890 --> 00:00:30,000 'cause that's what it really is. 15 00:00:30,000 --> 00:00:32,880 It's the client to the server that we just created. 16 00:00:32,880 --> 00:00:34,770 So, while that installs, let's talk a little bit 17 00:00:34,770 --> 00:00:36,750 about the application that we're going to be building 18 00:00:36,750 --> 00:00:38,133 inside this new project. 19 00:00:39,360 --> 00:00:41,610 All right. So, a couple mockups to go through here. 20 00:00:41,610 --> 00:00:44,250 We're going to essentially build out the entire login, 21 00:00:44,250 --> 00:00:47,190 logout, and signup processes. 22 00:00:47,190 --> 00:00:49,020 When a user first comes to our application 23 00:00:49,020 --> 00:00:51,270 which we hosted at Local Host 3000, 24 00:00:51,270 --> 00:00:53,400 we're gonna show them a simple welcome screen 25 00:00:53,400 --> 00:00:55,680 like the one you see right here. 26 00:00:55,680 --> 00:00:57,690 The welcome screen in this application 27 00:00:57,690 --> 00:00:59,400 and all the screens that we're gonna put together, 28 00:00:59,400 --> 00:01:01,680 are gonna be pretty straightforward in styling. 29 00:01:01,680 --> 00:01:03,750 Again, the entire focus of this application 30 00:01:03,750 --> 00:01:05,310 is all about functionality, 31 00:01:05,310 --> 00:01:06,750 we're not gonna spend too much time 32 00:01:06,750 --> 00:01:08,760 on the CSS side of things at all, 33 00:01:08,760 --> 00:01:10,920 really just focused on React and Redux, 34 00:01:10,920 --> 00:01:13,290 'cause we do have a lot of code to write 35 00:01:13,290 --> 00:01:15,450 to put this thing together. 36 00:01:15,450 --> 00:01:17,010 And once a user comes to this page, 37 00:01:17,010 --> 00:01:19,950 that can click on one of the three buttons up at the top. 38 00:01:19,950 --> 00:01:21,480 The Redux auth button right here 39 00:01:21,480 --> 00:01:24,933 will take user back to the homepage of local host 3000. 40 00:01:25,920 --> 00:01:28,833 They should also have the ability to sign in or sign up. 41 00:01:30,330 --> 00:01:31,680 If a user tries to sign up, 42 00:01:31,680 --> 00:01:32,820 It'll show them a form 43 00:01:32,820 --> 00:01:35,310 that they can use to sign up to our application. 44 00:01:35,310 --> 00:01:37,560 The minimum number of credentials to sign up 45 00:01:37,560 --> 00:01:40,860 via our backend API is the email and password. 46 00:01:40,860 --> 00:01:42,120 So, we're gonna present a form 47 00:01:42,120 --> 00:01:44,640 where a user can enter both those, click submit, 48 00:01:44,640 --> 00:01:46,590 and sign up to the application. 49 00:01:46,590 --> 00:01:48,660 Essentially, we're gonna take the email and password 50 00:01:48,660 --> 00:01:50,160 and send it to that backend route 51 00:01:50,160 --> 00:01:53,133 that we already put together to create a new user account. 52 00:01:54,630 --> 00:01:57,060 The signed in form is gonna look very similar, 53 00:01:57,060 --> 00:01:59,280 pretty much identical for that matter. 54 00:01:59,280 --> 00:02:01,710 So, this is the sign-in form right here. 55 00:02:01,710 --> 00:02:04,320 The minimum set of credentials to sign into our application 56 00:02:04,320 --> 00:02:06,360 is also just the email and password. 57 00:02:06,360 --> 00:02:07,380 So, we're going to record 58 00:02:07,380 --> 00:02:08,910 both those on this form right here, 59 00:02:08,910 --> 00:02:11,580 send them to the back end and exchange those credentials 60 00:02:11,580 --> 00:02:13,833 for a JWT token. 61 00:02:15,570 --> 00:02:18,420 If a user tries to sign out after they've logged in, 62 00:02:18,420 --> 00:02:21,690 they can go to the slash sign out route. 63 00:02:21,690 --> 00:02:23,190 When they sign out the application, 64 00:02:23,190 --> 00:02:25,267 we're gonna put a simple message on the screen that says, 65 00:02:25,267 --> 00:02:27,720 "Hey, okay, peace. See you later." 66 00:02:27,720 --> 00:02:29,640 And presumably we'll probably have to do something 67 00:02:29,640 --> 00:02:31,710 with our token that we've gotten from the server 68 00:02:31,710 --> 00:02:34,983 to really indicate that yes, the user is truly signed out. 69 00:02:36,270 --> 00:02:39,390 And then finally, one of the more important pages 70 00:02:39,390 --> 00:02:42,330 is going to be a feature page of sorts. 71 00:02:42,330 --> 00:02:44,880 So, once a user has signed into our application, 72 00:02:44,880 --> 00:02:48,150 they're going to get access to this feature page. 73 00:02:48,150 --> 00:02:51,960 The feature page is really just a text message on the screen 74 00:02:51,960 --> 00:02:53,610 that a user should only be able to see 75 00:02:53,610 --> 00:02:56,160 if they are signed into the application. 76 00:02:56,160 --> 00:02:58,530 The secret message that the user's gonna fetch right here 77 00:02:58,530 --> 00:03:00,810 is going to be retrieved from our backend server 78 00:03:00,810 --> 00:03:02,280 and we're going to want to make sure 79 00:03:02,280 --> 00:03:05,370 that a user should not be able to access this secret message 80 00:03:05,370 --> 00:03:06,570 from the backend 81 00:03:06,570 --> 00:03:09,450 unless they are logged into our application. 82 00:03:09,450 --> 00:03:11,940 So, that's pretty much it on the front end. 83 00:03:11,940 --> 00:03:13,200 Let's take a pause right now. 84 00:03:13,200 --> 00:03:14,700 We're gonna come back the next section 85 00:03:14,700 --> 00:03:18,300 and we will install a couple more packages into our project 86 00:03:18,300 --> 00:03:21,030 to handle navigation and forms and whatnot. 87 00:03:21,030 --> 00:03:23,010 And then we'll get started with our implementation 88 00:03:23,010 --> 00:03:24,453 in the next section.