Supabase Todo

A beginner-friendly sample showing how to connect to Supabase and perform CRUD operations with real-time updates.

How it works

01 — Setup Client

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

const supabase = createClient(
  "https://your-project.supabase.co",
  "your-anon-key"
)

02 — Read (SELECT)

const { data, error } = await supabase
  .from("todos")
  .select("*")
  .order("created_at", { ascending: false })

03 — Create (INSERT)

const { error } = await supabase
  .from("todos")
  .insert({ title: "My new todo" })

04 — Update (UPDATE)

const { error } = await supabase
  .from("todos")
  .update({ is_complete: true })
  .eq("id", todoId)

05 — Delete (DELETE)

const { error } = await supabase
  .from("todos")
  .delete()
  .eq("id", todoId)

06 — Real-time Subscriptions

supabase
  .channel("my-channel")
  .on(
    "postgres_changes",
    { event: "*", schema: "public", table: "todos" },
    (payload) => console.log("Change:", payload)
  )
  .subscribe()