Supabase Setup

Connect Home Hub to Supabase for real-time sync across all browsers and household members.

Without Supabase, the app works fine in local mode — data is saved in the browser's localStorage. This is great for testing, but won't sync across devices or people.

Step 1 — Create a Supabase project

  1. Go to supabase.com and create a free account.
  2. Click New Project. Name it something like home-hub.
  3. Choose a region close to you. Set a strong database password and save it.
  4. Wait ~2 minutes for the project to spin up.

Step 2 — Create the database table

In your Supabase project, go to SQL Editor and run this query:

create table if not exists task_completions (
  id           uuid default gen_random_uuid() primary key,
  task_id      text not null unique,
  completed_by text,
  completed_at timestamptz default now(),
  next_due     timestamptz,
  created_at   timestamptz default now()
);

-- Allow all reads and writes (household app, no auth needed)
alter table task_completions enable row level security;

create policy "Allow all" on task_completions
  for all using (true) with check (true);

Step 3 — Enable real-time

  1. In Supabase, go to Database → Replication.
  2. Under Tables, find task_completions and toggle it on.

Step 4 — Get your API keys

  1. Go to Project Settings → API.
  2. Copy your Project URL and anon/public key.

Step 5 — Add keys to the app

Create a file called config.js in the root of the project:

// config.js — your Supabase credentials
window.SUPABASE_URL = 'https://your-project-id.supabase.co';
window.SUPABASE_ANON_KEY = 'your-anon-public-key-here';

Then add it to index.html before the other scripts:

<script src="config.js"></script>
Security note: The anon key is safe to expose in a frontend app — it only has the permissions defined by your Row Level Security policies. Never expose your service_role key.

Step 6 — Deploy to Netlify

  1. Push the project folder to a GitHub repo.
  2. Go to netlify.com, click Add new site → Import from Git.
  3. Connect your repo. No build command needed — just set Publish directory to /.
  4. Click Deploy. Your site will be live at a .netlify.app URL.
  5. Share that URL with your housemates — everyone's task completions will sync in real time.
Add config.js to your .gitignore so your keys aren't committed to GitHub. On Netlify, set the keys as Environment Variables instead and inject them at build time if you want a more secure setup.

That's it!

Once deployed, any time someone marks a task complete, every other browser on the same Netlify URL will update within seconds.

← Back to Home Hub