ba4d022a6a
README now covers site structure, storage buckets, admin user creation, and deployment. CLAUDE.md documents project conventions (French UI copy, styling tokens, data-fetching patterns, migration style) and working constraints (no git remote, manual deploys/db pushes require confirmation). Claude-Session: https://claude.ai/code/session_01NhxA4npAXAxmCDEJt6kxSH
Braids by Mira
Public marketing site and admin panel for Braids by Mira — landing page, product showcase, online booking, salon policies, and testimonials, backed by Supabase.
Stack
React 19 + TypeScript + Vite, React Router, Framer Motion, CSS Modules. Backend is Supabase (Postgres + RLS, Auth, Storage, Edge Functions). Deployed on Vercel.
Site structure
Public (src/pages/):
/— Home: hero, services, featured products, testimonials/shop— product catalog with category filtering and inquiry form/book— multi-step booking flow (service → date → slot → contact/intake → confirmation)/rules— salon policies
Admin (src/pages/admin/, under /admin/*, gated by Supabase Auth):
products,services,schedule,bookings,inquiries,content,testimonials,rules
Scripts
npm run dev— start the local dev servernpm test(ornpx vitest run) — run the frontend test suitenpm run build— type-check and build for productionnpm run lint— run ESLintnpm run test:functions— run the Deno tests for the Edge Functions' shared email builders (requires Deno installed)npm run seed— seed products, services, and the default schedule into a Supabase project (see below). Re-running it after admin-panel edits will revert those rows to the hardcoded seed defaults — use it for initial setup / disaster recovery, not routine use.
Backend (Supabase)
The backend lives in supabase/ — Postgres schema/RLS migrations, pgTAP tests, and Deno Edge Functions for booking/inquiry email notifications.
npx supabase start— start the local Docker-based Supabase dev stack (Postgres, Studio, Auth, Storage, Edge Functions runtime). Requires Docker.npx supabase db reset— replay all migrations from scratch against the local database.npx supabase db push— apply pending local migrations to the linked remote project.npx supabase migration list— compare local vs. remote applied migrations.npx supabase test db— run the pgTAP test suite insupabase/tests/database/against the local database.
Storage buckets
salon-images— public bucket for marketing images (products, services, site content, testimonials). Admin-only write.booking-photos— private bucket for client reference photos submitted at booking time (hair state / inspiration photos). Anyone can upload (booking is anonymous); only admin can read, via signed URLs.
Environment variables
Copy .env.example to .env.local and fill in:
VITE_SUPABASE_URL,VITE_SUPABASE_ANON_KEY— frontend Supabase client config (exposed to the browser).SUPABASE_URL,SUPABASE_SERVICE_ROLE_KEY— used only byscripts/seed.tsandscripts/create-admin.ts(server-side, never expose the service role key to the browser). These are distinct from theVITE_-prefixed frontend variables above.
Creating an admin user
npx tsx scripts/create-admin.ts with SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY, ADMIN_EMAIL, and ADMIN_PASSWORD set in the environment.
Deployment
The project is linked to Vercel (.vercel/project.json, project braidsbymira). There is no connected git remote, so deploys are manual: vercel --prod from the project root. Database migrations are pushed separately with npx supabase db push — a Vercel deploy does not apply pending migrations.