FinSight – Personal Finance Tracker

A modern, full-stack web application for effortless, insightful personal finance management.

---

Project Overview

FinSight is a robust, responsive personal finance tracker designed to empower users with clarity, control, and insight over their financial lives.
Built with a modern tech stack and a focus on clean UI/UX, FinSight transforms the way users interact with their finances:

• Centralizes all financial activity: Users can log every income and expense, categorize transactions, and view their entire financial history in one place.
• Visualizes spending habits: Interactive charts and dashboards provide immediate, actionable insights into spending patterns, category breakdowns, and monthly trends.
• Promotes mindful budgeting: Users can set monthly budgets for each category, compare planned vs. actual spending, and receive instant feedback when they approach or exceed their limits.
• Guides better decisions: Simple but powerful analytics highlight top spending areas, recurring expenses, and offer over-budget alerts—enabling smarter, more confident financial decisions.
• Delivers a seamless experience: Ensuring the app is intuitive, fast, and beautiful on any device.

FinSight is not just a tracker—it's a personal finance partner, designed for real-world usability, transparency, and peace of mind.

---

Features

Stage 1: Transaction Tracker

• Add, edit, and delete transactions (amount, date, description)
• View a chronological list of all transactions
• Monthly expense bar chart (Recharts)
• Basic form validation (required fields, valid amount/date)

Stage 2: Categories & Dashboard

• All Stage 1 features, plus:
• Predefined categories (e.g., Food, Rent, Travel)
• Category-wise pie chart for spending
• Dashboard with:
  • Total monthly expenses
  • Category-wise breakdown
  • Recent transactions

Stage 3: Budgeting & Insights

• All Stage 2 features, plus:
• Set monthly budgets per category
• Budget vs Actual comparison chart
• Spending insights (over-budget alerts, top spending category, trends)

---

Tech Stack

Architecture

• Frontend: Next.js 15 (React 18) - UI/UX Only
• Backend: Java Spring Boot 3.2.0 - RESTful API
• Database: PostgreSQL with Spring Data JPA (Hibernate)
• Authentication: JWT with Spring Security

Layer	Technology
Frontend	Next.js (App Router), Tailwind CSS, shadcn/ui, Recharts
Backend	Next.js API Routes (Node.js/Express), Prisma ORM
Database	PostgreSQL (Docker or Neon.tech)
Other	TypeScript, Docker, Redis (optional for caching)

---

*Screenshots

Dashboard

![Dashboard Screenshot](screenshots/dashboardTransactions**

![Transactions Screenshot](screenshots/Analytics**

![Budget Screenshot](screenshots/Budget.png Screenshot](screenshots/bGetting Started**

Prerequisites

• Node.js (v18+)
• npm or yarn
• Docker (for local PostgreSQL)
• Git

---

Local Setup (Mac & Windows)

1. Clone the Repository

git clone https://github.com/yourusername/finance-tracker.git
cd finance-tracker

2. Install Dependencies

npm install
# or
yarn install

3. Set Up PostgreSQL Database

With Docker (Recommended):

docker run --name finance-db -e POSTGRES_PASSWORD=yourpassword -e POSTGRES_DB=finance_tracker -p 5432:5432 -d postgres:15

• Mac: Use Terminal.
• Windows: Use PowerShell or Docker Desktop.

Or use Neon.tech for a free Postgres cloud DB.

---

Environment Variables

Copy .env.example to .env.local and fill in your values:

DATABASE_URL="postgresql://postgres:yourpassword@localhost:5432/finance_tracker"
JWT_SECRET="your-jwt-secret-key"
NEXT_PUBLIC_APP_URL="http://localhost:3000"
NODE_ENV="development"

---

Running the App

1. Run Database Migrations

npx prisma generate
npx prisma db push

2. Start the Development Server

npm run dev
# or
yarn dev

• The app will be running at http://localhost:3000

---

Project Structure

finance-tracker/
│
├── src/
│   ├── app/                # Next.js app router pages
│   ├── components/         # Reusable UI components
│   ├── hooks/              # Custom React hooks
│   ├── lib/                # Utility libraries
│
├── prisma/
│   └── schema.prisma       # Prisma DB schema
├── public/                 # Static assets (images, etc.)
├── .env.example            # Example environment variables
├── package.json
├── tailwind.config.js
├── next.config.js
├── README.md

✅ FinSight – PDF Requirements Checklisk

Core Objective

Build a responsive, full-stack web application that helps users track personal finances through an intuitive, clean interface.

Project Stages

Stage 1 – Transaction Tracker

Feature	Implemented?
Add, edit, and delete transactions (amount, date, desc)	✅
View a list of all transactions	✅
Monthly expense bar chart using Recharts	✅
Basic form validation (required fields, valid amount/date)	✅

---

Stage 2 – Categories & Dashboard

Feature	Implemented?
Predefined categories (e.g., Food, Rent, Travel)	✅
Category-wise pie chart	✅
Dashboard:
– Total monthly expenses	✅
– Category-wise breakdown	✅
– Most recent transactions	✅

---

Stage 3 – Budgeting & Insights

Feature	Implemented?
Set monthly budgets per category	✅
Budget vs Actual comparison chart	✅
Simple spending insights (over-budget alerts, top category)	✅

---

Evaluation Criteria

Criteria	Implemented?	Notes
Feature Implementation	✅	All Stage 3 features completed
Code Quality	✅	TypeScript, ESLint, modular, documented
UI/UX Design	✅	Clean, responsive, modern, Samsung-inspired

---

Submission Guidelines

Requirement	Implemented?	Notes
GitHub repo with clean, modular code	✅	Public and well-structured
Live deployment URL (e.g., Vercel)	✅	Provided (once build passes)
README.md with Project Overview	✅	Professional, detailed, matches PDF
README.md with Features Implemented/Stage	✅	Clearly states Stage 3 completed
README.md with Setup Instructions	✅	Local run steps + environment setup

---

Live Deployement URL: https://finance-tracker-oiwg.onrender.com/auth/login