IT 3501 FULL STACK WEB DEVELOPMENT

III YEAR / V SEMESTER (B.Tech. - INFORMATION TECHNOLOGY)

UNIT I
BASICS OF FULL STACK

PREPARED BY,

Prof. M.KARTHIKEYAN, M.E., HoD / IT

VERIFIED BY

HOD PRINCIPAL CEO/CORRESPONDENT

DEPARTMENT OF INFORMATION TECHNOLOGY

SENGUNTHAR COLLEGE OF ENGINEERING, TIRUCHENGODE – 637 205.

 CREDIT POINT

ANNA UNIVERSITY, CHENNAI

AFFILIATED INSTITUTIONS
R-2021

B.TECH INFORMATION TECHNOLOGY

SEMESTER V

PERIODS TOTAL
S. COURSE CATE PER WEEK
COURSE TITLE CONTACT CREDITS
NO. CODE GORY
L T P PERIODS
THEORY
1. CS3591 Computer Networks PCC 3 0 2 5 4
2. IT3501 Full Stack Web PCC 3 0 0 3 3
Development
3. CS3551 Distributed Computing PCC 3 0 0 3 3
4. CS3691 Embedded Systems and IoT PCC 3 0 2 5 4
5. Professional Elective I PEC - - - - 3
6. Professional Elective II PEC - - - - 3
7. Mandatory Course- I& MC 3 0 0 3 0
PRACTICALS
8. Full Stack Web Development
IT3511 PCC 0 0 4 4 2
Laboratory
TOTAL - - - - 22
&
Mandatory Course-I is a Non-credit Course (Student shall select one course from the list given
under Mandatory Course-I)
 SENGUNTHAR COLLEGE OF ENGINEERING, TIRUCHENGODE- 637 205
DEPARTMENT OF INFORMATION TECHNOLOGY
LECTURE PLAN

Subject Code : IT 3501

Subject Name : FULL STACK WEB DEVELOPMENT

Name of the Faculty &Designation : Prof. M.KARTHIKEYAN, M.E., HoD / IT

Year & Semester : III year & V Semester

Course : V Semester B.Tech – IT

Academic Year : 2023-2024 (ODD SEM.)

RECOMMENDED TEXT BOOKS / REFERENCE BOOKS

S.No. Title of the book Author Reference

1 “Full Stack Web Development”,Technical A.A.Puntambekar T1

Publication,2023
‘Node.js, MongoDB and Angular Web Brad Dayley,
2 Development’, Addison-Wesley, Brendan Dayley, R1
Second Edition, 2018 Caleb Dayley

Full Stack Web App Development with Vasan

3 Mongo, Express, React, and Node’, Subramanian, ‘Pro R2
Second Edition, Apress, 2019. MERN Stack
 TEACHING No. of
SL.No. TOPIC REFERENCE
AIDS HOURS

UNIT 1- BASICS OF FULL STACK

Understanding the Basic Web
1 T1-CH1 PPT 1
Development Framework
User - Browser - Webserver Black
2 T1-CH1 1
Board
Backend Services Black
3 T1-CH2 1
Board
MVC Architecture Black
4 T1-CH2 1
Board
Understanding the different Black
5 T1-CH2 1
stacks Board

The role of Express Black

6 T1-CH2 1
Board
Angular Black
7 T1-CH2 1
Board
Node Black
8 T1-CH2 1
Board
Mongo DB Black
9 T1-CH2 1
Board
React Black
10 T1-CH2 1
Board
UNIT II - NODE JS
11 Basics of Node JS T1-CH2 PPT 1

Installation Black
12 T1-CH2 1
Board
Working with Node packages Black
13 T1-CH2 1
Board
Using Node package manager Black
14 T1-CH2 1
Board
Creating a simple Node.js application – Black
15 T1-CH2 2
Using Events – Listeners Board

Timers - Callbacks Black

16 T1-CH2 1
Board
Handling Data I/O Black
17 T1-CH2 1
Board
18 Implementing HTTP services in Node.js T1-CH2 DEMO 1
 UNIT III - MONGO DB
19 Understanding NoSQL and MongoDB T1-CH3 PPT 1

Building MongoDB Environment Black

20 T1-CH3 2
Board
User accounts – Access control Black
21 T1-CH3 1
Board
Administering databases Black
22 T1-CH3 1
Board
Managing collections Black
23 T1-CH3 1
Board
Connecting to MongoDB from Node.js Black
24 T1-CH3 1
Board
25 simple applications T1-CH3 DEMO 2
UNIT IV - EXPRESS AND ANGULAR
26 Implementing Express in Node.js T1-CH4 DEMO 1

Configuring routes Black

27 T1-CH4 1
Board
Using Request and Response objects Black
28 T1-CH4 1
Board
Angular Black
29 T1-CH4 1
Board
Typescript Black
30 T1-CH4 1
Board
Angular Components Black
31 T1-CH4 1
Board
Expressions Black
32 T1-CH4 1
Board
Data binding Black
33 T1-CH4 1
Board
34 Built-in directives T1-CH4 PPT 1
 UNIT V - REACT
35 MERN STACK T1-CH5 PPT 1

Basic React applications Black

36 T1-CH5 1
Board
React Components Black
37 T1-CH5 1
Board
React State Black
38 T1-CH5 1
Board
Express REST APIs Black
39 T1-CH5 1
Board
Modularization and Webpack Black
40 T1-CH5 2
Board
Routing with React Router Black
41 T1-CH5 1
Board
Server-side rendering Black
42 T1-CH5 1
Board
Total Hours 46
Revision 10
Total No. of Hours 56
 SYLLABUS

IT 3501 FULL STACK WEB DEVELOPMENT

LT P C

30 0 3
COURSE OBJECTIVES:
• To understand the various components of full stack development
• To learn Node.js features and applications
• To develop applications with MongoDB
• To understand the role of Angular and Express in web applications
• To develop simple web applications with React

UNIT I BASICS OF FULL STACK 9

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 9
Basics of Node JS – Installation – Working with Node packages – Using Node
package manager – Creating a simple Node.js application – Using Events –
Listeners –Timers - Callbacks – Handling Data I/O – Implementing HTTP services in
Node.js

UNIT III MONGO DB 9

Understanding NoSQL and MongoDB – Building MongoDB Environment – User
accounts – Access control – Administering databases – Managing collections –
Connecting to MongoDB from Node.js – simple applications

UNIT IV EXPRESS AND ANGULAR 9

Implementing Express in Node.js - Configuring routes - Using Request and
Response objects - Angular - Typescript - Angular Components - Expressions -
Data binding - Built-in directives

UNIT V REACT 9
MERN STACK – Basic React applications – React Components – React State –
Express REST APIs - Modularization and Webpack - Routing with React Router –
Server-side rendering
TOTAL:45 PERIODS
COURSE OUTCOMES:
At the end of the course, students will be able to
CO1: Understand the various stacks available for web application development
CO2: Use Node.js for application development
CO3: Develop applications with MongoDB
CO4: Use the features of Angular and Express
CO5: Develop React applications.

TEXT BOOKS
1. Brad Dayley, Brendan Dayley, Caleb Dayley, ‘Node.js, MongoDB and
Angular Web Development’, Addison-Wesley, Second Edition, 2018
2. Vasan Subramanian, ‘Pro MERN Stack, Full Stack Web App Development
with Mongo, Express, React, and Node’, Second Edition, Apress, 2019.

REFERENCES
1. Chris Northwood, ‘The Full Stack Developer: Your Essential Guide to the
Everyday Skills Expected of a Modern Full Stack Web Developer’, Apress;
1st edition, 2018
2. Kirupa Chinnathambi, ‘Learning React: A Hands-On Guide to Building
Web Applications Using React and Redux’, Addison-Wesley Professional,
2nd edition, 2018
3. https://www.tutorialspoint.com/the_full_stack_web_development/index.asp
4. https://www.coursera.org/specializations/full-stack-react
5. https://www.udemy.com/course/the-full-stack-web-development/
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
 LIST OF IMPORTANT QUESTIONS
UNIT I
BASICS OF FULL STACK
PART – A
1. What are User - Browser – Webserver ?
2. What do you mean by Backend Services?
3. What do you mean by MVC Architecture?
4. What are stacks refer to ?
5. What are the role of Express?
6. Write a brief notes on Angular.
7. Write a brief notes on Node.
8. What do you mean by MongoDB?
9. Write a brief notes on React.
10. What is the role of middleware in web development frameworks?
11. What is the difference between a relational database and a NoSQL database like
MongoDB?
12. Develop a basic route in Express.js that handles a GET request and returns the text
"Hello, World!" as the response.
13. Compare and contrast the roles of Angular and React in frontend web development.
14. Name three components of the MVC architecture.
15. What is the primary role of a webserver in the user-browser-webserver interaction?
16. How does a template engine simplify dynamic HTML generation in web development
frameworks?
17. What is the purpose of routing in web development frameworks?
18. Mention the advantages of MERN Stack.

PART – B

1. What is MERN Stack? Explain in detail about the four components.

2. Why should we choose MERN Stack for building Mobile and Web applications?

3. Architectural Structure of MERN Stack and its working?

4. Explain in detail about some important features of Express.

5. Explain in detail about some important features of Mongo DB . Explore the features and
benefits of using MongoDB as a NoSQL database in web application development.
Discuss the key characteristics of MongoDB, such as its document-based data model,
flexible schemas, and horizontal scalability. Explain how MongoDB integrates with web
development frameworks and the advantages it offers in terms of data management and
scalability.

6. Compare and contrast different web development stacks, such as LAMP, MEAN, and
MERN. Discuss the technologies and frameworks involved in each stack, their
advantages, and the types of applications they are suitable for. Analyze the factors that
developers should consider when choosing a specific stack for their web development
projects.
7. Explore the role of Express.js in web application development. Discuss the features and
functionalities provided by Express.js that make it a popular choice among developers.
Explain how Express.js simplifies routing, middleware handling, and server
configuration. Provide examples of how Express.js can be used to develop a RESTful API
or handle user authentication
8. Discuss the key features and advantages of the Angular framework in frontend web
development. Explain how Angular follows a component-based architecture and utilizes
concepts such as data binding, dependency injection, and routing. Analyze the benefits
of using Angular for developing large-scale, maintainable web applications, and compare
it with other frontend frameworks.
 LIST OF IMPORTANT QUESTIONS
UNIT I
BASICS OF FULL STACK
PART - A
1. What are User - Browser – Webserver ?
The user interacts with a web application through a web browser. When the user requests a web
page, the browser sends an HTTP request to the webserver, which processes the request and
returns the appropriate response.
2. What do you mean by Backend Services?
Backend services refer to the server-side components of a web application that handle data
processing, business logic, and interact with databases. These services typically include APIs,
application servers, and databases.
3. What do you mean by MVC Architecture?
MVC stands for Model-View-Controller. It is a software architectural pattern that separates the
application into three interconnected components:
Model: Represents the data and business logic.
View: Presents the user interface to the user.
Controller: Handles user input, manipulates the model, and updates the view.
4. What are stacks refer to ?
A stack refers to a combination of technologies used together to build a web application.
Different stacks include various combinations of programming languages, frameworks, and
databases. Examples include the LAMP stack (Linux, Apache, MySQL, PHP), MEAN stack
(MongoDB, Express.js, Angular, Node.js), and MERN stack (MongoDB, Express.js, React,
Node.js).
5. What are the role of Express?
Express.js is a popular web application framework for Node.js. It provides a set of features and
tools for building web applications and APIs. Express simplifies tasks such as routing, handling
HTTP requests and responses, middleware management, and server configuration.
6. Write a brief notes on Angular.
Angular is a TypeScript-based frontend framework developed by Google. It allows developers to
build dynamic and responsive web applications. Angular follows the component-based
 architecture and provides features like data binding, dependency injection, and a powerful
templating system.
7. Write a brief notes on Node.js
Node.js is a runtime environment that allows running JavaScript on the server-side. It provides
an event-driven, non-blocking I/O model, making it efficient for building scalable network
applications. Node.js enables developers to create server-side logic, APIs, and handle server-
side rendering.
8. What do you mean by MongoDB?
MongoDB is a NoSQL database that provides a flexible and scalable solution for managing
structured and unstructured data. It stores data in flexible, JSON-like documents and is often
used in combination with Node.js for building scalable web applications.
9. Write a brief notes on React.
React is a JavaScript library for building user interfaces. It allows developers to create reusable
UI components and efficiently manage the application's state. React uses a virtual DOM
(Document Object Model) to efficiently update the UI, resulting in faster rendering and improved
performance.
10. What is the role of middleware in web development frameworks?
Middleware in web development frameworks acts as a bridge between the web server and the
application. It intercepts and processes requests before they reach the actual route handlers.
Middleware functions can perform tasks such as authentication, logging, request parsing, error
handling, and modifying the request/response objects. They provide a modular way to add
functionality to an application's request/response cycle.
11. What is the difference between a relational database and a NoSQL database like
MongoDB?
A relational database follows a structured approach to store data in tables with predefined
schemas. It enforces relationships between tables using foreign keys and supports ACID
(Atomicity, Consistency, Isolation, Durability) properties. On the other hand, a NoSQL database
like MongoDB is schema-less and stores data in flexible, JSON-like documents. It does not
enforce relationships or provide ACID guarantees. NoSQL databases are designed for
scalability, high-performance, and handling unstructured or semi-structured data. They are
suitable for use cases where data flexibility and horizontal scaling are important, while relational
databases excel in maintaining complex relationships and ensuring data integrity.
12. Develop a basic route in Express.js that handles a GET request and returns the text
"Hello, World!" as the response.
```javascript const express = require('express'); const app = express();
app.get('/', (req, res) => { res.send('Hello, World!'); });
app.listen(3000, () => { console.log('Server started on port 3000'); });

13. Compare and contrast the roles of Angular and React in frontend web development.
Angular and React are both frontend JavaScript frameworks, but they differ in several
aspects. Angular is a full-fledged framework that provides a complete solution for building
complex, scalable applications. It has its own templating system, dependency injection, and
follows an opinionated approach. React, on the other hand, is a lightweight library focused on
building user interfaces. It offers a virtual DOM, component-based architecture, and encourages
a more flexible and modular approach to developers.
14. Name three components of the MVC architecture.
The three components of the MVC architecture are the Model, View, and Controller.
15. What is the primary role of a webserver in the user-browser-webserver interaction?
The primary role of a webserver is to process incoming requests from web browsers and return
the appropriate responses.
16. How does a template engine simplify dynamic HTML generation in web development
frameworks?
A template engine simplifies dynamic HTML generation by allowing developers to define
templates with placeholders for dynamic content. The engine then integrates the data into the
templates, generating the final HTML output.
17. What is the purpose of routing in web development frameworks?
Routing in web development frameworks maps URLs to specific actions or functions in the
application, enabling the handling of different requests and navigation between different pages
or endpoints.

18. Mention the advantages of MERN Stack.

There are a lot of advantages of MERN Stack, some of them are mentioned below -For a
smooth development of any web application or mobile app, it supports MVC (Model View
Controller) architecture; the main purpose of this architecture is to separate the presentation
details with the business logic.
1. It covers all the web development stages starting from front-end development to backend
development with JavaScript.
2. It is an open-source framework mainly used to develop web-based or mobile applications and is
supported by the community.
3. It is very fast and efficient compared to MEAN Stack and mostly suitable for small applications,
whereas MEAN Stack is suitable for developing large applications.

PART - B

1. What is MERN Stack? Explain in detail about the four components.

MERN Stack is a collection of powerful technologies and robust, used to develop scalable
master web applications comprising backend, front-end, and database components. It is
JavaScript that is used for the faster and easier development of full-stack web applications. MERN
Stack is a technology that is a user-friendly full-stack JavaScript framework for building applications
and dynamic websites.

MERN Stack consists of four main components or can say four main technologies:

1. M stands for MongoDB ( Database ), mainly used for preparing document database and is a
NoSQL (Non-Structured Query Language ) Database System
2. E stands for Express, mainly used for developing Node.js web framework
3. R stands for React, mainly used for developing a client-side JavaScript framework
4. N stands for js, mainly used for developing the premier JavaScript web server

Each of these four technologies plays an important role in providing an end-to-end

framework for the developers. Even these four technologies play an important role in the
development process of web applications.

Before MERN stack, it was earlier named as MEAN stack, MERN Stack is one of the
variations of MEAN, here MEAN is also comprises of four components or say four different
technologies, i.e., M is for MongoDB, ' E ' is for Express, ' A ' is for Angular.js, and ' N ' is for Node,
here if we will observe, then we can identify that in MEAN, ' A ', i.e., Angular.js is replaced by ' R ',
i.e., React.js in MERN, the main reason behind is - MERN Stack is mainly used for faster
development of smaller applications as compared with MEAN, MEAN stack is a mainly better option
for large-scale applications. Still, it takes more time for the development of smaller applications.
They also both have different structures comparatively.

We can see that MEAN relies on Angular.js for its front-end JavaScript framework, whereas
the MERN stack relies on React and its ecosystem. MERN Stack is designed to make the
development process easier and smoother.

Node.js very powerful and popular JavaScript server platform, and Express.js is a server-side
web framework. Unless of which variant we choose, ME(RVA)N is an ideal approach to working
with JSON and JavaScript all the way through.

2. Why should we choose MERN Stack for building Mobile and Web applications?

1. Cost-effective:All the four technologies that are mentioned above, MERN (MongoDB,
Express.js, React.js, and Node.js) are used in MERN Stack is built on JavaScript that makes it
cost-effective and within less cost investment user will able to get the better results or output.
2. SEO friendly:Here, SEO (Search Engine Optimization) friendly means that Google, Yahoo
and other search engines can search each page on the website efficiently and easily, interpret
and correlate the content effectively with the searched text and easily index it in their database.
As whenever websites are created using MERN technologies, then it is always SEO friendly.
3. Better performance:Better performance refers to the faster response between backend and
front-end and database, which ultimately improves the website speed and yields better
performance, thus providing a smooth user experience.
4. Improves Security: It mainly concerns the security of applications generated using MERN; her
web application security refers to various processes, methods or technologies used for
protecting web servers and various web applications, such as APIs (Application user
interface) from the attack by internet-based threats. Generally, secured hosting providers can
easily integrate applications created using the MERN stack. For more or better security Mongo
DB and Node.js security tools are also used.
5. Provide the fastest delivery:Any Web applications and mobile applications created by using
MERN Stack are built much faster, which also helps to provide faster delivery to our clients.
6. Provides faster Modifications: MERN stack technologies supports quick modifications as per
the client's request in the mobile and web applications.
7. Open Source: All the four technologies that are involved in MERN are open-source. This
feature allows developers to get solutions to queries that may evolve from the open portals
during development. As a result, it will be ultimately beneficial for a developer.
8. Easy to switch between client and server: MERN is very simple and fast because it is written
in only one language. And also, it is very easy to switch between client and server.

3. Architectural Structure of MERN Stack and its working?

MERN has a 3-tier Architecture system mainly consisting of 3 layers -

These layers are as follows:
1. Web as front-end tier
2. Server as the middle tier
3. Database as backend tier

Figure 1 : Architectural Structure of MERN Stack

We already know that it comprises 4 components, i.e., MongoDB, Express.js, React, Node.js.

Now let us understand in more detail about these three tiers which are mentioned above -
 i. Web or front-end tier - The top tier of the MERN stack is mainly handled by React.js. It
is one of the most prominent used open-source front-end JavaScript libraries used for
building Web applications. It is famous for creating dynamic client-side applications.
React will help we construct complex interfaces by using single components. It also
connects those complex interfaces to data available on the backend server. React is used
to create mobile applications (React Native) and web applications. React allows the
reusability of code and can easily support it, which has many benefits and is much time
saver. It permits users to create large web applications that can easily change the data of
the page even without reloading the page.
ii. Server or middle-tier - It is just next level from the top layer and is mainly handled by two
components of the MERN stack, i.e., Express.js and Node.js. These two's components
handle it simultaneously because Express.js maintained the Server-side framework,
running inside the Node.js server. Express.js is one of the widely used backend
development JavaScript Frameworks. It allows developers to spin up robust APIs
(Application Programming Interface) and web servers much easier and simpler. It also
adds helpful functionalities to Node.js HTTP (HyperText Transfer Protocol) objects.
Whereas on the other hand, Node.js plays a very important role in itself. It is an open-
source server environment, and it is a cross-platform runtime environment for executing
JavaScript code outside a browser. Node.js continuously uses JavaScript; thus, it's
ultimately helpful for a computer user to quickly create any net service or any net .

iii. Database as backend tier - It is one of the most important levels of the MERN Stack and
is mainly handled by MongoDB; the main role of a database is to store all the data related
to our application, for example - content, statistics, information, user profiles,
comments and so on. It mainly stores all the data for safety purposes. It maintains a
proper record, which usually returns the data to the user whenever required. It mainly
stores the data in the database. It generates two or more replica files of the data so that
whenever the system fails, it can retrieve the exact information or data that the user
wanted earlier. It implies that MongoDB is not based on the table-like relational database
structure. On the other hand, it provides an altogether different mechanism for the
retrieval and storage of data. Mongo DB is the most popular NoSQL (NoSQL or Non
Structured Query Language) database, an open-source document-oriented database.
The term 'NoSQL' typically means a non-relational database that does not require a fixed
schema or proper relational tables to store the necessary data in it. MongoDB stores the
data in a different format other than the relational tables, consisting of rows and columns.
4. Explain in detail about some important features of Express.
 Express is a JavaScript server-side framework that runs within js.
 It is one of the best backend development JavaScript Frameworks.
 It provides the developer with a platform to create and maintain robust servers.
 Express is used for building and designing web and mobile applications easily and quickly.
 Express is used to provide server-side logic for mobile and web applications, and as such, it is
used all over the place.
 It allows developers to spin up robust APIs (Application Programming Interface) and web
servers much easier and simpler.
 Express makes robust web servers easier to organize our application's functionality with routing
and middleware.
 It also adds helpful functionalities to Node.js HTTP (HyperText Transfer Protocol) objects.
 It is an important component of the MERN and MEAN Stack and is used to build fast,
maintainable, and robust productions web applications.

Some important features of Express -

 Express makes Node.js web and mobile application development much easier and faster.
 Express has a very simple environment setup. One can easily set up Express in their system
and configure it without applying much effort.
 Express is very easy to connect with Databases like MongoDB.
 Based on HTTP methods and URLs, Express allows us to define the routes of our application.
 Routing mainly aims to describe code that needs to be run in response to any request received
by a server. Routing is generally done based on the sequence of URL patterns and the HTTP
method, which is associated with the request.
 If we want to perform additional tasks and functions on any request and response, wecan easily
use various middleware modules present in Express.
 The request is a message that arrives at the server for requesting something, and a Response is
a message sent by the server to a client in the form of the result of whatever the client asked for.
 If any error occurs and we want to handle it, we can easily handle it by using error handling
middleware.
 Middleware is used somewhere during the lifecycle of request or response in the form of code.
It is mainly used to add functionalities or augment the behaviour of the webserver.
 Express also facilitates we to create a REST API (Representational State Transfer Application
Programming Interface)
 The REST APIs is also known as RESTful API, It mainly conforms to the constraints of REST
architectural style, and it also allows for interaction with RESTful web services. The main
advantage of REST API is that it provides great flexibility; it uses HTTP requests to access and
use data.
 The data flow into a website structure can easily facilitate by using the two template engines,
EJS and Jade, provided by Express.
 Express has a gigantic suite of third-party add-ons so that developers can use it to provide
better functionality, helps to increase the security level, and improve speed.
 It is very efficient and scalable; one can easily access it from anywhere and use it
simultaneously on different systems, and very fast.
 It is Single-threaded and Asynchronous.
 It also has the biggest community for Node.js.
 With its built-in router, it promotes code reusability.
 If we want to understand the architecture behind web servers and their working along with the
organization, then learning Express is the best option.

5. Explain in detail about some important features of Mongo DB . Explore the features and
benefits of using MongoDB as a NoSQL database in web application development.
Discuss the key characteristics of MongoDB, such as its document-based data model,
flexible schemas, and horizontal scalability. Explain how MongoDB integrates with web
development frameworks and the advantages it offers in terms of data management and
scalability.

 Mongo DB is the most popular NoSQL (NoSQL or Non Structured Query Language) database,
an open-source document-oriented database.
 The term 'NoSQL' typically means a non-relational database that does not require a fixed
schema or proper relational tables to store the necessary data in it. MongoDB stores the data in
a different format other than the relational tables, consisting of rows and columns.
 It implies that MongoDB is not based on the table-like relational database structure. On the other
hand, it provides an altogether different mechanism for the retrieval and storage of data.
 The storage format in which the data is stored is known as BSON, which stands for Binary
JavaScript Object Notation; its binary structure encodes length and type of information, which
allows it to be parsed much more quickly.
 MongoDB uses BSON when storing documents in collections.
 It allows a highly scalable and flexible document structure.
 It is very faster as compared to RDBMS due to its efficient storage and indexing techniques.
 In MongoDB, complex join operations are not available; hence, it cannot support complex
transactions.
 MongoDB uses JavaScript for coding as a language which is one of the great advantages.
 It is Schemaless as any data stored which is stored in a separate document.
 In MongoDB, there is no concept of relationships or table formations, as this is happening in
RDBMS (Relational Database Management System), in which tables have a certain relation
between them.
 It also supports a flexible document model, which is very fast for any developer to create.
 MongoDB is one of the important types of NoSQL Databases. It is more scalable and provides
excellent performance if we notice that it will reach its scaling limit whenever a database runs on
a single server.

 MongoDB is a NoSQL database that scales by adding more and more servers and increases
productivity with its flexible document model.

Some important features of MongoDB -

 Schema-less Database: MongoDB has this one of the great features, which means that one
collection can hold different types of documents in it. Due to this extraordinary feature, MongoDB
provides great flexibility to databases. In the MongoDB database, a single collection comprises
multiple documents, and these documents may further comprise the different numbers of values,
fields, and so on. One document doesn't need to be a must to relate with the other documents,
as it happens in relational databases.
 Indexing: In the MongoDB database, one can easily fetch out the necessary data from the data
pool due to this indexing feature. In MongoDB, every data item has provided a particular index,
categorized as primary and secondary indices. With this indexing, data retrieval is easier for the
user; it saves a lot of time. If the data is not indexed, the database searches each document with
the specified query, which takes lots of time and is inefficient.
 Document Oriented: In MongoDB, all the data has been stored in documents instead of tables
like SQL. Also, these documents have their unique object id. In these documents, the
informative data is stored in fields, i.e., key-value pairs instead of columns and rows, making the
data much more flexible and easier to fetch out rather than applying queries for every data
compared to RDBMS.
 Faster - MongoDB is very fast compared with relational database (RDBMS), which is document-
oriented. Each data item has its index value, making it easier for us to retrieve any data without
wasting time writing queries and making logic accordingly.
 Scalability: MongoDB is more scalable with the help of sharding. It provides horizontal
scalability. Here the term sharding means distributing data on multiple servers; in this, a large
amount of data has been divided into multiple small data chunks with the help of shard key.
These types of data chunks are evenly distributed across shards that reside across many
physical servers.
 High Performance: MongoDB has very high performance and has data persistency as
compared to other databases due to the presence of its great features like indexing,
scalability, replication, etc.
 Replication and Highly Available - MongoDB increases the availability of data due to creating
multiple copies of data on different servers. Providing redundancy or data replication ultimately
protects the database from any hardware failure and protects the data from being lost in the
future. I suppose if one server was not working or clashes due to error, and then data can easily
be retrieved from other active servers, who are currently working at that time, this will all be due
to redundancy of data.

 Aggregation: This feature of MongoDB is quite similar to the SQL GROUPBY clause. This
GROUPBY clause performs various operations on the grouped data to get the unique or
computed
 Simple Environment Setup - MongoDB has a very simple environment setup. One can easily
set up MongoDB in their system without applying much effort.

6. Compare and contrast different web development stacks, such as LAMP, MEAN, and
MERN. Discuss the technologies and frameworks involved in each stack, their
advantages, and the types of applications they are suitable for. Analyze the factors that
developers should consider when choosing a specific stack for their web development
projects.
MEAN and MERN stacks are JavaScript frameworks that work for the benefit of the system, while LAMP
follows a Linux interface
Understanding MEAN Stack and MERN Stack
MEAN stack compiles MongoDB, ExpressJS, AngularJS and NodeJs to create a unified stack for
easier development of mobile and web applications. It consists of multiple reusable models and
libraries that offer a product that works effortlessly. One of the advantages of having MEAN stack at
work is that it saves time and money.
Well, it simply builds web applications in JavaScript apart from handling JSON. AngularJS
stands at the top of any MEAN stack, which allows it to extend HTML tags with the help of metadata
to generate dynamic web experiences. 
Moving over to ExpressJS, it runs on a NodeJS server that initiates robust URL routing and handles
HTTP responses and requests. For storing data on the database, MongoDB comes in handy.
Ideally, JSON documents are created in AngularJS and passed to the ExpressJS server, where the
data is processed and restored at a later interval.
Now that we have understood the MEAN stack let us move forward to how the MERN stack works
and what it offers in web development. 
ExpressJS: It is built on the concept of a layered framework atop NodeJS. It ensures the website’s
structure and backend functionality.
ReactJS: ReactJS facilitates user interface components in terms of single-page web applications. It
helps create dynamic client-side applications and build complex interfaces using simple features.
Together, it connects the data to the backend server.
NodeJS: NodeJs imitates the server’s end responsible for running JavaScript on the system.
MERN stack is an open-source library that offers low productivity altogether. However, it can be
easily implemented and does not require a learning curve. Unlike MEAN stack, it relies on a
unidirectional flow and supports mobile applications.
LAMP Stack
LAMP is a Linux-based stack that delivers strong performance in hosting and developing large web
applications. The LAMP stack is rampant with libraries and tools we can utilise for extended support
as a developer. In short, the LAMP stack is an all-rounder in web development.
LAMP in LAMP stack stands for Linux, which serves as the operating system, Apache for web
server, MySQL for data persistence and PHP, the programming language. Some derivatives of the
LAMP stack are as follows:
MAMP (Mac OS X as an operating system)
WAMP (Windows as an operating system)
LAMP (with Python or Perl in the case of PHP)
LAMP (with MongoDB in case of MySQL)
One of the benefits of using LAMP is that it is popular in the field of web development. Many
businesses utilising the LAMP stack have also encouraged timely maintenance and updates. It has
countless modules, add-ons and libraries that one can need. Since it is based on Linux, finding any
topic of our choice in the open source community is easier. LAMP constituents, MySQL and PHP
are highly reliable and are accepted by larger communities. In terms of integration, it assists the
developer in making things work. In addition, we can control the server and choose our software to
install, which makes us independent. If we usually expect numerous server-based tasks, then we
should opt for the LAMP stack.
Recent market trends suggest that the MERN stack works more efficiently in comparison to
the LAMP stack for the simple purpose that it is no longer the only place to go for web developers. In
keeping with the trend, it is also to be noted that the MERN stack helps cater to a large market as it
assists in both backend and frontend levels. On the other hand, if our project is relatively simple
compared to a vast one, then we can opt for the LAMP stack.
As a developer, if we are stuck with the idea of MERN vs MEAN vs. LAMP, then we must
consider going through these defining factors.
OS – LAMP uses Ubuntu as the operating system, while the MERN stack combines five
different technologies, including NodeJS, ExpressJS, AngularJS, MongoDB and Node Package
Number. Both stacks run on Linux OS. MERN uses the latest versions of the technology in its
frameworks, whereas LAMP can run on PHP platforms without any issues. MERN is far better than
LAMP since the former uses NodeJS, making it easier to run on JavaScript platforms without
significant problems.
 App Type – LAMP is best used for running dynamic data and handling traffic. It is used mainly for
client-side applications. MERN, on the other hand, exercises heavy databases while producing
dynamic data too.
Traffic Management – LAMP is best used for handling heavier traffic, while MERN focuses more
on static data management and managing rich databases.
Client Vs Server – LAMP takes the lead in client-side web applications. MERN follows a faster
update routine that decreases its lifetime. Apart from having lesser speed, it also holds fewer options
for client-side development.
Learning Curve – MERN is significantly newer in comparison to LAMP. Many developers have had
extensive training sessions regarding LAMP, which may not be the case with MERN.
Maintenance – So far, we know that MERN is one of the best choices for large-scale projects since
it works with JavaScript.
Security – As is with large-scale projects, security may be a cause of concern. However, with
MERN, our work is more secure.
Scalability – If our project requires multiple developers, then we may be willing to go for MERN
since it assists with factors such as usability and functionality. LAMP stack works better with small-
scale projects that require no learning curve.

7. Explore the role of Express.js in web application development. Discuss the features and
functionalities provided by Express.js that make it a popular choice among developers.
Explain how Express.js simplifies routing, middleware handling, and server
configuration. Provide examples of how Express.js can be used to develop a RESTful API
or handle user authentication
Express.js is a popular web application framework for Node.js that simplifies the development of
web applications and APIs. It provides a minimalistic and flexible set of features and
functionalities that make it a favored choice among developers. Here are some key aspects that
make Express.js popular:
Simplicity and Minimalism: Express.js follows the "less is more" principle, providing a
minimalist framework that allows developers to build applications quickly and efficiently. It offers
a simple and intuitive API surface, making it easy to learn and work with.
Routing: Express.js simplifies routing by providing an elegant and straightforward way to define
routes for different HTTP methods and URLs. Developers can handle various types of requests
such as GET, POST, PUT, DELETE, etc., and map them to specific route handlers or controller
functions. This makes it effortless to define the application's URL structure and handle incoming
requests.
Javascript Copy code
const express = require('express');
const app = express();

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

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

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

// Create a new user
});

app.put('/users/:id', (req, res) => {

// Update a user by ID
});

app.delete('/users/:id', (req, res) => {

// Delete a user by ID
});
Middleware Handling: Express.js leverages middleware functions that can be used to handle
intermediate processing of requests and responses. Middleware functions are executed
sequentially and can perform tasks such as parsing request bodies, handling authentication,
logging, error handling, and more. Express.js provides an extensive ecosystem of middleware
modules that can be easily integrated into an application.
javascriptCopy code

// Example middleware function

function authenticate(req, res, next) {
// Check authentication
if (req.isAuthenticated()) {
next(); // Pass control to the next middleware
} else {
res.status(401).send('Unauthorized');
}
}

// Using middleware
app.get('/protected', authenticate, (req, res) => {
res.send('You have access to protected content!');
});
Server Configuration: Express.js allows developers to configure and customize the server
easily. It provides a simple interface to set up server-specific settings, such as port number,
SSL/TLS certificates, middleware configurations, and more. Express.js can be used with other
Node.js modules to enhance the server's capabilities, such as integrating with databases or
other external services.
javascriptCopy code

app.set('port', process.env.PORT || 3000);

app.listen(app.get('port'), () => {
console.log(`Server running on port ${app.get('port')}`);
});
Extensibility and Middleware Ecosystem: Express.js provides a modular architecture that
allows developers to extend its capabilities by integrating additional middleware or creating
custom middleware. This makes it highly flexible and adaptable to various project requirements.
Express.js has a vast ecosystem of middleware modules available through npm, allowing
developers to easily add features like session management, input validation, compression, and
more.
Express.js can be used to develop RESTful APIs by leveraging its routing and middleware
capabilities. Here's an example:
javascriptCopy code
const express = require('express');
const app = express();

// API routes
app.get('/api/users', (req, res) => {
// Retrieve all users
});

app.post('/api/users', (req, res) => {

// Create a new user
});

app.get('/api/users/:id', (req, res) => {

// Retrieve a user by ID
});

app.put('/api/users/:id', (req, res) => {

// Update a user by ID
});

app.delete('/api/users/:id', (req, res) => {

// Delete a user by ID
});
app.listen(3000, () => {
console.log('API server running on port 3000');
});

For user authentication, Express.js can be integrated with authentication middleware libraries
such as Passport.js. Passport.js provides a flexible and easy-to-use authentication framework
that can be used with Express.js to handle various authentication strategies like
username/password, OAuth, JWT, etc.
javascriptCopy code

const express = require('express');

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

// Initialize Passport.js
app.use(passport.initialize());

// User login route

app.post('/login', passport.authenticate('local', { session: false }), (req, res) => {
// Authentication successful
res.json({ message: 'Login successful', user: req.user });
});

// Protected route
app.get('/protected', passport.authenticate('jwt', { session: false }), (req, res) => {
// Access granted for authenticated users
res.json({ message: 'Access granted', user: req.user });
});

app.listen(3000, () => {
console.log('Server running on port 3000');
 });
In the example above, the '/login' route uses the 'local' strategy for authentication, and the
'/protected' route uses the 'jwt' strategy to verify and authenticate requests using JSON Web
Tokens.
Overall, Express.js simplifies web application development by providing a lightweight and flexible
framework with intuitive routing, middleware handling, and server configuration capabilities. Its
popularity among developers is a result of its simplicity, extensibility, and the vibrant ecosystem
of middleware modules available.

8. Discuss the key features and advantages of the Angular framework in frontend web
development. Explain how Angular follows a component-based architecture and utilizes
concepts such as data binding, dependency injection, and routing. Analyze the benefits
of using Angular for developing large-scale, maintainable web applications, and compare
it with other frontend frameworks.
Angular is a powerful and popular frontend framework for web development, maintained by
Google. It offers a comprehensive set of features and advantages that make it a preferred
choice for building robust and maintainable web applications. Here are some key features and
advantages of Angular:
Component-Based Architecture: Angular follows a component-based architecture, where the
application is built by composing reusable and modular components. Components encapsulate
the logic, UI, and behavior, making it easier to develop, test, and maintain different parts of the
application. Angular's component-based approach promotes code reusability and separation of
concerns, enhancing the overall structure and organization of the application.
Data Binding: Angular provides powerful data binding capabilities, enabling seamless
synchronization of data between the model and the view. It supports both one-way and two-way
data binding, allowing developers to easily propagate changes between components and their
templates. Data binding simplifies the process of updating the UI when the underlying data
changes, reducing the amount of manual DOM manipulation required.
Dependency Injection: Angular has built-in support for dependency injection (DI), which helps
manage the dependencies between components and services. DI simplifies the process of
creating, using, and testing objects by allowing dependencies to be automatically resolved and
injected into the components. This promotes modularity, code reusability, and testability, making
the application more maintainable and scalable.
Routing: Angular provides a powerful routing module that allows developers to implement
navigation and handle different views within the application. It enables the creation of multiple
routes with corresponding components, allowing for a single-page application (SPA) experience.
Angular's routing module supports features like lazy loading, route guards for authentication, and
parameterized routes, enhancing the overall user experience and application performance.
TypeScript Language: Angular is built with TypeScript, a statically typed superset of
JavaScript. TypeScript adds static typing, classes, interfaces, and other features to JavaScript,
making it more robust and scalable. The use of TypeScript in Angular provides benefits such as
improved tooling, better IDE support, early detection of errors, and enhanced code
maintainability.
Testing Support: Angular comes with robust testing support out of the box. It provides tools and
libraries for unit testing, integration testing, and end-to-end testing, making it easier to write and
execute tests for Angular applications. The Angular testing framework promotes test-driven
development (TDD) and ensures the reliability and quality of the codebase.
Large Community and Ecosystem: Angular has a large and active community, which means
there is a vast amount of resources, tutorials, and libraries available. The ecosystem around
Angular includes various official and community-driven libraries, tools, and plugins, which can be
leveraged to enhance development productivity and extend the capabilities of Angular
applications.
Using Angular for developing large-scale web applications offers several benefits:
Scalability and Maintainability: Angular's component-based architecture, dependency injection,
and modularity make it well-suited for building large-scale applications. The structure and
organization provided by Angular make it easier to manage and scale the codebase.
Components can be developed independently and reused across the application, improving
maintainability.
Code Organization: Angular enforces best practices and provides a clear structure for
organizing the codebase. The separation of concerns between components, templates,
services, and modules makes the codebase more manageable and easier to maintain. Angular's
style guide encourages consistency and readability, promoting collaboration among developers.
Enhanced Productivity: Angular's features like data binding, reusable components, and
powerful CLI (Command Line Interface) contribute to increased development productivity.
Angular's CLI offers automated project setup, code generation, and build optimization, reducing
boilerplate code and repetitive tasks.
Performance Optimization: Angular's ahead-of-time (AOT) compilation, tree shaking, and lazy
loading capabilities help optimize the performance of the application. AOT compilation reduces
the bundle size and improves startup time. Tree shaking eliminates unused code, resulting in
smaller file sizes. Lazy loading allows loading modules on-demand, reducing the initial load time
of the application.
Comparing Angular with other frontend frameworks:
React: React is a popular JavaScript library for building user interfaces. While React focuses
mainly on the view layer, Angular provides a more comprehensive framework with features like
routing, dependency injection, and a complete solution for building large-scale applications.
Angular's opinionated approach and built-in tools make it suitable for complex and enterprise-
level projects, whereas React's flexibility allows developers to choose libraries and tools based
on their specific needs.
Vue.js: Vue.js is a progressive JavaScript framework that shares some similarities with both
Angular and React. Vue.js offers a simpler and more lightweight approach compared to Angular,
making it easier to learn and adopt. Angular provides a more comprehensive feature set and
follows a more structured and opinionated approach. Vue.js strikes a balance between the two,
providing a flexible yet approachable framework.
In summary, Angular's component-based architecture, powerful data binding,
dependency injection, routing, and TypeScript support make it a robust choice for developing
large-scale, maintainable web applications. Its extensive ecosystem, strong tooling, and testing
support contribute to increased development productivity. Angular's structure and best practices
ensure code organization and readability. When compared to other frontend frameworks,
Angular offers a comprehensive solution suitable for complex and enterprise-level applications,
while still providing flexibility and extensibility.
 9. Explain in detail about Building blocks of HTML.
An HTML document consist of its basic building blocks which are:
 Tags: An HTML tag surrounds the content and apply meaning to it. It is written
between < and > brackets.
 Attribute: An attribute in HTML provides extra information about the element, and it is
applied within the start tag. An HTML attribute contains two fields: name & value.

Syntax
1. <tag name attribute_name= " attr_value"> content </ tag name>
 Elements: An HTML element is an individual component of an HTML file. In an HTML
file, everything written within tags are termed as HTML elements.

Figure 2: Elements of HTML

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
 4. <title>The basic building blocks of HTML</title>
5. </head>
6. <body>
7. <h2>The building blocks</h2>
8. <p>This is a paragraph tag</p>
9. <p style="color: red">The style is attribute of paragraph tag</p>
10. <span>The element contains tag, attribute and content</span>
11. </body>
12. </html>

Output:

The building blocks

This is a paragraph tag

HTML Tags
HTML tags are like keywords which defines that how web browser will format and display the
content. With the help of tags, a web browser can distinguish between an HTML content and a
simple content. HTML tags contain three main parts: opening tag, content and closing tag. But
some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to
right. HTML tags are used to create HTML documents and render their properties. Each HTML
tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per your code requirement.

 All HTML tags must enclosed within <> these brackets.

 Every tag in HTML perform different tasks.
 If you have used an open tag <tag>, then you must use a close tag </tag> (except some
tags)
Syntax
<tag> content </tag>

HTML Tag Examples

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>

<b>Bold Tag</b>

<i>Italic Tag</i>

<u> Underline Tag</u>

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

HTML Meta Tags

DOCTYPE, title, link, meta and style

HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>,
<samp>, <var> and <br>

HTML Link Tags

<a> and <base>

HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>

HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>
HTML Table Tags
table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and legend

HTML Tags List

Following is the complete list of HTML tags with the description which are arranged
alphabetically.

HTML Attribute
 HTML attributes are special words which provide additional information about the

elements or attributes are the modifier of the HTML element.

 Each element or tag can have attributes, which defines the behaviour of that element.
 Attributes should always be applied with start tag.
 The Attribute should always be applied with its name and value pair.
 The Attributes name and values are case sensitive, and it is recommended by W3C
that it should be written in Lowercase only.
 You can add multiple attributes in one HTML element, but need to give space
between two attributes.
Syntax
1. <element attribute_name="value">content</element>

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h1> This is Style attribute</h1>
7. <p style="height: 50px; color: blue">It will add style property in element</p>
8. <p style="color: red">It will change the color of content</p>
9. </body>
10. </html>

Output:
Explanation of above example:
<p style="height: 50px; color: blue">It will add style property in element</p>
In the above statement, we have used paragraph tags in which we have applied style attribute.
This attribute is used for applying CSS property on any HTML element. It provides height to
paragraph element of 50px and turns it colour to blue.

<p style="color: red">It will change the color of content</p>

In the above statement we have again used style attribute in paragraph tag, which turns its
colour red.