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:

• NPM & NodeJS
• ExpressJS
• ReactJS
• JavaScript
• CSS

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

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