Inspiration
Managing a fixed monthly budget can be difficult, especially for students. It is easy to keep spending without realizing how close you are to your limit. I wanted to build something that would not just record expenses, but actually interpret them and tell me when I was approaching or exceeding my budget.
That idea became Budget Beacon — a simple expense tracker focused on making budget status immediately understandable. The key idea is a warning at 80% of the monthly budget and an exceeded alert at 100%.
What it does
Budget Beacon lets users set a monthly budget and track both expenses and income.
The dashboard shows:
- Monthly budget
- Total expenses
- Percentage of budget used
- Remaining budget
- Income separately from expenses
- Budget status and alerts
- Categorized spending
- A current-month spending chart
When spending reaches 80%, Budget Beacon shows an "Approaching budget" warning. At 100% or more, it shows a "Budget exceeded" alert.
Transactions, including the budget, are stored in the browser using localStorage, so the data remains available after refreshing the page.
How we built it
I built Budget Beacon as a solo project using Vite + React + TypeScript.
The application uses a centralized React state with shared calculation functions for budget totals, alerts, filters, and chart data. I used plain CSS for the interface and built the spending visualization using SVG instead of adding a chart library.
For reliability, I added Vitest and React Testing Library to test the important calculations and user interactions. I also implemented hand-written runtime validation for data loaded from localStorage, including handling malformed or partially corrupted saved data.
The project was built incrementally in five slices, starting with the core budget-alert logic and then adding transaction management, persistence and recovery, filtering and visualization, and finally accessibility, responsive behavior, and integration testing.
Challenges we ran into
One of the main challenges was deciding how to handle data stored in localStorage. Browser storage can contain malformed or partially corrupted data, so the application needed to validate saved budgets and transactions instead of blindly trusting them.
Another challenge was making sure that income does not affect the budget calculations. Only expense transactions contribute to the percentage used, remaining budget, and budget alerts.
I also had to handle calendar-month boundaries correctly. Budget Beacon stores transactions across months but only uses transactions from the current local month when calculating the current budget status.
Finally, building the project with an AI coding agent required me to review and test the generated code instead of simply accepting it. Several small implementation issues were caught through TypeScript, tests, and build validation before they could become larger problems.
Accomplishments that we're proud of
I am proud that Budget Beacon goes beyond being a basic expense tracker. Its main focus is interpreting spending and communicating the user's budget state clearly.
I am also proud of building the project with a structured, test-driven workflow rather than generating the entire application at once. The final project has 24 automated tests, a production build, responsive styling, keyboard-accessible interactions, local persistence, and recovery handling for corrupted data.
Another accomplishment was keeping the architecture intentionally simple. The project does not require a backend, authentication, or external database, which keeps the proof of concept focused on its core idea.
What we learned
I learned how important it is to make architectural and product decisions before writing implementation code.
Working with an AI coding agent also taught me that AI-generated code still needs to be reviewed, tested, and debugged. Breaking the project into small slices made it much easier to understand what was being built and catch problems early.
I also learned more about React state management, TypeScript type design, browser localStorage, runtime validation, automated testing, SVG-based visualization, accessibility, and responsive UI development.
Most importantly, I learned how to use AI as a development partner while still making and understanding the important technical decisions myself.
What's next for Budget Beacon
The current version is intentionally a local proof of concept. Future versions could add:
- Savings goals and dedicated savings tracking
- Richer multi-month history and comparisons
- Customizable alert thresholds
- Recurring transactions
- Authentication and multiple users
- Cloud synchronization across devices
- A hosted version of the application
The goal would be to keep the simple budget-alert experience while gradually turning Budget Beacon into a more complete personal budgeting tool.
Log in or sign up for Devpost to join the conversation.