Document Management System with React and Express.js
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):
The 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):
The 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 ; } |
Javascript
// App.js import React from 'react' ; import DocumentList from './DocumentList' ; function App() { return ( <div className= "App" > <DocumentList /> </div> ); } export default App; |
Javascript
// 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; |
Javascript
// Navbar.js import React from 'react' ; const Navbar = () => { return ( <nav> <h1>Document Management System</h1> </nav> ); }; export default Navbar; |
Javascript
// 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:
Contact Us