Project Overview
A lightweight budget tracking application built in vanilla JavaScript, designed to practice modular architecture, state management, and UI separation without relying on frameworks.
The project focuses on writing maintainable, scalable frontend code using core JavaScript concepts that transfer directly to modern full-stack development.
Key Features
- Track income and expenses with real-time budget calculations
- Persist data locally using
localStorage - Automatic budget totals and percentage breakdowns
- Simple, user-friendly interface focused on clarity
Architecture & Design
Modular Structure
- Clear separation between data, UI, and application logic
- Loosely coupled modules communicating via public interfaces
- MVC-inspired architecture
State & Logic
- Centralized budget state
- Deterministic calculations for totals and percentages
- Event-driven updates to the UI
Technical Highlights
- Object-oriented JavaScript using constructor functions and prototypes
- Encapsulation of logic and state
- DOM manipulation and event handling without frameworks
- ES6+ syntax and best practices
Why This Project Matters
Although built without modern frameworks, this project demonstrates:
- Strong fundamentals in frontend architecture
- Ability to structure code for long-term maintainability
- Understanding of patterns that scale to React, Vue, and other frameworks
These principles directly inform my approach to building larger full-stack applications.
Related Projects
Personalized Content Discovery App
Articulo is a mobile content discovery app designed to help users consume information from sources they trust by following people whose reading habits inspire them.
Taksu Boards
Innovative surfboard brand built on a custom web platform that transforms surfboard selection into a guided, educational design experience with direct-to-consumer sales.