🚀 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

Open Chrome
Go to any website (example: google.com)
Press F12 → Network tab
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

Open DevTools → Network
Click any request
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

Open DevTools → Network
Tick Disable Cache
Refresh page

👀 Compare:

Mode Speed
Cache ON Fast
Cache OFF Slow
📌 From PDF:
👉 Cache reduces repeated requests

Mode	Speed
Cache ON	Fast
Cache OFF	Slow

🧪 🔥 LAB 4: GZIP Compression Check

🎯 Goal

See real compression

🛠️ Steps

Open DevTools → Network
Click request
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

Install Postman

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)

Push code to GitHub

Connect to Render

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 ✔

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

Pages

Saturday, April 11, 2026

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

Open ChromeGo to any website (example: google.com)Press F12 → Network tabRefresh page

👀 What You’ll See

Request URLMethod (GET)Status (200 OK)Response size📌 From your PDF:👉 Browser sends HTTP request → server responds

💡 Output Understanding

GET / → Request200 OK → Response

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

🎯 Goal

Understand why speed matters

🛠️ Steps

Open DevTools → NetworkClick any requestGo to Timing tab

📊 Observe:

DNS lookup timeConnection timeResponse time📌 From PDF:👉 Even 100ms delay impacts revenue

🧪 🔥 LAB 3: Enable/Disable Cache

🎯 Goal

Understand caching impact

🛠️ Steps

Open DevTools → NetworkTick Disable CacheRefresh page

👀 Compare:

ModeSpeedCache ONFastCache OFFSlow📌 From PDF:👉 Cache reduces repeated requests

🧪 🔥 LAB 4: GZIP Compression Check

🎯 Goal

See real compression

🛠️ Steps

Open DevTools → NetworkClick requestCheck 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.orgCheck:node -v

🛠️ Step 2: Create Project

mkdir lab5-servercd lab5-servercode .

🛠️ 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 🔥

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

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

🎯 Goal

🛠️ Step 1: Create index.html

🛠️ Step 2: Update server.js

▶️ Run

✅ Output

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

🎯 Goal

🛠️ Code

▶️ Test

✅ Output

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

🎯 Goal

🛠️ Code

▶️ Test using terminal

✅ Output

🧪 🔥 LAB 9: Create Simple Routing System

🎯 Goal

🛠️ Code

▶️ Test

🧠 Learning

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

🎯 Goal

📁 Project Structure

🛠️ Backend (server.js)

🛠️ Frontend (index.html)

▶️ Run

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

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

Request URL
Method (GET)
Status (200 OK)
Response size
📌 From your PDF:
👉 Browser sends HTTP request → server responds

GET / → Request
200 OK → Response

Open DevTools → Network
Click any request
Go to Timing tab

DNS lookup time
Connection time
Response time
📌 From PDF:
👉 Even 100ms delay impacts revenue

Open DevTools → Network
Tick Disable Cache
Refresh page

Mode Speed
Cache ON Fast
Cache OFF Slow
📌 From PDF:
👉 Cache reduces repeated requests

Open DevTools → Network
Click request
Check Headers → Content-Encoding

Content-Encoding: gzip
📌 From PDF:
👉 100KB → 10KB after compression

👉 https://nodejs.org
Check:
node -v

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');
});

node server.js
👉 Open browser:
http://localhost:3000

Hello from Node Server 🚀
📌 Matches your Node.js PDF server example

Browser → Request → Node Server → Response → Browser
👉 You built:
✔ Presentation (browser)
✔ Logic (Node server)
✔ (Data layer coming next)

🛠️ Step 1: Create `index.html`

🛠️ Step 2: Update `server.js`

🛠️ Backend (`server.js`)

🛠️ Frontend (`index.html`)

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'));

node server.js
👉 Open: `http://localhost:3000`

Cleaner routing

Middleware support

Faster development

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

Request → Middleware → Route → Response
👉 Like security check before entry

const mongoose = require('mongoose');

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

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

// 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);
});

Install Postman

Test:

GET `/users`

POST `/users`

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

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

const cluster = require('cluster');

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

✔ GZIP
✔ Caching
✔ Reduce requests
✔ Minify files