Skip to content

SUPABASE_SETUP.md

Latest commit

 

History

History
162 lines (116 loc) · 3.28 KB

SUPABASE_SETUP.md

File metadata and controls

162 lines (116 loc) · 3.28 KB

🗄️ SUPABASE INTEGRATION SETUP

✅ WHAT I DID

  1. ✅ Installed @supabase/supabase-js
  2. ✅ Created Supabase client (/lib/supabase.ts)
  3. ✅ Updated ContactForm to submit to Supabase
  4. ✅ Added loading states and error handling
  5. ✅ Added success/error messages

📝 SETUP INSTRUCTIONS

Step 1: Create Environment File

Create a file named .env.local in the root directory:

cd /Users/hamzashahid/structurewebsite
touch .env.local

Add these contents to .env.local:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

Step 2: Create Database Table

Go to your Supabase project dashboard: https://supabase.com/dashboard/project/YOUR_PROJECT_ID

Navigate to: SQL Editor → New Query

Run this SQL:

-- Create contact_submissions table
CREATE TABLE contact_submissions (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT NOT NULL,
  phone TEXT NOT NULL,
  company TEXT NOT NULL,
  message TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Add index for faster queries
CREATE INDEX idx_contact_submissions_created_at 
ON contact_submissions(created_at DESC);

-- Add index for email lookups
CREATE INDEX idx_contact_submissions_email 
ON contact_submissions(email);

-- Enable Row Level Security (RLS)
ALTER TABLE contact_submissions ENABLE ROW LEVEL SECURITY;

-- Create policy to allow inserts from anyone
CREATE POLICY "Allow public inserts" 
ON contact_submissions 
FOR INSERT 
TO public 
WITH CHECK (true);

-- Create policy to allow reads for authenticated users only
CREATE POLICY "Allow authenticated reads" 
ON contact_submissions 
FOR SELECT 
TO authenticated 
USING (true);

Step 3: Restart Dev Server

# Kill current server
pkill -f "next dev"

# Start fresh (will pick up .env.local)
npm run dev

📊 HOW IT WORKS

Form Submission Flow:

  1. User fills out contact form
  2. Data is validated
  3. Submitted to Supabase contact_submissions table
  4. Success message shown
  5. Email also sent as backup

Data Stored:

  • Name
  • Email
  • Phone
  • Company
  • Message
  • Timestamp

Access Your Submissions:

Go to Supabase Dashboard → Table Editor → contact_submissions

You can:

  • View all submissions
  • Export to CSV
  • Set up email notifications
  • Create automated workflows

🔒 SECURITY

✅ Row Level Security (RLS) enabled ✅ Public can insert only (submit forms) ✅ Only you can read (view submissions) ✅ Anon key used (safe for client-side) ✅ Service role key NOT exposed (kept secret)

🎯 QUICK COMMAND

Run this to create .env.local:

cat > /Users/hamzashahid/structurewebsite/.env.local << 'EOF'
NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
EOF

✅ INTEGRATION COMPLETE

Once you:

  1. Create .env.local with credentials
  2. Run the SQL in Supabase to create table
  3. Restart dev server

All form submissions will save to your Supabase database! 🎉

📧 EMAIL BACKUP

The form ALSO sends an email to sales@structurelogistics.com as a backup, so you get submissions both:

  • In Supabase database
  • In your email inbox

Double coverage! ✨