Expense Tracker

#Expense Tracker #Gemini

Comment

Expense Tracker — AI-Powered Personal Finance Manager

Track your monthly spending by uploading a photo of your card statement.

What It Does

  • Upload one or multiple card statement photos (TD, RBC, BMO, Scotiabank, CIBC)
  • Gemini Vision AI automatically reads dates, merchants, and amounts
  • Review and edit AI-parsed transactions before saving
  • Monthly calendar view showing when and where money was spent
  • Category breakdown bar chart across 12 spending categories
  • AI spending persona analysis with personalized recommendations ranked by impact
  • Dark and light mode with persistent theme preference
  • Mobile-first — works in any phone browser, no app install required

How We Built It

Next.js 14 with App Router keeps the Gemini API key secure server-side, never exposed to the browser.

Google Gemini Vision API parses card statement photos into structured transaction data using strict prompt engineering:

temperature: 0 — deterministic output, zero hallucination
Output format enforced: JSON array with date, store, amount, type, category

React Context + useReducer handles global state with a safe localStorage hydration pattern to prevent data loss on refresh.

browser-image-compression reduces phone photos from ~10MB to under 1MB before sending to the API, avoiding rate limit errors.

Challenges We Ran Into

  • Float precision — AI returned amounts like 97.3999999. Fixed with a unified formatDollar() helper
  • Timezone mismatch — toISOString() returns UTC, showing the wrong calendar day. Fixed with local date string helpers
  • Data wipe on refresh — initial empty state was saving to localStorage before hydration completed. Fixed with a hydrated ref guard
  • Gemini model deprecations — navigated quota limits and deprecated model names in real time during the hackathon

What We Learned

  • Explicit output format instructions in prompts dramatically reduce AI parsing errors
  • Mobile UX requires deliberate attention to touch targets and scroll behavior
  • LocalStorage is sufficient for a hackathon MVP with the right state management

What's Next

  • Budget goal setting with overspending alerts
  • Google Sheets and CSV export
  • Multi-month trend graphs
  • User accounts for cross-device sync

Built With

Share this project:

Updates