Expense Tracker Frontend

A Next.js frontend for the Expense Tracker application.

Tech Stack

• Next.js 15
• Tailwind CSS
• Recharts (pie chart, stacked bar chart)
• Deployed on Netlify

Features

• User registration and login with JWT authentication
• Add, edit, and delete expenses
• Category dropdown (default + custom categories)
• All time spending pie chart by category
• Monthly stacked bar chart with year toggle
• Responsive design

Live App

https://expense-tracker-mathew.netlify.app

Running Locally

1. Clone the repo
2. Install dependencies:

   npm install

3. Update API URL in src/lib/api.js to http://localhost:8080
4. Run the dev server:

   npm run dev

5. Open http://localhost:3000

Environment

Update src/lib/api.js before running locally or deploying:

• Local development: const API_URL = 'http://localhost:8080'
• Production (Netlify): const API_URL = 'https://expense-tracker-api-ckeh.onrender.com'

Note: The production API is hosted on Render. For local development you'll need to run the Spring Boot backend locally with Docker.

Backend

This frontend connects to the Expense Tracker API: https://github.com/MathewLobo/expense-tracker-api

TODO

• Fix user scoping — currently all users share user ID 1
• Dynamic year range toggle (startYear to current year)
• Password recovery flow
• Shared expenses between users