A robust full-stack application for tracking personal expenses, built with a decoupled architecture using Spring Boot (Backend) and React (Frontend).
The application is fully deployed to the cloud, featuring a distributed system where the frontend, backend, and database are hosted on separate scalable services.
- Frontend (UI): [INSERT YOUR NETLIFY LINK HERE]
- Backend (API): [INSERT YOUR RAILWAY URL HERE]/api/expenses
- Framework: React (Vite)
- Deployment: Netlify (Global CDN)
- Styling: CSS
- Communication: Fetch API
- Framework: Java Spring Boot
- Build Tool: Maven
- Deployment: Railway (Cloud)
- Database: PostgreSQL (Hosted on Supabase)
- Security: CORS Configuration for cross-origin resource sharing
The application follows a 3-Tier Architecture:
- Presentation Layer (Netlify): React Frontend sends HTTP requests (
GET,POST,DELETE). - Logic Layer (Railway): Spring Boot Controller processes requests and handles business logic.
- Data Layer (Supabase): PostgreSQL database stores expense records persistently.
- View All Expenses: Fetches real-time data from the cloud database.
- Add Expense: Validated input sent via secure HTTPS POST requests.
- Delete Expense: Remove items dynamically from the UI and Database.
- Cloud Connectivity: Fully connected environment (Netlify ↔ Railway ↔ Supabase).
| Method | Endpoint | Description |
|---|---|---|
GET |
/api/expenses |
Retrieve all expenses |
POST |
/api/expenses |
Create a new expense |
DELETE |
/api/expenses/{id} |
Delete an expense by ID |
If you want to run this locally:
git clone [https://github.com/ashfaq-ui/spend-wise.git](https://github.com/ashfaq-ui/spend-wise.git)
cd spend-wiseNavigate to the backend folder and configure your database variables in application.properties:
spring.datasource.url=jdbc:postgresql://[YOUR_SUPABASE_URL]
spring.datasource.username=[YOUR_DB_USER]
spring.datasource.password=[YOUR_DB_PASSWORD]
Bash
cd frontend
npm install
npm run dev
You can access the live application here: SpendWise Live Demo