Skip to content

Latest commit

 

History

History
339 lines (241 loc) · 10.1 KB

README.md

File metadata and controls

339 lines (241 loc) · 10.1 KB
Raw

DocuThinker Frontend

Welcome to the Frontend of the DocuThinker application! This React-based frontend integrates with the DocuThinker backend, allowing users to upload documents, chat with an AI, and extract key insights from their documents. The frontend also provides various authentication functionalities such as registration, login, and password recovery.

Table of Contents

Overview

The DocuThinker Frontend is built using React and Material-UI to create a clean and responsive interface. It allows users to:

  • Upload documents (PDF or Word) for AI-based summarization and key insights generation.
  • Register, log in, and reset their passwords.
  • View and interact with the document processing results in a user-friendly way.

User Interfaces

The frontend consists of several pages and components that make up the user interface. Here are the main pages:

Landing Page

Landing Page

Landing Page - Dark Mode

Landing Page - Dark Mode

Document Upload Page

Document Upload Page

Document Upload Page - Dark Mode

Document Upload Page - Dark Mode

Home Page

Home Page

Home Page - Dark Mode

Home Page - Dark Mode

Home Page - With Key Ideas

Home Page - With Key Ideas

Chat Modal

Chat Modal

Chat Modal - Dark Mode

Chat Modal - Dark Mode

How To Use Page

How To Use Page

How To Use Page - Dark Mode

How To Use Page - Dark Mode

Login Page

Login Page

Login Page - Dark Mode

Login Page - Dark Mode

Register Page

Register Page

Register Page - Dark Mode

Register Page - Dark Mode

Forgot Password Page

Forgot Password Page

Forgot Password Page - Dark Mode

Forgot Password Page - Dark Mode

Responsive Design - Example

Responsive Design

File Structure

Here is the complete file structure for the DocuThinker Frontend. The frontend is located under DocuThinker-AI-App/frontend:

DocuThinker-AI-App/
├── frontend/
│   ├── public/
│   │   ├── index.html                # Main HTML template
│   │   └── manifest.json             # Manifest for PWA settings
│   ├── src/
│   │   ├── assets/                   # Static assets like images and fonts
│   │   │   └── logo.png              # App logo or images
│   │   ├── components/
│   │   │   ├── ChatModal.js          # Chat modal component
│   │   │   ├── Spinner.js            # Loading spinner component
│   │   │   ├── UploadModal.js        # Document upload modal component
│   │   │   ├── Navbar.js             # Navigation bar component
│   │   │   ├── Footer.js             # Footer component
│   │   │   └── GoogleAnalytics.js    # Google Analytics integration component
│   │   ├── pages/
│   │   │   ├── Home.js               # Home page where documents are uploaded
│   │   │   ├── LandingPage.js        # Welcome and information page
│   │   │   ├── Login.js              # Login page
│   │   │   ├── Register.js           # Registration page
│   │   │   ├── ForgotPassword.js     # Forgot password page
│   │   │   └── HowToUse.js           # Page explaining how to use the app
│   │   ├── App.js                    # Main App component
│   │   ├── index.js                  # Entry point for the React app
│   │   ├── App.css                   # Global CSS 1
│   │   ├── index.css                 # Global CSS 2
│   │   ├── reportWebVitals.js        # Web Vitals reporting
│   │   ├── styles.css                # Custom styles for different components
│   │   └── config.js                 # Configuration file for environment variables
│   ├── .env                          # Environment variables file (e.g., REACT_APP_BACKEND_URL)
│   ├── package.json                  # Project dependencies and scripts
│   ├── README.md                     # This README file
│   └── package.lock                  # Lock file for dependencies

Key Folders

  • assets/: Contains static assets such as images, fonts, etc.
  • components/: Reusable React components like Navbar, Footer, and GoogleAnalytics.
  • pages/: React components representing the different pages of the app (e.g., Home, LandingPage, Login).
  • public/: Contains the index.html and other public files that aren't processed by Webpack.

Prerequisites

Before you begin, ensure you have the following installed on your machine:

  • Node.js (v14 or higher)
  • npm or yarn
  • Backend API (Ensure that the backend is set up and running. You can find the backend setup guide in the backend directory).

Installation

To get started, follow these steps:

  1. Clone the repository:

    git clone https://github.com/hoangsonww/DocuThinker-AI-App.git
cd DocuThinker-AI-App/frontend

  2. Install dependencies: Using npm:

    npm install

    or using Yarn:

    yarn install

Environment Variables

Ensure you have an .env file in the frontend/ directory with the necessary environment variables:

REACT_APP_BACKEND_URL=http://localhost:3000       # Backend URL for API requests
REACT_APP_GOOGLE_ANALYTICS_ID=G-XXXXXX            # Google Analytics ID (optional)

Running the App

  1. Start the development server:

    npm start

    or if using yarn:

    yarn start

  2. Open your browser and navigate to http://localhost:3001 (or the port you configured).

Scripts

Here are the most important scripts available in the package.json:

  • Start:

    npm start

    Starts the React app in development mode.

  • Build:

    npm run build

    Builds the app for production in the build/ directory.

  • Test:

    npm test

    Runs the test suite for the project.

Key Features

  • Document Upload: Users can upload documents (PDF, Word) and get real-time AI summaries and key insights.
  • Authentication: Users can register, log in, and reset their passwords.
  • Google Analytics Integration: User activity is tracked via Google Analytics.
  • Dark Mode Support: Theme toggle between dark and light modes.
  • Responsive Design: Works well on both desktop and mobile devices.

Screenshots

Here are some screenshots of the DocuThinker Frontend:

Landing Page

[Placeholder for Landing Page Screenshot - Centered]

Document Upload

[Placeholder for Document Upload Screenshot - Centered]

Login Page

[Placeholder for Login Page Screenshot - Centered]

Note: Replace the placeholders with actual screenshots once you have them. You can take screenshots using your browser or a screenshot tool.

Deployment

Deploying to Vercel

To deploy the app to Vercel, follow these steps:

  1. Create an account on Vercel if you don't have one.
  2. Install the Vercel CLI: 
    npm install -g vercel
  3. Link your project: 
    vercel
  4. Deploy the project: 
    vercel --prod

You can also configure the project in Vercel's dashboard and trigger deployments from your GitHub repository.

Contributing

We welcome contributions from the community! If you'd like to contribute, please follow these steps:

  1. Fork the repository.
  2. Create a new branch: 
    git checkout -b feature/your-feature
  3. Make your changes and commit them: 
    git commit -m "Add your feature"
  4. Push the changes to your forked repository: 
    git push origin feature/your-feature
  5. Open a pull request to the main repository.

License

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

Happy coding! 🚀