Full-Stack Development

(ES-456: Internship Report)

Submitted in partial fulfillment of the requirement

For the award of the degree of

Bachelor of Technology
in
Computer Science & Engineering

Submitted by
Nishant
04296302721

Under the supervision of

Ms. Gunjan Beniwal

Assistant Professor

Computer Science Engineering

Maharaja Surajmal Institute of Technology

(Affiliated to Guru Gobind Singh Indraprastha University)

Janakpuri, New Delhi-58

May/June 2025
 DECLARATION

This is to certify that the material embodied in this Internship Report titled “Internship
Programme” being submitted in the partial fulfillment of the requirements for the
award of the degree of Bachelor of Technology in Computer Science and
Technology is based on my original work. It is further certified that this Internship
work has not been submitted in full or in part to this university or any other university
for the award of any other degree or diploma. My indebtedness to other works has
been duly acknowledged at the relevant places.

Nishant
04296302721

II
CERTIFICATE FROM THE COMPANY

III
 CERTIFICATE FROM THE INSITIUTE

This is to certify that the work embodied in this Internship Report titled “Internship
Programme” being submitted in the partial fulfillment of the requirements for the
award of the degree of Bachelor of Technology in Computer Science and
Technology, is original and has been carried out by Nishant(04296302721) under my
supervision and guidance.

It is further certified that this Internship work has not been submitted in full or in part
to this university or any other university for the award of any other degree or diploma
to the best of my knowledge and belief.

Ms. Gunjan Beniwal Ms. Vaani Garg

Assistant Professor Assistant Professor
(Faculty Supervisor) (Placement coordinator)

Dr. Nishtha Jatana

HOD
Maharaja Surajmal Institute of Technology

IV
 ACKNOWLEDGEMENT

Any project work owes its prosperity from beginning to fulfilment, to individuals
included with various aspects of it at different stages. Through this section I would
like to offer my sincere gratitude to each one of the individuals who made a
difference in the different phases of this study

I would like to express my gratitude to the Head of Department of computer science

And my mentor Ms. Gunjan Beniwal. Her contribution helps me in successful
completion of project.

I express deep appreciation to my Instructors and Software Development Engineer,

for his indispensable guidance during my project. His friendly assistance was pivotal
in overcoming challenges, making the project's completion possible. Mr. Kunal
Verma expertise, insightful feedback, and approachable nature significantly
contributed to my understanding of the project. His mentorship not only fostered
technical skill development but also created a positive learning atmosphere. Without
his support, this achievement would have been challenging.

Last but not least, this acknowledgement will remain incomplete if I fail to express
our deep sense of obligation to my parents and God for their consistent blessings and
encouragement.

Nishant
(04296302721)

V
 ABSTRACT OF PROJECT

The web development industry has seen remarkable growth alongside the evolution of
technology. As software rapidly advances in tandem with hardware, internet
connected devices with real-time capabilities have become pervasive, making
performance optimization crucial. Despite many developments, some traditional
systems still struggle to meet modern performance demands. In the world of news
consumption, existing platforms like major news websites and social media channels
offer vast amounts of content, but they also present challenges like information
overload, making it difficult for users to find relevant news efficiently.

This project aims to comprehensively explore the essential concepts of each

technology within the MERN before constructing a fully functional web application.
This application is tailored to assist small businesses in formulating effective business
strategies. Full Stack Development is Multiple technologies (mostly languages and
tools) and frameworks (reusable pre-written codes) are used to create a complete
website and web applications. A developer who can develop both the front-end and
the backend of the website using these languages and frameworks is called a Full
Stack Developer. The frontend and backend require different skill sets; thus, a full
stack developer has deep knowledge in a single technology but can work with a broad
set of technologies, forming a T-shaped skill set.

MERN, which stands for MongoDB, Express, React and Node.JS is a popular stack
for building full-stack web applications. In this project, React will be used to build a
dynamic and responsive user interface, while Express and Node handle server-side
requests and API integration.

This work serves as a valuable reference for novices and technology enthusiasts
seeking insights into the MERN stack.

VI
 LIST OF FIGURES

1. Fig 2.1: Vein diagram of FULL stack 11

2. Fig 2.2: Frontend technologies 12
3. Fig 2.3: Backend Software 13
4. Fig 2.4: Structure of HTML 14
5. Fig 2.5: CSS working diagram 16
6. Fig 2.6: Bootstrap advantages 17
7. Fig 2.7: TailwindCSS 19
8. Fig 2.8: Git And Github 21
9. Fig 2.9: Relation between client and software 22
10. Fig 2.10: React.JS 23
11. Fig 2.11: Flowchart of Database 25
12. Fig 2.12: Mongo DB Atlas 26
13. Fig 2.13: layout of postman 29
14. Fig 2.14: MVC Pattern 30
15. Fig 2.15: NodeJS working flow 32
16. Fig 2.16: ExpressJs logo 33
17. Fig 3.1: Authentication 37
18. Fig 3.2: Authorization 40
19. Fig 3.3: Synchronous Processing 42
20. Fig 3.4: Asynchronous Processing 43
21. Fig 3.4: Server Architecture 44
22. Fig 4.1: Landing Page 46
23. Fig 4.2: Signup Page 48
24. Fig 4.3: Login Page 49

VII
 TABLE OF CONTENTS

Contents Page No.

Declaration ii

Certificate ( From the company) iii

Certificate ( From the Institute) iv

Acknowledgement v

Abstract of Project vi

List of Figures vii

Table of Contents viii

1. CHAPTER 1- Company Profile 9

1.0. Company detail 9

1.1. About company 9

1.2. About Programme 10

1.3. Conslusion 10

2. CHAPTER 2- Technology tools studied during internship 11

2.0. FULL Stack Development 11

2.0.1. What is FULL Stack development? 11

2.0.2. Types of FULL Stack 12

2.1. MERN Stack 13

2.1.1. HTML 14

2.1.2. CSS 15

2.1.3. Bootstrap 16

2.1.4. Tailwind CSS 17

2.1.5. Git 19

2.1.6. Github 22

2.1.7. MongoDB 25

VIII
 2.1.8. ReactJS 27

2.1.8.1. Virtual-DOM 27

2.1.8.2. Component 27

2.1.8.3. Props and State 28

2.1.9. Postman 28

2.1.10. MVC 29

2.1.11. Node.JS 31

2.1.12. Express.JS 33

3. Chapter 3- Demonstration of technology through project 34

3.0. JavaScript Optimization 35
3.1. Why MERN Stack 36
3.2. Authentication 38
3.3. Authorization 42
3.4. Synchronous Processing 43
3.5. Asynchronous Processing 44
3.6. Server Architecture 45

4. Chapter 4- Results of the project 46

4.0. MERN Application 47

4.1. Benfits and Use case 48

4.2. Challenges and Consideration 49

4.3. Comparison of Approaches 54

5. Chapter 5- Conclusion 55
6. Chapter 6-Summary and Learning 60
7. Chapter 7 – Bibliography 61

IX
 CHAPTER 1 - Company Profile

Regalien Group PVT. LTD

1.1 Company Details

Regalien, headquartered in Greater Noida, India, is a consulting company which
provides business services in technology services. Founded in 2013, Regalien
provides business consulting, information technology, and outsourcing services to
clients worldwide. The company is known for its innovation in digital transformation,
artificial intelligence,and cloud computing. Under the leadership of CEO
HIMANSHU MITTAL and RANJU BALA, Infosys continues to drive technological
advancements and deliver value to enterprises.
1.2 About Company
Regalien is IT services and consulting company that offers a wide range of
technology solutions, including software development, system integration, and IT
consulting. It is recognized for its expertise in cloud computing, AI, automation, and
enterprise application services, catering to various industries such as finance,
healthcare, and manufacturing. It's main aim is helping businesses drive digital
transformation while ensuring sustainability and innovation. It is committed to
fostering a learning environment where professionals gain hands-on experience in
industry-relevant technologies. The company has a strong community-driven culture,
providing employees with opportunities for mentorship, collaboration, and career
growth. With a focus on excellence and continuous learning, It equips its workforce
with problem solving skills, industry best practices, and real-world project experience,
making it a preferred employer in the IT sector.

1.3 MERN Training at Regalien Group

Regalien provides specialized training programs to upskill its workforce in modern
technologies. The MERN Regalien is an intensive program designed to equip
professionals with full-stack development skills.

Key Highlights of the Training:

 MERN Development: Core JavaScript advanced JavaScript concepts,
exception handling and best coding practices.

 Framework: ExpressJS, dependency injection, RESTful API

development, and microservices architecture.

 React Development: Frontend development using React, state

management, component lifecycle, and integration with APIs

10
  Project-Based Learning: Hands-on implementation of MERN
applications through real-world projects.

 Best Practices: Focus on clean coding standards, debugging, logging,

and unit testing.

The training at Regalien not only enhances technical skills but also prepares
professionals for real-world software development challenges by integrating
industry best practices in software engineering.

1.4 Conclusion
With a commitment to continuous learning and professional growth, It ensures that
its trainees emerge as proficient full-stack developers, capable of contributing
effectively to modern software development projects.

11
 CHAPTER 2
TECHNOLOGY TOOLS USED

2.1 FULL Stack Development

2.1.1What is FULL Stack development?
Full-stack development refers to proficiency in both front-end and back-end
technologies, enabling a developer to create end-to-end solutions. Full-stack
developers possess expertise in handling client-side interfaces, server-side logic,
databases, and deployment, allowing them to build comprehensive web applications
that seamlessly integrate user interfaces and functionalities. On the front end, they
work with technologies like HTML, CSS, and JavaScript to create the user interface.
On the back end, they manage server-side logic, databases, and application
architecture using frameworks like Node.js, Django, or Ruby on Rails. Full-stack
developers possess a holistic understanding of the entire development process,
enabling them to build, deploy, and maintain fully functional web applications.

Fig 2.1: Vein diagram of FULL stack

2.1.2 Types

Full Stack Development has two parts:

Front end Development: Front-end web development is the development of the
graphical user interface of a website, through the use of HTML, CSS, and JavaScript,
so that users can view and interact with that website. The objective of designing a site
is to ensure that when the users open up the website they see the information in a
format that is 11 easy to read and relevant. This is further complicated by the fact that
users now use a large variety of devices with varying screen sizes and resolutions thus
forcing the designer to take into consideration these aspects when designing the site.

12
A front-end developer architects and develops websites and applications using web
technologies (i.e., HTML, CSS, DOM, and JavaScript), which run on the Open Web
Platform or act as compilation input for non-web platform environments

Fig 2.2: Frontend technologies

Back-End Development
Backend development consists of a server that provides the data and links upon
request; it channels the data and organizes the information in the database. Backend
development is the development of the server-side logic that works for websites and
apps behind the scenes to establish communication between the database and the
browsers.

Highly used technology for Backend includes:

● Python– It’s a widely used language with simple syntax and easy-to-read
code (almost close to English). Google uses it for the backend services. It has
a wide range of Frameworks like Django, Pyramid, and Flask.

● JavaScript– It can also be used to develop Backend technology. Key

frameworks include Node.js, which is considered revolutionary among
backend developers.

● PHP– It’s the first priority when flexible accessibility is concerned. Highly
used in developing the backend of news websites and search engines

● Java– It is most popular due to its high scalability. Java brings the concept
of multi-threading, which can handle multiple requests independently and
efficiently

13
 ● SQL (Structured Query Language)- This is where our database is used for
analysis and manipulations.There are many uses of SQL as it is an excellent
tool for performing complex Operations on the Data.

Fig 2.3: Backend Software

2.1 MERN Stack

MERN stands for MongoDB, Express, React, Node, after the four key
technologies that make up the stack.
MongoDB — document database
Spring Boot — Backend
React.js— a client-side JavaScript framework

2.2.1. HTML
HTML, or Hypertext Markup Language, is a standard markup language used for
creating and designing web pages. It structures content on the web, defining elements
such as headings, paragraphs, links, images, and more.

14
Types of HTML:

o HTML 4.01: Released in 1999, it was the fourth major version and
widely used for a long time.
o XHTML: An XML-based HTML reformulation, combining HTML with
XML syntax.
o HTML5: The latest and widely adopted version, introduced in 2014,
focuses on enhancing multimedia support, APIs, and providing a more
consistent syntax.

HTML documents follow a hierarchical structure known as the Document Object

Model (DOM). The basic structure of an HTML document consists of the following
elements:

Fig2.4: Structure of HTML

<DOCTYPE HTML> : It is the declaration that specify that the document is of

HTML type.
<HTML> : It signifies the beginning of the HTML file.
<HEAD> : It holds the Metadata of the File and holds essential links used in the
file.
<BODY> : It contain the actual code of the HTML file . It is the content that is
displayed on the webpage.

15
2.1.2 CSS
CSS, or Cascading Style Sheets, is a style sheet language used to describe the
presentation of a document written in HTML or XML. It controls the layout,
formatting, and appearance of elements on a web page, enhancing the visual appeal
and user experience.

Types of CSS:
Inline CSS: Applied directly to an HTML element using the “style” attribute.
Internal or Embedded CSS: Defined within the HTML document using the
<style> tag in the document’s head.
External CSS: Defined in a separate CSS file and linked to the HTML
document using the <link> tag.

CSS Versions:
CSS1: The initial version, defining basic styling properties.
CSS2: Introduced more capabilities, including positioning and media types.
CSS2.1: An updated version with corrections and clarifications.
CSS3: The latest version, modularized to allow gradual adoption of new
features. It includes modules for various styling aspects, such as selectors,
colors, and animations.

CSS plays a crucial role in web development by separating content from presentation,
facilitating consistent styling across multiple pages and devices. Its continuous
evolution reflects the dynamic nature of web design and the need for enhanced styling
capabilities.

The flexibility of CSS also extends to animations and transitions, adding an

interactive dimension to websites without relying on JavaScript. Its modular nature,
with features like CSS Grid and Flexbox, simplifies complex layouts and enhances
the precision with which web elements can be positioned. CSS preprocessors such as
Sass and Less further extend CSS functionality, allowing developers to use variables,
functions, and other programming-like features to streamline their workflow.
As web technologies evolve, CSS continues to expand with new specifications, such
as custom properties (CSS variables), new color models, and media queries that cater
to the increasing diversity of devices.

Fig 2.5: CSS working diagram

16
2.1.3 Bootstrap
Bootstrap is a popular open-source CSS framework designed for responsive, mobile-
first web development.

Features
Bootstrap is a web framework that focuses on simplifying the development of
informative web pages (as opposed to web apps). The primary purpose of adding it to
a web project is to apply Bootstrap's choices of color, size, font and layout to that
project. As such, the primary factor is whether the developers in charge find those
choices to their liking. Once added to a project, Bootstrap provides basic style
definitions for all HTML elements. The result is a uniform appearance for prose,
tables and form elements across web browsers. Bootstrap also comes with several
JavaScript components in the form of jQuery plugins.

Each Bootstrap component consists of an HTML structure, CSS declarations, and in

some cases accompanying JavaScript code. They also extend the functionality of
some existing interface elements, including for example an auto-complete function for
input fields. The most prominent components of Bootstrap are its layout components,
as they affect an entire web page.

Additionally, CSS supports responsive design, ensuring websites render properly on

different screen sizes, from mobile devices to large desktop monitors. This continuous
evolution ensures CSS remains an essential tool for modern, responsive, and
interactive web design.

Developed by Twitter, it provides pre-designed HTML, CSS, and JavaScript

components such as buttons, forms, modals, navigation bars, and carousels. Bootstrap
follows a grid-based layout system, making it easy to align and organize content
across various screen sizes. Its built-in responsiveness and compatibility with modern
browsers reduce the need for extensive custom styling. Developers use Bootstrap to
accelerate development time while maintaining consistent and professional UI design.
It is especially useful for beginners and teams seeking a standardized design
approach. Its responsive breakpoints automatically adjust the design for desktops,
tablets, and smartphones. Bootstrap also supports theming and customization using
Sass variables, making it adaptable to different design needs. Its extensive
documentation and large community support make it ideal for both beginners and
experienced developers looking to streamline UI development and maintain design
uniformity across web projects.

17
 Fig 2.6: Bootstrap advantages

● Bootstrap is a free front-end framework for faster and easier web development
● Bootstrap includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many other, as
well as optional JavaScript plugins
● Bootstrap also gives you the ability to easily create responsive designs.

2.1.4. Tailwind CSS

Tailwind CSS is a utility-first CSS framework that enables rapid UI development by
applying low-level utility classes directly in HTML. Unlike traditional frameworks like
Bootstrap, it doesn’t provide pre-designed components but gives developers full design
freedom. Each utility class handles a single CSS property, such as p-4 for padding or
text-center for alignment. Tailwind is fully customizable via configuration, supports
responsive design, and includes dark mode capabilities. It promotes faster
development, reduces context switching, and keeps CSS minimal in production
through purging. Ideal for modern web apps, Tailwind simplifies styling while offering
complete control over the design.

18
Key Features of Tailwind CSS:

 Utility-First: Use small, single-purpose classes like p-4, text-center, bg-

blue-500.

 Highly Customizable: Configuration file (tailwind.config.js) allows theme

customization and plugin usage.

 Responsive Design: Built-in responsive utilities like md:text-lg, lg:p-6

 Performance Optimized: Purges unused CSS in production builds.

 Dark Mode Support: Easily toggle between light and dark themes.

Fig 2.7 : TailwindCSS

Benefits of tailwind CSS:

 Enables fast UI development with utility-first classes
 Eliminates the need to write custom CSS for most styles.
 Provides built-in responsive design utilities.
 Minimizes final CSS size with purging unused styles.
 Reduces context switching between HTML and CSS.

Evolution of Tailwind CSS

 2017 – Tailwind CSS was created by Adam Wathan introducing the utility-
first concept..
 2019 (v1.0) – Official stable release with core utility classes and responsive
support.
  2020 (v2.0) – Added dark mode, extended color palette, and improved
theming.

19
  2021 (v3.0) – Introduced Just-In-Time (JIT) engine by default for faster builds
and more flexibility.
 2022–2024+ – Continued growth with plugin ecosystem, container queries,
and framework integrations.

2.1.5. JavaScript
JavaScript is a versatile, high-level programming language primarily used to create
dynamic and interactive content on websites. It runs in the browser, enabling client-
side functionality such as form validation, animations, and real-time updates without
reloading the page. JavaScript supports object-oriented, functional, and event-driven
programming styles. It can manipulate HTML and CSS using the DOM (Document
Object Model). Modern JavaScript (ES6+) includes features like arrow functions,
promises, async/await, and modules. JavaScript is also used on the server-side with
environments like Node.js. Its vast ecosystem and community make it one of the most
popular and essential languages for web development.

Fig 2.8 : JavaScript Logo

Mission of JavaScript in MERN Development

 Enables interactive user interfaces on the frontend using React..
 Handles DOM manipulation and event handling in the browser.
 Drives backend logic and APIs using Node.js.
 Manages server-side operations and routing with Express.js.
 Allows real-time data updates using technologies like WebSockets.
 Supports full-stack development with a single language across client and
server.
 Connects and interacts with MongoDB using JavaScript-based libraries like
Mongoose.

With a strong focus on microservices, security, and performance, javascript ensures

that MERN remains the most widely used technology worldwide web development.

20
JavaScript Framework:
 React.js – Library for building user interfaces, especially SPAs (Single Page
Applications).
 Angular – Full-featured MVC framework developed by Google.
 Vue.js – Lightweight and flexible framework for building UIs and SPAs.
 Svelte – Compiles components to efficient vanilla JavaScript at build time.
 Next.js – React-based framework for server-side rendering and static site
generation.
 Nuxt.js – Vue-based framework similar to Next.js for SSR and SSG.

2.1.6 React
React is a popular open-source JavaScript library developed by Facebook for
building dynamic and interactive user interfaces, particularly for single-page
applications (SPAs). It follows a component-based architecture, where UIs are built
by combining reusable components, each managing its own state and logic. React
uses a virtual DOM to efficiently update and render components, resulting in high
performance and a smoother user experience.

React promotes declarative programming, meaning developers describe what the UI

should look like, and React takes care of updating the DOM when the state changes.
This approach makes code more predictable and easier to debug.
With JSX (JavaScript XML), React allows HTML to be written within JavaScript,
making the code more readable and intuitive. State management can be handled using
React’s built-in useState and useReducer hooks, or through external libraries like
Redux, Recoil, or Zustand.

React is widely used in modern web development due to its flexibility, large
ecosystem, and support for server-side rendering (using Next.js), mobile app
development (with React Native), and component reusability.

Fig 2.9 : ReactJs

21
Features of React.js
 Component-Based Architecture – Build UIs using reusable, independent
components.
 Virtual DOM – Efficiently updates and renders only changed parts of the UI.
 Declarative Syntax – Describes what the UI should look like for easier
maintenance.
 JSX Support – Allows mixing HTML with JavaScript for readable and
expressive code.
 Unidirectional Data Flow – Ensures predictable data handling and easier
debugging.
 Hooks API – Enables state and lifecycle management in functional
components.
 High Performance – Optimized rendering through virtual DOM and smart
diffing.
 Strong Ecosystem – Integrates well with tools like Redux, React Router, and
Next.js.
 Cross-Platform Support – Use React Native to build mobile apps using the
same principles.
 Server-Side Rendering – Supports SSR for better SEO and faster page loads
(e.g., with Next.js).

Workflow of React.js

Fig 2.10 : React.js work flow

22
2.1.7. Node.JS
Node.js is an open-source, cross-platform JavaScript runtime built on Chrome’s V8
engine that allows developers to run JavaScript on the server side. It is event-driven
and non-blocking, making it ideal for building scalable, high-performance web
applications. Node.js is commonly used for backend development in full-stack
applications, especially in the MERN stack. It supports asynchronous programming,
handles concurrent connections efficiently, and excels in building REST APIs, real-
time applications, and microservices. With its vast package ecosystem (npm),
developers can access thousands of modules to speed up development. Node.js
enables JavaScript to be used across both frontend and backend, simplifying full-stack
workflows.

Fig 2.11 : Node.js Logo

Features of Node.JS
 Asynchronous and Non-blocking I/O – Handles multiple requests without
waiting for any.
 Single-Threaded Event Loop – Efficiently manages concurrent connections
with a single thread.
 Built on Chrome’s V8 Engine – Offers fast code execution and performance.
 Cross-Platform – Runs on Windows, macOS, and Linux.
 NPM (Node Package Manager) – Provides access to thousands of reusable
libraries and modules.
 Highly Scalable – Ideal for building scalable network applications.
 Real-Time Capabilities – Supports real-time applications like chat and
gaming apps.
 Modular Architecture – Encourages reusable and maintainable code.
 Supports JSON and REST APIs – Seamlessly handles data exchange in web
applications.
 Used for Full-Stack Development – Works well with frameworks like
Express and databases like MongoDB.

23
Components of Node.JS
 Single-Threaded Event Loop – Handles multiple requests efficiently with
one thread.
 Event-Driven Model – Uses events and callbacks for asynchronous
operations.
 Non-Blocking I/O – Performs I/O without blocking the main thread.
 V8 Engine – Executes JavaScript code at high speed.
 Libuv Library – Manages the event loop and thread pool.
 Event Queue – Stores incoming requests to be processed.
 Thread Pool – Handles heavy or blocking operations in the background.
 Modules System – Enables modular code using CommonJS or ES Modules.
 Request-Response Cycle – Processes client requests and sends responses
asynchronously.
 Cross-Platform Support – Works on major operating systems like Windows,
macOS, and Linux.

Fig 2.12: Architecture of Node.js

2.1.8. Express.js
Express.js is a fast, minimal, and flexible Node.js web application framework used
for building server-side applications and APIs. It simplifies the process of handling
HTTP requests, routing, middleware integration, and managing server logic. Built on
top of Node.js, Express provides a robust set of features for building single-page,
multi-page, and RESTful web applications. It uses middleware functions to process
requests and responses, making the code modular and maintainable. Express supports
various templating engines, routing patterns, and HTTP methods, making it ideal for
both simple and complex applications. It is widely used in full-stack development,
especially in the MERN stack (MongoDB, Express, React, Node). Its simplicity, vast
middleware ecosystem, and seamless integration with databases and frontend
frameworks make Express.js one of the most popular choices for backend
development in modern JavaScript applications.

24
 Fig 2.13: Express.js Logo

Features of Express.js
 Minimal and Lightweight – Provides core web server features with minimal
overhead.
 Fast Routing System – Handles HTTP methods and URL paths efficiently.
 Middleware Support – Allows request processing through layered
middleware functions.
 Template Engine Integration – Supports engines like EJS, Pug, and
Handlebars.
 RESTful API Support – Ideal for building RESTful web services and APIs.
 Error Handling – Built-in mechanism for managing errors and exceptions.
 Flexible and Extensible – Easily integrates third-party packages and custom
middleware.
 Asynchronous Handling – Uses non-blocking I/O for high performance.
 Robust Community and Ecosystem – Large number of plugins and
resources available.
 Works Seamlessly with Node.js – Built on Node.js for efficient backend
development.

2.1.8 MongoDB
MongoDB is an open-source database; it is also the leading NoSQL (*) database
currently used by millions of people. It is written in one of the most popular
programming languages today.

In addition, MongoDB is cross-platform data that operates on the concepts of

Collections and Documents, providing high performance with high availability and
ease of expansion

NoSQL is a source database format that does not use Transact-SQL for regular access
information, this database was developed on JavaScript Framework on JSON(ob) data
type. With its introduction, it has overcome the disadvantages of RDBMS relational
type data model to improve operating speed, functionality, model scalability ,cache .

Furthermore, MongoDB is a cross-platform database, performing on Collection and

Document approach, it produces sharp production, huge availability, and effortless
scalability

25
 Fig 2.14: MongoDB Logo

Working of MongoDB
MongoDB is a NoSQL, document-oriented database designed for high performance,
scalability, and flexibility. Instead of storing data in traditional rows and tables like
relational databases, MongoDB stores data in JSON-like documents called BSON
(Binary JSON). Each document is a collection of key-value pairs, which allows for a
dynamic schema—meaning different documents in the same collection can have
different structures.
When a client (like a Node.js server) sends a request to MongoDB, the database stores
or retrieves documents from collections, which are analogous to tables in relational
databases. MongoDB uses a schema-less model, so developers can insert any type of
document without predefining its structure.
It supports powerful querying, indexing, and aggregation pipelines for efficient data
retrieval and manipulation. MongoDB scales horizontally using sharding
(distributing data across multiple servers) and ensures high availability through
replication (maintaining copies of data across servers). This makes it ideal for
modern applications requiring real-time analytics and large-scale data storage.
In the MERN stack, MongoDB acts as the backend database where all user data, app
data, and content are stored and accessed by the Node.js/Express server through
drivers like Mongoose, which provides a structured way to define and interact with
the database.

26
 Fig 2.15: MongoDB work-flow

Features of MongoDB
 Document-Oriented Storage – Stores data in flexible, JSON-like
BSON documents.
 Schema-Less Design – Allows dynamic structure for documents
within a collection.
 High Performance – Optimized for fast read/write operations.
 Scalability – Supports horizontal scaling through sharding.
 Replication Support – Ensures high availability with replica sets.
 Powerful Query Language – Supports rich queries, filters, and
aggregation pipelines.
 Indexing – Allows indexing on any field for faster search.
 Integrated File Storage – Uses GridFS to store and retrieve large
files.
 Cross-Platform Compatibility – Runs on Windows, Linux, macOS,
and cloud platforms.
 Strong Community and Ecosystem – Wide range of tools, drivers,
and integrations available.

MongoDB Atlas:
MongoDB Atlas is a cloud-based database service offered by MongoDB Inc.
that provides a fully managed version of MongoDB. It allows developers to
deploy, manage, and scale MongoDB clusters on major cloud platforms like
AWS, Google Cloud, and Azure without manual configuration. Atlas handles
backups, monitoring, updates, and security automatically. It offers features
like built-in data replication, global distribution, real-time performance insights,
and end-to-end encryption. MongoDB Atlas is ideal for modern applications
needing high availability, scalability, and minimal maintenance. It also

27
supports easy integration with the MERN stack, allowing cloud-hosted
MongoDB databases to be accessed via Node.js applications using
Mongoose

Fig 2.16: MongoDB Atas User-interface

2.1.9. Mongoose
Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js that
provides a structured and schema-based way to interact with MongoDB databases. It
acts as a bridge between the MongoDB database and the Node.js application by
allowing developers to define data models using schemas. These schemas define the
structure, data types, validation rules, and relationships of documents within a
MongoDB collection, which helps in maintaining data consistency and integrity.
Mongoose simplifies CRUD (Create, Read, Update, Delete) operations with a clean
and expressive API. It supports middleware (also called pre and post hooks), which
allows execution of custom logic before or after database operations like saving or
deleting documents. It also includes built-in data validation, query building,
population for managing relationships, and support for custom instance and static
methods.
In the MERN stack, Mongoose is typically used on the server side to define how
application data is stored and retrieved from MongoDB. It makes working with
MongoDB in Node.js much easier, especially when building RESTful APIs or
handling user data.

Fig 2.17: Mongoose Logo

28
Working of Mongoose
Mongoose works by creating a structured interface between a Node.js application and
a MongoDB database. It allows developers to define schemas, which act as blueprints
for the structure of documents in a MongoDB collection. These schemas specify
fields, data types, default values, validation rules, and relationships. Once a schema is
defined, it is compiled into a model, which is used to create and manage documents in
the database. When the application performs operations like saving, finding, updating,
or deleting data, Mongoose translates these actions into MongoDB queries behind the
scenes. It also provides powerful features such as middleware (to run functions before
or after operations), virtuals (computed properties), and population (for handling
references between collections). By enforcing consistent data structures and
simplifying database interactions, Mongoose makes it easier to build robust and
maintainable backend applications in the MERN stack.

Benefits of Mongoose
 Schema-Based Structure – Defines clear data models for MongoDB
collections.
 Data Validation – Ensures data integrity with built-in validation rules.
 Simplified Queries – Provides an easy and readable API for database
operations.
 Middleware Support – Allows execution of logic before or after actions like
save or delete.
 Relationship Management – Supports population to handle referenced
documents.
 Reusable Models – Enables consistent and modular use of data structures
across the app.
 Built-in Type Casting – Automatically converts data to correct types based
on schema.
 Query Helpers – Supports custom instance and static methods for cleaner
code.
 Default Values – Allows setting default values for fields during document
creation.
 Integration with Node.js – Works seamlessly with Express and other Node.js
tools

Nodejs and Mongoose relation

The relationship between Node.js and Mongoose is that Mongoose serves as a tool
within Node.js to interact with MongoDB in a structured and efficient way.
In simple terms:
 Node.js is the runtime environment used to build the backend of web
applications.
 MongoDB is the NoSQL database used to store data in JSON-like documents.

29
  Mongoose is an ODM (Object Data Modeling) library that runs on Node.js
and helps developers define schemas, validate data, and perform database
operations easily.

Key relationship points:

1. Node.js uses Mongoose to connect to and communicate with MongoDB.
2. Mongoose provides a schema layer on top of MongoDB, which MongoDB
alone does not enforce.
3. Mongoose simplifies CRUD operations in Node.js by offering a readable and
powerful API.
4. Both are part of the MERN stack, where Node.js handles server logic and
Mongoose handles structured data access.

So, Mongoose enhances the MongoDB experience within Node.js applications by

making data modeling and validation simpler and more reliable.

Fig 2.18: Mongoose and Node.js mapping

30
2.2.1. Postman
Postman is a popular API testing and development tool used by developers and testers
to design, test, and debug APIs. It allows users to send HTTP requests to a server and
view the responses, supporting all HTTP methods like GET, POST, PUT, DELETE,
etc. Postman provides features like environment variables, authentication, request
chaining, and automated testing. It also offers a user-friendly interface to organize
collections of requests, monitor API performance, and collaborate with teams. With
integrations for CI/CD pipelines, Postman simplifies the API development workflow
and ensures robust, error-free API communication.

Fig 2.19: Bootstrap advantages

Features of Postman:
 Environment Variables – Use variables for different environments like dev,
staging, and production.
 Automated Testing – Write test scripts to validate API responses.
 Request Collections – Organize and save groups of API requests.
 API Documentation – Generate and share interactive API documentation.
 Mock Servers – Simulate server responses for testing purposes.
 Collaboration – Share and collaborate on collections and environments with
teams.
 Monitor APIs – Set up monitors to track API performance over time.
 Request Chaining – Pass data between requests for sequential testing.
 Integrations – Integrates with CI/CD tools for automated API testing.

2.2.2. Relation b/w client and software

The MERN stack (MongoDB, Express.js, React.js, Node.js), the client refers to the
frontend, typically built with React.js, which is responsible for presenting the user
interface and interacting with users. The software in this context includes both the
frontend (client-side React application) and the backend (server-side Node.js with
Express.js and MongoDB).
The client sends HTTP requests (like GET, POST, PUT, DELETE) to the backend
server (Node.js + Express). The server processes these requests, performs logic, and
interacts with the database (MongoDB) to fetch, create, update, or delete data. Once

31
the server completes the task, it sends a response back to the client in the form of
JSON data.
Thus, the client and software communicate in a request-response model using REST
APIs, making the app dynamic and interactive. This seamless interaction defines the
full-stack architecture of the MERN stack.

Fig 2.20: Relation b/w client software

Features of client software

 User Interface Rendering – Built using React.js to create dynamic and
responsive UIs.
 Component-Based Architecture – UI is split into reusable and
manageable React components.
 State Management – Handles data and UI state using React hooks or
libraries like Redux.
 Routing Support – Uses libraries like React Router for seamless
navigation without page reloads.
 API Communication – Sends HTTP requests to the backend using
fetch or axios.
 Real-Time Interaction – Updates UI dynamically based on user input
or server responses.
 Form Handling and Validation – Captures user input and performs
client-side validations.
 Responsive Design – Ensures the UI works well across devices using
CSS or libraries like Tailwind.
 Authentication Handling – Manages login sessions, JWT tokens, and
protected routes.

32
 Fig 2.21: client and database relation

Commonly used terms in MongoDB:

_id: Almost every document required this field. The _id field illustrates a exceptional
value in the MongoDB document. The _id field can also be interpreted as the primary
key in the document. If you add a new document, MongoDB will automatically
generate aid representing that document and be unique in the MongoDB database.

Collection: A group of many documents in MongoDB. Collection can be interpreted

as a corresponding table in the RDBMS (Relational Database Management System)
database. Collection resides in a single database. Collections do not have to define
columns, rows or data types first.

Cursor: This is a pointer to the outcome set of a query. The client can emphasize over
a cursor to get the result.

Database: The location of the collections, similar to the RDMS database that contains
the tables. Each Database has a separate file stored on physical memory. Some
MongoDB owners may contain various databases.

Document: A transcript belonging to a Collection. Documents, in turn, include name

and value fields.

Field: A name-value pair in a document. A document may not need all the fields. The
fields are like columns in a relational database.

JSON: Short for JavaScript Object Notation. Human readability is in the plain text
format representing structured data. JSON currently supports a lot of programming
languages.

33
Index: Exclusive data structures used to save a small allocation of data sets for simple
scanning. The index puts the value of an individual field or sets of fields, sorted by the
value of these fields. Index effectively supports the analysis of queries.

MongoDB Atlas is MongoDB's cloud database launched in 2016 on AWS, Microsoft

Azure and Google Cloud Platform.

2.2.3 GIT
Git is a free and open-source distributed version control system used to track changes
in code during software development. It allows multiple developers to collaborate on
the same project, manage different versions of the code, and merge contributions
efficiently. Git stores the full history of changes, supports branching and merging, and
enables rollback to previous states. Developers can work offline and later sync their
changes with remote repositories like GitHub or GitLab. Its speed, reliability, and
powerful features make Git an essential tool in modern development workflows,
including those in full-stack projects like the MERN stack

Fig 2.22: Git Logo

Common git commands

 git init – Initializes a new Git repository.
 git clone <repo-url> – Clones a remote repository to your local
machine.
 git status – Shows the current status of the working directory and
staging area.
 git add <file> – Stages a file for the next commit.
 git add . – Stages all changed files.
 git commit -m "message" – Commits staged changes with a
message.
 git push – Uploads local commits to the remote repository.
 git pull – Fetches and merges changes from the remote repository.
 git branch – Lists, creates, or deletes branches.
 git checkout <branch> – Switches to the specified branch.
 git merge <branch> – Merges the specified branch into the current
branch.

34
  git log – Shows the commit history.
 git remote -v – Displays remote repository URLs.
 git reset <file> – Unstages a file.
 git rm <file> – Deletes a file and stages the deletion.
 git config – Sets Git configuration values (like username, email).

Features of GIT
 Distributed Version Control – Every user has a full copy of the
repository history.
 Branching and Merging – Supports feature branches and smooth
integration of code.
 Lightweight and Fast – Performs operations quickly and efficiently.
 Data Integrity – Ensures data is stored securely using SHA-1 hashing.
 Offline Work – Most Git operations can be done without an internet
connection.
 Staging Area – Allows control over which changes to commit.
 Collaboration Support – Enables multiple developers to work
simultaneously.
 Undo Capabilities – Allows rollback to previous versions safely.
 Open Source – Free to use and supported by a large community.
 Integration Friendly – Works well with platforms like GitHub, GitLab,
and Bitbucket.

2.2.3 GitHub
GitHub is a web-based platform that provides Git version control hosting and
collaboration features for developers. Built on Git, it enables developers to store,
manage, and share their code repositories, making it a central hub for open-source and
private projects. GitHub allows developers to collaborate by providing features like
branching, pull requests, and merging, enabling multiple people to work on the same
project without conflicts.

Developers can create repositories, track issues, and discuss code changes through
issues and comments. GitHub also offers a visual interface to track commit histories
and contributions, making it easier to manage and review code changes.

It integrates with other tools and services, supports continuous

integration/continuous deployment (CI/CD), and allows for the management of
access permissions, making it ideal for teams working on large-scale applications. In
addition, GitHub provides GitHub Actions for automating workflows, GitHub
Pages for hosting static websites, and features to publish and showcase projects.

GitHub's community and collaborative features have made it a go-to platform for

35
open-source projects, and its integration with tools like GitLab and Bitbucket further
strengthens its position in the software development ecosystem

Fig 2.23: GitHub Logo

GitHub work-flow

Fig 2.24: GitHub work-flow

 Create or Clone a Repository – Start a new project or clone an existing

one from GitHub.
 Create a Branch – Make a new branch to work on a specific feature or
fix.
 Make Changes Locally – Edit code, add new files, or make
improvements on your branch.
 Stage and Commit Changes – Use git add and git commit to save
changes with a message.
 Push to GitHub – Upload your local branch to the remote GitHub
repository using git push.
 Open a Pull Request – Propose your changes and request a review
from collaborators.
 Review and Discuss – Team members review the code, suggest
changes, and approve the pull request.
 Merge the Branch – Once approved, merge the changes into the main
branch.
 Pull Updates – Regularly fetch and pull changes from the main branch
to stay up-to-date.
 Delete Branch – After merging, delete the feature branch to keep the
repo clean.

36
Features of GitHub
 Code Hosting – Stores and manages Git repositories in the cloud.
 Version Control – Tracks changes and manages project history using
Git.
 Branching and Merging – Allows separate feature development and
safe integration.
 Pull Requests – Facilitates code reviews and collaboration before
merging changes.
 Issue Tracking – Helps manage bugs, tasks, and feature requests.
 GitHub Actions – Automates workflows like testing, building, and
deployment.
 Project Management Tools – Includes boards, milestones, and labels
for organizing work.
 Collaboration – Enables team discussions, comments, and code
suggestions.
 Access Control – Manages permissions for team members and
contributors.
 GitHub Pages – Hosts static websites directly from repositories.
 Code Review Tools – Inline comments and change suggestions for
efficient reviews.
 Integration Support – Works with CI/CD, IDEs, and third-party tools.
 Open Source Support – Hosts millions of public open-source projects.
 Security Features – Offers dependency alerts, secret scanning, and
branch protection.

2.2.3 MVC Pattern

The MVC (Model-View-Controller) pattern is a software architectural design that
separates an application into three main components—Model, View, and Controller.
The Model handles the data and business logic of the application, including
retrieving, updating, and storing data in the database.

The View is responsible for presenting the data to the user, typically through a user
interface, and reflects any changes made to the data.

The Controller acts as a bridge between the Model and View—it processes user
inputs, calls the appropriate functions in the Model, and determines which View to
render as a response. This separation of concerns makes the code more organized,
maintainable, and scalable.
In modern web development, including the MERN stack, MVC helps manage
complexity by clearly defining responsibilities: for instance, Mongoose manages
Models, React handles Views, and Express handles Controllers. This structured
approach improves code clarity, enables easier debugging and testing, and facilitates
teamwork by allowing developers to work on separate components independently

37
 Fig 2.24: MVC Pattern Architecture

Working Of MVC pattern

 User interacts with the View – The user performs an action (e.g.,
clicks a button or submits a form).
 View sends input to the Controller – The UI sends the user's action
or input to the Controller.
 Controller processes the request – The Controller interprets the
input and decides what needs to be done.
 Controller communicates with the Model – It requests or updates
data from the Model based on the user’s action.
 Model performs data operations – The Model accesses or modifies
the database and returns the data or result.
 Controller receives data from the Model – After the operation, the
Controller gets the processed data.
 Controller updates the View – It sends the updated data or response
back to the View.
 View displays the result to the user – The UI updates to reflect the
new data or output.

38
 Fig 2.25: MVC Pattern work-Flow

Features of MVC Pattern

 Separation of Concerns – Divides application into Model, View, and
Controller components.
 Modular Architecture – Allows independent development, testing, and
maintenance of each component.
 Reusability – Encourages code reuse, especially for Models and
Views.
 Scalability – Supports growing applications with organized structure.

 Maintainability – Easier to debug and update specific components

without affecting others.
 Improved Collaboration – Developers can work on different layers
simultaneously.
 Clear Workflow – Follows a logical flow from user interaction to data
processing.
 Platform Independent – Can be implemented across various
frameworks and languages.
 Efficient Code Management – Promotes clean, manageable, and
readable code.
 User-Friendly Interfaces – Separates logic from UI, enabling better
interface design.

39
2.2. MUI
Material UI is an open-source React component library that implements Google’s
Material Design. It includes a comprehensive collection of prebuilt components that
are ready for use in production right out of the box. Material UI is beautiful by design
and features a suite of customization options that make it easy to implement your own
custom design system on top of our components. Material UI v5 supports Material
Design v2. Adoption of v3 is tentatively planned for Material UI v6—see the release
schedule. You can follow this GitHub issue for future updates.

Fig 2.26: MUI framework

Advantages of Material UI Ship faster:

 Over 2,500 open-source contributors have poured countless hours into these
components. Focus on your core business logic instead of reinventing the
wheel—we've got your UI covered.

 Beautiful by default: We're meticulous about our implementation of Material

Design, ensuring that every Material UI component meets the highest
standards of form and function, but diverge from the official spec where
necessary to provide multiple great options.

 Customizability: The library includes an extensive set of intuitive

customizability features. The templates in our store demonstrate how far you
can go with customization.

 Cross-team collaboration: Material UI's intuitive developer experience reduces

the barrier to entry for back-end developers and less technical designers,
empowering teams to collaborate more effectively. The design kits streamline
your workflow and boost consistency between designers and developers.

 Trusted by thousands of organizations: Material UI has the largest UI

community in the React ecosystem. It's almost as old as React itself—its
history stretches back to 2014—and we're in this for the long haul. You can
count on the community's support for years to come (e.g. Stack Overflow).

40
  Material-UI is a widely-used React UI framework that provides a set of React
components implementing Google's Material Design principles. It offers a
comprehensive and customizable collection of components, ranging from
buttons and forms to complex data grids and navigation elements.

 With a focus on consistency and responsive design, Material-UI enables

developers to create visually appealing and user-friendly web applications. Its
modular architecture and theming capabilities make it easy to integrate into
various projects, fostering efficient and aesthetically pleasing development
experiences.

 Material-UI's vibrant community actively contributes to its evolution, ensuring

updates, bug fixes, and a growing ecosystem of extensions. The framework's
popularity is evident in its widespread adoption by both beginners and
experienced developers, making it a reliable choice for building modern,
responsive, and visually appealing user interfaces in React-based projects.

 Additionally, Material-UI's documentation is extensive and user-friendly,

offering clear guidance on implementation and customization. The framework
follows best practices in React development, promoting code reusability and
maintainability. The theming system allows developers to easily adapt the
visual style of their applications to align with brand identities or specific
design requirements.

 Material-UI enables developers to create visually appealing and user-friendly

web applications. Its modular architecture and theming capabilities make it
easy to integrate into various projects, fostering efficient and aesthetically
pleasing development experiences.

Advantages of MUI
 Rich Component Library – Offers a wide range of pre-built UI components.
 Customizable Themes – Easily supports theming and custom styles.
 Responsive Design – Built-in responsive layout support.
 Material Design Compliance – Adheres to Google’s Material Design
guidelines.
 Developer-Friendly – Simple API with excellent documentation.
 Integration Ready – Easily integrates with React and other libraries.
 Performance Optimized – Lightweight and fast rendering components.
 Accessibility Support – Follows best practices for accessible UI.
 Active Community – Backed by a large and active open-source community.

41
 CHAPTER -3
DEMONSTRATION OF PROJECT

3.0 E-Commerce Web-site

Definition

The House of EM5 e-commerce website is a comprehensive online retail

platform built using the MERN stack, which includes MongoDB, Express.js,
React.js, and Node.js. This project was aimed at creating a scalable, responsive,
and secure web application where users can browse, search, and purchase
products, while administrators can manage inventory, orders, and users through
a dedicated admin panel.

The frontend, developed using React.js, provides a dynamic and responsive

user interface that delivers a smooth user experience across devices. React
Router is used for client-side navigation, and Redux handles global state
management for components such as the cart, authentication status, and product
listings. The UI is designed using Material-UI (MUI) for a professional, clean
look with responsive design principles.

The backend is powered by Node.js and Express.js, which handle all server-
side logic, including user registration, authentication, and routing. RESTful
APIs are built to interact with the frontend and database, facilitating actions like
user login, product retrieval, order placement, and admin management.

MongoDB serves as the NoSQL database for storing all application data—
users, products, orders, and reviews. It allows flexibility in data modeling and is
connected through Mongoose, which provides schema-based solutions and easy
querying.

Security is enforced using JWT (JSON Web Tokens) for user authentication,
along with bcrypt for password hashing. Role-based access control ensures that
only admins can access sensitive routes. The application includes features like
search and filter, cart and wishlist management, and payment gateway
integration for end-to-end shopping functionality.

In essence, the House of EM5 e-commerce site is a robust, full-stack

application showcasing practical use of the MERN stack to solve real-world
business needs.

42
ADVANTAGES:

 Full-Stack JavaScript Solution

All components of the MERN stack (MongoDB, Express.js, React.js, Node.js)
use JavaScript, which allows developers to write both frontend and backend
code in the same language. This reduces the learning curve, enhances code
reusability, and simplifies collaboration between frontend and backend teams.

 Efficient Frontend Development with React.js

React.js offers a component-based architecture that allows for modular,
reusable UI components. It ensures fast rendering through its virtual DOM and
supports dynamic data handling, which is especially useful for real-time
product filtering, search functionality, and cart updates in e-commerce sites.

 Fast and Scalable Backend with Node.js and Express.js

Node.js, built on the V8 JavaScript engine, ensures high performance for
server-side operations. Paired with Express.js, a minimal and flexible web
application framework, it allows for the creation of fast, scalable RESTful
APIs to handle data transfer, authentication, and routing.

 Flexible and Scalable Database with MongoDB

MongoDB is a NoSQL database that stores data in flexible JSON-like
documents. It supports hierarchical data storage, which fits naturally with
JavaScript-based applications. Its schema-less nature makes it easy to scale
and adapt to new requirements—ideal for product catalogs, user profiles, and
order data in e-commerce applications.

 Real-Time Data Handling

With the full JavaScript stack and libraries like Socket.io, MERN applications
can easily handle real-time events such as live product stock updates,
notifications, and chat support—key features for modern e-commerce
platforms.

 Rapid Development and Prototyping

MERN’s modular architecture allows for quick development. Pre-built
libraries, NPM packages, and integrated development tools speed up
prototyping and deployment. Developers can quickly iterate features such as
cart management, checkout, and product listings.

 Strong Community and Ecosystem

MERN technologies are open-source and backed by large developer
communities. This means better support, abundant tutorials, reusable code
snippets, and frequent updates that keep the stack modern and secure.

43
3.1 Why MERN Stack ?

We chose the MERN Stack—comprising MongoDB, Express.js, React.js, and

Node.js—for developing the House of EM5 e-commerce website due to its
unique combination of flexibility, scalability, performance, and developer
efficiency. This full-stack JavaScript solution allows us to use a single
programming language across both the frontend and backend, significantly
reducing context switching for developers, improving development speed, and
enhancing team collaboration.

On the frontend, React.js offers a powerful component-based architecture that

allows for reusable UI components, efficient virtual DOM rendering, and
dynamic state management using tools like Redux. These features are
especially beneficial in implementing core e-commerce functions such as
dynamic product listings, real-time cart updates, and responsive user
interfaces.

For the backend, Node.js provides an event-driven, non-blocking I/O model

that handles concurrent requests efficiently, making it ideal for high-traffic
applications like online stores. Express.js simplifies routing, middleware
integration, and API development, enabling a clean separation of concerns and
easy maintenance.

MongoDB, as a flexible, schema-less NoSQL database, handles diverse data

types such as user profiles, product inventories, and order histories with ease.
Its JSON-like structure integrates naturally with the rest of the JavaScript
stack, allowing smooth data flow across the system. Moreover, MongoDB's
scalability and compatibility with cloud storage solutions make it suitable for
handling large volumes of data and traffic, which is essential for e-commerce
platforms .

Furthermore, the MERN stack's open-source nature and strong community

support provide access to a vast array of tools and resources, facilitating rapid
development and deployment. This makes it an ideal choice for building
modern, scalable, and efficient e-commerce applications .

44
 Fig 3.1: Data Flow in MERN Stack

Because we are using MERN in all the stack it will help at faster and easier
development of full-stack applications. MERN stack is a technology that is a user-
friendly full.
It significantly reduces boilerplate code and enhances developer productivity with its
auto-configuration capabilities. Its ability to handle scalable microservices
architectures and built-in support for monitoring, configuration, and security make it
an excellent choice for enterprise-grade applications. Its distributed architecture and
commit log mechanism provide durability and reliability, making it ideal for
streaming scenarios where the timely and consistent delivery of messages is critical.

3.2 Authentication
Authentication in a MERN Stack application involves a secure and efficient process
of verifying user identities using technologies like JWT (JSON Web Tokens),
bcrypt, and middleware in Node.js/Express.js. When a user registers or logs in
through the React.js frontend, their credentials are sent via HTTP POST requests to
the backend server built with Node.js and Express.js. The server first validates the
data and uses bcrypt to securely hash passwords before storing them in the
MongoDB database via Mongoose. Upon successful login, the server generates a
JWT, which contains encoded user information and is signed using a secret key. This
token is then sent back to the client and stored—typically in localStorage or

45
httpOnly cookies—to maintain the user's session. For any subsequent requests that
require user authentication (such as viewing orders or adding items to the cart), the
client sends the token in the request header. A middleware function on the server
verifies the token using JWT verification, ensuring that only authenticated users can
access protected routes. Additionally, role-based access control (RBAC) can be
implemented by including user roles in the token payload and verifying them in
middleware before granting access to admin-specific functionalities, such as
managing products or orders. This stateless, token-based system ensures both security
and scalability, making it highly suitable for e-commerce platforms like House of
EM5, where protecting user data and ensuring seamless access is critical

Types Of Authentication

 Password-Based Authentication
Users log in using a unique username/email and password combination. It's the
most common type but less secure if not combined with other methods like
hashing or 2FA.

 Token-Based Authentication (e.g., JWT)

After successful login, the server issues a token (like a JWT) to the client,
which is then used to access protected routes. It’s stateless and ideal for
modern web apps and APIs.

 3. Multi-Factor Authentication (MFA)

Requires users to verify their identity using two or more factors, such as a
password plus an OTP sent to a mobile device, adding an extra layer of
security.

 Biometric Authentication
Uses unique physical traits like fingerprints, facial recognition, or iris scans.
Commonly used in mobile apps and modern security systems.

 Session-Based Authentication
The server creates a session and stores it (often in a cookie) after login. The
session ID is used to authenticate the user during the session duration.

 API Key Authentication

Involves sending a unique API key with requests to authenticate and authorize
access to APIs—commonly used in public APIs and backend services.

46
 Fig 3.2: Types of authentication

Producer
In this project we have used JWT-Token based authentication. Which have following
below steps for its implementation.

 Install Required Packages [Backend (Node + Express)]:

Fig 3.3.1: Required packages

 Backend - Setup and JWT Authentication

.env

Fig 3.3.2: env set-up

47
 User Model – models/User.js

Fig 3.3.3: user-Model

 Generate JWT – utils/generateToken.js

Fig 3.3.4: JWT Generate

 Login Route – routes/auth.js

Fig 3.3.5: Login Route

48
  Auth Middleware – middleware/authMiddleware.js

Fig 3.3.6: Auth Middleware

Advantages of using JWT-Token based Authentication

 Stateless authentication reduces server load and improves scalability.
 Tokens are compact, URL-safe, and easy to transmit.
 JWT works across different platforms and client types.
 Signed tokens ensure data integrity and security.
 Easily integrates with frontend frameworks like React.
 Custom payloads enable role-based access control.
 Token expiry improves security by auto-logging out inactive users.
 Eliminates the need for server-side session storage.
 Tokens can be stored flexibly in localStorage, sessionStorage, or
cookies.
 JWT is widely supported, well-documented, and easy to implement.

49
3.4 Authorization
Authorization in Node.js refers to the process of determining what resources
or actions a user is allowed to access after they have been authenticated.
While authentication confirms a user's identity (e.g., via login), authorization
controls access based on user roles or permissions.
In a typical Node.js application using Express.js, authorization is handled via
middleware functions that check the authenticated user's role or privileges
before allowing access to specific routes.

Key Points of Authorization

 Authorization comes after authentication – ensure the user is
logged in first.
 Use JWT to identify the user and extract their role or ID from the
token.
 Assign roles (e.g., user, admin, seller) to users in the database.
 Use middleware to check if the user has permission to access a
resource.
 Protect sensitive routes by verifying roles or resource ownership.

Code to Implement Authorization Using JWT

 .JWT Middleware – middleware/auth.js

Fig 3.4.1: Authorization using jwt

50
 Role-Based Authorization Middleware – middleware/authorizeRole.js

Fig 3.4.2: Role based Authorization middleware

 Protect and Authorize Route – routes/admin.js

Fig 3.4.3: Protect and Authorize Route

 User Schema with Role – models/User.js

Fig 3.4.3: User Schema

51
3.5 Synchronous Processing

Synchronous processing in JavaScript refers to the execution of code in a step-

by-step, sequential manner, where each statement is executed only after the
previous one completes. Since JavaScript is a single-threaded language, it
follows a strict top-to-bottom execution model in synchronous mode. This
makes it predictable and easy to debug, as you can trace the flow of logic line
by line. However, synchronous processing can become problematic when
dealing with time-consuming tasks like network requests or file reading, as
these operations block the execution of subsequent code. This means the entire
program must wait until the current task finishes, which can lead to slow or
unresponsive applications—especially in a browser environment. While
synchronous processing is suitable for simple, quick tasks, JavaScript often
relies on asynchronous techniques to handle more complex, time-intensive
operations without freezing the main thread or user interface.

Fig 3.5: Synchronous Processing

52
How Synchronous Code Work:
 JavaScript reads and executes code from top to bottom.
 Each line of code waits for the previous line to finish.
 Only one operation runs at a time (single-threaded).
 Blocking tasks halt the execution of all following code.
 Useful for simple and quick operations like calculations or printing.
 No code is skipped or run in parallel.
 It follows a predictable and linear execution model.
 Long-running synchronous code can freeze the UI in browsers.
 The JavaScript call stack processes one function at a time.
 Synchronous code is easier to debug due to clear execution flow.

Advantages of synchronous processing

 Execution flow is simple and easy to understand.
 Code runs in a predictable, top-to-bottom order.
 Easier to write and debug without complex callbacks or promises.
 No race conditions or concurrency issues.
 Ideal for small, quick, and sequential operations.
 Ensures one task finishes completely before the next starts.
 Simplifies logic in scripts that don’t depend on I/O or delays.
 Reduces chances of unexpected behavior due to timing.
 Maintains a clean and structured call stack.
 Good for deterministic tasks where timing isn't critica.

3.6 Asynchronous Processing

Asynchronous processing in JavaScript allows the program to handle time-
consuming operations like API calls, file reading, and timers without blocking
the main thread. Unlike synchronous code, where each line waits for the
previous one to finish, asynchronous code allows the interpreter to continue
executing other tasks while waiting for an operation to complete in the
background. JavaScript achieves this using the event loop, callbacks,
Promises, and async/await syntax. When an asynchronous function is called,
it is sent to the web APIs (in browsers) or Node.js APIs (in server
environments), and JavaScript continues executing the next lines. Once the
async task finishes, its callback or resolved value is placed in the callback
queue and eventually pushed to the call stack when it's empty. This allows the
program to remain responsive and efficient, especially in web applications
where user interaction must remain smooth. For example, fetching data from a
server using fetch() doesn’t stop the browser from rendering or responding.
Asynchronous processing is essential in modern JavaScript development,
enabling non-blocking I/O operations, better performance, and improved
user experience across platforms.

53
 Fig 3.6: Asynchronous Processing
Working of Asynchronous Processing
 JavaScript sends asynchronous tasks to the browser or Node.js APIs.
 It continues executing the next lines without waiting for the task to
finish.
 Long-running tasks (like fetch, setTimeout) run in the background.
 When the task completes, its callback or result is moved to the callback
queue.
 The event loop monitors the call stack and callback queue.
 If the call stack is empty, the event loop pushes the callback to the
stack.
 The callback is then executed, completing the asynchronous operation.
 Promises and async/await simplify writing asynchronous code.
 It avoids blocking the main thread, keeping the app responsive.
 Ideal for I/O tasks like API calls, database queries, and timers.

Advantages of using Asynchronous Processing

 Prevents blocking of the main thread during long-running operations.
 Improves performance by allowing multiple tasks to run concurrently.
 Keeps web applications responsive to user input.
 Ideal for I/O-bound tasks like API requests, file operations, and timers.
 Enables smoother user experiences in dynamic web apps.
 Enhances scalability, especially in server-side applications.
 Frees up system resources while waiting for external operations.
 Works well with modern features like Promises and async/await.
 Reduces latency in multi-tasking environments.
 Supports real-time updates and event-driven programming effectively

54
Summary Table of Async VS Sync

Fig 3.7: Async VS Sync

55
 CHAPTER-4
RESULTS OF THE PROJECT

4.1 E-Commerce Application

The development of the EM5 Perfumes e-commerce website using the
MERN (MongoDB, Express.js, React, Node.js) stack resulted in a highly
responsive, feature-rich, and scalable platform tailored to modern user
expectations. The frontend, built with React, delivers a fast and interactive user
interface for browsing perfumes, filtering products, and managing the
shopping cart seamlessly. The backend, powered by Node.js and Express,
ensures smooth handling of APIs, secure authentication, and efficient data
transactions. MongoDB’s flexible schema structure allowed for scalable and
dynamic product and user management. With the integration of JWT-based
authentication, user login, registration, and admin controls are secure and
role-specific. The website includes key features such as product listings, search
functionality, category filters, user accounts, admin dashboard, order tracking,
and payment gateway integration. Overall, the MERN stack enabled a clean
separation of concerns, high maintainability, and efficient data flow between
components. The EM5 Perfumes online store stands as a complete, production-
ready e-commerce solution with a strong foundation for future scaling and
enhancements.

Landing Page

Fig 4.1: Landing Page

56
Sign-up Page

Fig 4.2: Sign-up Page

Login Page

Fig 4.3: Login Page

4.2 Benefits and Use Cases

 Fast & Responsive UI:React ensures smooth navigation, real-time updates,

and dynamic rendering for a seamless user experience.
 Scalability: MongoDB and Node.js support growing product catalogs and
increasing user traffic efficiently.
 Security: JWT-based authentication and role-based access control protect
sensitive user and admin data.
 RESTful API Integration: Clean and organized API structure for mobile app
or third-party platform integrations.
 SEO-Friendly Structure: Server-side rendering options and clean routing
help with product visibility on search engines.

57
You observed that:
 Application performance improved.
 Code became more maintainable.
 The system remained responsive under high message loads.
It demonstrated how modern MERN Stack tools can dramatically simplify and scale
performance of web Development.

4.3 Challenges and Considerations

 Complex State Management: Handling real-time cart updates, user
authentication states, and product data can become challenging in
React without proper state management (e.g., Redux, Context API).
 API Integration: Ensuring smooth communication between the frontend
(React) and backend (Node.js/Express) APIs required careful handling
of data flow and error handling.
 Authentication & Security: Implementing secure JWT-based
authentication with role-based authorization (admin vs. user) required
careful design to prevent unauthorized access and data breaches.
 Database Optimization: As product data grows, optimizing MongoDB
queries, indexing, and ensuring fast data retrieval from a growing
inventory list can be complex.
 Payment Gateway Integration: Integrating third-party payment systems
(e.g., Stripe or PayPal) securely and handling successful/failed
transactions with proper error management was a challenge.
 Responsive Design: Ensuring the website works seamlessly across all
devices (desktop, tablet, mobile) demanded extra effort in responsive
web design and testing.
 Performance Optimization: Maintaining fast load times and smooth
performance with large images, product catalogs, and user data
required image optimization, lazy loading, and caching strategies.
 Handling Real-time Updates: Implementing real-time order status and
cart changes without compromising the user experience and server
performance was a significant challenge.
 Deployment and Hosting: Managing and deploying the entire stack
(MongoDB, Node.js, React) to cloud services like AWS, Heroku, or
DigitalOcean required proper configuration and debugging.
 SEO Optimization: Ensuring the React frontend is SEO-friendly for
better search engine visibility required server-side rendering (SSR) or
pre-rendering techniques.

58
 CHAPTER 5- CONCLUSION

Completing my training in MERN stack development has provided me with a solid

foundation in building full-stack applications, equipping me with essential tools and
frameworks for developing scalable, responsive, and maintainable web applications.
Through this training, I gained practical experience with MongoDB, Express.js,
React, and Node.js—all of which are pivotal in today’s dynamic web development
environment.

Building on that knowledge, I undertook a hands-on project titled "EM5 Perfumes E-

commerce Website Using MERN Stack", where I applied my technical skills to
develop a robust e-commerce platform. This project gave me the opportunity to dive
deep into the creation of dynamic user interfaces with React, efficient server-side
handling with Node.js and Express, and data management with MongoDB. The
project focused on building a scalable, secure, and performant platform for an online
perfume store, allowing customers to browse products, make purchases, and
manage accounts seamlessly.

The project started with setting up the basic structure, including building the frontend
with React for a dynamic user interface and implementing backend REST APIs using
Express.js for secure user authentication and data handling. I also integrated JWT-
based authentication for secure login and registration, ensuring role-based access
control for both users and admins.

To enhance the user experience, I focused on optimizing the performance of both the
frontend and backend, ensuring smooth interactions even with a growing catalog of
products. The final product not only met the functional requirements but also
provided a responsive and scalable platform for future growth.

Through this journey, I not only deepened my understanding of full-stack

development using the MERN stack but also honed my skills in handling critical tasks
such as API integration, data security, and performance optimization. The project
helped me gain hands-on experience with real-world scenarios, preparing me to
develop production-ready web applications that are both robust and user-friendly.

This project has been a transformative learning experience, blending theoretical

knowledge with practical application. I am now confident in my ability to develop
complex web applications using the MERN stack, ready to tackle challenges in
building scalable and efficient platforms. I look forward to leveraging these skills in
real-world projects and contributing to future innovations in web development.

59
 CHAPTER 6- SUMMARY AND LEARNING

Completing my training in MERN has laid a strong foundation in full-stack

development, equipping me with the essential tools and frameworks required
to build scalable and maintainable applications. Through this training, I gained
hands-on experience with Frontend , RESTful APIs, React-based UI design,
and robust backend development—all of which are critical in today’s
enterprise-grade software engineering.
Building on that knowledge, I undertook a practical and performance-focused
on this project served as an ideal platform to apply and extend my technical
skills in real-world scenarios involving event-driven architecture and high-
throughput data streaming systems.
The project began with the creation of a simple producer-consumer setup
using MERN, integrated within a microservice developed using React and
Node.js. The initial implementation—a synchronous, single-threaded
consumer—highlighted performance limitations when processing large
volumes of messages, making it clear that such a setup was insufficient for
enterprise-scale systems.
To address this, I designed a multi-threaded consumer, incorporating a
dynamic thread pool and configurable queue size, which significantly
improved parallel processing and throughput. However, it still posed
challenges in terms of thread management overhead and system resource
utilization under extreme load conditions.
To achieve optimal efficiency and scalability, I finally implemented
Authentication using JWT Tokens using modern MERN technology and tools.
This innovation brought a dramatic reduction in latency and improved
concurrency without the traditional drawbacks of thread blocking and memory
overhead.

The project started with the creation of a simple UI of the website and a
synchronous single-threaded consumer, developed using React,js and Node.js,
a rapid application development platform. This basic setup helped me
understand the fundamental working of authentication using jwt in backend,
However it is further used to authenticate the validity of the user and provide
additional security.

60
 BIBLIOGRAPHY

1. Mozilla Developer Network (MDN). Express.js Documentation.

Retrieved from https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference

2. MongoDB, Inc. MongoDB Official Documentation. Retrieved from

https://docs.mongodb.com/

3. Node.js Foundation. Node.js Official Documentation. Retrieved

from https://nodejs.org/en/docs/

4. WT.io. JSON Web Tokens - Introduction. Retrieved from

https://jwt.io/introduction/

5. Gillespie, L. (2019). React and Redux: A Hands-On Guide to Modern

Web Development. Packt Publishing.

6. StackOverflow. MERN Stack Development Tips and

Troubleshooting. Retrieved from https://stackoverflow.com/

7. GeeksforGeeks. MERN Stack Tutorials and Project Guides.

Retrieved from https://www.geeksforgeeks.org/mern-stack/

8. FreeCodeCamp. Full-Stack Web Development Curriculum.

Retrieved from https://www.freecodecamp.org/

9. MongoDB Atlas Documentation. Cloud Database Deployment and

Management. Retrieved from https://www.mongodb.com/atlas

10. NPM (Node Package Manager). Express, Mongoose, and JSON

Web Token Packages. Retrieved from https://www.npmjs.com/

61