1 00:00:01,110 --> 00:00:02,820 ‫Welcome back. 2 00:00:02,820 --> 00:00:07,320 ‫So this time around, in this most real-world project 3 00:00:07,320 --> 00:00:10,710 ‫of the course, let's really start the project 4 00:00:10,710 --> 00:00:14,700 ‫by first learning about the business and the requirements, 5 00:00:14,700 --> 00:00:18,333 ‫and then planning out the entire application. 6 00:00:19,740 --> 00:00:22,470 ‫So we're gonna build an application 7 00:00:22,470 --> 00:00:26,970 ‫for a small boutique hotel called The Wild Oasis, 8 00:00:26,970 --> 00:00:31,170 ‫which features eight luxurious wooden cabins. 9 00:00:31,170 --> 00:00:35,820 ‫So what they need us to do is to build a custom application 10 00:00:35,820 --> 00:00:39,240 ‫where they can manage everything about their hotel, 11 00:00:39,240 --> 00:00:43,680 ‫so the bookings, the cabins, and also the guests. 12 00:00:43,680 --> 00:00:46,800 ‫And so this is basically an internal application 13 00:00:46,800 --> 00:00:50,010 ‫that this business will use inside the hotel 14 00:00:50,010 --> 00:00:53,670 ‫to check in the guests as they arrive. 15 00:00:53,670 --> 00:00:57,990 ‫So right now this business is still just building out 16 00:00:57,990 --> 00:01:02,580 ‫this hotel and so right now they have absolutely nothing 17 00:01:02,580 --> 00:01:06,870 ‫so they will also need us to build the API for us, 18 00:01:06,870 --> 00:01:09,270 ‫so we will need to model all the data, 19 00:01:09,270 --> 00:01:11,130 ‫we will have to store it somewhere, 20 00:01:11,130 --> 00:01:13,320 ‫and then basically the application 21 00:01:13,320 --> 00:01:16,830 ‫that we're gonna build will function as a back office 22 00:01:16,830 --> 00:01:20,700 ‫to manage the data that lives in that API. 23 00:01:20,700 --> 00:01:23,520 ‫And later on, they will then also want 24 00:01:23,520 --> 00:01:26,730 ‫a customer-facing website where customers 25 00:01:26,730 --> 00:01:31,470 ‫will then be able to basically book stays on their own 26 00:01:31,470 --> 00:01:34,740 ‫and so this will then work with the same API, 27 00:01:34,740 --> 00:01:37,770 ‫but again, we might do this one later, 28 00:01:37,770 --> 00:01:40,980 ‫but for now, this project that we're building now 29 00:01:40,980 --> 00:01:44,700 ‫is this internal application where the hotel 30 00:01:44,700 --> 00:01:47,370 ‫is basically managed everything about it, 31 00:01:47,370 --> 00:01:51,000 ‫so again, bookings, cabins, and guests. 32 00:01:51,000 --> 00:01:54,990 ‫So this is gonna be a really, really cool application 33 00:01:54,990 --> 00:01:59,550 ‫and so let's start planning it now very quickly. 34 00:01:59,550 --> 00:02:02,670 ‫And so just to review what we learned earlier, 35 00:02:02,670 --> 00:02:05,520 ‫this is how we can plan a React, 36 00:02:05,520 --> 00:02:08,670 ‫or really any other web application. 37 00:02:08,670 --> 00:02:12,000 ‫So first we need to gather the business requirements 38 00:02:12,000 --> 00:02:14,490 ‫and features that we should implement, 39 00:02:14,490 --> 00:02:16,740 ‫then we divide the application 40 00:02:16,740 --> 00:02:21,300 ‫into multiple pages and basically think about the UI 41 00:02:21,300 --> 00:02:24,420 ‫and how we divide everything into components, 42 00:02:24,420 --> 00:02:28,170 ‫and then after that, we divide the application 43 00:02:28,170 --> 00:02:31,260 ‫also into different feature categories, 44 00:02:31,260 --> 00:02:35,370 ‫so all the features from the requirements can be gathered 45 00:02:35,370 --> 00:02:37,830 ‫into a few feature categories 46 00:02:37,830 --> 00:02:42,830 ‫so just like we did before in the fast pizza application. 47 00:02:43,791 --> 00:02:44,700 ‫And then finally, 48 00:02:44,700 --> 00:02:48,330 ‫we also need to decide on our technology stack, 49 00:02:48,330 --> 00:02:51,990 ‫so basically we need to decide what libraries we want to use 50 00:02:51,990 --> 00:02:54,483 ‫in order to implement the project. 51 00:02:55,680 --> 00:02:59,220 ‫Now, okay, and so let's start with step number one, 52 00:02:59,220 --> 00:03:02,160 ‫which are the project requirements. 53 00:03:02,160 --> 00:03:06,630 ‫So this time around, we have a lot of requirements, 54 00:03:06,630 --> 00:03:09,990 ‫as you can see here, and so I want you to pause the video 55 00:03:09,990 --> 00:03:13,890 ‫right now and read this entire list on your own 56 00:03:13,890 --> 00:03:17,460 ‫so I will not waste like five minutes here to read this 57 00:03:17,460 --> 00:03:21,780 ‫to you because, well, you can just read it yourself, 58 00:03:21,780 --> 00:03:23,790 ‫so please pause the video right now 59 00:03:23,790 --> 00:03:27,120 ‫and then I meet you back here in a second. 60 00:03:27,120 --> 00:03:30,180 ‫Okay, so did you read this? 61 00:03:30,180 --> 00:03:31,830 ‫Well, I hope you did 62 00:03:31,830 --> 00:03:35,760 ‫because we will now immediately group these requirements 63 00:03:35,760 --> 00:03:38,070 ‫into some feature categories 64 00:03:38,070 --> 00:03:40,440 ‫so let's do that, not on the next slide, 65 00:03:40,440 --> 00:03:44,370 ‫but right here where we actually have the requirements. 66 00:03:44,370 --> 00:03:47,640 ‫So first up, we will have some authentication 67 00:03:47,640 --> 00:03:48,990 ‫in this application. 68 00:03:48,990 --> 00:03:53,040 ‫So these three first points are basically about logins 69 00:03:53,040 --> 00:03:55,290 ‫and about creating user accounts 70 00:03:55,290 --> 00:03:59,850 ‫and so that's all under the umbrella of authentication. 71 00:03:59,850 --> 00:04:03,090 ‫The next step we have the cabins features, 72 00:04:03,090 --> 00:04:07,380 ‫we also have bookings, and then more details. 73 00:04:07,380 --> 00:04:10,860 ‫Here we also have checking ins and outs, 74 00:04:10,860 --> 00:04:13,590 ‫so basically the users of the application, 75 00:04:13,590 --> 00:04:15,690 ‫which are the hotel employees, 76 00:04:15,690 --> 00:04:19,350 ‫will be able to check guests in and out 77 00:04:19,350 --> 00:04:23,250 ‫as they arrive at the hotel or on the day that they leave 78 00:04:23,250 --> 00:04:27,090 ‫and so that can be a different feature group. 79 00:04:27,090 --> 00:04:31,500 ‫Just note that all of this is of course highly subjective 80 00:04:31,500 --> 00:04:35,160 ‫so we might, for example, also group the bookings together 81 00:04:35,160 --> 00:04:38,220 ‫with the check in and checkout feature, 82 00:04:38,220 --> 00:04:42,420 ‫but I thought it might be better to have them separate here, 83 00:04:42,420 --> 00:04:46,320 ‫and in any case, this is just a quick overview here, 84 00:04:46,320 --> 00:04:48,810 ‫so as we implement each of these features 85 00:04:48,810 --> 00:04:51,300 ‫we will then come back to this list. 86 00:04:51,300 --> 00:04:56,130 ‫But now going on, next up we have this requirement here 87 00:04:56,130 --> 00:04:59,160 ‫which is about the guest features, 88 00:04:59,160 --> 00:05:02,400 ‫and then apparently we will also need to build 89 00:05:02,400 --> 00:05:06,270 ‫a huge dashboard, so here we will have all kinds 90 00:05:06,270 --> 00:05:09,930 ‫of statistics and of charts and so this one 91 00:05:09,930 --> 00:05:12,870 ‫is actually going to be a lot of fun to build 92 00:05:12,870 --> 00:05:17,430 ‫so this will give the application a real, real-world touch 93 00:05:17,430 --> 00:05:19,470 ‫so it's gonna be really cool. 94 00:05:19,470 --> 00:05:20,370 ‫And then finally, 95 00:05:20,370 --> 00:05:24,420 ‫we also need to allow the users to set some settings 96 00:05:24,420 --> 00:05:27,123 ‫and so that's yet another feature group. 97 00:05:27,990 --> 00:05:30,690 ‫All right, and so now let's move on 98 00:05:30,690 --> 00:05:34,383 ‫and group these feature groups into some pages. 99 00:05:35,310 --> 00:05:38,100 ‫So here are these feature categories. 100 00:05:38,100 --> 00:05:41,040 ‫So all the seven that we just identified, 101 00:05:41,040 --> 00:05:44,760 ‫and again, from these we can kind of easily derive 102 00:05:44,760 --> 00:05:47,340 ‫the pages that we are going to need. 103 00:05:47,340 --> 00:05:49,680 ‫And right off the bat, we can see here 104 00:05:49,680 --> 00:05:52,890 ‫that this application is a lot bigger 105 00:05:52,890 --> 00:05:54,840 ‫than the one that we had before 106 00:05:54,840 --> 00:05:56,790 ‫so we had so many requirements 107 00:05:56,790 --> 00:05:59,670 ‫and here we have so many feature categories, 108 00:05:59,670 --> 00:06:02,460 ‫which means that probably we will also need 109 00:06:02,460 --> 00:06:04,500 ‫a lot of different pages, 110 00:06:04,500 --> 00:06:07,830 ‫starting here with the dashboard page, 111 00:06:07,830 --> 00:06:11,850 ‫which will basically be the homepage of the application. 112 00:06:11,850 --> 00:06:14,190 ‫Then we will also need a bookings page, 113 00:06:14,190 --> 00:06:18,150 ‫which is where all the current bookings will be displayed, 114 00:06:18,150 --> 00:06:20,280 ‫and actually not just the current ones, 115 00:06:20,280 --> 00:06:23,373 ‫but also the past ones and the future ones. 116 00:06:24,570 --> 00:06:27,870 ‫Then we will have a page for displaying all the cabins, 117 00:06:27,870 --> 00:06:31,500 ‫which is where the users will then also be able to edit 118 00:06:31,500 --> 00:06:33,750 ‫and delete cabins. 119 00:06:33,750 --> 00:06:37,200 ‫Now, for the guests, we don't really need any page 120 00:06:37,200 --> 00:06:38,880 ‫because in the requirements, 121 00:06:38,880 --> 00:06:41,130 ‫they told us nothing about that 122 00:06:41,130 --> 00:06:44,640 ‫so they didn't tell us that we need a way to edit 123 00:06:44,640 --> 00:06:47,220 ‫or to delete guests, for example, 124 00:06:47,220 --> 00:06:50,220 ‫and so that means that we probably don't need to implement 125 00:06:50,220 --> 00:06:53,910 ‫a guest's page, while for the bookings and the cabins, 126 00:06:53,910 --> 00:06:55,890 ‫since there needs to be a way 127 00:06:55,890 --> 00:07:00,000 ‫of showing all of them and maybe deleting and editing, 128 00:07:00,000 --> 00:07:02,430 ‫then we need to do that somewhere 129 00:07:02,430 --> 00:07:04,383 ‫and so we need a page for those. 130 00:07:05,250 --> 00:07:09,450 ‫Now, what we also need a page for is to check users in, 131 00:07:09,450 --> 00:07:12,840 ‫actually, and so here we can use this check-in route 132 00:07:12,840 --> 00:07:17,610 ‫with the booking ID param, and then also a settings page, 133 00:07:17,610 --> 00:07:21,030 ‫which is where users, as the name says, 134 00:07:21,030 --> 00:07:24,120 ‫can define the settings, and finally, 135 00:07:24,120 --> 00:07:26,790 ‫we also need a signup page, 136 00:07:26,790 --> 00:07:29,730 ‫so a page where users can be signed up, 137 00:07:29,730 --> 00:07:33,840 ‫and then a login page and this login page 138 00:07:33,840 --> 00:07:37,650 ‫is probably going to be like our default homepage 139 00:07:37,650 --> 00:07:41,040 ‫in case that the user is not logged in. 140 00:07:41,040 --> 00:07:43,830 ‫Also notice how the user signup 141 00:07:43,830 --> 00:07:47,880 ‫is actually not going to happen on the page called signup, 142 00:07:47,880 --> 00:07:50,730 ‫but instead on a page called users 143 00:07:50,730 --> 00:07:53,910 ‫and the reason for that is that people 144 00:07:53,910 --> 00:07:57,150 ‫will basically not be allowed to simply sign up 145 00:07:57,150 --> 00:08:01,890 ‫to the application, instead, it will be inside of the app 146 00:08:01,890 --> 00:08:05,103 ‫where existing users can register new ones, 147 00:08:06,510 --> 00:08:08,760 ‫but of course, this will all make more sense 148 00:08:08,760 --> 00:08:11,130 ‫once we actually implement this. 149 00:08:11,130 --> 00:08:14,040 ‫And then finally, we also need a page where users 150 00:08:14,040 --> 00:08:19,040 ‫can update some account settings, so things like the name 151 00:08:19,170 --> 00:08:23,460 ‫or the avatar or also the passwords. 152 00:08:23,460 --> 00:08:26,760 ‫All right, and so these are, at least for now, 153 00:08:26,760 --> 00:08:30,000 ‫the eight pages that we are going to implement. 154 00:08:30,000 --> 00:08:34,170 ‫Just note that if you were to build this app on your own, 155 00:08:34,170 --> 00:08:37,110 ‫then you would probably not figure all of this out 156 00:08:37,110 --> 00:08:41,370 ‫right at the very beginning so you might do a part of this 157 00:08:41,370 --> 00:08:44,100 ‫in the beginning, but not all of it, 158 00:08:44,100 --> 00:08:47,010 ‫so things are never this linear, 159 00:08:47,010 --> 00:08:50,670 ‫but since this is kind of a linear video course, 160 00:08:50,670 --> 00:08:53,280 ‫we need to do this planning somewhere 161 00:08:53,280 --> 00:08:56,643 ‫and so we are doing it all here at the very beginning. 162 00:08:58,800 --> 00:09:01,450 ‫Also notice that the dashboard here 163 00:09:02,310 --> 00:09:04,590 ‫doesn't have an arrow pointing to it 164 00:09:04,590 --> 00:09:07,230 ‫and the reason for that is that the dashboard 165 00:09:07,230 --> 00:09:10,473 ‫combines multiple of the other features. 166 00:09:11,340 --> 00:09:15,870 ‫Great, so next up, we would typically discuss state, 167 00:09:15,870 --> 00:09:18,390 ‫but let's actually leave that for later 168 00:09:18,390 --> 00:09:23,390 ‫because most of our state will just be global, remote state. 169 00:09:23,400 --> 00:09:26,820 ‫And since we will also need to build the API, 170 00:09:26,820 --> 00:09:31,200 ‫we will discuss how we will store all this data that we need 171 00:09:31,200 --> 00:09:35,610 ‫for this application later when we build that API, 172 00:09:35,610 --> 00:09:38,310 ‫so we are going to use a really nice service 173 00:09:38,310 --> 00:09:40,200 ‫called Supabase for that 174 00:09:40,200 --> 00:09:44,940 ‫and so then we will talk about or state and/or data. 175 00:09:44,940 --> 00:09:47,760 ‫And so instead, let's immediately jump 176 00:09:47,760 --> 00:09:50,250 ‫into some tech decisions, 177 00:09:50,250 --> 00:09:55,200 ‫so discussing what kind of technology we will want to use. 178 00:09:55,200 --> 00:09:59,700 ‫So up until a few years ago, it was kind of a standard 179 00:09:59,700 --> 00:10:04,530 ‫that all React applications would simply be 100% rendered 180 00:10:04,530 --> 00:10:08,130 ‫on the client, which means that we would use React 181 00:10:08,130 --> 00:10:10,650 ‫to build single-page applications 182 00:10:10,650 --> 00:10:13,830 ‫like we have been doing all this time. 183 00:10:13,830 --> 00:10:16,500 ‫However, over the last few years, 184 00:10:16,500 --> 00:10:18,660 ‫things have been changing a bit 185 00:10:18,660 --> 00:10:21,960 ‫and the React team has been advocating more and more 186 00:10:21,960 --> 00:10:24,990 ‫for a move back to the server. 187 00:10:24,990 --> 00:10:28,080 ‫Now, I'm not gonna go really deep into this topic 188 00:10:28,080 --> 00:10:31,380 ‫at this point because we will discuss this deeply 189 00:10:31,380 --> 00:10:34,680 ‫in a section that it will add to the course later 190 00:10:34,680 --> 00:10:38,190 ‫which is going to be all about Next.js, 191 00:10:38,190 --> 00:10:41,760 ‫but for now, we will just talk briefly about this 192 00:10:41,760 --> 00:10:45,690 ‫because these days it's actually a very important 193 00:10:45,690 --> 00:10:49,860 ‫technology decision between using client-side rendering 194 00:10:49,860 --> 00:10:52,740 ‫with so-called Vanilla React, 195 00:10:52,740 --> 00:10:56,280 ‫so the way we have been doing it all this time, 196 00:10:56,280 --> 00:11:01,280 ‫or if we go with a React framework like Next.js or Remix 197 00:11:01,470 --> 00:11:05,820 ‫for server-side rendering and so let's just very briefly 198 00:11:05,820 --> 00:11:08,640 ‫go through some differences here. 199 00:11:08,640 --> 00:11:13,080 ‫So basically, client-side rendering with Vanilla React 200 00:11:13,080 --> 00:11:16,590 ‫is used to build single-page applications, 201 00:11:16,590 --> 00:11:18,360 ‫while with service-side rendering, 202 00:11:18,360 --> 00:11:21,930 ‫we typically build multi-page applications 203 00:11:21,930 --> 00:11:25,620 ‫and so the big difference is that single-page applications 204 00:11:25,620 --> 00:11:30,620 ‫are 100% rendered on the client so all the HTML 205 00:11:30,810 --> 00:11:35,220 ‫is basically generated right in the user's browsers. 206 00:11:35,220 --> 00:11:38,340 ‫The problem with this rendering on the client 207 00:11:38,340 --> 00:11:41,760 ‫is that it needs to be all done by JavaScript, 208 00:11:41,760 --> 00:11:45,300 ‫which means that this JavaScript needs to be downloaded 209 00:11:45,300 --> 00:11:48,180 ‫before the app can even start running, 210 00:11:48,180 --> 00:11:51,000 ‫which can be bad for the performance, 211 00:11:51,000 --> 00:11:52,620 ‫especially when the users 212 00:11:52,620 --> 00:11:56,160 ‫are using more of a low-end device, 213 00:11:56,160 --> 00:12:00,240 ‫and also if the user has a worse internet connection, 214 00:12:00,240 --> 00:12:03,750 ‫that can impact the performance as well 215 00:12:03,750 --> 00:12:06,150 ‫so here is where the main advantage 216 00:12:06,150 --> 00:12:08,430 ‫of server-side rendering lies 217 00:12:08,430 --> 00:12:12,270 ‫because with server-side rendering, the HTML, 218 00:12:12,270 --> 00:12:15,960 ‫or at least some of it, can be rendered on the server, 219 00:12:15,960 --> 00:12:19,620 ‫which means that this solution is a bit more performant 220 00:12:19,620 --> 00:12:22,800 ‫because a lot less JavaScript needs to be downloaded 221 00:12:22,800 --> 00:12:25,230 ‫to the user's devices. 222 00:12:25,230 --> 00:12:27,240 ‫Now, as I was saying initially, 223 00:12:27,240 --> 00:12:30,330 ‫the React team right now is advocating 224 00:12:30,330 --> 00:12:33,060 ‫more and more for this solution 225 00:12:33,060 --> 00:12:36,090 ‫so they are basically telling developers now 226 00:12:36,090 --> 00:12:37,680 ‫that server-side rendering 227 00:12:37,680 --> 00:12:41,220 ‫might be the way to go in the future. 228 00:12:41,220 --> 00:12:45,720 ‫However, this is not really true for all applications. 229 00:12:45,720 --> 00:12:48,720 ‫For example, one perfectly fine use case 230 00:12:48,720 --> 00:12:51,720 ‫for client-side rendering are applications 231 00:12:51,720 --> 00:12:55,350 ‫that are basically used internally as tools 232 00:12:55,350 --> 00:12:57,300 ‫inside some companies 233 00:12:57,300 --> 00:13:00,900 ‫so that are not downloaded by many users 234 00:13:00,900 --> 00:13:04,080 ‫so these are many times applications that are hidden 235 00:13:04,080 --> 00:13:06,960 ‫behind a login screen with no need 236 00:13:06,960 --> 00:13:09,450 ‫for search engine optimization 237 00:13:09,450 --> 00:13:13,980 ‫and so these are perfectly fine as single-page applications, 238 00:13:13,980 --> 00:13:17,760 ‫despite all the server-side rendering hype 239 00:13:17,760 --> 00:13:21,810 ‫and there are many applications in this category, 240 00:13:21,810 --> 00:13:25,470 ‫so many applications that are only used internally, 241 00:13:25,470 --> 00:13:29,010 ‫and so client-side rendering with Vanilla 242 00:13:29,010 --> 00:13:33,450 ‫or with plain React isn't going anywhere. 243 00:13:33,450 --> 00:13:37,740 ‫Now, again, there is a lot more to be said about this topic, 244 00:13:37,740 --> 00:13:39,270 ‫but this is all we need to know 245 00:13:39,270 --> 00:13:41,970 ‫at this point in order to decide 246 00:13:41,970 --> 00:13:45,810 ‫that we want to build a regular single-page application 247 00:13:45,810 --> 00:13:49,650 ‫with client-side rendering in this project, 248 00:13:49,650 --> 00:13:54,090 ‫again, because this application actually perfectly fits 249 00:13:54,090 --> 00:13:56,793 ‫this use case that I just explained. 250 00:13:58,560 --> 00:14:02,160 ‫And so now that we know that this is what we want to build, 251 00:14:02,160 --> 00:14:05,820 ‫it's time to assemble our tech stack again 252 00:14:05,820 --> 00:14:10,590 ‫and so we need to make our technology decisions right now, 253 00:14:10,590 --> 00:14:12,810 ‫and starting with routing, 254 00:14:12,810 --> 00:14:16,110 ‫here we are going to use again the gold standard 255 00:14:16,110 --> 00:14:20,073 ‫for single-page applications, which is React Router. 256 00:14:20,940 --> 00:14:23,940 ‫Next up for styling, in this project, 257 00:14:23,940 --> 00:14:26,730 ‫we are going to use a very popular library 258 00:14:26,730 --> 00:14:29,250 ‫called styled-components. 259 00:14:29,250 --> 00:14:33,330 ‫So this is a completely new way of writing styles 260 00:14:33,330 --> 00:14:37,140 ‫because we will do so right inside JavaScript, 261 00:14:37,140 --> 00:14:40,230 ‫so right inside or React components, 262 00:14:40,230 --> 00:14:45,230 ‫and this technology is used at IMDB, Spotify, Coinbase, 263 00:14:45,840 --> 00:14:50,130 ‫and many, many others and so it can't be a bad choice 264 00:14:50,130 --> 00:14:54,210 ‫and it's definitely a technology worth learning for you 265 00:14:54,210 --> 00:14:58,620 ‫and so that's why I included it in this project. 266 00:14:58,620 --> 00:15:01,950 ‫Next up, we need to talk about state management 267 00:15:01,950 --> 00:15:05,610 ‫and in particular about remote state management 268 00:15:05,610 --> 00:15:09,060 ‫because basically all the state in this application 269 00:15:09,060 --> 00:15:12,990 ‫will be remote state, as I was saying earlier. 270 00:15:12,990 --> 00:15:16,470 ‫So essentially, this application will implement 271 00:15:16,470 --> 00:15:20,100 ‫an easy-to-use interface to this remote data 272 00:15:20,100 --> 00:15:21,750 ‫that lives on the server 273 00:15:21,750 --> 00:15:26,010 ‫and so we will load and mutate that data a lot, 274 00:15:26,010 --> 00:15:29,400 ‫and so for that, we need a specialized library, 275 00:15:29,400 --> 00:15:32,700 ‫and that specialized library that we have talked about 276 00:15:32,700 --> 00:15:37,200 ‫many, many times before is React Query. 277 00:15:37,200 --> 00:15:40,830 ‫So in my opinion, this really is the best way 278 00:15:40,830 --> 00:15:45,830 ‫of managing remote state because it has many, many features 279 00:15:46,110 --> 00:15:49,170 ‫that work really easily out of the box. 280 00:15:49,170 --> 00:15:53,580 ‫So things like state caching, automatic re-fetching, 281 00:15:53,580 --> 00:15:58,580 ‫in many situations, pre-fetching for things like pagination, 282 00:15:58,710 --> 00:16:02,430 ‫offline support, and many, many more. 283 00:16:02,430 --> 00:16:03,840 ‫Now, as an alternative, 284 00:16:03,840 --> 00:16:08,840 ‫we could have used also SWR or Redux Toolkit Query, 285 00:16:09,150 --> 00:16:12,240 ‫which would've been quite interesting as well 286 00:16:12,240 --> 00:16:16,470 ‫and you could definitely learn that one after this project, 287 00:16:16,470 --> 00:16:20,880 ‫but since React Query seems to be by far the most popular 288 00:16:20,880 --> 00:16:24,450 ‫of these options, that's the one that we are going with 289 00:16:24,450 --> 00:16:28,110 ‫and it's also the one that I really like the most. 290 00:16:28,110 --> 00:16:30,960 ‫Now about UI state management, 291 00:16:30,960 --> 00:16:35,040 ‫since there is almost no UI state in this application, 292 00:16:35,040 --> 00:16:38,970 ‫we will just use the Context API for that 293 00:16:38,970 --> 00:16:43,020 ‫so we don't need to reach for Redux in this case. 294 00:16:43,020 --> 00:16:45,510 ‫Now, another library that will make our lives 295 00:16:45,510 --> 00:16:49,860 ‫a lot easier is a library for managing forms. 296 00:16:49,860 --> 00:16:53,820 ‫So there are gonna be lots of forms in this application 297 00:16:53,820 --> 00:16:57,000 ‫and so we can use a form management library 298 00:16:57,000 --> 00:16:59,280 ‫like React Hook Form 299 00:16:59,280 --> 00:17:02,640 ‫which will make many tasks a lot easier for us. 300 00:17:02,640 --> 00:17:06,000 ‫So for example, instead of having to manually create 301 00:17:06,000 --> 00:17:09,840 ‫state variables for each element in the form 302 00:17:09,840 --> 00:17:12,540 ‫and also manually handling errors, 303 00:17:12,540 --> 00:17:17,540 ‫we can just allow this library to take care of all of that. 304 00:17:18,150 --> 00:17:23,040 ‫And so these are the five main big tools that we will use 305 00:17:23,040 --> 00:17:25,263 ‫on the front-end application. 306 00:17:26,970 --> 00:17:30,540 ‫So these are all extremely popular libraries 307 00:17:30,540 --> 00:17:34,020 ‫and tools that many, many developers out there 308 00:17:34,020 --> 00:17:37,860 ‫use to build professional React applications 309 00:17:37,860 --> 00:17:41,100 ‫and so now you will learn how to do the same 310 00:17:41,100 --> 00:17:43,920 ‫and we will even use a few other tools 311 00:17:43,920 --> 00:17:48,920 ‫such as React Icons, React Hot Toast for notifications, 312 00:17:49,470 --> 00:17:54,470 ‫Recharts for displaying beautiful charts in RUI, 313 00:17:54,480 --> 00:17:57,900 ‫date-fns for date manipulation, 314 00:17:57,900 --> 00:18:00,900 ‫and finally, the Supabase library 315 00:18:00,900 --> 00:18:03,330 ‫as I already mentioned earlier 316 00:18:03,330 --> 00:18:07,080 ‫so this is where we will store all our remote state 317 00:18:07,080 --> 00:18:11,343 ‫and basically build an API, as you will see later. 318 00:18:13,290 --> 00:18:15,060 ‫So after all this talk, 319 00:18:15,060 --> 00:18:18,900 ‫it's now finally time to get our hands dirty 320 00:18:18,900 --> 00:18:20,700 ‫and so in the next lecture, 321 00:18:20,700 --> 00:18:23,490 ‫we will again set up our project 322 00:18:23,490 --> 00:18:25,833 ‫so that we can finally get started.