1 00:00:01,100 --> 00:00:03,370 Are back and services are now in a pretty good spot. 2 00:00:03,610 --> 00:00:07,150 We're going to start to move back over to the front end portion of our application. 3 00:00:07,420 --> 00:00:12,460 So specifically the next J.S. app in this video, I want to give you a quick reminder on what we have 4 00:00:12,460 --> 00:00:14,410 done inside the client app so far. 5 00:00:14,710 --> 00:00:18,110 Give you a quick reminder about a couple of important topics around next G.S.. 6 00:00:18,550 --> 00:00:21,530 I think it started working on our next couple of pages for this thing. 7 00:00:21,870 --> 00:00:22,780 So let's get to it. 8 00:00:23,620 --> 00:00:27,040 Inside my client directory, I'm going to find the index dot G.S. file. 9 00:00:27,880 --> 00:00:32,680 So this index dodgiest file currently serves as the landing page or our client application. 10 00:00:33,610 --> 00:00:37,210 The only thing we are really showing on this landing page right now is some information about whether 11 00:00:37,210 --> 00:00:40,450 or not the user is currently signed in on this landing page. 12 00:00:40,480 --> 00:00:41,980 We also have some pages for handling. 13 00:00:42,040 --> 00:00:44,050 Sign in, sign out and sign up. 14 00:00:44,470 --> 00:00:44,920 That is it. 15 00:00:44,950 --> 00:00:46,480 That's all we have inside of you right now. 16 00:00:47,050 --> 00:00:51,100 So with that in mind, let's go take a look at a couple of mockups and just start to picture exactly 17 00:00:51,100 --> 00:00:52,000 what we need to build. 18 00:00:54,930 --> 00:00:55,080 OK. 19 00:00:55,310 --> 00:00:56,420 So we've got our sign up done. 20 00:00:56,810 --> 00:00:57,680 We've got sign in. 21 00:00:58,140 --> 00:01:01,370 So now going to start to move on to some of these other screens along the list. 22 00:01:02,150 --> 00:01:06,200 The next big screen that we're going to work on is going to be a list of tickets for sale. 23 00:01:06,770 --> 00:01:09,410 We're going to make this into the landing page of our app. 24 00:01:09,830 --> 00:01:13,460 So in other words, we're going to go to the index dot G.S. file inside of our pages directory. 25 00:01:13,700 --> 00:01:17,780 And we're going to very quickly start to replace a lot of the code inside of here, rather than just 26 00:01:17,780 --> 00:01:19,820 telling the user whether or not they are signed in. 27 00:01:20,120 --> 00:01:23,390 We're going to instead fetch a list of tickets and show them to the user. 28 00:01:24,730 --> 00:01:28,570 Whenever a user clicks on one of these tickets, we're then going to take them to a page that will give 29 00:01:28,570 --> 00:01:30,880 them more info about that specific ticket. 30 00:01:32,190 --> 00:01:34,590 I use Churchville to click this purchase button right here. 31 00:01:35,130 --> 00:01:39,210 And when a user clicks on that purchase button, remember what that is going to do on our back end server. 32 00:01:39,520 --> 00:01:45,270 That is going to create a new order which expresses the intent for a user to purchase a ticket, kind 33 00:01:45,270 --> 00:01:46,980 of temporally reserves the ticket. 34 00:01:48,110 --> 00:01:52,040 After user clicks on that purchase button, we're going to take them to another screen where we will 35 00:01:52,040 --> 00:01:54,090 display some details about the order. 36 00:01:54,140 --> 00:01:55,070 That was just created. 37 00:01:55,880 --> 00:01:58,430 So we'll probably say, hey, you're trying to purchase this ticket. 38 00:01:58,730 --> 00:02:03,320 We'll show a little countdown timer right here to show how much longer the user has to actually enter 39 00:02:03,320 --> 00:02:04,430 their payment information. 40 00:02:04,990 --> 00:02:08,060 Maybe also the price, even though I didn't really reflected on this mockup. 41 00:02:09,210 --> 00:02:13,190 If a user clicks on the pay button, we're then going to open up a little window. 42 00:02:14,910 --> 00:02:16,300 Tied to striped G.S.. 43 00:02:16,890 --> 00:02:18,210 So this little dialogue right here. 44 00:02:18,270 --> 00:02:19,590 We do not have to build that. 45 00:02:19,620 --> 00:02:24,050 We're going to instead use a third party library that is going to create this window for us and handled 46 00:02:24,050 --> 00:02:26,430 the entire strike payment process automatically. 47 00:02:27,780 --> 00:02:30,350 That is kind of the primary flow that a user is going to go through. 48 00:02:30,390 --> 00:02:31,590 They're going to see the list of tickets. 49 00:02:31,780 --> 00:02:34,230 They're going to look at a specific ticket click purchase. 50 00:02:34,260 --> 00:02:38,250 That's going to create the order book pay and then enter their payment information. 51 00:02:38,670 --> 00:02:42,390 And after that, in theory, the ticket at that point belongs to this user. 52 00:02:43,720 --> 00:02:47,890 Naturally, before we implement any of those screens, we probably also need the ability to create a 53 00:02:47,890 --> 00:02:48,310 ticket. 54 00:02:48,820 --> 00:02:51,190 So we'll make a very simple form like the one you see right here. 55 00:02:51,220 --> 00:02:53,740 That user can use to make a brand new ticket. 56 00:02:55,580 --> 00:02:55,730 OK. 57 00:02:55,870 --> 00:02:58,210 That's on the different components are going to have to create very quickly. 58 00:02:58,930 --> 00:03:02,950 Now, one of the big things that we're going to start to realize as we go back into the world of next 59 00:03:02,950 --> 00:03:08,800 J.S., is that handling routing for some these different screens is going to be just a little bit challenging. 60 00:03:09,490 --> 00:03:13,240 So I'm gonna show you just one more quick diagram that's going to help kind of summarize some of the 61 00:03:13,240 --> 00:03:15,550 different pages that we're gonna create in the next couple of videos. 62 00:03:16,000 --> 00:03:18,670 And exactly, it's in the different routes they're gonna write out for each them. 63 00:03:20,760 --> 00:03:20,940 OK. 64 00:03:21,010 --> 00:03:25,240 So in this diagram right here, we've got the different routes that a user is going to feel to visit 65 00:03:25,240 --> 00:03:25,740 inside ramp. 66 00:03:26,650 --> 00:03:32,740 We've got the corresponding file inside of our pages directory that we need to create to remember to 67 00:03:32,740 --> 00:03:36,310 create a new route or essentially new page inside of our next G.S. application. 68 00:03:36,520 --> 00:03:39,610 We're going to create different files inside that pages directory right here. 69 00:03:40,180 --> 00:03:44,770 And the structure of this directory and the names of the files inside there is going to dictate or determine 70 00:03:44,830 --> 00:03:46,840 the different routes that a user can access. 71 00:03:48,680 --> 00:03:51,640 And then finally, on the right hand side is the goal of each of these different routes. 72 00:03:52,420 --> 00:03:55,240 Now, we've already handled these first three right here. 73 00:03:55,530 --> 00:03:56,560 Those are pretty much done. 74 00:03:56,620 --> 00:03:58,330 We don't really have to worry about them too much. 75 00:04:00,730 --> 00:04:05,470 So we're going to first begin probably back on our list of tickets or alternatively, maybe we will 76 00:04:05,470 --> 00:04:07,840 do the ticket creation form one or the other. 77 00:04:08,950 --> 00:04:12,790 So we are going to make sure that inside that index, not just file, we show the list of all tickets. 78 00:04:13,420 --> 00:04:18,760 We're also going to make sure that at a root of tickets slash new, which means that we need a tickets 79 00:04:18,760 --> 00:04:20,260 folder inside the pages directory. 80 00:04:20,670 --> 00:04:25,480 And inside there, we need a new DOT G.S. file, that is we're going to create our forum to make a brand 81 00:04:25,480 --> 00:04:25,930 new ticket. 82 00:04:28,150 --> 00:04:32,050 Now, the other thing I want to point out here is that we have two different pages where we are showing 83 00:04:32,050 --> 00:04:38,230 details about a very particular ticket in a very particular order that would be really this age right 84 00:04:38,230 --> 00:04:38,530 here. 85 00:04:38,560 --> 00:04:43,780 This is some details about a particular ticket and this is some details about a very particular order. 86 00:04:44,650 --> 00:04:49,240 Usually it whenever we are looking at a very particular record, we're going to reflect that records 87 00:04:49,510 --> 00:04:50,890 I.D. inside of the wall. 88 00:04:51,380 --> 00:04:56,650 So inside of this, you're all we might have a path is something like orders slash and then the idea 89 00:04:56,680 --> 00:04:58,090 of the order that we looking for. 90 00:04:59,220 --> 00:05:00,180 Same thing for tickets. 91 00:05:00,270 --> 00:05:03,480 We might have something like tickets slash and then the idea of the ticket. 92 00:05:03,760 --> 00:05:04,480 We want to look at. 93 00:05:05,450 --> 00:05:11,620 So handling ideas in next to us is just a little bit complicated because of how we have to name the 94 00:05:11,620 --> 00:05:16,750 file inside our pages directory, as we've seen, the names of these different files dictate the routes 95 00:05:16,750 --> 00:05:17,560 that are available. 96 00:05:17,790 --> 00:05:22,810 But in this case, we want to have kind of a parameter, a query parameter, some wild card that is 97 00:05:22,810 --> 00:05:23,540 a part of the URL. 98 00:05:24,600 --> 00:05:29,850 To create some wild card in the URL, when we make the corresponding page file, we're going to wrap 99 00:05:30,330 --> 00:05:33,090 that portion of the URL with square brackets. 100 00:05:33,610 --> 00:05:36,990 The square brackets means this is a wild card of sorts. 101 00:05:38,380 --> 00:05:43,090 Then inside the square brackets, we're going to put in the name of that query parameter and then we'll 102 00:05:43,090 --> 00:05:48,490 be able to receive that query parameter inside of our component and understand exactly inside the component 103 00:05:48,760 --> 00:05:50,980 which ticket we need to display details about. 104 00:05:52,440 --> 00:05:56,880 So if we take a look at this route syntax right here, which probably makes sense if you're coming from 105 00:05:56,880 --> 00:06:01,680 the world of Express J.S. to reflect that with a file inside of our pages directory, we would write 106 00:06:01,680 --> 00:06:06,810 out a file with the name of tickets, slash square brackets, ticket I.D. Then we could get access to 107 00:06:06,810 --> 00:06:09,030 that ticket I.D. inside of our page component. 108 00:06:11,070 --> 00:06:11,230 OK. 109 00:06:11,350 --> 00:06:12,280 That's a lot of details. 110 00:06:12,700 --> 00:06:15,310 Let's take a quick pause right here and continue in just a moment.