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

Need a 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

Need a 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

Need a 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

Need a hint?

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