Finances Frontend Architecture

Finances Frontend Architecture An architecture diagram generated by Archify. React 19 SPA · Vite dev :5173 · Architecture component React 19 SPA Vite dev :5173 Cloudflare Pages · CDN + hosting · Architecture component Cloudflare Pages CDN + hosting finances-api · backend :3001 · Architecture component finances-api backend :3001 PostgreSQL · durable state · Architecture component PostgreSQL durable state Plaid Link · bank sync API · Architecture component Plaid Link bank sync API Chart.js CDN · visualization · Architecture component Chart.js CDN visualization HTTPS fetch + cookie session SQL OAuth + bank sync load CDN Legend Frontend Backend Database Cloud External

Frontend Stack

  • • React 19 + Vite 6 SPA without router
  • • Domain-driven structure (products, transactions, receipts, savings, debts, family-bank, analysis)
  • • Global state via AppStateContext
  • • Auth via AuthContext + cookie session

Backend Integration

  • • finances-api backend :3001
  • • Session cookies (credentials: include)
  • • apiFetch wrapper intercepts 401
  • • Contract: _shared/contracts/finances/api-contract.yaml

External Services

  • • Plaid Link: bank account sync
  • • Chart.js CDN: trend visualizations
  • • Deployed on Cloudflare Pages