Live App →
Developers

Sentinel Frontend

Next.js 16 App Router, Zustand state management, React Query, and the single UI surface.

Sentinel Frontend

The single UI surface for the Sentinel platform. Next.js 16, App Router, Zustand, React Query, and Playwright E2E testing.

Tech Stack

Layer Technology
Framework Next.js 16 (App Router)
Language TypeScript 5.4
Styling Tailwind CSS
State Zustand (global) + React Query (server)
Forms React Hook Form + Zod
Charts Recharts
Testing Playwright (E2E), Vitest (unit)

Route Architecture

/                    ──► Home (landing)
/auth/login          ──► Login
/auth/register       ──► Registration
/dashboard           ──► Overview metrics
/documents           ──► Document list + upload
/documents/[id]      ──► Document detail + extraction
/zen                 ──► Chat sessions list
/zen/[id]            ──► Chat session
/reports             ──► Generated reports
/reports/[id]        ──► Report viewer
/settings            ──► User + tenant settings
/admin               ──► Admin dashboard

State Management

Zustand (Client State)

interface AppState {
  user: User | null;
  tenant: Tenant | null;
  theme: 'light' | 'dark';
  sidebarOpen: boolean;
}

React Query (Server State)

const { data: documents } = useQuery({
  queryKey: ['documents'],
  queryFn: fetchDocuments,
  staleTime: 30_000,
});

API Gateway Pattern

All backend calls route through Studio Middleware:

const api = axios.create({
  baseURL: '/api/v1', // Proxied to Studio
  headers: { Authorization: `Bearer ${token}` },
});

No direct backend access from frontend.

Testing

Type Tool Coverage
Unit Vitest > 70%
E2E Playwright Critical paths
Visual Playwright screenshots PR gate