Overview
The Personal Finance Tracker is a full-stack web application designed to help users manage their finances with ease. Users can track transactions, set budgets, and visualize spending patterns through an interactive dashboard. Built with a modern tech stack, this project demonstrates my ability to create responsive, user-friendly interfaces and secure, scalable backend systems. It combines React for a dynamic frontend, Spring Boot for robust API services, and an H2 database for efficient data storage, demonstrating end-to-end development expertise.
Technologies Used
Frontend
- React: Component-based architecture for modular UI.
- Axios: Handles HTTP requests to the backend API.
- Chart.js & react-chartjs-2: Renders interactive pie charts.
- CSS: Custom styles for a modern, user-friendly interface.
Backend
- Spring Boot: Powers the RESTful API and application logic.
- Spring Data JPA: Simplifies database interactions with H2/PostgreSQL.
- Spring Security: Configures CORS and API access control.
- H2 Database: In-memory database for development and testing.
- JavaFaker: Generates realistic demo data for testing.
- JWT: Included for potential authentication (not fully implemented).
Key Features
- Financial Dashboard: Displays a pie chart visualizing spending by category, powered by Chart.js, for quick insights into financial habits.
- Transaction Management: Allows users to add and view transactions with details like description, amount, category, and date.
- Budget Tracking: Enables users to set and monitor budgets for categories like Food, Rent, and Utilities.
- Secure RESTful API: Backend APIs handle CRUD operations for transactions and budgets, with CORS configured for secure frontend communication.
- Data Data Seeding: Populates the database with demo data (50 transactions and 5 budgets) using JavaFaker for realistic testing.
- Responsive Design: Features a modern, card-based UI with Poppins font, shadow effects, and hover animations, optimized for all devices.
How It Works
The application is divided into a React frontend and a Spring Boot backend, communicating via RESTful APIs. The frontend fetches data from the backend to display transactions, budgets, and a spending chart, while the backend handles data storage and retrieval using JPA and an H2 database.
- Dashboard: Aggregates transaction data by category and renders a pie chart using Chart.js.
- Transaction List: Fetches and displays all transactions in a card-based format.
- Budget List: Shows budgets with category and amount details.
- Add Transaction: Submits new transactions to the backend, which stores them in the database.
- Data Seeding: Populates the database with demo data on startup for immediate usability.
Challenges Overcome
- Dynamic Chart Updates: Ensured accurate pie chart rendering by normalizing transaction categories and aggregating amounts in the frontend. Used `useCallback` to optimize performance.
- CORS Configuration: Configured Spring Security to allow requests from the React frontend (`http://localhost:3000`), ensuring seamless API communication.
- JSON Serialization: Prevented infinite loops in JPA relationships by adding `@JsonIgnore` to `UserProfile` references in `Transaction` and `Budget` models.
- Demo Data: Implemented a `DataSeeder` with JavaFaker to generate realistic transactions and budgets, enhancing development and testing.
Future Improvements
- Implement user authentication using JWT to support personalized financial tracking
- Add budget forecasting algorithms
- Enhance the UI with additional visualizations, such as bar charts for monthly spending trends
- Integrate with real banking APIs for automatic transaction imports
- Transition to PostgreSQL for production-grade database management