Frontend

The web app (ragnarock) uses Next.js 16 App Router, React 19, Tailwind CSS v4, and shadcn/ui. Business logic stays out of route files — pages compose layouts and call the API layer.

Directory layout

Routing conventions

• app/**/page.tsx — thin route entries only
• layouts/** — composition, data loading boundaries where used
• components/** — reusable UI and domain widgets

Example pattern:

// Route delegates to layout — avoid heavy logic here
export { default } from "@/layouts/dashboard/projects/projects-page-layout";

Key routes

Full table: Navigation.

API client

src/api/client.ts — axios instance with NEXT_PUBLIC_API_URL (default http://localhost:8000).

src/api/endpoints.ts — path constants mirroring NestJS controllers. Always add new endpoints here instead of hardcoding strings.

Auth cookies are sent automatically when using the shared client with credentials.

Auth client

src/lib/auth/auth-client.ts — Better Auth React client with organization plugin, aligned with server plugins in libs/auth/src/auth.instance.ts.

Styling

• Tokens: src/app/globals.css (oklch palette, Lexend + JetBrains Mono)
• Components: src/components/ui/* (shadcn radix-nova)
• Dark mode: next-themes via AppProvider

The docs site reuses the same token philosophy — see Phase 1 branding.

Commands

pnpm dev          # :3000
pnpm build
pnpm lint         # if configured
npx shadcn@latest add <component>

Related docs

• Quick start — env vars
• Backend — API map
• Authentication — session cookies