Online Realtime Chat-Application

(Talk-A-Tive)
Under Guidance Of
Mr. Asraf Ali
Subject Matter Expert(MERN)

Ardent Computech Pvt Ltd(An ISO 9001:2008 Certified)

CF-137, Sector - 1, Salt Lake City, Kolkata - 700 064
A
Project Report
Submitted In Partial Fulfillment Of The Requirements
For The Award Of the
Bachelor of Computer Application
Project Carried Out At

Ardent Computech Pvt Ltd(An ISO 9001:2008 Certified)

CF-137, Sector - 1, Salt Lake City, Kolkata - 700 064

Submitted By

Rajdeep Biswas
Mohit Das
Boni Mondal
Dip Kumar
Chowdhuri

Bachelors in Computer Application

Eminent College of Management & Technology

Kolkata -700126
West Bengal | INDIA |

1
(Note: All entries of the proforma of approval should be filled up with appropriate and complete information of
approval in any respect will be summarily rejected.)
1. Name of the Student With Group: 1: Rajdeep Biswas
2:Mohit Das
3: Boni Mondal
4: Dip kumar Chowdhuri
2. Title of the Project : Online Realtime Chat-Application(Talk-A-Tive)
3. Name and Address of the Guide : Mr. Asraf Ali
Sr. Subject Matter Expert & Technical Head(Mern)
Ardent Computech Pvt Ltd(An ISO 9001:2008
Certified) CF-137, Sector - 1, Salt Lake City, Kolkata -
700 064

4. Educational Qualification of the Guide : Ph.d* M.tech* B.E*/B.Tech * MCA* M.Sc*

5. Working and Teaching experience

of the Guide : …….Years

6. Software used in the Project:

a. Visual Studio Code
b. Post Man Api
c. Mongo DB Atlas

1.
2.
3.
4.

Signature of the Student Signature of the Guide

Date: Date:
For Office Use Only Name: Mr.Asraf Ali
Subject MatterExpert.(MERN)
Signature, Designation, Stamp of the Project
Proposal Evaluato
Approved Not Approved

2
 Self Certificate

This is to certify that the dissertation/project proposal entitled “Online Realtime Chat
Application” is done by us, is an Authentic work carried out for the partial fulfillment of the
requirements for the award of the certificate of Bachelor of Technology under the guidance of Mr.
Asraf Ali The matter embodied in this project work has not been submitted earlier for award of any
certificate to the best of our knowledge and belief.

Name of the Student

7. 1: Rajdeep
Biswas 2:Mohit
Das
3: Boni Mondal
4: Dip kumar Chowdhuri

Signature of the students

a.
b.
c.
d.

3
 Certificate by Guide

This is to certify that this project entitled “Online Realtime Chat Application” “submitted
inpartial fulfillment of the certificate of Bachelor of Computer Application through Ardent
Computech Pvt Ltd, done by the
Group Members
1: Rajdeep
Biswas 2:Mohit
Das
3: Boni Mondal
4: Dip kumar Chowdhuri

is an authentic work carried out under my guidance & best of our knowledge and belief..
a.

b.

c.

d.

Signature of the students Signature of the Guide

Date: Date:

4
 Certificate of Approval

This is to certify that this proposal of Minor project, entitled “Online Realtime Chat
Application” is a record of bona-fide work, carried out by: 1.Rajdeep Biswas, 2. Mohit Das,
3.Boni Mondal, 4.Dip Kumar Chowdhuri under my supervision and guidance through the Ardent
ComputechPvt Ltd. In my opinion, the report in its present form is in partial fulfillment of all the
requirements, as specified by the Kanad Institute of Engineering and Management as per
regulations of the Ardent® . In fact, it has attained the standard, necessary for submission. To
the best of my knowledge, the results embodied in this report, are original in nature and worthy
of incorporation in the present version of the report for Bachelor of Technology.

Guide/Supervisor

Mr. Asraf Ali

Subject Matter Expert & Technical Head
(MERN)Ardent Computech Pvt Ltd (An ISO
9001:2008 Certified)CF-137, Sector - 1, Salt Lake City,
Kolkata - 700 064

External Examiner(s) Head of the Department

Department of Computer Science

Durgapur, W.B
(Affiliated to WBUT,WB)

5 S
 TABLE OF CONTENTS
List of Figures....................................................................................................................................i
Abstract.............................................................................................................................................ii
Graphical Abstract.........................................................................................................................iii
Abbrevations....................................................................................................................................iv
Symbols.............................................................................................................................................v
Company Profile............................................................................................................................vi
Chapter 1. INTRODUCTION 4
1.1. Client Identification
1.2. Identification of Problem
1.3. Identification of Tasks
1.4. Timeline
1.5. Organization of the Report

Chapter 2. LITERATURE REVIEW/BACKGROUND STUDY 7

2.1. Timeline of the reported problem
2.2. zProposed solutions
2.3. Bibliometric analysis
2.4. Review Summary
2.5. Problem Definition
2.6. Goals/Objectives

Chapter 3. DESIGN FLOW/PROCESS 11

3.1. Evaluation & Selection of Specifications/Features
3.2. Design Constraints
3.3. Analysis and Feature finalization subject to constraints
3.4. Design Flow And Implementation plan/methodology
Chapter 4. RESULTS ANALYSIS AND VALIDATION 17
4.1. Implementation of solution

Chapter 5. CONCLUSION AND FUTURE WORK 21

5.1. Conclusion
5.2. Future work

References 23
6 S
 List of Figures
Figure 1: Flowchart of interaction between client and server

Figure 1.1: Gantt chart showing Timeline

Figure 3.1: Block Diagram of Chat application

Figure 3.2: Well labelled diagram of main screen of Chat application

Figure 3.3: Data Flow Diagram

Figure 3.4: Data Flow Diagram

Figure 3.5: Data Flow Diagram

Figure 3.6: Use CaseDiagram

Figure 4.1: SignUp

Figure 4.2: SignIn

Figure 4.3: Profile Figure

4.4: Discover user

Figure 4.5: Message

notifications Figure 4.6: Real
time chat Figure 4.7: Chat group
Figure 4.8: Main Screen

7 S
 1. ARDENT COMPUTECH PVT.LTD.
Ardent Computech Private Limited is an ISO 9001-2008 certified Software
Development Company in India. It has been operating independently since
2003. Itwas recently merged with ARDENT TECHNOLOGIES.

Ardent Technologies
ARDENT TECHNOLOGIES is a Company successfully providing its services
currently in UK, USA, Canada and India. The core line of activity at ARDENT
TECHNOLOGIES is to develop customized application software covering the
entire responsibility of performing the initial system study, design,
development, implementation and training. It also deals with consultancy
services and Electronic Security systems. Its primary clientele includes
educational institutes, entertainment industries, resorts, theme parks, service
industry, telecom operators, media and other business houses working in
various capacities.

Ardent Collaborations
ARDENT COLLABORATIONS, the Research Training and Development
Department of ARDENT COMPUTECH PVT LTD is a professional training
Company offering IT enabled services & industrial trainings for B-Tech,
MCA, BCA, MSc and MBA fresher’s and experienced
developers/programmers in various platforms. Summer Training / Winter
Training / Industrial training will be provided for the students of B.TECH,
M.TECH, MBA and MCA only. Deserving candidates may be awarded
stipends, scholarships and other benefits, depending ontheir performance and
recommendations of the mentors.

Associations

Ardent is an ISO 9001:2008 company.

It is affiliated to National Council of Vocational Training (NCVT), Directorate

General of Employment & Training (DGET), Ministry of Labor &
Employment, and Government of India.

8 S
 ABSTRACT

The purpose of Online Chat Application is to automate the existing manual system
bythe help of computerized equipments and full-fledged computer software,
fulfilling their requirements, so that their valuable data/information can be stored
for a longer period with easy accessing and manipulation of the same. The required
software and hardware are easily available and easy to work with.

Online Chat Application, as described above, can lead to error free, secure, reliable
and fast management system. It can assist the user to concentrate on their other
activities rather to concentrate on the record keeping. Thus it will help organization
inbetter utilization of resources. The organization can maintain computerized
records without redundant entries. That means that one need not be distracted by
information that is not relevant, while being able to reach the information.

The aim is to automate its existing manual system by the help of computerized
equipments and full-fledged computer software, fulfilling their requirements, so that
their valuable data/information can be stored for a longer period with easy accessing
and manipulation of the same. Basically the project describes how to manage for
goodperformance and better services for the clients.

9 S
 GRAPHICAL ABSTRACT

Figure 1: Flowchart of interaction between client and server

Chat app website we visit use HTTP to make API calls, which means the
client sends a request to the server, and the server sends back a response.
This kind of communication can only be initiated by the client. It suits most
needs for a website, e.g. to get data from aserver once.

1 S
 ABBREVIATIONS

API : Application programming interface

DOM: Document object model GUI:

Graphical User Interface JSON:

JavaScript Object Notation OOP:

Oriented Programming REST:

Represntation State transfer

IDE: Integrated Development Environment

1 S
CHAPTER 1
INTRODUCTION
1.1. Client Identification/Need Identification/Identification of relevant
Contemporary issue
The old manual system was suffering from a series of drawbacks. Since
whole of the system was to be maintained with hands the process of
keeping, maintaining and retrieving the information was very tedious
and lengthy. The records were never used to be in a systematic order.
there usedto be lots of difficulties in associating any cular transaction
with a particular context. If any information was to be found it was
required to go through the different registers, documents therewould
never exist anything like report generation. There would always be
unnecessary consumption of time while entering records and retrieving
records. One more problem was that itwas very difficult to find errors
while entering the records. Once the records were entered it was very
difficult to update these records.

The reason behind it is that there is lot of information to be maintained

and have to be kept in mind while running the business .For this reason
we have provided features Present system is partially automated
(computerized), actually existing system is quite laborious as one has to
enter same information at three different places.
1 S
1.2. Identification of Problem

The "Online Chat Application" has been developed to override the

problems prevailing in the practicing manual system. This software is
supported to eliminate and in some cases reduce the hardships faced by
this existing system. Moreover this system is designed for the particular
needof the company to carry out operations in a smooth and effective
manner.

use this system. Thus by this all it proves it is user-friendly. Online Chat
Application, as described above, can lead to error free, secure, reliable
and fast management system. It can assist the user to concentrate on
their other activities rather to concentrate on the record keeping. Thus it
will help organization in better utilization of resources.

1 S
Every organization, whether big or small, has challenges to overcome
and managing the information of Chat User, Chat Profile, Group Chat,
Multi Chat, Smilies Chat. Every Online Chat Application has different Chat
Profile needs, therefore we design exclusive employee managementsystems
that are adapted to your managerial requirements. This is designed to
assist in strategic planning, and will help you ensure that your
organization is equipped with the right level of information and details
for your future goals. Also, for those busy executive who are always on
the go, our systems come with remote access features, which will allow
you to manage your workforce anytime, at all times. These systems will
ultimately allow you to better manage resources.

1.3. Identification of Tasks

The web app will be consist of 2 parts, the client and the server.

The client will contain 2 main components: a login form, where the user
can write a use name to use for the chat and the option to upload an
image to use as an avatar throughout the conversation.The second
component will consist of the chat messages, where each message that
is sent, is viewed from anyone that’s connected to the chat room.

1 S
The server will accept two type of connections: an HTTP request, to
accept an image file, upload toa Cloudinary media library through their
API and return the image’s link. By creating an account, you can get
about 100MB of storage. The second connection the server manages is a
WebSocket port to manage incoming connections and broadcast
messages to all connected clients, in real time.

As we expect a large volume of data to be written to the database in a

short amount of time and thedata that we save are unstructured (using
an avatar is not mandatory), it makes sense to use a NoSQL type of
database. For this application, we will be using MongoDB.

1 S
1.4. Timeline

Figure 1.1: Gantt chart showing Timeline

1.5. Organization of the Report

We will do this project in a group of three team members with proper

coordination and cooperation,also wanted to thank our teachers who
gave us the golden opportunity to work upon and complete this project
within a given span of time. Mam will guide us but also gave us creative
ideas that will implement while working upon the project. Team members
Ashish Kumar and Ayush Kumar has taken the responsibility of front end
of the project by using React.js also Ashish has got creative mind and has
deep interest in designing web pages using figma.
I ( Ashish kumar ) and Ayush Tripathy will do back end because we both
have deep interest inprogramming, using node.js and mongoDB as
database.
1 S
 CHAPTER 2
LITERATURE REVIEW/BACKGROUND STUDY
2.1. Timeline of the reported problem

. Email , chat applications provide one to one communication i.e

only two people can talk to each other. But what if we want to
send something to a group .So our applicationsolves that only.
The second problem is authentication. Many people create fake
ids and can spam or sellproducts to you. This is the second
problem that we have solved.
2.2. Proposed solutions

In this application we will be able to make a group and send

something globally. After thatthere is a proper login system that
marks your identity and at what time you are sending message.
Authentication enables organizations to keep their networks secure
by permittingonly authenticated users or processes to gain access to
their protected resources.

This may include computer systems, networks, databases,

websites and other network-based applications or services.
2.3. Bibliometric analysis

Chat rooms have become very popular after the covid era.
Whether it is team meetings oryou want to share something
everyone uses chat apps. Authentication is used by a
server when the server needs to know exactly who is accessing their
information or site. Authentication is used by a client when the
client needs to know that the server is system itclaims to be.

1 S
2.4. Review Summary

A chat application makes it easy to communicate with people

anywhere in the world by sending and receiving messages in real
time. With a real-time chat app, users are able to receive the same
engaging and lively interactions through custom messaging
features, justas they would in person.

1 S
2.5. Problem Definition

We will be able to make a group and send something to a group.

After that there is aproper login system that marks your identity
and at what time you are sending message.This is done using
nosql database mongodb.

2.6. Goals/Objectives

Statements setting the milestones during the

course of project work.Keeping in mind
• To make a encrypted chat app using mern stack
• To learn react js because it is one of the most trending technologies.
• To learn socket.io
• To know the fundamentals of nosql database

1 S
 CHAPTER 3 DESIGN
FLOW/PROCESS
3.1. Evaluation & Selection of Specifications/Features
The web app will be consist of 2 parts, the client and the server.The client
will contain 2 main components: a login form, where the user can write a
use name to use for the chat and the option toupload an image to use as
an avatar throughout the conversation. The second component will
consist of the chat messages, where each message that is sent, is viewed
from anyone that’s connected to the chat room.
3.2. Design Constraints
The server will accept two type of connections: an HTTP request, to
accept an image file, upload toa Cloudinary media library through their
API and return the image’s link. By creating an account, you can get
about 100MB of storage. The second connection the server manages is a
WebSocket port to manage incoming connections and broadcast
messages to all connected clients, in real time.

As we expect a large volume of data to be written to the database in a

short amount of time and thedata that we save are unstructured (using
an avatar is not mandatory), it makes sense to use a NoSQL type of
database. For this application, we will be using MongoDB.
2 S
 3.3. Analysis and Feature finalization subject to constraints

In this application we will be able to make a group and send something

globally. After that there is aproper login system that marks your identity
and at what time you are sending message.
Authentication enables organizations to keep their networks secure by
permitting only authenticatedusers or processes to gain access to their
protected resources.

This may include computer systems, networks, databases, websites and

other network-based applications or services.We will be able to make a
group and send something to a group. After thatthere is a proper login
system that marks your identity and at what time you are sending
message.This is done using nosql database mongodb.

2 S
 3.4. Design Flow And Implementation plan/methodology

Figure 3.1: Block Diagram of Chat application

This is how the app works. One user can send message to multiple users at
a time. Everytime a user sends a message it gets registered in the
database and then pops up on the screen of all the members of the group
at once. There is also a notification tab which shows notification when a
user’s messagecomes.

CHAT CLIENT
The chat client is what the user experiences. A desktop, web or
smartphone chat application, the chatclient is responsible for interacting
with the operating system. Interactions include sending push notifications,
displaying data to the user and storing messages and files. When you type
a message and hit send, the chat client transmits that message to the
server.
CHAT SERVER
The chat server is just that, a that hosts all the software, frameworks and
databases necessary for thechat app to operate. This server is responsible
for securely receiving a message, identifying the receiver and then
forwarding the message to the client.
CHAT rest API
A Chat REST API is used to facilitate the functionality of the chat app
outside of messaging. Forexample, authentication, profile settings and
notification settings can all be managed through a REST API

2 S
 DESIGN SELECTION

The specifications of our chat application-

Figure 3.2: Well labelled diagram of main screen of Chat application

The design that we have selected is the normal layout of a chat application.
Just like whatsapp usesdark green for the chats we use the same. Apart
from that the background is plain white and grey.

As mentioned above,all the functionalities are:

• User Registration and Authentication: If you want users, you have to give people a way to use
your chat app. The most common way to register and authenticate users is with their email.

• Group messaging: The core feature of a chat app is the ability to send and receive messages..
Pushnotifications: You don’t want your users to have to open your app every few minutes to check
for new messages. Push notifications will notify the user of newer messages.

• Leaving group-you have the full right to leave the group.There is a functionality in which you
can do this in just one click.

2 S
 Data Flow Diagram – 0 level

Figure 3.3: 0 Data Flow Diagram

2 S
 Data Flow Diagram- 1 level

Figure 3.4: 1 Data Flow Diagram

2 S
Data flow Diagram

Figure 3.5: 2Data Flow Diagram

2 S
Use Case Diagram :

Figure 3.6: Use Case Diagram

2 S
 CHAPTER 4
RESULTS ANALYSIS AND VALIDATION

4.1. Implementation of solution

Implementation is a vital step in ensuring the success of a new system even a well
designs system can fail if it is not properly implemented. Implementation
activitiesare needed to transform a newly developed information system into a
operational system for end users.

1. Sign Up and SignIn Interface of chat app

Figure 4.1: SignUp Figure 4.2: SignIn

2 S
2. Profile Interface of user

Figure 4.3: Profile

3. User searching for other User for chatting

Figure 4.4: Discover user

2 S
4. User getting Message notifications

Figure 4.5: Message notifications

5. Real time chatting between two users (shown side by side window)

Figure 4.6: Real time chat

3 S
6. Creating Chat group

Figure 4.7: Chat group

7. Main Screen

Figure 4.8: Main Screen

3 S
CHAPTR 5
CONCLUSION AND
FUTUREWORK
5.1. Conclusion

The main objective of the project is to develop a Secure Chat

Application. I had taken a wide range of literature review in order to
achieve all the tasks, where I came to know about some of the
products that are existing in the market. I made a detailed research
in thatpath to cover the loop holes that existing systems are facing
and to eradicate them in our application. In the process of research I
came to know about the latest technologies and different algorithms.

A project is successfully completed only when there is a

contribution of all the members ofa team each member in a project
has required objective to complaints in the same weight complete
this project we divided our work in equal manner instead of
selecting particular task to be do individually be divided single task
into multiples of task so that we all can work together on the same
phase or task of projects doing so on no team member hai to wayto

3 S
show his or her capabilities.
As a result, the product has been successfully developed in terms of
extendability, portability,and maintainability and tested in order to
meet all requirements that are Authentication , Integrity ,
Confidentiality
Which are specified as the four basic concepts for the secure
communication over a network.

3 S
 5.2. Future work

With the knowledge I have gained by developing this application, I am

confident that in thefuture I can make the application more effectively
by adding this services.

• Extending this application by providing Authorisation service.

• Creating Database and maintaining users.
• Increasing the effectiveness of the application by providing Voice Chat.

The above mention points are the enhancement which can be done to
increase the applicability and the uses of this product. Here we can
maintain records of chat profile and chat user also as itcan be seen that
now-a-days the players are versatile i.e.there is also scope of
introducing a method to maintain online chat application can be done
to maintain all the chat profile user chat history ,group chat ,smile chat.

3 S
 REFEENCES

So, in order to complete this project, we have collected many things from
the following onlineresources from development to deployment ,from
learing to implementing:

https://stackoverflow.com/

www.youtube.com

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

https://www.quackit.com/css/color/tools/css_color_picker.cfm

www.w3schools.com

https://reactjs.org/docs/getting-started.html
https://www.mongodb.com/developer/products/atlas/

3 S
 USER MANUAL
(Complete step by step instructions along with pictures necessary
to run the project)

Step 1:Unzip the folder

chatApp.zipStep 2:Open

folder via VS Code

Step 3: cd frontend and install dependencies using npm install

Step 4: Open new terminal, cd backend and install
dependencies using npminstall Step 5:Start backend

first using npm start

Step 6: Start fronted using npm

start

3 S