System Architecture

Full-Stack Mobile Application: React Native/Expo frontend → Flask/Python backend → Google Gemini AI (OCR) → Currency API

Technology Stack

Frontend: React Native (Expo SDK ~52.0), Expo Router, React Hooks, Animated API, expo-image-picker, expo-file-system Backend: Flask 3.0.2, Google Gemini AI 0.7.0, Pillow 10.2.0, Flask-CORS, Gunicorn 20.1.0 Deployment: Render (cloud platform)

Data Flow Pipeline

1. Image Capture & Processing

  • User captures receipt → Expo Image Picker compresses (60% JPEG quality)
  • FileSystem converts to Base64 → POST /process-bill endpoint
  • Backend preprocesses (converts to grayscale for better OCR accuracy)

2. AI Processing Pipeline

# ai_model.py - Structured prompt engineering
prompt = """Extract receipt data in JSON format:
{
  "Store Name": "", "Date": "", "Time": "",
  "Items": [{"Name": "", "Quantity": "", "Price": ""}],
  "Subtotal": "", "Tax": "", "Total": ""
}"""
response = gemini_model.generate_content([preprocessed_image, prompt])

3. Data Validation & Cleaning

  • JSON parsing with regex sanitization (handles malformed AI responses)
  • Type conversion with error handling (safe_float_convert, safe_int_convert)
  • Currency symbol handling ($, €, £) and international format support
  • Subtotal validation against individual item prices

Key Technical Achievements

Full-Stack Development

• Architected modular Flask backend with separation of concerns (image_preprocessing.py, ai_model.py, data_processing.py) • Built RESTful API with 5 endpoints: health check, receipt processing, bill updates, currency conversion • Implemented comprehensive CORS configuration and environment variable management

AI/ML Integration

• Engineered OCR pipeline with prompt-tuned Gemini models achieving 90%+ accuracy • Developed robust JSON sanitization (strips markdown, handles malformed responses) • Optimized image preprocessing (Base64 + grayscale) reducing file size 40% while maintaining accuracy

Mobile Development

• Created multi-screen workflow: capture → review → split with Expo Router • Implemented complex state management with React Hooks (useState, useEffect, useRef) • Built custom hooks for currency conversion (165+ currencies with real-time exchange rates) • Designed smooth animations using Animated API with native driver for 60fps performance

Algorithm Design

• Proportional Cost Splitting: Calculate each guest's subtotal proportion, multiply tax/tip by proportion for mathematically accurate distribution • Item Expansion Logic: Convert multi-quantity items into individual units while preserving per-item pricing for granular assignment • Dynamic Recalculation: Subtotal updates trigger cascading recalculations across tip, tax, and total

Problem-Solving

• AI Response Parsing: Handled inconsistent outputs (markdown formatting, malformed JSON) with regex preprocessing • International Currency Formats: Supported comma decimals (10,99) and thousand separators (1.000,00) • Network Resilience: 15-second timeouts, retry logic, offline manual entry fallback • State Synchronization: Kept bill totals consistent across edits with derived state patterns

Production Features

Error Handling (Multi-Layer)

  • Frontend: Network timeouts, invalid responses, permission errors with user-friendly messages
  • Backend: Try-catch blocks, fallback values (quantity defaults to 1)
  • Data Processing: Type conversion safety, currency format edge cases

Security & Deployment

  • CORS enabled for mobile app access
  • API keys in environment variables (.env)
  • Request validation on all endpoints
  • Gunicorn WSGI server on Render cloud platform
  • EAS build system for iOS/Android deployment

User Experience

  • Animated gradient backgrounds with floating circles
  • Confetti celebration animations on task completion
  • Help modals with usage instructions
  • Share integration with formatted payment requests (Venmo-ready)
  • Currency conversion with search functionality

Technical Growth

This project deepened my expertise in: • Full-stack architecture: End-to-end feature ownership from mobile UI to cloud deployment • AI prompt engineering: Structuring prompts for consistent JSON extraction from unstructured images • Mobile performance optimization: Image compression, animation performance, state management patterns • API design: RESTful principles, error handling, third-party integration (Currency API) • Algorithm development: Proportional calculations, item subdivision, dynamic recalculation • Production readiness: Environment configuration, CORS security, comprehensive error handling

Delivered an intelligent, scalable, production-ready system deployed to the App Store with real users.