Expense Tracker

A full-stack Expense Tracker application built with a Java Spring Boot backend and a clean React frontend. This project demonstrates complete CRUD operations and REST API integration.

---

Tech Stack

Backend

Frontend

---

Project Overview

This is a simple full-stack CRUD application where:

• React frontend interacts with backend APIs using fetch
• Spring Boot handles business logic and REST APIs
• Data is stored in a MySQL database

---

Features

• ➕ Add new expenses
• 📋 View all expenses
• ✏️ Edit existing expenses
• ❌ Delete expenses
• 💰 Auto calculation of total expense

---

UI Theme

• #41431B – Dark Olive
• #AEB784 – Soft Green
• #E3DBBB – Warm Beige
• #F8F3E1 – Light Cream

---

How to Run

Prerequisites

Make sure you have installed:

• Java 17+
• Maven
• Node.js (v16+)
• MySQL

---

Backend Setup (Spring Boot)

cd backend

Configure Database

Open: src/main/resources/application.properties

Update with your MySQL credentials:

spring.datasource.url=jdbc:mysql://localhost:3306/expense_db
spring.datasource.username=root
spring.datasource.password=your_password

spring.jpa.hibernate.ddl-auto=update

Run Backend

mvn spring-boot:run

Backend will run at:

http://localhost:8080

🔹 3. Frontend Setup (React + Vite)

Open a new terminal:

cd frontend

Install dependencies:

npm install

Run frontend:

npm run dev

Frontend will run at:

http://localhost:5173

🔹 1. Clone the Repository

git clone https://github.com/your-username/expense-tracker.git
cd expense-tracker

Testing using postman screenShots

GET method

---

POST method

---

PUT method

---

DELETE method

---

Project Structure

.
├── backend/
│   ├── .mvn/
│   ├── src/
│   ├── mvnw
│   ├── mvnw.cmd
│   └── pom.xml
└── frontend/
    ├── src/
    │   ├── App.jsx
    │   ├── App.css
    │   └── main.jsx
    ├── public/
    ├── index.html
    └── package.json