Bill Splitter

A modern web application for splitting restaurant bills with OCR functionality. Upload a photo of your receipt, add attendees, allocate items, and calculate individual totals with tips.

Features

• 📸 OCR Bill Scanning: Upload photos of receipts and automatically extract items and prices
• 👥 Multi-person Support: Add multiple attendees and assign items to each person
• 🧮 Smart Allocation: Distribute items among people with quantity controls
• 💰 Tip Calculation: Add customizable tip percentages to each person's total
• 📱 Responsive Design: Works on desktop, tablet, and mobile devices
• 📄 Export Summary: Download a text summary of the bill split

Technology Stack

• Frontend: React 18, Tailwind CSS, Lucide React icons
• Backend: Node.js, Express.js
• OCR: Tesseract.js for text recognition
• File Upload: Multer for handling image uploads

Installation

1. Clone or navigate to the project directory

   cd "Bill Splitter"

2. Install all dependencies

   npm run install-all

3. Start the development servers

   npm run dev

   This will start both the backend server (port 5000) and frontend development server (port 3000).

4. Open your browser Navigate to http://localhost:3000 to use the application.

Usage

Step 1: Scan Your Bill

• Upload a clear photo of your restaurant receipt
• The OCR will automatically extract items and prices
• Review the scanned text for accuracy

Step 2: Add Attendees

• Enter the names of everyone splitting the bill
• Add or remove people as needed
• Ensure all names are unique

Step 3: Allocate Items

• Assign each bill item to the people who ordered it
• Use the +/- buttons to adjust quantities
• Ensure all items are fully allocated

Step 4: Review & Pay

• Set the tip percentage (15%, 18%, 20%, or custom)
• Review individual totals for each person
• Download a summary or start over

API Endpoints

• POST /api/ocr - Process uploaded receipt images
• POST /api/calculate - Calculate bill split with tips
• GET /api/health - Health check endpoint

Tips for Best OCR Results

• Ensure good lighting when taking photos
• Keep the receipt flat and avoid shadows
• Make sure all text is visible and not cut off
• Higher resolution images work better
• Avoid blurry or angled photos

Development

Project Structure

Bill Splitter/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── App.js         # Main app component
│   │   └── index.js       # Entry point
│   └── package.json
├── server/                # Express backend
│   ├── index.js          # Server entry point
│   └── package.json
└── package.json          # Root package.json

Available Scripts

• npm run dev - Start both frontend and backend in development mode
• npm run server - Start only the backend server
• npm run client - Start only the frontend development server
• npm run build - Build the frontend for production
• npm run install-all - Install dependencies for all packages

License

MIT License - feel free to use this project for personal or commercial purposes.