AI-powered personal finance tracker built for the SFU Silly Hackerton 2026.
Upload a photo of your card statement and instantly see your expenses on a monthly calendar — powered by Google Gemini Vision AI.

• Upload one or multiple card statement photos at once
• Client-side image compression (5–10MB → ~1MB) before sending to AI
• Sequential processing with rate-limit protection between requests

• Google Gemini Vision reads dates, merchant names, and amounts automatically
• Supports TD Bank, RBC, BMO, Scotiabank, CIBC mobile app screenshots
• Strict prompt engineering ensures clean JSON output with zero hallucination (temperature: 0)
• Server-side API call — your API key is never exposed to the browser

• Every AI-parsed result goes through a review modal before saving
• Edit date, merchant, amount, type (expense/income), and category inline
• Delete individual rows you don't need

• Color-coded dots: 🔴 expense / 🟢 income
• Click any day to see transaction details
• Navigate months with previous/next arrows

• Monthly income vs expense totals
• Category breakdown with animated bar chart
• 12 spending categories across Fixed, Variable, and Others

• Detects your spending persona (The Foodie, The Retail Therapist, The Homebody, The Midnight Scroller, The Super Saver)
• Provides 3 key insights based on your actual data
• Recommends 3 actionable tips ranked by impact (High / Medium / Low)
• Estimates monthly savings potential

• Toggle between dark and light themes
• Platinum shimmer border effect on all cards
• Preference saved to localStorage

• All data saved to browser LocalStorage
• Persists across sessions with no backend or database needed
• Safe hydration prevents data wipe on page refresh

git clone https://github.com/YOUR_USERNAME/expense-tracker.git
cd expense-tracker
npm install

Get a free key at https://aistudio.google.com

cp .env.local.example .env.local
# Open .env.local and add:
# GEMINI_API_KEY=your_key_here

npm run dev
# Open http://localhost:3000

Add GEMINI_API_KEY in Vercel → Settings → Environment Variables.
Your app will be live at a public URL — works on mobile browser with no app install needed.

expense-tracker/
├── app/
│   ├── api/
│   │   ├── parse/route.js      # Gemini Vision — image → transactions
│   │   └── analyze/route.js    # Gemini — spending persona + recommendations
│   ├── layout.jsx              # Theme + Transaction providers
│   ├── page.jsx                # Main page
│   └── globals.css             # Platinum shimmer effects
│
├── components/
│   ├── calendar/
│   │   ├── CalendarGrid.jsx    # Monthly calendar grid
│   │   ├── DayCell.jsx         # Individual day cell with dots + amount
│   │   ├── DayDetail.jsx       # Transaction list for selected day
│   │   └── MonthSummary.jsx    # Income/expense totals + category bar chart
│   ├── upload/
│   │   ├── UploadButton.jsx    # Multi-file upload with progress bar
│   │   └── ReviewModal.jsx     # AI result review + edit before saving
│   ├── shared/
│   │   ├── Button.jsx
│   │   ├── Modal.jsx
│   │   └── Badge.jsx           # Category badge with color
│   └── analysis/
│       └── SpendingAnalysis.jsx # AI persona + recommendations UI
│
├── hooks/
│   ├── useTransactions.js      # Selectors + monthly summary logic
│   └── useImageUpload.js       # Compression + sequential multi-upload
│
├── services/
│   └── gemini.js               # Prompt engineering (strict JSON output)
│
├── store/
│   ├── transactionStore.js     # Global state with safe hydration
│   └── themeStore.js           # Dark/light mode with localStorage
│
└── utils/
    ├── constants.js            # Categories, colors, emoji, aliases
    ├── dateFormatter.js        # Local timezone-safe date helpers
    └── storage.js              # LocalStorage read/write

No app install needed. Just open the URL on your phone browser:

1. Tap Upload Card Statement
2. Take a photo or pick from your gallery
3. Review and confirm the parsed transactions
4. See them on your calendar instantly