For Developers

Frontend Guidelines

Frontend conventions for the JJI web application. These guidelines help maintain consistency across the dashboard, public pages, and shared components.

Component architecture

Shared UI primitives: Reusable components in components/ui/ built on shadcn/ui
Feature components: Feature-specific components live in app/dashboard/components/
Layout components: Shell components (sidebar, navbar, headers) in components/layouts/
Server components by default: Use client components only when interactivity is required

State management

Server state: TanStack Query for all API data fetching, caching, and mutations
Client state: Zustand stores for UI state (sidebar, filters, theme)
Form state: react-hook-form with Zod schemas
URL state: Search params for shareable filter states

Responsive design

The dashboard supports four breakpoints:

Wide desktop (1200px+)
Desktop (992px-1199px)
Tablet (768px-991px)
Mobile (<768px)

Use Tailwind breakpoint prefixes. Test all changes at each breakpoint.