Features
The @frame/next application provides a broad set of features aimed at the needs of a modern web application:
Server state
Section titled “Server state”We use @tanstack/react-query together with @better-fetch/fetch for asynchronous data fetching, caching, and invalidation.
Client state
Section titled “Client state”We delegate complex interactive state to zustand, keeping workflows predictable and reactivity fast.
Forms and validation
Section titled “Forms and validation”Form handling runs on the client with react-hook-form combined with @hookform/resolvers and zod for end-to-end type safety.
Prefer the Zod schemas available in
@frame/models/for form validation.
Styles and design system
Section titled “Styles and design system”apps/next uses Tailwind CSS v4 and local shadcn/ui components in src/components/ui.
- Prefer Tailwind utilities and
cn()over inline styles. - CSS Modules only for complex page layout — not as the primary design system.
Authentication
Section titled “Authentication”Implemented in src/auth and orchestrated by the @frame/auth SDK.
Transactional email
Section titled “Transactional email”Logic lives in src/modules/mail, consuming interactive templates generated by @frame/mail.
Testing
Section titled “Testing”Keeping this layer stable is essential. We define coverage thresholds that CI verifies automatically through Vitest.
| Test level | Scope and tools | Command |
|---|---|---|
| Unit | Zod schemas, DTOs, config builders, and Zustand state slices. | pnpm test |
| Component integration | Rendering with React Testing Library (RTL) + userEvent to simulate user interactions. | pnpm test |
| End-to-End (E2E) | Real browsers running full flows with real interactions, via Playwright. | pnpm test-e2e |