Open In App

Document Management System with React and Express.js

Last Updated : 28 Apr, 2025
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

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.

Document Management System with React and Express.js

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):

Screenshot-2024-03-08-154539
Project Structure

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):

66
Project Structure

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:

Document Management System with React and Express.js
Document Management System with React and Express.js

A
ashishrew7vh
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox