Challenges I Ran Into

One of the major challenges during development was managing layout and sizing issues caused by inconsistent CSS box models. Elements such as cards, input fields, and progress bars were overflowing or misaligning due to padding being added outside defined widths. This was resolved by standardizing the use of box-sizing: border-box and cleaning up duplicate CSS rules to ensure predictable layouts.

Another hurdle was ensuring that JavaScript logic executed correctly across multiple pages. Since the application relied on shared data, some pages failed silently when scripts were loaded in the wrong order. This was fixed by introducing a shared data file and enforcing a strict script-loading order, ensuring shared state was always available before page-specific logic ran.

A further challenge was connecting interdependent calculations across different screens. Updates in expenses needed to reflect immediately in the dashboard and settlements. This was addressed by centralizing all expense data and deriving calculations dynamically, rather than hardcoding values in individual pages.

Finally, balancing UI polish with usability required iteration. Early designs looked visually appealing but felt heavy for a finance tool. By reducing visual noise, simplifying interactions, and prioritizing clarity over decoration, the final interface became more intuitive and trustworthy for daily use.