SPENDIE is a web app for tracking expenses, splitting bills, and gamifying your finances. Built for a hackathon sponsored by Convex, CodeRabbit, Firecrawl, Netlify, Autumn, Sentry, and Cloudflare. SPENDIE turns money management into an addictive game: Earn XP for logging spends, unlock achievements, and snag rewards like avatar and frames. AI-powered voice/scan inputs, real-time social splits, and personalized insights make it effortless and fun.
Home Page
- Smart Tracking: Log income/expenses manually, via voice (Web Speech API), or scan receipts (Gemini Vision API). Auto-categorize with AI.
- Budgeting Magic: Set flexible periods (daily/weekly/monthly), track progress with colorful bars.
- Social Splits: Create group bills, invite via user search, accept/settle individually (partial payments supported). Real-time balances.
- AI Insights: Personalized tips (e.g., "Cut food by 20%") pulled from articles from Bankrate via Firecrawl + Gemini.
- Achievements & Perks: 15 achievements. Level up every 500 XP; equip rewards in profile.
Built for speed and scalability: Real-time sync via Convex, queries/mutations with TanStack Query.
| Category | Tools |
|---|---|
| Frontend | TanStack Start (React, Query, Router), Tailwind CSS, Lucide Icons |
| Backend/DB | Convex (schema, auth, realtime, scheduler, workflows) |
| AI/ML | Google Gemini (vision/text via Vercel AI SDK) |
| Scraping | Firecrawl |
| Voice | Web Speech API |
| Forms | TanStack Form + Zod validation |
| UI | Shadcn/UI |
| Deployment | Cloudflare (frontend), Convex Dashboard (backend) |
Get SPENDIE running in <5 minutes. Requires Node.js 18+.
-
Node.js (v18+)
-
Convex CLI:
npm i -g convex -
API Keys:
- Gemini: Get from Google AI Studio (free tier OK).
- Firecrawl: Sign up at firecrawl.dev for API key.
- Sentry: Sign up at sentry.io for API key.
git clone https://github.com/pena56/spendie
cd spendie
pnpm installCreate .env.local in root:
# Deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=after_convex_init
VITE_CONVEX_URL=after_convex_init
SENTRY_AUTH_TOKEN=your_sentry_auth_token
GEMINI_API_KEY=your_gemini_api_key
GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key
FIRECRAWL_API_KEY=your_firecrawl_api_key
npx convex dev # Starts local dev server (http://127.0.0.1:3180)
# Auto-creates project; follow prompts for auth (email/password setup)- Seed data (optional): Run
npx convex run achievements:seedAchievementsfor demo achievements.
pnpm run dev # Starts TanStack Start at http://localhost:3000- Open in browser; sign up/login to test.
- Voice/scan: Grant mic/camera perms.
| Command | Description |
|---|---|
pnpm run dev |
Local dev server |
pnpm run build |
Build for prod |
pnpm run preview |
Preview built app |
npx convex dev |
Local Convex backend |
npx convex deploy |
Deploy backend |
npx convex codegen |
Regen TS types |
- API Errors: Check
.envkeys; verify in Convex dashboard. - Auth: Uses Convex Auth—email/password.
- Logs: Convex dashboard for backend; browser console for frontend.
npx convex deploy→ Deploys to cloud.
- Push to GitHub.
- Setup Wrangler and run deploy script.
- Add env vars (GEMINI/FIRECRAWL keys).
- Deploy: Auto on push; preview branches.
| Service | Key/Setup | Usage |
|---|---|---|
| Convex | Auto-init | DB, auth, realtime |
| Gemini | AI Studio key | Voice/scan parsing, insights |
| Firecrawl | Dashboard key | Scrape tips |
| Sentry | API key | Error monitoring |
Free tiers suffice for hackathon/demo.
- XP Sources: Login (+50), Txn (+10), Split settle (+20), Goal contrib (+15).
- Achievements: 15.
- Rewards: Avatars, frames — equip in Profile.
- Fork & clone.
pnpm install && npx convex dev.- Commit: Conventional (e.g., "feat: add goal sharing").
- PR: Describe changes, test screenshots.
Hackathon code—PRs welcome for polish!
MIT ©pena56 2025. Built with ❤️.
Questions? Open an issue or ping @pena_mo56 on X. Let's level up finances together! 🚀