From ba4d022a6a185588fe211b55d3a9fcd44adacdba Mon Sep 17 00:00:00 2001 From: belviskhoremk Date: Tue, 25 Aug 2026 11:02:44 +0200 Subject: [PATCH] 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 --- CLAUDE.md | 26 ++++++++++++++++++++++++++ README.md | 34 ++++++++++++++++++++++++++++++++-- 2 files changed, 58 insertions(+), 2 deletions(-) create mode 100644 CLAUDE.md diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..811a924 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,26 @@ +# CLAUDE.md + +Guidance for Claude Code when working in this repository. + +## Project + +Braids by Mira — a salon marketing site + booking flow + admin panel. React 19/TypeScript/Vite frontend, Supabase backend (Postgres/RLS/Storage/Edge Functions), deployed to Vercel. See `README.md` for stack details, scripts, and site structure. + +## Language + +All user-facing text (UI copy, error messages, admin labels) is **French** — this is a Québec-based salon. Code (variables, comments, commit messages) stays in English. + +## Conventions + +- **Styling**: CSS Modules per component/page, using shared design tokens from `src/styles/tokens.css` (`--color-gold`, `--color-charcoal`, `--color-cream`, `--space-*`). Admin pages use a separate token set/shared stylesheet (`src/pages/admin/adminShared.module.css`, `--admin-*` tokens). +- **Data fetching**: public pages fetch via typed helpers in `src/data/*.ts` (e.g. `fetchServices`, `fetchRules`); admin pages call `supabase.from(...)` directly. +- **Images**: `src/lib/storage.ts` holds upload helpers per bucket; `src/lib/resolveImageUrl.ts` resolves public URLs for the `salon-images` bucket. Stored paths are always bucket-relative (not full URLs) so seeded and admin-uploaded rows use the same format. +- **Tests**: Vitest + Testing Library, one `*.test.tsx`/`*.test.ts` per component/hook, colocated. Supabase client is mocked per-test via `vi.mock('../lib/supabase', ...)`. Run the full suite, `tsc -b`, and `npm run lint` before considering a change done. +- **Migrations**: timestamped SQL files in `supabase/migrations/`, one concern per file, with a comment explaining *why* (not just what) at the top. RLS policies gate admin writes on a hardcoded admin `auth.uid()` — check existing migrations for the current UUID before writing a new admin-write policy. + +## Working in this repo + +- **No git remote is configured.** Commits stay local; there is no CI and no push-to-deploy. Never assume a commit ships anything. +- **Deploys are manual** (`vercel --prod`) and **database migrations are pushed separately** (`npx supabase db push`) — always confirm with the user before doing either; both affect the live production site/database. +- The Supabase project is already linked (`supabase/.temp/project-ref`) — `npx supabase db push` / `migration list` talk to the real remote project, not a sandbox. +- When adding a feature that touches booking or admin data, check whether it needs a new migration, a storage bucket/policy, and an admin-side view — this project's features tend to span all three (see the booking intake fields + `booking-photos` bucket + `AdminBookings` detail view as a reference shape). diff --git a/README.md b/README.md index a3af73c..f8e00cb 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,21 @@ # Braids by Mira -Public marketing site for Braids by Mira — landing page, product showcase, booking flow, and salon policies. +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 @@ -17,11 +32,26 @@ The backend lives in `supabase/` — Postgres schema/RLS migrations, pgTAP tests - `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` (server-side, never expose the service role key to the browser). These are distinct from the `VITE_`-prefixed frontend variables above. +- `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.