LongCut logo

You Can Learn 95% Supabase Use Cases Like A Pro | Realtime, EdgeFunction, RowLevel Security, Auth

By Sean‘s AI Stories

Summary

Topics Covered

  • RLS Enables Multi-Tenant Security
  • Realtime Subscriptions Eliminate Polling
  • Autogenerated APIs Skip Backend Code
  • Triggers Automate Timestamp Updates
  • Edge Functions Secure Server Logic

Full Transcript

Hey everyone, this is Sean. So today I want to show you how to use Superbase like a pro, like an actual technical founder, even if you don't come from a computer science background. And I'll

show you the main six use cases that I use every single day when I'm trying to build my startup that I would believe would cover 99% of the chances where you're going to use Superbase to support your front-end application as a backend

and as a you know, people call it backend as a service. Okay, if this is the first time to hear about this product, this is one of the most popular backend/database

software tool out there on the market for vibe coders, for startup builders, and it's just gaining more popularity. I

know a lot of people have this shame of not coming from a technical background.

Even if that's the case, it doesn't matter. Okay, so cool. Let's get

matter. Okay, so cool. Let's get

started. So this is a a kamb board which is um a a list a board with a bunch of list of tasks to do and then you can just sort of move around these um to-do

list um into different stages from to-do to in progress to done to failed. And

the reason why I chose to use this example is because it showcases quite a lot of very interesting use cases.

Number one is that you're using login.

Number two, there's um a very like a user based scenario here. Like let's say right now I'm using a different account.

Uh and then these are two completely different users. Um Superbase can enable

different users. Um Superbase can enable you to handle that and they're not like even linked to each other. And then the third thing is that um when you have um

say the same user let's say I create another browser over here with the same account and if I pull one card to another one

it should be automatically updated right if I pull this one back here should all be automatically updated don't think this is like happens magically there's something behind it

that we're using in superbase to support this kind of front end features. And um

last but not least, there are features such as you know um if I move say one item say wash my dishes to um done

I can receive a notification say okay I wash my dishes is done right this is called an edge function that I'll show you later. All right so following these

you later. All right so following these use cases let's break it down into how we're supporting such use cases with superbase. Let's jump back to um the

superbase. Let's jump back to um the code. Okay, so the first thing is by the

code. Okay, so the first thing is by the way uh if you want to use this code, I put everything here called shenan

superbase/tips/ sorry dash combine. Okay. And then I listed down the top six use cases over here. And we're going to follow um this

here. And we're going to follow um this flow to explain them one by one. uh so

that eventually you'll be able to use all those features that I just showed you. Okay, the first one is

you. Okay, the first one is authentication with OOTH. I already

explained quite this quite a bit in many of my previous videos. Feel free to watch them, but essentially it's about like if I just sign out here, I can sign back in with Google.

Yeah, just sign back in with my Google account with a bit of slow internet, but it's all good.

loading my boards. Yeah, that's it. Um,

the way you do it is basically in your uh superbase. Let's just jump right in.

uh superbase. Let's just jump right in.

In your Superbase, if you go to your sidebar and go to your authentication and go to your uh signin providers and you scroll down and over here, you can

turn on your Google uh login credentials and then you'll be able to set up everything. Feel free to watch my

everything. Feel free to watch my previous video for this one. It's very

powerful. or you don't need to set up you don't need to write a bunch of backend code for this but to avoid repetition I'll jump right into the second use case. The second one is

called a role level security RL rls.

Okay. Um it's it's it's very very useful because um think about how like when you use some applications like notion or slack or you know anything you can

always log in with multiple accounts right I'm using notion my mom can use notion but notion themselves don't really have like a a breakthrough where like I can see my mom's data my mom can

see my data unless we share with each other so in this case it's using a technology called role security I'll show you how um how it works and

when it would not work. Um if I remove some parts of the features, right? So

the way we do it is that uh let me show you back in the superbase. Okay, I'm

just going to cross this out. Um

actually go to dashboard and um go to my projects. It's this one. And

if I just go to my tables. So if you see like right now I have three data tables.

I can show you the schema if you click on the sidebar and check database. All

right. So right now how it works is that if a user logs in you have a all user ID and that's linked to the the table called boards and board has a user ID

that's linked to your authentication and every board's ID is linked to the list ID. The list is basically every list

ID. The list is basically every list here to-do in progress and done. That's

another table recording it. and it has its own list ID and board ID linked to which board it was uh storing the list with. So for example in this case the

with. So for example in this case the board is belonging to this account right but in this case this board which is completely different

let's say um I can add like uh failed right this is completely different account so there's no failed here these two boards share different um board ids

okay and then eventually every list has a list ID that connects to every card so every card lives in every every list okay this is how the basic data structure looks like in our current

codebase. And if we go back to the code,

codebase. And if we go back to the code, you can find it in my superbase schema database.sql,

database.sql, you can copy the whole thing to create tables using these SQL. Okay. But how

does rowle security policy works? If I

go back to Superbase, go to the sidebar, turn on table editor, you can see that for every table, I have this thing called off policies over here, right?

Doesn't matter what table it is, there's an off policy over here. If I click on it, you can see that for example for boards, what I'm doing is that I'm

allowing a public role who is a user to be able to delete the own boards, insert into their own boards, update anything

or select anything. So let's do an experiment. If I disable the RLC, RLS

experiment. If I disable the RLC, RLS right here, right now, my internet is quite slow, but it's okay. Go back to the table editor. You

okay. Go back to the table editor. You

see if it's disabled, it says RLS disabled. And here it also says

disabled. And here it also says disabled. I'm just going to disable

disabled. I'm just going to disable every single one of them to show you what it means.

Okay, second one.

The third one.

Okay, cool. So, if I come back here, let me just make it so easy for you guys to see.

after I disabled it.

If I just refresh, command R.

Command R. You see like the cars disappeared for this account and it goes back to like this random welcome to Campbour, drag and drop cars, realtime updates. And I believe it's

realtime updates. And I believe it's because like when I initialized this whole project, these three things already existed. But then when I created

already existed. But then when I created another account and created their own cards, they are linked to this specific

user ID. And because I disabled the role

user ID. And because I disabled the role level security policies, now I as Sasha, I couldn't jump in and and see my cards

anymore, right? So the way to do it is

anymore, right? So the way to do it is that you must turn on turn them back on enable OS. Let's do this.

enable OS. Let's do this.

I'll show you what policies how to create these policies and what policies there are and why they're important in a bit. Let me just uh finish this

bit. Let me just uh finish this experiment with you to show you the importance of this. Okay. So, let's jump back in a little bit. So, we were talking about cards. If you see like

every card has a card ID if you still remember and they have a title what these cards are like I need to go to home soon. I need to drag and drop cards

home soon. I need to drag and drop cards realtime updates. all these kind of

realtime updates. all these kind of things with a description and there's a list ID, there's a position. So all of these things like if you see like

there's a little link here. This this

card ID is linked to this list ID which links you back to this list table. One

of the list ids here. So let's let's find out list ID. Copy it. Come back to list. Command FV. You see it links to

list. Command FV. You see it links to this list. And this list is linked to

this list. And this list is linked to this board. Okay. If we copy that board

this board. Okay. If we copy that board ID and come to boards, command FV. You

see that that list is is living in this board. Okay. So now that we have enabled

board. Okay. So now that we have enabled all these policies and let's come back and then command R to refresh it. You

see our car is back.

Well, this is just the original one. All

right. But anyways, you get the idea.

The idea is that the ROS policy allows you to very strictly to restrict who has access to what kind of data. And if I go

back to my um uh GitHub so basically the users will be able to see their own boards, lists and cars and there's a database level security

because I won't be able to see anybody else's data right and there's a thing called multi-tenant architecture ready.

So that means that multi-tenant a tenant is like someone lives in an apartment but now the apartment is your app and multiple people can log into your app to have access to their own data right and

how did we do this? So if you go back to this codebase um by the way feel free to get clone the the the link um that I shown you earlier. If you go to

superbase schema when you initialize this project instead of uh sorry instead of just downloading the code you will be able to see this database.sql

and then you're going to copy the whole thing into your um into your superbase uh SQL. So if I'll show you command A,

uh SQL. So if I'll show you command A, command C, copy it. Come to superbase.

Come to the sidebar. Click on SQL editor.

Okay. Click on this plus button. Create

a new snippet and just paste whole thing here and do command enter. Right? I

already created all these things. So it

will just be a repetition for me. But

let's let's take a look at what we actually have in this um in this thing to create these policies.

So initially of course I'm going to create these three tables right boards list and cards create the table if they don't exist right and there's this ID um

user ID right and then for list there's a list ID and a board ID connected to it as we explained okay if I just like scroll down you can see that at line 35 there's

enable role level security that's the thing that we're talking about we were um basically altering all these table that we just created to enable their role level

security right this is basically telling superbase to turn this button on right to enable

it instead of dis disable it okay and then you are defining the actual policies for them all right so let's look at the policies for boards first

all right so for boards I have actually uh four policies right here right so what I'm saying is that for select

using all user ID equals user ID what does that mean that means anybody who logged in with superbase they have an authorization user ID if that's equal to

the user ID state stored in your board's table then this user particularly can see that board so let's come back to the

table what we means that for this board there's a board ID there's a user ID as long as the current user who logged in

which is here in authentication as long as the current user who logged in I'm going to copy this user ID here okay

as long as this user here come back here to board table command FV you see as long as that user logged in and that user ID equals to

this user ID column here. This user can see this board. That's what it means.

Okay.

Yeah, that's what it means. Same thing

for every single one of them. So that

means that user is able to view, insert new roles, update any roles or delete delete any roles. If you copy this and paste into your SQL editor in Superbase, you have these policies. Simple as that.

Very simple. Okay. And then you can always come back here to your tables, click on the off policies, and edit any single one of them. You see, it's the

same thing. Alter the policy of this

same thing. Alter the policy of this with the public table called boards.

As long as the user ID in the board table equals to the authentication user ID, you'll be able to delete this row as this user. That's it. And you can click

this user. That's it. And you can click on save if uh if you finish. All right.

I won't update anything here. So, this

is very very powerful because like imagine you have I don't know a million users. Uh there there's probably a

users. Uh there there's probably a better infrastructure for that. But if

you have like 200 users and maybe they're all enterprise users and you're already hitting an an annual recurring revenue of a million dollars by having um a million sorry 100 200 users, then

this comes very handy. You're doing like a data separ separation for every single user, right? So, so make sure you use

user, right? So, so make sure you use RL's policy when setting up a superbase project. Okay, cool. Let's um let's try

project. Okay, cool. Let's um let's try let's start explaining the second thing already. The third thing actually come

already. The third thing actually come back to GitHub. The first one was user authentication. Second one was uh role

authentication. Second one was uh role level security. The third one is called

level security. The third one is called real time subscriptions. So, do you remember that when we were moving cars around the other the other window with

the same um um um user logged in, we'll be able to get like that real-time updates. Let me show you one more time.

updates. Let me show you one more time.

This is two different users, right?

Different email accounts. But if I do, let's use the same account again, right?

And if I just like move one of them to done because our internet is a little slow but yeah it moves to done immediately right. So if I say in progress let's say

right. So if I say in progress let's say uh I sorry I am preparing a new video for

superbase use cases that cover 99% of the cases.

All right hit add card.

Yeah this one update real time. Okay, so

that's called a real time listening or um your code is sort of fetching information whenever something changed in the database because of the user did something or because the back end

changed something. Okay, I'll show you

changed something. Okay, I'll show you how it works. Let's come back to the code one more time.

I think these are irrelevant for the real time. It's in um by the way, let me

real time. It's in um by the way, let me show you the structure of the code a little bit. So here you have an app

little bit. So here you have an app router and a components folder, right?

The components folder saved like the login firm form and then the board and then the app folder shows you the directory right you have authentication callbacks

and this is just images and how you define how it looks and the layout of the page with the authentication provider that make sure that your entire app is wrapped around that login um

space and then the page this is your main page if you're still logging in the loading will be true and it will show you that it's loading.

After you logged in, if the user exists, it's going to show you um if the user has logged in, it will show you the the comban board. Otherwise, it will show

comban board. Otherwise, it will show you the login form, right? Let's do

commandclick into the comban board, right? Is it living in the components?

right? Is it living in the components?

So, right now I'm going to show you how does real time works. Okay, so so let's let's check this um default comb board export. Right. So at the top we're we're

export. Right. So at the top we're we're we're obviously using a user o to let people log in and then there's a state bunch of state management. Um that's not

relevant. What's relevant is let's come

relevant. What's relevant is let's come to uh line 39. All right. Initialize app

data plus real time. So the way it works is that firstly I'm going to have this use effect. use

effect for those of you who are not familiar with react is that whenever something in this changes run everything here right so basically like on

Instagram if you click on like then they must show they must update that to the database and then people who followed you who turned on I don't know like

maybe YouTube right if your favorite um YouTuber launch some a new video right if you click on that bell then you will receive notifications ations, right?

Because something changed. So run

something. That's what use effect does.

Okay? So this is basically saying when the user changes, run this. If the user logged in, fetch

run this. If the user logged in, fetch the entire data and then set up the real-time subscription.

Okay. And this function already written well for you is the very key of this entire real-time listening. All right.

So setup real time subscription. What it

does is that it set up things like the following. If you take a look

following. If you take a look create a constant called subscription which is using the superbase client that we defined. I'll show you where we

we defined. I'll show you where we defined it.

Superbase is imported from a library called superbase. If we click into that

called superbase. If we click into that is right here library superbase. Okay.

And then this is a superbase that we're using is a client that has access to your secrets and keys. Okay.

So let's come back here to comban board.tsx.

board.tsx.

So with setup real-time subscriptions you will be able to do superbase channel combine changes as long as the table changes

the prog the postgress well postgress is the SQL uh thing that so uses as long as it changes it will basically help you to fetch the

new information to the front end that's what real-time listening does okay so let's See um basically

if it's a public table all right if it's boards lists or cards as long as they're on change

right you see the same code send the payload console log it and then fetch the new data about it right so what it means like why why is this

important because traditionally what we can do is the following. Traditionally,

if somebody did something like this, okay, the other table, sorry, the other the same user, let's say on a different computer who logged in the same account

will receive this if we refresh the data fetching every 5 seconds, something like that. But that's wasting a lot of

that. But that's wasting a lot of resources. Why? because maybe like for

resources. Why? because maybe like for the entire day I'm not using this board at all.

Correct.

I only need to refresh it when somebody changes the database.

When somebody let let's say myself moved that I'm preparing a video and I say I'm done.

When I change that, I want all these three tables to be updated so that whoever is logged in with the same account, let's say myself in a different country at a different time, when I turn

it on, I'll be able to see the real-time updates.

So you see like we're saving so much uh calculation or computation resources here. Instead of refreshing every 5

here. Instead of refreshing every 5 second, it refreshes by request. Okay,

that's the powerful part of using a real-time uh listening.

If your app is scaling up, you're going to save so much money by doing this. And

also, if your app is a very user engagement or like multi-user or like um you need to log into different accounts at the same time kind of use cases, it's

very handy. Okay, try to use this thing.

very handy. Okay, try to use this thing.

So, I'm going to see if I have shown you everything about real time. So,

yeah, basically just these two things.

So, you see I explained how we define the function set up real time subscription. All right. And at the end

subscription. All right. And at the end you got to do a cleanup. So what the cleanup does is that once it finishes we got to turn it off because otherwise it

keeps listening and then listening. I

mean like it's it's it's like a socket you plug into your to your to your electricity socket and then you're using electricity right whenever the changes are done right you see like there's a

timeout small delay to avoid conflict with optimist delays and this subscribe after that it's going to return a a cleanup and then you're going to

unsubscribe this subscription until the next time a a user comes in and changed something and then we're going to turn

this back on. Okay, that's how it works.

I hope this is very straightforward um because it makes sense, right? Okay,

cool. Uh let's move on to the next one.

Okay, so that we covered the real-time subscription, live updates when cars are moved, multiple users can collaborate instantly, and no polling needed. You're

going to use basically a web socket, right? Polling is what I mean by like

right? Polling is what I mean by like every five seconds you refresh u you do it programmatically you set a function there and then it keeps running it's wasting resources instead we use a web

socket right instead of electricity socket is a web socket you basically plug in to the website of subbase and whenever something changes you fetch the information okay

the fourth one is called autogenerated rest APIs all right so let's see what it does so this says there's no backend coding needed

full CRUD operations with TypeScript.

CRUD stands for create, read, uh, update, and delete. Sounds familiar?

Yes, that's exactly what we had for these um, um, policies, right? Delete,

insert, update, select, insert is basically create here. Okay.

And automatically create the API documentations. Let's see what it really

documentations. Let's see what it really means. Let's go back to the

means. Let's go back to the source/lib/suberase.ts.

source/lib/suberase.ts.

ts come back here source slash superbase uh sorry library lib/subase.ts

TS remember earlier we explained that we create a client here called superbase.

We also have uh a superbase browser client here that returns the browser client with the same key. Okay. Then we

define a database types here that basically defines what every like board what does the board table have? What

does the list table have? yada yada

yada.

Okay. So

the way it works the the whole idea of autogenerate rest APIs is the following.

Okay.

Whenever we use this thing called superbase which is using create client let's find an example. Come back to comb board. All right let's scroll down. Um

board. All right let's scroll down. Um

by the way sorry this is the real-time subscription examples. You guys can keep

subscription examples. You guys can keep checking them. And then the feature four

checking them. And then the feature four is right here. Autogenerate rest APIs read. Okay,

read. Okay, you see that we're doing this kind of thing called await superbase from boards dot select star dot order create at

star. What is this doing? This is saying

star. What is this doing? This is saying from the table boards select everything and then order them by the time they were created in a descending order like

the latest one should be at the top because ascending is for false for anyone who's who's very familiar with SQL you're basically writing a SQL

called select star from boards uh you know order by created at in descending order right if you're familiar with SQL this is the SQL version of it.

And traditionally, if we don't use automated generated API, we need to create four functions separately. Four

APIs separately. One API does uh whenever this API is called, we're going to create allow it to create data.

Another one does um uh read data. Uh

another one does update data. The last

one does delete data. You need four APIs to do every single one of these four actions. But now instead because of

actions. But now instead because of Superbase client that they very kindly defined for us right here we are able to just use

superbase from boards select star await superbase from lists select star wherever the board ID equals the board ID that we use and order them in

position right superbase from cars I'll select everything wherever the list that the card in will like that we'll

list every card that belongs that belongs to this one list. Let me show you what I mean. Let's say the list ID is for in progress. We're going to find all the cards that belong to this list

and then map them in. Right? These two

cards belong to this list. I'm going to map them in. That's what this does.

instead of writing four APIs every single one of them instead you just be able to like do all of these things right so instead of from so from is one

API that you're supposed to write let's say let's say swbase dot uh or dot um instead instead of dot

select which is read uh let's do insert you see we can insert this new table this new data into boards, right? Insert this new

to-do board. Uh, sorry, insert this new

to-do board. Uh, sorry, insert this new data. Uh, create a sample list. This is

data. Uh, create a sample list. This is

a sample creation. Insert them in, right? And then there are a bunch of

right? And then there are a bunch of insert here. This is like this the the

insert here. This is like this the the other API you're supposed to write if you're using traditional REST API to interact with the database. But now you can use Superbase to avoid writing all these things, right? That's what it

means. Super handy. Trust me, super

means. Super handy. Trust me, super handy. Uh, you can do delete, right? I

handy. Uh, you can do delete, right? I

can delete any card if I want to, right?

Um, don't worry if you feel like this this file is very complicated. If you're

a beginner, try to download this code and then play around with it just like me doing command F and then search things like like what I'm doing. Try to

understand what it means. And then in your own project, what you can do is you can just like select this, copy it, and then just do command shift L and then just paste in your own code, command V

or whatever. And then you can just say,

or whatever. And then you can just say, "Oh, uh, show me how to integrate this into my own code for use case A B C D."

Okay, that's how you can do it.

Cool. That that's the um that's the fourth one, I believe. Yeah,

autogenerated REST APIs. I think we covered them. Um I think there's an

covered them. Um I think there's an automatic API documentation which is um in Superbase. If you come here, if you

in Superbase. If you come here, if you go to like API docs, I think that's what they meant. Um so if you go to like

they meant. Um so if you go to like um tables and views so um you see like there are three tables here boards cards

list as long as you create the tables using our superbase schema database.sql

SQL if you copy this into your superbase SQL editor and paste you'll be able to get this okay and you can see like there's a documentation for you if you

want to select anything select ID select title right select anything right insert insert and I believe delete also exists

so you have a entire documentation here you can just do command A and copy and then paste into your um into your cursor right? And be like, "Hey, read this

right? And be like, "Hey, read this documentation. This is how we use our um

documentation. This is how we use our um back end uh and let's do it. Let's do

it." But now I think it's more handy because you can probably use the MCP of Superbase to integrate with your code.

Okay.

So that was uh that was number four, autogenerated REST API. Okay. Number

five is called database functions and triggers. So I'll show you why it's

triggers. So I'll show you why it's handy. oftent

handy. oftent times whenever I update something what I want is that I want to record when does this event happen. For instance, I want

to track like who um who used this board, right? Like let's say uh I don't

board, right? Like let's say uh I don't know um what should I say? Okay, a user might come back into this app after a month and then suddenly they use it quite

often and you want to understand oh why there's a there's a peak around um let's say September for people to come back to this app and then you realize oh holy because there are a bunch of students using this app oh that makes

sense in September students come back to school and they start using this app again right you want to see when these events are happening so that it's very important for your future analytics but

traditionally you probably need to do like um actually I prepared the example.

Let me show you.

Traditionally, you probably need to do something like uh let me show you probably not this one. It's the other one. Top 10 supervis tips for VIP

one. Top 10 supervis tips for VIP coders.

Uh this was the REST API example.

Um yes there we go.

Traditionally you would need to do something like this. Okay away superbase from the cars

this. Okay away superbase from the cars table update with a new title and updated at is you're going to do this

new date to string. So, so basically you're creating an updated time manually and as the common says it's very easy to forget right but with the function

trigger you don't need to do anything there's a trigger in our superbase schema database.sql SQL

database.sql SQL remember like this is for R's security policy right after that we have the function to update the updated at time

stamp and there's a trigger to run that function I'll explain one by one it's very very easy to understand okay so firstly we're going to create this function called update the updated at

column sorry about the tongue twister but updated as like a column name in our database I'll show Okay, come back here.

Table editor. Doesn't matter what table.

Let's say use board. Scroll. Updated at,

right? There's a created at, there's an updated at. We have a column. So, what

updated at. We have a column. So, what

we're saying is that whenever this function is called, we to return the relevant trigger that as long as there's a new update, then we're going to use our our our

current time. So, automatically set the

current time. So, automatically set the current time stamp and then return it.

And what it does is that let's say okay whenever there is a row execution on your board's table it's going to run

this function called updated updated at column and then trigger that and then write the time into your column. So what

you can do is you can copy this.

Come back to superbase. Come to SQL editor.

Click on this. Paste it here. Command

enter to run it. Well, I already have everything right. So after this you can

everything right. So after this you can come to the sidebar.

Go to your uh I believe it's authentication. Nope. Go to database.

authentication. Nope. Go to database.

Click on this functions. You see we have a function here called updated update updated at column and this is exactly what we define in our code new.date

update equals now return new. Okay,

this is exactly this function.

Okay, and then it's returning a trigger and that trigger will be stored here in the trigger tab.

Every trigger here is relevant to a table, boards, cards, list is running that function. All right, and you can

that function. All right, and you can edit every trigger.

Guys, I know it's very complicated. It

sounds very complicated but in reality you just you just literally tell AI and be like hey I want a function and the relevant triggers so that they can do ABCDE. All right. In this case, I'll

ABCDE. All right. In this case, I'll just tell, oh, um, help me write these like SQL files so that whenever a user is updating

these tables, doesn't matter what they do, I want to update the update at column to leave the latest timestamp over there because that's important for

me for future logs. Okay, simple as that. Um, so that you don't have to

that. Um, so that you don't have to rewrite everything by yourself.

Okay, let's move on. I think we're done.

Uh number six is called edge functions which is also called serverless.

Traditionally you might host your own server buy a bunch of like servers and then put it in your rooms and then run everything there. But now the server is

everything there. But now the server is at superbase. Sorry no superbase is a

at superbase. Sorry no superbase is a wrapper around AWS. The server is owned by AWS. Okay. So you're using a bunch of

by AWS. Okay. So you're using a bunch of things called serverless functions. In

this case it's called edge functions.

This is very important. Um, so this is also the last one. By the way, we already covered like 80% of the use cases of Superbase. This is what's covering up the the other rest of the uh

I don't know 19% of the use cases.

Customer server side logic without managing servers. Okay, because servers

managing servers. Okay, because servers are with Amazon automatic notifications when tasks are completed.

External API integrations like you can integrate with email, Slack, web hooks.

So for example, do you remember like sometimes you sign up to a new app and then they just send you an email? They

probably use an edge function at in their back end, right? And the reason why we need this is that we can say like, hey, we can we can write this in our own next.js app. We can write it in

our front end. But what happens is that because you are running a function based on some changes on the server, that access level is very high. You

don't want that. You don't want to expose that to a user because what if there's like a very strong hacker and they they have access to your keys and then they can just change things. They

can send emails to to a users. Okay, we

don't want that.

What we do want is that we want this to run in the back end. We want this to run in our server uh at Amazon and we don't have to worry about it. We're using

Superbase to run all these things. So

the example I prepared for you is um whenever I move an item to um let me use this one.

Whenever I use move an item to done, I want to get a notification. Okay, this

is done or in other cases because you see like it successfully triggered it.

So if I move it to to-do, there's nothing. Okay, move it to in progress,

nothing. Okay, move it to in progress, there's nothing. But if I move it to

there's nothing. But if I move it to done, I get a notification. So that means it's it's triggering this edge function that we defined. And then we can also like

we defined. And then we can also like say, oh, whenever it's triggered, send an email to this person, right?

Something like that.

So let me show you how to how to use it.

Okay. Um, so I created this thing called superbase/functions.

Okay.

And I created this thing called task completion notification. Okay. And

completion notification. Okay. And

there's an index.ts. ts. What this

index.ts um file does is basically like I didn't write any of these by the way.

I use AI to write it. Feel free to use AI to describe but you need to understand what it does.

Okay. So what it does is that whenever there's a task that's completed which means that uh let's try to understand this. So there's a there's a request

this. So there's a there's a request method equals options. Um checking a bunch of access control. I don't care.

uh whenever the list title is not done not a completion don't do anything.

Okay. Otherwise

send the completion notification return success equals true. Okay. And

then trigger that function of send completion notification. Okay. Send that

completion notification. Okay. Send that

notification. Anyways, so we want to trigger all of these things whenever a card has been added to the list that

is has titled done. Right? This if is saying like if it's not done do this. If

it's done do the following.

Okay. So how did we do that? We did it by uh first of all I also use this in kam board. Let's just search uh I think

kam board. Let's just search uh I think it's edge functions right notification toast for edge functions. Okay. So this

is sending you a notification given that. Okay.

given that. Okay.

Yep. Yep. These are these are just like the front end stuff and error error checking. Okay. But on the back end it's

checking. Okay. But on the back end it's like this. So let's go back to

like this. So let's go back to superbase. All right. Come to superbase.

superbase. All right. Come to superbase.

Come to the sidebar here. You see

there's a thing called edge function.

Click into it.

You see I have my sidebar. Sorry, I have my uh um function here, right? It was

created an hour ago when I was preparing for this video. You can do is what you can do is that you can click on deploy a new function via editor and you see like

there's an index.ts. That's exactly what I had here. All right. I just like copy this whole thing, put it back in,

click on deploy function, and you can edit the function name. I

didn't edit it. Now it's called bright function, right? All right. Come back here,

right? All right. Come back here, refresh it. Yeah, the two of them. Um,

refresh it. Yeah, the two of them. Um,

and then and then you just like you just need to tell your AI and be like, hey, I have this edge function defined on Superbase. help me implement them here.

Superbase. help me implement them here.

Okay, help me implement them here. And

then you're like using your your back end to send notifications instead of exposing these information to the front end for your user. All right.

Um guys, I think I think that's it. I

think that's like um that's most of the stuff I wanted to show um for for this.

Again, feel free to come to this um GitHub yt-suptan.

Um click here, copy this, and come back to your terminal. All right, just do like get clone and paste that here.

That's all you need to do. Okay, I won't do that again here.

And then um feel free to deploy to versel. I think this video is already

versel. I think this video is already too long. I won't do that here. And for

too long. I won't do that here. And for

login um go back to my previous video.

You'll see a bunch of examples of how to connect your Superbase with um with your Google login or email login. And last

but not least, uh if you want to deploy a full stack application, feel free to go to launch-vp.shan.io.

I prepared a um template over here in one of my previous videos which has got quite a lot of popularity. 724 stars

right now. Guys, help me to hit 1,000.

Thanks. Um,

cool. Uh, I hope this is helpful. I hope

um I hope you have learned something from this video. And I would say um all these

this video. And I would say um all these use cases that I showed you um issues

tips come.

These top six use cases are covering I would say 95% of the ch of the cases where I'm going to use for authentication role level security

realtime subscription uh automatically using some rest APIs you don't have to rewrite everything for updating your tables create read update delete and then some functions or triggers that you

can use to update your table like updated at time stamp and last but not least have an edge function that's going to run some logic on the back end so that you're not exposing some secrets,

keys to your front end. Okay?

Spend some time on it. Don't worry about it if you didn't come from a computer science background or technical background. I learned all of these

background. I learned all of these things by myself. You have AI. You can

do this. Try to use this GitHub. Try to

use cursor. Talk to your attacht. Talk

to your claw. Talk to whatever. And you

can do it. Cool. Thanks a lot. I hope

this is helpful. Peace. Thanks.

Loading...

Loading video analysis...