BillSnap - Smart Bill Management System

A modern, intelligent bill management solution that uses OCR technology to automatically extract and validate bill information.

🚀 Features

✨ Modern UI/UX

• Beautiful Design: Modern gradient-based design with smooth animations
• Responsive Layout: Works perfectly on desktop, tablet, and mobile
• Interactive Elements: Hover effects, transitions, and visual feedback
• Glass Morphism: Modern glass-effect components with backdrop blur

🔍 Smart OCR Processing

• Advanced Text Extraction: Uses Tesseract OCR for accurate text recognition
• Intelligent Parsing: Automatically extracts:
  • Store name and details
  • Bill amount and tax information
  • GSTIN (Goods and Services Tax Identification Number)
  • Bill date and number
  • Individual line items
• GST Validation: Built-in GST number validation
• Error Handling: Comprehensive error handling with user-friendly messages

📊 Dashboard Analytics

• Real-time Statistics: Total bills, expenses, average amounts
• GST Validation Tracking: Monitor valid vs invalid GST numbers
• Recent Bills: Quick access to recently scanned bills
• Quick Actions: Easy navigation to key features

🛠️ Technology Stack

Frontend

• React 18 with Vite for fast development
• Tailwind CSS for modern styling
• Lucide React for beautiful icons
• React Router for navigation
• Axios for API communication
• React Dropzone for file uploads
• React Hot Toast for notifications

Backend

• Spring Boot 3 with Java 17+
• Spring Data JPA for database operations
• H2 Database (in-memory for development)
• Tesseract OCR for image text extraction
• Maven for dependency management

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• Java 17+ and Maven
• Tesseract OCR installed on your system

Installation

1. Clone the repository

   git clone <repository-url>
   cd billsnap

2. Install Tesseract OCR

   # macOS
   brew install tesseract
   
   # Ubuntu/Debian
   sudo apt-get install tesseract-ocr
   
   # Windows
   # Download from https://github.com/UB-Mannheim/tesseract/wiki

3. Start the Backend

   cd billsnap-backend
   mvn spring-boot:run

   The backend will start on http://localhost:8080/api

4. Start the Frontend

   cd billsnap-frontend
   npm install
   npm run dev

   The frontend will start on http://localhost:3000

🧪 Testing the Application

1. Dashboard Overview

• Visit http://localhost:3000
• You'll see the beautiful new dashboard with:
  • Welcome section with gradient background
  • Statistics cards with hover effects
  • Quick action buttons with animations
  • Recent bills section

2. Bill Scanning

• Click "Scan Bill" or navigate to /scan
• Upload the SLEEK BILL image you provided
• The system will:
  • Show upload progress with animations
  • Extract text using OCR
  • Parse and display extracted information
  • Allow GST validation
  • Enable saving the bill

3. Expected Results

Based on your SLEEK BILL image, the system should extract:

• Store Name: "SLEEK BILL"
• Amount: ₹968.00
• GSTIN: 27AAFCV2449G1Z7
• Date: 23 - Jan - 2025
• Tax Amount: Calculated from IGST breakdown

🔧 Configuration

Backend Configuration

The application uses the following default settings in application.properties:

# OCR Configuration
tesseract.datapath=/opt/homebrew/share/tessdata/  # macOS
tesseract.language=eng

# Server Configuration
server.port=8080
server.servlet.context-path=/api

# File Upload
spring.servlet.multipart.max-file-size=10MB

Frontend Configuration

The frontend is configured to connect to the backend at http://localhost:8080/api.

🎨 UI Improvements Made

1. Modern Design System

• Gradient Backgrounds: Beautiful blue-to-purple gradients
• Glass Morphism: Translucent components with backdrop blur
• Rounded Corners: Modern 2xl border radius throughout
• Shadow Effects: Layered shadows for depth

2. Interactive Elements

• Hover Animations: Cards lift and scale on hover
• Smooth Transitions: 300ms transitions for all interactions
• Loading States: Animated spinners with gradient backgrounds
• Success States: Green checkmarks and confirmation messages

3. Enhanced Typography

• Inter Font: Modern, readable font family
• Gradient Text: Brand text uses gradient colors
• Proper Hierarchy: Clear heading and text sizes
• Text Shadows: Subtle shadows for better readability

4. Responsive Design

• Mobile-First: Optimized for all screen sizes
• Flexible Grid: CSS Grid and Flexbox layouts
• Touch-Friendly: Large touch targets for mobile
• Adaptive Navigation: Collapsible mobile menu

🔍 OCR Improvements

1. Enhanced Text Extraction

• Better Pattern Matching: Improved regex patterns for Indian bills
• Multiple Fallbacks: Multiple extraction strategies
• Debug Logging: Comprehensive logging for troubleshooting

2. Indian Bill Specific

• GSTIN Recognition: Handles Indian GST numbers with spaces
• Currency Support: Proper ₹ symbol handling
• Date Formats: Supports Indian date formats
• Tax Breakdown: Extracts IGST, CGST, SGST amounts

3. Error Handling

• Graceful Degradation: Falls back to defaults when extraction fails
• User Feedback: Clear error messages and loading states
• Validation: Built-in data validation

🐛 Troubleshooting

Common Issues

1. OCR Not Working

   • Ensure Tesseract is installed: tesseract --version
   • Check the data path in application.properties
   • Verify image quality (clear, high-resolution images work best)

2. Frontend Not Connecting to Backend

   • Ensure both servers are running
   • Check CORS configuration
   • Verify API endpoints match

3. Image Upload Issues

   • Check file size (max 10MB)
   • Ensure supported formats: JPG, PNG, GIF, BMP
   • Clear browser cache if needed

Debug Mode

The backend includes comprehensive logging. Check the console output for:

• Extracted text from OCR
• Parsed bill details
• API request/response logs

🚀 Deployment

Frontend Deployment

cd billsnap-frontend
npm run build
# Deploy the dist/ folder to your hosting service

Backend Deployment

cd billsnap-backend
mvn clean package
# Deploy the generated JAR file

📝 API Endpoints

• POST /api/bills/upload - Upload and process bill image
• GET /api/bills - Get all bills
• POST /api/bills/validate-gstin - Validate GST number
• GET /api/bills/statistics/* - Get various statistics

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is licensed under the MIT License.

---

Note: This is a development version. For production use, consider:

• Using a production database (PostgreSQL, MySQL)
• Implementing proper authentication
• Adding rate limiting
• Using cloud storage for images
• Setting up proper monitoring and logging