SRG ENGINEERING COLLEGE, NAMAKKAL.

IT3501 – Full Stack Web Development

Regulation 2021
ASSISTANT PROFFESOR R BALASUBRAMANIAN, ME.

Unit I: Basics Of Full Stack

Understanding Basic Web Development Framework
1. User → Browser → Webserver → Backend Services (Basic Flow)

• User: The person interacting with a website.

• Browser: A software (like Chrome, Firefox) that sends the user's request (like clicking
a button) to the server.
• Webserver: A computer that hosts the website and handles requests from browsers.
• Backend Services: Logic and databases that process the data, do calculations, and send
the result back to the webserver, which is then shown in the browser.

MVC Architecture (Model – View – Controller)

• Model: Handles data and business logic (like database operations).

• View: What the user sees (UI).
• Controller: Connects the Model and View; it controls the data flow and user
interactions.

Example:

• User clicks "Get User Info" → Controller → Model (fetches from DB) → Controller
→ View (displays info)

Understanding Different Stacks

A stack is a combination of technologies used together for web development.

Common Stacks:

• LAMP: Linux, Apache, MySQL, PHP

• MEAN: MongoDB, [Link], Angular, [Link]
• MERN: MongoDB, [Link], React, [Link]
• JAMstack: JavaScript, APIs, Markup
 Role of Each Technology
✅ [Link]

• A lightweight web framework for [Link].

• Handles routes, server logic, middleware, and APIs.
• Makes it easy to build backend services.

✅ Angular

• A front-end framework by Google.

• Uses TypeScript.
• Follows MVC.
• Ideal for building large-scale, single-page applications (SPAs).

✅ React

• A JavaScript library by Facebook.

• Used to build UI components.
• Very fast and flexible with a virtual DOM.
• Popular for building modern, dynamic front-end interfaces.

✅ [Link]

• Allows you to run JavaScript on the server side.

• Used to build scalable backend services.
• Supports real-time apps (like chat apps).

✅ MongoDB

• A NoSQL database.
• Stores data in JSON-like documents.
• Flexible schema, ideal for apps with changing data models.

🧠 Summary Table
Component Purpose Example Tool

Frontend UI seen by the user React / Angular

Backend Server logic [Link] + Express

Database Stores data MongoDB

Architecture Organizes code structure MVC

 Unit II: Node JS
Basics of [Link]
What is [Link]?

• [Link] is a runtime environment that lets you run JavaScript on the server-side.
• Built on Google Chrome’s V8 JavaScript engine.
• Used to build fast, scalable, and real-time network applications.

[Link] Installation
✅ Steps:

1. Go to [Link]
2. Download the LTS version for stability.
3. Install it ([Link] and npm will be installed together).

To check installation:
bash
CopyEdit
node -v # shows Node version
npm -v # shows npm version

Working with Node Packages & npm (Node Package Manager)

What is npm?

• A package manager for [Link].

• Helps install and manage reusable packages (libraries or modules).

Common npm commands:

bash
CopyEdit
npm init # Create a new project ([Link])
npm install <pkg> # Install a package (e.g., express)
npm uninstall <pkg> # Remove a package
npm list # List installed packages

Creating a Simple [Link] Application

Example: [Link]
javascript
CopyEdit
[Link]("Hello from [Link]!");

Run the app:

bash
CopyEdit
node [Link]
 Using Events, Listeners, Timers, and Callbacks
Events and Listeners

Node uses an event-driven architecture.

javascript
CopyEdit
const EventEmitter = require('events');
const emitter = new EventEmitter();

[Link]('start', () => {
[Link]('Started!');
});

[Link]('start');
Timers

Use setTimeout, setInterval just like in the browser.

javascript
CopyEdit
setTimeout(() => {
[Link]("Runs after 2 seconds");
}, 2000);
Callbacks

Functions passed as arguments to be called later.

javascript
CopyEdit
function greet(name, callback) {
[Link]("Hello " + name);
callback();
}

greet("Sam", () => {
[Link]("Callback executed!");
});

Handling Data I/O

Using the fs (File System) module:
javascript
CopyEdit
const fs = require('fs');

// Write to file
[Link]('[Link]', 'Hello Node!');
// Read from file
let data = [Link]('[Link]', 'utf8');
[Link](data);

Implementing HTTP Services in [Link]

Create a simple HTTP server:
javascript
CopyEdit
const http = require('http');

const server = [Link]((req, res) => {

[Link](200, { 'Content-Type': 'text/plain' });
[Link]('Hello from [Link] Server!');
});

[Link](3000, () => {
[Link]('Server running on [Link]
});

Summary
Concept Description

[Link] JavaScript runtime for backend

npm Package manager for [Link]

Events & Listeners Event-based handling

Timers Run code after delay or intervals

Callbacks Function called after completion

Data I/O Read/write files using fs module

HTTP Server Serve web content using http module

Unit III: Mongo DB

Understanding NoSQL and MongoDB

NoSQL stands for "Not Only SQL". It refers to databases that store data in formats other than
relational tables.

• MongoDB is a NoSQL database that stores data in BSON (Binary JSON) format.
 • It is document-oriented, schema-less, and highly scalable.

Building MongoDB Environment

• Download MongoDB from the official site:

[Link]
• Install and set up MongoDB server and MongoDB Compass (GUI tool).
• Start MongoDB using command:

nginx
CopyEdit
mongod

User Accounts and Access Control

• MongoDB supports role-based access control (RBAC).

• Create users using:

js
CopyEdit
[Link]({
user: "admin",
pwd: "password123",
roles: [ { role: "userAdminAnyDatabase", db: "admin" } ]
})

• Authenticate users using:

js
CopyEdit
[Link]("admin", "password123")

Administering Databases

• List databases:

js
CopyEdit
show dbs

• Switch to a database:

js
CopyEdit
use myDatabase

• Drop a database:
 js
CopyEdit
[Link]()

Managing Collections

• Create a collection:

js
CopyEdit
[Link]("students")

• Insert a document:

js
CopyEdit
[Link]({ name: "Alex", age: 22 })

• Find documents:

js
CopyEdit
[Link]()

• Delete collection:

js
CopyEdit
[Link]()

Connecting to MongoDB from [Link]

Step 1: Install MongoDB [Link] driver
bash
CopyEdit
npm install mongodb
Step 2: Sample connection code
javascript
CopyEdit
const { MongoClient } = require("mongodb");

const uri = "mongodb://localhost:27017";

const client = new MongoClient(uri);

async function run() {

await [Link]();
const db = [Link]("testDB");
const collection = [Link]("users");

await [Link]({ name: "John", age: 30 });

 const result = await [Link]().toArray();
[Link](result);

await [Link]();
}

run();

Simple Applications

You can build simple [Link] applications that:

• Store and retrieve user data

• Perform CRUD operations (Create, Read, Update, Delete)
• Connect front-end (React, Angular) to Node + MongoDB backend

Example: A TODO app with user tasks stored in MongoDB.

Unit IV: Express and Angular

[Link] with Express

✅ Implementing Express in [Link]

• [Link] is a fast, minimal web framework for [Link].

• Install it via npm:

bash
CopyEdit
npm install express
✅ Configuring Routes

• Routes define how the server responds to different HTTP requests.

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

[Link]('/', (req, res) => {

[Link]('Home Page');
});

[Link](3000, () => {
[Link]('Server running on port 3000');
});
✅ Using Request and Response Objects

• req (Request): Contains client request data.

• res (Response): Used to send data back to the client.

js
CopyEdit
[Link]('/user', (req, res) => {
[Link]([Link]); // Access query params
[Link]('User page');
});

Angular with TypeScript

✅ What is Angular?

• A front-end framework for building Single Page Applications (SPAs).

• Uses TypeScript, a superset of JavaScript.

✅ TypeScript

• Adds types to JavaScript for better structure.

• Compiles to JavaScript.
• Example:

ts
CopyEdit
let age: number = 25;

✅ Angular Components

• Components are the building blocks of Angular apps.

• Each component has:
o A class (logic)
o An HTML templates
o A CSS style file

ts
CopyEdit
@Component ({
selector: 'app-hello',
templateUrl: './[Link]'
})
export class HelloComponent {
name = "Angular";
}
✅ Expressions

• Used in templates to bind data or call methods.

html
CopyEdit
<p>{{ 10 + 5 }}</p>
<p>{{ name }}</p>

✅ Data Binding Types

1. Interpolation: {{ name }}
2. Property Binding: [value]="name"
3. Event Binding: (click)="sayHello()"
4. Two-Way Binding: [(ngModel)]="name"

✅ Built-in Directives

Angular provides built-in directives to control behavior:

Directive Purpose

*ngIf Shows/hides elements

*ngFor Loops through data

[ngClass] Applies CSS classes dynamically

Example:

html
CopyEdit
<div *ngIf="isLoggedIn">Welcome</div>
<ul>
<li *ngFor="let user of users">{{ [Link] }}</li>
</ul>

✅ Summary Table
Topic Description

[Link] Web framework for [Link]

Routes Define URLs and server responses

req/res Objects Handle client requests & server responses

 Topic Description

Angular Front-end framework using TypeScript

TypeScript Adds type safety to JavaScript

Components Core UI building blocks in Angular

Expressions Used in templates to display data

Data Binding Connects UI and component logic

Built-in Directives Control DOM behavior in templates

Unit V: React

MERN STACK
What is MERN?

MERN is a popular full-stack JavaScript framework made up of:

Component Description

MongoDB NoSQL Database

[Link] Web framework for [Link]

[Link] Front-end UI library

[Link] JavaScript runtime (backend)

Basic React Applications

• React is used to build single-page applications (SPAs).

• React apps are composed of components.
• Created using:

bash
CopyEdit
npx create-react-app my-app
cd my-app
npm start
 React Components

• Components are reusable UI pieces.

• Two types:
o Functional Components (most common)
o Class Components (older)

js
CopyEdit
function Welcome() {
return <h1>Hello, React!</h1>;
}

React State

• State stores dynamic data for a component.

• Managed using useState in functional components:

js
CopyEdit
import { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Express REST APIs

• REST APIs allow communication between frontend and backend.

• Sample Express route:

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

[Link]('/api/data', (req, res) => {

[Link]({ message: 'Hello from Express!' });
});

Modularization and Webpack

Modularization:

• Split code into multiple files/modules.

• Makes code organized and maintainable.
js
CopyEdit
// In [Link]
export function greet(name) {
return `Hello, ${name}`;
}

// In [Link]
import { greet } from './utils';
🔹 Webpack:

• A bundler that combines modules into a single file.

• Used under the hood in Create React App.
• Supports loaders (for CSS, images, JSX).

Routing with React Router

• Enables multi-page feel in SPAs without full reloads.

• Install:

bash
CopyEdit
npm install react-router-dom

• Usage:

js
CopyEdit
import { BrowserRouter, Route, Routes } from 'react-router-dom';

<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>

Server-Side Rendering (SSR)

• In SSR, React components are rendered on the server, then sent to the browser.
• Improves SEO and initial load time.
• Implemented using frameworks like [Link] (React-based).
• Traditional React is client-side rendered (CSR).
✅ Summary Table
Topic Description

MERN Stack MongoDB, Express, React, [Link]

React Components Reusable UI elements

React State Dynamic data handling within components

Express REST API Server routes to handle frontend requests

Modularization Splitting code into separate files

Webpack Module bundler for assets and code

React Router Client-side routing for SPA navigation

Server-Side Rendering Rendering React on server for SEO & speed

 IT3501 – Full Stack Web Development Syllabus

Unit I: Basics Of Full Stack

Understanding the Basic Web Development Framework – User – Browser – Webserver –

Backend Services – MVC Architecture – Understanding the different stacks –The role of
Express – Angular – Node – Mongo DB – React

Unit II: Node JS

Basics of Node JS – Installation – Working with Node packages – Using Node package
manager – Creating a simple [Link] application – Using Events – Listeners –Timers –
Callbacks – Handling Data I/O – Implementing HTTP services in [Link]

Unit III: Mongo DB

Understanding NoSQL and MongoDB – Building MongoDB Environment – User accounts –

Access control – Administering databases – Managing collections – Connecting to MongoDB
from [Link] – simple applications

Unit IV: Express and Angular

Implementing Express in [Link] – Configuring routes – Using Request and Response

objects Angular – Typescript – Angular Components – Expressions – Data binding – Built-in
directives

Unit V: React

MERN STACK – Basic React applications – React Components – React State – Express
REST APIs – Modularization and Webpack – Routing with React Router – Server-side
rendering