Personal Finance Visualizer A simple and intuitive web application to track personal finances, visualize spending habits, and set monthly budgets. Built using modern web technologies with a focus on clean UI, responsive design, and error handling.
Live Site: https://finance-visualizer-reactjs-website.vercel.app
Tech Stack Frontend: Next.js, React, shadcn/ui, TailwindCSS
Charts: Recharts
Backend: MongoDB
Other: Responsive design with error states
Features Stage 1: Basic Transaction Tracking Add, Edit, and Delete transactions (amount, date, description)
View a list of all transactions
Monthly expenses bar chart
Basic form validation
Stage 2: Categories All Stage 1 features
Predefined categories for transactions
Category-wise pie chart
Dashboard with:
Total expenses
Category breakdown
Most recent transactions
Stage 3: Budgeting All Stage 2 features
Set monthly budgets by category
Budget vs actual comparison chart
Simple spending insights
Evaluation Criteria
Criteria Weight Feature Implementation 40% Code Quality 30% UI/UX Design 30% Getting Started bash Copy Edit
git clone https://github.com/22Rupesh/FinanceVisualizer.git cd finance-visualizer
npm install
npm run dev Author Developed by Rupesh Rovert Bhairavi