Diving Into The Supabase Database

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Real-Time Collaborative Apps with Next.js and Supabase course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Real-Time Collaborative Apps with Next.js and Supabase, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Real-Time Collaborative Apps with Next.js and Supabase
  • [00:00 - 00:10] If you remember this diagram that I was showing in the earlier lessons that our users in our applications are filmmakers. So there could be multiple users.

    [00:11 - 00:27] So for example, user one can have his own storyboard and user tree can access to the storyboard of user one if user one is sharing the storyboard. And then also user two is just a random user he or she can have their own story board that not shared with anyone else.

    [00:28 - 00:44] So user tree should be able to access in real time the user one's database and then user one should see right away the changes that user tree makes. Same goes for user tree that when user one changes something real time user tree should see it for this we need a database.

    [00:45 - 00:53] So let's get into the database design. So you can see here there's two simple database tables and first one is stories .

    [00:54 - 00:59] So this is where the stories will live. So you saw the storyboard in the UI design.

    [01:00 - 01:05] So normally it has a title and a story image and there's a delete functionality . That's all we have.

    [01:06 - 01:13] And then on the top of the page we also have each sharing function. So to make all of these things work we have this table story.

    [01:14 - 01:18] So basically it has an ID that always we should have. And then there's a user ID.

    [01:19 - 01:30] You know that our application is running on super based authentication. So I will get into the authentications later but every request we do we can get the authentication information inside our application.

    [01:31 - 01:39] So basically we have access to the user IDs and other user information that logged in using information. So we are getting user ID and we need to pass it to the database.

    [01:40 - 01:48] So we can make a connection there and the title is the title and sharing is some way to know that this storyboard is currently sharing. So then we can stop sharing it.

    [01:49 - 01:57] So it's a Boolean field and share it using email. So we are asking when we share if you can remember that we have a model that asking for the user's email.

    [01:58 - 02:04] And when we add the user's email then it will add in this column in the database. Share user email.

    [02:05 - 02:12] And then the story image is just a URL for now. We are not going to work on the upload functionality but basically there will be just image for our story.

    [02:13 - 02:21] And the second table is sharing its status. It has simply just ID, a unique ID and a from and to what is from.

    [02:22 - 02:26] From is where I am sharing. So it is a UUID from of the story.

    [02:27 - 02:37] So basically it can be UUID of the user ID, user ID like then I know I'm sharing this user sharing and two is a text field that basically the email. So we know like we are sharing with this person.

    [02:38 - 03:02] Yeah, this is the database and to create that if you go into super base, if you go to Home page, if you click on this icon here, table editor, you can see all the tables that you have in a different rescheamers. And if you click on the public schema and so also like if you click on authentication schema, there is like all the information about the about your authenticated user users.

    [03:03 - 03:10] So this is how we can access to different UUIDs of the user. And now if I go back to the public schema, so there is no table.

    [03:11 - 03:16] So these two schemas should be in the public. Let's start creating these two tables that we just discussed.

    [03:17 - 03:30] If you go to SQL editor on the second icon and I have two queries, you can just run create queries and it can easily create this table instead of creating manually. Otherwise you can also just go on the table, click on the create new table and manually create it.

    [03:31 - 03:34] And I will share this on the course description. You can just check it out and copy paste it.

    [03:35 - 03:43] Let me run this command enter. Okay, that was running and was successful and I'm going to do the same with the story table and yes.

    [03:44 - 03:48] Now all done. If I go to the table editor now, you can see two tables.

    [03:49 - 03:55] So let's go to the stories. As I said before, there is a user ID, their ID and created ad.

    [03:56 - 04:13] This is by default coming and text title, story image is sharing user ID and share email and sharing status it has from to and the idea and created that. So there is a worrying that like you don't have any role level security, we are going to get into it in the next lesson.