PRD Example 20: Personal Finance Dashboard

Difficulty: Advanced | Project Type: Full Stack Web App | Time: 2-3 weeks

---

Overview

What	A web dashboard for tracking personal finances with visualizations
Who	Individuals who want to understand their spending patterns
Why	Provides insights into spending without sharing data with financial apps

---

Core Features (MVP)

1. Add Transactions: Log income and expenses with categories
2. Dashboard View: Summary cards (income, expenses, net, savings rate)
3. Charts: Spending by category (pie), monthly trend (line)
4. Category Management: Create and edit spending categories
5. Monthly Report: Export month summary as PDF

---

Non-Goals

Will NOT build:

• Bank account integration or import
• Multi-currency support
• Budgeting or goals
• Bill reminders
• Investment tracking
• Multi-user or family sharing
• Mobile app
• Recurring transaction automation

Will NOT use:

• External financial APIs
• PDF generation libraries (use browser print)
• Chart libraries beyond Chart.js
• Complex state management (Context is sufficient)

---

Technical Constraints

Frontend	React 19, TypeScript, Tailwind CSS
Backend	FastAPI (Python)
Database	SQLite with SQLAlchemy
Charts	Chart.js with react-chartjs-2
Auth	JWT tokens (simple implementation)
Testing	pytest (backend), Vitest (frontend)
Deploy	Frontend: Vercel, Backend: Railway

---

Success Criteria

• [ ] Users can register and log in
• [ ] Can add income/expense transactions
• [ ] Dashboard shows accurate totals
• [ ] Pie chart shows spending by category
• [ ] Line chart shows monthly trends
• [ ] Can export monthly report (browser print to PDF)
• [ ] All tests pass

---

Implementation Phases

Phase 1: Backend Setup & Auth

Goal: Set up FastAPI with authentication

Tasks:

1. Create FastAPI project structure
2. Set up SQLite with SQLAlchemy
3. Create User model and auth endpoints
4. Implement JWT token generation/validation
5. Create protected route middleware

Verification:

uvicorn main:app --reload
# API running on http://localhost:8000

curl -X POST /auth/register -d '{"email": "...", "password": "..."}'
# Returns user created

curl -X POST /auth/login -d '{"email": "...", "password": "..."}'
# Returns JWT token

Deliverables: FastAPI backend with auth

---

Phase 2: Transaction CRUD

Goal: Implement transaction management

Tasks:

1. Create Transaction model (amount, type, category, date, note)
2. Create Category model (name, color, icon)
3. Implement CRUD endpoints for transactions
4. Implement CRUD endpoints for categories
5. Add default categories on user creation

Verification:

curl -X POST /transactions -H "Authorization: Bearer ..." \
  -d '{"amount": 50.00, "type": "expense", "category_id": 1, "note": "Lunch"}'
# Transaction created

curl /transactions?month=2025-02
# Returns transactions for February 2025

Deliverables: Transaction API

---

Phase 3: Frontend Dashboard

Goal: Build React dashboard with charts

Tasks:

1. Create React project with Vite
2. Build auth pages (login, register)
3. Build dashboard layout with summary cards
4. Implement transaction list with add/edit forms
5. Add Chart.js charts (pie for categories, line for trends)

Verification:

1. Login → Dashboard loads
2. Add transaction → List updates
3. Pie chart shows category breakdown
4. Line chart shows monthly trend
5. Summary cards show correct totals

Deliverables: Working dashboard UI

---

Phase 4: Category Management & Filters

Goal: Manage categories and filter data

Tasks:

1. Build category management page
2. Add date range filter to dashboard
3. Filter transactions by category
4. Add transaction search
5. Implement edit/delete transactions

Verification:

1. Create new category "Entertainment"
2. Assign transaction to new category
3. Filter by date range → Data updates
4. Filter by category → Shows only matching
5. Delete transaction → Removed from list

Deliverables: Category management and filters

---

Phase 5: Reports & Deployment

Goal: Export and deploy

Tasks:

1. Create monthly report view (print-optimized)
2. Use browser print to PDF
3. Write backend tests (pytest)
4. Write frontend tests (Vitest)
5. Deploy to Vercel + Railway

Verification:

# Click "Export Report"
# Print dialog opens
# Save as PDF → Clean formatted report

pytest
npm test
# All tests pass

# Visit deployed URL → App works

Deliverables: Deployed application

---

Database Schema

class User(Base):
    id: int
    email: str
    password_hash: str
    created_at: datetime

class Category(Base):
    id: int
    user_id: int
    name: str
    color: str  # hex color
    type: str   # "income" or "expense"

class Transaction(Base):
    id: int
    user_id: int
    category_id: int
    amount: Decimal  # stored as cents
    type: str        # "income" or "expense"
    date: date
    note: str
    created_at: datetime

---

Agent Rules

Always	Ask First	Never
Store amounts as integers (cents)	Before changing database schema	Use external financial APIs
Validate positive amounts	Before adding new chart types	Store sensitive financial data unencrypted
Hash passwords with bcrypt	Before adding new features	Delete transactions without confirmation
Use parameterized queries		Share user data across accounts