Presenting a React Web Application to convert Printed Text or Other Text to convert into local data using OCR, and storing the extracted data into a Database. It uses React.js for frontend, while MongoDB + GraphQL as its backend. OCR Technology is added using the Pure Javascript Multilingual OCR Library Tesseract.js

• Supports more than 100 languages
• Automatic text orientation and script detection
• Simple interface for reading paragraph, word, and character bounding boxes
• It can run either in a browser and on a server with NodeJS.

Dashboard

Image Convert Screen

Document Schema:

const documentSchema = new Schema({
  content: String,
  title: String,
  date: Date,
  userId: String
});

GraphQL Root Query and Mutation:

const RootQuery = new GraphQLObjectType({
  name: "RootQueryType",
  fields: {
    documents: {
      type: GraphQLList(DocumentType),
      resolve(parent, args) {
        return Document.find({});
      }
    }
  }
});

const Mutations = new GraphQLObjectType({
  name: "Mutations",
  fields: {
    addDocument: {
      type: DocumentType,
      args: {
        content: { type: new GraphQLNonNull(GraphQLString) },
        title: { type: new GraphQLNonNull(GraphQLString) },
        date: { type: new GraphQLNonNull(GraphQLDateTime) }
      },
      resolve(parent, args) {
        let document = new Document({
          content: args.content,
          title: args.title,
          date: args.date
        });
        return document.save();
      }
    }
  }
});

• Create a New React App - Get started with React here
• Material-UI - React components for faster and easier web development
• Express.js - A web application framework for Node.js
• GraphQL - An open-source data query and manipulation language for APIs
• Mongoose - An Object Data Modeling (ODM) library for MongoDB and Node
• Firebase - Build apps fast, without managing infrastructure
• Tesseract.js - The pure Javascript port of the popular Tesseract OCR engine
• Multer - Multer is a node.js middleware for handling multipart/form-data

In the root directory, you can run: nodemon server

Server will be running at http://localhost:5001. It is required for endpoint where Tesseract.js is running.

In the server directory, you can run: nodemon server

Server will be running at http://localhost:5000. It is required for MongoDB cluster connectivity and GraphQL endpoints.

In the src directory, you can run: yarn start

The website will be live at http://localhost:3000.

This project was bootstrapped with Create React App.

| Amogh Warkhandkar | Omkar Bhambure |