Project Goal
This project was created to solve a common problem: helping individuals efficiently manage their personal finances by tracking expenses across categories and generating insightful reports. The application is designed for users who want a clear overview of their spending habits, allowing them to add, categorize, and analyze expenses, compare monthly and yearly trends, and ultimately make better financial decisions.
My Role
I worked as part of a two-person development team, jointly responsible for the full cycle of project implementation. My responsibilities included backend development (Java), frontend development (vanilla JavaScript, HTML, CSS), designing the application architecture, implementing core features (expense CRUD, category management, report generation), and setting up deployment (Docker, Render). I also contributed to UI/UX design, ensuring a responsive and modern interface, and handled API integration between frontend and backend.
Key Features
- Add, edit, and delete expense records
- Categorize expenses for detailed analysis
- Create, rename, and remove custom categories
- Generate reports by category, month, or year
- Visualize spending trends using charts (Chart.js)
- Responsive design with dark mode support
- Compare expenses between months/years to analyze changes
- Local and server-based report generation (fallback for offline/failed requests)
Tech Stack
- Frontend: HTML5, CSS3, vanilla JavaScript, Chart.js for data visualization
- Backend: Java 17, custom lightweight HTTP server
- Database: File-based storage (expenses.txt, categories.txt)
- Deployment: Docker, Render
- Other: RESTful API for frontend/backend communication
Architecture
- Backend: Custom REST API implemented in Java, with classes like SimpleExpenseServer, BudgetApp, ExpenseCategoryManager, and ExpenseReportGenerator. Handles all business logic and data storage.
- Frontend: Organized as single-page application logic, using client-side rendering (CSR). All interactions are asynchronous via API calls.
- Deployment: Dockerized backend and frontend served via Render.
Integrations and API
- Chart.js: Used in the frontend for dynamic data visualization of expense reports.
- REST API: All expense and category operations, as well as report generation, are handled via RESTful endpoints served by the backend.
- No third-party financial integrations are present; all data is managed in-app for privacy.
Optimizations
- Responsive design for desktop and mobile using CSS media queries
- Dark mode toggle for better accessibility and user comfort
- Efficient client-server communication and local fallback for report generation in case of backend unavailability
- Minimal dependencies for faster load times; vanilla JS for most logic
Technical Challenges and Solutions
- Custom HTTP server: Instead of using a framework, I implemented a custom HTTP server in Java for full control and learning purposes.
- File-based storage: Managed concurrent access and data integrity manually, since no SQL/NoSQL DB was used.
- Report generation: Built both server-side and local fallback logic so reports remain available even if the backend fails.
- Deployment: Containerized the application for consistent deployment and easy scaling.
Result / Outcome
The project is fully functional and deployed as a live demo. It offers a complete MVP for personal expense management, with all intended features implemented. The codebase is well-structured and documented, ready for extension or production use.