Skip to main content

Supabase - Integration Introduction

In this video you will learn all about Supabase: what it is and how it can be integrated with DrapCode. You will further know how to build a web or a mobile app to fetch data lists, create records, delete records, update existing records, pagination, sorting and much more.

All data will be fetched from Supabase in real time. The application will be end-to-end integrated with Supabase with DrapCode as a front-end builder. Being a front-end builder DrapCode you won’t be storing any data on it but just be using it as a UI platform.

Let us begin now.

1. Open Supabase​

This is how Supabase appears. It is an alternative to Firebase. It uses the Postgres database. Its functionalities can be deployed via its APIs. The videos will cover the Database and Authentication sections.

DrapCode Builder Supabase Integration Introduction

2. Go to Supabase Account​

You can create an account on Supabase and login from the Home page.

DrapCode Builder Supabase Integration Introduction

3. The Records Section​

In the Supabase account there is the Product section that has all the fields. Here you can add details for the new record and save them. For this click the Insert row button.

DrapCode Builder Supabase Integration Introduction

4. The Fields Section​

The review section on the left menu has all the fields needed for review.

DrapCode Builder Supabase Integration Introduction

5. The Rest APIs Section​

You can use the Rest APIs by going to them via the APIs section on the left menu. Here you can use the Authentication API, to login and signup you can use the API Settings page.

DrapCode Builder Supabase Integration Introduction

5.1 The Project URL​

In API Settings this is the Project URL. It has the Project API Keys. These contain all default settings of the project you create such as the secret key, secret token etc.

DrapCode Builder Supabase Integration Introduction

6. The Auth Section​

From the left menu you can access the Auth API. This contains all the auth token needed to transfer data.

DrapCode Builder Supabase Integration Introduction

7. The Database section​

From the left menu you can access the Database. This runs on Postgres. The tables are Product and Review.

DrapCode Builder Supabase Integration Introduction

8. The API Docs Section​

To view APIs, you can access them via the API Docs in the left menu. You can go to any table say Product to view details.

DrapCode Builder Supabase Integration Introduction

8.1 Go to APIs​

Bash are the APIs you need to build your application. To View how these APIs appear click on Hide. Turn it Public and this is how they will appear. Here you can view the API Key and the Authorization token. These will be needed to pass the call for an API. Later you can create various use cases such as update records, delete records and so on using these.

DrapCode Builder Supabase Integration Introduction