Supabase Backend Integration for Baby_Boo_Closet

[PBoahene]

Implement Supabase as the backend for Baby_Boo_Closet with complete code and configurations.

---

1. Supabase Database Schema (SQL examples)

Create these tables in Supabase SQL Editor.

-- Users
CREATE TABLE users (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  email text UNIQUE NOT NULL,
  name text,
  role text NOT NULL DEFAULT 'customer', -- customer or admin
  created_at timestamptz DEFAULT now()
);

-- Products
CREATE TABLE products (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  sku text UNIQUE NOT NULL,
  name text NOT NULL,
  description text,
  price_cents integer NOT NULL,
  stock integer NOT NULL,
  category text,
  images text[],
  created_at timestamptz DEFAULT now()
);

-- Orders
CREATE TABLE orders (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id uuid REFERENCES users(id),
  status text NOT NULL DEFAULT 'PENDING',
  total_cents integer NOT NULL,
  created_at timestamptz DEFAULT now()
);

-- Order items
CREATE TABLE order_items (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  order_id uuid REFERENCES orders(id),
  product_id uuid REFERENCES products(id),
  quantity integer,
  unit_price_cents integer
);

-- Uploads (images)
CREATE TABLE uploads (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  order_id uuid REFERENCES orders(id),
  user_id uuid REFERENCES users(id),
  url text NOT NULL,
  storage_key text,
  content_type text,
  size_bytes integer,
  created_at timestamptz DEFAULT now()
);

---

2. Supabase Auth Configuration

• Enable email/password and Google provider in Supabase Auth settings
• Add role claim for admin/customer in user metadata
• Use Supabase dashboard to invite/add admins manually or via script

---

3. Supabase Storage Bucket Setup

• Create a bucket called uploads
• Set privacy to "Private" by default
• Use client-side SDK to generate signed upload URLs

---

4. Row Level Security (RLS) Policies

• Enable RLS for each table
• Example Policy for products (admin only write):

-- Only admins can Insert/Update/Delete products
CREATE POLICY admin_products_policy ON products
  FOR ALL USING (auth.jwt() ->> 'role' = 'admin');

• Allow all users to read products
• Similar policies for orders, order_items, uploads (admins can view/change, customers can view their own)

---

5. src/lib/supabaseClient.ts (init code)

import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
);

6. Example CRUD Helpers (src/lib/supabaseApi.ts)

export async function getProducts() {
  const { data, error } = await supabase.from('products').select('*');
  if (error) throw error;
  return data;
}

export async function createOrder(order: any) {
  const { data, error } = await supabase.from('orders').insert(order).select();
  if (error) throw error;
  return data;
}

export async function uploadImage(file: File) {
  const { data, error } = await supabase.storage.from('uploads').upload(`${Date.now()}_${file.name}`, file);
  if (error) throw error;
  return data;
}

---

7. Admin-only Operations

• Use RLS. In frontend, show/hide admin dashboard based on user's role using:

const user = supabase.auth.getUser();
if (user?.user_metadata?.role === 'admin') { /* Show admin UI */ }

---

8. Environment Variables

Add to your project's .env.local (or .env):

SUPABASE_URL=https://YOUR-SUPABASE-PROJECT.supabase.co
SUPABASE_ANON_KEY=YOUR-SUPABASE-ANON-KEY

---

9. Frontend Migration

• Change frontend data fetching/mutation to use the above helpers
• Use useQuery/useMutation from react-query or tanstack-query with Supabase API
• Use Supabase Auth hooks for login/logout/session
• Update image upload forms to use Supabase Storage

---

10. Migration Guide

• Remove Google Sheets data flows
• Migrate data from Sheets to Supabase tables (CSV import via dashboard)
• Document new flow in README

---

11. Advanced: Realtime (optional)

• Enable realtime for changes in orders/products dashboard
• Use supabase.channel('orders').on('postgres_changes', ...) on admin dashboard for live updates

---

Reference

• Supabase Docs: https://supabase.com/docs
• Supabase JS: https://supabase.com/docs/reference/javascript

---

This implementation is fully actionable and ready for copy-paste into your project.