TABLE OF CONTENTS

CHAPTER NO. TITLE PAGE NO.

1) List of Figures 1

Chapter 1. INTRODUCTION 4
1.1) Problem Statement 6
1.2) Objectives 6

Chapter 2. TECHNOLOGIES USED 7-10

2.1) What is MongoDB? 7
2.2) What is Express.js 7
2.3) What is React.js 8
2.4) What is Node.js 9
2.5) Features of Node.js 10

Chapter 3. SYSTEM DESIGN & IMPLEMENTATION 11 – 17

3.1) GUI Interface 11
3.2) Implementation 12
3.2.1) Chat App or Client Side 12
3.2.2) Chat Server Engine 14
3.2.3) Web Socket 16

1
Chapter 4. RESULTS 18 - 20
4.1) Screenshots 18
4.2) Chatting Demo 20
Chapter 5 Deployment 21
Chapter 6. Future Enhancements 22

Chapter 7. CONCLUSION 24

2
 LIST OF FIGURES

 Figure 1 - MERN Stack…………………………………….5

 Figure 2 - Login Page ………………………………………11

 Figure 3 - Sign Up Page …………………………………….12

 Figure 4 - Package.json file of Client-side……………………14

 Figure 5 - Dependencies for Server …………………………15

 Figure 6 - Socket Code ……………………………………….17

 Figure 7- Profile Page ………………………………………..19

 Figure 8 - Setting Page ……………………………………… 19

 Figure 9 - Chatting Demo……………………………………...20

3
 CHAPTER-1

INTRODUCTION

Today Developers around the world are making efforts to enhance user experience of using
application as well as to enhance the developer’s workflow of designing applications to
deliver projects and rollout change requests under strict timeline. Stacks can be used to build
web applications in the shortest span of time. The stacks used in web development are
basically the response of software engineers to current demands. They have essentially
adopted pre-existing frameworks (including JavaScript) to make their lives easier. While
there are many, MEAN and MERN are just two of the popular stacks that have evolved out
of JavaScript. Both stacks are made up of open source components and offer an end-to-end
framework for building comprehensive web apps that enable browsers to connect with
databases. The common theme between the two is JavaScript and this is also the key benefit
of using either stack. One can basically avoid any syntax errors or any confusion by just
coding in one programming language, JavaScript. Another advantage of building web
projects with MERN is the fact that one can benefit from its enhanced flexibility. In order to
understand MERN stack, we need to understand the four components that make up the
MERN stack(fig.1), namely – MongoDB, Express.js, React and Node.js.

4
Figure 1: MERN Stack

5
1.1) Problem Statement

 This project is to create a chat application with a server and users to enable the users
to chat with each other’s.
 To develop an instant messaging solution to enable users to seamlessly communicate
with each other.
 The project should be very easy to use enabling even a novice person to use it.
1.2 ) Objectives
 GUI: Easy to use GUI (Graphical User Interface), hence any user with minimal
knowledge of operating a system can use the software.
 Platform independence: The messenger operates on any system irrelevant of the
underlying operating system.
 Unlimited clients: “N” number of users can be connected without any performance
degradation of the server.

Objective is to develop an instant messaging solution to enable users to seamlessly

communicate with each other. Furthermore, it needs to be user-friendly, i.e., the
project should be very easy to use enabling even a novice person to use it.

6
 CHAPTER-2

TECHNOLOGIES USED

2.1) What is MongoDB? [1]

 MongoDB is a cross-platform document-oriented NoSQL database used for high

volume data storage that provides high performance, high availability and easy
scalability.
 MongoDB stores data in flexible, JSON-like documents, meaning fields can vary
from document to document and data structure can be changed over time.
 The document model maps to the objects in the application code, making data easy
to work with.
 The data model available within MongoDB allows users to represent hierarchical
relationships, to store arrays, and other more complex structures more easily.
 MongoDB works on concept of collections and documents.
 Each database contains collections which in turn contains documents.
 Each document can have varying number of fields.
 The size and content of each document can also be different from each other.

2.2) What is Express.js ? [2]

 Express is a minimal and flexible Node.js web application framework that provides a
robust set of features for web and mobile applications.
 It is an open source framework developed and maintained by the Node.js foundation.
 Express provides us the tools that are required to build our app, be it single-page,
multi-page or hybrid web applications. It is flexible as there are numerous modules
available on npm(Node Package Manager), which can be directly plugged into
Express.

7
  Unlike its competitors like Rails and Django, which have an opinionated way of
building applications, Express has no "best way" to do something.
 It is very flexible and pluggable.
 Pug (earlier known as Jade) is a terse language for writing HTML templates. It
produces
 HTML, supports dynamic code and code reusability (DRY). It is one of the most
popular template languages used with Express.
 Express can be thought of as a layer built on the top of the Node.js that helps manage
a server and routes.
 It allows users to setup middleware to respond to HTTP Requests and defines a
routing table which is used to perform different actions based on HTTP method and
URL.
 Express allows to dynamically render HTML Pages based on passing arguments to
templates.
 Express is asynchronous and single threaded and performs I/O operations quickly.

2.3) What is React ? [3]

 ReactJS is a declarative, efficient, and flexible JavaScript library for building

reusableUI components.
 It is an open-source, component-based front-end library which is responsible only for
the view layer of the application. It was initially developed and maintained by
Facebook and later used in its products like WhatsApp & Instagram.
 A ReactJS application is made up of multiple components, each component
responsible for outputting a small, reusable piece of HTML code.
 The components are the heart of all React applications.
 These Components can be nested with other components to allow complex
applications to be built of simple building blocks.

8
  ReactJS uses virtual DOM based mechanism to fill data in HTML DOM. The
virtual DOM works fast as it only changes individual DOM elements instead of
reloading complete DOM every time.
 Instead of using regular JavaScript, React codes are written in something called JSX
(JavaScript Syntax Extension).
 JSX is basically a syntax extension of regular JavaScript and is used to create React
elements.
 These elements are then rendered to the React DOM. JSX is faster than normal
JavaScript as it performs optimizations while translating to regular JavaScript.

2.3.1) Why use React? [4]

 Uses virtual DOM which is a JavaScript object.

 This will improve apps performance, since JavaScript virtual DOM is faster than the
regular DOM.
 Can be used on client and server side as well as with other frameworks.
 Component and data patterns improve readability, which helps to maintain larger
apps.

2.4) What is Node.js? [5]

 Node.js is a very powerful JavaScript-based platform built on Google Chrome's

JavaScript V8 Engine.
 It is used to develop I/O intensive web applications like video streaming sites, single-
page applications, and other web applications.
 Node.js is open source, completely free, and used by thousands of developers around
the world.

9
 Node.js is a server-side platform built on Google Chrome's JavaScript Engine (V8
Engine). Node.js was developed by Ryan Dahl in 2009.
 Node.js applications are written in JavaScript and can be run within the Node.js
runtime on OS X, Microsoft Windows, and Linux.
 Node.js also provides a rich library of various JavaScript modules which simplifies
the development of web applications using Node.js to a great extent.

2.5) Features of Node.js

1. Extremely fast: Node.js is built on Google Chrome's V8 JavaScript Engine, so its

library is very fast in code execution.
2. I/O is Asynchronous and Event Driven: All APIs of Node.js library are
asynchronous i.e. non-blocking. So, a Node.js based server never waits for an API to
return data. The server moves to the next API after calling it and a notification
mechanism of Events of Node.js helps the server to get a response from the previous
API call. It is also a reason that it is very fast.
3. Single threaded: Node.js follows a single threaded model with event looping.
4. Highly Scalable: Node.js is highly scalable because event mechanism helps the
server to respond in a non-blocking way.
5. Open source: Node.js has an open source community which has produced many
excellent modules to add additional capabilities to Node.js application.

10
 CHAPTER-3

SYSTEM DESIGN & IMPLEMENTATION

This is a very basic web based chat application and it is in its primary state. I have

provided with a very easy to use GUI Interface.

3.1) GUI Interface

This is the GUI interface made using React.js etc.

Login/Sign Up Page:

Figure 2 : Login Page

11
Home Page:

Figure 3 : Home Page

3.2) Implementation

A chat consists of two major parts:

 Chat App or client part, which is a Web chat application. Build on React.
 Chat Server Engine or server part, which is a pool of external servers responsible for
the chat operation. This is the place where all the chat magic happens.
 Both parts contain various components that communicate to each other and bring the
chat into action

3.2.1) Chat App or Client Side

Chat App is the other major part of the chat architecture, the one that users directly
interact with. It's split into two separate root components:

12
  Chat Client Engine handles all the communication with the Chat Server Engine via
its internal components: Chat REST API Client Library and Chat WebSocket Client
Library.
 Chat UI displays data to users: Chat Contact List UI, Chat Dialog UI

Component:

App.js is the starting point of our React app.

A package.json file:

 lists the packages your project depends on

 specifies versions of a package that your project can use.
 makes your build reproducible, and therefore easier to share with other developers.

A package.json file may look similar to this:

CODE:-

{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.7.9",
"chatapp": "file:..",
"lucide-react": "^0.469.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hot-toast": "^2.4.1",
"react-icons": "^5.4.0",
"react-router-dom": "^7.1.0",
"socket.io-client": "^4.8.1",
"zustand": "^5.0.2"

13
 },
"devDependencies": {
"@eslint/js": "^9.15.0",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"daisyui": "^4.12.22",
"eslint": "^9.15.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.14",
"globals": "^15.12.0",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.17",
"vite": "^6.0.1"
}
}

Figure 4 : Package.json file of Client-side

3.2.2) Chat Server Engine

This is a core of the chat architecture that handles message delivery and dispatch. In
our version of chat architecture, it includes the following components:

 Chat REST API handles the tasks that are not connected directly to message dispatch
and delivery, such as user authentication, changing of user settings, etc.
 The Chat App (the chat client part) communicates with the Chat REST API via the
Chat REST API Client Library. Chat WebSocket Server is responsible for
transmitting messages between users.
 TheChat App communicates with the Chat WebSocket Server via the Chat
WebSocket Client Library. This connection is open two ways; that means users
don’t have to make requests to the server if there are any messages for them, they just
get them right away.

14
{
"name": "backend",
"version": "1.0.0",
"main": "Scr/index.js",
"scripts": {
"dev": "nodemon Scr/index.js",
"start": "node Scr/index.js"
},
"keywords": [],
"author": "",
"type": "module",
"license": "ISC",
"description": "",
"dependencies": {
"bcryptjs": "^2.4.3",
"chatapp": "file:..",
"cloudinary": "^2.5.1",
"cookie-parser": "^1.4.7",
"cors": "^2.8.5",
"dotenv": "^16.4.7",
"express": "^4.21.2",
"jsonwebtoken": "^9.0.2",
"mongoose": "^8.9.1",
"socket.io": "^4.8.1"
},
"devDependencies": {
"nodemon": "^3.1.9"
}
}

Figure 5 : Dependencies for Server

15
3.2.3) Web Socket

WebSocket is a popular communication protocol (TCP) that enables seamless full-duplex

communication (two-way communication) between client and server. In other words, it
allows websites send and receive data without delay. WebSockets do not use the http:// or
https:// scheme (because they do not follow the HTTP protocol). Instead,

WebSocket URIs use a new scheme ws: or wss: (recommended) for a secure WebSocket.
Web developers use WebSocket to build chat applications, multiplayer games, SDKs, or
user interfaces exposing server-side services in real-time and so much more.

import { Server } from "socket.io";

import http from "http";
import express from "express";

const app = express();

const server = http.createServer(app);

const io = new Server(server, {

cors: {
origin: ["http://localhost:5173"],
},
});

export function getReceiverSocketId(userId) {

return userSocketMap[userId];
}

// used to store online users

const userSocketMap = {}; // {userId: socketId}

io.on("connection", (socket) => {

console.log("A user connected", socket.id);

const userId = socket.handshake.query.userId;

if (userId) userSocketMap[userId] = socket.id;

// io.emit() is used to send events to all the connected clients

io.emit("getOnlineUsers", Object.keys(userSocketMap));

socket.on("disconnect", () => {
console.log("A user disconnected", socket.id);
delete userSocketMap[userId];
io.emit("getOnlineUsers", Object.keys(userSocketMap));

16
 });
});

export { io, app, server };

Figure 6: Socket Code

17
 CHAPTER-4

RESULTS

4.1) Screenshots

Below are the screenshots of our web based chat application that demonstrate its
functioning:-

HomePage:-

18
Profile Page:-

Figure 7 : Profile Page

Setting Page:-

Figure 8 : Setting Page

19
4.2) Chatting Demo

Here is a depiction how your send and received messages will appear on the

respective screens.

Figure 9: Chatting Sample

20
 Chapter -5

Deployment

Deployment Strategy
The application is deployed on Render, a cloud application platform that simplifies the
deployment process. By connecting the application's GitHub repository to Render, any
changes pushed to the repository automatically trigger a new deployment, ensuring
continuous integration and delivery.

21
 Chapter- 6

Future Enhancements

This section outlines potential improvements and additional features that could
be implemented to expand the functionality, usability, and scalability of the chat
application. These enhancements aim to meet evolving user needs and leverage
advancements in technology.

Key Future Enhancements:

1. Voice and Video Calls:

o Integrate real-time voice and video calling functionalities.
o Leverage WebRTC (Web Real-Time Communication) for seamless
peer-to-peer communication.
o Include features like call recording and screen sharing for
collaborative purposes.
2. Message Reactions:
o Allow users to react to messages using emojis or predefined
responses.
o Enhance user engagement by providing quick interaction options.
3. Search Functionality:
o Enable users to search through chat histories for specific messages,
links, or files.
o Provide advanced filters like date range, sender, or content type.
4. Offline Mode:
o Allow users to access recently received messages even without an
internet connection.
o Use local storage or service workers for caching essential data.
5. Advanced File Sharing:
o Support larger files with preview options for images, videos, and
documents.
o Include features for editing and annotating shared files within the
chat.
6. Push Notifications:
o Implement real-time notifications for new messages, mentions, or
group activity.
o Allow customization of notification preferences (e.g., sound,
vibration, banner).
7. Thematic Customization:
o Offer dark mode and customizable themes for a personalized user
experience.

22
 oProvide options to change chat backgrounds and UI colors.
8. Enhanced Admin Features:
o Add detailed analytics for group chats, such as user engagement
and message trends.
o Enable admins to manage user permissions, delete inappropriate
content, and generate reports.

Benefits of These Enhancements:

 User Retention: Advanced features like voice calls and search

functionality keep users engaged.
 Accessibility: Multi-language support and offline mode cater to diverse
user needs.
 Scalability: Push notifications and enhanced admin tools improve system
management and user satisfaction.

These enhancements ensure the application evolves with user expectations and
technological trends, making it competitive and future-proof.

23
 CHAPTER-7

CONCLUSION

There is always a room for improvements in any apps and this being in its primary phase
needs a loads of it. But I will keep working on it and improving it with technological
advancements in coming times. Right now, we are just dealing with text communication.
There are several chat apps which serve similar purpose as this project, but these apps were
rather difficult to use and provide confusing interfaces. I have built this application keeping
in mind that even the very beginner with technology can operate this application with ease.
A positive first impression is essential in human relationship as well as in human computer
interaction. This project hopes to develop a chat service Web app with high quality user
interface. In future we may be extended to include features such as file transfer, video
message, voice message, audio and video calls etc.

24