Full Stack Development (MERN)-CS631PE Department of CSE

Full Stack Development

JNTUH

T D SAI KISHORE
Assistant Professor
Department
of
Mechanical Engineering

1
Full Stack Development (MERN)-CS631PE Department of CSE

Syllabus
UNIT-I Introduction to Full Stack Development: Understanding the Basic Web Development
Framework- User, Browser, Webserver, Backend Services, Full Stack Components - Node.js, MongoDB,
Express, React, Angular. Java Script Fundamentals, NodeJS- Understanding Node.js, Installing Node.js,
Working with Node Packages, creating a Node.js Application, Understanding the Node.js Event Model,
Adding Work to the Event Queue, Implementing Callbacks.
UNIT-II Node.js:
Working with JSON, Using the Buffer Module to Buffer Data, Using the Stream Module to Stream Data,
Accessing the File System from Node.js- Opening, Closing, Writing, Reading Files and other File System
Tasks. Implementing HTTP Services in Node.js- Processing URLs, Processing Query Strings and Form
Parameters, Understanding Request, Response, and Server Objects, Implementing HTTP Clients and
Servers in Node.js, Implementing HTTPS Servers and Clients. Using Additional Node.js Modules-Using
the OS Module, Using the util Module, Using the DNS Module, Using the crypto Module.

UNIT-III MongoDB:
Need of NoSQL, Understanding MongoDB, MongoDB Data Types, Planning Your Data Model, Building
the MongoDB Environment, Administering User Accounts, Configuring Access Control, Administering
Databases, Managing Collections, Adding the MongoDB Driver to Node.js, Connecting to MongoDB
from Node.js, Understanding the Objects Used in the MongoDB Node.js Driver, Accessing and
Manipulating Databases, Accessing and Manipulating Collections

UNIT-IV Express and Angular:

Getting Started with Express, Configuring Routes, Using Requests Objects, Using Response Objects.
Angular: importance of Angular, Understanding Angular, creating a Basic Angular Application, Angular
Components, Expressions, Data Binding, Built-in Directives, Custom Directives, Implementing Angular
Services in Web Applications.

UNIT-V React:
Need of React, Simple React Structure, The Virtual DOM, React Components, Introducing React
Components, Creating Components in React, Data and Data Flow in React, Rendering and Life Cycle
Methods in React, working with forms in React, integrating third party libraries, Routing in React

2
Full Stack Development (MERN)-CS631PE Department of CSE

UNIT-1
Understanding the Basic Web Development Framework
Web development frameworks provide a structured approach to building web applications, making
development faster, more efficient, and scalable. These frameworks handle routine tasks such as
routing, authentication, and database interaction, allowing developers to focus on business logic.
1. What is a Web Development Framework?
A web development framework is a collection of libraries, tools, and best practices that simplify the
development of web applications. It provides a foundation that developers can build upon instead of
coding everything from scratch.
Types of Web Development Frameworks
1. Front-end Frameworks – Used for UI development (e.g., React.js, Angular, Vue.js).
2. Back-end Frameworks – Used for server-side logic (e.g., Express.js, Spring Boot, Django).
3. Full-stack Frameworks – Include both front-end and back-end capabilities (e.g., Next.js,
Meteor).
2. Front-End Frameworks
Front-end frameworks help developers create interactive and responsive user interfaces.
Common Front-End Frameworks
Framework Language Features
React.js JavaScript Component-based, Virtual DOM, Hooks
Angular TypeScript MVC, Two-way Data Binding, Dependency Injection
Vue.js JavaScript Reactive Data Binding, Component-based
Core Concepts in Front-End Development
• HTML (Hypertext Markup Language) – Structure of a web page.
• CSS (Cascading Style Sheets) – Styling and layout.
• JavaScript (JS) – Interactivity and dynamic behaviour.
Tools for Front-End Development
• Webpack, Babel – Bundling and transfilling code.
• Tailwind CSS, Bootstrap – Pre-built styling frameworks.
• React Router – Handles navigation in React applications.
3. Back-End Frameworks
Back-end frameworks manage server-side logic, database interactions, and authentication.

3
Full Stack Development (MERN)-CS631PE Department of CSE

Common Back-End Frameworks

Framework Language Features
Express.js JavaScript (Node.js) Lightweight, Middleware, REST APIs
Spring Boot Java MVC, Dependency Injection, Microservices
Django Python ORM, Security, Built-in Admin
Core Concepts in Back-End Development
• Routing – Handling HTTP requests.
• Middleware – Processing requests (e.g., authentication).
• Database Interaction – SQL (PostgreSQL, MySQL) or NoSQL (MongoDB).
• Authentication – JWT, OAuth, Sessions.
Tools for Back-End Development
• Node.js & NPM – JavaScript runtime and package manager.
• Maven, Gradle – Dependency management for Java.
• Postman – API testing tool.
4. Full-Stack Development & Frameworks
A full-stack framework includes both front-end and back-end components.
Popular Full-Stack Frameworks
• Next.js (React + Node.js)
• Meteor (JavaScript Full Stack)
• Ruby on Rails (Ruby)
Key Full-Stack Technologies
Technology Purpose
RESTful APIs Communication between client & server
GraphQL Alternative to REST APIs for fetching data
JWT (JSON Web Token) Secure authentication mechanism
WebSocket’s Real-time communication

5. DevOps & Deployment

Deploying web applications efficiently is crucial for scalability.
Key Deployment Technologies
Tool/Service Purpose
Docker Containerization
Kubernetes Orchestration
AWS, Azure, GCP Cloud hosting
CI/CD (GitHub Actions, Jenkins) Automated deployment

4
Full Stack Development (MERN)-CS631PE Department of CSE

Detailed Explanation of Full-Stack Components (Node.js, MongoDB, Express, React, Angular) &
JavaScript Fundamentals
Full-stack development refers to the combination of both front-end and back-end technologies to build
a complete web application. This guide will cover essential full-stack components, including Node.js,
MongoDB, Express.js, React, Angular, and JavaScript fundamentals.
1. JavaScript Fundamentals
JavaScript is the core programming language used for full-stack development. Understanding its
fundamentals is essential before diving into frameworks like Node.js, React, Angular, and Express.
Key JavaScript Concepts
Concept Explanation
Variables Use var, let, and const to declare variables.
JavaScript has primitive types (string, number, boolean, null, undefined)
Data Types
and objects.
Define functions using function declarations, expressions, and arrow
Functions
functions (()=>{}).
Includes let/const, template literals, spread/rest operators,
ES6 Features
destructuring, promises, and async/await.
Methods like document.getElementById(), event listeners to
DOM Manipulation
manipulate HTML elements.
Event Handling Handling user interactions using addEventListener().
Uses callbacks, Promises, and async/await for handling async
Asynchronous JS
operations.
Closures & Scope Understanding block scope, function scope.
Object-Oriented
JavaScript supports prototype-based inheritance and ES6 class syntax.
Programming (OOP)
Modules Use import and export to organize code in ES6.
Error Handling Using try...catch for exception handling.

Here's a breakdown with examples for each concept:

1. Variables
Use var, let, and const to declare variables.
var oldVar = "Avoid using var"; // Function-scoped
let modernVar = "Use let for reassignable variables"; // Block-scoped
const constantVar = "Use const for constants"; // Block-scoped and immutable

2. Data Types
JavaScript has primitive types (string, number, boolean, null, undefined) and objects.
let str = "Hello"; // String
let num = 42; // Number
let isTrue = true; // Boolean
let empty = null; // Null
let notDefined; // Undefined
let obj = { key: "value" }; // Object

3. Functions
Define functions using function declarations, expressions, and arrow functions.
function regularFunction() { return "Hello"; } // Function declaration
const functionExpression = function () { return "Hello"; }; // Function expression

5
Full Stack Development (MERN)-CS631PE Department of CSE

const arrowFunction = () => "Hello"; // Arrow function (implicit return)

4. ES6 Features
Modern JavaScript features.
let name = "John";
console.log(`Hello, ${name}!`); // Template literals
let arr = [1, 2, 3];
let newArr = [...arr, 4]; // Spread operator
const person = { firstName: "John", lastName: "Doe" };
const { firstName, lastName } = person; // Object destructuring
const fetchData = async () => {
let data = await fetch("https://api.example.com");
return data.json();
}; // Async/Await
5. DOM Manipulation
Modify HTML elements dynamically.
document.getElementById("demo").innerText = "Hello, World!";
document.querySelector(".my-class").style.color = "red";

6. Event Handling
Handle user interactions.
document.getElementById("btn").addEventListener("click", () => {
alert("Button Clicked!");
});

7. Asynchronous JS
Use callbacks, Promises, and async/await.
setTimeout(() => console.log("Executed after 2 seconds"), 2000); // Callback

fetch("https://api.example.com")
.then(response => response.json()) // Promise
.then(data => console.log(data))
.catch(error => console.error(error));

async function fetchData() {

try {
let response = await fetch("https://api.example.com");
let data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
} // Async/Await

8. Closures & Scope

Understand lexical scope and closures.
function outer() {
let count = 0;
return function inner() {
count++;

6
Full Stack Development (MERN)-CS631PE Department of CSE

console.log(count);
};
}
const counter = outer();
counter(); // 1
counter(); // 2

9. Object-Oriented Programming (OOP)

Prototype-based inheritance and ES6 class syntax.
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
const john = new Person("John");
john.greet(); // Hello, my name is John

10. Modules
Organize code using import and export.
// module.js
export const greet = () => console.log("Hello!");

// main.js
import { greet } from "./module.js";
greet();

11. Error Handling

Use try...catch for exception handling.
try {
let result = JSON.parse("Invalid JSON");
} catch (error) {
console.error("Error:", error.message);
}

2. Node.js
Node.js is a runtime environment that allows JavaScript to run on the server-side. It is built on the V8
engine (same engine used in Chrome).
Why Use Node.js?
• Non-blocking, event-driven architecture
• Uses JavaScript for both front-end and back-end
• Fast execution speed due to the V8 engine
• Large ecosystem with NPM packages
Core Features of Node.js

7
Full Stack Development (MERN)-CS631PE Department of CSE

Feature Explanation
Single-threaded Event
Handles multiple requests asynchronously using an event-driven model.
Loop
Modules Built-in modules (fs, http, path), and third-party modules via npm.
Express.js A lightweight framework to build APIs and web applications.
File System Access Read and write files using the fs module.
Streams Handles large files efficiently.
Web Sockets Real-time communication using socket.io.

Example: Simple Node.js HTTP Server

const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Hello, World!');
});
server.listen(3000, () => {
console.log('Server running on port 3000');
});

3. Express.js
Express.js is a lightweight Node.js framework for building web applications and APIs.
Why Use Express?
• Simplifies routing and request handling
• Middleware support for logging, authentication, and more
• Supports RESTful APIs
Core Features of Express.js
Feature Explanation
Routing Define application endpoints (app.get(), app.post()).
Middleware Functions that process requests (e.g., authentication, logging).
Template Engines Use EJS, Handlebars, or Pug for rendering views.
Static File Serving Serve static files like CSS and images.
Example: Simple Express.js Server
const express = require('express');
const app = express();

app.get('/', (req, res) => {

res.send('Hello, Express!');
});

app.listen(3000, () => {
console.log('Server running on port 3000');
});

4. MongoDB
MongoDB is a NoSQL database that stores data in JSON-like documents.
Why Use MongoDB?

8
Full Stack Development (MERN)-CS631PE Department of CSE

• Schema-less, allowing flexible data storage

• Scales horizontally
• Works well with JavaScript (uses BSON format)
Core Features of MongoDB
Feature Explanation
Collections & Documents Data is stored in collections (like tables) and documents (like rows).
CRUD Operations Create, Read, Update, and Delete documents.
Indexes Improve query performance.
Aggregation Framework Used for complex queries and analytics.

Example: Connecting Express.js to MongoDB

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/mydb', {
useNewUrlParser: true, useUnifiedTopology: true
})
.then(() => console.log('MongoDB Connected'))
.catch(err => console.error(err));

5. React.js
React.js is a popular JavaScript library for building UI components.
Why Use React?
• Component-based architecture
• Virtual DOM for efficient rendering
• Supports hooks and functional components

Core Features of React.js

Feature Explanation

Components Reusable UI elements.

State & Props Manage dynamic data.

Hooks useState(), useEffect(), useContext().

React Router Handles navigation in SPAs.

Example: React Component
import React from 'react';

function App () {
return <h1>Hello, React! </h1>;
}
export default App;
6. Angular
Angular is a TypeScript-based framework for building web applications.
Why Use Angular?
• Built-in support for MVC architecture
• Two-way data binding
• Dependency Injection

9
Full Stack Development (MERN)-CS631PE Department of CSE

Core Features of Angular

Feature Explanation
Modules & Components Organize the application structure.
Directives Modify the behaviour of elements.
Services & Dependency Injection Share data across components.
Example: Angular Component
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `<h1>Hello, Angular!</h1>`
})
export class AppComponent {}

Install Node.js
Step 1: Download Node.js
1. Go to the official Node.js website.
2. You will see two versions:
o LTS (Long Term Support): Recommended for most users and production
environments.
o Current: The latest features, but may not be as stable.
3. Click on the appropriate version for your operating system (Windows, macOS, or Linux).

Step 2: Install Node.js

For Windows:
1. Download the .msi installer from the Node.js website.
2. Run the installer and follow the setup wizard.
3. Select "Next" to accept the default settings.
4. Check the box to install npm (Node Package Manager) (it comes bundled with Node.js).
5. Click "Install" and wait for the installation to complete.
6. Click "Finish" when done.
For macOS:
1. Download the .pkg file from the Node.js website.
2. Open the file and follow the installation instructions.
3. Once installed, Node.js and npm will be available in the terminal.
For Linux (Ubuntu/Debian-based):
1. Open the terminal.
2. Run the following commands:
3. sudo apt update
4. sudo apt install -y nodejs npm
5. To install a newer version, use Node Version Manager (nvm):
6. curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
7. source ~/.bashrc
8. nvm install --lts

Step 3: Verify Installation

Once installed, open a terminal or command prompt and type:
node -v
This will display the installed Node.js version.
npm -v

10
Full Stack Development (MERN)-CS631PE Department of CSE

This will display the installed npm version.

Step 4: Test Node.js

To confirm Node.js is working, create a simple JavaScript file:
1. Open a text editor and create a file named test.js.
2. Add the following code:
3. console.log ("Node.js is installed successfully!");
4. Save the file and run it in the terminal:
5. node test.js
6. If you see the message "Node.js is installed successfully!", you have successfully installed
Node.js!
Working with Node.js Packages (npm)
Node.js uses npm (Node Package Manager) to manage packages (libraries and dependencies). Below
are key topics with examples to help you get started.
1. Checking npm Version
Before using npm, ensure it’s installed:
npm -v
If npm is not installed, reinstall Node.js from nodejs.org.
2. Initializing a Node.js Project (package.json)
A package.json file manages project dependencies and metadata.
Method 1: Manual Creation
Run the following command:
npm init
It will ask several questions (name, version, description, entry point, etc.). You can press Enter to accept
defaults or provide custom values.
Method 2: Quick Creation
Use the -y flag to generate a package.json file with default values:
npm init -y
Example package.json File:
{
"name": "my-node-app",
"version": "1.0.0",
"description": "A sample Node.js app",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"dependencies": {},
"devDependencies": {}
}

3. Installing Packages
A. Installing a Package Globally
Some tools (like nodemon) are installed globally to be used system-wide:
npm install -g nodemon
You can now use nodemon from the terminal.
B. Installing a Package Locally
To install a package only for a specific project (e.g., express):
npm install express
This adds express to node_modules and updates package.json.
C. Installing Dev Dependencies

11
Full Stack Development (MERN)-CS631PE Department of CSE

For packages needed only during development (e.g., testing tools like jest):
npm install --save-dev jest
These are saved under devDependencies in package.json.
4. Using Installed Packages
After installing express, create a file (server.js) and use it:
const express = require('express');
const app = express();

app.get('/', (req, res) => {

res.send('Hello, Node.js with Express!');
});

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

Run the server:
node server.js
Visit http://localhost:3000/ in a browser.

5. Managing Packages
A. Checking Installed Packages
List installed dependencies:
npm list
List globally installed packages:
npm list -g --depth=0
B. Updating Packages
To update all dependencies to the latest compatible versions:
npm update
To update a specific package:
npm update express
C. Removing a Package
Uninstall a package:
npm uninstall express
If removing a dev dependency:
npm uninstall jest --save-dev

6. Using package-lock.json and node_modules

• package-lock.json locks dependency versions to ensure consistent installs across
environments.
• node_modules/ contains installed dependencies (it should not be committed to Git; use
.gitignore).
To reinstall all dependencies from package.json:
npm install

7. Running Scripts
Define scripts inside package.json:
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js"
}

Run the script using npm:

npm run start

12
Full Stack Development (MERN)-CS631PE Department of CSE

For development with nodemon:

npm run dev

8. Using npx (Execute Packages Without Installing)

To run a package without installing it globally, use npx. Example:
npx create-react-app my-app
This creates a React project without needing a global install.

Conclusion of the npm package

• Use npm install to add dependencies.
• Use npm uninstall to remove packages.
• Use npm update to update dependencies.
• Use npm run <script> to run scripts defined in package.json.

Understanding the Node.js Event Model,

Adding Work to the Event Queue,
Implementing Callbacks

Node.js operates on a non-blocking, event-driven architecture, allowing it to efficiently handle

multiple tasks asynchronously. This is made possible through the Event Loop, which processes tasks in
the Event Queue and executes callbacks when operations complete.

1. Understanding the Node.js Event Model

Node.js uses an event-driven architecture where operations (like reading files, making network
requests, or handling user input) are processed asynchronously. Instead of waiting for one operation
to finish before moving to the next, Node.js continues executing other tasks and calls a callback
function when the operation is done.

Key Concepts of the Event Model:

• Event Loop → Manages asynchronous operations and executes callbacks.
• Event Queue → Stores tasks waiting to be executed.
• Callbacks → Functions executed when an operation completes.
• Timers & Immediate Execution → setTimeout(), setImmediate(), and process.nextTick() allow
scheduling tasks.
• EventEmitter → Used to handle custom events in Node.js.
2. Adding Work to the Event Queue

When an asynchronous operation is triggered (e.g., fs.readFile(), setTimeout(), or database queries),

Node.js adds it to the Event Queue so the main thread can continue executing other tasks. Once the
operation completes, the event loop processes it and executes the corresponding callback.
Example: Non-Blocking Behavior

console.log('Start');
setTimeout(() => {
console.log('Task added to Event Queue');
}, 2000);

console.log('End');

Execution Flow:
1. Start is printed.

13
Full Stack Development (MERN)-CS631PE Department of CSE

2. setTimeout() schedules a task to execute after 2 seconds.

3. End is printed immediately (without waiting for 2 seconds).
4. After 2 seconds, Task added to Event Queue executes.
Output:
Start
End
Task added to Event Queue

3. Implementing Callbacks
A callback is a function that is passed as an argument to another function and is executed when an
asynchronous operation completes.
Example: Callback in File Reading
const fs = require('fs');

console.log('Start');

fs.readFile('file.txt', 'utf8', (err, data) => {

if (err) {
console.error('Error reading file:', err);
return;
}
console.log('File Content:', data);
});

console.log('End');
Execution Flow:
1. Start is printed.
2. fs.readFile() starts reading the file but doesn’t block execution.
3. End is printed immediately.
4. Once the file read completes, the callback executes and prints File Content.
Output:
Start
End
File Content: <content of file.txt>

4. The Node.js Event Loop

The Event Loop is the core of Node.js’s asynchronous behavior. It continuously checks the Event Queue
for pending tasks and executes them.
Event Loop Phases:
1. Timers → Executes setTimeout() and setInterval() callbacks.
2. I/O Callbacks → Executes callbacks from completed I/O operations (like fs.readFile()).
3. Idle & Prepare → Internal processing.
4. Poll → Fetches new I/O events, waiting for new tasks.
5. Check → Executes setImmediate() callbacks.
6. Close Callbacks → Executes close event callbacks (like socket.on('close')).

5. Using process.nextTick(), setTimeout(), and setImmediate()

1. process.nextTick()
Executes callbacks before the next event loop iteration.
console.log('Start');

14
Full Stack Development (MERN)-CS631PE Department of CSE

process.nextTick(() => {
console.log('Next Tick Callback');
});
console.log('End');
Output:
Start
End
Next Tick Callback
process.nextTick() ensures the callback runs before any I/O operations or setTimeout().

2. setTimeout() vs. setImmediate()

• setTimeout(fn, 0) runs after the poll phase.
• setImmediate(fn) runs immediately after I/O callbacks.
console.log('Start');

setTimeout(() => console.log('setTimeout Callback'), 0);

setImmediate(() => console.log('setImmediate Callback'));

console.log('End');
Output: (Order may vary)
Start
End
setImmediate Callback
setTimeout Callback

Why?
• setImmediate(): executes after the poll phase.
• setTimeout(0): executes after a minimal delay but still waits for the poll phase to clear.

6. Event-Driven Programming with EventEmitter

Node.js has an EventEmitter module for handling custom events.
Example: Creating and Triggering Events
const EventEmitter = require('events');
const emitter = new EventEmitter();

emitter.on('greet', (name) => {

console.log (`Hello, ${name}! `);
});

emitter.emit('greet', 'Alice');
Output:
Hello, Alice!
Example: Handling Multiple Event Listeners
emitter.on('data', (msg) => console.log(`Listener 1: ${msg}`));
emitter.on('data', (msg) => console.log(`Listener 2: ${msg}`));

emitter.emit('data', 'Event Model in Action');

Output:
Listener 1: Event Model in Action
Listener 2: Event Model in Action

15
Full Stack Development (MERN)-CS631PE Department of CSE

7. Avoiding Callback Hell with Promises

Callback nesting leads to callback hell, making code unreadable.
Callback Hell Example

fs.readFile('file1.txt', 'utf8', (err, data1) => {

if (err) throw err;
fs.readFile('file2.txt', 'utf8', (err, data2) => {
if (err) throw err;
fs.readFile('file3.txt', 'utf8', (err, data3) => {
if (err) throw err;
console.log(data1, data2, data3);
});
});
});
Using Promises improves readability:
const fs = require('fs').promises;

async function readFiles() {

try {
const data1 = await fs.readFile('file1.txt', 'utf8');
const data2 = await fs.readFile('file2.txt', 'utf8');
const data3 = await fs.readFile('file3.txt', 'utf8');
console.log(data1, data2, data3);
} catch (err) {
console.error(err);
}
}

readFiles();

Advantages of Promises:
• Avoids deep nesting.
• Improves readability.
• Easier error handling using try...catch.

Conclusion
• Node.js Event Model allows non-blocking execution.
• Event Queue stores asynchronous tasks.
• Callbacks execute when an operation completes.
• Event Loop efficiently manages queued tasks.
• Promises & async/await simplify handling asynchronous code.

Web References
1. https://www.geeksforgeeks.org/nodejs/?ref=lbp
2. https://nodejs.org/api/fs.html
3. https://www.tpointtech.com/nodejs-file-system
4. https://www.geeksforgeeks.org/mern-stack/

16