Loan Database Dashboard

Problem

Build a loan-management admin dashboard end-to-end without a real backend, while still proving the UI behaves correctly on realistic data, persists across sessions, and stays responsive on a desktop user's typical workflow.

Approach

• 01

  Modelled the API contract first and stood up a Mirage JS server that mirrors it — so the frontend code is identical between mocked and real backends.

• 02

  Generated realistic-shape data with JSON Generator (varied user states, balances, dates) so visual tests caught real edge cases instead of golden-path-only bugs.

• 03

  Persisted user state to IndexedDB via a thin storage adapter — survives reload, survives tab close, but resettable for QA.

• 04

  Used TypeScript end-to-end with strict typing on the API responses and component props; refactors stopped being scary.

• 05

  Component library: Material UI for the heavy lifting, SCSS modules for the few places MUI was the wrong fit.

Outcome

• 01

  Local development was fast: no auth setup, no environment juggling, no backend to keep alive.

• 02

  Edge cases (empty states, partial loads, RBAC mismatches) showed up early because the seeded data forced them.

• 03

  When the real backend arrived, swapping the Mirage layer for the live API took an afternoon — every component talked to the contract, not to Mirage directly.

Lessons

• 01

  Mock the API at the contract boundary, not inside components. The blast radius when the real backend arrives stays tiny.

• 02

  Realistic seed data is part of the test strategy. Five sample rows in five different states catches more bugs than one in the happy path.

• 03

  TypeScript pays back the most when you refactor — and you will refactor.