Craft By Zen

5 min read

🔖learning   🔖supabase   🔖remix   🔖react

Build a Realtime Chat App with Remix and Supabase

The following are notes from an Egghead course I took.

Create a Supabase Project with a Table and Example Data

Setting Up a Remix Project

npx create-remix chatter

Query Supabase Data with Remix Loaders

SUPABASE_URL={url}
SUPABASE_ANON_KEY={anon_key}

Generate TypeScript Type Definitions with the Supabase CLI

brew install supabase/tap/supabase
# Or call upgrade if you already have it
brew upgrade supabase
supabase login
supabase gen types typescript --project-id akhdfxiwrelzhhhofvly > db_types.ts

Implement Authentication for Supabase with OAuth and Github

Restrict Access to the Messages Table in a Database with Row Level Security (RLS) Policies

supabase gen types typescript --project-id akhdfxiwrelzhhhofvly > db_types.ts

Make Cookies the User Session Single Source of Truth with Supabase Auth Helpers

Keep Data in Sync with Mutations Using Active Remix Loader Functions

Securely Mutate Supabase Data with Remix Actions

Subscribe to Database Changes with Supabase Realtime

const channel = supabase
  .channel("*")
  .on(
    "postgres_changes",
    { event: "INSERT", schema: "public", table: "messages" },
    (payload) => {
      const newMessage = payload.new as Message;

      if (!messages.find((message) => message.id === newMessage.id)) {
        setMessages([...messages, newMessage]);
      }
    }
  )
  .subscribe();

Deploy a Remix Application to Vercel from a GitHub Repository