1 00:00:01,140 --> 00:00:05,190 ‫And now to wrap up this Supabase crash course, 2 00:00:05,190 --> 00:00:08,370 ‫let's quickly set up two storage buckets 3 00:00:08,370 --> 00:00:11,403 ‫where we can upload large files to. 4 00:00:12,720 --> 00:00:14,880 ‫So back in Supabase, 5 00:00:14,880 --> 00:00:18,480 ‫let's select the storage from the menu. 6 00:00:18,480 --> 00:00:20,580 ‫And then here we can very easily 7 00:00:20,580 --> 00:00:23,570 ‫create a new storage bucket. 8 00:00:23,570 --> 00:00:27,030 ‫So let's create one for avatars, 9 00:00:27,030 --> 00:00:32,030 ‫so basically for the avatar of our application users. 10 00:00:32,340 --> 00:00:36,510 ‫And then let's make this a public bucket, 11 00:00:36,510 --> 00:00:39,306 ‫so that anyone can actually read the URL 12 00:00:39,306 --> 00:00:42,630 ‫of all the files that are in the bucket. 13 00:00:42,630 --> 00:00:45,326 ‫So that's actually not really a problem, 14 00:00:45,326 --> 00:00:48,270 ‫because role level security policies 15 00:00:48,270 --> 00:00:51,160 ‫are still gonna be required for operations 16 00:00:52,503 --> 00:00:55,260 ‫such as uploading or deleting files. 17 00:00:55,260 --> 00:00:57,723 ‫So we can just save it like this, 18 00:00:58,920 --> 00:01:00,300 ‫give it some time, 19 00:01:00,300 --> 00:01:05,300 ‫and then let's also create another one for our cabin images. 20 00:01:06,960 --> 00:01:08,910 ‫And again, let's make it public, 21 00:01:08,910 --> 00:01:12,270 ‫so that we can actually display the images from here 22 00:01:12,270 --> 00:01:14,133 ‫on our webpage. 23 00:01:15,330 --> 00:01:17,400 ‫So let's save that. 24 00:01:17,400 --> 00:01:19,620 ‫And then once the bucket is created, 25 00:01:19,620 --> 00:01:22,080 ‫we can very easily upload files here 26 00:01:22,080 --> 00:01:24,600 ‫just by drag and dropping. 27 00:01:24,600 --> 00:01:28,343 ‫And so we already have our files actually, 28 00:01:28,343 --> 00:01:32,927 ‫so on our desktop here in the source, 29 00:01:34,950 --> 00:01:37,500 ‫and then data, and then cabins, 30 00:01:37,500 --> 00:01:40,050 ‫here, we have our images. 31 00:01:40,050 --> 00:01:44,100 ‫So let's grab them and drag 32 00:01:44,100 --> 00:01:45,270 ‫and drop them right here. 33 00:01:45,270 --> 00:01:50,270 ‫And so now they are going to be uploaded here. 34 00:01:50,730 --> 00:01:52,320 ‫So that's gonna take some time. 35 00:01:52,320 --> 00:01:55,370 ‫So I will be back here once this has been finished. 36 00:01:55,370 --> 00:01:57,620 ‫(no audio) 37 00:01:59,220 --> 00:02:03,960 ‫So here we have now one image of each of the cabins. 38 00:02:03,960 --> 00:02:06,082 ‫And so let's try this one. 39 00:02:06,082 --> 00:02:10,140 ‫So we can click here, then we can see the file. 40 00:02:10,140 --> 00:02:12,240 ‫We can see when it has been added. 41 00:02:12,240 --> 00:02:16,602 ‫We can see the size, and we can see the image itself. 42 00:02:16,602 --> 00:02:20,416 ‫What we can also do is when we right click here, 43 00:02:20,416 --> 00:02:23,850 ‫or also here, get the URL. 44 00:02:23,850 --> 00:02:26,190 ‫So let's try that. 45 00:02:26,190 --> 00:02:28,691 ‫And then here in our cabin page, 46 00:02:28,691 --> 00:02:33,691 ‫let's just quickly create an image with that source. 47 00:02:36,657 --> 00:02:38,970 ‫Give it a save, 48 00:02:38,970 --> 00:02:42,450 ‫and well, there it is. 49 00:02:42,450 --> 00:02:46,710 ‫So we just easily updated an image here to our Supabase, 50 00:02:46,710 --> 00:02:51,060 ‫and are now able to render it here on our page. 51 00:02:51,060 --> 00:02:52,440 ‫Nice. 52 00:02:52,440 --> 00:02:55,860 ‫And by the way, I created these cabin images here 53 00:02:55,860 --> 00:02:58,770 ‫using Midjourney sometime ago, 54 00:02:58,770 --> 00:03:02,082 ‫so that that was still using version four. 55 00:03:02,082 --> 00:03:03,780 ‫But now that version five is already out 56 00:03:03,780 --> 00:03:05,760 ‫and getting better every day, 57 00:03:05,760 --> 00:03:09,030 ‫this already looks like old news here. 58 00:03:09,030 --> 00:03:12,870 ‫But still, these images are very nice and very pretty, 59 00:03:12,870 --> 00:03:16,563 ‫and so they are more than enough here for or application. 60 00:03:17,569 --> 00:03:20,805 ‫Now finally what I'm gonna do 61 00:03:20,805 --> 00:03:24,360 ‫is since we already have this URL, 62 00:03:24,360 --> 00:03:27,240 ‫I will go here to the table editor, 63 00:03:27,240 --> 00:03:30,693 ‫and then in the cabins, I will add that URL. 64 00:03:31,890 --> 00:03:36,153 ‫So we can just double click here and then save it. 65 00:03:38,697 --> 00:03:43,083 ‫And so now if we load our data into the application again, 66 00:03:43,083 --> 00:03:47,493 ‫we should be able to see that URL right there. 67 00:03:48,995 --> 00:03:52,413 ‫So indeed, there it is. 68 00:03:53,280 --> 00:03:54,300 ‫Great. 69 00:03:54,300 --> 00:03:58,170 ‫And of course, in one of the lectures a bit later, 70 00:03:58,170 --> 00:04:01,059 ‫we will also learn how to programmatically upload images 71 00:04:01,059 --> 00:04:03,787 ‫to one of our buckets. 72 00:04:03,787 --> 00:04:05,130 ‫Awesome. 73 00:04:05,130 --> 00:04:09,074 ‫So with this, we finished the Suprabase crash course. 74 00:04:09,074 --> 00:04:13,080 ‫So we have our data inside our application now, 75 00:04:13,080 --> 00:04:15,600 ‫so we just loaded it like this. 76 00:04:15,600 --> 00:04:19,560 ‫But now we actually want to also manage this state 77 00:04:19,560 --> 00:04:20,940 ‫in our application. 78 00:04:20,940 --> 00:04:23,280 ‫And so that's where React Query 79 00:04:23,280 --> 00:04:25,620 ‫that we have been talking about so much 80 00:04:25,620 --> 00:04:27,840 ‫will finally come into play. 81 00:04:27,840 --> 00:04:30,990 ‫And so I'm really excited to finally show you 82 00:04:30,990 --> 00:04:35,990 ‫my favorite React third party library in the next section.