Why Supabase is the open-source Firebase alternative - See It in Action

Why Supabase is the open-source Firebase alternative

📖 Scenario: You want to understand how Supabase works as an open-source alternative to Firebase. Imagine you are building a simple app backend that stores user profiles and allows real-time updates.

🎯 Goal: Build a basic Supabase project setup that creates a user profiles table, configures real-time subscriptions, and demonstrates how Supabase replaces Firebase features.

📋 What You'll Learn

Create a Supabase client with the given URL and anon key

Define a table called profiles with columns id, username, and avatar_url

Write a query to insert a new profile into the profiles table

Set up a real-time subscription to listen for changes in the profiles table

💡 Why This Matters

🌍 Real World

Supabase is used to build backend services quickly with open-source tools, replacing Firebase for developers who want more control and transparency.

💼 Career

Understanding Supabase helps cloud developers build scalable, real-time applications with modern open-source infrastructure.

1

Create Supabase client

Create a Supabase client variable called supabase using createClient with the URL https://xyzcompany.supabase.co and anon key public-anonymous-key.

Supabase

# Your code here to create the Supabase client

Hint

Use createClient from @supabase/supabase-js with the exact URL and anon key.

2

Define the profiles table schema

Create a JavaScript object called profileSchema that defines the profiles table with columns: id (string), username (string), and avatar_url (string).

Supabase

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

const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseAnonKey = 'public-anonymous-key';
const supabase = createClient(supabaseUrl, supabaseAnonKey);

// Define the profiles table schema
# Your code here

Hint

Use an object with keys id, username, and avatar_url all set to 'string'.

3

Insert a new profile record

Write an async function called addProfile that inserts a new profile with id = 'user123', username = 'alice', and avatar_url = 'https://example.com/avatar.png' into the profiles table using supabase.from('profiles').insert().

Supabase

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

const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseAnonKey = 'public-anonymous-key';
const supabase = createClient(supabaseUrl, supabaseAnonKey);

const profileSchema = {
  id: 'string',
  username: 'string',
  avatar_url: 'string'
};

// Write async function to add a profile
# Your code here

Hint

Use supabase.from('profiles').insert([{ ... }]) inside an async function.

4

Set up real-time subscription

Add code to subscribe to real-time changes on the profiles table using supabase.channel('public:profiles').on('postgres_changes', ...) and log the payload on changes.

Supabase

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

const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseAnonKey = 'public-anonymous-key';
const supabase = createClient(supabaseUrl, supabaseAnonKey);

const profileSchema = {
  id: 'string',
  username: 'string',
  avatar_url: 'string'
};

async function addProfile() {
  const { data, error } = await supabase.from('profiles').insert([
    { id: 'user123', username: 'alice', avatar_url: 'https://example.com/avatar.png' }
  ]);
}

// Add real-time subscription to profiles table
# Your code here

Hint

Use supabase.channel with .on('postgres_changes', ...) and .subscribe().

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