Frontend

The frontend is a Next.js 16 / React 19 app (frontend/public-page) using the App Router, Tailwind CSS v4, next-intl for localisation, and a small design-system of shared primitives. It serves the public landing page, the authentication flows, the authenticated console, and these docs.

App Router structure

app/
├── layout.tsx          root layout — fonts, i18n provider, auth providers
├── page.tsx            landing
├── login/  register/  forgot-password/  reset-password/  verify-email/
├── dashboard/          authenticated console (own layout: sidebar + topbar)
│   ├── layout.tsx
│   ├── page.tsx        overview
│   ├── account/  admin/
├── docs/               this documentation (MDX)
└── shared/
    ├── ui/             design-system primitives
    ├── components/     larger pieces (e.g. architecture diagram)
    └── auth/           ProtectedRoute, providers

The root layout wires the global providers once — next-intl, tooltip, Google OAuth, auth and user contexts, and toast notifications — so every route inherits them. The dashboard layout adds the authenticated chrome (sidebar + topbar).

How to read this section

Each page covers one part of the frontend:

1. Design System — the design tokens that drive all styling, and the shared UI primitives built on them.
2. Internationalisation — how the eight locales work and how components consume translations.
3. The Console — the authenticated dashboard and how it is protected.
4. Calling Backend Services — the API client layer and the steps to wire a new service in.
5. Writing Docs — how these MDX pages are built and how to add one.

Next: Design System.