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 video analysis...