FinEdge Sandbox

A fictional finance dashboard built with React and TypeScript. Used as a training/demo project for financial dashboard development patterns.

Stack

• React 19 + TypeScript 5 (strict mode)
• Vite 6 — dev server and build
• Tailwind CSS 4 — styling
• Vitest 3 + React Testing Library — unit and component tests
• MSW 2 — API mocking in tests

Getting Started

Requires Node.js >= 20. Use nvm to match the pinned version:

nvm use
npm install
npm run dev

Scripts

Command	Description
npm run dev	Start dev server
npm run build	Type check + production build
npm run preview	Preview production build
npm run test	Run tests in watch mode
npm run test:run	Run tests once (CI)
npm run typecheck	TypeScript type check
npm run lint	ESLint (warnings as errors)

Project Structure

src/
├── components/       # React components
├── hooks/            # Custom hooks
├── types/            # TypeScript types (generated from OpenAPI)
├── utils/            # Utility functions (e.g. currency formatting)
└── test/             # MSW handlers and server setup
docs/
└── api/
    └── openapi.yaml  # FinEdge Accounts API spec

API

The app consumes the FinEdge Accounts API (mocked in tests via MSW). See docs/api/openapi.yaml for the full spec.

Key endpoints:

• GET /v1/accounts/{accountId} — account balance and metadata
• GET /v1/accounts/{accountId}/transactions — paginated transaction list

Amounts are in minor units (pence/cents). Supported currencies: GBP, USD, EUR.

CI

GitHub Actions runs on every push and PR to main:

1. TypeScript type check
2. Vitest test suite