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
58 lines
3.4 KiB
Markdown
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.
|