Supabase: The Powerful Open-Source Alternative to Firebase

In the previous chapter, we explored the immense power of PostgreSQL (Postgres) and SQL syntax. But if you're a frontend developer or a newcomer to Vibe Coding, setting up a Linux server, installing Postgres, and configuring firewalls on your computer would be a nightmare.

To address this pain point, the software industry gave birth to "BaaS (Backend as a Service)." Over the past few years, Google's Firebase dominated this space. However, in the last two years, a platform called Supabase has emerged, sweeping through the open-source community like a storm.

Supabase bills itself as the "open-source alternative to Firebase," but its real strength lies in the fact that it runs on a genuine PostgreSQL database! This means you don’t need to learn any obscure NoSQL syntax—you can use standard SQL and enjoy all the rigor and performance of a relational database.

Step 1: Register and Create Your First Project

Let’s get hands-on and create a free Postgres database in the cloud!

Open your browser and go to the Supabase official website (supabase.com).
Click Start your project in the top-right corner and log in using your GitHub account.
After logging in, click the large green button New Project.
Supabase will ask you to create an Organization first—just give it any name.
Next, proceed to the project creation screen:
- Name: Give your project a name (e.g., my-vibe-store-db).
- Database Password: This is crucial! Click the Generate a password button on the right, then immediately copy and save this password in a text file! (If you forget it, recovery will be troublesome).
- Region: Choose the server node closest to you. Typically, Tokyo or Singapore will offer the fastest speeds.
Click Create new project.

Supabase will now configure your server in the cloud, which takes about 2–3 minutes. You can grab a coffee while waiting. Once the loading spinner disappears and you see the sleek Dashboard, congratulations—you now own an enterprise-grade database worth tens of dollars per month!

Step 2: Obtain the "Sacred Keys" to Connect to Your Project

Just like in our Line Bot course, any external program that wants to control a cloud service needs "keys."

In Supabase’s left sidebar, find the gear icon labeled Project Settings, then click the API tab. Here, you’ll see two critical pieces of information:

Project URL: This is your database’s web address.
Project API Keys (anon / public): These are your public keys.

🚨 Important:
When using Vibe Coding, we must never hardcode these keys directly into our code (e.g., in index.js or page.tsx). If hackers see them, they could wipe your entire database.
The correct approach is to create a file named .env.local in your project folder and paste these details inside:

NEXT_PUBLIC_SUPABASE_URL=your_Project_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

The AI will recognize these environment variables and use them to securely connect to Supabase.

Step 3: Use SQL Magic to Create "Tables"

Now, let’s create containers for our data. In Supabase, you could use the UI to create tables manually, but as Vibe Coders, we have a more advanced and powerful method: pasting SQL incantations directly.

Click SQL Editor in Supabase’s left sidebar, then click New query. You’ll see a large black text box—this is your command console for issuing high-level instructions to the database.

Let’s try building a basic structure for a "member order system." Fearlessly paste the following AI-generated SQL and click Run:

-- 1. Create the "users" table
CREATE TABLE users (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT UNIQUE NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 2. Create the "products" table
CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  price DECIMAL(10, 2) NOT NULL,
  stock_quantity INTEGER DEFAULT 0
);

-- 3. Create the "orders" table (linked to users and products)
CREATE TABLE orders (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  product_id INTEGER REFERENCES products(id),
  quantity INTEGER NOT NULL,
  total_price DECIMAL(10, 2) NOT NULL,
  order_date TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 4. Insert some dummy test data!
INSERT INTO users (name, email) VALUES 
('Wang Da Ming', 'ming@vibetutor.com'),
('Chen Xiao Mei', 'mei@vibetutor.com');

INSERT INTO products (title, price, stock_quantity) VALUES 
('Vibe Premium Mechanical Keyboard', 3500.00, 50),
('Ergonomic AI Chair', 12000.00, 10);

In just one second, you’ll see Success at the bottom—your database structure is now complete! This is hundreds of times faster than manually clicking "Add Field" and setting types in a UI. This is why text-based interfaces (CLI/SQL) will never go out of style.

Step 4: Vibe Prompt in Action! Using AI to Write Data-Fetching Code

With the database built and dummy data inserted, the final piece of the puzzle is enabling our webpage (e.g., Next.js/React) to fetch and display this data from Supabase.

Supabase provides a powerful JavaScript SDK. Again, we don’t need to memorize syntax like supabase.from('users').select('*'). We just need to chant the right incantation to Cursor:

【Copy this god-tier connection Prompt】
I’m developing a Next.js (App Router) project.
I’ve already set up a Supabase database and configured NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY in .env.local.

Please help me complete the following tasks:

First, create a Supabase client connection file (e.g., lib/supabase.ts) using the @supabase/supabase-js package.

Next, write a frontend page app/products/page.tsx.

In this page, use a Client Component with useEffect to query all data from the products table in Supabase when the page loads.

Display a "Loading..." animation during the query.

Upon success, render a beautiful grid card layout using Tailwind CSS to showcase the product title and price. Cards should have a hover glow effect (hover:shadow-lg).

If the query fails, display a red error message on the screen.

When Cursor receives this prompt, it will automatically generate two files: one for secure connections and one for rendering. When you open localhost:3000/products in your browser, you’ll see the "Vibe Premium Mechanical Keyboard" and "Ergonomic AI Chair" you inserted earlier in the SQL Editor, beautifully displayed on your webpage!

This is what full-stack development is all about!
You’ve connected frontend visuals, backend APIs, and cloud databases.
What used to take three years of computer science courses can now be mastered in a single weekend with Vibe Coding!

🚨 Troubleshooting: Common Supabase Errors and Debugging Guide

When integrating Supabase, beginners often encounter these frustrations:

1. RLS (Row Level Security) Permission Block

This is the #1 pitfall for Supabase newcomers!
Sometimes, when you write data insertion (INSERT) code with AI, you get this error:
new row violates row-level security policy for table "users"
This happens because Supabase enables RLS by default to protect your database, blocking any external (anonymous) write operations.

👉 Fix it with this incantation:

"I encountered an RLS error while inserting data in Supabase: new row violates.... This is just a test project, and I don’t need security. Please give me an SQL command to disable RLS for the users and orders tables temporarily or set them to allow all operations (Allow all)."
The AI will instantly provide SQL like ALTER TABLE users DISABLE ROW LEVEL SECURITY;. Paste and execute it to resolve the issue.

2. Environment Variables Not Found (process.env.NEXT_PUBLIC...)

If the terminal shows supabaseUrl is required, this is 100% because:

You forgot to create .env.local,
You misnamed the file (e.g., .env.txt), or
You didn’t restart the dev server after setting the variables.
Press Ctrl + C in the terminal to stop the server, then run npm run dev again. Everything should magically work!