A professional, full-stack invoice extraction system that combines OCR, LLM processing, and human-in-the-loop review to transform unstructured invoice documents into structured sales order data.

document-extraction-app/
│
├── frontend/                 # Next.js 14 React application
│   ├── app/                  # Next.js app directory
│   ├── components/           # Reusable React components
│   ├── services/             # API communication layer
│   └── README.md
│
├── backend/                  # Flask REST API
│   ├── app.py                # Application factory
│   ├── routes/               # API route handlers
│   ├── services/             # Business logic layer
│   ├── llm/                  # LLM extraction utilities
│   ├── requirements.txt
│   └── README.md
│
├── data/
│   ├── invoices/             # Sample invoice files
│   └── database.xlsx         # Excel database (auto-created)
│
├── docs/
│   ├── architecture.md       # System architecture documentation
│   ├── scaling.md            # Scaling strategies and considerations
│   └── demo-notes.md         # Demo guide and talking points
│
└── README.md                 # ⭐ This file

• Python 3.10+
• Node.js 18+
• OpenAI API Key (Get one here)
• Tesseract OCR (Installation guide)

cd backend
python -m venv .venv

# Activate virtual environment
# Windows PowerShell:
.venv\Scripts\Activate.ps1
# Windows CMD:
.venv\Scripts\activate.bat
# Linux/Mac:
source .venv/bin/activate

# Install dependencies
pip install -r requirements.txt

# Set environment variables
# Windows PowerShell:
$env:OPENAI_API_KEY = "your-api-key-here"
$env:CASE_STUDY_EXCEL_PATH = "data\database.xlsx"
# Linux/Mac:
export OPENAI_API_KEY="your-api-key-here"
export CASE_STUDY_EXCEL_PATH="data/database.xlsx"

# Run server
python app.py

Backend runs on http://localhost:5001

cd frontend
npm install

# Optional: Set API base URL in .env.local
# NEXT_PUBLIC_API_BASE=http://localhost:5001

npm run dev

Frontend runs on http://localhost:3000

• OCR Processing: Extracts text from invoice images using Tesseract
• LLM Extraction: Uses OpenAI GPT-4o-mini to structure invoice data
• Human Review: Editable interface for verifying and correcting extracted data
• Data Persistence: Saves to Excel workbook with SalesOrderHeader/SalesOrderDetail schema
• Modern UI: Clean, responsive design with dark theme
• Modular Architecture: Service layer pattern for maintainability and testability

1. Upload: User selects an invoice image (PNG/JPG/PDF)
2. Extract: Backend performs OCR → sends to LLM → returns structured JSON
3. Review: User reviews and edits extracted fields in the UI
4. Save: Data is saved to Excel workbook with auto-generated IDs
5. View: Recent orders are displayed in a table

• Flask: Lightweight Python web framework
• Service Layer: Business logic separated into service classes
• Blueprint Pattern: Modular route organization
• Dependency Injection: Services receive dependencies through constructors

• Next.js 14: React framework with App Router
• Component-Based: Modular, reusable React components
• Service Layer: Centralized API communication
• Client-Side State: React hooks for state management

Invoice Image → OCR → LLM → Structured JSON → Human Review → Excel Database

• Architecture: Detailed system architecture and design patterns
• Scaling: Scaling strategies and production considerations
• Demo Notes: Guide for demonstrating the application

See backend/README.md for:

• API endpoint documentation
• Service layer architecture
• Adding new features
• Testing guidelines

See frontend/README.md for:

• Component structure
• API service usage
• Styling guidelines
• Build and deployment

Backend:

• OPENAI_API_KEY (required): Your OpenAI API key
• CASE_STUDY_EXCEL_PATH (optional): Path to Excel file (default: data/database.xlsx)

Frontend:

• NEXT_PUBLIC_API_BASE (optional): Backend API URL (default: http://localhost:5001)

• Separation of Concerns: Clear boundaries between routes, services, and utilities
• Modularity: Components and services are self-contained and reusable
• Testability: Service layer pattern enables easy unit testing
• Extensibility: Easy to add new features without major refactoring
• Professional Structure: Clean, organized codebase that signals seniority

For production deployment, consider:

• Database migration (see docs/scaling.md)
• Background job processing for async extraction
• Authentication and authorization
• Rate limiting and API security
• Monitoring and logging
• Error tracking (e.g., Sentry)
• Caching layer for OCR/LLM results

This project is a case study implementation.

This is a case study project. For production use, consider:

• Adding comprehensive tests
• Implementing CI/CD pipeline
• Adding API documentation (OpenAPI/Swagger)
• Setting up monitoring and alerting

Built with: Flask, Next.js, Tesseract OCR, OpenAI API, Pandas, OpenPyXL