This is an example to implement a simple like button using supabase realtime subscription to keep the number of likes in sync across all clients

The relevent files are:

├── app
|   ├── root.tsx // init the supabase on the client side and wrapper the outlet with Supabse provider
|   ├── routes
|   │   └── realtime.tsx  // client subscribe to supabase events and trigger refresh on insert events
|   └── utils
|       └── supabaseClient.server.tsx // create supabase client on the server side
└── .env // holds supabase credentails and url

1. Copy .env.example to create a new file .env:

cp .env.example .env

2. Go to https://app.supabase.io/project/{PROJECT}/api?page=auth to find your secrets
3. Add your SUPABASE_URL and SUPABASE_ANON_KEY in .env

SUPABASE_ANON_KEY="{SUPABASE_ANON_KEY}"
SUPABASE_URL="https://{YOUR_INSTANCE_NAME}.supabase.co"

4. create a table "clicks", with a columns of id as primary key ( the table default )

Open this example on CodeSandbox:

the '/realtime' route renders a "like" button that keep track of number of likes. open the route in two tabs and click on the button, you should see the like number is updated in both tabs.

• useSubscription – react-supabase
• How to create a real-time UI with NextJS and Supabase
• Supabase Client | Supabase
• Refresh Route Data API · Discussion #1996 · remix-run/remix
• Realtime – Vercel Docs