Video summary

Supabase Complete Crash Course in Bangla | React, RLS, Realtime & Self-Hosting

Main summary

Key takeaways

Educational

Main ideas / lessons (what the video teaches)

  • Supabase isn’t “just an open-source Firebase.” It’s better understood as a complete backend platform that bundles multiple services together:

    • Database (Postgres)
    • Authentication
    • Auto-generated API
    • Real-time updates
    • Storage (file uploads)
    • Security (specifically Row Level Security / RLS in Postgres)

  • Modern web app architecture mindset: a frontend alone isn’t enough.

    • You need user identity (login)
    • You need authorization (what data users can access)
    • You may need file storage and real-time updates
    • You need security enforced on the backend (not just in the UI)

  • How the Supabase request pipeline works (conceptually):

    • Your React app calls the Supabase client
    • Supabase provides an auto-generated API layer
    • Requests include identity info (via JWT)
    • Supabase checks authorization using RLS
    • Auth handles identity; Postgres enforces permissions

  • Course goal: build a Todo app step-by-step to teach beginners how to think about and implement a production-style backend.

  • Infrastructure choice matters:

    • Supabase Cloud is managed and easier for prototyping
    • Self-hosted Supabase provides deeper understanding/control but requires operational responsibility (Docker containers, env vars, domains/SSL, SMTP, backups, updates, troubleshooting)

Methodology / step-by-step workflow presented

A) Video course plan (learning sequence)

  • Understand Supabase conceptually as a backend platform (not only an SDK)
  • Set up a hosted or self-hosted environment
  • Create a database table in the Supabase dashboard
  • Connect a React project to Supabase
  • Implement CRUD operations (create/read/update/delete)
  • Add authentication
  • Enable and configure RLS (Row Level Security)
  • Add real-time behavior using subscriptions
  • Use Storage for file uploads and show images in the UI

B) Self-hosting setup (high-level instructions)

  • Use a VPS and a deployment UI tool (the video uses Coolify)
  • Install Supabase from the Coolify dashboard as a resource
  • Retrieve admin credentials from environment variables
  • Access the Supabase dashboard via the provided URL
  • Note that under the hood Supabase runs as Docker containers (services, env vars, domains/SSL, SMTP, etc.)

C) Local development prerequisites (Windows CLI path)

  • Install Docker Desktop
  • Install Git
  • Install Node.js (version 20+ mentioned)
  • Install Scoop (Windows package manager)
  • Use Scoop to install Supabase CLI
  • Verify with supabase version
  • Launch a local Supabase project using the CLI

D) Build the Todo app with React + Supabase (CRUD flow)

  1. Create a React app UI with:

    • Task creation
    • Task list + pagination (“Load more”)
    • Login and signup screens

  2. Create a table in Supabase (example table: task/todos)

    • Columns include things like:
      • id (auto)
      • title
      • description
      • image (stored as a URL/text initially in the DB)
    • Enable real-time optionally
    • Enable RLS later when security is configured

  3. Connect React to Supabase:

    • Copy the “Connect” instructions from the Supabase dashboard
    • Add environment variables to .env
    • Create a Supabase client utility module (e.g., supabase.ts)
    • Install the client library via npm (@supabase/supabase-js mentioned)

  4. Read (Select):

    • Use select() from the table to fetch todos/tasks into React state

  5. Create (Insert):

    • Use insert() and update local React state with the returned row(s)

  6. Update:

    • Use update() with a filter like eq(id, ...)

  7. Delete:

    • Use delete() with a filter like eq(id, ...)
    • Remove from local UI state and rely on server enforcement with RLS once enabled

E) Searching + pagination (server-side approach)

  • Add states for:

    • search
    • visibleCount / page size (example: 3)
    • totalCount (to decide whether “Load more” should show)
    • hasMore (derived from totalCount vs current visible results)

  • Implement querying with:

    • or condition to match title using ilike-style search pattern (case-insensitive)
    • range() for pagination
    • request count (e.g., exact count) to support totalCount

  • Add a debounce (example delay ~300ms) so queries run after the user stops typing

  • Emphasis: search/pagination are implemented on the server via Supabase, not only client-side filtering.

F) Authentication flow (signup/login/logout + session restore)

  1. Signup page:

    • Use Supabase auth.signUp with email + password
    • Handle errors and show them to the user
    • Redirect to login on success

  2. Email verification:

    • In self-hosted mode, SMTP must be configured or verification email may not arrive

  3. Login page:

    • Use Supabase auth.signInWithPassword
    • On success, redirect to the main app route

  4. Logout:

    • Use Supabase auth.signOut
    • Redirect to login

  5. Session persistence on reload:

    • Use an effect to read the current session (restoring session state)

  6. Real-time session state updates:

    • Subscribe to onAuthStateChange so UI updates properly on sign-in/sign-out
    • Unsubscribe in cleanup to avoid leaks

G) Security: RLS authorization (the key enforcement mechanism)

Core lesson: UI restrictions are not real security. Even if buttons/menus are hidden, a malicious user can call Supabase API endpoints directly.

The RLS process shown

  1. Initially disable RLS to confirm the app works.
  2. Enable RLS on the task table.
  3. Apply policies:
    • Select policy (public/authenticated read depending on template used)
    • Insert policy (deny/allow based on user identity)
    • Update policy
    • Delete policy
  4. Add a user_id column to the table (since policies rely on matching row owner):
    • Create user_id column type uuid (UUID mentioned)
  5. In React create flow, insert user_id from the current auth session:
    • user_id: session.user.id (as described)

Policy logic (conceptual)

  • Allow access only when:
    • the authenticated user’s UID matches the row’s user_id
  • Otherwise deny (Supabase/Postgres enforces it)

Practical outcome demonstrated

  • Without proper RLS policies:
    • inserting fails with “RLS policy violation”
  • After adding:
    • users can create/read/update/delete only their own rows
    • deleting actually removes from the database (not just UI)

H) Real-time updates (subscriptions)

  • Enable real-time on the table in Supabase dashboard

  • In the React dashboard component:

    • Create a Supabase channel (e.g., topic: Task)
    • Subscribe to postgres_changes events:
      • Example: listen for INSERT on the task table
    • On insert, update React state using the payload (payload.new)
    • Unsubscribe during cleanup

  • Edge case highlighted:

    • If you both insert via API and separately receive the real-time insert event, you may see duplicates
    • The fix suggested is adjusting state update logic (not adding twice)

I) Storage for file uploads + public image URLs

  1. In Supabase dashboard → Storage:

    • Create a bucket (example: task banner)
    • Set it to be public (or at least readable based on policies)

  2. In the app:

    • Provide an image file input in the form
    • On task creation:
      • If an image exists:
        • Upload the file to the bucket (storage.from(bucket).upload(path, file))
        • Generate a public URL (storage.from(bucket).getPublicUrl(path))
        • Save that URL alongside the task record

  3. RLS/storage policies:

    • After enabling RLS for storage-related operations, you must create storage policies too
    • Otherwise uploads can fail (the video reports an error and then adds a storage policy)

  4. Verification:

    • Reload app and confirm the uploaded image appears correctly from the stored public URL

Sources / speakers

  • Speaker: Not explicitly named in the subtitles (presenter/teacher is implied).
  • Sources mentioned (systems/docs):
    • Supabase (platform documentation and dashboard UI)
    • PostgreSQL (via Supabase RLS concept)
    • React
    • Supabase CLI
    • Docker
    • Coolify
    • Hostinger VPS
    • Google SMTP
    • Git, Node.js, Scoop
    • Browser developer tools (Network tab / console)

Original video