Contract Builder Front

Front-end for the contract builder project — a React + TypeScript SPA scaffolded for a future Canva-inspired design experience.

Stack

• React 19 + TypeScript + Vite
• Tailwind CSS v4 (@tailwindcss/vite, CSS-first @theme tokens)
• TanStack Router (file-based routes)
• TanStack Query (server state)
• Axios (HTTP — data layer only)

Architecture

src/
  app/            # Bootstrap, providers, router
  routes/         # TanStack routes (thin wiring)
  domain/         # Entities, ports, use cases
  data/           # Axios, DTOs, mappers, repository impls
  presentation/   # Atomic components, hooks, pages
  shared/         # Env, types, utilities

Dependency flow: Routes → Pages → Hooks → Use Cases → Repository Ports ← Repository Impl → Axios

Example feature: App Status

Demonstrates the full flow from GET /health to UI:

• Domain: src/domain/entities/app-status.ts, use-cases/get-app-status.ts
• Data: src/data/repositories/app-status.repository.ts
• Presentation: src/presentation/hooks/use-app-status.ts, HomePage.tsx

Getting started

npm install
cp .env.example .env.local   # optional; defaults to http://localhost:3000/api
npm run dev

Open http://localhost:5173.

Scripts

Command	Description
npm run dev	Start dev server
npm run build	Typecheck + production build
npm run preview	Preview production build
npm run lint	Run ESLint

Environment

Variable	Description	Default
VITE_API_URL	API base URL for Axios	http://localhost:3000/api

Adding a feature

1. Add entity + repository interface + use case in domain/
2. Add DTO, mapper, and repository implementation in data/
3. Add a presentation hook (one concern per hook)
4. Compose organisms/molecules/atoms; assemble in a page
5. Mount the page from a route file in routes/

See AGENTS.md and .cursor/skills/ for detailed conventions.

AI-assisted development

Project Cursor skills live in .cursor/skills/:

• frontend-clean-architecture
• atomic-design-ui
• presentation-hooks
• canva-inspired-ux

These skills enforce layer boundaries, atomic design tiers, hook patterns, and Canva-inspired UX direction.