brokle-frontend-dev

Brokle's feature-based architecture organizes each feature in its own directory with a public API index file. Create a feature folder with subdirectories for components, hooks, API clients, and stores, then export public interfaces through an index file to enforce modular boundaries and prevent cross-feature imports.

Use React Query for server state and API synchronization, Zustand for client state, and React Hook Form with Zod for form validation. This separation keeps server data fresh, client UI state predictable, and form logic testable across your Next.js application.

Server Components handle data fetching and rendering on the server for performance and security; use Client Components only for interactive features requiring hooks, state, or event listeners. The Skill provides templates for both patterns within Next.js 15.5.2 App Router architecture.

Enable TypeScript strict mode in tsconfig.json and configure Tailwind CSS 4.1.15 with the OKLCH-based design system and next-themes for dark mode support. This enforces type safety and ensures consistent styling aligned with Brokle's design guidelines.

Yes. shadcn/ui components integrate seamlessly with React Hook Form for state management and Zod for schema validation. The Skill provides component templates and patterns for building validated forms across your Next.js application.

Vitest paired with React Testing Library and MSW (Mock Service Worker) provides unit, component, and API testing. This stack enables fast test execution, realistic component testing, and server request mocking without hitting live APIs during development.