Trackrr

The app follows Routes → Controllers → Services → Repositories, each layer with a single responsibility. Controllers never touch Prisma, services never manipulate req/res, and repositories hold no business rules. Dependencies flow in one direction.

Repositories can be mocked to test services in isolation; the Prisma client can be mocked to test routes end-to-end. Business rules stay in services, validations in schemas, and persistence changes never leak out.

All monetary fields use Decimal(12,2) in Prisma and are serialized as strings in JSON (“12.50” instead of 12.5). This avoids IEEE 754 precision issues — 0.1 + 0.2 === 0.30000000000000004 in JS — which accumulate in budget operations.

Serializing as string preserves precision until the consumer, which can choose the right representation for its context (libs like decimal.json the front, BigInt for exact math, or float conversion when precision isn’t critical).

The suite (Vitest + Supertest) runs 79 tests in ~1 second with no live database. The Prisma client is mocked via vi.mock, and each test explicitly configures the behavior of the consumed methods. Coverage includes routes, middlewares, services, mappers — the whole stack above persistence.

Trade-off: SQL bugs or broken migrations aren’t caught here. The complementary layer would be repository tests against real Postgres (testcontainers) in the CI pipeline.

UI state and server state are handled by different tools. Server state uses TanStack Query — cache, invalidation, refetch and in-flight dedup.

Zustand is used only where Query doesn’t fit: the { token, user } auth pair, which must be synchronous, persisted in localStorage and readable from outside-component code (Axios request interceptor). Server state and client state stay in distinct layers.

features/expenses/ bundles everything for the feature: api.ts, hooks.ts, schemas.ts, types.ts, components/. The app/ folder stays thin — each page is composition of these hooks and components.

Rule: features don’t import from one another. Anything cross-cutting goes to shared/. The blast radius of any change stays contained within the feature folder.

The easier path would be adding Puppeteer/Playwright to the Express API and rendering PDFs on the back-end — pixel-perfect, any CSS works, but the cost would be too high.

@react-pdf/renderer on the client: JSX components become PDF binary directly in the browser, without rasterizing the DOM (which is what html2canvasdoes, and it comes out pixelated). The API stays decoupled from the format — if tomorrow export to Excel or Markdown is needed, it’s just another module in features/export/, without touching the back-end.