Menu Close

Open AI based documents processing tools built with React

Open AI based documents processing tools built with React

Deployed URL

Frontend is deployed on vercel

Backend is deployed on render

https://documentor-openai.vercel.app/

Local Installation

Frontend

cd client
npm install
npm run dev

Backend

cd server
npm install
npm run server

Tech Stack

Frontend

  • React, Vite, TailwindCSS, flowbite
  • Use React-router-dom for routing through different pages
  • Use React Context to manage and update the documents data, avoiding multiple requests to backend. Only one request is required for fetching all documents needed
  • Use React Context to manage the authentication status
  • Use Tailwind CSS build responsive and dark mode supported application
  • Use Vite for deployment
  • UI design is based on FlowBite

Backend

  • Express, JWT, PostgreSQL, Open AI
  • Use Express to implement the controllors which provides backend RESTful APIs
  • Use JWT to implemnet an authorization middleware which protects backend APIs
  • Use PostgreSQL to save data securely and presistently
  • Configure and Consume Open AI APIs to implement the Services for controller to consume Open AI APIs

Functionalities

Based on Open AI APIs

Input the Documents to the left text area, and wait the result appears in right text area.

Click Clear Button to clear all text areas.

Click Copy Output to copy the results to your clipboard

Click Save Output to save the output as document, access it later in Documents Section

Summarize the document

image

Extract the keywords from the document

image

Correct grammar automatically

image

Essay Outline Generator

image

Account and Documents

Since this website consumes Open AI APIs, an account is required for accessing functionalities.

Login Page

image

Register Page

image

Documents Page

image

Appearance

Dark Mode

Click the Sun Icon to switch to dark mode

image

Moblie Supported

image
image
image

View Source Code
Posted in Open AI, React