Spendly

"Travel anywhere, spend in any currency — Spendly AI handles the math."

Comment

Inspiration

Traveling across international borders is one of life’s greatest joys — but managing expenses in foreign currencies quickly becomes a nightmare. Juggling Yen in Tokyo, Baht in Bangkok, and Euros in Paris leaves travelers constantly doing mental math, struggling with exchange rate fluctuations, and losing track of their daily budgets.

Existing expense trackers force manual data entry with tedious dropdowns and single-currency limitations. We set out to build Spendly AI Copilot — an intelligent, voice-driven multi-currency financial copilot that lets travelers speak or type expenses naturally in any currency ("Dinner in Tokyo 8500 yen") and instantly calculates budget health, spending pace, and currency conversions in real-time.

What it does

Spendly AI Copilot transforms how international travelers track and understand their spending:

  • 🎙️ Natural Language & Voice Expense Entry: Speak or type expenses naturally ("Taxi in Bangkok 350 THB"). Spendly's AI extracts the amount, currency, merchant, category, and country automatically.
  • 💱 Real-Time Multi-Currency Intelligence: Instantly aggregates expenses across local foreign currencies and converts them on-the-fly to your preferred reporting currency ((USD), (EUR), (GBP), (INR), (JPY), (AUD)).
  • 📈 Proactive Budget Health Monitoring: Calculates daily spending pace (S_{actual}) against target daily budget pace (S_{target}) to warn travelers before overspending occurs.
  • 🤖 Interactive Multi-Turn AI Financial Q&A: Ask natural questions like "How much did I spend in Japan?", "Show spending by category", or "Can I afford a $150 dinner?" and receive real-time financial analysis.
  • 📊 Visual Analytics Dashboard: Recharts-powered interactive category breakdowns, trend bar charts with crimson glow effects, and downloadable CSV financial reports.
  • 📱 Responsive Mobile & Desktop Experience: Seamless sliding navigation drawer, dark mode glassmorphism UI, and offline-resilient localStorage persistence.

How we built it

  • Frontend & Architecture: Built with Next.js 16 (Turbopack), React 19, TypeScript, and TailwindCSS for an ultra-fast, responsive web interface.
  • AI Copilot Core: Powered by Google Gemini API (gemini-2.0-flash) via structured REST endpoints, featuring full multi-turn conversation memory.
  • Voice Intelligence: Integrated the HTML5 Web Speech API for hands-free voice expense logging.
  • Visualizations & Motion: Built using Recharts with custom HSL glow styling and Framer Motion for smooth micro-animations.
  • State & Storage: Custom React Context architecture (CopilotContext) with client-side FX rate engine and persistent localStorage synchronization.

Spendly uses dynamic cross-rate currency conversion matrices. To convert an expense from original currency (C_{orig}) to target reporting currency (C_{rep}) given base USD exchange rates (R):

[ Converted\ Amount = Original\ Amount \times \left( \frac{R_{C_{rep}}}{R_{C_{orig}}} \right) ]

To compute the Projected End Spend (E_{proj}) and detect overspend risk over total trip duration (D_{total}) and days elapsed (D_{elapsed}):

$$ S_{actual} = \frac{\sum_{i=1}^{n} Converted(E_i)}{D_{elapsed}} \quad \text{and} \quad E_{proj} = S_{actual} \times D_{total} $$

Challenges we ran into

  1. Multi-Turn Chat Memory over REST Endpoints: Preserving continuous conversation context without state loss when querying Gemini API REST endpoints required designing a lightweight JSON payload serializer to pass previous turn history effortlessly.
  2. Zero-Latency Cross-Currency Calculations: Computing multi-currency totals across 6 different currencies on every render could easily lag the UI. We engineered an in-memory FX lookup table and memoized conversion functions to ensure instantaneous recalculations.
  3. Mobile Responsive Glassmorphism: Designing an expansive visual dashboard and floating chat bar that scales cleanly from 320px phone screens to 4K desktop displays without text clipping required custom flexbox containers and React Portals.

Accomplishments that we're proud of

  • Seamless Voice & AI Parsing: Built a zero-friction voice experience where users can speak naturally in full sentences, and Spendly accurately parses amounts, currencies, and categories every single time.
  • Dynamic FX Engine: Built a real-time multi-currency engine that instantly recalculates all dashboard charts, budget meters, and expense cards when switching reporting currency.
  • Flawless Responsive Design: Crafted a dark mode glassmorphism UI with mobile slide-out navigation drawers and unclipped input bars that looks stunning on every device.

What we learned

  • Advanced Prompt Engineering for Financial Parsing: Structuring LLM prompts to return deterministic JSON structures for expense extraction while preserving conversational markdown flexibility.
  • Seamless UX Micro-Interactions: How visual feedback (like crimson bar glows, white date picker indicators, and clear suggestion chips) dramatically elevates user trust in financial tools.

What's next for Spendly

  • 📷 AI Receipt OCR Scanning: Upload photo receipts for instant itemized extraction.
  • 👥 Group Split-Bill Management: Collaborate on multi-person group trips with automated debt simplification.
  • 📱 Progressive Web App (PWA): Offline-first Mobile PWA with background sync.
  • 🏦 Open Banking API Integration: Direct bank feed sync for automatic credit card transaction importing.

Built With

Share this project:

Updates