Welcome to DocuThinker! This is a full-stack (FERN-Stack) application that integrates an AI-powered document processing backend with a React-based frontend. The app allows users to upload documents for summarization, generate key insights, and chat with an AI based on the document's content.
- 📖 Overview
- ✨ Features
- ⚙️ Technologies
- 🖼️ User Interface
- Landing Page
- Landing Page - Dark Mode
- Document Upload Page
- Document Upload Page - Dark Mode
- Home Page
- Home Page - Dark Mode
- Home Page - With Key Ideas
- Chat Modal
- Chat Modal - Dark Mode
- How To Use Page
- How To Use Page - Dark Mode
- Login Page
- Login Page - Dark Mode
- Registration Page
- Registration Page - Dark Mode
- Forgot Password Page
- Forgot Password Page - Dark Mode
- Responsive Design Example
- 📂 Complete File Structure
- 🛠️ Getting Started
- 📋 API Endpoints
- 📦 Containerization
- 🚀 Deployment
- 🔧 Contributing
- 📝 License
- 📚 Alternative Documentation
- 👨💻 Author
The DocuThinker app is designed to provide users with a simple, AI-powered document management tool. Users can upload PDFs or Word documents and receive summaries, key insights, and discussion points. Additionally, users can chat with an AI using the document's content for further clarifications.
DocuThinker is created using the FERN-Stack architecture, which stands for Firebase, Express, React, and Node.js. The backend is built with Node.js and Express, integrating Firebase for user authentication and MongoDB for data storage. The frontend is built with React and Material-UI, providing a responsive and user-friendly interface.
It is currently deployed live on Vercel and Render. You can access the live app here.
- Document Upload & Summarization: Upload PDFs or Word documents for AI-generated summaries.
- Key Insights & Discussion Points: Generate important ideas and topics for discussion from your documents.
- AI Chat Integration: Chat with an AI using your document’s original context.
- User Authentication: Secure registration, login, and password reset functionality.
- Responsive Design: Seamless experience across both desktop and mobile devices.
- Dark Mode Support: Toggle between light and dark themes.
- How To Use Guide: Detailed instructions on how to use the app effectively.
- API Documentation: Swagger documentation for all API endpoints.
- Error Handling: Custom error messages and alerts for better user experience.
- Loading Spinners: Visual feedback during document processing and API calls.
- Authentication Middleware: Secure routes with Firebase authentication middleware.
- Environment Variables: Securely store sensitive data using environment variables.
- Containerization: Dockerize the app for easy deployment and scaling.
- Continuous Integration: Automated testing and deployment with GitHub Actions.
- Frontend:
- React: JavaScript library for building user interfaces.
- Material-UI: React components for faster and easier web development.
- Axios: Promise-based HTTP client for making API requests.
- React Router: Declarative routing for React applications.
- Context API: State management for React applications.
- React Redux: State container for JavaScript apps.
- Backend:
- Express: Web application framework for Node.js.
- Firebase Admin SDK: Firebase services for server-side applications.
- Node.js: JavaScript runtime for building scalable network applications.
- Firebase Authentication: Secure user authentication with Firebase.
- Firebase Auth JWT: Generate custom tokens for Firebase authentication.
- Database:
- MongoDB: NoSQL database for storing user data and documents.
- Firestore: Cloud Firestore for storing user data and documents.
- API Documentation:
- Swagger: OpenAPI documentation for all API endpoints.
- Containerization:
- Docker: Containerization platform for building, shipping, and running applications.
- Continuous Integration:
- GitHub Actions: Automated workflows for testing and deployment.
- Render: Cloud platform for hosting and scaling web applications. (Used to deploy the backend)
- Vercel: Cloud platform for hosting and deploying web applications. (Used to deploy the frontend)
- Netlify: Cloud platform for hosting and deploying web applications. (Used as a backup)
- Firebase: Cloud platform for building web and mobile applications.
DocuThinker features a clean and intuitive user interface designed to provide a seamless experience for users. The app supports both light and dark themes, responsive design, and easy navigation. Here are some screenshots of the app:
DocuThinker-AI-App/
├── backend/
│ ├── controllers.js # Controls the flow of data and logic
│ ├── models.js # Models for interacting with database and AI/ML services
│ ├── views.js # Output formatting for success and error responses
│ ├── .env # Environment variables (git-ignored)
│ ├── index.js # Main entry point for the server
│ ├── Dockerfile # Docker configuration file
│ └── README.md # Backend README file
├── 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
│ ├── Dockerfile # Docker configuration file
│ ├── README.md # Frontend README file
│ └── package.lock # Lock file for dependencies
├── images/ # Images for the README
├── .env # Environment variables file for the whole app
├── docker-compose.yml # Docker Compose file for containerization
├── jsconfig.json # JavaScript configuration file
├── package.json # Project dependencies and scripts
├── package-lock.json # Lock file for dependencies
├── postcss.config.js # PostCSS configuration file
├── tailwind.config.js # Tailwind CSS configuration file
├── render.yaml # Render configuration file
├── vercel.json # Vercel configuration file
├── .gitignore # Git ignore file
├── LICENSE.md # License file for the project
└── README.md # Comprehensive README for the whole app
Ensure you have the following tools installed:
- Node.js (v14 or higher)
- npm or yarn
- Firebase Admin SDK credentials
- Google Generative AI credentials
- .env file with necessary API keys (You can contact me to get the
.envfile - but you should obtain your own API keys for production).
-
Clone the repository:
git clone https://github.com/hoangsonww/DocuThinker-AI-App.git cd DocuThinker-AI-App/backend -
Navigate to the frontend directory:
cd frontend -
Install dependencies:
npm install
-
Start the Frontend React app:
npm start
Note that this is optional since we are deploying the backend on Render. However, you can (and should) run the backend locally for development purposes.
-
Navigate to the backend directory:
cd backend -
Install dependencies:
npm install
-
Start the backend server:
npm run dev
| HTTP Method | Endpoint | Description | Auth Required |
|---|---|---|---|
| POST | /register |
Register a new user | No |
| POST | /login |
Login a user and generate a custom token | No |
| POST | /upload |
Upload a document for summarization | Yes |
| POST | /generate-key-ideas |
Generate key ideas from document text | Yes |
| POST | /generate-discussion-points |
Generate discussion points from document text | Yes |
| POST | /chat |
Chat with AI using document context | Yes |
| POST | /forgot-password |
Reset a user's password | No |
| POST | /verify-email |
Verify if a user's email exists | No |
| GET | /user |
Get user details | Yes |
| GET | /logout |
Logout a user | Yes |
| GET | /api-docs |
Swagger API documentation | No |
| GET | /api-docs/redoc |
Redoc API documentation | No |
| GET | / |
Test route for backend server | No |
| PUT | /update-password |
Update a user's password | Yes |
| PUT | /update-email |
Update a user's email | Yes |
| PUT | /update-name |
Update a user's name | Yes |
| PUT | /update-avatar |
Update a user's avatar | Yes |
| DELETE | /delete-account |
Delete a user's account | Yes |
| DELETE | /delete-document |
Delete a user's document | Yes |
| DELETE | /delete-all-documents |
Delete all user documents | Yes |
| DELETE | /delete-all-users |
Delete all users | Yes |
| DELETE | /delete-all-data |
Delete all user data | Yes |
- Swagger Documentation: You can access the Swagger documentation for all API endpoints by running the backend server and navigating to
http://localhost:5000/api-docs. - Redoc Documentation: You can access the Redoc documentation for all API endpoints by running the backend server and navigating to
http://localhost:5000/api-docs/redoc.
For example, our API endpoints documentation looks like this:
- The backend API is structured using Express and Firebase Admin SDK for user authentication and data storage.
- We use the MVC (Model-View-Controller) pattern to separate concerns and improve code organization.
- The API endpoints are designed to be RESTful and follow best practices for error handling and response formatting.
- The API routes are secured using Firebase authentication middleware to ensure that only authenticated users can access the endpoints.
- The API controllers handle the business logic for each route, interacting with the data models and formatting the responses.
-
You can test the API endpoints using Postman or Insomnia. Simply make a POST request to the desired endpoint with the required parameters.
-
For example, you can test the
/uploadendpoint by sending a POST request with the document file as a form-data parameter. -
Feel free to test all the API endpoints and explore the functionalities of the app.
curl --location --request POST 'http://localhost:3000/register' \
--header 'Content-Type: application/json' \
--data-raw '{
"email": "test@example.com",
"password": "password123"
}'curl --location --request POST 'http://localhost:3000/upload' \
--header 'Authorization: Bearer <your-token>' \
--form 'File=@"/path/to/your/file.pdf"'The backend APIs uses centralized error handling to capture and log errors. Responses for failed requests are returned with a proper status code and an error message:
{
"error": "An internal error occurred",
"details": "Error details go here"
}The DocuThinker app can be containerized using Docker for easy deployment and scaling. Follow these steps to containerize the app:
-
Run the following command to build the Docker image:
docker compose up --build
-
The app will be containerized and ready to run on port 3000.
-
Install the Vercel CLI:
npm install -g vercel
-
Deploy the frontend:
vercel
-
Follow the instructions in your terminal to complete the deployment.
- We have deployed the app live on Vercel and Render. You can access the live app here.
- Additionally, we are also using Netlify for backups and testing. You can access the backup app here.
-
The backend can be deployed on platforms like Heroku, Render, or Vercel.
-
Currently, we are using Render to host the backend. You can access the live backend here.
-
Please note that we are currently on the Free Tier of Render. This means that the backend server may take a few seconds to wake up if it has been inactive for a while.
-
Therefore, the first API call may take a bit longer to respond. Subsequent calls should be faster as the server warms up. It is completely normal to take up to 2 minutes for the first API call to respond.
We welcome contributions from the community! Follow these steps to contribute:
- Fork the repository.
- Create a new branch:
git checkout -b feature/your-feature
- Commit your changes:
git commit -m "Add your feature" - Push the changes:
git push origin feature/your-feature
- Submit a pull request.
We will review your changes and merge them into the main branch shortly.
This project is licensed under the Creative Commons Attribution-NonCommercial License. See the LICENSE file for details.
The DocuThinker open-source project is for educational purposes only and should not be used for commercial applications. Feel free to use it for learning and personal projects!
- Son Nguyen
- Feel free to connect with me on LinkedIn.
- If you have any questions or feedback, please feel free to reach out to me at hoangson091104@gmail.com.
- Also, check out my portfolio for more projects and articles.
Happy Coding and Analyzing! 🎶
Created with ❤️ by Son Nguyen in 2024.