Context
Context
The visual design, starter data, fonts and image assets originate from Frontend Mentor; the implementation turns the brief into a framework-free application with explicit boundaries.
Problem and constraints
Problem and constraints
The brief required a usable finance dashboard with transactions, budgets, savings pots, recurring bills, filtering and currency conversion while keeping domain behaviour understandable.
Role
Role
Frontend implementation, architecture, documentation and automated verification.
Decisions
Decisions
Domain state, UI state and URL-owned routing state are separated. Actions own mutations, selectors derive read models, persistence normalises stored data, and views render prepared data without owning domain rules.
Contribution
Contribution
Implemented native ES modules, domain actions, pure selectors, UI state, hash routing, persistence, reusable views and components, currency API integration and the automated test harness.
Architecture and implementation
Architecture and implementation
Native ES modules divide the application into state, persistence, actions, selectors, views, components, handlers, router and an isolated currency service. The browser provides the runtime; no framework dependency is used.
Verification
Verification
The repository includes automated unit tests for utilities, state, persistence, actions, selectors, router, components and currency handling, plus integration tests for bootstrap, supported routes and event-listener registration.