A

Training Report
On

MERN STACK

Submitted for partial fulfillment of the award of degree of

Bachelor of Technology (B.Tech)
in
Computer Science & Engineering

Submitted By:
Himanshu(1221210)

4CSE - B

Submitted to:
Department of Computer Science & Engineering

Seth Jai Parkash Mukand Lal Institute of Engineering &

Technology (JMIT), Radaur
Affiliated to Kurukshetra University Kurukshetra
Certificate

ii
Declaration

I hereby certify that the work which is being presented in the Training Report entitled, “Mern

Stack” by me, Himanshu (Roll No.1221228) in partial fulfillment of the requirements for the

award of degree of Bachelor of Technology in Computer Science & Engineering at Seth Jai

Parkash Mukand Lal Institute of Engineering & Technology (JMIT), Radaur (Affiliated to

Kurukshetra University Kurukshetra) is an authentic record of my own work carried out under the

supervision of Ms. Kajal.

Signature
Student Name: Himanshu
Roll No: 1221228

iii
Acknowledgement

The writing of this training report has been assisted by the generous help of many people. I feel that I
was very fortunate to receive assistance from them. I wish to express my sincere appreciation to them.

First and foremost, I am indebted to my principal supervisor, Ms. Kajal (Software Developer) of
TecHangouts, Mohali who has been very supportive at every stage of my preparations. I wish to express
my utmost gratitude to him for his invaluable advice and patience in reading, correcting and commenting
on the drafts of the report and, more importantly, for his generosity which I have received throughout my
training program.

I would like to acknowledge and extended my heartfelt gratitude to Dr. Gaurav Sharma, Head of
Department who provided me the golden opportunity to undergo and complete this training program.

I wish to express my thanks to Er. Rajiv Bansal who also helped me in conducting this study and
encouraged me throughout this journey.

Finally, I am particularly indebted to my dearest parents/guardians as without their generous assistance

and love; this dissertation could never have been completed.

Himanshu
Roll No. 1221228

iv
Preface
Objectives of the Training:

This curriculum-based summer training program is providing an understanding about building

GUIs for web-based applications and web services and to learn how to develop computer
applications under Visual Environment, with an emphasis on the correct application of object-
oriented methods. The program also imparts learning for the usage of high-end processes in
problem solving and to get introduced with the current-age industry standards.

The end objectives of the training are to obtain an In-depth knowledge to:

Learn the fundamentals and significance of the MERN stack for full-stack web development.
Build dynamic, responsive user interfaces using React with components, props, and state.
Implement advanced React features like hooks, context, and state management with Redux.
Create and manage RESTful APIs with Express.js and Node.js for backend development. Master
asynchronous programming in Node.js using Promises and async/await. Design, query, and
manage NoSQL databases with MongoDB and Mongoose.
Perform CRUD operations and handle database relationships effectively.
Integrate the front-end and back-end, ensuring seamless data flow via RESTful APIs.
Implement user authentication and authorization using JWT and session management.
Optimize React applications with lazy loading, code splitting, and performance tuning.
Debug and handle errors across the full stack using tools like Chrome DevTools and Postman.
Deploy MERN stack applications on platforms like Render, Vercel, or AWS.
Learn Git and GitHub for version control, branching, and team collaboration.
Build a feature-rich, real-world MERN stack project as a capstone assignment.
Learn how to implement server-side rendering (SSR) and static site generation (SSG) using
Next.js.
Master the use of middleware in Express.js to handle requests, responses, and custom logic.
Understand how to secure web applications by preventing common vulnerabilities like XSS and CSRF.
Explore real-time communication using WebSockets and libraries like Socket.IO.
Gain proficiency in testing MERN stack applications using tools like Jest, Mocha, and Postman.
Follow best practices for organizing and structuring MERN stack projects for scalability.

v
Table of Contents

Certificate of Training ...................................................................................................................... i

Declaration ...................................................................................................................................... ii
Acknowledgement............................................................................................................................. iii
Preface (Objective of the Training)................................................................................................... iv
Table of Contents ............................................................................................................................. v
Profile of the Company & Training Division .................................................................................... vi
Scheduled Chart of Training Activities ............................................................................................. vii
List of Figures… .............................................................................................................................. viii
List of Abbreviations… ................................................................................................................... ix

Chapters:
Chapter 1: Introduction

Chapter 2: Technology Used

Chapter 3: Full Stack Development with Javascript
Chapter 4: MERN Stack
Chapter 5: Future Scope & Limitations
Chapter 6: Project Implementation
Chapter 7: Conclusion
Chapter 8: Bibliography
Chapter 9: Appendix

vi
Company Profile
TecHangouts Pvt. Ltd., headquartered in Mohali, Punjab, is a premier IT services company with over a
decade of experience. The company specializes in delivering customized technology solutions, including
web and mobile app development, software development, e-commerce platforms, and digital marketing.
With a client-centric approach, it caters to a wide array of industries such as healthcare, logistics,
hospitality, real estate, and e-commerce.
Core Services
Web Development: Creating dynamic and responsive websites.

Mobile App Development: Building user-friendly mobile apps across Android and iOS.

Software Development: Developing bespoke software solutions to address specific business

requirements.

E-Commerce Solutions: Designing and developing scalable e-commerce platforms.

Skill Development and Training

The company also prioritizes nurturing talent through its professional training programs. These courses
cover web development, mobile app development, web designing, CMS platforms, digital marketing,
quality assurance, and management. The focus is on equipping trainees with practical knowledge and
industry-relevant skills to excel in the competitive IT landscape.
Leadership and Vision

Sensation Software Solutions is driven by visionary leadership. Ajay Chaudhary(CEO) bring extensive
expertise in IT and technology management. Together, they steer the company toward innovation and
excellence, ensuring the delivery of high-quality services that empower businesses globally.

Global Presence

Beyond its Indian headquarters, Sensation Software Solutions has established a strong international
presence with offices in Canada, Australia, and the USA. This global footprint enables the company to
deliver seamless technology solutions across diverse markets, catering to the unique needs of its
international clientele.

vii
Training Schedule
w.e.f. July 2, 2024

Time Duration Contents

Introduction to MERN Stack and Web Development Basics:
Introductory
The first week introduces the MERN stack (MongoDB, Express, React,
Week
(02-07-2024 to Node.js) and covers web development basics like HTML, CSS, and
05-07-2024) JavaScript. Participants are introduced to React, learning about
components, JSX, props, and state management.

React Basics and Component Design:

WEEK-1 Participants dive deeper into React, exploring hooks (useState,
useEffect) and state management. They learn to design dynamic user
(08-07-2024 to interfaces, work with forms, and navigate between pages using React
Router.
12-07-2024)
Advanced React and Frontend Design:
WEEK-2 This week focuses on advanced React features such as Context
(15-07-2024 to API for state management. Participants learn responsive design using
19-07-2024) Bootstrap/Tailwind CSS and implement user authentication features
like login and signup forms.

WEEK-3 Backend Development with Node.js and Express:

In this week, participants learn backend development with Node.js and
(22-07-2024 to Express. They set up servers, handle routing and middleware, and build
26-07-2024) RESTful APIs. They also connect the backend to MongoDB using
Mongoose for CRUD operations.

WEEK-4 Database Management and Authentication:

Participants focus on MongoDB for database management, learning
(29-07-2024 to to design schemas and perform CRUD operations. They implement
user authentication and secure login using JWT and bcrypt.
02-08-2024)

WEEK-5 Integrating Frontend and Backend:

This week covers integrating React with the Node.js backend using
(05-08-2024 to
Axios or Fetch API for data exchange. Participants also explore real-time
09-08-2024)
communication with Socket.IO and work with file uploads.

WEEK-6 Project Development, Testing, and Deployment: The final week is

dedicated to group projects, where participants build, test, and deploy a
(12-08-2024 to MERN stack application. They handle front-end and back-end
16-08-2024) integration, debugging, and deploy their projects on platforms like
Render or AWS.

viii
List of Figures
Figure Title of the figure

Figure 3.1 Components of a full stack development

Figure 3.2 A Full Stack Development Workflow
Figure 4.1 Illustration of MERN stack logo
Figure 4.2 Example of how to use Component
Figure 4.3 Example of how to use hook
Figure 4.4 Architectural representation of MERN stack
Figure 6.1 Screenshot of MongoDB Compass
Figure 6.2 Folder and file structure of the application
Figure 9.1 Login Page
Figure 9.2 Register Page
Figure 9.3 Home Page
Figure 9.4 Create Post Page
Figure 9.5 Home Screen
Figure 9.6 Your Profile Page

ix
List of Abbreviations

Abbreviation Full Form

MERN Technology stack: MongoDB, NodeJS, Express JS, and React JS
DBMS Database Management System
API Application Programming Interface
UI User Interface
SPA Single Page Application
HTML Hyper Text Markup Language
CSS Cascading Style Sheets
HTTP Hypertext Transfer Protocol
JSON JavaScript Object Notation
JSX JavaScript XML
NPM Node Package Manager

x
lOMoAR cPSD| 26409871

Chapter 1: Introduction

Over the past years, the development of web applications has experienced a notable
transformation because of technological advancements and evolving user demands
(Subramanian 2019, 1). Previously, building web application primarily relied on LAMP stack.
This stack involved utilizing Linux as the operating system for the server, Apache as the web
server, MySQL as the DBMS, and PHP as the server side language. (Serdar 2018; Subramanian
2019, 1; Vassallo & Garg 2016.) As web development progressed, a new approach called SPA
emerged. SPA is a web application concept that eliminates the need to retrieve web page
contents from the server to display new content. This innovation offered a smoother and more
efficient browsing experience. In the early days, MEAN stack was changed to MERN since the
popularity of front-end technology created by Facebook was gaining popularity and thus,
replaced the “A” in MEAN with “R” which refers to React.
MERN stack provides simple and fast development for developing web applications. It helps
in building and maintaining powerful and scalable web applications. MERN stack is one of the
most famous choices for developing a complete and complex web application project because
it allows creating a seamless and consistent user experience throughout the entire application.
This report will study about MERN stack, its components and how these components are used
to make a web application. The main aim of this report is to introduce all the theoretical
concepts of MERN stack, discuss why it is crucial for creation of modern web applications,
and present a simple blog application.

1
lOMoAR cPSD| 26409871

Chapter 2: Technology Used

In MERN STACK we use different technologies to build projects, there are various
technology’s which is supported by MERN, these technologies include the following:

1.1 HTML:

HTML is a fundamental and foundational technology used for creating and structuring content
on the World Wide Web. It serves as the standard markup language for designing web pages
and displaying various types of content, such as text, images, links, forms, and multimedia.

1. Markup Language: HTML is a markup language, which means it consists of a set of markup
tags that are used to describe the structure and content of a web page. These tags are enclosed
in angle brackets (< >) and come in pairs, typically with an opening tag and a closing tag, like
this: <tagname>content</tagname>.
2. Hierarchical Structure: HTML documents are structured hierarchically. They typically start
with an <!DOCTYPE> declaration, followed by the <html> element, which contains the
entire document. Within the <html> element, you'll find two main sections: <head> and
<body>. The <head> section contains meta-information about the page, such as its title,
character encoding, and links to external resources like stylesheets and scripts. The <body>
section contains the visible content of the web page.
3. Elements: HTML is made up of various elements, each serving a specific purpose.
Common HTML elements include:
• <p>: Paragraphs of text.
• <h1>, <h2>, <h3>, etc.: Headings with different levels of importance.
• <a>: Hyperlinks, which allow you to navigate to other web pages or resources.
• <img>: Images.
• <ul> and <ol>: Unordered and ordered lists, respectively.
• <li>: List items.
• <div>: A generic container for grouping and styling content.
• <form>: Used to create input forms for user interaction. <input>, <textarea>,
<button>: Form input elements.

4. Attributes: HTML elements can have attributes that provide additional information about the
element. For example, the <a> element can have an href attribute that specifies the destination
URL for the hyperlink.
5. Semantic HTML: In modern web development, there's an emphasis on using semantic
HTML, which means choosing HTML elements that best represent the meaning and structure
of your content. Semantic HTML improves accessibility and search engine optimization
(SEO).

2
lOMoAR cPSD| 26409871

Important tags used in HTML:

1. <html>: The root element that encapsulates the entire HTML document.
2. <head>: Contains metadata about the document, including the title, character encoding, and
links to external resources like stylesheets and scripts.
3. <title>: Sets the title of the web page, which appears in the browser's title bar or tab.
4. <meta>: Provides metadata about the document, such as character encoding and authorship
information.
5. <link>: Links to external resources like stylesheets (CSS) for controlling the page's visual
presentation.
6. <script>: Includes JavaScript code within the HTML document for enhancing interactivity.
7. <style>: Contains embedded CSS (Cascading Style Sheets) for styling the content of the web
page.
8. <body>: Contains the visible content of the web page, including text, images, links, and other
elements.
9. <h1>, <h2>, <h3>, ... <h6>: Headings of various levels, with <h1> being the highest
importance and <h6> the lowest. These are used to structure content hierarchically.
10. <p>: Defines a paragraph of text.
11. <a>: Creates hyperlinks, allowing users to navigate to other web pages or resources.
12. <img>: Embeds images on the web page.
13. <ul> and <ol>: Create unordered (bulleted) and ordered (numbered) lists, respectively.
14. <li>: Represents list items within <ul> or <ol> lists.
15. <table>: Defines a table for organizing data into rows and columns.
16. <tr>: Represents a table row within a <table>.
17. <td>: Defines a table cell within a <tr> for holding data.
18. <th>: Defines a table header cell, typically used in the first row of a table to label columns.
19. <div>: A versatile container for grouping and styling content or creating layout structures.
20. <form>: Creates input forms for user interaction, often used for data submission.
21. <input>, <textarea>, <button>: Form input elements for text input, buttons, and other
interactive components.
22. <label>: Provides labels for form elements to improve accessibility.
23. <select>: Creates a dropdown menu for selecting options within a form.

1.2 CSS:

1.2.1 Introduction To CSS:

CSS (Cascading Style Sheets) is a styling language used in web development to describe
how web documents (HTML and XML) should be presented on the screen, in print, or in
other media. It's an essential technology for controlling the layout, design, and appearance of
web content. Here's an introduction to CSS and its history:

1.2.2 What is CSS:

3
lOMoAR cPSD| 26409871

Cascading Style Sheets (CSS) is a stylesheet language used to define the

presentation and layout of web pages. It separates the structure (HTML) from the
style (CSS) of a web page, allowing web developers to control how content is
displayed.
1.2.3 Purpose of CSS:

• Styling: CSS is primarily used for styling web pages. It controls elements' colors, fonts,
spacing, borders, backgrounds, and more.
• Layout: CSS enables developers to control the positioning and arrangement of elements on
a web page, creating responsive and visually appealing layouts.
1.2.4 How CSS Works:

• CSS rules consist of selectors and declarations. A selector targets HTML elements, and
declarations define the styles to apply to those elements.
• For example, this CSS rule changes the color of all <h1> elements to blue:
h1
{color: blue; }

External Stylesheets:
• CSS can be placed in an external .css file and linked to HTML documents. This promotes
reusability and consistency in styling across multiple web pages.
Cascading Order:
• CSS follows a cascading order, meaning that multiple CSS rules can apply to an element.
Conflicts are resolved based on specificity and the order of rules.
Responsive Web Design:
• CSS plays a critical role in responsive web design. Media queries in CSS allow developers to
create layouts that adapt to various screen sizes and devices.
Preprocessors:
• Developers often use CSS preprocessors like Sass and Less to write more maintainable and
efficient CSS code. These preprocessors offer features like variables, nesting, and functions.
CSS is a powerful styling language that has evolved over the years to meet the changing needs
of web development. It empowers web designers and developers to create visually appealing,
responsive, and user-friendly web experiences by separating content from presentation.

1. ID Selector (#id): Selects a single element with a specific id attribute. For example, #header
selects the element with id="header".
2. Descendant Selector (ancestor descendant): Selects elements that are descendants of a
specified ancestor element. For example, ul li selects all <li> elements inside a <ul>.
3. Child Selector (parent > child): Selects elements that are direct children of a specified parent
element. For example, ul > li selects all <li> elements that are direct children of a <ul>.
4. Adjacent Sibling Selector (element + element): Selects an element that is immediately
preceded by a specified sibling element. For example, h2 + p selects the <p> element
immediately following an <h2>.

4
lOMoAR cPSD| 26409871

5. General Sibling Selector (element ~ element): Selects all elements that are siblings
of a specified element and share the same parent. For example, h2 ~ p selects all <p>
elements that are siblings of an <h2>.
6. Attribute Selector ([attribute=value]): Selects elements with a specific attribute and
attribute value. For example, [type="submit"] selects all elements with type="submit".
7. Pseudo-Class Selector (:pseudo-class): Selects elements based on their state or position.
Common pseudo-classes include :hover (for hover effects), :active (for active links), and
:nth-child() (for selecting elements by their position in a parent).
8. Pseudo-Element Selector (::pseudo-element): Selects and styles parts of an
element's content, such as the first line or the first letter. Common pseudo-elements
include ::first-line and ::before.

1.3 JavaScript: JavaScript is a versatile and widely-used programming language

primarily known for its role
in web development. It enables developers to add interactivity, manipulate web page
content,
and create dynamic web applications.

1.3.1 Introduction to JavaScript: 1. Purpose and Significance:

JavaScript
build web was created to make web pages interactive. It allows developers to
applications that respond to user actions, update content dynamically, and provide
a richer
and more engaging user experience.
2. Client-Side Scripting:
JavaScript is a client-side scripting language, meaning it runs in the user's web browser. This
allows it to manipulate the Document Object Model (DOM) of a web page and respond to
user interactions without requiring server-side processing.

3. Key Features:
• High-Level Language: JavaScript is a high-level, interpreted language, making it accessible
to both beginners and experienced developers.
• Dynamic Typing: JavaScript uses dynamic typing, meaning variables can change types
during runtime.
• Object-Oriented: It supports object-oriented programming (OOP) concepts, allowing
developers to create reusable and organized code.
• Event-Driven: JavaScript is event-driven, responding to user-generated events like clicks and
keyboard input.

4. Common Uses:
• Web Development: JavaScript is a core technology for front-end web development, used to
create interactive web pages, validate forms, handle user input, and communicate with web
servers (Ajax).
• Web Applications: JavaScript is the foundation for building web applications, including
single-page applications (SPAs) that provide a seamless and responsive user experience.

5
lOMoAR cPSD| 26409871

• Mobile App Development: JavaScript is used in conjunction with frameworks like React
Native and Ionic to develop cross-platform mobile applications.
• Game Development: JavaScript can be used to create browser-based games and interactive
animations.
• Server-Side Development: With technologies like Node.js, JavaScript can also be used for
server-side development, enabling full-stack development using a single language.
5. Libraries and Frameworks:
• JavaScript has a rich ecosystem of libraries and frameworks that simplify various
development tasks. Notable examples include jQuery for DOM manipulation, React
and Angular for building user interfaces, and Express.js for building web servers with
Node.js.
6. Compatibility:
• JavaScript is supported by all major web browsers, making it a reliable choice for web
development. Modern JavaScript features are supported in contemporary browsers, but
developers often use transpilers like Babel to ensure compatibility with older browsers.

7. Evolution:
• JavaScript continues to evolve with regular updates to the language (ECMAScript standards).
ES6 (ECMAScript 2015) introduced significant enhancements, and new features continue to
be added in subsequent versions.

1.4 React.JS: React.js commonly referred to as React, is an open-source JavaScript

library developed by
Facebook for building user interfaces. React is widely used for creating interactive
and
dynamic web applications with a focus on component-based development.

1.4.1 Introduction to React.js:

1. Component-Based Development:
• React is centered around the concept of components. A component is a selfcontained, reusable
piece of the user interface.
• Components can be as simple as a button or as complex as an entire page, and they can be
composed together to build entire applications.

2. Declarative UI:
• React uses a declarative approach to UI development. Instead of manually
manipulating the DOM to reflect changes in your application's state, you declare how
your UI should look at any given time. React takes care of efficiently updating the
• DOM to match the desired state.

3. Virtual DOM (Document Object Model):

• One of React.js key optimizations is its Virtual DOM. React creates a virtual representation
of the actual DOM in memory.

6
lOMoAR cPSD| 26409871

•When changes occur, React.js compares the virtual DOM to the real DOM and calculates
the most efficient way to update the real DOM. This minimizes unnecessary updates,
making React applications faster.
4. JSX (JavaScript XML):
• JSX is an extension of JavaScript that allows you to write HTML-like code directly within
your JavaScript files.
• JSX simplifies the creation of React components by providing a familiar syntax for defining
the structure of your UI.

5. Unidirectional Data Flow:

• React enforces a unidirectional data flow. Data flows from parent components down to child
components through a defined hierarchy.
• This one-way data flow helps in maintaining predictable and easily debuggable applications.

6. Reusable Components:
• React encourages the creation of reusable components that can be shared and composed to
build complex UIs.
• Component reusability enhances code maintainability and consistency.
7. Virtualization and Pagination:
• React can efficiently handle large lists of data by rendering only the visible items on the
screen. This virtualization improves performance.
• Pagination and infinite scrolling can be easily implemented using React to load and display
data in chunks.

8. Rich Ecosystem:
• React has a vast ecosystem of libraries and tools that enhance its capabilities. This includes
React Router for routing, Redux for state management, Axios for HTTP requests, and more.
• The React community actively contributes to this ecosystem, ensuring a wealth of resources
and support.

9. Server-Side Rendering (SSR):

• React can be used for server-side rendering (SSR), which enhances initial page load
performance, facilitates SEO, and improves perceived load times.
10. Cross-Platform Development:
• React Native, an extension of React, allows you to build native mobile applications for iOS
and Android using the same component-based approach.

1.5 Node.JS:

Node.js is an opensource, server-side JavaScript runtime environment that allows developers

to execute JavaScript code on the server. It has gained significant popularity for its ability to
build scalable and high-performance network applications. Here's an introduction and history
of Node.js:
1.5.1 Introduction to Node.js:
• Node.js was created by Ryan Dahl and was first released in 2009. It is built on the V8 JavaScript
engine, which is developed by Google and used in the Chrome web browser.

7
lOMoAR cPSD| 26409871

Unlike traditional server-side languages like PHP or Python, Node.js is eventdriven and non-
blocking. This means it can handle many concurrent connections efficiently, making it suitable
for real-time applications and I/Ointensive tasks.
Node.js uses a single-threaded event loop and asynchronous programming to achieve high
concurrency, which is well-suited for building scalable and responsive web applications.
1.5.2 History of Node.js:
Initial Release (2009): Ryan Dahl released the initial version of Node.js in May 2009. It
provided a runtime environment for executing JavaScript on the server.
npm (2010): In 2010, Isaac Schlueter created npm (Node Package Manager), which is
now the default package manager for Node.js. It allows developers to easily manage and
share packages and libraries.
Widespread Adoption (2010-2012): Node.js quickly gained popularity among developers
and was used by companies like LinkedIn and Walmart for building high-performance
web applications.
Node.js Foundation (2015): To foster its development and growth, the Node.js
Foundation was established in 2015. It brought together various stakeholders to
collaborate on the project's governance and direction.
Node.js 4.0 (2015): Node.js 4.0 was a significant release that introduced the io.js fork
back into the main Node.js codebase. This marked a period of unification within the
Node.js community.
Long-Term Support (LTS) Versions (2015-present): Node.js introduced LTS versions,
ensuring stability and support for an extended period. LTS versions are typically
supported for 30 months or more.
Growth and Ecosystem (Ongoing): Node.js has continued to grow and evolve, with an
active and expanding ecosystem of modules and libraries. It is used for a wide range of
applications, from web servers and APIs to IoT devices and microservices.

Node.js has become a fundamental technology in modern web development, enabling

developers to build fast, scalable, and real-time applications. Its eventdriven, non- blocking
architecture and vibrant community make it a compelling choice for building server-side
applications and services.

1.6 MongoDB:
MongoDB is a popular open-source NoSQL database management system known for its
flexibility,scalability, and ability to handle unstructured or semi-structured data. It is often used in
modern web and mobile application development. MongoDB's journey from a small
open-source project to a global NoSQL database platform used by countless organizations
reflects its commitment to innovation and its responsiveness to the evolving needs of
developers and businesses. Today, MongoDB remains a popular choice for modern
application development, known for its scalability, flexibility, and ease of use.
8
lOMoAR cPSD| 26409871

1.6.1 Introduction to MongoDB:

MongoDB is a document-oriented database that falls under the category of NoSQLdatabases.

It stores data in a flexible, JSON-like format known as BSON (Binary JSON).
Unlike traditional relational databases, MongoDB does not require a fixed schema, making it
well-suited for applications with evolving or unpredictable data structures.
MongoDB supports a wide range of query capabilities, indexing options, and features for data
manipulation and aggregation.
It is designed to be highly scalable and can distribute data across multiple servers, making it
suitable for handling large-scale applications.
1.7 Express.JS:

Express.js, often referred to as Express, is a fast, minimalist, and flexible web application
framework for Node.js. It provides a robust set of features for building web and mobile
applications, as well as APIs (Application Programming Interfaces). Express.js is widely used
in modern web development due to its simplicity and versatility.
1.7.1 Introduction to Express.JS

1. Minimalistic: Express is designed to be minimal and unopinionated. It offers fundamental

building blocks for web applications without imposing rigid patterns or structures, allowing
developers the freedom to design their applications as needed.
2. Middleware: Express revolves around the concept of middleware functions. Middleware
functions are used to perform various tasks during the requestresponse cycle, such as logging,
authentication, data parsing, and routing.
3. Routing: Express simplifies the process of defining routes for handling HTTP requests,
including GET, POST, PUT, DELETE, and more. Each route can have one or more associated
route handlers, which are functions that execute when a specific route is matched.
4. Template Engines: While express itself does not include a template engine, it seamlessly
integrates with various template engines like Pug (formerly Jade), EJS, and Handlebars. This
allows developers to render dynamic views and templates.
5. Static File Serving: Express can serve static files like HTML, CSS, JavaScript, images, and
more. This is particularly useful for serving client-side assets of web applications.
6. Error Handling: Express provides built-in error handling mechanisms, allowing developers
to define error-handling middleware for graceful error handling and logging.
7. RESTful APIs: Express is commonly used to build RESTful APIs. It simplifies the creation
of API endpoints for client-server communication.
8. Middleware Ecosystem: Express has a vast ecosystem of third-party middleware modules,
making it easy to extend its functionality with features like authentication, session
management, and database integration.

9
lOMoAR cPSD| 26409871

Chapter 3: Full Stack Web Development with Javascript

Full stack web development involves the client-side and server-side, where client-
side is the frontend of the application and server-side is the backend (Vassallo & Garg
2016). This includes everything from database management and server-side scripting
to APIs and other server-side technologies. The front end of a web application is
everything that user interacts with. This normally includes designing and
implementing the layouts of the application using HTML for defining structure, CSS
for styling, and JavaScript for adding dynamic behaviour to the application. On the
other hand, back end of a web application is responsible for handling all the server-
side logics and functionalities. (Sharma 2022, chapter “Full-Stack Development
Using MongoDB”.)

Figure 3.1: Components of a full stack development

Figure 3.2: A Full Stack Development Workflow

10
lOMoAR cPSD| 26409871

JavaScript, originally created at Netscape, is used for manipulating web pages with the help of
API known as the DOM or Document Object Model. DOM is essentially a tree structure of
JavaScript objects that is made available through a global object called “window”. This tree
structure represents the HTML structure of the web page, starting with “window.document” for
the html tag. Manipulating of pages can be performed by modifying this tree structure such as
adding a new node as a child of an existing one to create new content. In the early days of the
web, Microsoft introduced Jscript which had additional features including XHR which allowed
developers to refresh web pages by making requests to external servers.
Then, a new standard called ECMAScript was released that introduced several features such as
modules, arrow functions, let and const, default, classes, rest, and spread to functions
parameters. ECMAScript is also known as ES6. (Haviv 2016, 4 .) JavaScript is a lightweight,
interpreted, and scripting language which was only used and run by browsers to interact with
the User Interface of a website. However, with the introduction of Node JS by V8 engine,
JavaScript can also be used to run on a server with a new standard library to support server-
side requirements. This means that developers can write JavaScript code that runs on the client
side and on the server-side.
Client-side JavaScript includes the frontend side of a web application, such as validating user
input, manipulating UI, and handling user interactions. On the other hand, serverside JavaScript
can help to connect and modify database with server-side code. Moreover, by having this ability
to use JavaScript on both the client and server side, developers can build full stack web
applications more efficiently and seamlessly. (Northwood 2018, 159-160.) 4 JavaScript is an
incredibly versatile and flexible language, and it has become a fundamental component of
modern web development. It enhances interactivity of websites by enabling various
functionalities. JavaScript plays a key role in building dynamic and responsive web
applications. (MDN Web Docs 1998-2023 "What is JavaScript".) All the four technologies of
MERN are JavaScript-based (Hoque 2020, 13). JavaScript is used for both client-side and
server-side code. So, it is crucial to know and be familiar with JavaScript to start learning about
MERN stack.

11
lOMoAR cPSD| 26409871

Chapter 4: MERN Stack

MERN stack comprises of various technologies that are used to develop modern web
applications. It is a full-stack JavaScript framework for building effective and dynamic
applications. MERN combines four cutting-edge technologies from the front-end to the
back- end development. Node and Express bind the web backend together, MongoDB
serves as the database, and react makes the frontend that user views or interacts with.
(Hoque 2020, 13.) Figure 3 below shows the logos of each technology used in MERN
stack.

Figure 4.1. Illustration of MERN stack logo

4.1 MongoDB:
The first technology in MERN stack is Mongo DB. It is a document-oriented database that is
typically classified as part of NoSQL database category. It is a popular choice as a database
because it lowers complexity compared to a relational database.
A document-based database means that it stores data in JSON-line document (Hoque 2020, 15)
. Since Mongo DB is a document-oriented database, document is the unit of storage in it where
many documents are stored in collections. There is presence of a unique identifier in every
document in a collection used in the process of accessing data. Mongo DB helps developers to
avoid translation layers, ORM, which means to map or convert object to relational tables.
Mongo DB documents are like JSON objects which makes it easier to think of them as
JavaScript objects.
As Mongo DB is schema-less, there is no problem in database while adding fields or columns
in the application code (Serdar 2018). Also, Mongo DB is based on JavaScript. The query
language in Mongo 6 DB is based on JSON, a lightweight data interchange format. In Mongo
DB, programmers can perform specific operations such as create, search, delete documents by
specifying operations in a JSON object. In MongoDB, data is not only stored in JSON format
but also interchanged in the same format. This makes MongoDB popular choice for modern
web applications that uses JavaScript-based technologies. With the use of JSON in MongoDB,
storing, retrieving, and manipulating data in a document-based database management system
becomes efficient.

12
lOMoAR cPSD| 26409871

4.2 Express:
The second technology used in MERN stack is Express. It is a server-side framework built in
Node JS which allow to easily create a web server. It allows to handle API routing on the server
side and HTTP methods such as GET, POST, and PUT
Routing in Express means the process of determining application response in finding out an
endpoint requested by a user. The Express parses the URL, headers, and parameters for
developers which generates functionality required by web applications as a response.
Moreover, programmers can also write middleware code in Express JS which is mainly used
for general functionalities such as logging in and authentications. Data storage system is needed
for any web application. Express provides flexibility to choose any database option such as
MongoDB. Also, template engines such as EJS are built in Express that helps to add dynamic
data to the HTML and display the HTML page.
To summarize, Express is a web server framework designed for use with Node JS. It is like
many other web server frameworks in terms of the functionalities it provides. With Express,
you can create web servers that handle HTTP requests and responses, as well as implement
various features such as routing, middleware, and templating.

4.3 React:
The third MERN stack technology is React. It defines all the components of the MERN stack.
It is a declarative and component-based JavaScript library that makes easy to create and
maintain complex user interfaces. React helps to build user interfaces using components. All
these components are put together to make a main component which displays the complete
view of a web page. The major reason behind building multiple components for a web
application is that it makes writing code 7 easier and helps developers focus on one part of
the application at a time.
4.3.1 Component:

React is based on components, which are the basic building blocks for creating UI. Building
components is the primary task in React, and they can be combined to create larger components
that represent entire pages or views. Components in a React application communicate with
each other by sharing state information through read-only properties to child components and
by callbacks to parent components. Overall, the concept of breaking an application into smaller
components is to have logic separately and to write and understand the application in an easy
way.

Figure 4.2: Example of how to use Component

13
lOMoAR cPSD| 26409871

4.3.2 JSX:
While JSX looks like HTML, there are some differences. React components return JSX, which
is ultimately compiled into JavaScript. The returned JSX is typically handled by Babel.
There are several rules to follow while writing JSX syntax. To return multiple elements or
components, it should be wrapped within a single parent tag. For example, using empty tag
also known as Fragment to wrap. Second, all the tags in JSX must be explicitly closed. As an
instance, image tag must be <img/>. And finally, when writing React components using JSX,
“camelCase” for attribute names are used. This 8 means that instead of using hyphens to
separate words in attribute names, capital letters are used to denote the beginning of a new word
4.3.3 Props:
In the world of React, components rely on props as a means of communication between each
other. Props is used to pass data to components. A parent component can pass data and
information down to its child components by provided those data with props. Props may bear
some resemblance to HTML attributes, but the difference is that they can accommodate any
JavaScript value from simple data tyles to more complex objects, arrays, and functions. Passing
down the props is achieved by using curly brackets. Overall, the use of props in React promotes
code reusability, making it effective for developing scalable and maintainable web applications.
4.3.4 React Hooks:

React provides built-in Hooks that start with the word use. For instance, “useState”
which states a variable that can be updated directly. Some other examples of react
hooks are “useEffect”, “useContext”, “useRef”, and “useMemo”. Below is an
example of how “useState” hook is used in a React application.

Figure 4.3: Example of how to use hook

4.3.5 React Router:

React is primarily focused on the presentation of a web application and handling interactions
within a single component. However, when it comes to managing transitions between different
views of a component and keeping the browser URL in sync with the current state of the view,

14
lOMoAR cPSD| 26409871

additional functionality is needed. This is where routing comes into play. React-Router
provides this functionality and manages navigation in a React application allowing for
seamless transition between different views without having to load the entire page
from the server. React- Router is an easy-to-use library that simplifies the process of
navigation.
4.4 Node:
Finally, the Node JS is the last technology used in MERN stack. Node JS is a JavaScript
run- time that allows to execute JavaScript code outside of a browser. It is based on
Google’s V8 JavaScript engine which is the same engine that runs in the Chrome web
browser. Modules in Node JS are like libraries. Developers can use the “require”
keyword for including the functionality of another JavaScript file. Thus, splitting code
into various modules can be achieved for better code maintenance. The default
package manager for Node JS is NPM which is used to install packages and
dependencies. 10 Node’s methodology enables it to manage a higher number of
connections using less memory compared to various competing architectures such as
Apache, Ruby on Rails, and Java. So, it has gained popularity for developing web
servers, REST APIs and real-time applications
4.5 Architectural Structure of MERN Stack:

Figure 4.4. Architectural representation of MERN Stack

The 3-tier diagram above depicts the architectural structure of MERN stack. To elaborate more
about what picture shows, first tier includes React JS used for client-side, Express and Node as
server-side and Mongo DB for database.

15
lOMoAR cPSD| 26409871

Chapter 5: Future Scope And Limitations

5.1 Future Scope of MERN Stack

1. High Demand for Full-Stack Development: With businesses increasingly seeking
end-to-end solutions, MERN stack developers are in high demand due to their ability
to handle both front-end and back-end development seamlessly.
2. Scalability and Flexibility: The MERN stack’s modular design allows developers to
build scalable applications, making it suitable for startups and enterprises aiming for
rapid growth.
3. Cloud-Native Applications: With growing adoption of cloud computing, MERN
stack’s compatibility with platforms like AWS, Azure, and Google Cloud enhances its
potential for developing cloud-native applications.

4. Integration with Emerging Technologies: MERN stack can be integrated with AI/ML
tools, IoT platforms, and blockchain technologies, expanding its applications in
innovative domains.
5. Community and Ecosystem Growth: The active and expanding community around
JavaScript ensures continuous improvements, updated libraries, and tools, keeping the
MERN stack relevant for future developments.

5.2 Limitations of MERN Stack

1. Learning Curve: For beginners, mastering the entire stack (MongoDB, Express, React,
and Node.js) can be challenging due to its vast scope.
2. Performance for Heavy Computations: Node.js, being single-threaded, may face
challenges in handling CPU-intensive tasks compared to multi-threaded frameworks
like Django or Spring.
3. Scalability Issues in Large Teams: Managing large-scale applications with multiple
developers can lead to complexities in code maintenance and integration.
4. Frequent Updates: The rapid evolution of JavaScript libraries (like React) can lead to
compatibility issues, requiring constant updates and learning.
5. Database Limitations: MongoDB, being a NoSQL database, is not always the best
choice for applications requiring complex relational data or strict transactional
consistency.

16
lOMoAR cPSD| 26409871

Chapter 6: Project Implementation

The purpose of this thesis was to develop and analyse a MERN stack application that serves as
a blog platform. The primary goal was to create a user-friendly and interactive web application
where users can register, sign in, and logout. Once logged in, users can browse through a
collection of posts made by various users. Each post can be clicked on to view its complete
content, but editing capabilities are limited to the original author of the post. Non- authors can
only view the posts, whereas authors can edit their own posts by clicking on the edit button,
making some changes to the original post, and clicking on the update button at the bottom of
the page. The application also allows users to create new posts, enabling them to express
their thoughts and ideas. To enhance the text editing experience, the project incorporates the
use of React Quill, an in-built user-friendly interface that enables users to edit the text using
various formatting options such as bold, italic, underline, bullet points, numbering, and more.
The users can also upload pictures as the content of their posts. Finally, users could logout
from the application. Throughout the development and analysis of this MERN blog application,
various aspects such as user experience, authentication, and frontend-backend integration
will be explored and evaluated.
6.1 Setting up the Development Environment:
Setting up an appropriate development environment is crucial when working on a project.
Selecting the right tools and environment significantly impacts the efficiency and
productivity of the development process of the project. For this project, Visual Studio Code
was used as a code editor that offers several features and boosts productivity and code
maintenance. Visual Studio Code is a cost-free coding editor that facilitates convenient and
efficient way to begin. It allows coding in multiple programming languages, eliminating the
need to switch between different editors. It also offers extensive language support
including Python, Java, C++, JavaScript, and various others. (Microsoft 2023). In addition,
there were various third-party tools and packages that was used for the development
process. These tools provided additional functionalities and made the development tasks
easier. These tools and packages are described below in the installation and configurations
section.
6.1.1 Installation and Configurations:
In this section, installation and configuration of different packages and tools are carried out.
NPM was used in this project to install different packages and manage their dependencies.
NPM is a powerful package manager and the world’s largest software registry for JavaScript.
There are three key components in NPM: the website, CLI, and the registry. The website
serves as a platform for developers to discover packages and manage public and private
packages. The CLI is the primary interface for developers to interact with npm. And the
registry is a vast database the houses a wide range of JavaScript. Developers use registry to
access and incorporate existing packages into their applications or use them to suit their
specific needs. (NPM 2023.) The installation of Node.js, Express.js, React.js, MongoDB,
Mongoose, Nodemon, Bcrypt.js, and Multer are described below.
To provide the runtime environment for executing server-side JavaScript code for this project,
Node.js version 16.19.0 was installed from the official website of Node.js. After installing

17
lOMoAR cPSD| 26409871

Node.js, the next step was to initialize the project using the command “npm init” in the project’s
root directory. This then creates a “package.json” file which allows developers to define other
dependencies for various tasks such as building and running the application.

After installing the Node.js, the next step was to install Express.js for adding server-side logic
in the application. The version of Express used in the application was 4.18.2. To include
Express.js into the project, “npm install express” command was run in the project’s root
directory.
Then, next step was to install React.js for building the frontend of the blog application. The
version of the React.js used at the time of developing application is 18.2.0. Before, “npx create-
react-app” command was used to create a react app. With this method, the development
experience was slow and less efficient. So, for this project, “npm create vite@latest” was used.
Vite is a powerful development tool that makes development experience fast for modern web
projects. (Vite n.d.) Additionally, React.js packages such as react router dom, react quill, and
react icons were used for extra functionalities. React router dom was used for routing within
the application. It provides components such as , , , , and more that are required for defining
routes and rendering components. React quill was used as a text editor component and react
icons was used for adding icons in the application.
Then, MongoDB was installed. There is flexibility to choose between installing MongoDB
locally on computer or using cloud-based service MongoDB atlas. For this project, MongoDB
Compass was used. After creating an account, a new cluster was created, and all the necessary
settings were filled. Finally, a connection string was obtained which could be used to connect
to the database from the application. The connection string contains the necessary information
such as username and passwords to establish a connection to MongoDB Atlas cluster. The
created cluster for this application can be seen in figure below.

Figure 6.1: Screenshot of MongoDB Compass

18
lOMoAR cPSD| 26409871

After that, to install Mongoose, command “npm install mongoose” was run in the backend
project directory. The version of mongoose used in this project was 6.10.1. Mongoose was used
to interact with MongoDB database by connecting with the connection string discussed before.
The required models and schemas for the project were created and defined using mongoose that
will be described in 4.2.2.

Nodemon is a tool that is used for automatically restarting server during development. To
install nodemon, “npm install nodemon” command was run in the project’s folder. After
installing, scripts in the package.json was modified for running the server using “nodemon”. Bcrypt
JS is a JavaScript library used for hashing passwords and passwords comparison which
is a crucial aspect of a secure authentication system. It can be installed using the command
“npm install bcryptjs”. In this project, the version of Bcrypt JS installed was 5.1.0.
Multer is a middleware used for uploading files. To install it, “npm install –save multer”
command was run. The version used at the time of development was 1.4.5-lts.1.
After successfully installing all the required tools and packages, the development process was
carried out. The final files and folder structure can be seen in the image below.

Figure 6.2: Folder and file structure of the application

19
lOMoAR cPSD| 26409871

Figure 6.2 above shows the screenshot of the structure of the application. There are two main
folders: backend and frontend. The backend folder contains all the server-side code that are
responsible for handling requests, connecting, and interacting with MongoDB and the frontend
folder contains all the clientside logic responsible for rendering user interface. The models
folder will be described in the 4.2.2 section, routes in 4.2.1. The uploads folder contains all the
files that have been uploaded by users. The “app.jsx” file serves as the main entry point for the
frontend of the application where all the components and pages are imported and setting up
routing using React Router is carried out. The “UserContext.jsx” is responsible for creating and
providing context to the components in the application. Then, app.css is a stylesheet file that
contains styles of the application. And finally, “main.jsx” file initializes React application and
renders “app.jsx” file.
6.2 Backend Development:
The backend development is started with making a simple hello world app as in code below.

Code: Importing express module

First, express.js module was imported and assigned to a variable “express”. Then, the other line
of code creates an instance of the express application by calling express function. The app in
the code normally allows to define routes and handle requests.

Code : A simple hello world example

In the above code, a route was defined for the root URL (“/”). When a client makes an HTTP
get request, the function will be executed and the method “res.send()” sends a response back
to the client as a string hello. Then, app.listen() starts the server on the specific port and console
logs a message stating that the server has started on that port. After this, MongoDB is connected
using Mongoose.
Mongoose module is imported that allows to work with MongoDB in Node.js application.
Then, the second line of code establishes a connection to the MongoDB database using the
connect() method. The argument to connect() method represents the URL of MongoDB server.
The connection string has been hidden from the picture since it contains username and
password of the MongoDB Atlas.

20
lOMoAR cPSD| 26409871

6.2.1 Routes and Route Handler:

Routes and route handler work together to define the behaviour of server. Routes are specific
URLs or endpoints that the users can access and interact. Hello world is an example from above
figure for this where “/” is the URL or end point. Other examples are /login, /register, etc. Route
handlers on the other hand are the functions that execute once a specific route is matched.
Below is the screenshot of route handlers and routes that was configured for the server
implementation of the application.

Code: Routes and Route handler

In the above code, the importing was carried out in the first block of code. Different route
handlers were imported from routes directory. Each route handlers contains logic for handling
requests for specific routes. In the second block of code, routes were configured using
“app.use()” method which sets middleware for each route paths.
Finally, all the endpoints are accessed in index.js.
6.2.2 Models:
Models were created to define the structure and relationships of the data stored in the database.
For this application, there were two models created: user and post. The user model contains
user data of the app while post model consists of post data. Additionally, user model handles
tasks such as creating new user records, getting user information, and updating user data. Post
model is responsible for creating new posts, retrieving post information, updating, and deleting
it.

21
lOMoAR cPSD| 26409871

Code 9: User Model

Code above shows the structure for the user data and creates a user model that interacts with
user collection in MongoDB. First, mongoose module is required and then a user schema is
created using the “mongoose.Schema” method. It has two fields: username and password.
Finally, user model is created using “mongoose.model” method and exported.
After that comes the post model. Similarly, a post schema is created using the same method
“mongoose.Schema”. The schema includes fields for a post such as title, summary, photo,
content, and author.
6.3 Frontend Development:
In the frontend part of the thesis, user interface was created. There are components and pages
such as header, posts, homepage, login page, register page, create post page, edit page, and
others developed for the blog application. This section will focus on providing an overview of
logic of some of the pages. Later in the result and discussion section, other components and
pages will be presented and discussed.
6.3.1 Register Page:
Code below shows the register page. It renders a registration form with two fields: username
and password. React hook “useState” was used to manage the state of the username and
password values. Register function was added to the on submit event handler. The register
function sends a POST request to the endpoint /register using fetch that includes username and
password in the request body. Register /register endpoint is the same endpoint that was
discussed in the route handler section. After that, an alert message is displayed with the message
“Registered!” if the response received is 200. However, an alert message “Registration failed”
is received if the status code is not 200. Furthermore, the input fields were connected to the
state using “value” and “onChange”. Additionally, font awesome icon “faUserPlus” was used
too. Below is the route handler for the end point mentioned above.

22
lOMoAR cPSD| 26409871

//Code:
const Register = () => {

const [username,setUsername]=useState("")
const [email,setEmail]=useState("")
const [password,setPassword]=useState("")
const [error,setError]=useState(false)
const navigate=useNavigate()

const handleRegister=async ()=>{

try{
const res=await axios.post(URL+"/api/auth/register",{username,email,password})
setUsername(res.data.username)
setEmail(res.data.email)
setPassword(res.data.password)
setError(false)
navigate("/login")

}
catch(err){
setError(true)
console.log(err)
}
}
return (
<>
<div className="flex items-center justify-between px-6 md:px-[200px] py-4">
<h1 className="text-lg md:text-xl font-extrabold"><Link to="/">Blog
Market</Link></h1>
<h3><Link to="/login">Login</Link></h3>
</div>
<div className="w-full flex justify-center items-center h-[80vh] ">

23
lOMoAR cPSD| 26409871

<div className="flex flex-col justify-center items-center space-y-4 w-[80%] md:w-

[25%]">
<h1 className="text-xl font-bold text-left">Create an account</h1>
<input onChange={(e)=>setUsername(e.target.value)} className="w-full px-4 py-2
border-2 border-black outline-0" type="text" placeholder="Enter your username" />
<input onChange={(e)=>setEmail(e.target.value)} className="w-full px-4 py-2 border-
2 border-black outline-0" type="text" placeholder="Enter your email" />
<input onChange={(e)=>setPassword(e.target.value)} className="w-full px-4 py-2
border-2 border-black outline-0" type="password" placeholder="Enter your password" />
<button onClick={handleRegister} className="w-full px-4 py-4 text-lg font-bold text-
white bg-black rounded-lg hover:bg-gray-500 hover:text-black ">Register</button>
{error && <h3 className="text-red-500 text-sm ">Something went wrong</h3>}
<div className="flex justify-center items-center space-x-3">
<p>Already have an account?</p>
<p className="text-gray-500 hover:text-black"><Link to="/login">Login</Link></p>
</div>
</div>
</div>
<Footer/>
</>
)
}

6.3.2 Login Page:

//Code:
const Login = () => {
const [email,setEmail]=useState("")
const [password,setPassword]=useState("")
const [error,setError]=useState(false)
const {setUser}=useContext(UserContext)
const navigate=useNavigate()

24
lOMoAR cPSD| 26409871

const handleLogin=async()=>{
try{
const res=await
axios.post(URL+"/api/auth/login",{email,password},{withCredentials:true})
// console.log(res.data)
setUser(res.data)
navigate("/")

}
catch(err){
setError(true)
console.log(err)
}
}
return (
<>
<div className="flex items-center justify-between px-6 md:px-[200px] py-4">
<h1 className="text-lg md:text-xl font-extrabold"><Link to="/">Blog
Market</Link></h1>
<h3><Link to="/register">Register</Link></h3>
</div>
<div className="w-full flex justify-center items-center h-[80vh] ">
<div className="flex flex-col justify-center items-center space-y-4 w-[80%] md:w-
[25%]">
<h1 className="text-xl font-bold text-left">Log in to your account</h1>
<input onChange={(e)=>setEmail(e.target.value)} className="w-full px-4 py-2 border-
2 border-black outline-0" type="text" placeholder="Enter your email" />
<input onChange={(e)=>setPassword(e.target.value)} className="w-full px-4 py-2
border-2 border-black outline-0" type="password" placeholder="Enter your password" />
<button onClick={handleLogin} className="w-full px-4 py-4 text-lg font-bold text-
white bg-black rounded-lg hover:bg-gray-500 hover:text-black ">Log in</button>
{error && <h3 className="text-red-500 text-sm ">Something went wrong</h3>}

25
lOMoAR cPSD| 26409871

<div className="flex justify-center items-center space-x-3">

<p>New here?</p>
<p className="text-gray-500 hover:text-black"><Link
to="/register">Register</Link></p>
</div>
</div>
</div>
<Footer/>
</>

)
}

export default Login

The login page interacts with the server by sending a login request to the /login
endpoint. The code uses React hooks such as “useState” and “useContext”. Then, a
login function was defined that handles login process. The function sends a POST
request to endpoint /login when the form is submitted. The request consisted of the
“username” and “password” in the request body and credentials was set to include
which means that the cookies are sent along with the request. Then, if the request was
successful, user information was sent to “setUserInfo”. Again, if response was ok, this
triggers the redirect to run which navigates to homepage using navigate component.
However, if the response was unsuccessful, an alert message is displayed with the
message “wrong credentials”. The login page renders a form element which consisted
of username and password as input field along with a button for submission. The
“onChange” event was used for handling the input field values of “username” and
“password”. Finally, login function was called once the form was submitted.

26
lOMoAR cPSD| 26409871

Chapter 7: Conclusion

The thesis aimed to explore the theoretical foundations of MERN and build a blog application from
scratch using MERN stack. By acquiring a deep understanding of each of the components of the MERN
stack, a functional user-friendly blog application was successfully developed that enables users to
create and edit posts.
Throughout the development of the application, several functionalities were implemented.
Users can register, login securely, browser existing posts, create new posts, make edits, and
logout when desired. Moreover, the blog application was designed to be responsive across
various screen sizes and devices to ensure consistent and accessible experience for users.
In addition to the achievements of developing the blog application, the thesis also emphasized
the need for improvements.The discussion section of thesis highlighted various areas in the
application for further improvements which include delete post functionality, search field,
adding user profile and tags, and separate page for viewing own posts. These ideas could be
used for expanding the functionalities of this application which could promote user
engagement.

27
lOMoAR cPSD| 26409871

Chapter 8: Bibliography

1. React Documentation:
https://reactjs.org/docs/getting-started.html
The official documentation for React, which served as a comprehensive reference for building
the frontend of the application.
2. Express.js Documentation:

https://expressjs.com/

The official documentation for Express.js, which provided guidance on creating the backend
server and handling API routes.
3. MongoDb Documentation:
https://docs.mongodb.com/

MongoDB's official documentation, which was invaluable for designing the database schema
and data storage.
4. Bootstrap Documentation:
https://getbootstrap.com/docs/5.0/getting-started/introduction/

Documentation for Bootstrap, which guided the application's responsive design and UI
components.
5. Axios Documentation:
https://axios-http.com/docs/intro

Axios documentation was a crucial resource for handling HTTP requests to external APIs and
the backend.
6. MDN Web Docs.
https://developer.mozilla.org/
Mozilla Developer Network's web documentation, which was a helpful resource for web
development concepts and JavaScript reference.
7. YouTube Tutorials and Online Communities.
Various online tutorials, forums, and developer communities were consulted for specific
challenges and questions encountered during the project.

28
lOMoAR cPSD| 26409871

8. Stack Overflow.
Stack Overflow, a popular Q&A platform for developers, was a frequent source of solutions
and troubleshooting guidance throughout the project.
9. GitHub Repositories.
GitHub repositories hosting open-source projects and libraries that were used or referenced in
the project.

29
lOMoAR cPSD| 26409871

Chapter 9: Appendix

The following screenshots provide a visual representation of the chat application and
its functionality. They demonstrate the user interface, core features, and workflows
implemented in the Chat Application. These visuals are included to help readers
understand the design and usability of the system.

Figure 9.1: Login Page

Figure 9.2: SignUp Page

30
lOMoAR cPSD| 26409871

Figure 9.3: Home Page

Figure 9.4: Chat With A User

31
lOMoAR cPSD| 26409871

Figure 9.5: Logged In User Profile

Figure 9.6: Real Time Chat With User

32