ConUHacksX26_WalletSeal 🦭💸

A finance tracker that turns “where did my money go?” into actual answers! With goals, XP, streaks, challenges, rewards, and AI nudges.

Inspiration

Most budgeting apps are either too serious or too time consuming, like you need to become an accountant to figure out whether bubble tea is within your budget. We wanted something that feels friendly, quick, and motivating, especially for students and busy people making lots of small daily purchases.
WalletSeal was inspired by a simple idea: If tracking your money feels rewarding, you’ll actually stick with it.

What it does

WalletSeal combines a lightweight spending tracker with game mechanics and AI:

  • Goals: Create savings goals and track progress toward a target amount.
  • Log Actions (manual or receipt scan):
    • Quickly log expenses/savings actions.
    • Upload a receipt image and AI extracts key details to help auto-fill the entry.
  • Gamification: Every action earns XP, builds streaks, and helps you level up.
  • Challenges: Join habit-building challenges to stay consistent and earn bonus XP.
  • Rewards: Leveling up unlocks fun coupon-style rewards as incentives.
  • AI Insights: A “Spending Analyzer” summarizes patterns and gives personalized suggestions.
  • AI Coach: A chat-style assistant that gives quick advice, encouragement, and nudges.

How we built it

Frontend: React + Vite with Tailwind CSS for a clean, friendly UI.
Backend: Node.js + Express REST API.
Database: MongoDB + Mongoose models for users, goals, logs, and challenges.
AI: Google Gemini (via @google/genai) for:

  • Receipt image understanding (multimodal)
  • Spending analysis (structured insights)
  • Nudges + coach chat responses

What we learned

Working with LLMs in a real app: We learned how to integrate a generative AI API end-to-end, how to design prompts for consistent outputs, and how to make the experience reliable by validating responses, handling errors, and adding fallbacks when the model doesn’t return perfect JSON.
Using MongoDB as our primary database: We learned how to model our core data with MongoDB/Mongoose, connect it to our Express backend, and update it in a way that supports real time UI updates across the app.

Challenges

Getting the AI chatbot working reliably: We spent a lot of time debugging request/response flow, prompt formatting, and handling cases where the model wouldn’t return the exact output we expected. Making the chatbot feel consistent and “in-app” took more iteration than we thought.
Connecting the backend to the database: Wiring MongoDB into our Express API and making sure our models were created, queried, and updated correctly.
Bridging the frontend and backend: Even after the API and database were working, connecting the React UI to our endpoints was tricky. We had to make sure the frontend could fetch and display real data, not just placeholders, and that actions like logging an expense actually updated what you see on the dashboard.

Share this project:

Updates