Project Info
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.
Accomplishments we're proud of
-It's our first time using AI integration with a project, database, and live collaboration. -We completed a full functioning web app!
What we learned
-The importance of keeping API Keys safe, and how to do it. -How crucial it is to frequently commit to git to prevent conflicts in the codebase.
What's next
-Mobile app integration for Budgie. -Hosting on a live server. -Give Budgie the ability to generate acceptable budget suggestions.
Receipt Budget Assistant
A smart, AI-powered web app to help you track spending, manage budgets, and get actionable insights from your receipts. Upload or photograph your receipts, and let Budgie (your mascot assistant) extract, categorize, and analyze your spending with the help of Google Cloud Vision, Anthropic AI, and Supabase.
Features
- Receipt OCR: Upload images or take photos of receipts. Extracts text and itemizes purchases using Google Cloud Vision API.
- Manual Entry: Add spending items manually if you don't have a receipt.
- Automatic Categorization: Items are categorized for you, and you can adjust them as needed.
- Budget Management: Set, update, and track budgets for each category. Visualize your progress.
- Spending Dashboard: See your spending breakdown by category, with interactive charts and details.
- AI-Powered Insights: Get personalized, actionable budgeting tips from Budgie, powered by Anthropic AI.
- Authentication: Sign up or sign in with email/password or GitHub (via Supabase).
Getting Started
1. Clone the repository
git clone https://github.com/yourusername/receipt-budget-app.git
cd receipt-budget-app
2. Install dependencies
npm install
3. Set up environment variables
Create a .env file in the root directory with the following variables:
# Google Cloud Vision API Key
GOOGLE_CLOUD_VISION_API_KEY=your_google_cloud_vision_api_key_here
# Anthropic API Key (for AI analysis)
ANTHROPIC_API_KEY=your_anthropic_api_key_here
# Supabase Configuration
REACT_APP_SUPABASE_URL=your_supabase_url_here
REACT_APP_SUPABASE_ANON_KEY=your_supabase_anon_key_here
See SETUP.md for detailed instructions on obtaining these keys.
4. Start the development server
npm start
Open http://localhost:3000 in your browser.
Usage
- Sign up or sign in (email/password or GitHub).
- Upload a receipt image or take a photo. The app will extract and categorize items.
- Review and adjust the extracted data as needed.
- Set budgets for your categories and track your progress.
- View your dashboard for a breakdown of spending and budgets.
- Get AI-powered tips from Budgie to help you save and spend smarter.
Tech Stack
- React
- Supabase (auth & database)
- Google Cloud Vision API (OCR)
- Anthropic AI (Claude)
- Chart.js (visualizations)
Security Notes
- Never commit your
.envfile to version control. - Restrict your API keys to specific domains/IPs when possible.
- Monitor your API usage to avoid unexpected charges.
Troubleshooting
- See SETUP.md for common issues and solutions.
- Check your environment variables and API key permissions.
- Review the browser console for errors.
License
MIT
Analysis
View
Metric
- 32
- 14
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- AnthropicIn code
- CSSIn code
- HTMLIn code
- JavaScriptIn code
- ReactIn code
- SQLIn code
- SupabaseIn code
7 of 7 appear in the indexed code.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
136 KB
Source files
35
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
altran03/hackathon_receipt
46 files · 1.0 MB · @ fd4c66f
Structure
Interface
14 files · 30%Screens, components and styles rendered to the user.
API & routing
3 files · 7%Request entry points: routes, handlers and controllers.
Application logic
11 files · 24%Domain rules, services and shared utilities.
Data & schema
2 files · 4%Schema definitions, migrations and data access.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- JavaScript61%
- CSS27%
- SQL7%
- Markdown4%
- HTML1%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 13- @anthropic-ai/sdk
- @google-cloud/vision
- @supabase/supabase-js
- @testing-library/dom
- @testing-library/jest-dom
- @testing-library/react
- @testing-library/user-event
- chart.js
- react
- react-chartjs-2
- react-dom
- react-scripts
- web-vitals
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.