Why Supabase is the open-source Firebase alternative - Visual Breakdown

Process Flow - Why Supabase is the open-source Firebase alternative

Start: Need backend for app

↓

Choose Firebase?

No→Choose Supabase

Yes↓

Firebase: Proprietary, closed source

↓

Supabase: Open-source, Postgres-based

↓

Supabase provides Realtime DB, Auth, Storage

↓

Developers build apps with Supabase backend

↓

Community contributes to Supabase code

↓

More features and transparency

↓

End: Open-source Firebase alternative

This flow shows the decision and benefits of choosing Supabase as an open-source alternative to Firebase for app backend needs.

Execution Sample

Supabase

import { createClient } from '@supabase/supabase-js';

const supabase = createClient('https://xyz.supabase.co', 'public-anon-key');

const { data, error } = await supabase.from('todos').select('*');

This code connects to Supabase and fetches all rows from the 'todos' table.

Process Table

Step	Action	Input/Query	Supabase Response	Result
1	Initialize client	URL and anon key	Client object created	Ready to query
2	Send query	Select all from 'todos'	Returns list of todos	Data received
3	Check error	Error object	null (no error)	Proceed with data
4	Use data	Data array	Array of todo items	Display or process todos
5	End	No more queries	N/A	App backend working with Supabase

💡 All steps completed successfully, data fetched from Supabase database.

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
supabase	undefined	Client object	Client object	Client object	Client object
data	undefined	undefined	Array of todos	Array of todos	Array of todos
error	undefined	undefined	null	null	null

Key Moments - 3 Insights

Why do we need to check the 'error' after querying?

Because the query might fail due to network or permission issues. Checking 'error' (see step 3 in execution_table) ensures we only use valid data.

What makes Supabase different from Firebase in terms of source code?

Supabase is open-source, meaning anyone can see and contribute to its code, unlike Firebase which is closed-source. This is shown in the concept_flow where Supabase encourages community contributions.

How does Supabase provide realtime features?

Supabase uses Postgres with realtime subscriptions, allowing apps to listen to database changes instantly. This is part of the 'Supabase provides Realtime DB' step in the concept_flow.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'error' after Step 3?

A undefined

B null

C An error message string

D An empty array

💡 Hint

Check the 'error' column in row for Step 3 in execution_table.

At which step does the Supabase client get created?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the 'Action' column in execution_table for client initialization.

If the query returned an error, what would change in the execution_table?

A 'error' would contain error details

B 'data' would be an array

C 'error' would be null

D Client object would be undefined

💡 Hint

Refer to the 'Supabase Response' and 'Result' columns in execution_table Step 3.

Concept Snapshot

Supabase is an open-source backend platform like Firebase.
It uses Postgres for database and supports realtime updates.
Developers connect using a client with URL and anon key.
Queries return data and error objects to handle results.
Open-source means community can contribute and inspect code.
Ideal for apps needing transparent, flexible backend services.

Full Transcript

Supabase is a backend platform that developers use to build apps. It is open-source, unlike Firebase which is closed-source. This means anyone can see and improve Supabase's code. Developers start by creating a client with a URL and a public key. Then they send queries to the database, like selecting all items from a table. Supabase responds with data and an error object. If there is no error, the app uses the data. Supabase also supports realtime updates and storage. This makes it a powerful and transparent alternative to Firebase for app backends.

Practice

1. What is one main reason Supabase is considered an alternative to Firebase?

easy

A. It is open-source and uses PostgreSQL as its database.

B. It only supports NoSQL databases.

C. It requires proprietary software licenses.

D. It does not provide real-time features.

Solution

1. Step 1: Understand Supabase's core features

   Supabase is known for being open-source and using PostgreSQL, a popular SQL database.

2. Step 2: Compare with Firebase

   Firebase is proprietary and uses NoSQL, while Supabase offers an open-source alternative with SQL.

3. Final Answer:

   It is open-source and uses PostgreSQL as its database. -> Option A

4. Quick Check:

   Open-source + PostgreSQL = C [OK]

Hint: Remember Supabase is open-source with SQL, unlike Firebase [OK]

Common Mistakes:

• Thinking Supabase only supports NoSQL
• Assuming Supabase is proprietary
• Believing Supabase lacks real-time features

2. Which of the following is the correct way to initialize a Supabase client in JavaScript?

easy

A. const supabase = createSupabase('url', 'key');

B. const supabase = createClient('url', 'key');

C. const supabase = supabase.create('url', 'key');

D. const supabase = supabaseClient('url', 'key');

Solution

1. Step 1: Recall Supabase client initialization syntax

   The official method is using createClient with URL and key as arguments.

2. Step 2: Check each option

   Only const supabase = createClient('url', 'key'); uses the correct function name and syntax.

3. Final Answer:

   const supabase = createClient('url', 'key'); -> Option B

4. Quick Check:

   createClient() is correct method [OK]

Hint: Look for createClient function with two string arguments [OK]

Common Mistakes:

• Using incorrect function names like supabaseClient or createSupabase
• Calling create as a method on supabase
• Mixing up argument order or missing quotes

3. Given this Supabase query in JavaScript:

const { data, error } = await supabase
  .from('users')
  .select('*')
  .eq('active', true);

What does data contain after execution?

medium

A. All users regardless of 'active' status.

B. An error object because the query is invalid.

C. All users where the 'active' field is true.

D. Only users where 'active' is false.

Solution

1. Step 1: Analyze the query filters

   The query selects all columns from 'users' where 'active' equals true.

2. Step 2: Understand the result

   The data variable holds the filtered list of users with active status true.

3. Final Answer:

   All users where the 'active' field is true. -> Option C

4. Quick Check:

   Filter .eq('active', true) returns active users [OK]

Hint: .eq('active', true) filters active users only [OK]

Common Mistakes:

• Assuming it returns all users without filtering
• Thinking it returns users with active false
• Believing the query causes an error

4. You wrote this Supabase query but get an error:

const { data, error } = await supabase
  .from('profiles')
  .select('id, name, email')
  .eq('verified', 'true');

What is the likely cause of the error?

medium

A. The 'verified' field is boolean but compared to string 'true'.

B. The table name 'profiles' is misspelled.

C. The select statement is missing parentheses.

D. Supabase does not support .eq() filters.

Solution

1. Step 1: Check data type mismatch in filter

   The query compares 'verified' boolean field to string 'true', causing type mismatch.

2. Step 2: Validate other parts

   Table name and select syntax are correct; .eq() is supported.

3. Final Answer:

   The 'verified' field is boolean but compared to string 'true'. -> Option A

4. Quick Check:

   Boolean compared to string causes error [OK]

Hint: Match filter value type to column type (boolean vs string) [OK]

Common Mistakes:

• Assuming .eq() is unsupported
• Thinking select needs parentheses
• Ignoring data type mismatch in filters

5. You want to avoid vendor lock-in by using Supabase instead of Firebase. Which feature of Supabase helps most with this?

hard

A. It stores data in a custom binary format.

B. It only works with proprietary cloud services.

C. It requires you to use Firebase SDKs.

D. It is open-source and uses a standard PostgreSQL database.

Solution

1. Step 1: Understand vendor lock-in

   Vendor lock-in happens when you depend on proprietary tech that is hard to move from.

2. Step 2: Identify Supabase's advantage

   Supabase is open-source and uses PostgreSQL, a widely supported standard database, easing migration.

3. Final Answer:

   It is open-source and uses a standard PostgreSQL database. -> Option D

4. Quick Check:

   Open-source + PostgreSQL = less lock-in [OK]

Hint: Open-source + standard DB = easy to switch later [OK]

Common Mistakes:

• Thinking Supabase requires Firebase SDKs
• Believing it uses proprietary cloud only
• Assuming data is stored in custom formats