Budget Sentry
Personal Expense and Budget Planner designed to help students track and control spending.
Project Overview
Budget Sentry is a personal expense and budget planning application designed to help students and individuals record expenses, categorize spending, monitor budgets, and understand their financial habits.
Problem Statement
Students and individuals often find it difficult to track their daily spending, understand where their money is going, and control unnecessary expenses. Budget Sentry provides a simple platform to record expenses, organize them by category, compare spending against budgets, and view financial summaries.
Project Objectives
- Record daily expenses
- Categorize transactions
- Set monthly budgets
- Calculate total spending
- Display category-wise spending
- Identify overspending
- Generate tables and charts
- Improve personal financial awareness
Target Users
Key Features
- Add daily expenses
- Edit expense
- Delete expense
- View expense history
- Filter by date
- Filter by category
- Search expenses
- Add notes
- Add payment method
- Set monthly budget
- Set category-level budgets
- View budget usage
- Receive overspending warnings
- Compare planned versus actual spending
- Daily/Weekly/Monthly reports
- Pie/Bar/Line charts
System Architecture
Next.js App Router serves as the unified frontend and backend (API routes). React Hook Form manages form state, Zod validates inputs, Prisma coordinates SQLite reads/writes, and Recharts builds fluid graphical diagrams.
Database Structure
SQLite houses the Transaction (id, amount, date, category, notes, paymentMethod) and Budget (id, limit, month, categoryLimits) tables.
User Workflow
1. Land on Dashboard and see budget health. 2. Set monthly limit. 3. Input dynamic expenses with Category & Amount. 4. Observe immediate chart updates and threshold warnings.
Challenges Faced
Managing state consistency between the local list views and the Recharts SVG render tree.
Solutions Applied
Lifted the transaction array state to a React context provider and integrated debounced updates to prevent redraw lag.
Learning Outcomes
Learned the details of Next.js dynamic routing, responsive charting layout, and database integration using Prisma.
Future Enhancements
Interactive Demo
Try both versions of Budget Sentry right here in your browser!
Beginner Version: Runs entirely in-browser using localStorage. No backend needed. State is stored in your browser and data persists between refreshes on the same device. Uses a pure SVG pie chart built from scratch.