| Stack | Role | Year | Status |
|---|---|---|---|
| Vue.js 3, TypeScript, Chart.js, Tailwind CSS | Frontend Developer | 2023 | Live |
Personal Finance Tracker
A modern web application for tracking personal income and expenses with visual analytics
Personal Finance Tracker — A modern web application for tracking personal income and expenses with visual analytics is a technical case study on ancel.co.ke documenting architecture, trade-offs, and outcomes. To turn raw numbers into clear spending insights, I built a client-side Vue 3 app that keeps calculations and UI in sync and degrades gracefully when storage or rendering fails. Ancel Ajanga wrote this case study from hands-on delivery experience in Kenya.
A creative frontend experiment exploring modern UI patterns and data visualization techniques. This project demonstrates Vue 3's Composition API, reactive state management, and interactive charting capabilities for personal finance tracking.
The Problem
People struggle to track spending habits and understand where their money goes. Traditional spreadsheets are cumbersome and don't provide visual insights. This project explores how modern frontend frameworks can create intuitive, visually engaging financial tracking experiences.
To turn raw numbers into clear spending insights, I built a client-side Vue 3 app that keeps calculations and UI in sync and degrades gracefully when storage or rendering fails.
The Solution
I built a Vue 3 application with Chart.js for data visualization, using the Composition API for logic reuse and Vue's reactivity system for real-time financial calculations. The project demonstrates modern UI patterns, smooth animations, and responsive design principles.
Key Technical Terms
- Composition API:In this tracker, reusable logic (totals, category sums) lives in composables so the same calculations drive both the list and the charts; that supports the goal of a single source of truth and a maintainable codebase.
- Reactive state:Income and expenses are reactive so adding or editing a transaction immediately updates totals and pie charts without manual refresh; that keeps the experience instant and aligned with the project's focus on clarity.
- Client-side persistence:Data is stored in localStorage so the app works offline and across sessions; for this project that avoids a backend while making loss of data (e.g. cleared storage) a known failure mode we handle with clear UX.
The Impact
This creative experiment showcases modern frontend development practices, demonstrating Vue 3's capabilities for building interactive, data-driven applications. Users can track spending patterns with visual feedback, exploring how modern UI patterns enhance financial tracking experiences.
95+
Outcomes
- Clean, intuitive user interface
- Real-time expense tracking
- Visual analytics for spending patterns
- Mobile-responsive design
Failure Modes & Resilience
LocalStorage full or unavailable: the app checks for quota and write errors and shows a clear message so users know data may not persist. Chart render failure: Chart.js is wrapped so a broken config or missing data does not crash the page; we fall back to a simple table or message. Invalid or missing input: form validation and reactive defaults prevent NaN or empty totals; the UI stays consistent.
Outcome & Future Potential
This creative experiment showcases modern frontend development practices, demonstrating Vue 3's capabilities for building interactive, data-driven applications. Users can track spending patterns with visual feedback, exploring how modern UI patterns enhance financial tracking experiences.
95+
Lighthouse performance score
Project Gallery