Skip to content

README.md

Latest commit

 

History

History
157 lines (122 loc) · 4.18 KB

README.md

File metadata and controls

157 lines (122 loc) · 4.18 KB
Raw

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