Live App →
Developers

Frontend Architecture

Next.js 16 App Router, Zustand state management, React Query, and Tailwind CSS design system.

For Developers

Frontend Architecture

Sentinel’s frontend is a Next.js 16 application using the App Router, built for performance, type safety, and developer velocity.

Stack

Layer Technology Purpose
Framework Next.js 16 (App Router) SSR, routing, API routes
Language TypeScript 5.4 Type safety across the stack
Styling Tailwind CSS 3.4 Utility-first CSS
State Zustand 4.5 Global client state
Data React Query 5 Server state, caching, mutations
Forms React Hook Form + Zod Validation and form handling
Charts Recharts Portfolio visualisations
Icons Lucide React Consistent iconography

Project Structure

sentinel-frontend/
├── app/                          # Next.js App Router
│   ├── (auth)/                   # Auth layout group
│   │   ├── login/
│   │   └── register/
│   ├── (dashboard)/              # Dashboard layout group
│   │   ├── page.tsx              # Dashboard home
│   │   ├── nexus/                # Document intelligence
│   │   ├── zen/                  # Financial chat
│   │   └── profile/
│   ├── layout.tsx                # Root layout
│   └── globals.css               # Tailwind directives + tokens
├── components/
│   ├── ui/                       # shadcn/ui primitives
│   ├── nexus/                    # Document-specific components
│   ├── zen/                      # Chat-specific components
│   └── shared/                   # Cross-cutting components
├── hooks/                        # Custom React hooks
├── stores/                       # Zustand stores
├── lib/
│   ├── api-client.ts             # Typed API client
│   ├── auth.ts                   # Auth helpers
│   └── utils.ts                  # Utilities
└── types/                        # Shared TypeScript types

Routing

Route Layout Auth Description
/ root redirect Landing / dashboard redirect
/login (auth) no SSO login
/register (auth) no Tenant registration
/dashboard (dashboard) yes Portfolio overview
/nexus (dashboard) yes Document list
/nexus/upload (dashboard) yes Upload drop zone
/nexus/documents/[id] (dashboard) yes Document detail
/zen (dashboard) yes Chat session list
/zen/chat/[id] (dashboard) yes Active chat
/profile (dashboard) yes User settings

Data Flow

User Action → React Component → React Query → API Client → Studio BFF → Backend
                     ↑              ↓
                Zustand Store   Cache / Invalidate

All API calls route through api-client.ts, which:

  1. Injects the Bearer JWT from localStorage
  2. Unwraps the ResponseEnvelope<T> automatically
  3. Refreshes tokens on 401 responses
  4. Serialises/deserialises dates and bigints

Design System

Sentinel uses a custom Tailwind configuration with:

  • Tokens: Semantic colour scales (bg-canvas, ink-primary, border-subtle)
  • Typography: DM Sans (body), Cormorant Garamond (headings), IBM Plex Mono (code)
  • Spacing: 4px grid system with rem scaling
  • Radii: 6px (sm), 12px (md), 20px (lg), 999px (pill)
  • Shadows: Elevation scale from sm to lg with audience-tinted glow variants

See Design system for the full token reference.