0% found this document useful (0 votes)
33 views41 pages

Supabase Notes

Supabase is an open-source backend platform that simplifies app development by providing integrated database, authentication, storage, and APIs, built on PostgreSQL. It allows developers to design database schemas, manage data relationships through tables and foreign keys, and perform advanced CRUD operations with filtering, sorting, and pagination. Supabase automates backend processes, enabling faster development without the need for extensive server-side coding.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
33 views41 pages

Supabase Notes

Supabase is an open-source backend platform that simplifies app development by providing integrated database, authentication, storage, and APIs, built on PostgreSQL. It allows developers to design database schemas, manage data relationships through tables and foreign keys, and perform advanced CRUD operations with filtering, sorting, and pagination. Supabase automates backend processes, enabling faster development without the need for extensive server-side coding.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

🚀 SUPABASE SYSTEM – NOTES

1. Supabase Introduction
Supabase is an open-source backend platform that helps developers build apps faster
without creating a full backend from scratch.

It provides database, authentication, storage, and APIs in one system.

2. PostgreSQL
Supabase uses PostgreSQL as its database engine.

It stores data in tables (rows and columns) and supports advanced queries for managing
structured data.

3. Database Schema Design


Schema design is the structure of your database.

It defines tables, columns, relationships, and how data is organized in Supabase.

4. Tables, Relationships & Foreign Keys


Tables store data, and relationships connect them.

Foreign keys link one table to another to maintain data relationships and integrity.

5. Advanced CRUD Operations


CRUD means Create, Read, Update, Delete operations.

Advanced CRUD includes filtering, sorting, and selecting only required data efficiently.
6. Filtering, Sorting & Pagination
Filtering means selecting specific data, sorting means ordering data, and pagination means
loading data in parts.

These techniques improve performance and user experience.

7. Supabase Authentication
Authentication is the system for signup, login, and user management.

Supabase handles secure login sessions and user identity automatically.

8. Row Level Security (RLS)


RLS is a security feature that controls which users can access or modify specific rows in a
table.

It ensures that users can only access their own data.

9. Supabase Storage
Storage is used to upload and manage files like images, videos, and documents.

Files are stored in buckets and accessed using URLs.

10. Supabase API


Supabase automatically generates APIs for your database tables.

These APIs allow frontend apps to directly interact with backend data without writing server
code.
1. Supabase Introduction

1. What is Supabase?
Supabase is an open-source Backend-as-a-Service (BaaS) platform that helps developers
build full-stack applications without manually creating a backend.

It provides everything needed for backend development such as database, authentication,


APIs, and storage.

💡 Simple Meaning:
Supabase = Ready-made backend system for apps

Just like Firebase, but built on PostgreSQL (powerful database).

👉 Instead of writing backend code from scratch, Supabase gives you ready tools.

2. Why Supabase is Important?


Because modern apps need backend features like:

● User login/signup​
● Data storage​
● File uploads​
● APIs for frontend communication

Without Supabase:

● You must build backend manually ([Link], Express, etc.)​


● Takes more time and complexity

👉 Supabase reduces backend development time drastically.

3. Core Features of Supabase


🔹 Database
Uses PostgreSQL to store structured data (tables, rows, columns).

🔹 Authentication
Handles user signup, login, logout securely.

🔹 Storage
Stores images, videos, and files.

🔹 APIs
Automatically generates APIs for your database.

4. How Supabase Works (Flow)


Step-by-step:

● Developer creates a Supabase project​


● Tables are created in database​
● Frontend connects using API key​
● Data is fetched or stored​
● Authentication manages users

👉 Everything is connected without writing backend server code.

5. Real-Life Example
👉 Example: E-commerce App
● Users sign up/login using Supabase Auth​
● Products stored in database tables​
● Images stored in storage​
● Frontend fetches data using API

👉 Entire backend handled by Supabase

6. Important Characteristics
● Open-source platform​
● Built on PostgreSQL​
● Auto-generated APIs​
● Real-time data support​
● Easy integration with frontend (React, Vue, JS)

7. Supabase vs Traditional Backend


✔ Supabase:​
● Fast development​
● Less code​
● Ready backend tools

❌ Traditional backend:​
● Requires server setup​
● More coding​
● More maintenance

8. Limitations
● Needs internet connection​
● Advanced customization may require SQL knowledge​
● Free tier has limits

9. Simple Analogy
Supabase is like a ready-built kitchen:

● Ingredients = database​
● Chef system = backend tools​
● Recipes = APIs

👉 You don’t build kitchen — you just start cooking apps

10. One-Line Summary


Supabase =​
“An open-source backend platform that provides database, authentication, storage, and APIs
to build apps quickly.”
⚡ QUICK REVISION
● Supabase = Backend platform​
● Built on → PostgreSQL​
● Provides → Auth, DB, Storage, API​
● No need for full backend setup
2. PostgreSQL

1. What is PostgreSQL?
PostgreSQL is a powerful open-source relational database management system
(RDBMS) used by Supabase to store and manage data.

It organizes data into tables (rows and columns) and allows complex queries using SQL.

💡 Simple Meaning:
PostgreSQL = Place where all your app data is stored

👉 It is the core engine of Supabase database

2. Why PostgreSQL is Important in Supabase?


Because every app needs structured data storage like:

● User details​
● Product information​
● Booking records​
● Transactions

👉 PostgreSQL ensures:​
● Data is stored safely​
● Data can be easily accessed and updated​
● Relationships between data are maintained

3. Key Features of PostgreSQL


🔹 Relational Database
Data is stored in tables and connected using relationships.

🔹 SQL Support
Uses SQL (Structured Query Language) for data operations.
Example:

SELECT * FROM users;

🔹 ACID Compliance
Ensures reliable transactions:​
● Atomicity​
● Consistency​
● Isolation​
● Durability

👉 Guarantees data safety


🔹 Scalability
Can handle small to very large applications.

4. Structure of PostgreSQL
📊 Table
A collection of data (like Excel sheet)

📌 Row
Single record (one entry)

📌 Column
Attribute (field name)

👉 Example:
id name email

1 John john@[Link]

5. How Supabase Uses PostgreSQL


Step-by-step:
● You create tables in Supabase dashboard​
● Data is stored in PostgreSQL​
● Supabase auto-generates APIs​
● Frontend interacts using APIs​
● Data is fetched/updated in real-time

👉 PostgreSQL works in the background

6. Real-Life Example
👉 Example: Travel Booking App
Table: users​
Table: bookings

● User data stored in "users" table​


● Booking info stored in "bookings" table​
● Both tables connected using user_id

👉 Easy data management using PostgreSQL

7. Advantages of PostgreSQL
✔ Open-source and free​
✔ Highly secure​
✔ Supports complex queries​
✔ Handles large data efficiently​
✔ Works well with Supabase

8. Limitations
● Slightly complex for beginners​
● Requires SQL knowledge for advanced use​
● Performance tuning needed for very large systems

9. Simple Analogy
PostgreSQL is like a digital cupboard:
● Tables = drawers​
● Rows = files​
● Columns = file details

👉 Everything is organized and easy to find

10. One-Line Summary


PostgreSQL =​
“A powerful relational database system used by Supabase to store, manage, and organize
structured data.”

⚡ QUICK REVISION
● PostgreSQL = Database engine​
● Stores data in → tables (rows & columns)​
● Uses → SQL queries​
● Ensures → safe & structured data​
● Backbone of Supabase
3. Database Schema Design

1. What is Database Schema Design?


Database schema design is the blueprint or structure of a database that defines how data
is organized in Supabase.

It includes tables, columns, data types, and relationships between data.

💡 Simple Meaning:
Schema Design = Planning how your data will be stored

👉 It is like designing the structure before storing any data

2. Why Schema Design is Important?


Because a well-designed schema:

● Keeps data organized​


● Avoids duplication (no repeated data)​
● Improves performance​
● Makes queries faster and easier

👉 Poor design can lead to confusion and slow systems

3. Key Components of Schema Design


🔹 Tables
Main containers that store data

Example:​
users, products, bookings

🔹 Columns
Fields inside a table

Example:​
name, email, price

🔹 Data Types
Defines the type of data stored

Examples:​
● INTEGER (numbers)​
● TEXT (string)​
● BOOLEAN (true/false)​
● DATE (date values)

🔹 Primary Key
Unique identifier for each row

Example:​
id (must be unique)

🔹 Relationships
Connection between tables

Example:​
users → bookings

4. Types of Relationships
🔹 One-to-One
One record linked to one record

Example:​
User → Profile

🔹 One-to-Many
One record linked to multiple records

Example:​
One user → many bookings

🔹 Many-to-Many
Multiple records linked to multiple records

Example:​
Students ↔ Courses

5. How to Design Schema in Supabase


Step-by-step:

● Identify data (what you need)​


● Create tables​
● Add columns with correct data types​
● Set primary keys​
● Define relationships using foreign keys

👉 Done using Supabase dashboard or SQL editor

6. Real-Life Example
👉 Example: E-commerce App
Tables:

● users (id, name, email)​


● products (id, name, price)​
● orders (id, user_id, product_id)

👉 Relationships:​
● users → orders​
● products → orders

7. Best Practices
✔ Use meaningful table and column names​
✔ Avoid duplicate data (normalization)​
✔ Use proper data types​
✔ Always define primary keys​
✔ Maintain relationships correctly

8. Limitations / Challenges
● Poor design leads to complex queries​
● Difficult to modify later​
● Requires planning before implementation

9. Simple Analogy
Schema Design is like a building blueprint:

● Tables = rooms​
● Columns = room features​
● Relationships = connections between rooms

👉 Without a blueprint, construction becomes messy

10. One-Line Summary


Schema Design =​
“Planning and structuring how data is organized in a database using tables, columns, and
relationships.”

⚡ QUICK REVISION
● Schema = database structure​
● Includes → tables, columns, data types​
● Defines → relationships​
● Helps → organize and optimize data​
● Important for → performance & clarity
4. Tables, Relationships & Foreign Keys

1. What are Tables?


Tables are the main structure in a database where data is stored in Supabase.

They consist of rows (records) and columns (fields).

💡 Simple Meaning:
Table = Place where data is stored

👉 Like an Excel sheet with rows and columns

2. What are Relationships?


Relationships define how one table is connected to another table.

They help organize data and avoid duplication.

💡 Simple Meaning:
Relationship = Connection between tables

👉 Helps link related data

3. What are Foreign Keys?


A foreign key is a column in one table that refers to the primary key of another table.

It is used to create relationships between tables.

💡 Simple Meaning:
Foreign Key = Link between two tables

👉 Connects data across tables

4. Structure of Tables
📊 Example Table: users
id name email

1 John john@[Link]

📊 Example Table: bookings


id user_id destination

1 1 Goa

👉 Here, user_id is a foreign key

5. Types of Relationships
🔹 One-to-One
One record in Table A links to one record in Table B

Example:​
User → Profile

🔹 One-to-Many
One record in Table A links to many records in Table B
Example:​
One user → many bookings

🔹 Many-to-Many
Many records in Table A link to many records in Table B

Example:​
Students ↔ Courses​
(Requires a junction table)

6. How Relationships Work in Supabase


Step-by-step:

● Create tables​
● Assign primary key (id)​
● Add foreign key in another table​
● Link both tables​
● Query joined data

👉 Managed via Supabase dashboard or SQL

7. Real-Life Example
👉 Example: Travel Booking System
Tables:

● users (id, name)​


● bookings (id, user_id, place)

👉 Connection:​
user_id → [Link]

👉 This links booking to a specific user

8. Advantages
✔ Avoids duplicate data​
✔ Keeps data organized​
✔ Improves data integrity​
✔ Makes querying easier

9. Limitations
● Complex relationships can be hard to manage​
● Requires proper schema design​
● Incorrect keys can break data links

10. Simple Analogy


Tables = People​
Foreign Key = Phone number reference

👉 If you have a contact saved, you don’t repeat all details — you just link it

11. One-Line Summary


Tables, Relationships & Foreign Keys =​
“Tables store data, relationships connect tables, and foreign keys create links between
them.”

⚡ QUICK REVISION
● Tables = data storage​
● Relationships = connections​
● Foreign Key = linking column​
● Helps → organize & connect data​
● Important for → real-world apps
5. Advanced CRUD Operations

1. What are CRUD Operations?


CRUD stands for:

● Create → Insert data​


● Read → Fetch data​
● Update → Modify data​
● Delete → Remove data

These are the basic operations performed on a database in Supabase.

💡 Simple Meaning:
CRUD = Ways to interact with data

👉 Every app uses CRUD to manage data

2. What is Advanced CRUD?


Advanced CRUD means performing optimized and controlled data operations using:

● Filters​
● Conditions​
● Sorting​
● Selecting specific fields

👉 Not just basic operations, but efficient data handling

3. Create (Insert Data)


Used to add new data into a table

🔹 Example:
INSERT INTO users (name, email)
VALUES ('John', 'john@[Link]');

👉 Adds a new user

4. Read (Fetch Data)


Used to retrieve data from database

🔹 Basic Example:
SELECT * FROM users;

🔹 Advanced Example:
SELECT name, email FROM users

WHERE id = 1;

👉 Fetches specific data with condition

5. Update (Modify Data)


Used to change existing data

🔹 Example:
UPDATE users

SET name = 'Johnny'

WHERE id = 1;

👉 Updates user name


6. Delete (Remove Data)
Used to delete records

🔹 Example:
DELETE FROM users

WHERE id = 1;

👉 Deletes a specific user

7. Advanced Features in CRUD


🔹 Filtering
Select specific data using conditions

Example:

SELECT * FROM bookings

WHERE destination = 'Goa';

🔹 Sorting
Arrange data in order

Example:

SELECT * FROM users

ORDER BY name ASC;

🔹 Limiting Data
Fetch limited records
Example:

SELECT * FROM users

LIMIT 5;

🔹 Selecting Specific Columns


Fetch only required fields

Example:

SELECT name FROM users;

8. How Supabase Uses CRUD


Step-by-step:

● Frontend sends request​


● Supabase API processes it​
● PostgreSQL executes query​
● Data is returned or modified

👉 No need to build backend manually

9. Real-Life Example
👉 Example: Booking System
● Create → User books ticket​
● Read → Show booking details​
● Update → Change booking date​
● Delete → Cancel booking

10. Advantages
✔ Easy data management​
✔ Efficient operations​
✔ Reduces unnecessary data load​
✔ Improves performance

11. Limitations
● Requires proper query knowledge​
● Wrong queries can affect data​
● Large queries may impact performance

12. Simple Analogy


CRUD is like managing a notebook:

● Create = Write new notes​


● Read = Read notes​
● Update = Edit notes​
● Delete = Remove notes

13. One-Line Summary


Advanced CRUD =​
“Efficiently performing create, read, update, and delete operations with filtering, sorting, and
optimization.”

⚡ QUICK REVISION
● CRUD = Create, Read, Update, Delete​
● Used for → data operations​
● Advanced = filtering, sorting, limiting​
● Improves → performance & efficiency​
● Core of → every application
6. Filtering, Sorting & Pagination

1. What is Filtering?
Filtering means retrieving only specific data based on conditions from a database.

💡 Simple Meaning:
Filtering = Show only required data

👉 Avoids unnecessary data loading

2. What is Sorting?
Sorting means arranging data in a particular order such as ascending or descending.

💡 Simple Meaning:
Sorting = Arrange data

👉 Makes data easier to read and analyze

3. What is Pagination?
Pagination means dividing data into smaller parts (pages) instead of loading everything at
once.

💡 Simple Meaning:
Pagination = Load data in parts

👉 Improves performance and speed


4. Why These are Important?
Because real-world apps deal with large amounts of data

Without these:

● Data loading becomes slow​


● UI becomes cluttered​
● Performance decreases

👉 These techniques optimize data handling

5. Filtering in SQL
Used with WHERE condition

🔹 Example:
SELECT * FROM users

WHERE city = 'Mumbai';

👉 Fetches users only from Mumbai

6. Sorting in SQL
Used with ORDER BY

🔹 Example:
SELECT * FROM users

ORDER BY name ASC;

👉 Sorts users alphabetically


🔹 Descending Example:
SELECT * FROM users

ORDER BY id DESC;

👉 Latest records first

7. Pagination in SQL
Used with LIMIT and OFFSET

🔹 Example:
SELECT * FROM users

LIMIT 5 OFFSET 0;

👉 First 5 records
SELECT * FROM users

LIMIT 5 OFFSET 5;

👉 Next 5 records (page 2)

8. How Supabase Uses These


Step-by-step:

● Frontend sends query with filters/sort​


● Supabase API processes request​
● PostgreSQL executes query​
● Only required data is returned

👉 Efficient and fast data loading


9. Real-Life Example
👉 Example: E-commerce Website
● Filtering → Show only "Electronics"​
● Sorting → Price low to high​
● Pagination → Show 10 products per page

10. Advantages
✔ Faster data loading​
✔ Better user experience​
✔ Reduced server load​
✔ Cleaner UI

11. Limitations
● Requires correct query logic​
● Pagination may need extra UI handling​
● Complex filters can slow queries

12. Simple Analogy


Think of Instagram feed:

● Filtering = Show specific content​


● Sorting = Latest posts first​
● Pagination = Scroll to load more

13. One-Line Summary


Filtering, Sorting & Pagination =​
“Techniques used to efficiently retrieve, arrange, and display data in smaller parts.”
⚡ QUICK REVISION
● Filtering = select specific data​
● Sorting = arrange data order​
● Pagination = divide data into pages​
● Improves → performance & UX​
● Used in → all modern apps
7. Supabase Authentication

1. What is Authentication?
Authentication is the process of verifying a user’s identity in an application.

It ensures that only authorized users can access the system.

💡 Simple Meaning:
Authentication = Login system

👉 Confirms “who the user is”

2. Why Authentication is Important?


Because apps need to:

● Identify users​
● Protect user data​
● Provide personalized experience

Without authentication:

● Anyone can access data​


● No security​
● No user control

👉 Authentication ensures security and privacy

3. Supabase Authentication
Supabase provides a built-in authentication system to handle:

● User signup​
● User login​
● Password management​
● Sessions
👉 No need to build auth system manually

4. Authentication Methods in Supabase


🔹 Email & Password
Users sign up using email and password

🔹 OAuth Login
Login using providers like:

● Google​
● GitHub​
● Facebook

🔹 Magic Link
Login without password using email link

5. How Supabase Auth Works


Step-by-step:

● User signs up/logs in​


● Supabase verifies credentials​
● A session is created​
● User gets access token​
● Frontend uses token for requests

👉 Secure authentication flow

6. Example (Using Supabase JS)


🔹 Sign Up
const { data, error } = await [Link]({
email: 'user@[Link]',

password: '123456'

});

🔹 Login
const { data, error } = await [Link]({

email: 'user@[Link]',

password: '123456'

});

🔹 Logout
await [Link]();

7. Sessions & Tokens


● Supabase creates a session after login​
● Uses JWT (JSON Web Token)​
● Token is used to authenticate requests

👉 Keeps user logged in securely

8. Real-Life Example
👉 Example: Travel Booking App
● User signs up/logs in​
● Only logged-in users can book tickets​
● Booking data linked to user account
9. Advantages
✔ Easy to implement​
✔ Secure authentication​
✔ Supports multiple login methods​
✔ Session management handled automatically

10. Limitations
● Requires proper configuration​
● OAuth setup may be complex​
● Depends on internet connection

11. Simple Analogy


Authentication is like a security guard:

● Checks your identity​


● Allows entry only if valid

👉 Keeps system secure

12. One-Line Summary


Supabase Authentication =​
“A built-in system that manages user signup, login, and secure access using sessions and
tokens.”

⚡ QUICK REVISION
● Authentication = user verification​
● Supabase provides → built-in auth​
● Methods → email, OAuth, magic link​
● Uses → JWT tokens & sessions​
● Ensures → security & access control
8. Supabase Storage

1. What is Supabase Storage?


Supabase Storage is a file storage system used to store and manage files like:

● Images​
● Videos​
● Documents

It allows uploading, retrieving, and deleting files easily.

💡 Simple Meaning:
Storage = Place to store files

👉 Like Google Drive for your app

2. Why Storage is Important?


Because apps need to handle files such as:

● Profile pictures​
● Product images​
● PDFs and documents

Without storage:

● Files cannot be saved​


● No media support in apps

👉 Storage enables file handling in applications

3. Key Concepts in Supabase Storage


🔹 Buckets
Buckets are containers that store files
Example:​
● profile-images​
● product-images

🔹 Files
Actual uploaded content (image, video, etc.)

🔹 Public & Private Access


● Public → Anyone can access​
● Private → Only authorized users can access

4. How Supabase Storage Works


Step-by-step:

● Create a bucket​
● Upload files​
● Store file URL​
● Retrieve/display files in frontend

👉 Integrated with database and authentication

5. Example (Using Supabase JS)


🔹 Upload File
const { data, error } = await [Link]

.from('images')

.upload('public/[Link]', file);

🔹 Get File URL


const { data } = [Link]

.from('images')

.getPublicUrl('public/[Link]');

6. Real-Life Example
👉 Example: E-commerce App
● Product images stored in storage​
● Image URL saved in database​
● Frontend displays images using URL

7. Advantages
✔ Easy file upload and access​
✔ Secure storage system​
✔ Supports large files​
✔ Works with authentication

8. Limitations
● Free tier has storage limits​
● Requires proper access control​
● Large files may affect performance

9. Simple Analogy
Storage is like a digital locker:

● Buckets = lockers​
● Files = items inside locker

👉 Keeps files safe and organized


10. One-Line Summary
Supabase Storage =​
“A system to upload, store, and manage files using buckets with secure access control.”

⚡ QUICK REVISION
● Storage = file management system​
● Uses → buckets​
● Stores → images, videos, docs​
● Supports → public/private access​
● Used in → all media-based apps
9. Supabase API

1. What is Supabase API?


Supabase API is an automatically generated interface that allows frontend applications to
interact with the database.

It enables developers to perform CRUD operations without writing backend code.

💡 Simple Meaning:
API = Bridge between frontend and database

👉 Helps apps communicate with backend

2. Why Supabase API is Important?


Because frontend apps need to:

● Fetch data​
● Insert data​
● Update data​
● Delete data

Without APIs:

● No communication with database​


● Backend must be built manually

👉 Supabase removes need for manual API creation

3. Types of APIs in Supabase


🔹 REST API
Automatically generated for all tables
Example:​
● GET → fetch data​
● POST → insert data

🔹 Realtime API
Provides live updates when data changes

👉 Useful for chat apps, live dashboards

🔹 GraphQL API (Optional)


Advanced querying method (via extensions)

4. How Supabase API Works


Step-by-step:

● Tables are created in database​


● Supabase generates APIs automatically​
● Frontend uses API key​
● Requests are sent​
● Data is returned or modified

👉 No backend server required

5. Example (Using Supabase JS)


🔹 Fetch Data
const { data, error } = await supabase

.from('users')

.select('*');
🔹 Insert Data
const { data, error } = await supabase

.from('users')

.insert([{ name: 'John' }]);

🔹 Update Data
const { data, error } = await supabase

.from('users')

.update({ name: 'Johnny' })

.eq('id', 1);

🔹 Delete Data
const { data, error } = await supabase

.from('users')

.delete()

.eq('id', 1);

6. Security in Supabase API


● Uses API keys​
● Controlled by Row Level Security (RLS)​
● Ensures only authorized access

👉 Protects database from unauthorized usage


7. Real-Life Example
👉 Example: Social Media App
● Fetch posts → API call​
● Add new post → API call​
● Update profile → API call​
● Delete comment → API call

8. Advantages
✔ No need to write backend APIs​
✔ Fast development​
✔ Real-time support​
✔ Easy integration with frontend

9. Limitations
● Limited customization compared to custom backend​
● Requires proper security setup (RLS)​
● Depends on internet connectivity

10. Simple Analogy


API is like a waiter in a restaurant:

● Takes your request (frontend)​


● Sends to kitchen (database)​
● Brings back result

👉 You don’t go to kitchen directly

11. One-Line Summary


Supabase API =​
“An auto-generated interface that allows frontend apps to interact with the database without
building a backend.”
⚡ QUICK REVISION
● API = communication bridge​
● Auto-generated by Supabase​
● Supports → REST & Realtime​
● Used for → CRUD operations​
● Secured using → API keys & RLS

You might also like