save-data

Save Data

Makes forms actually save data. Handles the complete flow: create the database table, write the save function, connect it to the form, and test it.

The Spreadsheet Analogy

Before creating anything, show the designer what their "spreadsheet" will look like:

"Here's what your data will look like — think of it as a spreadsheet:

name	email	message	submitted at
Jane Smith	[email protected]	Hello! I'd like...	Apr 3, 2026
Alex Kim	[email protected]	Question about...	Apr 3, 2026

Each time someone fills out the form, a new line gets added here."

Implementation Steps

Step 1: Create the Table

Generate SQL for Supabase:

create table [table_name] (
  id uuid default gen_random_uuid() primary key,
  -- columns match the form fields
  created_at timestamptz default now()
);

-- Enable Row Level Security
alter table [table_name] enable row level security;

-- Policy: anyone can insert (for public forms)
create policy "Anyone can submit" on [table_name]
  for insert with check (true);

-- Policy: only authenticated users can read (for admin)
create policy "Authenticated users can read" on [table_name]
  for select using (auth.role() = 'authenticated');

Tell the designer:

"Go to your Supabase dashboard → SQL Editor → paste this and run it. That creates your spreadsheet."

Or if Supabase CLI is set up, run it directly.

Step 2: Set Up Supabase Client

If not already set up, create the Supabase client utilities:

src/utils/supabase/server.ts — for server-side operations:

import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() { return cookieStore.getAll() },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          )
        },
      },
    }
  )
}