Split bills without the awkward math. Snap a photo of your restaurant bill, drag dishes to friends, and see who owes what — instantly.
| Step | What Happens |
|---|---|
| 📸 Snap | Take a photo or upload an image of your bill |
| 🔍 Extract | OCR reads every item — edit anything it gets wrong |
| 👥 Friends | Add everyone who's splitting the bill |
| 🎯 Assign | Drag & drop each dish to whoever ordered it |
| 🎉 Split | See per-person totals, copy & share the summary |
- Vanilla JS — zero frameworks, zero bloat
- Vite — instant dev server & optimized builds
- Tesseract.js — client-side OCR (no server needed, your bill never leaves your device)
- Custom Drag & Drop — built from scratch, works on mobile too
- Receipt-style UI — warm, paper-textured design with handwritten fonts (Caveat, Gabarito, DM Mono)
# Clone
git clone https://github.com/mindninjaX/splitbite.git
cd splitbite
# Install
npm install
# Run
npm run devOpen http://localhost:5173 and snap a bill.
src/
├── main.js # App entry point & state management
├── steps/
│ ├── upload.js # Step 1 — Camera/file upload
│ ├── extract.js # Step 2 — OCR + editable item list
│ ├── friends.js # Step 3 — Add people with emoji avatars
│ ├── assign.js # Step 4 — Drag dishes to friends
│ └── summary.js # Step 5 — Per-person breakdown + confetti 🎊
├── utils/
│ ├── ocr.js # Tesseract.js wrapper
│ ├── parser.js # Bill text → structured items
│ ├── dishes.js # Emoji matcher & avatar colors
│ └── drag-drop.js # Custom drag & drop engine
└── styles/
├── index.css # Design tokens & base styles
└── components.css # Component-level styles
Everything runs in your browser. Your bill image is processed locally via Tesseract.js — no data is sent to any server.
MIT — do whatever you want with it.
Built with 🍕 by mindninjaX