Expense Tracker — Frontend

Pre-built React + TypeScript frontend for the Expense Tracker workshop. Connect it to your Spring Boot backend and see your API come alive!

Quick Start

git clone https://github.com/UnityInFlow/expense-tracker-frontend.git
cd expense-tracker-frontend
npm install
npm run dev

Open http://localhost:5173 in your browser.

Prerequisites

• Node.js 18+ (node -v)
• Your Expense Tracker backend running on http://localhost:8080 (from expense-tracker-spring step-05-final or later)

How It Works

This frontend calls your REST API:

Action	HTTP Request	Endpoint
List expenses	GET	/expenses
Add expense	POST	/expenses
Delete expense	DELETE	/expenses/{id}
Get total	GET	/expenses/total

The app shows a connection indicator — green when your backend is running, red when it's not.

Features

• Add, list, and delete expenses
• Total amount display
• Dark/light theme (follows system preference)
• Real-time API connection status
• Error handling for when backend is down
• Responsive design (works on mobile)

Tech Stack

• React 18 + TypeScript
• Vite
• Tailwind CSS
• Native fetch API

Related

• expense-tracker-kotlin — Pure Kotlin version
• expense-tracker-spring — Spring Boot version (Session 1)
• expense-tracker-workshop-02 — Session 2 (SQLite)