🛍️ Bridal Studio – Local Setup & Supabase Configuration Guide

This document explains how to set up the Bridal Studio E‑commerce project locally, configure Supabase (database + auth), and run the app in development and production.

---

1. Project Setup

1.1 Download the project

• Download the repository as a ZIP from GitHub.
• Extract the ZIP to your desired folder.

1.2 Install dependencies

From the project root, install dependencies:

npm install

1.3 Critical App.jsx admin email note

• In App.jsx, update the admin email to your admin account email.
• This email is used for admin-level access via Supabase RLS policies and must be correct.

---

2. Supabase Setup[1]

2.1 Create Supabase account & project

• Use a new Gmail ID for Supabase for a clean setup (recommended).
• Go to https://supabase.com and sign up.
• Create: Organization → New Project.
• After project creation, go to:
  • Project Settings → Data API and copy the Project URL.
  • Project Settings → API Keys and copy the Anon public key.

2.2 Configure environment variables (.env)

In the frontend project root, create a .env file:

VITE_SUPABASE_URL=https://xxxx.supabase.co
VITE_SUPABASE_ANON_KEY=your_anon_key_here

Make sure the URL and key are copied from your Supabase project.

---

3. Database Setup (VERY IMPORTANT)

3.1 Run SQL schema & policies

• Open Supabase → SQL Editor.
• Paste the entire SQL query block used for the Bridal Studio project (tables, policies, functions, etc.).
• Run the SQL inside the correct project.

Do not forget:

• Update the ADMIN EMAIL inside every relevant SQL block, matching the admin email set in App.jsx.

3.2 Storage bucket setup

• In Supabase Storage, create a bucket named products.
• Set it to have public access, as required for product images.

---

4. Authentication & Google OAuth

4.1 Enable Google Auth in Supabase

• Go to Supabase → Authentication → Sign In / Providers.
• Enable Google as a provider.

4.2 Create Google OAuth credentials

Step 1: Open Google Cloud Console

• Go to: https://console.cloud.google.com/apis/credentials.
• Create or select a project (example: my-ecommerce-app).

Step 2: Configure OAuth consent screen

• Navigate to APIs & Services → OAuth consent screen.
• User Type: External.
• Fill in:
  • App name
  • Support email
  • Authorized domain (e.g. nfashions.com)
• Save the configuration.

Step 3: Create OAuth Client

• Go to APIs & Services → Credentials.
• Click Create Credentials → OAuth Client ID.
• Application type: Web Application.

4.3 Authorized JavaScript origins

Add all of the following as Authorized JavaScript origins:

http://localhost:5173
https://nfashions.com
https://www.nfashions.com

• http://localhost:5173 → Local development.
• https://nfashions.com → Production domain (if purchased).
• https://www.nfashions.com → www version users may land on.

4.4 Authorized redirect URIs

Add all of the following as Authorized redirect URIs (MUST):

http://localhost:5173
http://localhost:5173/
https://YOUR_PROJECT_ID.supabase.co/auth/v1/callback

You can find the exact Supabase callback URL at:
Supabase → Authentication → Sign In / Providers → Google (shown in the provider config panel).

4.5 Save OAuth credentials

• Click Create in Google Cloud Console.
• Copy:
  • Client ID
  • Client Secret
• You can view or edit them later using the edit (✏️) icon in the credentials list.

---

5. Running the Application

5.1 Start local development server

From the project root:

npm run dev

Open the printed local URL in your browser (typically http://localhost:5173).

5.2 Final pre-launch checklist

Before considering the setup complete, verify:

• Admin email is correctly updated in App.jsx.
• .env is configured with the correct Supabase URL and anon key.
• All SQL queries for schema and RLS policies have been executed in the correct Supabase project.
• Google OAuth is enabled and credentials are set with proper origins and redirect URIs.
• The app runs without authentication or RLS errors.

---

6. Post‑Deployment (Vercel) Settings

After deploying the app on Vercel:

6.1 Supabase URL & redirect configuration

In Supabase (MUST):

• Add the live site URL from Vercel as an authorized domain.
• Add redirect URLs such as:

https://nfashions-ecom.vercel.app
http://localhost:5173/
http://localhost:5173
https://nfashions-ecom.vercel.app/login

Ensure these are reflected both in Supabase and Google Cloud OAuth configuration where applicable.

---