Smart Personal Finance Tracker

A full-stack personal finance management application with Neobrutalism UI, real Google OAuth authentication, MongoDB database, and comprehensive financial tracking features.

Tech Stack

Frontend

• React 18 + TypeScript (Vite)
• Tailwind CSS (Neobrutalism design)
• Recharts (charts & analytics)
• Axios (API calls)
• React Router v6
• React Hot Toast (notifications)

Backend

• FastAPI (Python)
• Motor (async MongoDB driver)
• PyJWT (JWT authentication)
• Google OAuth 2.0 (ID token verification)
• Pydantic v2 (validation)

Database

• MongoDB

---

Prerequisites

• Node.js >= 18
• Python >= 3.10
• MongoDB running locally or a MongoDB Atlas URI
• Google Cloud Console project with OAuth 2.0 Client ID

---

Setup

1. Google OAuth Setup

1. Go to Google Cloud Console
2. Create a new project (or use existing)
3. Navigate to APIs & Services > Credentials
4. Create an OAuth 2.0 Client ID (Web application)
5. Add http://localhost:5173 to Authorized JavaScript origins
6. Copy the Client ID

2. Backend Setup

cd backend

# Create virtual environment
python -m venv venv

# Activate (Windows)
venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Create .env file
copy .env.example .env
# Edit .env with your values:
#   MONGODB_URL=mongodb://localhost:27017
#   DATABASE_NAME=finance_tracker
#   JWT_SECRET=your-secret-key
#   GOOGLE_CLIENT_ID=your-google-client-id

# Run the server
uvicorn app.main:app --reload --port 8000

3. Frontend Setup

cd frontend

# Install dependencies
npm install

# Create .env file
copy .env.example .env
# Edit .env:
#   VITE_API_URL=http://localhost:8000
#   VITE_GOOGLE_CLIENT_ID=your-google-client-id

# Run dev server
npm run dev

4. Open the App

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

---

Features

• Google OAuth 2.0 — Real authentication with ID token verification
• Dashboard — Animated balance, income/expense cards, recent transactions
• Transactions — Full CRUD with modal forms, filters, and search
• Analytics — Pie charts (category), bar charts (monthly), percentage changes
• Budget — Set monthly limits, progress bar, exceeded alerts
• Gamification — Saving streaks, badge system with dynamic updates
• CSV Export — Download all transactions
• Dark/Light Mode — Toggle with saved preference
• Responsive — Mobile-first with collapsible sidebar
• Toast Notifications — Budget alerts, high spending warnings

---

API Endpoints

Method	Endpoint	Description
POST	/auth/google	Google OAuth login
GET	/auth/me	Get current user
POST	/transactions/	Create transaction
GET	/transactions/	List (with filters)
PUT	/transactions/{id}	Update transaction
DELETE	/transactions/{id}	Delete transaction
GET	/analytics/	Full analytics
POST	/budget/	Set budget
GET	/budget/	Get budget status
GET	/export/	Download CSV
GET	/gamification/	Streaks & badges

---

Project Structure

PET/
├── backend/
│   ├── app/
│   │   ├── auth/          # JWT + Google OAuth
│   │   ├── database/      # MongoDB connection
│   │   ├── models/        # Data models
│   │   ├── routers/       # API routes
│   │   ├── schemas/       # Pydantic schemas
│   │   ├── services/      # Business logic
│   │   ├── config.py      # Settings
│   │   └── main.py        # FastAPI app
│   └── requirements.txt
├── frontend/
│   ├── src/
│   │   ├── components/    # Sidebar, Layout, Modal
│   │   ├── context/       # Auth, Theme providers
│   │   ├── hooks/         # useTransactions
│   │   ├── pages/         # All page components
│   │   ├── services/      # API client
│   │   ├── types/         # TypeScript types
│   │   └── App.tsx        # Root + routing
│   ├── package.json
│   └── tailwind.config.js
└── README.md