SmartSpendSnap is an AI-powered personal finance web application built to make expense tracking effortless and intelligent. Many people struggle with money management — manual tracking is tedious, error-prone, and rarely provides useful insights.
SmartSpendSnap changes that by combining Google Gemini AI, real-time Firestore, and interactive data visualization into one clean, beginner-friendly dashboard.
Scan a receipt → AI extracts the data → Get personalized savings tips. Done. 💡
Built at a Hackathon — tackling real-world financial literacy challenges for students, professionals, and families.
Authentication → Dashboard
├── Show Saving Rate
├── Show Expense / Income / Balance
├── Financial Tips
└── Transaction Input Methods
├── Manually Input Transaction
├── Scan Receipt with Camera
└── Import Transactions from Device
↓
[ GEMINI AI PROCESSING ]
├── Process Scanned Receipts
├── Extract Data from Receipts (OCR)
└── Generate Personalized Suggestions
↓
├── Visualize Spending Data → Spending Trends
└── Show Gemini AI Suggestions
| Feature | Description |
|---|---|
| 📷 Receipt Scanner | Capture or upload receipts — Gemini AI extracts all transaction data via OCR |
| 🤖 AI Suggestions | Real-time personalized savings tips & spending alerts powered by Gemini |
| 🗂️ Auto-Categorisation | Income & expenses automatically sorted into categories |
| 📊 Visual Reports | Interactive charts (pie, monthly overview) built with Recharts |
| 📥 Gmail Integration | Scan your inbox for digital receipts automatically |
| 📄 Spreadsheet Export | Export all transactions as a downloadable spreadsheet |
| 💱 Currency Converter | On-the-go multi-currency support |
| 🔐 Secure Auth | Firebase Authentication — Google login & email/password |
| 📱 Responsive Design | Fully optimised for mobile, tablet & desktop |
| Layer | Technology |
|---|---|
| Frontend | React 18 + TypeScript |
| Build Tool | Vite |
| Styling | Tailwind CSS + shadcn/ui |
| AI / OCR | Google Gemini API |
| Backend | Node.js + Express.js |
| Auth | Firebase Authentication |
| Database | Firestore (Real-time) |
| Charts | Recharts |
| Gmail API | Google OAuth2 — inbox receipt scanning |
node >= 18.x
npm >= 9.x# 1. Clone the repository
git clone https://github.com/JayeshJadhav28/smart-spend-snap.git
# 2. Navigate into the project
cd smart-spend-snap
# 3. Install dependencies
npm install
# 4. Set up environment variables
cp .env
# 5. Start the development server
npm run devOpen http://localhost:5173 🎉
npm run dev # Start Vite dev server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLintsmart-spend-snap/
├── public/ # Static assets
├── src/
│ ├── api/ # Auth API helpers
│ ├── components/
│ │ ├── charts/ # Recharts components
│ │ │ ├── CategoryPieChart.tsx
│ │ │ └── MonthlyOverviewChart.tsx
│ │ ├── FinancialTips.tsx # AI tips display
│ │ ├── GmailIntegration.tsx
│ │ ├── Layout.tsx
│ │ └── ui/ # shadcn/ui components
│ ├── context/
│ │ └── AuthContext.tsx # Global auth state
│ ├── hooks/ # Custom React hooks
│ ├── lib/
│ │ ├── firebase.ts # Firebase init
│ │ ├── gemini.ts # Gemini AI integration ⭐
│ │ ├── gmail.ts # Gmail API integration
│ │ └── currency.ts # Currency conversion
│ ├── pages/ # App pages / routes
│ │ ├── Dashboard.tsx # ⭐ Main dashboard
│ │ ├── AddTransaction.tsx
│ │ ├── Reports.tsx
│ │ └── Login / Signup
│ └── types/ # TypeScript interfaces
├── .env.example # ✅ Safe env template
├── vite.config.ts
└── tailwind.config.ts
git checkout -b feature/your-feature-name
git commit -m "feat: your feature description"
git push origin feature/your-feature-name
# Open a Pull Request 🚀Jayesh Jadhav
⭐ If SmartSpendSnap helped you, drop a star! ⭐
Built with ❤️, React & Gemini AI — at a Hackathon 🏆