How This Site Is Built
This project is a modern web stack organized as a multi-app workspace. The Studio lives in apps/studio and is powered by Sanity V4 for structured content, React 19 for UI, and TypeScript for type safety.
Core Technologies
- React + React DOM: Client rendering and component composition.
- Sanity Studio: Custom content schema, real-time collaborative editing, deployment via Sanity CLI.
- TypeScript: Strict typing, faster refactors.
- Vanilla Extract CSS: Scoped styling with theming.
- Lucide icons: Lightweight SVG icon set.
Development Workflow
Scripts in apps/studio automate common tasks:
- dev / start: Run the Sanity Studio locally.
- build / deploy: Produce and publish a production artifact.
- generate-types: Extract schema types, generate TypeScript definitions, then derive Zod literal helpers.
- format, lint, type-check: Enforce style, import order, conventions, and static correctness.
- clean: Remove build and cache artifacts.
Content Modeling
Sanity schemas define document types, fields, and relationships. Types are extracted and converted to TypeScript so UI code and content logic stay aligned. Zod literals enable safe usage of controlled vocabularies.
Code Quality
- ESLint (with Sanity config, import sorting, TypeScript rules).
- Prettier for consistent formatting.
- Commitlint ensures conventional commit messages for cleaner history and automated tooling.
- Strict TS compiler flags reduce runtime surprises.
Build & Deploy
- Author or edit content in the Studio.
- Generate updated types (generate-types) to keep code and schema synchronized.
- Build static assets (build).
- Deploy via Sanity’s hosting (deploy).
Why This Stack
- Real-time, schema-driven content.
- Future-proof React 19 features.
- Strong typing across content and UI.
- Fast iteration with reliable formatting and linting.
- Minimal runtime styling overhead with component scoping.
Extensibility
Add new content types by updating schema files in the Studio, regenerate types, and consume them directly in frontend components without manual wiring. Styling, validation, and editorial experience evolve independently.
This foundation balances flexibility (content modeling) with safety (types & tooling) and speed (scripted workflows).