Frontend Architecture
Technical design of the Next.js App Router and design system
Overview
The Danvas frontend is built on Next.js 16 using the App Router. It prioritizes Server Components for data fetching and performance, while utilizing Client Components for rich interactivity.
Key Patterns
- Server Components: Used for all initial page loads and high-performance data views.
- Client Components: Used for forms, interactive charts, and real-time chat.
- Server Actions: Preferred pattern for data mutation and form submission.
- TanStack Query: Used for client-side caching and optimistic updates.
Design System (@repo/design-system)
Our design system is built on shadcn/ui and Tailwind CSS v4.
- Primitives: Accessible, low-level components from Radix UI.
- Composition: Prefer composing simple components over large, prop-heavy ones.
- Theming: Supports system-aware dark mode and location-specific brand colors.
Common Features
Form Patterns
Validation with Zod and submission via Server Actions.
Components
Custom components like StarRating built on the design system.
Image Management
Vercel Blob storage and HEIC conversion.
PWA & Offline
Service worker configuration and push alerts.