## Analogi Sederhana Bayangin kamu mau build rumah (aplikasi). **Firebase** kayak sewa apartemen fully furnished - cepet, tinggal masuk, tapi kamu stuck sama layout dan rules pemilik. **Supabase** kayak build rumah sendiri dengan blueprint yang jelas dan construction crew yang bagus - lebih flexible, bisa customize, dan kamu yang punya rumahnya. Plus, blueprint-nya open source, jadi kamu bisa build ulang di tanah lain (self-host) kalau perlu. ## Kenapa Supabase Ada? Firebase bagus, tapi ada beberapa keterbatasan: **Problem 1: Vendor Lock-in** - Data kamu di proprietary Firestore format - Susah migrate keluar - Harga naik? Ga bisa pindah dengan mudah **Problem 2: NoSQL Limitations** - Complex queries susah - Ga ada SQL joins - Relational data jadi awkward **Problem 3: Pricing Unpredictability** - Read/write operations bisa mahal at scale - Tagihan yang ga terduga **Solusinya: Supabase** - PostgreSQL = Standard SQL, powerful queries, gampang export - Open source = Bisa self-host, ga ada vendor lock-in - Transparent pricing = Biaya lebih predictable - Full backend = Database + Auth + Storage + Real-time ## Supabase vs Alternatives ### Supabase vs Firebase | Feature | Supabase | Firebase | |---------|----------|----------| | Database | PostgreSQL (SQL) | Firestore (NoSQL) | | Open Source | Penuh | | | Self-hosting | | | | Complex Queries | SQL power | Terbatas | | Real-time | | | | Pricing Scale | Lebih baik | Bisa mahal | | Maturity | Lebih baru | Sangat mature | ### Supabase vs Traditional Backend | Aspek | Supabase | Express + Postgres | |-------|----------|-------------------| | Setup Time | 5 menit | Berjam-jam/Berhari-hari | | Auth Built-in | | Manual | | Real-time | | Manual (WebSocket) | | API Generation | Otomatis | Manual | | Row Level Security | Database-level | Application-level | | Flexibility | Bagus | Sangat bagus | **Kapan Pakai Supabase?** - Rapid prototyping - MVP yang butuh cepet jadi - Indie developers - Solo atau small team - Real-time features - Chat, notifications, live updates - Budget-conscious projects - Pricing yang predictable - SQL lovers - Lebih suka relational data daripada NoSQL **Kapan TIDAK Pakai Supabase?** - Butuh offline-first (Firebase lebih bagus di sini) - Backend logic yang super complex (custom backend lebih flexible) - Database requirements yang sangat spesifik - Team udah established dengan tech stack lain ## Setup Guide (5 Menit) ### Step 1: Create Project 1. Sign up di [supabase.com](https://supabase.com) 2. Klik "New Project" 3. Pilih organization, kasih nama project, set password 4. Tunggu ~2 menit buat provisioning ### Step 2: Get API Keys Di Project Settings → API: - `NEXT_PUBLIC_SUPABASE_URL` - Project URL - `NEXT_PUBLIC_SUPABASE_ANON_KEY` - Public anonymous key ### Step 3: Install & Configure ```bash npm install @supabase/supabase-js ``` ```typescript // lib/supabase.ts import { createClient } from '@supabase/supabase-js' const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! export const supabase = createClient(supabaseUrl, supabaseKey) ``` ```bash # .env.local NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc... ``` ### Step 4: Create Table Di Supabase Dashboard → SQL Editor: ```sql CREATE TABLE posts ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, title TEXT NOT NULL, content TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Enable Row Level Security ALTER TABLE posts ENABLE ROW LEVEL SECURITY; -- Policy: Everyone can read CREATE POLICY "Posts are viewable by everyone" ON posts FOR SELECT USING (true); ``` Selesai! Sekarang kamu punya backend yang siap dipakai. ## Real-World Example: Todo App dengan Auth & Real-time Scenario: Build todo app yang punya authentication, real-time updates, dan secure data access. ### 1. Database Schema ```sql -- Users (built-in dari Supabase Auth) -- Todos table CREATE TABLE todos ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, user_id UUID REFERENCES auth.users NOT NULL, task TEXT NOT NULL, is_complete BOOLEAN DEFAULT false, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Row Level Security ALTER TABLE todos ENABLE ROW LEVEL SECURITY; -- Users can only see their own todos CREATE POLICY "Users can view own todos" ON todos FOR SELECT USING (auth.uid() = user_id); -- Users can insert their own todos CREATE POLICY "Users can insert own todos" ON todos FOR INSERT WITH CHECK (auth.uid() = user_id); -- Users can update their own todos CREATE POLICY "Users can update own todos" ON todos FOR UPDATE USING (auth.uid() = user_id); -- Users can delete their own todos CREATE POLICY "Users can delete own todos" ON todos FOR DELETE USING (auth.uid() = user_id); ``` ### 2. Authentication Component ```typescript // components/Auth.tsx 'use client' import { useState } from 'react' import { supabase } from '@/lib/supabase' export default function Auth() { const [email, setEmail] = useState('') const [loading, setLoading] = useState(false) async function handleLogin(e: React.FormEvent) { e.preventDefault() setLoading(true) const { error } = await supabase.auth.signInWithOtp({ email, options: { emailRedirectTo: window.location.origin } }) if (error) { alert(error.message) } else { alert('Check your email for login link!') } setLoading(false) } return ( ) } ``` ### 3. Todo List dengan Real-time ```typescript // components/TodoList.tsx 'use client' import { useEffect, useState } from 'react' import { supabase } from '@/lib/supabase' interface Todo { id: string task: string is_complete: boolean } export default function TodoList() { const [todos, setTodos] = useState([]) const [newTask, setNewTask] = useState('') useEffect(() => { fetchTodos() // Real-time subscription const subscription = supabase .channel('todos') .on( 'postgres_changes', { event: '*', // INSERT, UPDATE, DELETE schema: 'public', table: 'todos' }, (payload) => { if (payload.eventType === 'INSERT') { setTodos(prev => [...prev, payload.new as Todo]) } else if (payload.eventType === 'DELETE') { setTodos(prev => prev.filter(t => t.id !== payload.old.id)) } else if (payload.eventType === 'UPDATE') { setTodos(prev => prev.map(t => t.id === payload.new.id ? payload.new as Todo : t) ) } } ) .subscribe() return () => { subscription.unsubscribe() } }, []) async function fetchTodos() { const { data } = await supabase .from('todos') .select('*') .order('created_at', { ascending: false }) setTodos(data || []) } async function addTodo(e: React.FormEvent) { e.preventDefault() if (!newTask.trim()) return const { data: { user } } = await supabase.auth.getUser() if (!user) return await supabase.from('todos').insert({ task: newTask, user_id: user.id }) setNewTask('') } async function toggleTodo(id: string, is_complete: boolean) { await supabase .from('todos') .update({ is_complete: !is_complete }) .eq('id', id) } async function deleteTodo(id: string) { await supabase.from('todos').delete().eq('id', id) } return (

toggleTodo(todo.id, todo.is_complete)} /> {todo.task}

) } ``` ### 4. Main App ```typescript // app/page.tsx 'use client' import { useEffect, useState } from 'react' import { supabase } from '@/lib/supabase' import Auth from '@/components/Auth' import TodoList from '@/components/TodoList' export default function Home() { const [user, setUser] = useState(null) useEffect(() => { // Check current session supabase.auth.getSession().then(({ data: { session } }) => { setUser(session?.user ?? null) }) // Listen for auth changes const { data: { subscription } } = supabase.auth.onAuthStateChange( (_event, session) => { setUser(session?.user ?? null) } ) return () => subscription.unsubscribe() }, []) return (

{!user ? ( ) : ( <> )}

) } ``` **Yang Kamu Dapat:** - Magic link authentication (passwordless) - Row Level Security (user cuma bisa lihat data mereka sendiri) - Real-time updates (perubahan muncul langsung) - Zero backend code (semuanya dihandle Supabase) - Type-safe queries (dengan TypeScript codegen) ## Additional Features ### Storage (File Upload) ```typescript // Upload avatar const { data, error } = await supabase.storage .from('avatars') .upload(`${userId}.png`, file) // Get public URL const { data } = supabase.storage .from('avatars') .getPublicUrl(`${userId}.png`) ``` ### Edge Functions (Serverless) ```typescript // supabase/functions/send-email/index.ts serve(async (req) => { const { to, subject } = await req.json() // Send email logic return new Response(JSON.stringify({ sent: true })) }) ``` ### TypeScript Types Generation ```bash npx supabase gen types typescript --project-id xxx > types/database.ts ``` Sekarang semua query kamu udah fully typed! ## Key Concepts ### Row Level Security (RLS) Security di database level, bukan application level: ```sql -- Users only see their own data CREATE POLICY "Users view own data" ON todos FOR SELECT USING (auth.uid() = user_id); ``` Artinya: Meskipun ada bug di frontend/API, data tetap aman. ### Real-time Subscriptions Listen to database changes: ```typescript supabase .channel('todos') .on('postgres_changes', { event: '*', table: 'todos' }, (payload) => { console.log('Change!', payload) }) .subscribe() ``` Perfect buat: chat apps, collaborative tools, live dashboards. ## Kesimpulan Supabase adalah "Firebase yang bisa kamu kontrol sendiri". Keuntungannya: 1. **PostgreSQL** → Powerful SQL queries, ga ada NoSQL limitations 2. **Open Source** → Ga ada vendor lock-in, bisa self-host 3. **Built-in Auth** → Passwordless, OAuth, JWT - semuanya udah siap 4. **Real-time** → WebSocket subscriptions tanpa setup 5. **Row Level Security** → Database-level security yang solid ### Checklist: Mulai Pakai Supabase **Setup (5 menit):** - [ ] Sign up di supabase.com - [ ] Create new project - [ ] Get API keys dari dashboard - [ ] Install `@supabase/supabase-js` - [ ] Setup Supabase client di project **Database:** - [ ] Bikin tables lewat SQL Editor - [ ] Enable Row Level Security (RLS) di semua tables - [ ] Bikin policies buat access control - [ ] Test queries di Table Editor **Authentication:** - [ ] Enable auth providers yang kamu butuhin - [ ] Implement login/signup flow - [ ] Handle auth state changes - [ ] Protect routes berdasarkan auth status **Real-time:** - [ ] Setup channel subscriptions - [ ] Handle INSERT/UPDATE/DELETE events - [ ] Test pakai multiple browser tabs - [ ] Implement optimistic UI updates **Production:** - [ ] Generate TypeScript types dari schema - [ ] Setup environment variables - [ ] Configure CORS kalau perlu - [ ] Setup database backups - [ ] Monitor usage di dashboard **Kapan Supabase Cocok:** - MVP atau prototype yang butuh cepet jadi - Apps dengan real-time features - Indie developers atau small teams - Projects yang budget-conscious - Butuh SQL (bukan NoSQL) **Red Flags:** - Butuh offline-first (Firebase lebih bagus) - Backend logic yang super complex - Butuh full control atas infrastructure - Udah invest banyak di Firebase Langkah Selanjutnya: 1. Explore [Supabase docs](https://supabase.com/docs) buat advanced features 2. Coba Edge Functions untuk custom backend logic 3. Setup local development pakai Supabase CLI 4. Join Supabase Discord community **Pricing:** Free tier sangat generous (500MB DB, 50K MAU). Paid plans mulai $25/bulan. Supabase cocok banget buat move fast dan ship products tanpa backend complexity. Real relational database dengan developer experience yang excellent!