# Mystic Shoppe
> Mystic Shoppe’s website (React + Vite) with a Supabase-backed CMS/admin panel. Public pages read content from Supabase; admin pages write via authenticated Vercel Serverless Functions in `/api`. Optional Azure OpenAI Vision can extract shop hours/events from uploaded calendar images.

Key notes for working in this repo:

- The full app is best run via `vercel dev` so `/api/*` routes work locally; `npm run dev` runs the frontend only.
- Supabase is required for CMS features (tables + bucket + RLS). See the setup docs below.
- **Vercel Functions import rule**: in `/api`, all local imports must include the `.js` extension (example: `import { requireAuth } from '../_auth.js';`).
- Env vars prefixed with `VITE_` are bundled into the client; secrets should be server-only (no `VITE_` prefix).

## Project orientation

- [README](README.md): overview, local dev, setup checklist, API overview.
- [CMS setup](docs/CMS_SETUP.md): how to configure Supabase, storage, env vars, and admin workflows.
- [Auth setup](docs/AUTH_SETUP.md): how Supabase Auth is configured and how API auth works.
- [Admin setup steps](docs/ADMIN_SETUP_STEPS.md): step-by-step to create admin users and allowlist access.
- [Database setup required](docs/DATABASE_SETUP_REQUIRED.md): required Supabase schema/security steps.
- [Supabase auth security](docs/SUPABASE_AUTH_SETUP.md): Supabase auth/security configuration notes.
- [Production readiness](docs/PRODUCTION_READINESS.md): deployment/security checklist.
- [Acceptance tests](docs/ACCEPTANCE_TESTS.md): end-to-end verification steps for CMS/public site.

## Frontend (React + Vite)

- [App entry](src/main.tsx): React bootstrap and router setup.
- [App shell](src/App.tsx): top-level routing/layout composition.
- [Public pages](src/pages/): `Home`, `Calendar`, `Products`, `VisitUs`, `About`, `Login`, `Admin`.
- [Admin components](src/components/comps/admin/): calendar image manager, events manager, hero content manager.
- [UI primitives](src/components/ui/): shadcn/ui components used throughout the app.
- [Supabase client](src/lib/supabase.ts): browser-side Supabase configuration.
- [Auth context](src/lib/contexts/AuthContext.tsx): session state, login/logout, protected flows.

## Backend (Vercel Serverless Functions in `/api`)

- [Auth helpers](api/_auth.ts): shared auth/authorization utilities for API routes.
- [Events API](api/events/index.ts) and [single event](api/events/[id].ts): CRUD for shop events (reads are public; writes require auth/admin).
- [Hero API](api/hero/index.ts): read/update hero content.
- [Images API](api/images/index.ts), [upload](api/images/upload.ts), [delete](api/images/delete.ts): manage calendar image records and storage.
- [AI extract hours](api/ai/extract-hours.ts): optional Azure OpenAI-based extraction of hours/events from a calendar image.

## Data / SQL

- [Schema](sql/supabase-schema.sql): tables, indexes, RLS policies, storage policies.
- [Auth security](sql/supabase-auth-security.sql): auth hardening policies.
- [Admin allowlist](sql/setup-admin-allowlist.sql): bootstrap allowlist for admin access.

## Optional

- [Supabase connectivity test](scripts/test-supabase.js): quick verification of tables/bucket/credentials.
- [Setup helper script](scripts/setup-database.js): prints setup instructions.