📘 📌 USER MANAGEMENT SYSTEM

(Full Description + Configuration Guide)

---

🧾 1. 📖 System Description

🎯 What is User Management System?

A User Management System (UMS) is a web application used to:

• Create users 👤
• View user list 📋
• Update user details ✏️
• Delete users ❌

👉 It acts as a central system to manage user data

---

🌍 Real-Life Examples

• Hospital systems (patient records)
• School ERP (student data)
• Banking apps (customer accounts)

---

🧠 Core Idea (from your architecture PDF)

👉 Separation of layers:

• UI (Frontend)
• Logic (Backend)
• Data (Database)

✔ This follows 3-Tier Architecture

---

🏗️ 2. System Architecture

📊 Architecture Diagram

6

---

🔹 Layers Explanation

🎨 1. Presentation Layer (Frontend)

• HTML, CSS, JavaScript
• Displays UI
• Takes user input

---

⚙️ 2. Business Logic Layer (Backend)

• Node.js + Express
• Handles API requests
• Processes data

---

💾 3. Data Layer (Database)

• MongoDB
• Stores user information

---

🔄 3. System Workflow

🔁 Data Flow

User → Browser → Backend API → Database
     ← Response ← Server ← Data

---

🧪 Example Flow (Add User)

1. User enters name/email
2. Clicks "Add User"
3. Frontend sends POST request
4. Backend processes request
5. Data saved in MongoDB
6. Response sent back
7. UI updates

---

🧩 4. Features

✅ Basic Features

✔ Add User
✔ View Users
✔ Delete User

---

🚀 Advanced Features (Optional)

✔ Edit User
✔ Login System
✔ Role-based access
✔ Search & Filter

---

⚙️ 5. System Configuration

---

💻 A. Software Requirements

Tool	Version
Node.js	18+
MongoDB	Latest
VS Code	Any
Browser	Chrome

---

📦 B. Installation Steps

---

🔹 Step 1: Install Node.js

👉 Download from:
https://nodejs.org

Check:

node -v
npm -v

---

🔹 Step 2: Install MongoDB

👉 Download:
https://www.mongodb.com/try/download/community

Start MongoDB:

mongod

---

🔹 Step 3: Setup Project

cd backend
npm install

---

🔌 C. Dependencies Used

{
  "express": "Web framework",
  "mongoose": "MongoDB connection",
  "cors": "Cross-origin requests",
  "body-parser": "Request parsing"
}

---

🔗 6. API Configuration

---

📡 Base URL

http://localhost:5000/api/users

---

📌 API Endpoints

➕ Create User

POST /api/users

Body:

{
  "name": "Gyan",
  "email": "gyan@email.com"
}

---

📋 Get Users

GET /api/users

---

❌ Delete User

DELETE /api/users/:id

---

🗄️ 7. Database Configuration

---

📊 Database Name

userDB

---

📄 Collection

users

---

🧾 Schema

{
  name: String,
  email: String
}

---

🧠 8. MVC Mapping (VERY IMPORTANT)

Component	Used
Model	MongoDB schema
View	HTML frontend
Controller	Express routes

---

🔐 9. Security Considerations

✔ Validate input
✔ Use HTTPS
✔ Add authentication (JWT)
✔ Prevent SQL/NoSQL injection

---

⚡ 10. Performance Considerations

From your PDF:

✔ Use caching
✔ Compress responses (GZIP)
✔ Reduce HTTP requests

---

🧪 11. Testing

🛠️ Tools

• Postman (API testing)
• Browser (UI testing)

---

✅ Test Cases

Test	Expected
Add user	Saved
Delete user	Removed
Fetch users	List shown

---

🚀 12. Deployment Configuration

---

🌍 Platforms

• Render
• Vercel (frontend)
• AWS (advanced)

---

🛠️ Steps

1. Push code to GitHub
2. Connect to hosting
3. Deploy backend
4. Update API URL

---

🎯 FINAL SUMMARY

👉 You built a complete web application

✔ Frontend (UI)
✔ Backend (API)
✔ Database (Storage)
✔ REST communication
✔ MVC structure

netwok lab

🚀 LAB SERIES: Web Architecture + Performance + Node.js

We’ll do 20 LABS total
👉 Starting with LAB 1–5 (Foundation + Tools)

---

🧪 🔥 LAB 1: Inspect HTTP Request (Chrome DevTools)

🎯 Goal

Understand how browser → server communication works

🛠️ Steps

1. Open Chrome
2. Go to any website (example: google.com)
3. Press F12 → Network tab
4. Refresh page

---

👀 What You’ll See

• Request URL
• Method (GET)
• Status (200 OK)
• Response size

📌 From your PDF:
👉 Browser sends HTTP request → server responds

---

💡 Output Understanding

GET / → Request
200 OK → Response

---

🧪 🔥 LAB 2: View Response Time (Performance Insight)

🎯 Goal

Understand why speed matters

🛠️ Steps

1. Open DevTools → Network
2. Click any request
3. Go to Timing tab

---

📊 Observe:

• DNS lookup time
• Connection time
• Response time

📌 From PDF:
👉 Even 100ms delay impacts revenue

---

🧪 🔥 LAB 3: Enable/Disable Cache

🎯 Goal

Understand caching impact

🛠️ Steps

1. Open DevTools → Network
2. Tick Disable Cache
3. Refresh page

---

👀 Compare:

Mode	Speed
Cache ON	Fast
Cache OFF	Slow

📌 From PDF:
👉 Cache reduces repeated requests

---

🧪 🔥 LAB 4: GZIP Compression Check

🎯 Goal

See real compression

🛠️ Steps

1. Open DevTools → Network
2. Click request
3. Check Headers → Content-Encoding

---

✅ Output

Content-Encoding: gzip

📌 From PDF:
👉 100KB → 10KB after compression

---

🧪 🔥 LAB 5: Build Your First Node Server

🎯 Goal

Create backend server

---

🛠️ Step 1: Install Node.js

👉 https://nodejs.org
Check:

node -v

---

🛠️ Step 2: Create Project

mkdir lab5-server
cd lab5-server
code .

---

🛠️ Step 3: Create server.js

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello from Node Server 🚀');
});

server.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

---

🛠️ Step 4: Run

node server.js

👉 Open browser:

http://localhost:3000

---

✅ Output

Hello from Node Server 🚀

📌 Matches your Node.js PDF server example

---

🧠 REAL UNDERSTANDING

What just happened?

Browser → Request → Node Server → Response → Browser

👉 You built:
✔ Presentation (browser)
✔ Logic (Node server)
✔ (Data layer coming next)

---

🎯 MINI CHALLENGE 🔥

Modify code:

if (req.url === '/about') {
  res.end('About Page');
} else {
  res.end('Home Page');
}

👉 Test:

• /
• /about

🚀 LAB 6–10 (REAL BACKEND + REST + MINI PROJECT)

---

🧪 🔥 LAB 6: Serve HTML Page (Frontend + Backend)

🎯 Goal

Connect Node server → HTML page

---

🛠️ Step 1: Create index.html

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <h1>Welcome to My Web App 🚀</h1>
</body>
</html>

---

🛠️ Step 2: Update server.js

const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
  fs.readFile('index.html', (err, data) => {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    res.end();
  });
});

server.listen(3000);

---

▶️ Run

node server.js

👉 Open: http://localhost:3000

---

✅ Output

👉 Your HTML page loads

📌 Same concept as your PDF:
👉 Server reads file → sends response

---

🧪 🔥 LAB 7: Create JSON API (REST API)

🎯 Goal

Build API like real apps (Swiggy, Amazon)

---

🛠️ Code

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/api/users') {
    const users = [
      {id: 1, name: "Rahul"},
      {id: 2, name: "Amit"}
    ];

    res.writeHead(200, {'Content-Type': 'application/json'});
    res.end(JSON.stringify(users));
  }
});

server.listen(3000);

---

▶️ Test

👉 http://localhost:3000/api/users

---

✅ Output

[
  {"id":1,"name":"Rahul"},
  {"id":2,"name":"Amit"}
]

📌 From your Node PDF:
👉 JSON APIs are core of modern apps

---

🧪 🔥 LAB 8: Handle POST Request (Send Data)

🎯 Goal

Receive data from client

---

🛠️ Code

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.method === 'POST' && req.url === '/data') {
    let body = '';

    req.on('data', chunk => {
      body += chunk.toString();
    });

    req.on('end', () => {
      console.log('Received:', body);

      res.writeHead(200);
      res.end('Data received');
    });
  }
});

server.listen(3000);

---

▶️ Test using terminal

curl -X POST http://localhost:3000/data -d "name=Gyan"

---

✅ Output

Received: name=Gyan

📌 Same event-driven concept from PDF

---

🧪 🔥 LAB 9: Create Simple Routing System

🎯 Goal

Handle multiple pages

---

🛠️ Code

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/') {
    res.end('Home Page');
  } else if (req.url === '/about') {
    res.end('About Page');
  } else if (req.url === '/contact') {
    res.end('Contact Page');
  } else {
    res.end('404 Not Found');
  }
});

server.listen(3000);

---

▶️ Test

• /
• /about
• /contact

---

🧠 Learning

👉 This is basic Controller logic (MVC)

---

🧪 🔥 LAB 10: MINI PROJECT (Frontend + Backend)

🎯 Goal

Real system: User List App

---

📁 Project Structure

lab10-app/
│
├── server.js
├── index.html

---

🛠️ Backend (server.js)

const http = require('http');

const users = [
  {id: 1, name: "Rahul"},
  {id: 2, name: "Amit"}
];

const server = http.createServer((req, res) => {
  if (req.url === '/api/users') {
    res.writeHead(200, {'Content-Type': 'application/json'});
    res.end(JSON.stringify(users));
  } else {
    require('fs').readFile('index.html', (err, data) => {
      res.writeHead(200, {'Content-Type': 'text/html'});
      res.end(data);
    });
  }
});

server.listen(3000);

---

🛠️ Frontend (index.html)

<!DOCTYPE html>
<html>
<body>
  <h1>User List</h1>
  <ul id="list"></ul>

  <script>
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        const list = document.getElementById('list');

        data.forEach(user => {
          const li = document.createElement('li');
          li.innerText = user.name;
          list.appendChild(li);
        });
      });
  </script>
</body>
</html>

---

▶️ Run

node server.js

👉 Open: http://localhost:3000

---

✅ Output

👉 User names displayed dynamically

---

🧠 WHAT YOU BUILT

Layer	Example
🎨 Frontend	HTML + JS
⚙️ Backend	Node API
🔗 Communication	REST API

👉 This is 3-Tier Architecture in action

🚀 LAB 11–20: Express + DB + Performance + Deployment

---

🧪 🔥 LAB 11: Install Express.js (Industry Standard)

🎯 Goal

Move from raw Node → Express (easy routing)

---

🛠️ Step 1: Setup Project

mkdir lab11-express
cd lab11-express
npm init -y
npm install express

---

🛠️ Step 2: Create server.js

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello from Express 🚀');
});

app.listen(3000, () => console.log('Server running'));

---

▶️ Run

node server.js

👉 Open: http://localhost:3000

---

🧠 Why Express?

• Cleaner routing
• Middleware support
• Faster development

---

🧪 🔥 LAB 12: Middleware (VERY IMPORTANT)

🎯 Goal

Understand request processing pipeline

---

🛠️ Code

const express = require('express');
const app = express();

// Middleware
app.use((req, res, next) => {
  console.log('Request received:', req.url);
  next(); // move to next
});

app.get('/', (req, res) => {
  res.send('Home Page');
});

app.listen(3000);

---

🧠 Concept

Request → Middleware → Route → Response

👉 Like security check before entry

---

🧪 🔥 LAB 13: Connect MongoDB

🎯 Goal

Add database layer

---

🛠️ Install

npm install mongoose

---

🛠️ Code

const mongoose = require('mongoose');

mongoose.connect('mongodb://127.0.0.1:27017/testDB')
  .then(() => console.log('DB Connected'));

---

🧠 From your PDF:

👉 Data layer = persistence system (DB)

---

🧪 🔥 LAB 14: CRUD API (REAL BACKEND)

🎯 Goal

Create full API

---

🛠️ Model

const User = mongoose.model('User', {
  name: String
});

---

🛠️ Routes

// CREATE
app.post('/users', async (req, res) => {
  const user = new User({ name: "Rahul" });
  await user.save();
  res.send(user);
});

// READ
app.get('/users', async (req, res) => {
  const users = await User.find();
  res.send(users);
});

---

🧠 This is:

👉 REST API (GET, POST)

---

🧪 🔥 LAB 15: Test API (Postman)

🎯 Goal

Test backend APIs

---

🛠️ Steps

1. Install Postman
2. Test:
   • GET /users
   • POST /users

---

🧠 Output

👉 JSON responses

---

🧪 🔥 LAB 16: Authentication (Basic Login)

🎯 Goal

Secure your app

---

🛠️ Code

app.post('/login', (req, res) => {
  const { username, password } = req.body;

  if (username === 'admin' && password === '1234') {
    res.send('Login success');
  } else {
    res.send('Invalid credentials');
  }
});

---

🧠 Real-world:

👉 Used in banking, apps, portals

---

🧪 🔥 LAB 17: Load Balancing (Scaling)

🎯 Goal

Handle multiple users

---

🧠 From your PDF:

👉 Multiple servers share load

---

🛠️ Concept

User → Load Balancer → Server1 / Server2

---

🛠️ Node Cluster Example

const cluster = require('cluster');

if (cluster.isMaster) {
  cluster.fork();
  cluster.fork();
} else {
  require('./server');
}

---

🧪 🔥 LAB 18: Performance Optimization

🎯 Goal

Make app fast

---

🧠 Techniques (from PDF)

✔ GZIP
✔ Caching
✔ Reduce requests
✔ Minify files

---

🛠️ Example (Compression)

npm install compression

const compression = require('compression');
app.use(compression());

---

🧪 🔥 LAB 19: Deploy App (Cloud)

🎯 Goal

Make app live

---

🛠️ Options

• Render
• Railway
• AWS (advanced)

---

🛠️ Steps (Render Example)

1. Push code to GitHub
2. Connect to Render
3. Deploy

---

🌍 Output

👉 Your app live URL

---

🧪 🔥 LAB 20: FINAL PROJECT 🔥

🎯 Build:

👉 Full User Management System

---

📁 Structure

project/
├── backend/
│   ├── server.js
│   ├── routes/
│   ├── models/
│
├── frontend/
│   ├── index.html
│   ├── app.js

---

🔥 Features

✔ Add User
✔ View Users
✔ Delete User
✔ API Backend
✔ Database Storage

---

🧠 Architecture Used

Concept	Used
3-Tier	✔
MVC	✔
REST	✔
Node	✔
Performance	✔

---

🎯 FINAL RESULT (YOU NOW KNOW)

🔥 Full Web Architecture
🔥 Backend APIs
🔥 Database
🔥 Performance tuning
🔥 Deployment

🚀 🔥 FULL PROJECT: User Management System

---

📁 📦 Project Structure (IMPORTANT)

user-management-app/
│
├── backend/
│   ├── server.js
│   ├── db.js
│   ├── models/
│   │     └── User.js
│   ├── routes/
│   │     └── userRoutes.js
│
├── frontend/
│   ├── index.html
│   ├── script.js
│   ├── style.css
│
├── package.json

---

⚙️ STEP 1: Setup Project

mkdir user-management-app
cd user-management-app

mkdir backend frontend
cd backend

npm init -y
npm install express mongoose cors body-parser

---

🧠 STEP 2: Database Connection (db.js)

const mongoose = require('mongoose');

mongoose.connect('mongodb://127.0.0.1:27017/userDB')
  .then(() => console.log('MongoDB Connected'))
  .catch(err => console.log(err));

---

📦 STEP 3: Model (models/User.js)

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String,
  email: String
});

module.exports = mongoose.model('User', userSchema);

---

🔗 STEP 4: Routes (routes/userRoutes.js)

const express = require('express');
const router = express.Router();
const User = require('../models/User');

// CREATE
router.post('/', async (req, res) => {
  const user = new User(req.body);
  await user.save();
  res.json(user);
});

// READ
router.get('/', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

// DELETE
router.delete('/:id', async (req, res) => {
  await User.findByIdAndDelete(req.params.id);
  res.json({message: 'Deleted'});
});

module.exports = router;

---

🚀 STEP 5: Server (server.js)

const express = require('express');
const app = express();

require('./db');

const cors = require('cors');
app.use(cors());
app.use(express.json());

const userRoutes = require('./routes/userRoutes');
app.use('/api/users', userRoutes);

app.listen(5000, () => {
  console.log('Server running on http://localhost:5000');
});

---

🎨 STEP 6: Frontend (frontend/index.html)

<!DOCTYPE html>
<html>
<head>
  <title>User Management</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>User Management 🚀</h1>

<input id="name" placeholder="Enter name">
<input id="email" placeholder="Enter email">
<button onclick="addUser()">Add User</button>

<ul id="userList"></ul>

<script src="script.js"></script>
</body>
</html>

---

⚡ STEP 7: Frontend Logic (frontend/script.js)

const API = 'http://localhost:5000/api/users';

// Load users
function loadUsers() {
  fetch(API)
    .then(res => res.json())
    .then(data => {
      const list = document.getElementById('userList');
      list.innerHTML = '';

      data.forEach(user => {
        const li = document.createElement('li');
        li.innerHTML = `
          ${user.name} (${user.email})
          <button onclick="deleteUser('${user._id}')">Delete</button>
        `;
        list.appendChild(li);
      });
    });
}

// Add user
function addUser() {
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;

  fetch(API, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({name, email})
  }).then(() => loadUsers());
}

// Delete user
function deleteUser(id) {
  fetch(`${API}/${id}`, { method: 'DELETE' })
    .then(() => loadUsers());
}

// Initial load
loadUsers();

---

🎨 STEP 8: Styling (frontend/style.css)

body {
  font-family: Arial;
  padding: 20px;
}

input {
  margin: 5px;
  padding: 5px;
}

button {
  margin: 5px;
  padding: 5px;
  background: green;
  color: white;
}

li {
  margin: 10px 0;
}

---

▶️ STEP 9: RUN PROJECT

Start Backend

cd backend
node server.js

---

Start Frontend

👉 Open:

frontend/index.html

---

✅ FINAL OUTPUT

✔ Add User
✔ View Users
✔ Delete User
✔ Data stored in MongoDB

---

🧠 ARCHITECTURE YOU BUILT

Frontend (HTML + JS)
        ↓
REST API (Express)
        ↓
Database (MongoDB)

👉 This is exactly 3-Tier Architecture from your PDF