How to Build User Management System Using NodeJS?

A User Management System is an essential application for handling user accounts and information. It involves creating, reading, updating, and deleting user accounts, also known as CRUD operations. In this article, we will walk through how to build a simple User Management System using NodeJS.

What We Are Going to Create

We will create a simple web application where administrators can manage users. The application will feature

• A text input for administrators to add user details.
• Buttons to create, read, update, and delete users (CRUD operations).
• A result section that displays a list of users, and their details, and allows for modifications or deletion.

Project Preview

Approach

Below are the following approaches through which we can build a user management system using NodeJS.

• Set Up Middleware with EJS: Use EJS (Embedded JavaScript) as the templating engine to render dynamic HTML pages. Configure it as middleware to send data from the server (e.g., app.js) to the web pages, allowing you to dynamically display user information on the front end.
• Install and Configure Body Parser: Install Body Parser middleware to capture user input from forms (such as name, email, etc.). This allows the server to handle POST requests and parse incoming form data, which is then stored in a collection (like an array or database).
• Create Routes for Creating Users: Define a POST route to handle user creation. The form submission (name, email) will be captured by the server, and a new user will be added to the collection. This data is sent back to the front end and displayed on the page.
• Create Delete Route: Set up a DELETE route to delete users from the collection. By using the user’s ID (or other identifier), the application can remove users from the collection and update the webpage to reflect the changes.
• Create Update Route: Implement an UPDATE route that allows modifying user data. When the user updates their information (like changing their name or email), the server will capture the new values, update the collection, and reflect these changes on the front end.

Steps to Build a User Management System Using Node

Step 1: Create a Project Folder

Open your terminal (Command Prompt/PowerShell) and run the following commands:

mkdir user-management-system
cd user-management-system

Step 2: Initialize a NodeJS Project

This will create a package.json file.

npm init -y

Step 3: Install Dependencies

Run the following command to install the required dependencies

npm install express ejs body-parser

This installs:

• Express: Backend framework
• EJS: Templating engine
• Body-parser: To handle form submissions

After installation, the dependencies section in package.json should look like this:

"dependencies": {
    "body-parser": "^1.20.2",
    "ejs": "^3.1.10",
    "express": "^4.19.2"
}

Step 4: Create Server File

Create an 'app.js' file, inside this file require the Express Module,to create a constant 'app' for creating an instance of the express module, then set the EJS as the default view engine.

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const PORT = 3000;

// Middleware
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Sample Users Data
let users = [
    { userUniqueId: "1", userName: "Aditya Gupta", userEmail: "[email protected]", userAge: "22" },
    { userUniqueId: "2", userName: "Vanshita Jaiswal", userEmail: "[email protected]", userAge: "21" },
    { userUniqueId: "3", userName: "Sachin Yadav", userEmail: "[email protected]", userAge: "22" }
];

// Home Route - Display Users
app.get("/", (req, res) => {
    res.render("home", { data: users });
});

// Add User Route
app.post("/", (req, res) => {
    const newUser = {
        userUniqueId: req.body.userUniqueId,
        userName: req.body.userName,
        userEmail: req.body.userEmail,
        userAge: req.body.userAge
    };

    users.push(newUser);
    res.render("home", { data: users });
});

// Delete User Route
app.post('/delete', (req, res) => {
    const requestedUserUniqueId = req.body.userUniqueId;
    users = users.filter(user => user.userUniqueId !== requestedUserUniqueId);

    res.render("home", { data: users });
});

// Update User Route
app.post('/update', (req, res) => {
    users.forEach(user => {
        if (user.userUniqueId === req.body.userUniqueId) {
            user.userName = req.body.userName;
            user.userEmail = req.body.userEmail;
            user.userAge = req.body.userAge;
        }
    });

    res.render("home", { data: users });
});

// Start Server
app.listen(PORT, () => {
    console.log(`Server running at http://localhost:${PORT}`);
});

In this example

• The code uses Express.js to create a server that listens on port 3000.
• Body-Parser is used as middleware to handle incoming form data, both in JSON format and URL-encoded format (for form submissions).
• EJS is set as the view engine to render dynamic HTML templates.
• A sample list of users is created as an array (users). Each user has properties like userUniqueId, userName, userEmail, and userAge.
• The root route (/) renders the home.ejs template and passes the uuser'sdata to it, which will be displayed ionthe web page.
• When the user submits the form to add a new user, the POST route receives the form data via req.body and creates a new user.
• When a user’s userUniqueId is submitted, the system filters out that user from the user's array and updates the displayed list.
• When a user’s updated details (name, email, age) are submitted, the system updates the respective user’s information in the user's array and re-renders the updated list of users.

Step 5: Set Up Views Directory

Create a views folder in your root directory and inside it, create a file called home.ejs.

Step 6: Create the Home Page (home.ejs)

Inside views/home.ejs, add the following code:

<html>
<body>
    <h1>User Management System</h1>
    <!-- Display Users -->
    <h2>Current Users</h2>
    <table border="1">
        <tr>
            <th>User Id</th>
            <th>User Name</th>
            <th>User Email</th>
            <th>Age</th>
            <th>Delete</th>
        </tr>
        <% data.forEach(user => { %>
        <tr>
            <td><%= user.userUniqueId %></td>
            <td><%= user.userName %></td>
            <td><%= user.userEmail %></td>
            <td><%= user.userAge %></td>
            <td>
                <form action="/delete" method="post">
                    <input type="hidden" name="userUniqueId" value="<%= user.userUniqueId %>">
                    <button type="submit">Delete</button>
                </form>
            </td>
        </tr>
        <% }) %>
    </table>
     <!-- Add User Form -->
     <h2>Add User</h2>
     <form action="/" method="post">
         <input type="text" placeholder="User Unique Id" name="userUniqueId" required>
         <input type="text" placeholder="User Name" name="userName" required>
         <input type="text" placeholder="User Email" name="userEmail" required>
         <input type="text" placeholder="User Age" name="userAge" required>
         <button type="submit">Submit</button>
     </form>
    <!-- Update User Form -->
    <h2>Update User</h2>
    <form action="/update" method="post">
        <input type="text" placeholder="User Unique Id" name="userUniqueId" required>
        <input type="text" placeholder="User Name" name="userName">
        <input type="text" placeholder="User Email" name="userEmail">
        <input type="text" placeholder="User Age" name="userAge">
        <button type="submit">Update</button>
    </form>
</body>
</html>

Output

In your terminal, navigate to the project folder and run

node app.js

Conclusion

In this guide, we have walked through the process of building a simple UserManagement System using NodeJS with Express.js, EJS, and Body Parser. This system allows administrators to manage users by performing various operations such as: adding new user, Viewing a list of users with details like name, email, age etc, Deleting user from the database.