Introduction to Supabase - Supabase Tutorial | TechLead

What is Supabase?

Supabase is an open-source Firebase alternative that provides all the backend services you need to build modern applications. Built on top of PostgreSQL, it offers a powerful database, authentication, real-time subscriptions, storage, and edge functions.

🚀 Why Choose Supabase?

Open Source: Self-host or use the managed platform
PostgreSQL: Full SQL database with all PostgreSQL features
Real-time: Built-in real-time subscriptions
Auto-generated APIs: RESTful and GraphQL APIs automatically
Row Level Security: Fine-grained access control

Supabase vs Firebase

Feature	Supabase	Firebase
Database	PostgreSQL (SQL)	Firestore (NoSQL)
Open Source	Yes	No
Self-hosting	Yes	No
Real-time	Yes	Yes
Edge Functions	Deno	Node.js

Core Features

🔐 Authentication

Email, OAuth, magic links, phone auth

🗄️ Database

Full PostgreSQL with extensions

📁 Storage

File storage with CDN delivery

⚡ Edge Functions

Serverless Deno functions

Setting Up Your First Project

Step 1: Create a Supabase Account

Visit supabase.com and sign up with GitHub or email.

Step 2: Create a New Project

Click "New Project" and configure:

Project name
Database password (save this securely!)
Region (choose closest to your users)

Step 3: Install the Supabase Client

# Using npm
npm install @supabase/supabase-js

# Using yarn
yarn add @supabase/supabase-js

Step 4: Initialize the Client

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

const supabaseUrl = 'https://your-project.supabase.co'
const supabaseKey = 'your-anon-key'

export const supabase = createClient(supabaseUrl, supabaseKey)

⚠️ Security Note

The anon key is safe to use in client-side code because Row Level Security policies protect your data. Never expose the service_role key in client code.

Your First Query

// Fetch all rows from a table
const { data, error } = await supabase
  .from('posts')
  .select('*')

if (error) {
  console.error('Error:', error)
} else {
  console.log('Posts:', data)
}

Project Structure

my-supabase-app/
├── src/
│   ├── lib/
│   │   └── supabase.js      # Supabase client
│   ├── components/
│   └── pages/
├── .env.local               # Environment variables
└── package.json

Environment Variables

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

💡 Key Takeaways

• Supabase is an open-source Firebase alternative built on PostgreSQL
• It provides auth, database, storage, realtime, and edge functions
• The anon key is safe for client-side use with RLS enabled
• Auto-generated APIs make database access simple

📚 Learn More

Supabase Documentation →
Official documentation with guides and API reference.
Getting Started Guide →
Quick start guides for different frameworks.
Supabase GitHub →
Open-source repository and community contributions.