Aquileo | 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.

Features of the User Management App

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.

Steps to Build User Management System

Follow these steps to build a basic user management system with CRUD functionality.

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.

index.js

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: "aditya@gmail.com", userAge: "22" },
    { userUniqueId: "2", userName: "Vanshita Jaiswal", userEmail: "vanshita@gmail.com", userAge: "21" },
    { userUniqueId: "3", userName: "Sachin Yadav", userEmail: "sachin@gmail.com", 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}`);
});

Express server: Runs on port 3000 to handle requests.
Body-Parser middleware: Middleware used to parse incoming JSON and URL-encoded form data and make it accessible via req.body.
EJS view engine: Renders dynamic HTML templates.
Users array: Stores user objects with id, name, email, and age.
Root route (/): Renders home.ejs with user data.
POST route: Creates, updates, and deletes users, then re-renders the updated list.

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:

index.js

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

In your terminal, navigate to the project folder and run

node app.js

Output:

Build User Management System Using NodeJS