1 00:00:01,140 --> 00:00:03,270 ‫So in order to figure out 2 00:00:03,270 --> 00:00:05,040 ‫which tables we should 3 00:00:05,040 --> 00:00:07,950 ‫actually create inside supabase, 4 00:00:07,950 --> 00:00:09,810 ‫so in our database, 5 00:00:09,810 --> 00:00:13,533 ‫we first need to think about our application state. 6 00:00:15,000 --> 00:00:18,210 ‫Now in a big application like this, 7 00:00:18,210 --> 00:00:20,850 ‫modeling state becomes a bit different 8 00:00:20,850 --> 00:00:23,820 ‫because we think more about state categories 9 00:00:23,820 --> 00:00:27,810 ‫or state slices on a much higher level. 10 00:00:27,810 --> 00:00:29,970 ‫So we're not gonna plan state 11 00:00:29,970 --> 00:00:31,590 ‫at a component level 12 00:00:31,590 --> 00:00:33,300 ‫but really on the page 13 00:00:33,300 --> 00:00:36,780 ‫and on the application feature level. 14 00:00:36,780 --> 00:00:40,410 ‫So let's bring back our feature categories here 15 00:00:40,410 --> 00:00:43,320 ‫and then from here we can basically figure out 16 00:00:43,320 --> 00:00:45,360 ‫what state we are going to need 17 00:00:45,360 --> 00:00:48,390 ‫in order to power all these features. 18 00:00:48,390 --> 00:00:50,580 ‫So in order to actually be able 19 00:00:50,580 --> 00:00:53,730 ‫to build out those features. 20 00:00:53,730 --> 00:00:55,890 ‫So for the bookings feature, 21 00:00:55,890 --> 00:00:59,760 ‫we are probably going to need some bookings state 22 00:00:59,760 --> 00:01:01,860 ‫and the same for the cabins, 23 00:01:01,860 --> 00:01:04,590 ‫and also the same for the guests. 24 00:01:04,590 --> 00:01:07,890 ‫So all of these are really different features 25 00:01:07,890 --> 00:01:11,640 ‫and so each of them will need to have their own state 26 00:01:11,640 --> 00:01:15,180 ‫in order to manage all this data. 27 00:01:15,180 --> 00:01:17,340 ‫Next up, we have the dashboard 28 00:01:17,340 --> 00:01:20,460 ‫and the check in and check out features, 29 00:01:20,460 --> 00:01:22,530 ‫which can both be powered 30 00:01:22,530 --> 00:01:25,650 ‫also by the bookings state. 31 00:01:25,650 --> 00:01:28,200 ‫So the dashboard will simply display 32 00:01:28,200 --> 00:01:31,560 ‫a few statistics about recent bookings 33 00:01:31,560 --> 00:01:34,710 ‫and the check in feature is basically 34 00:01:34,710 --> 00:01:36,840 ‫all about updating the booking 35 00:01:36,840 --> 00:01:40,950 ‫of a certain user from checked out to checked in 36 00:01:40,950 --> 00:01:44,760 ‫or also the other way around for check out. 37 00:01:44,760 --> 00:01:47,880 ‫So again, these two, all they're going to need 38 00:01:47,880 --> 00:01:50,310 ‫is just the booking state 39 00:01:50,310 --> 00:01:52,530 ‫or the bookings data. 40 00:01:52,530 --> 00:01:55,140 ‫Next up we have the application settings 41 00:01:55,140 --> 00:01:58,560 ‫which will require its own state slice. 42 00:01:58,560 --> 00:02:00,870 ‫And finally, for authentication, 43 00:02:00,870 --> 00:02:03,510 ‫we are going to need some users. 44 00:02:03,510 --> 00:02:05,640 ‫And so these will again be stored 45 00:02:05,640 --> 00:02:08,133 ‫inside their own remote state. 46 00:02:09,180 --> 00:02:10,890 ‫So as I was just saying, 47 00:02:10,890 --> 00:02:12,120 ‫all of this state, 48 00:02:12,120 --> 00:02:14,370 ‫so these five states 49 00:02:14,370 --> 00:02:16,590 ‫or state slices are going to 50 00:02:16,590 --> 00:02:18,990 ‫be global remote state, 51 00:02:18,990 --> 00:02:21,600 ‫and they will be stored within supabase 52 00:02:21,600 --> 00:02:25,920 ‫and managed on the front end using React Query. 53 00:02:25,920 --> 00:02:29,640 ‫And so basically for each of these state slices, 54 00:02:29,640 --> 00:02:34,380 ‫there will be one table in our supabase database. 55 00:02:34,380 --> 00:02:36,690 ‫So from now on, let's actually 56 00:02:36,690 --> 00:02:39,300 ‫no longer call this state slices, 57 00:02:39,300 --> 00:02:41,970 ‫but really call them data tables, 58 00:02:41,970 --> 00:02:45,780 ‫which is more in line with database design. 59 00:02:45,780 --> 00:02:47,400 ‫Now okay, so with this, 60 00:02:47,400 --> 00:02:49,950 ‫we now know exactly which tables 61 00:02:49,950 --> 00:02:51,540 ‫we need to create, 62 00:02:51,540 --> 00:02:54,570 ‫but there is one very special table here 63 00:02:54,570 --> 00:02:56,790 ‫which is the bookings table. 64 00:02:56,790 --> 00:02:58,830 ‫And so let's take a closer look 65 00:02:58,830 --> 00:03:01,593 ‫at how we are going to model that data. 66 00:03:03,450 --> 00:03:05,460 ‫So if we think about this, 67 00:03:05,460 --> 00:03:07,380 ‫a booking is essentially 68 00:03:07,380 --> 00:03:11,520 ‫a guest renting a cabin, right? 69 00:03:11,520 --> 00:03:13,890 ‫So a booking needs information 70 00:03:13,890 --> 00:03:17,940 ‫about what guest is booking which cabin, 71 00:03:17,940 --> 00:03:19,410 ‫or in other words, 72 00:03:19,410 --> 00:03:21,150 ‫creating a new booking 73 00:03:21,150 --> 00:03:22,830 ‫is all about connecting 74 00:03:22,830 --> 00:03:25,440 ‫a cabin with a guest. 75 00:03:25,440 --> 00:03:27,720 ‫And therefore, we somehow will need 76 00:03:27,720 --> 00:03:30,630 ‫to connect all of these tables. 77 00:03:30,630 --> 00:03:33,510 ‫Now in technical terms behind the scenes, 78 00:03:33,510 --> 00:03:37,110 ‫supabase uses a Postgres database 79 00:03:37,110 --> 00:03:41,700 ‫which is a relational database powered by SQL. 80 00:03:41,700 --> 00:03:44,340 ‫Therefore, in order to join these tables, 81 00:03:44,340 --> 00:03:47,760 ‫we use something called foreign keys. 82 00:03:47,760 --> 00:03:49,860 ‫Now, you don't need to know anything 83 00:03:49,860 --> 00:03:52,980 ‫about SQL or about these terms. 84 00:03:52,980 --> 00:03:54,630 ‫I'm just quickly explaining 85 00:03:54,630 --> 00:03:56,730 ‫how we can model this data 86 00:03:56,730 --> 00:03:59,310 ‫and how we should connect these tables. 87 00:03:59,310 --> 00:04:03,150 ‫But the technical terms really don't matter. 88 00:04:03,150 --> 00:04:05,790 ‫So as we were just saying earlier, 89 00:04:05,790 --> 00:04:09,330 ‫each booking basically needs to know which guest 90 00:04:09,330 --> 00:04:11,580 ‫is actually doing the booking. 91 00:04:11,580 --> 00:04:13,830 ‫And so therefore, what we're going to do 92 00:04:13,830 --> 00:04:16,380 ‫is to take the guest's ID 93 00:04:16,380 --> 00:04:19,080 ‫and store that inside a new field 94 00:04:19,080 --> 00:04:22,470 ‫inside the booking called guest ID. 95 00:04:22,470 --> 00:04:24,990 ‫And the same thing with the cabin. 96 00:04:24,990 --> 00:04:26,790 ‫So the booking needs to know 97 00:04:26,790 --> 00:04:29,670 ‫which cabin was actually booked. 98 00:04:29,670 --> 00:04:33,540 ‫And so again, we will store the cabin's ID 99 00:04:33,540 --> 00:04:38,400 ‫inside a special field of the booking called cabin ID. 100 00:04:38,400 --> 00:04:40,050 ‫And so these two, 101 00:04:40,050 --> 00:04:42,600 ‫so guest ID and cabin ID 102 00:04:42,600 --> 00:04:46,350 ‫are the foreign keys inside the booking. 103 00:04:46,350 --> 00:04:50,430 ‫Now okay, and so let's just quickly recap this. 104 00:04:50,430 --> 00:04:54,780 ‫So essentially, we connect a booking with a cabin 105 00:04:54,780 --> 00:04:57,360 ‫simply by storing the cabin's ID, 106 00:04:57,360 --> 00:05:00,330 ‫which is the primary key of the cabin, 107 00:05:00,330 --> 00:05:03,000 ‫inside the bookings cabin ID, 108 00:05:03,000 --> 00:05:05,190 ‫which is then the foreign key. 109 00:05:05,190 --> 00:05:09,360 ‫And we also do the exact same thing with the guest. 110 00:05:09,360 --> 00:05:11,550 ‫So hopefully that made sense 111 00:05:11,550 --> 00:05:13,680 ‫but if it's still a bit confusing, 112 00:05:13,680 --> 00:05:15,780 ‫then that's no problem at all. 113 00:05:15,780 --> 00:05:17,190 ‫It will make more sense 114 00:05:17,190 --> 00:05:21,390 ‫once we actually implement this inside supabase. 115 00:05:21,390 --> 00:05:25,200 ‫So next up, let's create all the more simple tables 116 00:05:25,200 --> 00:05:26,490 ‫and then after that 117 00:05:26,490 --> 00:05:28,560 ‫we will create the booking table, 118 00:05:28,560 --> 00:05:30,450 ‫and then do these connections 119 00:05:30,450 --> 00:05:31,983 ‫that we just talked about.