Back to projects
AI & Computer Vision

Image to Text OCR Application

Full-stack OCR app that converts image text into editable text in the browser and stores images plus extracted text in MongoDB.

PrototypeFull-Stack OCR Application / 2024

Problem

Users need to digitize image-based text, review it, and store the result with the original image.

Solution

Build a React frontend for browser OCR and text review, backed by an Express/Multer API and MongoDB.

Key Features

In-browser OCR using Tesseract.js with no server-side model required
File upload interface for images containing text
Extracted text review and editing step before saving
Express.js REST API with Multer for image uploads
MongoDB persistence for both images and extracted text via Mongoose
Responsive frontend built with React and Tailwind CSS

Architecture Map

Mermaid
flowchart LR
  User["React browser UI"] --> Upload["Image upload"]
  Upload --> OCR["Tesseract OCR"]
  OCR --> Review["Extracted text review"]
  Review --> API["Express API"]
  Upload --> API
  API --> Files["Multer file storage"]
  API --> Models["Mongoose models"]
  Models --> DB[("MongoDB")]

OCR App Screenshots

2 views
Input sample from the repository: a styled Edge Detection document used to validate the OCR extraction.
Result artifact stored as Test_text.txt by the Express backend, showing the extracted Edge Detection text after processing.