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 signed-in app, 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/          the signed-in app (own layout: sidebar + topbar)
│   ├── layout.tsx
│   ├── page.tsx        home
│   ├── tasks/  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 App: the signed-in pages (home, tasks, account, admin) and how they are 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.