A modern, full-stack expense tracking application built with Spring Boot (backend) and Angular (frontend). Track your personal expenses with beautiful UI, categorization, filtering, and PDF export capabilities.
This project consists of two main components:
- Backend API: RESTful API built with Spring Boot and Java
- Frontend UI: Modern Angular application with responsive design
- Add, view, and track expenses with validation
- Categorize expenses with color-coded visual indicators
- Filter expenses by month for better organization
- Summary dashboard with spending breakdown by category
- Percentage calculations and visual progress bars
- Export capabilities to PDF for record-keeping
- Modern, responsive design that works on all devices
- Beautiful green and white theme with smooth animations
- Intuitive navigation and user-friendly forms
- RESTful API with comprehensive validation
- Real-time data synchronization
- In-memory H2 database for quick setup
- CORS configuration for seamless frontend-backend communication
expense-tracker/
├── expense-tracker/ # Spring Boot Backend API
│ ├── src/main/java/ # Java source code
│ ├── src/main/resources/ # Configuration files
│ ├── pom.xml # Maven dependencies
│ └── README.md # Backend documentation
├── expense-tracker-ui/ # Angular Frontend
│ ├── src/app/ # Angular components & services
│ ├── src/styles.scss # Global styles
│ ├── package.json # npm dependencies
│ └── README.md # Frontend documentation
└── README.md # This file
- Java 17+ (for backend)
- Node.js 18+ (for frontend)
- Maven 3.6+ (or use included wrapper)
# Navigate to backend directory
cd expense-tracker
# Run the Spring Boot application
./mvnw spring-boot:run
# API will be available at http://localhost:8080# Navigate to frontend directory
cd expense-tracker-ui
# Install dependencies
npm install
# Start the development server
npm start
# Application will be available at http://localhost:4200- Frontend: http://localhost:4200
- Backend API: http://localhost:8080/api
- H2 Database Console: http://localhost:8080/h2-console
| Method | Endpoint | Description |
|---|---|---|
POST |
/api/expenses |
Add a new expense |
GET |
/api/expenses |
Get all expenses |
GET |
/api/expenses?month=January |
Get expenses for specific month |
GET |
/api/summary |
Get expense summary by category |
The application supports 7 predefined categories with distinct colors:
| Category | Color | Description |
|---|---|---|
| GROCERIES | Bright Green | Food and grocery shopping |
| RENT | Deep Orange | Housing and rent expenses |
| UTILITIES | Vivid Blue | Bills (electricity, water, internet) |
| TERTAINMENT | Bold Red | Movies, games, subscriptions |
| TRAVEL | Bright Orange | Transportation and travel costs |
| HEALTH | Rich Purple | Medical and healthcare expenses |
| OTHER | Dark Blue-Gray | Miscellaneous expenses |
- Java 17 - Programming language
- Spring Boot 3.2.5 - Framework
- Spring Data JPA - Data persistence
- H2 Database - In-memory database
- Maven - Dependency management
- Bean Validation - Input validation
- Angular 19.2 - Frontend framework
- TypeScript - Type-safe JavaScript
- SCSS - Enhanced CSS
- Reactive Forms - Form management
- jsPDF - PDF generation
- HTTP Client - API communication
- Clean table layout with color-coded categories
- Month filtering dropdown
- Export to PDF functionality
- Quick action buttons
- Simple, intuitive form design
- Real-time validation
- Category selection
- Date picker with smart defaults
- Visual spending breakdown
- Percentage calculations
- Progress bar visualizations
- Total spending calculations
cd expense-tracker
# Build the project
./mvnw clean compile
# Run tests
./mvnw test
# Create JAR file
./mvnw clean packagecd expense-tracker-ui
# Build for development
npm run build
# Run tests
npm test
# Build for production
npm run build --prod- JAR Deployment: Build and run the JAR file on any server
- Docker: Containerize the Spring Boot application
- Cloud Platforms: Deploy to Heroku, Railway, or AWS
- Static Hosting: Netlify, Vercel, GitHub Pages
- CDN: AWS CloudFront, Azure CDN
- Traditional Hosting: Any web server serving static files
- Backend API Documentation - Detailed Spring Boot setup and API reference
- Frontend Documentation - Angular application guide and features
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes and add tests
- Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow the existing code style and conventions
- Add tests for new features
- Update documentation as needed
- Ensure all tests pass before submitting
Backend won't start
- Check if port 8080 is available
- Verify Java 17+ is installed
- Check Maven dependencies
Frontend can't connect to backend
- Ensure backend is running on port 8080
- Check CORS configuration
- Verify API endpoint URLs
Build failures
- Clear node_modules and reinstall:
rm -rf node_modules && npm install - Clear Maven cache:
./mvnw clean
This project is licensed under the MIT License - see the LICENSE file for details.
- Modupe Daniel
- Spring Boot team for the excellent framework
- Angular team for the powerful frontend framework
- jsPDF community for PDF generation capabilities
- H2 Database for the lightweight database solution
Start tracking your expenses today!
For detailed setup instructions, please refer to the individual README files in the expense-tracker/ and expense-tracker-ui/ directories.