🗄️ Connect to Supabase

Set up a free cloud database so your products and orders are shared across all devices and browsers.

Create a free Supabase project

Go to supabase.com → Sign up for free → New project.

Choose a project name (e.g. bioharvest), set a database password, and pick the region closest to Morocco (e.g. West EU).

Free tier includes: 500 MB database, 1 GB file storage, 50,000 monthly active users — more than enough for this store.

Get your API credentials

In your Supabase project → Settings (gear icon) → API.

Copy these two values and paste them below:

Project URL

anon / public key

Note: This page writes credentials directly into supabase-config.js. The anon key is safe to expose in client-side code — Supabase Row Level Security controls data access.

Create the database tables

In Supabase → SQL Editor → New query → paste and run this SQL:

-- ══ BioHarvest Database Schema ══════════════════════════

-- PRODUCTS table
create table if not exists products (
  id          text        primary key,
  name        text        not null,
  name_ar     text        default '',
  category    text        not null,
  price       numeric     not null default 0,
  unit        text        default '',
  unit_ar     text        default '',
  description text        default '',
  description_ar text     default '',
  badge       text        default '',
  badge_ar    text        default '',
  emoji       text        default '🌿',
  image       text        default null,
  organic     boolean     default true,
  created_at  timestamptz default now()
);

-- ORDERS table
create table if not exists orders (
  id              text        primary key,
  ref             text        not null,
  status          text        default 'new',
  source          text        default 'whatsapp',
  customer_name   text        default '',
  customer_phone  text        default '',
  note            text        default '',
  items           jsonb       default '[]',
  subtotal        numeric     default 0,
  delivery        numeric     default 0,
  discount        numeric     default 0,
  total           numeric     default 0,
  created_at      timestamptz default now()
);

-- Enable Row Level Security (keeps data private)
alter table products enable row level security;
alter table orders   enable row level security;

-- Allow public read on products (storefront needs to read them)
create policy "Public can read products"
  on products for select
  using (true);

-- Allow anon key full access (admin uses same key)
create policy "Anon full access products"
  on products for all
  using (true) with check (true);

create policy "Anon full access orders"
  on orders for all
  using (true) with check (true);

Click Run (or press Ctrl+Enter) in the SQL editor. You should see "Success. No rows returned."

Migrate your existing products

If you already have products saved locally in your browser, click below to push them to Supabase.

This reads products from your browser's localStorage and uploads them to Supabase. Safe to run multiple times.

✓

Done! Your store is now cloud-powered

Once configured:

Products added in the admin panel are instantly visible to all visitors worldwide
Orders from the cart appear in the admin Orders page in real time
Works on any device — phone, tablet, desktop
The site falls back to localStorage automatically if Supabase is unreachable

→ Go to Admin Panel View Store