Budgie

Inspiration

Managing personal finances can be overwhelming, especially when it comes to tracking spending, sticking to budgets, and making sense of receipts. We wanted to create a budgeting app that not only makes these tasks easier, but also feels friendly, supportive, and even a little fun. That’s why we built Budgie—a smart budgeting app with a cheerful mascot that guides, encourages, and educates users every step of the way.

What it does

Budgie is a web app that helps users:
-Track spending by category: Upload receipts or enter expenses manually, and Budgie automatically categorizes and logs your spending.
-Set and manage budgets: Assign monthly budgets to categories and see real-time progress with intuitive visualizations.
-Get smart, actionable tips: Budgie’s mascot uses AI to analyze your spending and provide personalized, context-aware budgeting advice.
-Make adjustments easily: If you need to adjust a category’s spending, you can do so with a simple, interactive popup—no more clunky forms.
-Stay motivated: Budgie’s mascot is always present, offering encouragement, tips, and even cute idle lines when you’re not actively adding items.

How we built it

-Frontend: React.js with modern hooks and component structure for a responsive, interactive UI.
-Backend: Supabase for authentication, data storage, and real-time updates.
-OCR: Google Cloud Vision API extracts itemized data from uploaded receipts, making it easy to log purchases.
-AI Integration: Anthropic Claude API parses the output from the Vision API and generates Budgie's spending tips.
-UI/UX: Custom CSS for a playful, modern look, including a floating Budgie mascot with a speech bubble that always feels present and helpful.

Challenges we ran into

-Context-aware tips: Generating truly helpful, non-repetitive tips required careful prompt engineering and robust error handling for the AI API.
-Receipt parsing: Extracting structured data from a wide variety of receipt formats was tricky and we faced many problems where the OCR generates gibberish text
-User experience: We iterated on the UI to make editing budgets and adjusting categories as seamless and intuitive as possible, including in-place editing and contextual popups.
-Database: Creating unique data row entries for individual users upon log in, as opposed to only having a single global database. -Switching agents: We initially built our OCR functionality with Tesseract.js, before eventually switching to Google Cloud Vision API with much trial and error.