An open-source, lightning-fast UI for demonstrating receipt extraction in Nigerian Fintech using receipt-ocr-ng.

Overview

Dispacc Receipt OCR UI is a beautiful, highly interactive frontend environment designed to showcase the capabilities of the lightweight receipt-ocr-ng extraction engine.

Instead of manually verifying bank transfers, Dispacc OCR automatically parses transaction screenshots to securely extract normalized key-value data including Amount, Date, Sender, Recipient, Bank, and Reference.

This repository functions as both a standalone application and a reference implementation to inspire developers looking to build local fintech automation flows.

🚀 Features

• Blazing Fast Extraction: Uses receipt-ocr-ng backed by the ultra-fast Groq API.
• Beautiful Tailwind v4 UI: Carefully crafted user experience with drag-and-drop functionality, fluid UI states, and elegant success/failure animations.
• Smart Fraud Prevention: Automatically parses incomplete or flagged receipts and generates appropriate warnings.
• Developer Ready: Toggable developer JSON view with syntax highlighting to instantly inspect raw engine responses.

🛠️ Local Development

Prerequisites

• Node.js >= 18
• pnpm (recommended)
• A Groq API Key

Setup

# 1. Clone the repository
git clone https://github.com/codepraycode/dispacc-receipt-ocr.git
cd dispacc-ocr-ui

# 2. Install dependencies
pnpm install

# 3. Create your environment variables
cp .env.example .env.local

Open .env.local and add your Groq API key:

GROQ_API_KEY=gsk_your_api_key_here

Run the App

pnpm dev

Navigate to http://localhost:3000 to start dropping in receipts!

🤝 Contributing

Dispacc is actively looking for open-source contributions. Whether you're fixing bugs, improving OCR accuracy configurations, or polishing the UI, your PRs are warmly welcome!

Where to Contribute

1. Model Optimization: Adjust prompt templating in the linked receipt-ocr-ng library.
2. UI Enhancements: Make the file uploader and data representation more robust. Support more banking platforms.
3. Accessibility: Make the application completely usable with screen readers.
4. Documentation: Enhance the README, inline comments, or add a standard API spec on how to consume the underlying route.

How to Contribute

1. Fork the repo and create your branch from main.
2. Ensure you have run pnpm lint and formatting passes.
3. Issue a descriptive Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.