1 00:00:01,110 --> 00:00:04,590 ‫So as I just mentioned earlier this time around 2 00:00:04,590 --> 00:00:08,670 ‫we have no demo application, because we will pretend 3 00:00:08,670 --> 00:00:13,200 ‫that we are now building this project for a real client. 4 00:00:13,200 --> 00:00:16,980 ‫And so in this lecture I will show you how we can plan 5 00:00:16,980 --> 00:00:20,853 ‫a professional React application step by step. 6 00:00:22,920 --> 00:00:26,760 ‫But before we go do that let's introduce our new 7 00:00:26,760 --> 00:00:31,760 ‫fictional client, so do you remember this very first project 8 00:00:32,760 --> 00:00:36,780 ‫that we built at the very beginning of the course? 9 00:00:36,780 --> 00:00:40,620 ‫So it was simply this static page that displayed 10 00:00:40,620 --> 00:00:45,270 ‫the pizza menu of the Fast React Pizza Company 11 00:00:45,270 --> 00:00:50,270 ‫and so now this same business basically needs a simple way 12 00:00:50,580 --> 00:00:54,450 ‫of allowing their customers to order pizzas, 13 00:00:54,450 --> 00:00:58,113 ‫so that they can get them delivered to their homes. 14 00:00:59,503 --> 00:01:04,503 ‫And so this fictional business is now hiring us 15 00:01:05,490 --> 00:01:08,730 ‫to build their applications front end 16 00:01:08,730 --> 00:01:13,200 ‫and of course we are going to do that using React. 17 00:01:13,200 --> 00:01:17,940 ‫So for some reason they already have the backend API built 18 00:01:17,940 --> 00:01:22,350 ‫and so our only job will be to build the front end, 19 00:01:22,350 --> 00:01:26,400 ‫so the visible part of this application. 20 00:01:26,400 --> 00:01:30,840 ‫Now, building a complete application like this from scratch 21 00:01:30,840 --> 00:01:34,800 ‫is of course a bit intimidating and so let's learn 22 00:01:34,800 --> 00:01:38,433 ‫how we can break this process into multiple steps. 23 00:01:39,630 --> 00:01:43,200 ‫And let's actually start from what we learned earlier 24 00:01:43,200 --> 00:01:46,350 ‫in the Thinking in React lecture. 25 00:01:46,350 --> 00:01:49,320 ‫So back then we learned that we can build 26 00:01:49,320 --> 00:01:53,250 ‫a simple React project by breaking the desired 27 00:01:53,250 --> 00:01:55,770 ‫user interface into components, 28 00:01:55,770 --> 00:01:59,340 ‫then building a static version without state 29 00:01:59,340 --> 00:02:02,880 ‫in the beginning and then after that we think 30 00:02:02,880 --> 00:02:07,560 ‫about the state management plus the data flow. 31 00:02:07,560 --> 00:02:11,340 ‫So this works quite well for small applications 32 00:02:11,340 --> 00:02:16,340 ‫that only has like one page and only very little features, 33 00:02:17,160 --> 00:02:20,130 ‫but in a real world application like the one 34 00:02:20,130 --> 00:02:23,070 ‫that we're going to build next we actually need 35 00:02:23,070 --> 00:02:26,400 ‫a bit of a more complete process and so we need 36 00:02:26,400 --> 00:02:28,143 ‫to adapt this a little bit. 37 00:02:29,400 --> 00:02:34,200 ‫So let's see how we can do that, so when we build 38 00:02:34,200 --> 00:02:38,520 ‫a large and more real world application we need to start 39 00:02:38,520 --> 00:02:43,520 ‫by gathering the application requirements and the features 40 00:02:43,563 --> 00:02:46,560 ‫that the application needs and then based on those 41 00:02:46,560 --> 00:02:50,700 ‫we can divide our application into multiple pages, 42 00:02:50,700 --> 00:02:53,010 ‫so a bit like we did earlier with the 43 00:02:53,010 --> 00:02:55,800 ‫World Wise application. 44 00:02:55,800 --> 00:02:59,100 ‫Next up, we need to divide the application 45 00:02:59,100 --> 00:03:02,310 ‫and the application features into multiple 46 00:03:02,310 --> 00:03:05,970 ‫feature categories, so basically we need to place 47 00:03:05,970 --> 00:03:10,970 ‫all the features into a few categories, so that we can then 48 00:03:11,130 --> 00:03:13,830 ‫build the application around those 49 00:03:13,830 --> 00:03:18,390 ‫and so that we can organize or code any logical way. 50 00:03:18,390 --> 00:03:22,800 ‫And if all this sounds a bit confusing, then don't worry 51 00:03:22,800 --> 00:03:26,850 ‫because next up we will of course do all this in practice 52 00:03:26,850 --> 00:03:30,450 ‫with the application that we are currently building. 53 00:03:30,450 --> 00:03:34,560 ‫But anyway, finally, we will also need to decide 54 00:03:34,560 --> 00:03:38,400 ‫on which libraries we actually want to use. 55 00:03:38,400 --> 00:03:41,580 ‫So we call this the technology decisions 56 00:03:41,580 --> 00:03:44,640 ‫because this is basically where we decide 57 00:03:44,640 --> 00:03:49,110 ‫exactly what tech stack we are going to use to implement 58 00:03:49,110 --> 00:03:51,030 ‫our application. 59 00:03:51,030 --> 00:03:55,200 ‫Now you see that I left some empty spaces here in the slide 60 00:03:55,200 --> 00:03:58,560 ‫and that's because we can divide some of these points 61 00:03:58,560 --> 00:04:01,020 ‫into some sub points. 62 00:04:01,020 --> 00:04:04,620 ‫So here as we divide the application into pages 63 00:04:04,620 --> 00:04:09,030 ‫for each of the pages, we can think about the overall 64 00:04:09,030 --> 00:04:13,590 ‫entity page level user interface and so then comes the time 65 00:04:13,590 --> 00:04:16,980 ‫where we can break the desired user interface 66 00:04:16,980 --> 00:04:18,960 ‫into its components. 67 00:04:18,960 --> 00:04:21,780 ‫So just like we learned before in the 68 00:04:21,780 --> 00:04:26,520 ‫Thinking in React lecture, so this is where the steps 69 00:04:26,520 --> 00:04:30,720 ‫that we learned about earlier actually come into play. 70 00:04:30,720 --> 00:04:34,230 ‫So they are still very valid and very important 71 00:04:34,230 --> 00:04:37,080 ‫but we now basically do them on a page 72 00:04:37,080 --> 00:04:41,010 ‫and on a feature level and so here we actually have 73 00:04:41,010 --> 00:04:42,240 ‫the next one. 74 00:04:42,240 --> 00:04:46,650 ‫So here again, for each of the pages we can now design 75 00:04:46,650 --> 00:04:49,380 ‫and build a static version. 76 00:04:49,380 --> 00:04:52,937 ‫So if we want, so of course we don't have to do all this 77 00:04:52,937 --> 00:04:56,280 ‫but it can be a nice guideline for building 78 00:04:56,280 --> 00:04:57,870 ‫our applications. 79 00:04:57,870 --> 00:05:01,470 ‫Now, there is still one step missing from earlier. 80 00:05:01,470 --> 00:05:06,000 ‫So from that Thinking in React lecture which is to think 81 00:05:06,000 --> 00:05:10,590 ‫about state management and data flow and so that we do 82 00:05:10,590 --> 00:05:13,620 ‫for each of the feature categories. 83 00:05:13,620 --> 00:05:17,400 ‫So for each of these categories that we identified 84 00:05:17,400 --> 00:05:21,240 ‫we will now need to think about what data it needs 85 00:05:21,240 --> 00:05:25,290 ‫and where we can store that data and so that's basically 86 00:05:25,290 --> 00:05:28,920 ‫what state management is all about. 87 00:05:28,920 --> 00:05:33,330 ‫Now, all this is of course just a rough overview. 88 00:05:33,330 --> 00:05:37,440 ‫So in the real world, things are never this linear 89 00:05:37,440 --> 00:05:41,790 ‫but still I think that this is a very good overview 90 00:05:41,790 --> 00:05:44,790 ‫of the whole process that we need to go through. 91 00:05:44,790 --> 00:05:48,060 ‫So with this, at least you have a couple of guidelines 92 00:05:48,060 --> 00:05:52,080 ‫that you can use in your own projects in the future. 93 00:05:52,080 --> 00:05:55,140 ‫And with that being said, let's now quickly go 94 00:05:55,140 --> 00:05:58,800 ‫through these four steps here one by one and apply them 95 00:05:58,800 --> 00:06:02,340 ‫to the application that we are currently building 96 00:06:02,340 --> 00:06:05,160 ‫or that we actually want to start building 97 00:06:05,160 --> 00:06:08,700 ‫based on this planning and we are going to start 98 00:06:08,700 --> 00:06:11,223 ‫with the business requirements. 99 00:06:12,240 --> 00:06:15,840 ‫So basically with everything that the business expects 100 00:06:15,840 --> 00:06:18,480 ‫from this application. 101 00:06:18,480 --> 00:06:22,860 ‫So first off this should just be a very simple application 102 00:06:22,860 --> 00:06:27,392 ‫where users can order one or more pizzas from a menu, 103 00:06:27,392 --> 00:06:31,320 ‫so that's a high level overview of the application 104 00:06:31,320 --> 00:06:34,260 ‫that the business wants us to build. 105 00:06:34,260 --> 00:06:37,800 ‫And so whenever you need to work on some project 106 00:06:37,800 --> 00:06:41,340 ‫for someone, even if it's just for yourself 107 00:06:41,340 --> 00:06:44,883 ‫you need to start by gathering a list like this. 108 00:06:45,720 --> 00:06:50,130 ‫So next up this application does actually not require 109 00:06:50,130 --> 00:06:55,130 ‫any user accounts and so no login functionality, 110 00:06:56,100 --> 00:07:00,480 ‫so users simply input their names before they start using 111 00:07:00,480 --> 00:07:01,593 ‫the application. 112 00:07:02,790 --> 00:07:06,930 ‫Now the pizza menu can actually change from time to time 113 00:07:06,930 --> 00:07:11,520 ‫and so it should be loaded from an API that is already done. 114 00:07:11,520 --> 00:07:13,740 ‫So as I mentioned at the beginning, 115 00:07:13,740 --> 00:07:17,850 ‫for some reason the business already has their own API 116 00:07:17,850 --> 00:07:22,850 ‫and so we can just start using that to load the pizza menu. 117 00:07:23,100 --> 00:07:27,150 ‫Now remember that users can order multiple pizzas 118 00:07:27,150 --> 00:07:31,200 ‫from the menu and so therefore we need some sort of cart 119 00:07:31,200 --> 00:07:36,200 ‫where the users can place multiple pizzas before they order. 120 00:07:36,780 --> 00:07:40,110 ‫Now, since this app has no user accounts 121 00:07:40,110 --> 00:07:42,810 ‫all that the user needs to provide in order 122 00:07:42,810 --> 00:07:45,900 ‫to start an order is their name, 123 00:07:45,900 --> 00:07:48,480 ‫their phone number and their address, 124 00:07:48,480 --> 00:07:52,020 ‫so that pizzas can be correctly delivered and the user 125 00:07:52,020 --> 00:07:55,170 ‫can be reached in case there is some problem. 126 00:07:55,170 --> 00:07:59,880 ‫Now, if possible, the GPS location should also be provided 127 00:07:59,880 --> 00:08:03,510 ‫to make the delivery easier for the company. 128 00:08:03,510 --> 00:08:06,930 ‫Now, one important feature that the business requires 129 00:08:06,930 --> 00:08:11,730 ‫from us is that users should be able to mark their orders 130 00:08:11,730 --> 00:08:16,140 ‫as a priority order, and the cost of that will just be 131 00:08:16,140 --> 00:08:19,830 ‫20% on top of the cart price. 132 00:08:19,830 --> 00:08:23,940 ‫Now, in practical terms, these orders are actually made 133 00:08:23,940 --> 00:08:28,350 ‫by sending a post request with all the order data, 134 00:08:28,350 --> 00:08:30,690 ‫so that's the user data. 135 00:08:30,690 --> 00:08:33,870 ‫So the name, the phone number and the address 136 00:08:33,870 --> 00:08:37,470 ‫plus all the selected pizzas from the cart 137 00:08:37,470 --> 00:08:41,580 ‫and so all this data will be sent to the same API 138 00:08:41,580 --> 00:08:43,500 ‫that we already have. 139 00:08:43,500 --> 00:08:46,230 ‫Now, remember how we said that this is a 140 00:08:46,230 --> 00:08:50,340 ‫very simple application and so therefore all payments 141 00:08:50,340 --> 00:08:52,560 ‫are made on delivery. 142 00:08:52,560 --> 00:08:55,560 ‫So users will only pay in the moment 143 00:08:55,560 --> 00:08:58,830 ‫that they actually receive the pizzas at home 144 00:08:58,830 --> 00:09:02,340 ‫and therefore no payment processing is necessary 145 00:09:02,340 --> 00:09:05,580 ‫to implement in this application. 146 00:09:05,580 --> 00:09:09,270 ‫Now, once the user has placed a new order, 147 00:09:09,270 --> 00:09:14,040 ‫each new order will actually get a unique identification 148 00:09:14,040 --> 00:09:17,850 ‫that should be displayed somewhere in the user interface, 149 00:09:17,850 --> 00:09:21,870 ‫because then the user can later look up the status 150 00:09:21,870 --> 00:09:26,386 ‫of their order based on this ID and so this is again 151 00:09:26,386 --> 00:09:30,150 ‫necessary because there are no user accounts 152 00:09:30,150 --> 00:09:33,660 ‫in this application to keep it really simple. 153 00:09:33,660 --> 00:09:38,660 ‫And finally, users should also be able to mark their orders 154 00:09:38,730 --> 00:09:43,730 ‫as priority even after the order has already been placed. 155 00:09:44,160 --> 00:09:48,150 ‫Now, okay, so this is the list of requirements 156 00:09:48,150 --> 00:09:51,780 ‫debt or application will need to satisfy, 157 00:09:51,780 --> 00:09:55,560 ‫but of course this is all still a bit confusing, 158 00:09:55,560 --> 00:09:58,980 ‫so we don't really know how to build our application 159 00:09:58,980 --> 00:10:01,950 ‫just from this, right? 160 00:10:01,950 --> 00:10:04,560 ‫However, from these requirements, 161 00:10:04,560 --> 00:10:07,590 ‫we can now start to understand what features 162 00:10:07,590 --> 00:10:11,250 ‫we actually need to implement and so let's take a look 163 00:10:11,250 --> 00:10:13,980 ‫at that in the next slide. 164 00:10:13,980 --> 00:10:17,820 ‫So basically what we want to do now is to derive 165 00:10:17,820 --> 00:10:21,600 ‫the application's main feature categories from the list 166 00:10:21,600 --> 00:10:24,333 ‫of requirements that we just saw. 167 00:10:25,170 --> 00:10:29,100 ‫So first of all, remember how the user needs to input 168 00:10:29,100 --> 00:10:32,730 ‫their name in order to start using the application 169 00:10:32,730 --> 00:10:35,310 ‫and so one feature category is going to 170 00:10:35,310 --> 00:10:39,330 ‫be everything related to the user. 171 00:10:39,330 --> 00:10:43,560 ‫Another pretty obvious category is the menu, 172 00:10:43,560 --> 00:10:45,990 ‫so all the features that are related, 173 00:10:45,990 --> 00:10:49,380 ‫for example to loading and displaying the menu 174 00:10:49,380 --> 00:10:52,260 ‫will be part of this feature category, 175 00:10:52,260 --> 00:10:55,560 ‫because the menu is a pretty important part 176 00:10:55,560 --> 00:10:57,033 ‫of this application. 177 00:10:57,997 --> 00:11:00,420 ‫And another pretty important part that we have 178 00:11:00,420 --> 00:11:03,354 ‫of course also mentioned in the list of requirements 179 00:11:03,354 --> 00:11:05,700 ‫is the cart. 180 00:11:05,700 --> 00:11:08,727 ‫So this is where the user will be able to take one 181 00:11:08,727 --> 00:11:13,727 ‫or more items from the menu and add them to their cart 182 00:11:14,036 --> 00:11:19,036 ‫and also of course to update the quantities of each pizza. 183 00:11:19,410 --> 00:11:22,920 ‫And finally, one of the big feature categories 184 00:11:22,920 --> 00:11:26,880 ‫is going to be the order because many features 185 00:11:26,880 --> 00:11:30,990 ‫of the application are going to be related to this topic. 186 00:11:30,990 --> 00:11:34,350 ‫For example, placing a new order or looking up 187 00:11:34,350 --> 00:11:38,610 ‫an existing order based on the ID and of course, 188 00:11:38,610 --> 00:11:42,360 ‫in practice, once we start doing this it will all become 189 00:11:42,360 --> 00:11:44,190 ‫a lot easier. 190 00:11:44,190 --> 00:11:46,920 ‫But for now, what's important to understand 191 00:11:46,920 --> 00:11:49,197 ‫is that all the different features that we 192 00:11:49,197 --> 00:11:53,100 ‫are going to implement in the application can be placed 193 00:11:53,100 --> 00:11:58,100 ‫into one of these feature categories, so basically this is 194 00:11:58,560 --> 00:12:01,743 ‫what the entire application is going to be about. 195 00:12:02,859 --> 00:12:06,780 ‫So it will be about users, about a menu, about a cart, 196 00:12:06,780 --> 00:12:10,800 ‫and about orders and so this basically gives us 197 00:12:10,800 --> 00:12:15,800 ‫a high level overview of what the project is all about. 198 00:12:16,470 --> 00:12:19,350 ‫Now, from this list of requirements 199 00:12:19,350 --> 00:12:23,100 ‫and also especially from these feature categories, 200 00:12:23,100 --> 00:12:26,340 ‫we can already start to understand the pages 201 00:12:26,340 --> 00:12:29,160 ‫that we are going to need to implement. 202 00:12:29,160 --> 00:12:34,020 ‫So first off, we are probably going to need some homepage, 203 00:12:34,020 --> 00:12:38,370 ‫then we need a page for the pizza menu. 204 00:12:38,370 --> 00:12:41,880 ‫We will need a page to display the user's cart 205 00:12:41,880 --> 00:12:45,840 ‫and we will need a page to place a new order, 206 00:12:45,840 --> 00:12:50,580 ‫so here we could use this URL of order/new 207 00:12:50,580 --> 00:12:53,670 ‫or of course we could do some other thing as well. 208 00:12:53,670 --> 00:12:58,670 ‫So for example it could also be called simply /new order, 209 00:12:59,719 --> 00:13:02,280 ‫but this makes sense because in our next page 210 00:13:02,280 --> 00:13:06,750 ‫we will then have /order/ the order ID 211 00:13:06,750 --> 00:13:10,770 ‫and so this page will be to look up an order. 212 00:13:10,770 --> 00:13:14,760 ‫So these pages four and five then follow a similar 213 00:13:14,760 --> 00:13:18,480 ‫URL structure where they both start with /order 214 00:13:18,480 --> 00:13:21,460 ‫and then in one of them we can place a new order 215 00:13:22,647 --> 00:13:24,997 ‫and in the other one we can look up an existing 216 00:13:25,841 --> 00:13:28,953 ‫order by passing in the order ID as a param. 217 00:13:29,790 --> 00:13:32,760 ‫Now remember how in the list of requirements 218 00:13:32,760 --> 00:13:36,840 ‫we stated that the user needs to input their name 219 00:13:36,840 --> 00:13:39,690 ‫in order to start using the application 220 00:13:39,690 --> 00:13:43,650 ‫and so this is how we connect the user feature 221 00:13:43,650 --> 00:13:45,300 ‫with the page. 222 00:13:45,300 --> 00:13:48,660 ‫So in this case, the homepage because that's where 223 00:13:48,660 --> 00:13:52,830 ‫the user will input their name, then of course 224 00:13:52,830 --> 00:13:57,830 ‫the menu category is connected to the pizza menu page 225 00:13:57,900 --> 00:14:02,520 ‫and the same for the cart and for the order. 226 00:14:02,520 --> 00:14:05,730 ‫And so at this we can really see how the feature 227 00:14:05,730 --> 00:14:09,750 ‫categories help us to determine which pages 228 00:14:09,750 --> 00:14:11,940 ‫we need in the app. 229 00:14:11,940 --> 00:14:15,810 ‫So we need one page for the menu, one for the cart 230 00:14:15,810 --> 00:14:19,140 ‫and in this case two pages for the order, 231 00:14:19,140 --> 00:14:24,140 ‫one to place a new one and one to look up an existing order. 232 00:14:24,300 --> 00:14:27,540 ‫And again, this will all become a lot clearer 233 00:14:27,540 --> 00:14:31,413 ‫as we actually start building this project in practice, 234 00:14:32,500 --> 00:14:35,430 ‫but here we are just doing this long exercise 235 00:14:35,430 --> 00:14:39,630 ‫of trying to plan the project before we actually start 236 00:14:39,630 --> 00:14:42,169 ‫which is always a good idea. 237 00:14:42,169 --> 00:14:46,410 ‫And now moving on in this process let's talk about 238 00:14:46,410 --> 00:14:49,860 ‫state management and tech decisions 239 00:14:49,860 --> 00:14:53,610 ‫and let's start with state management by bringing back 240 00:14:53,610 --> 00:14:56,730 ‫or four feature categories. 241 00:14:56,730 --> 00:15:00,750 ‫Now, many times these feature categories actually map 242 00:15:00,750 --> 00:15:05,750 ‫really nice to different state slices or state domains 243 00:15:06,300 --> 00:15:10,500 ‫and notice how I'm borrowing the term of state slices 244 00:15:10,500 --> 00:15:14,640 ‫from Redux, 'cause I really like this term. 245 00:15:14,640 --> 00:15:18,750 ‫So basically we have our entire state and then one slice 246 00:15:18,750 --> 00:15:23,750 ‫of that state will be the user one slice, so one part 247 00:15:23,820 --> 00:15:27,540 ‫or one domain of the state will be the menu 248 00:15:27,540 --> 00:15:31,080 ‫one will be the cart and one will be the order, 249 00:15:31,080 --> 00:15:34,200 ‫because all of these different features will of course 250 00:15:34,200 --> 00:15:39,200 ‫require some data, so some state in order to work. 251 00:15:39,750 --> 00:15:42,960 ‫Now the way in which we actually manage each 252 00:15:42,960 --> 00:15:47,700 ‫of these state slices will depend on what type of state 253 00:15:47,700 --> 00:15:52,700 ‫each of them actually is and so let's classify each of them. 254 00:15:53,550 --> 00:15:58,550 ‫So the first one is going to be simply global UI state, 255 00:15:58,590 --> 00:16:02,070 ‫so here we don't need any accounts and so therefore 256 00:16:02,070 --> 00:16:05,640 ‫this data will simply stay in the application 257 00:16:05,640 --> 00:16:09,300 ‫and needs to be accessible to many different components 258 00:16:09,300 --> 00:16:13,860 ‫in the tree and again, we will see this later in practice. 259 00:16:13,860 --> 00:16:17,910 ‫This is just so that we can take our technology decisions 260 00:16:17,910 --> 00:16:21,060 ‫based on what kinds of state we have, 261 00:16:21,060 --> 00:16:23,700 ‫so what types of state. 262 00:16:23,700 --> 00:16:28,110 ‫But anyway, next up the menu is going to be global 263 00:16:28,110 --> 00:16:31,650 ‫remote state because remember that the menu 264 00:16:31,650 --> 00:16:34,743 ‫is actually gonna be fetched from an API. 265 00:16:35,760 --> 00:16:40,350 ‫Next up, again, since this is a very simple application 266 00:16:40,350 --> 00:16:45,350 ‫the cart will simply be global UI state, just like the user. 267 00:16:45,810 --> 00:16:50,220 ‫So this data will also simply be stored in the application 268 00:16:50,220 --> 00:16:54,240 ‫and not in some kind of remote database, 269 00:16:54,240 --> 00:16:57,750 ‫so there is no API in this case. 270 00:16:57,750 --> 00:17:02,290 ‫And finally, the order will again be global remote state 271 00:17:03,348 --> 00:17:06,660 ‫because this one of course needs to be submitted to an API 272 00:17:06,660 --> 00:17:09,570 ‫and also fetched from an API. 273 00:17:09,570 --> 00:17:14,520 ‫So essentially the menu and the orders are remote state 274 00:17:14,520 --> 00:17:18,930 ‫because they live on a server while the user and the cart 275 00:17:18,930 --> 00:17:22,320 ‫are simply stored in the application. 276 00:17:22,320 --> 00:17:26,250 ‫And again, like I just said earlier many times 277 00:17:26,250 --> 00:17:29,130 ‫you will only take these decisions while you are 278 00:17:29,130 --> 00:17:32,310 ‫already building the application and so it's not 279 00:17:32,310 --> 00:17:35,343 ‫always going to be this linear process, 280 00:17:36,330 --> 00:17:39,570 ‫but here we wanted to do this because based on this 281 00:17:39,570 --> 00:17:42,960 ‫we are now going to take our tech decisions. 282 00:17:42,960 --> 00:17:46,020 ‫So we are going to select our technology stack 283 00:17:46,020 --> 00:17:49,860 ‫to build this application and so let's start actually 284 00:17:49,860 --> 00:17:51,600 ‫with routing. 285 00:17:51,600 --> 00:17:54,930 ‫So for routing, we are going to use the standard 286 00:17:54,930 --> 00:17:59,930 ‫for React single page applications, which is React Router. 287 00:18:00,480 --> 00:18:03,420 ‫Next up, we need to take a decision regarding 288 00:18:03,420 --> 00:18:06,960 ‫to styling the application and so this is where 289 00:18:06,960 --> 00:18:09,963 ‫the controversial part is going to start, 290 00:18:10,909 --> 00:18:15,120 ‫because here we actually want to use Tailwind CSS. 291 00:18:15,120 --> 00:18:19,590 ‫So Tailwind is a very trendy way of writing CSS 292 00:18:19,590 --> 00:18:23,130 ‫that's becoming really, really popular and so many people 293 00:18:23,130 --> 00:18:27,240 ‫want to learn that and so that's why we are going to go 294 00:18:27,240 --> 00:18:30,390 ‫with this technology for this application. 295 00:18:30,390 --> 00:18:33,870 ‫Next up, let's talk about state management 296 00:18:33,870 --> 00:18:37,890 ‫and remember how we have two different types of state 297 00:18:37,890 --> 00:18:42,540 ‫so UI state and remote state and so we are going to need 298 00:18:42,540 --> 00:18:46,230 ‫two different ways of managing that state. 299 00:18:46,230 --> 00:18:50,460 ‫Starting with remote state management, we will actually use 300 00:18:50,460 --> 00:18:55,460 ‫the new data fetching capabilities of React Router. 301 00:18:55,680 --> 00:19:00,570 ‫So since version 6.4, React Router is now able 302 00:19:00,570 --> 00:19:04,920 ‫to fetch data right inside of React Router 303 00:19:04,920 --> 00:19:08,520 ‫and so this is something that is really worth exploring 304 00:19:08,520 --> 00:19:12,480 ‫because this allows us to implement a so-called render 305 00:19:12,480 --> 00:19:16,920 ‫as you fetch approach instead of the fetch on render 306 00:19:16,920 --> 00:19:19,890 ‫that we have been using up until this point. 307 00:19:19,890 --> 00:19:23,580 ‫And of course, we will learn what each of these strategies 308 00:19:23,580 --> 00:19:27,900 ‫actually means once we start using React Router in practice 309 00:19:27,900 --> 00:19:29,460 ‫for this. 310 00:19:29,460 --> 00:19:33,180 ‫Just notice that this is not really state management 311 00:19:33,180 --> 00:19:37,500 ‫in a classical sense because it doesn't really persist state 312 00:19:37,500 --> 00:19:41,820 ‫in a place that is easy to access from everywhere. 313 00:19:41,820 --> 00:19:45,450 ‫But again, it's still worth exploring this new 314 00:19:45,450 --> 00:19:49,500 ‫and modern option because it allows us to do so many things 315 00:19:49,500 --> 00:19:53,790 ‫using just one library and it's also quite a nice way 316 00:19:53,790 --> 00:19:56,463 ‫of working as you will see soon. 317 00:19:57,330 --> 00:20:01,950 ‫Now finally, we also need to talk about UI state management 318 00:20:01,950 --> 00:20:05,970 ‫and so for that, we will bring back Redux. 319 00:20:05,970 --> 00:20:10,020 ‫So this state that we're going to manage is a bit complex 320 00:20:10,020 --> 00:20:13,110 ‫and so let's bring back Redux, because it has 321 00:20:13,110 --> 00:20:16,470 ‫many advantages for this kind of state. 322 00:20:16,470 --> 00:20:20,850 ‫And also in this case we actually want to practice Redux 323 00:20:20,850 --> 00:20:24,660 ‫a bit more in a real world setting and so that's why 324 00:20:24,660 --> 00:20:28,500 ‫I decided to include Redux in the tech stack 325 00:20:28,500 --> 00:20:30,540 ‫of this application. 326 00:20:30,540 --> 00:20:34,350 ‫So just notice that I'm not advocating for this 327 00:20:34,350 --> 00:20:37,680 ‫particular technology stack, so of course 328 00:20:37,680 --> 00:20:41,340 ‫we could have chosen completely different libraries here 329 00:20:41,340 --> 00:20:44,970 ‫but this is just some technology that we want to learn more 330 00:20:44,970 --> 00:20:47,550 ‫and to explore in this project. 331 00:20:47,550 --> 00:20:50,940 ‫But for example, for remote state management 332 00:20:50,940 --> 00:20:55,940 ‫I really highly prefer React Query instead of React Router, 333 00:20:56,670 --> 00:20:59,820 ‫but again here we just want to explore 334 00:20:59,820 --> 00:21:03,300 ‫these different technologies and so this is going to be 335 00:21:03,300 --> 00:21:05,190 ‫our tech stack. 336 00:21:05,190 --> 00:21:09,030 ‫And so this really has been enough talking now 337 00:21:09,030 --> 00:21:11,454 ‫and so let's finally go back to code 338 00:21:11,454 --> 00:21:15,540 ‫and actually start building our application based on 339 00:21:15,540 --> 00:21:19,320 ‫all the planning that we just did in this long lecture, 340 00:21:19,320 --> 00:21:21,513 ‫so I hope to see you there very soon.