Expense Tracker

Expense Tracker is a full-stack web application for managing personal expenses. It allows users to register, authenticate, add and manage expense records, apply multiple filters, and view monthly spending analytics with category-wise visualization. The project is split into a Spring Boot backend and a React frontend, with PostgreSQL used for persistence.

Overview

The goal of this project is to provide a clean end-to-end implementation of a personal finance tracker using modern backend and frontend tools. It demonstrates API design, layered backend architecture, authentication, database interaction, frontend state management, and data visualization.

Users can:

• Register an account
• Log in to access protected expense endpoints
• Add, update, and delete expenses
• View all expenses
• Filter expenses by category
• Filter expenses by amount range
• Filter expenses by date range
• View monthly analytics such as total spending, highest spending, and average daily spending
• View category-wise spending totals in chart form

Tech Stack

Backend

• Java 21
• Spring Boot
• Spring Web MVC
• Spring Data JPA
• Spring Security
• Bean Validation
• PostgreSQL
• Maven

Frontend

• React 19
• Vite
• Recharts
• Lucide React
• CSS

Backend Architecture

The backend follows a layered structure:

• Controller layer

  • Handles HTTP requests and responses
  • Extracts authenticated username where needed
  • Maps endpoints to service methods

• Service layer

  • Contains core business logic
  • Validates request conditions
  • Enforces ownership checks and application rules
  • Throws HTTP status exceptions for invalid operations

• Repository layer

  • Uses Spring Data JPA
  • Handles persistence and query generation
  • Supports filtering and analytics queries

• Model and DTO layer

  • Expense and users represent database entities
  • DTOs are used for create, update, response, and analytics payloads

Frontend Architecture

The frontend is built as a React SPA and communicates with the backend through REST APIs.

Main frontend responsibilities:

• Authentication flow
• Expense CRUD operations
• Filter handling
• Analytics rendering
• Error and success message display
• Dashboard state management

The frontend includes:

• API layer for backend communication
• Auth context for session state
• Pages for login and dashboard
• Reusable UI components for forms, tables, filters, and analytics

Project Structure

ExpenseTracker/
├── src/main/java/com/ExpenseTrackerProject/ExpenseTracker
│   ├── Application
│   │   ├── controller
│   │   │   └── trackerController.java
│   │   ├── dto
│   │   │   ├── Category.java
│   │   │   ├── CategoryTotalResponse.java
│   │   │   ├── createExpenseRequest.java
│   │   │   ├── expenseResponse.java
│   │   │   ├── monthlyAnalyticsResponse.java
│   │   │   └── updateExpenseRequest.java
│   │   ├── model
│   │   │   └── Expense.java
│   │   ├── repository
│   │   │   └── ExpenseRepository.java
│   │   └── service
│   │       └── trackerService.java
│   ├── Security
│   │   ├── configuration
│   │   │   └── SecurityConfig.java
│   │   ├── controller
│   │   │   └── userController.java
│   │   ├── model
│   │   │   ├── userPrinciple.java
│   │   │   └── users.java
│   │   ├── repository
│   │   │   └── UserRepository.java
│   │   └── service
│   │       ├── userDetailService.java
│   │       └── userService.java
│   └── ExpenseTrackerApplication.java
├── src/main/resources
│   └── application.properties
├── src/test
├── expense-tracker-ui
│   ├── src
│   │   ├── api
│   │   │   ├── auth.js
│   │   │   ├── client.js
│   │   │   └── tracker.js
│   │   ├── components
│   │   ├── context
│   │   ├── pages
│   │   ├── utils
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   ├── package.json
│   └── README.md
├── pom.xml
└── README.md