Book Recommendation System using Node and Express.js

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.

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

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

Book Recommendation System using Node and Express.js

A

ashishrew7vh

Improve

Article Tags :

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

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

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

Book Recommendation System using Node and Express.js

The Book Recommendation System aims to enhance the user's reading experience by suggesting books tailored to their interests and preferences. Leveraging the power of machine learning and natural language processing, the system will analyze user inputs and recommend relevant books from a database. In

How to generate document with Node.js or Express.js REST API?

Generating documents with Node and Express REST API is an important feature in the application development which is helpful in many use cases. In this article, we will discuss two approaches to generating documents with Node.js or Express.js REST API. Table of Content Document Generation using PdfKi

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

State Management with useState Hook in React

useState is a built-in hook that empowers functional components to manage state directly, eliminating the need for class-based components or external state management libraries for simple use cases. It provides an easy mechanism to track dynamic data within a component, enabling it to React to user

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

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

Real Time News Aggregator with NodeJS and ExpressJS

In this article, we will create a real time news application with the help of NodeJS and ExpressJS. This article consists of several main functionalities. First, we will display the news article. Then we have implemented the search functionality to search news based on the title of the news. Then we