Personal Finance Assistant

[ItsAJ1005]

Goal:
Build a full-stack personal finance assistant with the ability to log income/expenses, visualize spending, and process receipt uploads with OCR.

---

✅ Core Features

• Income & Expense Management

  • Backend API to create a transaction (income/expense)
  • Backend API to list transactions in a date range
  • Database (MongoDB) setup with User and Transaction models
  • JWT Authentication for multi-user support

• Data Visualization

  • Show expenses by category (Pie/Donut chart)
  • Show expenses by date (Line or Bar chart)
  • Show income vs expenses (Bar chart)
  • Use Chart.js with Tailwind-styled dashboard

• Receipt Upload with OCR

  • Upload receipt images (via Multer)
  • Extract text using Tesseract.js
  • Parse total amount and date from text
  • Auto-categorize basic merchants (e.g., “McDonald’s → Food”)

---

⭐ Bonus Features (Extra Credit)

• Pagination for transaction list API
• Upload transaction history PDF (tabular format, optional if time permits)
• Interactive Dashboard Cards:
  • Total Income / Total Expenses / Balance
  • Top spending category
  • Monthly trend indicator (↗️/↘️)

---

🖌️ Frontend (React + Tailwind)

• Setup project with Vite + Tailwind
• Implement Login & Register pages
• Dashboard with:
  • Transaction Form (Add Income/Expense)
  • Transaction Table (Filter by date range)
  • Charts Section (Pie, Line, Bar)
  • Receipt Upload UI with OCR preview
• Responsive and clean red, white, black theme

---

⚙️ Backend (Node + Express + MongoDB)

• Setup Express server with modular structure
• User Authentication
  • JWT-based login & signup
  • Middleware to protect routes
• Transaction API
  • POST /transactions → Add income/expense
  • GET /transactions → Filter by date range + Pagination
• Receipt API
  • POST /receipts → Upload image → OCR → Auto-create transaction
• Error Handling with proper status codes

---

📊 Visual Design Notes

• Professional color palette:
  • Red: #FF3B3B
  • Black: #1A1A1A
  • White: #FFFFFF
  • Light Gray: #F5F5F5
• Use smooth animations in charts and Tailwind shadows for cards

---

📅 2-Day Execution Plan

Day 1: Backend + APIs

• Setup Node.js, MongoDB models, and JWT Auth
• Implement CRUD for transactions
• Setup receipt upload + basic OCR parsing

Day 2: Frontend + Dashboard

• Setup React + Tailwind UI
• Implement dashboard with forms, tables, and charts
• Integrate APIs and show real-time updates
• Add responsive styling and final polish

---