2.1 Create Backend API

Before we start creating our app, we first need to create an API connected to a database. For this purpose, we will use a free tool called Supabase.

Step 1: Sign up

Go to supabase.com and Sign up to create a new account.

Step 2: Create a New Project

Next, we need to create a new project. Click the "New Project" button once you login into the Supabase app, and follow the wizard to create your API project.

2a. Click "New Project"

2b. Enter Organization Name

2c. Enter project details

2d. Project dashboard

3. Create Database Table

Now we need to create our database table to store our to-do tasks.

Start by clicking the Table Editor button on the left sidebar menu. Once you're on this page, press the "Create a new table" button.

Press the "Create a new table" button

When the form opens, add the following columns to match the screenshot below:

1. id (uuid)

2. title (varchar)

3. description (text)

4. completed (bool)

5. created_at (timestamptz)

Make sure "Enable Row Level Security" is NOT checked.

Add table columns

4. Build GraphQL Schema

Since we are going to be building our app on top of GraphQL query language, we need to tell Supabase to build its schema.

On the left sidebar menu click the "SQL Editor" button. Once on this screen, press the "+ New Query" button.

Now enter the following code snippet in the editor and press "RUN"

-- Rebuild the GraphQL Schema Cache
select graphql.rebuild_schema();

5. API Details

Go to Settings => API page. Here you can find the API URL and Key as shown in the screenshot below.

That's all. We're done with creating our API for the project. All we need to do is consume it now.