Design Studio Showcase
Design studio portfolio showcase with admin-editable content sections
// Built with
react
typescript
supabase tailwind-css zustand
zod Turbo
pnpm framer-motion GSAP shadcn-ui TanStack Table react-hook-form cursor-ai01 Problem
A web platform needed a flexible content management system that could handle diverse content types without requiring a new database table for each type. The architecture had to support declarative composition where developers specify what content they need and the system handles fetching, state management, and real-time updates automatically.
03 Solution
Designed and built a monorepo web platform using Next.js 15, React 19, and Supabase. Created a two-table CMS pattern (sections + content) with flexible JSONB columns that eliminates the need for table-per-content-type. Built a declarative composition architecture with Zustand stores that auto-hydrate from server data. Used Turbo for build orchestration across three workspace packages.
04 Outcomes
Qualitative
- Flexible CMS covering all content types with two database tables
- Declarative composition reduces boilerplate for new content types
- Type-safe from database to client via Zod validation
- Monorepo with shared packages for consistent code reuse
06 Constraints
- Content types must be extensible without schema migrations
- SSR required for SEO and performance
- Real-time content updates for editors
- Shared packages across multiple applications
07 Innovation
Two-table CMS pattern: sections + content with flexible JSONB columns covers all content types without table-per-type proliferation. Declarative composition architecture where components declare what content they need and the system handles fetching, state hydration, and real-time updates automatically via Zustand stores.
Novelty: high
