Project case study
Expense Tracker Web App
A practical product with clear interaction design and disciplined frontend state handling.
Problem
A responsive finance tracker with category-aware inputs, persistent storage, and immediate feedback loops for day-to-day budgeting.
Context
Built from March to April 2025 as a mobile-friendly budgeting tool for recording income and expenses, reviewing category patterns, and maintaining a monthly view.
My Role
AI/ML Engineer, Data Systems Builder & Motion UI Developer
Contribution
- Built responsive income and expense entry flows with immediate balance and category feedback.
- Added interactive data visualization for spending review.
- Used localStorage persistence so transactions remain available across browser sessions.
- Designed the interface to remain usable on mobile layouts.
Architecture
Transaction input
Collects categorized income and expense records.
Feeds Application state
Application state
Calculates balances and prepares category totals.
Feeds Local storage, Budget views
Local storage
Persists transaction records in the current browser.
Feeds Application state
Budget views
Renders balances, category summaries, and interactive charts.
Terminal stage
Engineering Decisions
Use localStorage for the project persistence layer
Reason: The budgeting workflow remains usable without a backend deployment.
Tradeoff: Records do not synchronize across devices or user accounts.
Update summaries immediately after each transaction
Reason: Budgeting feedback is most useful at the moment a record changes.
Tradeoff: Derived totals must remain consistent with every create, edit, and delete path.
Outcomes
No measured outcome is documented in the current source archive.
Limitations
- Browser-local persistence does not provide accounts, cloud backup, or multi-device synchronization.
- No public usability study or financial-outcome metric is linked.
Stack
- React
- JavaScript
- Charts
- Responsive Design
- Local Storage
Evidence
No external evidence is linked to this project.