Files
braidsbymira/README.md
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

58 lines
3.4 KiB
Markdown

# 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](https://deno.com) 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.