FinTrack
Modular ES6 Personal Finance Engine with Derived State
↳Derived state flow: transactions calculate net worth and categorical expenses on-the-fly without storage desynchronization
What was this and who was it for?
A software architecture experiment conducted in August 2026: building a stateful, multi-page financial tracking dashboard with vanilla JavaScript to master modularity before relying on React.
What was broken, frustrating, or missing?
Many vanilla applications store duplicate totals alongside raw transaction logs, which inevitably leads to desynchronized state and phantom calculations when records are edited or deleted.
Design & Platform Boundaries
- [1]Pure browser ES modules—no bundlers, no external frameworks.
- [2]Prevent circular dependencies between navigation, state manager, and UI renderers.
- [3]Strict data privacy: synthetic demo fixtures only, with zero third-party telemetry.
Architectural & UX Strategy
Established localStorage as a single append-only transaction hub, computing balances, category breakdowns, and net worth curves dynamically at runtime while resolving circular module dependencies through callback inversion.
Execution Highlights
What was compromised & what was gained?
- /Accepted recalculating aggregated metrics from raw records on page entry in exchange for absolute data integrity.
Verifiable Outcome
A modular, maintainable client-side finance application demonstrating robust JavaScript engineering, clean separation of concerns, and defensive state management.
"Deriving values on demand from a single source of truth is always cleaner than synchronizing separate caches. Frameworks come and go, but state discipline remains foundational."