Internship Assessment/Mini Project Report

Submitted

in Partial Fulfillment of the Requirements

For the Degree of

Bachelor of Technology

In

Computer Science and Engineering

By

Jatin Choudhary

2100040100030

Year: 2nd

Department of Computer Science & Engineering

F. E. T., R. B. S. Engineering Technical Campus, Bichpuri,

Agra (U.P.)

I
 DECLARATION

I declare that the work presented in this Mini Project Titled “MERN
MESSENGER WEB APP ”, submitted to the Computer Science & Engineering
Department, Raja Balwant Singh Engineering Technical, Campus, Bichpuri,
Agra, for the award of the Bachelor of Technology degree in Computer
Science & Engineering, is my original work. I have not plagiarized or
submitted the same work for the award of any other degree.

16, December, 2022

Agra

II
 ACKNOWLEDGEMENT

I extend my gratitude to my B.tech supervisor, Dr Ashok Kumar, Assistant

Professor in Department of Computer Science and Engineering, for being a
great mentor and the best adviser I could ever have. Her advice, encouragement
and critics are source of innovative ideas, inspiration and causes behind the
successful completion of this mini project work. Undoubtly, it was impossible
to successfully carry out this work without their directions, advice and
suggestions.

I am grateful to Dr. B.S. Kushwah (Academic), and Dr. Pankaj Gupta (Finance
& Admin.), Director, Raja Balwant Singh Engineering Technical, Campus,
Bichpuri, Agra for providing us facilities and constant encouragement. I am also
grateful to all the faculty member of department of Computer Science and
Engineering for their deliberations and honest concerns.

Finally, I am grateful to my parents and friends for insisting me to work hard in

my project work. This work was a distant reality their blessings.

I also place on record, my indebtness for those who directly or indirectly have
provided their helping hand in this endeavor.

16, December, 2022

III
 ABSTRACT
The MERN stack messenger web application is a full- stack web application
developed using the MERN (MongoDB, Express, React, and Node.js) stack. The
application allows users to create an account, sign in, and send and receive
messages in real-time.

The application's back-end is built using Node.js and Express, which handle the
server-side routing and logic. The database is powered by MongoDB, which
stores user data as well as the messages sent between users. The front-end of the
application is built using React, which allows for a dynamic and interactive user
experience.

Overall, the MERN stack messenger web application is a powerful tool for
communication, offering a simple and intuitive interface for users to connect
with one another in real-time.

IV
CERTIFICATES

V
VI
 TABLE OF CONTENTS
 DECLARATION...............................................................................................................................................II
 ACKNOWLEDGEMENT................................................................................................................................III
 ABSTRACT......................................................................................................................................................IV
 CERTIFICATES...............................................................................................................................................V
1. INTRODUCTION.............................................................................................................................................1
1.1. OBJECTIVE OF THIS PROJECT.............................................................................................................2
1.2. SCOPE.........................................................................................................................................................2
2. MINIMUM HARDWARE AND SOFTWARE REQUIREMENT...................................................................4
2.1. HARDWARE REQUIREMENTS..............................................................................................................4
2.2. MINIMUM SOFTWARE REQUIREMENT..............................................................................................4
3. MATERIALS AND METHODS.......................................................................................................................5
3.1. PROJECT CATEGORY.............................................................................................................................5
3.2. TECHNIQUES TO BE USED.....................................................................................................................5
3.3. PARALLEL TECHNIQUES AVAILABLE.............................................................................................13
4. WORKFLOW & METHODOLOGY.............................................................................................................15
5. TESTING TECHNOLOGIES & SECURITY MECHANISMS.....................................................................21
5.1. TESTING TECHNOLOGIES:..................................................................................................................21
5.2. SECURITY MECHANISMS:...................................................................................................................22
6. LIMITATIONS & DELIMITATIONS...........................................................................................................24
7. CONCLUSION................................................................................................................................................25
8. REFERENCE..................................................................................................................................................26

VII
 CHAPTER 1
INTRODUCTION

The MERN stack is a popular stack of technologies for building modern web
applications. It consists of four main components: MongoDB, Express, React,
and Node.js.

MongoDB is a NoSQL database that stores data in the form of documents. It

is designed to be flexible and scalable, making it a great choice for modern
web applications.

Express is a lightweight web application framework for Node.js. It provides a

set of features for building web applications, such as routing and middleware.

React is a JavaScript library for building user interfaces. It allows developers

to create reusable components that can be easily rendered on the front-end of a
web application.

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It

allows developers to run JavaScript on the server side, making it possible to
build full-stack web applications using JavaScript.

When these four technologies are combined, they provide a powerful toolkit
for building modern web applications, including a MERN stack messenger
application. Such an application would allow users to create an account, sign
in, and send and receive messages in real-time. The back-end of the
1
application would be built using Node.js and Express, and the database would
be powered by MongoDB. The front-end of the application would be built
using React, providing a dynamic and interactive user experience.

1.1. OBJECTIVE OF THIS PROJECT

The primary objective of a MERN stack messenger web application is to

provide a platform for users to communicate with one another in real-time.
This can be accomplished through the use of various messaging features, such
as instant messaging, group chats, and push notifications.

Other potential objectives of a MERN stack messenger web application could

include

1) Allowing users to create and manage their own profiles and contact lists

2) Providing an easy-to-use interface for users to send and receive messages

3) Enabling users to share files and media through the messaging platform

4) Implementing security measures to protect user privacy and data

5) Offering additional features such as emojis and the ability to send messages
to multiple recipients at once

Overall, the objectives of a MERN stack messenger web application will

depend on the specific requirements and goals of the application.

2
1.2 SCOPE

A MERN stack messenger web application can have a wide range of features and
functionality, depending on the specific requirements and goals of the project. Some
potential scope items for a MERN stack messenger application could include
1. User authentication: Users should be able to create an account, sign in, and sign out.
2. Real-time messaging: Users should be able to send and receive messages in real-time.
3. Contact list: Users should be able to see a list of their contacts and initiate conversations
with them.

4. Group messaging: Users should be able to create groups and send messages to multiple
recipients at once.
5. File sharing: Users should be able to send and receive files, such as images and
documents.
6. User profiles: Users should be able to view and edit their own profile, including their
name, profile picture, and other personal information.
7. Push notifications: Users should receive notifications when they receive a new message,
even if they are not currently using the application.
8. Security: The application should use secure techniques to protect user data and prevent
unauthorized access.

3
 CHAPTER 2

MINIMUM HARDWARE AND SOFTWARE REQUIREMENT

2.1 HARDWARE REQUIREMENTS

Operating system: 32/64/128-bit Operating System

Processor: Intel(R) Core (TM) i3 CPU 5+ generation

RAM: At least 6 GB RAM

Connectivity: No internet connection needed

External Devices Needed: None

2.2 MINIMUM SOFTWARE REQUIREMENT

To develop and run a MERN stack messenger web application, you will need the
following software:

1) Node.js: This is a JavaScript runtime that allows you to run JavaScript on the server
side.

2) MongoDB: This is a NoSQL database that stores data in the form of documents.

3) A code editor: This is a software application that allows you to write and edit code.
Some popular options include Visual Studio Code and Sublime Text.

4) Git: This is a version control system that allows you to track changes to your code
4
and collaborate with other developers.

5) A web browser: This is used to access and test the application during development.
Some popular options include Google Chrome, Mozilla Firefox, and Safari.
In addition to these software requirements, you will also need a basic understanding of
web development technologies such as HTML, CSS, and JavaScript. It is also helpful
to have experience with the MERN stack and web application development in general.

5
 CHAPTER 3
MATERIALS AND METHODS

3.1 PROJECT CATEGORY

The MERN stack messenger web application is a type of software application

that falls into the category of "communication software." This type of
application is designed to facilitate communication between users, whether it be
through messaging, voice or video calls, or other forms of online
communication.

Within the broader category of communication software, the MERN stack

messenger web application can be further classified as a "web application." This
means that it is accessed through a web browser and runs on a web server,
rather than being installed locally on a user's computer or device.

Overall, the MERN stack messenger web application is a useful tool for
individuals and organizations looking to improve their communication and
collaboration with one another.

3.2 TECHNIQUES TO BE USED

3.2.1 REACT.JS

6
React is a JavaScript library for building user interfaces. It was developed by Facebook and
vis often used for building single-page applications and mobile applications.

One of the main features of React is the virtual DOM (Document Object Model). The virtual
DOM is a lightweight in-memory representation of the actual DOM. When the state of a
React component changes, the virtual DOM creates a new virtual tree of React elements. It
then compares this new tree to the previous virtual tree and determines the minimum number
of changes that need to be made to the actual DOM to bring it up to date. This process is
called "reconciliation".

Another feature of React is JSX, a syntax extension for JavaScript that allows you to write
HTML-like code in your JavaScript files. This makes it easier to build large, complex user
interfaces because you can use the structure and clarity of HTML while writing in the power
and flexibility of JavaScript.

React is designed to be declarative, which means that you describe the desired state of your
user interface, and React takes care of the rest. This makes it easy to build reusable
components that can be shared across your application.

HOW TO USE REACT.JS

React is a JavaScript library for building user interfaces. To use React, you'll
need to have a good understanding of JavaScript and some knowledge of
HTML and CSS. Here are the steps to get started with React:

A) Set up your development environment:

1) Install Node.js on your computer

2) Create a new project directory and navigate to it in your terminal

3) Run npm init to create a package.json file

7
4) Install React by running npm install react

B) Create a new file in your project directory called index.html and add the
following code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>My React App</title>

</head>

<body>

<div id="root"></div>

</body>

</html>

C) Create a new file called index.js and add the following code:

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

<h1>Hello, World!</h1>,

document.getElementById('root')

8
 );

D) Run the app by opening index.html in your browser. You should see the text
"Hello, World!" displayed on the page.

3.2.2 EXPRESS.JS

Express.js is a popular JavaScript framework that is designed to help developers

build web applications quickly and efficiently. It is built on top of Node.js,
which is a runtime environment that allows you to run JavaScript code on the
server side.

Express.js provides a set of APIs (Application Programming Interfaces) that

make it easy to build web applications by handling common tasks such as
routing, request and response handling, and middleware. It also has a rich
ecosystem of plugins and libraries that allow you to add additional functionality
to your application.

Express.js is particularly useful for building RESTful APIs, which are used to
create web services that can be accessed by other applications or websites. It is
also a popular choice for building web applications that require real-time
communication, such as chat applications or live streaming platforms.

Overall, Express.js is a powerful and flexible framework that can help

developers build web applications quickly and easily, making it a popular
choice among many developers.

9
HOW TO USE EXPRESS.JS

To use Express.js, you will need to install it first using the npm package manager. Here is a
step-by-step guide on how to use Express.js:

1) Make sure you have Node.js and npm installed on your machine.

2) Create a new directory for your Express.js project and navigate to it in your terminal.

3) Run the command "npm init" to initialize the project and create a package.json file.

4) Install Express.js by running the command "npm install express".

5) Create a new file called "app.js" in your project directory.

6) In the app.js file, require Express.js by adding the following line of code at the top:
const express = require('express');

7) Create an instance of the Express.js app by adding the following line of code:
const app = express();

8) Set up routes for your app by using the app.get() or app.post() methods. For example, to
create a route for a GET request to the '/' path, you can use the following code:
app.get('/', (req, res) => {
res.send('Hello World');
});
9) Start the server by adding the following line of code at the bottom of your app.js file:

app.listen(3000, () => {
console.log('Express server listening on port 3000');
});
10
10) Run the app by using the command "node app.js" in your terminal. You should see the
message "Express server listening on port 3000" in the console, and you can now visit the
app in your web browser by going to localhost:3000.

3.2.3 NODE.JS

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It

allows developers to run JavaScript on the server side, creating server-side
applications with JavaScript.

Node.js uses an event-driven, non-blocking I/O model, which makes it

efficient and scalable for building real-time applications, such as chat
programs or streaming services. It also has a large ecosystem of open
source libraries, called "packages," that can be easily installed and used in
Node.js projects.
Node.js is commonly used for building web servers and APIs, as well as
creating desktop applications using tools like Electron. It is also frequently
used in the creation of real-time, collaborative applications, like online
games or document editing tools.
Overall, Node.js provides a platform for developers to build efficient,
scalable, and real-time applications using JavaScript.

HOW TO USE NODE.JS

11
To use Node.js, you will need to install it on your computer. You can do
this by following these steps:

1) Download and install Node.js from the official website

(https://nodejs.org/)

2) Open a command prompt or terminal window and navigate to the

directory where you want to create your Node.js project

3) Initialize a Node.js project by typing "npm init" and following the

prompts

4) Install any dependencies that your project requires by using the "npm
install" command followed by the dependency name

5) Create a JavaScript file for your project and start writing your Node.js
code

Run your code by typing "node" followed by the name of your JavaScript
file in the terminal or command prompt.

3.2.4 MONGODB

MongoDB is a NoSQL database management system that uses a document-

oriented data model. This means that instead of storing data in tables with rows
and columns like a traditional relational database, MongoDB stores data in
collections of documents. Each document is a JSON-like object that contains

12
key-value pairs, similar to a dictionary.

One of the main benefits of MongoDB is that it is highly flexible and scalable.
It allows for the creation and modification of data structures on the fly, making
it well suited for applications that require rapid development and changing data
requirements. It also has the ability to handle large amounts of data and can
easily handle high levels of concurrency, making it a popular choice for web
and mobile applications.

In addition to its document-oriented model, MongoDB also has built-in

support for indexing, geospatial queries, and aggregation. This allows for fast
and efficient querying of data, as well as the ability to perform data analysis
and visualization tasks.

Overall, MongoDB is a powerful tool for storing and managing data in modern
applications. It offers flexibility, scalability, and performance, making it a
popular choice for many businesses and developers.

HOW TO USE MONGODB

1. Install MongoDB on your computer or use a cloud service such as

MongoDB Atlas.

2. Connect to the MongoDB server using a command line interface or a

GUI tool such as MongoDB Compass.

3. Create a database and collection in MongoDB by using the "use" and

"createCollection" commands.

13
4. Insert documents into the collection using the "insertOne" or
"insertMany" commands.

5. Query the collection using the "find" command and specify any desired
filters or projections.

6. Update or delete documents using the "updateOne", "updateMany",

"deleteOne", or "deleteMany" commands.

7. Use indexing and sharding to improve the performance of your database.

8. Use the MongoDB aggregation framework to perform complex queries

and data manipulation.

WHAT IS MONGOOSE
Mongoose is a MongoDB object modeling tool designed to work in an
asynchronous environment. It allows you to define objects with a strongly-
typed schema that is mapped to a MongoDB document. It helps you validate the
structure of your data, ensures that data is in the correct format, and helps you
to write business logic with a flexible, yet powerful API. Mongoose also
provides a straight-forward, schema-based solution to model your application
data. It includes built-in type casting, validation, query building, business logic
hooks, and more, out of the box.

3.3 PARALLEL TECHNIQUES AVAILABLE

14
There are various parallel techniques that can be used to build a messenger web app, other
than the MERN stack:

• Node.js Clustering: Clustering allows you to run multiple instances of your application on
different cores of your machine, allowing your application to take advantage of multiple
cores and hence increasing the overall performance.

• Load Balancing: Load balancing can be used to distribute the incoming requests to
different instances of your application, ensuring that no single instance is overburdened.

• Caching: Caching can be used to store frequently used data in memory, reducing the
number of round trips to the database and improving performance.

• Database sharding: This involves splitting the database into smaller, more manageable
parts, and distributing the data across multiple servers. This can improve the performance
and scalability of the application.

• WebSocket’s: WebSockets can be used to enable real-time communication between the

client and the server, allowing for instant messaging.

• ASP.NET: ASP.NET is a server-side framework for building web applications. It provides

robust performance, scalability, and security features, making it a good choice for building a
messenger app.

• Java: Java is a versatile and widely used programming language that can be used to build a
messenger app. It has a wide range of libraries and tools available, making it easy to add
advanced features to your application.

These are some of the parallel techniques that can be used to build a messenger web app,
other than the MERN stack.
15
 CHAPTER 4

WORKFLOW & METHODOLOGY

The MERN stack (MongoDB, Express, React, Node.js) is a popular stack for
building modern web applications. Here is a detailed methodology for
building a MERN stack messenger web app:

Set up your development environment by installing Node.js and creating a

new project directory.

Install the required dependencies for your project, including MongoDB,

Express, React, and Node.js.

Set up your MongoDB database and create a connection to it using the

Mongoose ODM (Object-Document Mapping) library.

Set up your server-side Express routes to handle HTTP requests for creating,
reading, updating, and deleting messages in your database.

Set up your client-side React components to display and interact with your
messages. This may include a messaging interface, a list of messages, and
forms for creating and deleting messages.

Use Socket.IO to set up real-time messaging capabilities, allowing users to

receive updates in real-time as new messages are added or deleted.
16
 Add authentication and authorization to your app by setting up user accounts
and adding login and logout functionality.

Test and debug your app to ensure it is working as expected.

Here are some code examples for each step:

Step 1: Set up development environment

mkdir my-messenger-app

cd my-messenger-app

npm init

Step 2: Install dependencies

npm install express mongoose react react-dom socket.io

Step 3: Set up MongoDB and Mongoose

// connect to database

mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost/my-
messenger-app', {
17
 useNewUrlParser: true,

useUnifiedTopology: true

});

// create message model

const Message = mongoose.model('Message', {

text: String,

author: String

});

Step 4: Set up server-side routes

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

Message.find({}, (err, messages) => {

res.send(messages);

});

});

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

const message = new Message({

text: req.body.text,

author: req.body.author

});

18
 message.save((err) => {

if (err) {

res.send(err);

} else {

res.send(message);

});

});

Step 5: Set up client-side components

const MessageList = (props) => {

const messages = props.messages.map((message) => {

return <Message key={message._id} message={message} />

});

return (

<div className="message-list">

{messages}

</div>

);

19
const MessageForm = (props) => {

return (

<form onSubmit={props.handleSubmit}>

<input type="text" name="text" value={props.text}

onChange={props.handleChange} placeholder="Enter message..." />

<button type="submit” >

20
 CHAPTER 5
TESTING TECHNOLOGIES & SECURITY MECHANISMS

There are several testing technologies and security mechanisms that can be
used in a MERN stack messenger web app to ensure it is functioning properly
and securely. Here are a few examples:

5.1 TESTING TECHNOLOGIES:

Jest: a popular JavaScript testing framework that can be used to test React
components and Node.js functions.

Example:

import React from 'react';

import { shallow } from 'enzyme';

import MyComponent from './MyComponent';

it('renders without crashing', () => {

shallow(<MyComponent />);

});

it('displays the correct message', () => {

const wrapper = shallow(<MyComponent />);

21
 expect(wrapper.find('.message').text()).toEqual('Hello, World!'); });

2 . Supertest: a library that allows you to make HTTP requests to your server
and test the response.

Example:

const request = require('supertest');

const app = require('./app');

describe('GET /messages', () => {

it('responds with a list of messages', async () => {

const res = await request(app).get('/messages');

expect(res.statusCode).toEqual(200);

expect(res.body).toEqual([{ text: 'Hello, World!', author: 'John Doe' }]);

});

5.2 SECURITY MECHANISMS:

JSON Web Tokens (JWTs): a method of securely transmitting information

between parties as a JSON object.

Example:

const jwt = require('jsonwebtoken');

// create JWT

22
const token = jwt.sign({ userId: 123 }, process.env.JWT_SECRET);

// verify JWT

jwt.verify(token, process.env.JWT_SECRET, (err, decoded) => {

if (err) {

// handle error

} else {

// access decoded.userId

});

23
 CHAPTER 6

LIMITATIONS & DELIMITATIONS

There are several limitations and delimitations of a MERN stack

messenger web app that developers should be aware of. These may
include:

Scalability: a MERN stack app may have difficulty scaling to a large

number of users and messages due to the limitations of MongoDB and
the single-threaded nature of Node.js.

Real-time performance: real-time messaging can be challenging to

implement in a MERN stack app due to the reliance on WebSockets and
the potential for delays in message delivery.

Compatibility: MERN stack apps may not be compatible with older

browsers or devices that do not support modern JavaScript features or
frameworks.

Security: MERN stack apps may be vulnerable to security threats such as

SQL injection attacks or cross-site scripting (XSS) if proper safeguards
are not put in place.

Maintenance: MERN stack apps may require more maintenance and

updates compared to other types of web apps due to the use of multiple
technologies and frameworks.

Complexity: MERN stack apps may be more complex to develop and

deploy compared to simpler web apps due to the need to integrate
multiple technologies and frameworks.

Data storage: MERN stack apps may have limitations in terms of data
storage and retrieval compared to other types of web apps that use
traditional relational databases.

24
 CHAPTER 7

CONCLUSION

The MERN stack messenger web application is a useful tool for real-time
communication. It utilizes the power of the MongoDB, Express, React,
and Node.js frameworks to create a full-stack web application that is fast,
efficient, and scalable. The use of Mongoose as an object modeling tool
helps to simplify the process of working with the MongoDB database and
allows for the creation of robust and powerful features within the
application. Overall, the MERN stack messenger web application is a
valuable addition to any web developer's toolkit and can greatly improve
the speed and efficiency of web development projects.

25
 CHAPTER 8

REFERENCE

 REACT.JS DOCS

https://reactjs.org/docs/create-a-new-react-app.html

 EXPREES.JS DOCS

https://expressjs.com/en/starter/hello-world.html

 MONGOOSE DOCS

https://mongoosejs.com/docs/guide.html

26