Tech Stack

This page explains the main technologies in the current codebase and what role each one plays.

Frontend App

• React 19 powers the UI layer.
• TanStack Router handles file-based routing and route loaders.
• Vite provides local development and production builds.
• TypeScript is used across the app for typed routes, components, and docs metadata.

Documentation System

• Fumadocs powers the docs layout, MDX rendering, and sidebar structure.
• Documentation content lives in content/docs as MDX files.
• The docs navigation comes from Fumadocs' own source loader (src/pages/docs/api/source.server.ts, configured in source.config.ts) and each directory's meta.json, not from a hand-written nav module.
• Route rendering happens through the /docs/$ route in src/app/routes/docs/$.tsx.

Styling and UI

• Tailwind CSS v4 is the primary styling system.
• shadcn and class-variance-authority support reusable UI patterns and component variants.
• lucide-react provides iconography.
• next-themes is available for theme support.
• Two type faces: Lora for the document and DM Sans for the app, with system monospace for authored source only (Tailwind rules).

Component Development

• Storybook is set up for isolated component work and documentation.
• The current repo includes atomic button stories as the first Storybook slice.

Testing

• Vitest is configured for automated tests.
• Testing Library is available for component and DOM-level testing.
• Playwright is installed for browser-level testing when needed.

Mermaid and Rich Content

• MDX pages support fenced mermaid blocks for workflow and sequence diagrams.
• beautiful-mermaid is included to improve Mermaid rendering in the docs experience.

Backend and Domain Architecture

• The documentation assumes a Convex-backed runtime and schema model for documents, parties, sessions, and response flows.
• That backend model is documented under Schemas.
• Workflow-specific behavior, such as OTP authentication and interview progression, is documented under Workflows & Logic.

Why This Structure

• Tech Stack explains what the app is built with.
• Schemas explains how the legal document data model is structured.
• Workflows & Logic explains how users and documents move through the system.

That order keeps platform context separate from domain design and process behavior.