Tasks Tracker React

A task tracking app for projects, backlog, board, issue details, team members, and profile settings. Stack: React 19, Vite, TypeScript, React Router, TanStack Query, Vitest, Storybook.

Requirements

• Node.js: ^20.19.0 or >=22.12.0
• pnpm

Quick Start

pnpm install
pnpm dev

Scripts

• pnpm dev - local Vite dev server
• pnpm build - type-check + production build
• pnpm preview - preview production build
• pnpm test:unit - unit tests (Vitest)
• pnpm lint - ESLint
• pnpm format - Prettier for src/
• pnpm storybook - local Storybook
• pnpm build-storybook - Storybook build

Architecture

Code is split into layers:

• src/domain - domain types and pure client-side calculations
• src/features - feature action contracts used by UI and infra
• src/infra - adapters and implementations (fake API, mappers, storage)
• src/ui - pages, components, query-hooks, UI kit
• src/ui/router - routing and route wiring
• src/shared - shared pure utilities such as Result

Dependency Flow

• domain is pure and does not depend on features/infra/ui
• features define action contracts over domain types
• infra implements feature actions and maps DTOs to domain models
• ui/query-hooks adapt feature actions to TanStack Query
• page views define their own deps contract from the actions they actually use

Error Model

Actions return AsyncResult<T, InfraError>:

• ok: true -> success result
• ok: false -> error
  • infra -> infrastructure error

The UI handles expected errors through Result instead of relying on exceptions across layer boundaries.

Tests

• Unit tests for domain, infra, and helpers
• Storybook stories for main page-view components

Run:

pnpm test:unit