Files

belviskhoremk ba4d022a6a docs: expand README and add CLAUDE.md

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

2026-08-25 11:02:44 +02:00

3.4 KiB

Raw Permalink Blame History

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 server
npm test (or npx vitest run) — run the frontend test suite
npm run build — type-check and build for production
npm run lint — run ESLint
npm 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 in supabase/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 by scripts/seed.ts and scripts/create-admin.ts (server-side, never expose the service role key to the browser). These are distinct from the VITE_-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.

3.4 KiB Raw Permalink Blame History