1 00:00:02,231 --> 00:00:03,064 ‫Let's start by setting 2 00:00:03,064 --> 00:00:06,540 ‫up a professional file structure for our project 3 00:00:06,540 --> 00:00:10,323 ‫and place our starter files within that structure. 4 00:00:11,670 --> 00:00:13,560 ‫Now, there are many different ways 5 00:00:13,560 --> 00:00:17,970 ‫in which we can structure a professional React application 6 00:00:17,970 --> 00:00:22,260 ‫and every developer has a different opinion about this. 7 00:00:22,260 --> 00:00:25,770 ‫But what I like to do, and what I find works really 8 00:00:25,770 --> 00:00:30,770 ‫really well with big projects is a feature based structure. 9 00:00:31,230 --> 00:00:34,200 ‫So instead of creating one big folder 10 00:00:34,200 --> 00:00:36,540 ‫which contains all the components, 11 00:00:36,540 --> 00:00:41,540 ‫instead what I like to do is to create one features folder. 12 00:00:42,150 --> 00:00:44,070 ‫So right inside source 13 00:00:44,070 --> 00:00:48,150 ‫let's create a folder called features. 14 00:00:48,150 --> 00:00:51,180 ‫And so now this is where the feature groups 15 00:00:51,180 --> 00:00:54,045 ‫that we identified in the previous lecture come 16 00:00:54,045 --> 00:00:58,170 ‫into play because now we will have one folder 17 00:00:58,170 --> 00:01:02,193 ‫for each of these feature groups or feature categories. 18 00:01:03,450 --> 00:01:06,750 ‫So let's then create one folder for each of them. 19 00:01:06,750 --> 00:01:10,533 ‫And so here we will have the user. 20 00:01:13,290 --> 00:01:16,143 ‫We will have also the menu. 21 00:01:17,550 --> 00:01:20,700 ‫So all inside features. 22 00:01:20,700 --> 00:01:25,700 ‫So menu user, we have the cart and we also have the order. 23 00:01:30,000 --> 00:01:34,230 ‫And notice how our icon theme actually creates 24 00:01:34,230 --> 00:01:38,100 ‫these special icons for some common folder names. 25 00:01:38,100 --> 00:01:41,580 ‫So the cart has now here, this shopping cart icon, 26 00:01:41,580 --> 00:01:43,380 ‫but let's just ignore that. 27 00:01:43,380 --> 00:01:47,130 ‫But anyway, each of these folders here will contain 28 00:01:47,130 --> 00:01:50,730 ‫all the components, all the custom hooks, and really 29 00:01:50,730 --> 00:01:54,177 ‫all the JavaScript files that are necessary to make each 30 00:01:54,177 --> 00:01:56,340 ‫of the feature work. 31 00:01:56,340 --> 00:01:59,340 ‫So all of these files are going to be co-located 32 00:01:59,340 --> 00:02:02,010 ‫in the same place so that we don't have to jump 33 00:02:02,010 --> 00:02:06,120 ‫around all the time inside our folder structure. 34 00:02:06,120 --> 00:02:09,420 ‫However, there are also some components that are more 35 00:02:09,420 --> 00:02:12,806 ‫reusable or that don't really belong in any 36 00:02:12,806 --> 00:02:14,730 ‫of these features. 37 00:02:14,730 --> 00:02:19,500 ‫And so for that, let's create one folder called UI. 38 00:02:19,500 --> 00:02:23,520 ‫And so this will basically contain reusable UI components 39 00:02:23,520 --> 00:02:27,240 ‫such as buttons, inputs, and so on. 40 00:02:27,240 --> 00:02:30,270 ‫So these are many times just presentational 41 00:02:30,270 --> 00:02:32,763 ‫and don't contain any side effects. 42 00:02:34,590 --> 00:02:39,510 ‫Now next up, let's create the services folder. 43 00:02:39,510 --> 00:02:43,873 ‫And actually I created a file, not a folder, so 44 00:02:45,120 --> 00:02:47,193 ‫let's just do that again. 45 00:02:48,300 --> 00:02:51,990 ‫But in any case, this folder here is basically 46 00:02:51,990 --> 00:02:56,460 ‫for reusable code for interacting with an API. 47 00:02:56,460 --> 00:02:58,830 ‫So in this case with the pizza API that 48 00:02:58,830 --> 00:03:02,700 ‫we already have, okay. 49 00:03:02,700 --> 00:03:07,053 ‫Let's keep going and add one for utilities. 50 00:03:08,190 --> 00:03:10,050 ‫And so these are basically just some helper 51 00:03:10,050 --> 00:03:12,330 ‫functions that we can also reuse 52 00:03:12,330 --> 00:03:15,180 ‫in multiple places of the application. 53 00:03:15,180 --> 00:03:16,680 ‫So these are reusable 54 00:03:16,680 --> 00:03:19,860 ‫and more importantly, stateless helper functions 55 00:03:19,860 --> 00:03:23,190 ‫that don't create any side effects, for example 56 00:03:23,190 --> 00:03:26,790 ‫for date or for number manipulations. 57 00:03:26,790 --> 00:03:29,070 ‫And we could keep going here 58 00:03:29,070 --> 00:03:32,370 ‫and we would do that if we had a more complex app. 59 00:03:32,370 --> 00:03:36,300 ‫For example, we could create a reusable context folder 60 00:03:36,300 --> 00:03:38,520 ‫or a reusable hooks folder 61 00:03:38,520 --> 00:03:42,150 ‫or also a pages folder like we did before 62 00:03:42,150 --> 00:03:44,850 ‫in the Worldwise application. 63 00:03:44,850 --> 00:03:46,620 ‫However, here in this app 64 00:03:46,620 --> 00:03:49,230 ‫we will not have that special folder. 65 00:03:49,230 --> 00:03:53,220 ‫And instead also place these pages right here 66 00:03:53,220 --> 00:03:55,710 ‫in the feature folders so that again 67 00:03:55,710 --> 00:03:59,640 ‫we don't have to jump around so much in our file structure 68 00:03:59,640 --> 00:04:02,160 ‫and you will see why that is so helpful 69 00:04:02,160 --> 00:04:05,160 ‫once we really start building this out. 70 00:04:05,160 --> 00:04:09,780 ‫But anyway, let's now get our starter files as always 71 00:04:09,780 --> 00:04:14,780 ‫from here, and let's actually grab the entire folder 72 00:04:15,330 --> 00:04:20,330 ‫and place it right here also inside source. 73 00:04:21,690 --> 00:04:24,750 ‫And then from there we will sort these different files 74 00:04:24,750 --> 00:04:27,183 ‫into the folder in which they belong. 75 00:04:28,920 --> 00:04:30,690 ‫So here we have two files 76 00:04:30,690 --> 00:04:35,343 ‫which are called API geocoding and API restaurant. 77 00:04:36,510 --> 00:04:40,023 ‫And actually, let's take a look at this maybe in our code. 78 00:04:42,600 --> 00:04:44,820 ‫So here, for example, to interact 79 00:04:44,820 --> 00:04:47,490 ‫with the React Fast pizza API 80 00:04:47,490 --> 00:04:49,980 ‫I already have all of this code here. 81 00:04:49,980 --> 00:04:54,450 ‫And so these two are essentially services. 82 00:04:54,450 --> 00:04:56,670 ‫So reusable code for interacting 83 00:04:56,670 --> 00:05:00,240 ‫with these APIs that we will take a closer look 84 00:05:00,240 --> 00:05:03,363 ‫at these files once we start using them. 85 00:05:04,530 --> 00:05:07,050 ‫Then here we have some helper functions. 86 00:05:07,050 --> 00:05:09,630 ‫So as I was saying, for number 87 00:05:09,630 --> 00:05:13,290 ‫or currency manipulation to format some date 88 00:05:13,290 --> 00:05:16,020 ‫and some other calculations here. 89 00:05:16,020 --> 00:05:20,313 ‫And so let's place this one in the utilities folder. 90 00:05:21,420 --> 00:05:25,410 ‫So right here, then we have index dot CSS. 91 00:05:25,410 --> 00:05:28,383 ‫Let's place that right here in the source folder. 92 00:05:29,460 --> 00:05:32,430 ‫And since we are touching that file 93 00:05:32,430 --> 00:05:35,913 ‫let's also immediately include it here for now. 94 00:05:37,350 --> 00:05:40,143 ‫So just index dot CSS. 95 00:05:42,600 --> 00:05:46,470 ‫And then let's come back here to our starter files. 96 00:05:46,470 --> 00:05:48,660 ‫So we have these ones here called cart 97 00:05:48,660 --> 00:05:51,570 ‫cart item and cart overview. 98 00:05:51,570 --> 00:05:56,070 ‫And so these are very obviously all about the cart 99 00:05:56,070 --> 00:05:57,423 ‫so let's place them there. 100 00:05:58,560 --> 00:06:00,900 ‫Next we have create order. 101 00:06:00,900 --> 00:06:02,580 ‫So this is for the order. 102 00:06:02,580 --> 00:06:05,970 ‫This is of the user features. 103 00:06:05,970 --> 00:06:08,193 ‫This one is again about cart. 104 00:06:09,120 --> 00:06:12,630 ‫Then here we have menu and menu item. 105 00:06:12,630 --> 00:06:15,900 ‫And so these two are about the menu. 106 00:06:15,900 --> 00:06:20,610 ‫And here we have one for the order and order item. 107 00:06:20,610 --> 00:06:22,500 ‫And again, don't worry because we will 108 00:06:22,500 --> 00:06:26,313 ‫of course open up all of these files as we need them. 109 00:06:27,270 --> 00:06:32,270 ‫Now here finally we have the homepage and one error page. 110 00:06:32,790 --> 00:06:37,500 ‫And so let's place these two here in the reusable UI folder 111 00:06:37,500 --> 00:06:39,990 ‫because these two don't really belong 112 00:06:39,990 --> 00:06:43,083 ‫in any offer for feature categories. 113 00:06:44,550 --> 00:06:47,670 ‫Now, in the starter files that you actually received 114 00:06:47,670 --> 00:06:49,140 ‫from the GitHub repo 115 00:06:49,140 --> 00:06:52,950 ‫there is one more file that is not here in the video 116 00:06:52,950 --> 00:06:57,540 ‫and that is, as you can probably see, called user slice. 117 00:06:57,540 --> 00:06:59,580 ‫And so make sure to just drag 118 00:06:59,580 --> 00:07:04,203 ‫that user slices file right into the user feature folder. 119 00:07:05,786 --> 00:07:09,903 ‫And so with this, we have this folder empty can delete it 120 00:07:11,370 --> 00:07:13,410 ‫and now have all 121 00:07:13,410 --> 00:07:17,760 ‫of these files sorted within their feature category. 122 00:07:17,760 --> 00:07:20,043 ‫Now here, let's just check what's happening. 123 00:07:23,280 --> 00:07:27,960 ‫And it's just because I didn't import this file 124 00:07:27,960 --> 00:07:31,980 ‫here anywhere and the same for all of these. 125 00:07:31,980 --> 00:07:32,880 ‫So let's do that 126 00:07:32,880 --> 00:07:37,880 ‫with this trick where I delete a bit of this name 127 00:07:37,980 --> 00:07:42,903 ‫and MVS code will actually give me the path to the file. 128 00:07:44,730 --> 00:07:46,380 ‫So caulk minutes left. 129 00:07:46,380 --> 00:07:51,380 ‫And then let's do the same here for this one. 130 00:07:53,460 --> 00:07:55,503 ‫And also format date. 131 00:08:01,200 --> 00:08:04,530 ‫All right, so errors are gone here. 132 00:08:04,530 --> 00:08:07,563 ‫Let's do the same thing over here as well. 133 00:08:09,120 --> 00:08:10,620 ‫Then there we go. 134 00:08:10,620 --> 00:08:12,060 ‫So no more errors. 135 00:08:12,060 --> 00:08:12,960 ‫And so with this 136 00:08:12,960 --> 00:08:16,020 ‫we are ready to start building this application 137 00:08:16,020 --> 00:08:17,313 ‫in the next lecture.