Let's make a task managing app with nextjs and supabase
Tags: tutorial, supabase
Published: 2022-09-11 06:14:47

Hello everyone! Welcome to my tutorial, here I'll be showing you how I made a task managing app using Supabase and Next.js. The frontend will be hosted on [vercel](https://vercel.app) and we will be using [supabase](https://supabase.com) for managing our database.

Before I begin I would like to address that there might be some implementations or practices used which might have a better alternative and there may be some which are not recommended at all. I am open for recommendations as well as correction and you may use the comment section to do so.

The purpose of the blog is not to teach you the basics so knowledge of fundamental concepts is required.

## Let's begin
### Supabase setup
First, let's setup our database in supabase. Before creating your database you need to create a project in supabase, to do so click on new project and select your organization if you already have one, if not then make a new by clicking on `New Organization`.

Now enter your project details
![Screenshot of supabase create project form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kzkwc3txumbz9j0ca24.png)
Here's how my project details look like. Now let's hit `Create New Project`, now supabase will take a minute or two to setup your project.

*NOTE: While creating your project details there will be an option to select region, you can select any region but keep in mind that you won't be able to change it later.*

### Creating our database table in supabase
Now this is one of the things I like about supabase. Supabase provides you two options for managing tables, either you can use the supabase UI or if you love writing SQL queries to manage your database you can do that too!
I am going to demonstrate how to create a table in both of them.

#### Create Table using Supabase UI
For using supabase UI go to `table editor` in the left pane and click new table.

![Project home page in supabase with arrow pointing to table editors icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzztkbacvdttw18mjqgw.png)


![Supabase table editor page with arrows pointing to create table buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/domnxn9yzsslhhl596dw.png)

After you click on create table you'll see a sidebar. In the sidebar you'll see option to provide name and description to your table and two database columns already provided i.e id and created_at.

![Image showing create table sidebar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49e1dkoegy1rjozahie2.png)

I am going to change a few values

1. `id` data type to `uuid` and its default value will be generated by default value to to a function that will return uuids, you can do that by clicking on the hamburger menu inside the default value input field and selecting the `uuid_generate_v4()` under suggestions.
2. `created_at` to `createdAt`, cause I like camel casing.
3. I am also going to enable realtime, to show data instantly when someone updates it.

After:

![Image showing sidebar after my changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlrz3lt4bfowxzmopdnr.png)


Now, let's add different fields to our table. I am going to add following fields to the table.
- `title`
- `description`
- `status` with default value `pending`
and their type is going to be `text`.

The result is going to look like this:
![Image showing final changes in table editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6h71rjct0jdx1ojvw093.png)

Now just hit save and you have successfully created your database table.

#### Creating table using Supabase SQL editor
For creating table using SQL editor click on the SQL editor.

![Image showing SQL editor page with arrow pointing to SQL editor icon in left pane](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60u09393vwm8y7dysa3o.png)

Click on `New Query` to open an editor where we will be writing our SQL query.

This is the query I'll be using to create our table.
```sql
create table tasks (
  id  uuid  default uuid_generate_v4()  primary key,
  "createdAt" timestamp default now(),
  title text,
  description text,
  status text default 'pending'
)
```
After writing the query click run and your table will be created, you can check that by clicking on `table editor` or view your database by clicking the database icon. 

![Image showing sql editor page with arrows pointing to run button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvhtrbs63tqeqcxo9o6m.png)


Now if you remember we enabled realtime in our table when we created it using the supabase UI, we can do the same for this table by writing a new query or using supabase UI.

You can refer [supabase doc](https://supabase.com/docs/guides/database#realtime) for enabling realtime. `I've used the following query to enable realtime:
```sql
begin;
  drop publication if exists supabase_realtime;

  create publication supabase_realtime;
commit;

alter publication supabase_realtime add table tasks
```

#### Using supabase UI to enable realtime.
For enabling realtime using UI click on `Database` icon in the left pane

![Image showing database page of supabase with arrow pointing to database icon in left pane](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyugga9bbnteikqc72ct.png)

Now click on Replications and click on the button under source column. 

![Image showing replication section under Database page with arrows pointing to replication section button and source column button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sic5g6dsmavzz74zb4a6.png)

Now click on the switch to enable replication for your table, this will enable realtime for your database table.

![Tables under replication section with arrows pointing to enable replication switch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5do69gtb5t78d3brlg35.png)

*NOTE: Supabase recommends using RLS (Row level security) when using realtime this is to prevent unauthorized read and writes to your DB, we will setup this later when we will setup authentication for our app.*

Hurray! You've successfully created your table in supabase.