The Friction — Obfuscated Personal Finances
Keeping track of personal savings, debts, and assets across different platforms is frustrating. Most commercial finance apps are bloated with ads, require cloud syncing, or charge subscriptions. More importantly, none of them natively handle Zakat—an annual wealth-sharing calculation that is a core requirement of my financial planning. I needed a private, lightweight, and offline-capable dashboard.
The Architecture — Vanilla MVC without Frameworks
To avoid library fatigue, I built the app using vanilla JavaScript. I drafted a strict, 38-stage build specification detailing state machines, view updates, and storage logic before writing a single line of code. Sticking to the Model-View-Controller (MVC) pattern kept state changes decoupled from DOM updates.
"In vanilla development, structure is your compiler guard. Without React or Vue to manage DOM sync, we engineered a custom Pub/Sub event dispatcher to trigger interface updates whenever the underlying ledger state changes."
This approach ensured that all financial calculations occurred within isolated modules, independent of the UI layers.
Core Mechanics — Local Storage & PWA Integration
The application functions as a fully offline Progressive Web App (PWA). Data is saved directly in browser LocalStorage, preventing external servers from seeing sensitive personal transaction details.
The Spec Trap — Rigid Specifications vs. Real agility
The 38-stage build specification kept the project focused, but it became a double-edged sword during development. It prevented scope creep, but made minor styling adjustments expensive.
"Over-specifying a build creates coding rigidity. I spent hours refactoring event listeners simply because I hadn't budgeted for a nested DOM container node in stage 14 of the design spec."
It taught me that while rigid planning is valuable for core logic, front-end visual structures require flexibility and iterative prototyping to feel polished.
Retrospective — Decoupling Math Engines
If I rebuilt this engine, I would separate the financial logic (like Zakat gold/silver price ratios) into pure, stateless mathematical helper functions earlier. Mixing math equations with MVC state registers made unit testing difficult. Isolating calculations from the app state is a practice I now apply to all projects.