Document Management System with React and Express.js
Last Updated : 24 Apr, 2025
This project is a Document Management System (DMS) developed with a combination of NodeJS, ExpressJS for the server side and React for the client side. The system allows users to view, add, and filter documents. The server provides a basic API to retrieve document data, while the React application offers an intuitive user interface for interacting with the system.
Output Preview: Let us have a look at how the final output will look like.
Prerequisites:
Approach to Create a Document Management System:
1. Server-Side (NodeJS with ExpressJS):
The server initializes an Express application, uses CORS for cross-origin resource sharing, and defines a basic API endpoint (/dms) to retrieve document data. Document data is stored as a static array for demonstration purposes.
2. Client-Side (React):
The React application, on the client-side, fetches document data from the NodeJS server using Axios. It provides options to view existing documents, add new documents, and filter documents by the creator's username. Documents can be deleted, and new documents can be added with a form.
Steps to Create Backend using Node & Installing modules:
Step 1: Create a new project directory and navigate to your project directory.
mkdir <<name of project>>
cd <<name of project>>
Step 2: Run the following command to initialize a new NodeJS project.
npm init -y
Step 3: Install the required the packages in your server using the following command.
npm install express body-parser cors
Project Structure(Backend):
Project StructureThe updated dependencies in package.json file of backend will look like:
"dependencies": {
"express": "^4.18.2",
"cors": "^2.8.5",
}Example: Create a new file for your server, for example, index.js inside a folder named server.
JavaScript // server/index.js // Import required modules const express = require('express'); const cors = require('cors'); // Create an Express application const app = express(); // Enable CORS for cross-origin resource sharing app.use(cors()); const documents = [ { id: 1, name: 'Document 1', createdDate: '2024-03-03', createdBy: 'User 1' }, { id: 2, name: 'Document 2', createdDate: '2024-03-04', createdBy: 'User 2' }, { id: 3, name: 'Document 3', createdDate: '2024-03-05', createdBy: 'User 3' }, { id: 4, name: 'Document 4', createdDate: '2024-03-06', createdBy: 'User 4' }, { id: 5, name: 'Document 5', createdDate: '2024-03-07', createdBy: 'User 5' }, ]; /* Define the API endpoint to retrieve and display document data */ app.get('/dms', (req, res) => { res.json(documents); }); // Start the server on port 5000 const port = 5000; app.listen(port, () => { console.log(`Server is running on http://localhost:${port}`); }); Step 4: Start the Server
In the terminal, navigate to the server folder and run the following command to start the server:
node index.js
Open your web browser and go to http://localhost:5000/dms. You should see the JSON data representing the initial set of documents.
Steps to Create a Frontend Application:
Step 1: Create a new application using the following command.
npx create-react-app <<Name_of_project>>
cd <<Name_of_project>>
Step 2: Install the required packages in your application using the following command.
npm intall axios
Project Structure(Frontend):
Project StructureThe updated dependencies in package.json file of frontend will look like:
"dependencies": {
"axios": "^1.6.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"web-vitals": "^2.1.4"
},Step 3: Changes in files.
- Inside the src/, create a new file named DocumentList.js. Copy and paste the provided React code for the DocumentList component into this file.
- Also create Navbar.js and copy paste the code of Navbar.js provide below
- Replace App.js and Index.js and index.css with the following code provided below
CSS /* index.css */ body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; } .navbar { background-color: #007bff; color: white; padding: 15px; text-align: center; } .hero-section { display: flex; justify-content: space-between; margin: 20px; } .hero-left, .hero-right { flex: 1; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .hero-left button, .hero-right button { background-color: #007bff; color: white; padding: 10px; border: none; border-radius: 4px; margin-right: 10px; cursor: pointer; } .hero-right form { display: flex; flex-direction: column; } .hero-right form label { margin-bottom: 8px; } .hero-right form input { padding: 8px; margin-bottom: 16px; border: 1px solid #ddd; border-radius: 4px; } .hero-right form button { background-color: #28a745; color: white; padding: 10px; border: none; border-radius: 4px; cursor: pointer; } .content { margin: 20px; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #007bff; color: white; } .document-details { background-color: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin-bottom: 16px; } .document-details button { background-color: #dc3545; color: white; padding: 8px; border: none; border-radius: 4px; cursor: pointer; } // App.js import React from 'react'; import DocumentList from './DocumentList'; function App() { return ( <div className="App"> <DocumentList /> </div> ); } export default App; // DocumentList.js import React, { useState, useEffect } from 'react'; import axios from 'axios'; function DocumentList() { const [documents, setDocuments] = useState([]); const [selectedDocument, setSelectedDocument] = useState(null); const [newDocument, setNewDocument] = useState({ name: '', createdDate: new Date().toLocaleDateString(), createdBy: 'Admin', file: null, }); const [filterByUser, setFilterByUser] = useState(''); useEffect(() => { // Fetch documents from the server axios.get('http://localhost:5000/dms') .then(response => setDocuments(response.data)) .catch(error => console.error('Error fetching documents:', error)); }, []); const handleViewDocuments = () => { setSelectedDocument(null); }; const handleAddDocument = () => { setSelectedDocument({ isForm: true }); }; const handleDeleteDocument = (id) => { const updatedDocuments = documents.filter( doc => doc.id !== id); setDocuments(updatedDocuments); }; const handleFileChange = (event) => { const file = event.target.files[0]; /* Update the file and document name in the new document state */ setNewDocument({ ...newDocument, file, name: file ? file.name.replace(/\.[^/.]+$/, '') : '', }); }; const handleSubmitForm = (event) => { event.preventDefault(); // Add the new document to the documents array setDocuments([...documents, newDocument]); // Clear the form and hide it setNewDocument({ name: '', createdDate: new Date().toLocaleDateString(), createdBy: 'Default User', file: null, }); setSelectedDocument(null); }; const handleFilterByUser = () => { // Filter documents based on the specified user const filteredDocuments = documents.filter( doc => doc.createdBy === filterByUser); setDocuments(filteredDocuments); }; return ( <div> <nav> <div className="navbar"> <h1>Document Management System</h1> </div> </nav> <div className="hero-section"> <div className="hero-left"> <button onClick={handleAddDocument}> Add a Document </button> <button onClick={handleViewDocuments}> View Documents </button> <input type="text" placeholder="Filter by User" value={filterByUser} onChange={(e) => setFilterByUser(e.target.value)} /> <button onClick={handleFilterByUser}>Filter</button> </div> <div className="hero-right"> {selectedDocument === null ? ( <p></p> ) : selectedDocument.isForm ? ( <form onSubmit={handleSubmitForm}> <h2>Add a Document</h2> <label>Name:</label> <input type="text" value={newDocument.name} onChange={(e) => setNewDocument({ ...newDocument, name: e.target.value })} required /> <label>Created Date:</label> <input type="text" value={newDocument.createdDate} disabled /> <label>Created By:</label> <input type="text" value={newDocument.createdBy} disabled /> <label>File:</label> <input type="file" onChange={handleFileChange} accept=".pdf,.doc,.docx" required /> <button type="submit">Submit</button> </form> ) : ( <div> <h2>Document Details</h2> {documents.map(doc => ( <div key={doc.id} className="document-details"> <p>ID: {doc.id}</p> <p>Name: {doc.name}</p> <p>Created Date: {doc.createdDate}</p> <p>Created By: {doc.createdBy}</p> <button onClick={() => handleDeleteDocument(doc.id)}> Delete </button> </div> ))} </div> )} </div> </div> <div className="content"> <h2>Document List</h2> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Created Date</th> <th>Created By</th> <th>Action</th> </tr> </thead> <tbody> {documents.map(doc => ( <tr key={doc.id}> <td>{doc.id}</td> <td>{doc.name}</td> <td>{doc.createdDate}</td> <td>{doc.createdBy}</td> <td> <button onClick={() => handleDeleteDocument(doc.id)}> Delete </button> </td> </tr> ))} </tbody> </table> </div> </div> ); } export default DocumentList; // Navbar.js import React from 'react'; const Navbar = () => { return ( <nav> <h1>Document Management System</h1> </nav> ); }; export default Navbar; // clinet/src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); Start your application using the following command.
npm start
Output:
Document Management System with React and Express.js Similar Reads
Content Management System (CMS) using React and Express.js
This project is a Content Management System (CMS) Admin Panel developed using React for the frontend and NodeJS and ExpressJS for the backend. The Admin Panel allows administrators to manage content, including viewing and editing posts, approving pending posts, and adding new content. It features re
8 min read
Appointment Management System using React
The Appointment Management System is a web application that allows users to schedule, manage, and view appointments. It provides an easy-to-use interface for clients to book and keep track of appointments. Below is a simplified outline for creating an Appointment Management System using React JS. Pr
5 min read
Document Management System using NextJS
The Document Management System is a web application developed using Next.js, that allows users to efficiently manage their documents. The system provides features for uploading, organizing, and retrieving documents. Users can upload documents through the web interface, which are then stored in local
5 min read
Expense Management System using MERN Stack
In this article, we’ll walk through the step-by-step process of creating a Expense Management System using the MERN (MongoDB, ExpressJS, React, NodeJS) stack. This project will showcase how to set up a full-stack web application where users can add their budget and put daily expenses that get deduct
14 min read
React Single File Upload with Multer and Express.js
When we want to add functionality for uploading or deleting files, file storage becomes crucial, whether it's for website or personal use. The File Storage project using Express aims to develop a web application that provides users with a secure and efficient way to store and manage their files onli
5 min read
How to Manage Sessions and Cookies in Express JS?
Express is a small framework that sits on top of NodeJS web server functionality to simplify its APIs and add helpful new features. It makes it easier to organize your application’s functionality with middleware and routing. It adds helpful utilities to NodeJS HTTP objects, it helps the rendering of
4 min read
Passing an object to Client in Node/Express.js with EJS Templating Engine
EJS stands for Embedded JavaScript. It is a templating language used to generate dynamic HTML pages with data from the server by embedding JavaScript code. This article provides a detailed explanation of the process of passing objects from a Node.js/Express server to clients using the EJS templating
3 min read
Building a Toll Road Management System using Node.js
In this article, we are going to build a simple Toll Road Management System using Node.js, where the data will be stored in a local MongoDB database. Problem Statement: In a toll tax plaza, it is difficult to record all the transactions and store them in a single place, along with that, if required,
15+ min read
Real-Time Auction Platform using Node and Express.js
The project is a Real-Time Auction Platform developed using Node.js Express.js and MongoDB database for storing details where users can browse different categories of products, view ongoing auctions, bid on items, and manage their accounts. The platform also allows sellers to list their products for
12 min read
How to Build Employee Management System using Node.js ?
An Employee Management System (EMS) is a crucial tool for businesses to efficiently manage their workforce. It allows companies to handle tasks like displaying employee details, adding new employees, removing existing ones, promoting employees, and updating salaries. In this article, we'll walk thro
8 min read