A

Project Report On
Real Time Chatting Application
Submitted in partial fulfilment of the requirements for the award of degree

From
Pt. Ravishankar Shukla University, Raipur (C.G.)

Guided By: Submitted By:

Miss. Pooja Singh Aryan Dewangan
Asst. Professor (CS) BCA – III

Submitted to
Disha College
Pt. Ravishankar Shukla University, Raipur (C.G.)

1|Page
 CERTIFICATE OF APPROVAL

This is to certify that the Project work entitled “Real Time Chatting
Application” is carried out by Aryan Dewangan a student of BCA-III
year at Disha College is here by approved as a credible work in the
discipline of Computer Science & Information Technology for the award
of degree of Bachelor of Computer Application during the year 2022-23
from Pt. Ravishankar Shukla University, Raipur (C.G.).

Dr. A.K. Tiwari

Principal
Disha College, Raipur

2|Page
 CERTIFICATE

This is to certify that the Project work entitled “Real Time Chatting
Application” Submitted to Disha College by Aryan Dewangan, Roll
No_____________ in partial fulfilment for the requirements relating to
nature and standard of the award of Bachelor of Computer Application
degree by Pt. Ravishankar Shukla University, Raipur(C.G.) for the
academic year 2022-23.
This project work has been carried out under my guidance.

Guide
Miss Pooja Singh
Asst. Professor(CS)
Disha College, Raipur

3|Page
 CERTIFICATE OF EVALUATION

This is to certify that the Project work entitled “Real Time Chatting
Application” is carried out by Aryan Dewangan Roll no_____________
a student of BCA-III year at Disha College after my proper evaluation and
examination, is here by approved as a credible work in the discipline of
Computer Science & Information Technology for the award of degree of
Bachelor of Computer Application during the year 2022-23 from Pt.
Ravishankar Shukla University, Raipur (C.G.).

Internal Examiner External Examiner

4|Page
 DECLARATION

This is to certify that the project work entitled “Real Time Chatting
Application” submitted by me in the partial fulfilment for the award of the
degree of Bachelor of Computer Application to Disha College,
comprises the original work carried out by me.
I further declare that the work reported in this project has not been
submitted and will not be submitted, either in part or in full for the award
of any other degree or diploma in this Institute or University.

Place: ___________ Name: Aryan Dewangan

Date:____________ Roll no: ____________

5|Page
 ACKNOWLEDGEMENT

I would like to express my special thanks of gratitude to my principle Dr.

A. K. Tiwari who gave me this golden opportunity to do this wonderful
project. I would also thank Mrs. Seema Pathak HOD (Comp.Sc.) for
approving our project on “REAL TIME CHATTING APPLICATION”.
I feel highly elevated in expressing our immense sense of gratitude
towards my Project Guide Miss Pooja Singh for the esteemed guidance,
prompt suggestions and interest she showed towards completion of this
project entitled “REAL TIME CHATTING APPLICATION”. It was an
especially a contribution for me to have her for the guidance of the project
as she always gave us ideas and suggestions, also response in best
manners.
I would also like to extend my gratitude to other faculty members of our
department for their support and encouragement. I believe this endeavour
of mine will boost my self-confidence and will go long on helping me to
reach further milestones and greater heights.

ARYAN DEWANGAN
BCA – III

6|Page
 INDEX

1. Objective and Scope of the Project

2. Theoretical Background of Project
3. Definition of Problem
4. System Analysis and Design
5. Methodology adopted and Detail of Hardware & Software Used
6. System Maintenance and Evaluation
7. Cost and Benefit Analysis
8. Detailed Life Cycle of the Project
8.1 ERD and DFD
8.2 Input and Output Screen Design.
8.3 Process Involved.
8.4 Methodology used for Testing.
8.5 Test reports, Print out of the code sheet
9. User/Operational Manual –Including Security aspects backup, Access
Rights, Controls etc.
10. Conclusion
11. References
12. Soft Copy of the Project on CD

7|Page
 1.1 Objective of the Project

Our goal is to build a web chat that holds a single chat room. Any user can connect to
it from an open window/tab each connected user will see instantly any message sent,
and new connected users will see the last 10 messages sent. MongoDB makes use of
records which are made up of documents that contain a data structure composed of
field and value pairs. Documents are the basic unit of data in MongoDB. Express
does is that it enables you to easily create web applications by providing a slightly
simpler interface for creating your request endpoints, handling cookies, etc. than
vanilla Node. React is an open-source, component-based JavaScript library used to
create quick and interactive interfaces or UI components for users for web and
mobile-based applications.
It is a declarative and highly accurate library that provides reusable code, which
enhances the efficiency and flexibility of single-page applications.Node.js is an open-
source and cross-platform JavaScript runtime environment. Node.js with Express.js
can also be used to create classic web applications on the server-side.

8|Page
 1.2 Scope of the Project

The scope of the project should be broken-down and the system should be declared
before advancing further. The scope are as follows:
1. The design and the construction of this application is aimed to at building a
web-based application and mobile application.
2. This system is developed using React.js And Node.js.
3. The database of this system implemented using MongoDB.

9|Page
 2. Theoretical Background Of Project

This project is designed with HTML, CSS, JavaScript, React.js (Front-End) and
Express.js, Node.js, MongoDB, Socket.io (Back-End).

2.1 What is HTML ?

HTML is an acronym which stands for Hyper Text Markup Language which is
used for creating web pages and web applications. Let's see what is meant by
Hypertext Markup Language, and Web page.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it,
is a hypertext. Whenever you click on a link which brings you to a new webpage, you
have clicked on a hypertext. HyperText is a way to link two or more web pages
(HTML documents) with each other.

Markup language: A markup language is a computer language that is used to apply

layout and formatting conventions to a text document. Markup language makes text
more interactive and dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and
translated by a web browser. A web page can be identified by entering an URL. A
Web page can be of the static or dynamic type. With the help of HTML only, we
can create static web pages.

Syntax –
<!DOCTYPE html>
<html>
<head>
<title>title page</title>
</head>
<body>
<h1>heading</h1>

10 | P a g e
<p>paragraph</p>
</body>
</html>

2.2 What is CSS ?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language

intended to simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the
color of the text, the style of fonts, the spacing between paragraphs, how columns are
sized and laid out, what background images or colors are used, layout
designs,variations in display for different devices and screen sizes as well as a variety
of other effects.
CSS is easy to learn and understand but it provides powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.

Advantages Of CSS –

 CSS saves time − You can write CSS once and then reuse same sheet in
multiple HTML pages. You can define a style for each HTML element
and apply it to as many Web pages as you want.

 Pages load faster − If you are using CSS, you do not need to write
HTML tag attributes every time. Just write one CSS rule of a tag and
apply it to all the occurrences of that tag. So less code means faster
download times.

 Easy maintenance − To make a global change, simply change the style,

and all elements in all the web pages will be updated automatically.

 Superior styles to HTML − CSS has a much wider array of attributes

than HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.

11 | P a g e
  Multiple Device Compatibility − Style sheets allow content to be
optimized for more than one type of device. By using the same HTML
document, different versions of a website can be presented for handheld
devices such as PDAs and cell phones or for printing.

 Global web standards − Now HTML attributes are being

deprecated and it is being recommended to use CSS. So its a good
idea to start using CSS in all the HTML pages to make them
compatible to future browsers.

Syntax -
<style>
P{
Align-item: center;
Font-size: 15px;
Color: pink;
}
</style>

2.3 What is JavaScript ?

JavaScript is a dynamic computer programming language. It is lightweight and most

commonly used as a part of web pages, whose implementations allow client-side
script to interact with the user and make dynamic pages. It is an interpreted
programming language with object-oriented capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to
JavaScript, possibly because of the excitement being generated by Java. JavaScript
made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The
general-purpose core of the language has been embedded in Netscape, Internet
Explorer, and other web browsers.
 JavaScript is a lightweight, interpreted programming language.
 Designed for creating network-centric applications.

12 | P a g e
  Complementary to and integrated with Java.
 Complementary to and integrated with HTML.
 Open and cross-platform

Advantages Of JavaScripts –

The merits of using JavaScript are −

 Less server interaction − You can validate user input before sending the
page off to the server. This saves server traffic, which means less load on
your server.

 Immediate feedback to the visitors − They don't have to wait for a page
reload to see if they have forgotten to enter something.

 Increased interactivity − You can create interfaces that react when the
user hovers over them with a mouse or activates them via the keyboard.

 Richer interfaces − You can use JavaScript to include such items as

drag-and-drop components and sliders to give a Rich Interface to your
site visitors.

Limitations of JavaScript -
We cannot treat JavaScript as a full-fledged programming language. It lacks the
following important features −
 Client-side JavaScript does not allow the reading or writing of files. This
has been kept for security reason.
 JavaScript cannot be used for networking applications because there is
no such support available.
 JavaScript doesn't have any multi-threading or multiprocessor
capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that
allows you to build interactivity into otherwise static HTML pages.

Syntax –
<script>

13 | P a g e
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>

2.4 What is React.js ?

ReactJS is one of the most popular JavaScript front-end libraries which has a strong
foundation and a large community.

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

reusable UI 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.

Our ReactJS tutorial includes all the topics which help to learn ReactJS. These are
ReactJS Introduction, ReactJS Features, ReactJS Installation, Pros and Cons of
ReactJS, ReactJS JSX, ReactJS Components, ReactJS State, ReactJS Props, ReactJS
Forms, ReactJS Events, ReactJS Animation and many more.

React Features –

Currently, ReactJS gaining quick popularity as the best JavaScript framework among
web developers. It is playing an essential role in the front-end ecosystem. The
important features of ReactJS are as following.

 JSX
 Components
 One – way data binding
 Virtual DOM
 Simplicity

14 | P a g e
  Performance

JSX –
JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML or
HTML like syntax used by ReactJS. This syntax is processed into JavaScript calls of
React Framework. It extends the ES6 so that HTML like text can co-exist with
JavaScript react code. It is not necessary to use JSX, but it is recommended to use in
ReactJS.

Components –
ReactJS is all about components. ReactJS application is made up of multiple
components, and each component has its own logic and controls. These components
can be reusable which help you to maintain the code when working on larger scale
projects.

One – way Data Binding –

ReactJS is designed in such a manner that follows unidirectional data flow or one-
way data binding. The benefits of one-way data binding give you better control
throughout the application. If the data flow is in another direction, then it requires
additional features. It is because components are supposed to be immutable and the
data within them cannot be changed. Flux is a pattern that helps to keep your data
unidirectional. This makes the application more flexible that leads to increase
efficiency.

Virtual DOM –
A virtual DOM object is a representation of the original DOM object. It works like a
one-way data binding. Whenever any modifications happen in the web application,
the entire UI is re-rendered in virtual DOM representation. Then it checks the
difference between the previous DOM representation and new DOM. Once it has
done, the real DOM will update only the things that have actually changed. This
makes the application faster, and there is no wastage of memory.

Simplicity –
ReactJS uses JSX file which makes the application simple and to code as well as
understand. We know that ReactJS is a component-based approach which makes the
code reusable as your need. This makes it simple to use and learn.

Performance –
15 | P a g e
ReactJS is known to be a great performer. This feature makes it much better than
other frameworks out there today. The reason behind this is that it manages a virtual
DOM. The DOM is a cross-platform and programming API which deals with HTML,
XML or XHTML. The DOM exists entirely in memory. Due to this, when we create
a component, we did not write directly to the DOM. Instead, we are writing virtual
components that will turn into the DOM leading to smoother and faster performance.

Syntax -
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>JavaTpoint</h1>
<h2>Training Institutes</h2>
<p>This website contains the best CS tutorials.</p>
</div>
);
}
}
export default App;

2.5 What is Express.js ?

Express is a fast, assertive, essential and moderate web framework of Node.js. You
can assume express as a layer built on the top of the Node.js that helps manage a
server and routes. It provides a robust set of features to develop web and mobile
applications.
some of the core features of Express framework:
 It can be used to design single-page, multi-page and hybrid web applications.
 It allows to setup middlewares to respond to HTTP Requests.
 It defines a routing table which is used to perform different actions based on
HTTP method and URL.

16 | P a g e
  It allows to dynamically render HTML Pages based on passing arguments to
templates.

Syntax –
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
console.log('Example app listening at http://%s:%s', host, port);
});

2.6 What is Node.js ?

Node.js is an open-source and cross-platform JavaScript runtime environment. the

source code for Node.js is publicly available. And it's maintained by contributors
from all over the world. The Node.js contribution guide shows you how to contribute.

Node.js is cross-platform: Node.js is not dependent on any operating system

software. It can work on Linux, macOS, or Windows.

Node.js is a JavaScript runtime environment: When you write JavaScript code in

your text editor, that code cannot perform any task unless you execute (or run) it. And
to run your code, you need a runtime environment.
Browsers like Chrome and Firefox have runtime environments. That is why they can
run JavaScript code. Before Node.js was created, JavaScript could only run in a
browser. And it was used to build only front-end applications.

Node.js provides a runtime environment outside of the browser. It's also built on
the Chrome V8 JavaScript engine. This makes it possible to build back-end
applications using the same JavaScript programming language you may be familiar
with.

17 | P a g e
Concepts Of Node.js -

Features of Node.js –
 Asynchronous and Event Driven − All APIs of Node.js library are
asynchronous, that is, non-blocking. It essentially means 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.

 Very Fast − Being built on Google Chrome's V8 JavaScript Engine, Node.js

library is very fast in code execution.

 Single Threaded but Highly Scalable − Node.js uses a single threaded model
with event looping. Event mechanism helps the server to respond in a non-
blocking way and makes the server highly scalable as opposed to traditional
servers which create limited threads to handle requests. Node.js uses a single
threaded program and the same program can provide service to a much larger
number of requests than traditional servers like Apache HTTP Server.
 No Buffering − Node.js applications never buffer any data. These applications
simply output the data in chunks.

 License − Node.js is released under the MIT license

18 | P a g e
 2.7 What is MongoDB ?

MongoDB is an open-source document-oriented database that is designed to store a

large scale of data and also allows you to work with that data very efficiently. It is
categorized under the NoSQL (Not only SQL) database because the storage and
retrieval of data in the MongoDB are not in the form of tables.
The MongoDB database is developed and managed by MongoDB.Inc under
SSPL(Server Side Public License) and initially released in February 2009. It also
provides official driver support for all the popular languages like C, C++, C#,
and .Net, Go, Java, Node.js, Perl, PHP, Python, Motor, Ruby, Scala, Swift,
Mongoid. So, that you can create an application using any of these languages.
Nowadays there are so many companies that used MongoDB like Facebook, Nokia,
eBay, Adobe, Google, etc. to store their large amount of data.

Features of MongoDB –

 Schema-less Database: It is the great feature provided by the MongoDB.

A Schema-less database means one collection can hold different types of
documents in it. Or in other words, in the MongoDB database, a single
collection can hold multiple documents and these documents may consist
of the different numbers of fields, content, and size. It is not necessary that
the one document is similar to another document like in the relational
databases. Due to this cool feature, MongoDB provides great flexibility to
databases.

 Document Oriented: In MongoDB, all the data stored in the documents

instead of tables like in RDBMS. In these documents, the data is stored in
fields(key-value pair) instead of rows and columns which make the data
much more flexible in comparison to RDBMS. And each document
contains its unique object id.

 Indexing: In MongoDB database, every field in the documents is indexed

with primary and secondary indices this makes easier and takes less time
to get or search data from the pool of the data. If the data is not indexed,
then database search each document with the specified query which takes
lots of time and not so efficient.
19 | P a g e
  Scalability: MongoDB provides horizontal scalability with the help of
sharding. Sharding means to distribute data on multiple servers, here a
large amount of data is partitioned into data chunks using the shard key,
and these data chunks are evenly distributed across shards that reside
across many physical servers. It will also add new machines to a running
database.

 Replication: MongoDB provides high availability and redundancy with

the help of replication, it creates multiple copies of the data and sends
these copies to a different server so that if one server fails, then the data is
retrieved from another server.

 Aggregation: It allows to perform operations on the grouped data and get

a single result or computed result. It is similar to the SQL GROUPBY
clause. It provides three different aggregations i.e, aggregation pipeline,
map-reduce function, and single-purpose aggregation methods.

 High Performance: The performance of MongoDB is very high and data

persistence as compared to another database due to its features like
scalability, indexing, replication, etc.

2.8 Socket.io

Socket.io is a JavaScript library. It is a way to communicate between a client and a

server. It allows real-time data flow. It is bi-directional communication, means we
can flow data in both directions:
 Client to Server
 Server to Client

Socket.io has two parts: client-side and server-side. Both parts have an identical API.
 The server-side library runs in node.js.
 The client-side library runs in the browser.

20 | P a g e
Socket.IO is quite popular and companies like Trello, Yammer, Amazon, Zendesk,
and several others use it to develop robust real-time applications. Socket.io is a very
popular JavaScript framework on GitHub and is heavily dependent on the NPM
plugin. It runs on every browser or platform and focuses equally on speed and
reliability.

Features of Socket.IO –
 Reliability: It relies on Engine.IO, which establishes a long-running polling
connection before attempting to upgrade to better "testing" transports, such as
WebSocket.
 Auto-reconnection support: The disconnected client keeps trying to
reconnect until the server is available again.
 Disconnection detection: The heartbeat mechanism of the socket.io is
engine.io. It lets both the server and the client know when no one else is
responding.
 Binary support: Any serializable data structures can be emitted, including:
 ArrayBuffer and Blob in the browser
 ArrayBuffer and Buffer in Node.js

21 | P a g e
 3. Definition Of Problem

 This project is to create chat application with a server and users to unable the
user to chat with each other.
 To develop an instant messaging solution to unable users to seamlessly
communicate with each other.
 The project should be very easy to use enabling even a novice person to use it.
 This project can play an important role in organizational field where employees
can connect through LAN.
 The main purpose of this project is to provide multi chatting functionality
through network.

22 | P a g e
 4. System Analysis Design

4.1 System Analysis

Systems analysis is a process of collecting factual data, understand the processes

involved, identifying problems and recommending feasible suggestions for improving
the system functioning. This involves studying the business processes, gathering
operational data, understand the information flow, finding out bottlenecks and
evolving solutions for overcoming the weaknesses of the system so as to achieve the
organizational goals. System Analysis also includes subdividing of complex process
involving the entire system, identification of data store and manual processes. The
major objectives of systems analysis are to find answers for each business process:
What is being done How is it being done, who is doing it, when is he doing it, why is
it being done and How can it be improved? It is more of a thinking process and
involves the creative skills of the System Analyst. It attempts to give birth to a new
efficient system that satisfies the current needs of the user and has scope for future
growth within the organizational constraints. The result of this process is a logical
system design. Systems analysis is an iterative process that continues until a preferred
and acceptable solution emerges.

4.2 System Design

Based on the user requirements and the detailed analysis of the existing system, the
new system must be designed. This is the phase of system designing. It is the most
crucial phase in the developments of a system. The logical system design arrived at as
a result of systems analysis is converted into physical system design. Normally, the
design proceeds in two stages:
 Preliminary or General Design: In the preliminary or general design, the
features of the new system are specified. The costs of implementing these
features and the benefits to be derived are estimated. If the project is still
considered to be feasible, we move to the detailed design stage.

 Structured or Detailed Design: In the detailed design stage, computer oriented

work begins in earnest. At this stage, the design of the system becomes more
23 | P a g e
 structured. Structure design is a blue print of a computer system solution to a
given problem having the same components and interrelationships among the 7
same components as the original problem. Input, output, databases, forms,
codification schemes and processing specifications are drawn up in detail.
In the design stage, the programming language and the hardware and software
platform in which the new system will run are also decided. There are several tools
and techniques used for describing the system design of the system. These tools and
techniques are:
 Flowchart
 Data flow diagram (DFD)
 Data dictionary
 Structured English
 Decision table
 Decision tree

Database Design –
There is only one database used for accomplishing the project. Following are the
tables included in the database:
 Login
 Register
 User
 Messages
 Avatar Images ID
 Emoji

24 | P a g e
 1. Login Details: Details of all login users

25 | P a g e
 2. Register Details: Details of all Register users

3. User Details: Details of all users.

26 | P a g e
 4. Message Details: Details of all users.

27 | P a g e
 5. Avatar Image Id Details: Details of all users.

28 | P a g e
 5. Methodology adopted and Detail of Hardware & Software
Used

29 | P a g e
 5.1 Methodology Adopted

Firstly, we will be doing the requirement and analysis part of the development cycle,
in which we will find out our project’s final goals and what will get in the long run.
Then, we will move onto the designing phase of the cycle which will be deciding the
designing and look of it. Then we’ll deep dive into the implementation part which
consists of frontend and back-end development.
We’ll first start from the back-end of the project with the help of the Java script and
try to build the minimum valued product first which will set the base of our working
project and then we will add other backlogs of the product and try to develop in their
sprint. If a few backlogs will not be completed in their mentioned sprint, then we’ll
add it to the next sprint and try to finish it in that one. During the development of the
back-end of the product, we will be using only the React JS for the front-end which
will be showing the info on the browser.
Database part will be developed parallelly with the back-end development and
MongoDB will be used for the database. If the back-end of the project gets
complicated, we will move on to the front-end development fully. It will be
developed by HTML, CSS , JavaScript and React.js .When this all gets done, we will
run some tests in the testing phase of the project and then will manage the
documentation which we’ve maintained during the whole implementation and
development phase.

5.2 Details Of Hardware & Software Required

Minimum Hardware Requirements:

 Processor – Intel CORE i5 10TH Generation
 System – Lenevo Ideapad Slim 3i Laptop
o Screen size – 15 Inch
o Resolution – 1600 x 900
 RAM : 8 GB
 Hard Disk : 1 TB
 Mouse : USB
 Keyboard : USB
 Printer : Canon Pixma E470 Multi-Function Color Wi-Fi Printer
 Screen Resolution : 1600 x 900
30 | P a g e
  SSD : 256 GB
Minimum Software Requirements:
 Operating System : Windows 10
 Front-End : HTML5, CSS, Styled-Components, JavaScript, React.js(Version –
17.0.2)
 Back-End : Express.js, Node.js, Socket.io.
 Database : MongoDB Compass.

6. System Maintenance And Evaluation

6.1 Maintenance

31 | P a g e
The IEEE 1219-1998 software standards document defines software maintenance as
"the modification of a software product after delivery to correct faults, to improve
performance or other attributes, or to adapt the product to a modified environment."
Software maintenance is the concluding part of the software development process or
"life cycle." They categorized maintenance activities into four classes:

 Adaptive – modifying the system to cope with changes in the software

environment.

 Perfective – implementing new or changed user requirements which concern

functional enhancements to the software.

 Corrective – diagnosing and fixing errors, possibly ones found by users.

 Preventive – increasing software maintainability or reliability to prevent

problems in the future.

5.2 Evaluation

 The software should be delivered on time.

 The software should be in the budget of the customer.
 It should respond frequently to the user’s request.
 Customer will check whether s/he is convenient to the environment in which it
is developed.
 The software should be capable of healing virus instead of getting affected or
destroyed.

6. Cost And Benefit Analysis

7.1 Cost Analysis

32 | P a g e
The Constructive Cost Model (COCOMO) is a procedural software cost estimation
model developed by Barry W. Boehm. It consists of a hierarchy of three increasingly
detailed and accurate forms. The first level, Basic COCOMO is good for quick, early,
rough order of magnitude estimates of software costs, but its accuracy is limited due
to its lack of factors to account for difference in project attributes (Cost Drivers).
Model Used: Basic COCOMO Model for Organic Project
Formulae :
Effort Applied (E) = ab(KLOC)bb [ man-months ]
Development Time (D) = cb(Effort Applied)db [months]
People required (P) = Effort Applied / Development Time [count]
Calculation:
 Assuming an estimate of 5 KLOC.
 Using the following values of constants

aa bb cc dd
2.4 1.05 2.5 0.38

Effort Applied (E) = 2.4*(5)1.05 = 13.006 [man-months]

Development Time (D) = 2.5*(13.006)0.38 = 6.63 [months]
People required (P) = E/D = 13.006/6.63 = 1.96
Salary: 2000/-

Cost = Effort Applied*Salary = 13.006*2000 = 26012/-

6.2 Benefit Analysis

Benefits of chat includes many companies and schools rely on live chat today
because it has the following benefits.

33 | P a g e
  Faster support: It is easy to approach students, colleagues and customers by
live chat. Generally, it takes less time to solve the customer issue when using
live chat.

 Real-time text examine: It is one of the benefits between customer and agent.
A customer sends the request for a solution and an agent views and think
about the solution of the issue and replies to the customer immediately.

 Instant customer feedback: Customer can rate the company service right
after using the chat service.

 No waiting queues: Customers can reach the company agent immediately.

 On a browser site: The customer and agent conversation take place on the
website. During a chat, the agent can see where the customer is currently
looking the issue so the agent can easily guide the user by copying the link or
screenshot image.

 Purchasing solution: On online shopping point of view, is one of the

important advantages of live chat. A customer can ask the agent about the
product cost in the middle of online shopping.

 File transfer: A customer can provide file, document and images of the
questioned issue upon asking by the company agent.

 Mobile Messaging Integrations: Now, companies add Live Chat messenger

like Viber, WhatsApp and Facebook to a company website. Customers are
connected with the company´s central live chat system via advance live
software programs.

 24/7 Support Service: A company is available for the customers 24/7 without
any time zone restrictions. Customers can talk to a chatbot even out of office
hours.

 Less costs: Live chat is cheaper than the traditional phone call for the
customer to access the company agent for questioning and solving issues.
Calculation of Break-Even Point:
The software provides an approximate profit of 6500/- (yearly) to the institution:-

34 | P a g e
Assuming break even point = 4 years.
So profit = cost/beak even point = 26000/4 = 6500(yearly).
The software development charge = 26000/-
Total Profit generated in 4 years = 4*6500 = 26000
Break-Even Point = 4 years

7. Detailed Life Cycle Of Project

8.1 ERD

35 | P a g e
8.1

DFD

36 | P a g e
 8.2 Input And Output Screen Design
37 | P a g e
Login Screen:

38 | P a g e
Registration Screen:

39 | P a g e
Set Avatar Screen:

Welcome Screen:

40 | P a g e
Chatting Screen:

41 | P a g e
 8.3 Process Involved

Waterfall Model:
The waterfall model is a sequential (non-iterative) design process, used in software
development processes, in which progress is seen as flowing steadily downwards
(like a waterfall) through the phases of conception, initiation, analysis, design,
construction, testing, production/implementation and maintenance.
The following is the diagram of waterfall model:

Requirement

Design

Implementation
and unit testing

Integration and
system testing

Operating system

42 | P a g e
Requirement analysis: In this phase, I gathered requirements from my neighbor who
is a shopkeeper. He told me everything what he needed for the Supermarket
management .so that he can store the all the data in a more easier manner and keep
the detailsof the customers and stock,bill,payments etc.
System feasibility: In this phase, after gathering requirements I checked whether the
project “Supermarket Management System” can be made or not.
System design: The project “Supermarket Management System” keeps the details of
customer, Dealers,Sales,Purchase,Stock, bill.
The design of the project “Real Time Chatting Application” consists of the following
forms:
 Login Form
 Register Form
 Avatar Selection
 Welcome Window
 Profile List
 Chatting Window
 Logout Button
Coding and unit testing: In this phase, you write code for the modules that make up
the system. You also review the code and individually test the functionality of each
module.
Integration and system testing: In this phase, you integrate all of the modules in the
system and test them as a single system for all of the use cases, making sure that the
modules meet the requirements.
Deployment and maintenance: In this phase, you deploy the software system in the
production environment. You then correct any errors that are identified in this phase,
and add or modify functionality based on the updated requirements.
The waterfall model has the following advantages:
It allows you to compartmentalize the life cycle into various phases, which allows
you to plan the resources and effort required through the development process.
It enforces testing in every stage in the form of reviews and unit testing. You conduct
design reviews, code reviews, unit testing, and integration testing during the stages of
the life cycle.
It allows you to set expectations for deliverables after each phase.
The waterfall model has the following disadvantages:

43 | P a g e
You do not see a working version of the software until late in the life cycle. For this
reason, you can fail to detect problems until the system testing phase.
Problems may be more costly to fix in this phase than they would have been earlier in
the life cycle.
When an application is in the system testing phase, it is difficult to change something
that was not carefully considered in the system design phase.
The emphasis on early planning tends to delay or restrict the amount of change that
the testing effort can instigate, which is not the case when a working model is tested
for immediate feedback.
For a phase to begin the preceding phase must be complete; for example, the system
design phase cannot begin until the requirement analysis phase is complete and the
requirements are frozen. As a result, the waterfall model is not able to accommodate
uncertainties that may persist after a phase is completed. These uncertainties may
lead to delays and extended project schedules.

8.4 Methodology Used For Testing

Testing:
Testing is very vital for any system to be successfully implemented. The common
view is that it is performed to prove that there are no errors in a program. Therefore
the most useful and practical approach is with the explicit intention of finding the
errors. The system is tested experimentally to ensure that the software does not fail.
The system is run according to its specifications and in the way the user expects.
Following testing practices are used. The system will process as normal input
preparation of test-sample data.
The methodology used for testing the software is White Box Testing.
White Box Testing :
White box testing: Testing based on an analysis of the internal structure of the
component or system. Procedure to derive or select test cases based on an analysis of
the internal structure of a component or system. White-box testing is verification
technique software engineers can use to examine if their Code works as expected.
White-box testing is also known as structural testing, clear box testing, and glass box
testing (Beizer, 1995). The connotations of “clear box” and “glass box” appropriately

44 | P a g e
indicate that you have full visibility of the internal workings of the software product,
specifically, the logic and the structure of the code.
Levels:
 Unit testing: White-box testing is done during unit testing to ensure that the
code is working as intended, before any integration happens with previously
tested code. White-box testing during unit testing catches any defects early on
and aids in any defects that happen later on after the code is integrated with the
rest of the application and therefore prevents any type of errors later on.
 Integration testing: White-box testing at this level is written to test the
interactions of each interface with each other. The Unit level testing made sure
that each code was tested and working accordingly in an isolated environment
and integration examines the correctness of the behaviour in an open
environment through the use of white-box testing for any interactions of
interfaces that are known to the programmer.
Basic Procudeure
White-box testing's basic procedures involve the understanding of the source code
that you are testing at a deep level to be able to test them. The programmer must have
a deep understanding of the application to know what kinds of test cases to create so
that every visible path is exercised for testing. Once the source code is understood
then the source code can be analyzed for test cases to be created. These are the three
basic steps that white-box testing takes in order to create test cases:
 Input, involves different types of requirements, functional specifications,
detailed designing of documents, proper source code, security specifications.
This is the preparation stage of white-box testing to layout all of the basic
information.
 Processing Unit involves performing risk analysis to guide whole testing
process, proper test plan, execute test cases and communicate results. This is
the phase of building test cases to make sure they thoroughly test the
application the given results are recorded accordingly.
 Output; prepare final report that encompasses all of the above preparations and
results.

Advantages:
White-box testing is one of the two biggest testing methodologies used today. It
primarily has three advantages:

45 | P a g e
  Side effects of having the knowledge of the source code are beneficial to
thorough testing.
 Optimization of code by revealing hidden errors and being able to remove
these possible defects.
 Gives the programmer introspection because developers carefully describe any
new implementation.
Disadvantages:
Although White-box testing has great advantages, it is not perfect and contains some
disadvantages. It has two disadvantages:
 White-box testing brings complexity to testing because to be able to test every
important aspect of the program, you must have great knowledge of the
program. White-box testing requires a programmer with a high-level of
knowledge due to the complexity of the level of testing that needs to be done.
 On some occasions, it is not realistic to be able to test every single existing
condition of the application and some conditions will be untested.

8.5 Print of the code sheet

Front-End Codes(Client-side):
Pages:
Login.jsx-
import React, { useState, useEffect } from "react";
import axios from "axios";
import styled from "styled-components";
import { useNavigate, Link } from "react-router-dom";
import Logo from "../assets/logo.svg";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { loginRoute } from "../utils/APIRoutes";

export default function Login() {

const navigate = useNavigate();
46 | P a g e
 const [values, setValues] = useState({ username: "", password: "" });
const toastOptions = {
position: "bottom-right",
autoClose: 8000,
pauseOnHover: true,
draggable: true,
theme: "dark",
};
useEffect(() => {
if (localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)) {
navigate("/");
}
}, []);

const handleChange = (event) => {

setValues({ ...values, [event.target.name]: event.target.value });
};

const validateForm = () => {

const { username, password } = values;
if (username === "") {
toast.error("Email and Password is required.", toastOptions);
return false;
} else if (password === "") {
toast.error("Email and Password is required.", toastOptions);
return false;
}
return true;
};

const handleSubmit = async (event) => {

event.preventDefault();
if (validateForm()) {
const { username, password } = values;

47 | P a g e
 const { data } = await axios.post(loginRoute, {
username,
password,
});
if (data.status === false) {
toast.error(data.msg, toastOptions);
}
if (data.status === true) {
localStorage.setItem(
process.env.REACT_APP_LOCALHOST_KEY,
JSON.stringify(data.user)
);

navigate("/");
}
}
};

return (
<>
<FormContainer>
<form action="" onSubmit={(event) => handleSubmit(event)}>
<div className="brand">
<img src={Logo} alt="logo" />
<h1>snappy</h1>
</div>
<input
type="text"
placeholder="Username"
name="username"
onChange={(e) => handleChange(e)}
min="3"
/>
<input

48 | P a g e
 type="password"
placeholder="Password"
name="password"
onChange={(e) => handleChange(e)}
/>
<button type="submit">Log In</button>
<span>
Don't have an account ? <Link to="/register">Create One.</Link>
</span>
</form>
</FormContainer>
<ToastContainer />
</>
);
}

const FormContainer = styled.div`

height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
align-items: center;
background-color: #131324;
.brand {
display: flex;
align-items: center;
gap: 1rem;
justify-content: center;
img {
height: 5rem;
}
h1 {

49 | P a g e
 color: white;
text-transform: uppercase;
}
}

form {
display: flex;
flex-direction: column;
gap: 2rem;
background-color: #00000076;
border-radius: 2rem;
padding: 5rem;
}
input {
background-color: transparent;
padding: 1rem;
border: 0.1rem solid #4e0eff;
border-radius: 0.4rem;
color: white;
width: 100%;
font-size: 1rem;
&:focus {
border: 0.1rem solid #997af0;
outline: none;
}
}
button {
background-color: #4e0eff;
color: white;
padding: 1rem 2rem;
border: none;
font-weight: bold;
cursor: pointer;
border-radius: 0.4rem;

50 | P a g e
 font-size: 1rem;
text-transform: uppercase;
&:hover {
background-color: #4e0eff;
}
}
span {
color: white;
text-transform: uppercase;
a{
color: #4e0eff;
text-decoration: none;
font-weight: bold;
}
}
`;

Register.jsx-
import React, { useState, useEffect } from "react";
import axios from "axios";
import styled from "styled-components";
import { useNavigate, Link } from "react-router-dom";
import Logo from "../assets/logo.svg";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { registerRoute } from "../utils/APIRoutes";

export default function Register() {

const navigate = useNavigate();
const toastOptions = {
position: "bottom-right",
autoClose: 8000,

51 | P a g e
 pauseOnHover: true,
draggable: true,
theme: "dark",
};
const [values, setValues] = useState({
username: "",
email: "",
password: "",
confirmPassword: "",
});

useEffect(() => {
if (localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)) {
navigate("/");
}
}, []);

const handleChange = (event) => {

setValues({ ...values, [event.target.name]: event.target.value });
};

const handleValidation = () => {

const { password, confirmPassword, username, email } = values;
if (password !== confirmPassword) {
toast.error(
"Password and confirm password should be same.",
toastOptions
);
return false;
} else if (username.length < 3) {
toast.error(
"Username should be greater than 3 characters.",
toastOptions
);

52 | P a g e
 return false;
} else if (password.length < 8) {
toast.error(
"Password should be equal or greater than 8 characters.",
toastOptions
);
return false;
} else if (email === "") {
toast.error("Email is required.", toastOptions);
return false;
}

return true;
};

const handleSubmit = async (event) => {

event.preventDefault();
if (handleValidation()) {
const { email, username, password } = values;
const { data } = await axios.post(registerRoute, {
username,
email,
password,
});

if (data.status === false) {

toast.error(data.msg, toastOptions);
}
if (data.status === true) {
localStorage.setItem(
process.env.REACT_APP_LOCALHOST_KEY,
JSON.stringify(data.user)
);
navigate("/");

53 | P a g e
 }
}
};

return (
<>
<FormContainer>
<form action="" onSubmit={(event) => handleSubmit(event)}>
<div className="brand">
<img src={Logo} alt="logo" />
<h1>snappy</h1>
</div>
<input
type="text"
placeholder="Username"
name="username"
onChange={(e) => handleChange(e)}
/>
<input
type="email"
placeholder="Email"
name="email"
onChange={(e) => handleChange(e)}
/>
<input
type="password"
placeholder="Password"
name="password"
onChange={(e) => handleChange(e)}
/>
<input
type="password"
placeholder="Confirm Password"
name="confirmPassword"

54 | P a g e
 onChange={(e) => handleChange(e)}
/>
<button type="submit">Create User</button>
<span>
Already have an account ? <Link to="/login">Login.</Link>
</span>
</form>
</FormContainer>
<ToastContainer />
</>
);
}

const FormContainer = styled.div`

height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
align-items: center;
background-color: #131324;
.brand {
display: flex;
align-items: center;
gap: 1rem;
justify-content: center;
img {
height: 5rem;
}
h1 {
color: white;
text-transform: uppercase;
}

55 | P a g e
 }

form {
display: flex;
flex-direction: column;
gap: 2rem;
background-color: #00000076;
border-radius: 2rem;
padding: 3rem 5rem;
}
input {
background-color: transparent;
padding: 1rem;
border: 0.1rem solid #4e0eff;
border-radius: 0.4rem;
color: white;
width: 100%;
font-size: 1rem;
&:focus {
border: 0.1rem solid #997af0;
outline: none;
}
}
button {
background-color: #4e0eff;
color: white;
padding: 1rem 2rem;
border: none;
font-weight: bold;
cursor: pointer;
border-radius: 0.4rem;
font-size: 1rem;
text-transform: uppercase;
&:hover {

56 | P a g e
 background-color: #4e0eff;
}
}
span {
color: white;
text-transform: uppercase;
a{
color: #4e0eff;
text-decoration: none;
font-weight: bold;
}
}
`;

Chat.jsx-
import React, { useEffect, useState, useRef } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { io } from "socket.io-client";
import styled from "styled-components";
import { allUsersRoute, host } from "../utils/APIRoutes";
import ChatContainer from "../components/ChatContainer";
import Contacts from "../components/Contacts";
import Welcome from "../components/Welcome";

export default function Chat() {

const navigate = useNavigate();
const socket = useRef();
const [contacts, setContacts] = useState([]);
const [currentChat, setCurrentChat] = useState(undefined);
const [currentUser, setCurrentUser] = useState(undefined);
useEffect(async () => {

57 | P a g e
 if (!localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)) {
navigate("/login");
} else {
setCurrentUser(
await JSON.parse(
localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
)
);
}
}, []);
useEffect(() => {
if (currentUser) {
socket.current = io(host);
socket.current.emit("add-user", currentUser._id);
}
}, [currentUser]);

useEffect(async () => {
if (currentUser) {
if (currentUser.isAvatarImageSet) {
const data = await axios.get(`${allUsersRoute}/${currentUser._id}`);
setContacts(data.data);
} else {
navigate("/setAvatar");
}
}
}, [currentUser]);
const handleChatChange = (chat) => {
setCurrentChat(chat);
};
return (
<>
<Container>
<div className="container">

58 | P a g e
 <Contacts contacts={contacts} changeChat={handleChatChange} />
{currentChat === undefined ? (
<Welcome />
):(
<ChatContainer currentChat={currentChat} socket={socket} />
)}
</div>
</Container>
</>
);
}

const Container = styled.div`

height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
align-items: center;
background-color: #131324;
.container {
height: 85vh;
width: 85vw;
background-color: #00000076;
display: grid;
grid-template-columns: 25% 75%;
@media screen and (min-width: 720px) and (max-width: 1080px) {
grid-template-columns: 35% 65%;
}
}
`;

59 | P a g e
Components:
ChatContainer.jsx-
import React, { useState, useEffect, useRef } from "react";
import styled from "styled-components";
import ChatInput from "./ChatInput";
import Logout from "./Logout";
import { v4 as uuidv4 } from "uuid";
import axios from "axios";
import { sendMessageRoute, recieveMessageRoute } from "../utils/APIRoutes";

export default function ChatContainer({ currentChat, socket }) {

const [messages, setMessages] = useState([]);
const scrollRef = useRef();
const [arrivalMessage, setArrivalMessage] = useState(null);

useEffect(async () => {
const data = await JSON.parse(
localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
);
const response = await axios.post(recieveMessageRoute, {
from: data._id,
to: currentChat._id,
});
setMessages(response.data);
}, [currentChat]);

useEffect(() => {
const getCurrentChat = async () => {
if (currentChat) {
await JSON.parse(
localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
)._id;
}

60 | P a g e
 };
getCurrentChat();
}, [currentChat]);

const handleSendMsg = async (msg) => {

const data = await JSON.parse(
localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
);
socket.current.emit("send-msg", {
to: currentChat._id,
from: data._id,
msg,
});
await axios.post(sendMessageRoute, {
from: data._id,
to: currentChat._id,
message: msg,
});

const msgs = [...messages];

msgs.push({ fromSelf: true, message: msg });
setMessages(msgs);
};

useEffect(() => {
if (socket.current) {
socket.current.on("msg-recieve", (msg) => {
setArrivalMessage({ fromSelf: false, message: msg });
});
}
}, []);

useEffect(() => {
arrivalMessage && setMessages((prev) => [...prev, arrivalMessage]);

61 | P a g e
 }, [arrivalMessage]);

useEffect(() => {
scrollRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);

return (
<Container>
<div className="chat-header">
<div className="user-details">
<div className="avatar">
<img
src={`data:image/svg+xml;base64,${currentChat.avatarImage}`}
alt=""
/>
</div>
<div className="username">
<h3>{currentChat.username}</h3>
</div>
</div>
<Logout />
</div>
<div className="chat-messages">
{messages.map((message) => {
return (
<div ref={scrollRef} key={uuidv4()}>
<div
className={`message ${
message.fromSelf ? "sended" : "recieved"
}`}
>
<div className="content ">
<p>{message.message}</p>
</div>

62 | P a g e
 </div>
</div>
);
})}
</div>
<ChatInput handleSendMsg={handleSendMsg} />
</Container>
);
}

const Container = styled.div`

display: grid;
grid-template-rows: 10% 80% 10%;
gap: 0.1rem;
overflow: hidden;
@media screen and (min-width: 720px) and (max-width: 1080px) {
grid-template-rows: 15% 70% 15%;
}
.chat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
.user-details {
display: flex;
align-items: center;
gap: 1rem;
.avatar {
img {
height: 3rem;
}
}
.username {
h3 {

63 | P a g e
 color: white;
}
}
}
}
.chat-messages {
padding: 1rem 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
overflow: auto;
&::-webkit-scrollbar {
width: 0.2rem;
&-thumb {
background-color: #ffffff39;
width: 0.1rem;
border-radius: 1rem;
}
}
.message {
display: flex;
align-items: center;
.content {
max-width: 40%;
overflow-wrap: break-word;
padding: 1rem;
font-size: 1.1rem;
border-radius: 1rem;
color: #d1d1d1;
@media screen and (min-width: 720px) and (max-width: 1080px) {
max-width: 70%;
}
}
}

64 | P a g e
 .sended {
justify-content: flex-end;
.content {
background-color: #4f04ff21;
}
}
.recieved {
justify-content: flex-start;
.content {
background-color: #9900ff20;
}
}
}
`;

ChatInput.jsx-
import React, { useState } from "react";
import { BsEmojiSmileFill } from "react-icons/bs";
import { IoMdSend } from "react-icons/io";
import styled from "styled-components";
import Picker from "emoji-picker-react";

export default function ChatInput({ handleSendMsg }) {

const [msg, setMsg] = useState("");
const [showEmojiPicker, setShowEmojiPicker] = useState(false);
const handleEmojiPickerhideShow = () => {
setShowEmojiPicker(!showEmojiPicker);
};

const handleEmojiClick = (event, emojiObject) => {

let message = msg;
message += emojiObject.emoji;

65 | P a g e
 setMsg(message);
};

const sendChat = (event) => {

event.preventDefault();
if (msg.length > 0) {
handleSendMsg(msg);
setMsg("");
}
};

return (
<Container>
<div className="button-container">
<div className="emoji">
<BsEmojiSmileFill onClick={handleEmojiPickerhideShow} />
{showEmojiPicker && <Picker onEmojiClick={handleEmojiClick} />}
</div>
</div>
<form className="input-container" onSubmit={(event) => sendChat(event)}>
<input
type="text"
placeholder="type your message here"
onChange={(e) => setMsg(e.target.value)}
value={msg}
/>
<button type="submit">
<IoMdSend />
</button>
</form>
</Container>
);
}

66 | P a g e
const Container = styled.div`
display: grid;
align-items: center;
grid-template-columns: 5% 95%;
background-color: #080420;
padding: 0 2rem;
@media screen and (min-width: 720px) and (max-width: 1080px) {
padding: 0 1rem;
gap: 1rem;
}
.button-container {
display: flex;
align-items: center;
color: white;
gap: 1rem;
.emoji {
position: relative;
svg {
font-size: 1.5rem;
color: #ffff00c8;
cursor: pointer;
}
.emoji-picker-react {
position: absolute;
top: -350px;
background-color: #080420;
box-shadow: 0 5px 10px #9a86f3;
border-color: #9a86f3;
.emoji-scroll-wrapper::-webkit-scrollbar {
background-color: #080420;
width: 5px;
&-thumb {
background-color: #9a86f3;
}

67 | P a g e
 }
.emoji-categories {
button {
filter: contrast(0);
}
}
.emoji-search {
background-color: transparent;
border-color: #9a86f3;
}
.emoji-group:before {
background-color: #080420;
}
}
}
}
.input-container {
width: 100%;
border-radius: 2rem;
display: flex;
align-items: center;
gap: 2rem;
background-color: #ffffff34;
input {
width: 90%;
height: 60%;
background-color: transparent;
color: white;
border: none;
padding-left: 1rem;
font-size: 1.2rem;

&::selection {
background-color: #9a86f3;

68 | P a g e
 }
&:focus {
outline: none;
}
}
button {
padding: 0.3rem 2rem;
border-radius: 2rem;
display: flex;
justify-content: center;
align-items: center;
background-color: #9a86f3;
border: none;
@media screen and (min-width: 720px) and (max-width: 1080px) {
padding: 0.3rem 1rem;
svg {
font-size: 1rem;
}
}
svg {
font-size: 2rem;
color: white;
}
}
}
`;

Contacts.jsx-
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import Logo from "../assets/logo.svg";

69 | P a g e
export default function Contacts({ contacts, changeChat }) {
const [currentUserName, setCurrentUserName] = useState(undefined);
const [currentUserImage, setCurrentUserImage] = useState(undefined);
const [currentSelected, setCurrentSelected] = useState(undefined);
useEffect(async () => {
const data = await JSON.parse(
localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
);
setCurrentUserName(data.username);
setCurrentUserImage(data.avatarImage);
}, []);
const changeCurrentChat = (index, contact) => {
setCurrentSelected(index);
changeChat(contact);
};
return (
<>
{currentUserImage && currentUserImage && (
<Container>
<div className="brand">
<img src={Logo} alt="logo" />
<h3>snappy</h3>
</div>
<div className="contacts">
{contacts.map((contact, index) => {
return (
<div
key={contact._id}
className={`contact ${
index === currentSelected ? "selected" : ""
}`}
onClick={() => changeCurrentChat(index, contact)}
>
<div className="avatar">

70 | P a g e
 <img
src={`data:image/svg+xml;base64,${contact.avatarImage}`}
alt=""
/>
</div>
<div className="username">
<h3>{contact.username}</h3>
</div>
</div>
);
})}
</div>
<div className="current-user">
<div className="avatar">
<img
src={`data:image/svg+xml;base64,${currentUserImage}`}
alt="avatar"
/>
</div>
<div className="username">
<h2>{currentUserName}</h2>
</div>
</div>
</Container>
)}
</>
);
}
const Container = styled.div`
display: grid;
grid-template-rows: 10% 75% 15%;
overflow: hidden;
background-color: #080420;
.brand {

71 | P a g e
 display: flex;
align-items: center;
gap: 1rem;
justify-content: center;
img {
height: 2rem;
}
h3 {
color: white;
text-transform: uppercase;
}
}
.contacts {
display: flex;
flex-direction: column;
align-items: center;
overflow: auto;
gap: 0.8rem;
&::-webkit-scrollbar {
width: 0.2rem;
&-thumb {
background-color: #ffffff39;
width: 0.1rem;
border-radius: 1rem;
}
}
.contact {
background-color: #ffffff34;
min-height: 5rem;
cursor: pointer;
width: 90%;
border-radius: 0.2rem;
padding: 0.4rem;
display: flex;

72 | P a g e
 gap: 1rem;
align-items: center;
transition: 0.5s ease-in-out;
.avatar {
img {
height: 3rem;
}
}
.username {
h3 {
color: white;
}
}
}
.selected {
background-color: #9a86f3;
}
}

.current-user {
background-color: #0d0d30;
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
.avatar {
img {
height: 4rem;
max-inline-size: 100%;
}
}
.username {
h2 {
color: white;

73 | P a g e
 }
}
@media screen and (min-width: 720px) and (max-width: 1080px) {
gap: 0.5rem;
.username {
h2 {
font-size: 1rem;
}
}
}
}
`;

Logout.jsx-
import React from "react";
import { useNavigate } from "react-router-dom";
import { BiPowerOff } from "react-icons/bi";
import styled from "styled-components";
import axios from "axios";
import { logoutRoute } from "../utils/APIRoutes";
export default function Logout() {
const navigate = useNavigate();
const handleClick = async () => {
const id = await JSON.parse(
localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
)._id;
const data = await axios.get(`${logoutRoute}/${id}`);
if (data.status === 200) {
localStorage.clear();
navigate("/login");
}
};

74 | P a g e
 return (
<Button onClick={handleClick}>
<BiPowerOff />
</Button>
);
}

const Button = styled.button`

display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
border-radius: 0.5rem;
background-color: #9a86f3;
border: none;
cursor: pointer;
svg {
font-size: 1.3rem;
color: #ebe7ff;
}
`;

SetAvatar.jsx-
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import axios from "axios";
import { Buffer } from "buffer";
import loader from "../assets/loader.gif";
import { ToastContainer, toast } from "react-toastify";

75 | P a g e
import "react-toastify/dist/ReactToastify.css";
import { useNavigate } from "react-router-dom";
import { setAvatarRoute } from "../utils/APIRoutes";
export default function SetAvatar() {
const api = `https://api.multiavatar.com/4645646`;
const navigate = useNavigate();
const [avatars, setAvatars] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [selectedAvatar, setSelectedAvatar] = useState(undefined);
const toastOptions = {
position: "bottom-right",
autoClose: 8000,
pauseOnHover: true,
draggable: true,
theme: "dark",
};

useEffect(async () => {
if (!localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY))
navigate("/login");
}, []);

const setProfilePicture = async () => {

if (selectedAvatar === undefined) {
toast.error("Please select an avatar", toastOptions);
} else {
const user = await JSON.parse(
localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
);

const { data } = await axios.post(`${setAvatarRoute}/${user._id}`, {

image: avatars[selectedAvatar],
});

76 | P a g e
 if (data.isSet) {
user.isAvatarImageSet = true;
user.avatarImage = data.image;
localStorage.setItem(
process.env.REACT_APP_LOCALHOST_KEY,
JSON.stringify(user)
);
navigate("/");
} else {
toast.error("Error setting avatar. Please try again.", toastOptions);
}
}
};

useEffect(async () => {
const data = [];
for (let i = 0; i < 4; i++) {
const image = await axios.get(
`${api}/${Math.round(Math.random() * 1000)}`
);
const buffer = new Buffer(image.data);
data.push(buffer.toString("base64"));
}
setAvatars(data);
setIsLoading(false);
}, []);
return (
<>
{isLoading ? (
<Container>
<img src={loader} alt="loader" className="loader" />
</Container>
):(
<Container>

77 | P a g e
 <div className="title-container">
<h1>Pick an Avatar as your profile picture</h1>
</div>
<div className="avatars">
{avatars.map((avatar, index) => {
return (
<div
className={`avatar ${
selectedAvatar === index ? "selected" : ""
}`}
>
<img
src={`data:image/svg+xml;base64,${avatar}`}
alt="avatar"
key={avatar}
onClick={() => setSelectedAvatar(index)}
/>
</div>
);
})}
</div>
<button onClick={setProfilePicture} className="submit-btn">
Set as Profile Picture
</button>
<ToastContainer />
</Container>
)}
</>
);
}

const Container = styled.div`

display: flex;
justify-content: center;

78 | P a g e
 align-items: center;
flex-direction: column;
gap: 3rem;
background-color: #131324;
height: 100vh;
width: 100vw;

.loader {
max-inline-size: 100%;
}

.title-container {
h1 {
color: white;
}
}
.avatars {
display: flex;
gap: 2rem;

.avatar {
border: 0.4rem solid transparent;
padding: 0.4rem;
border-radius: 5rem;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s ease-in-out;
img {
height: 6rem;
transition: 0.5s ease-in-out;
}
}
.selected {

79 | P a g e
 border: 0.4rem solid #4e0eff;
}
}
.submit-btn {
background-color: #4e0eff;
color: white;
padding: 1rem 2rem;
border: none;
font-weight: bold;
cursor: pointer;
border-radius: 0.4rem;
font-size: 1rem;
text-transform: uppercase;
&:hover {
background-color: #4e0eff;
}
}
`;

Welcome.jsx-
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import Robot from "../assets/robot.gif";
export default function Welcome() {
const [userName, setUserName] = useState("");
useEffect(async () => {
setUserName(
await JSON.parse(
localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
).username
);
}, []);

80 | P a g e
 return (
<Container>
<img src={Robot} alt="" />
<h1>
Welcome, <span>{userName}!</span>
</h1>
<h3>Please select a chat to Start messaging.</h3>
</Container>
);
}

const Container = styled.div`

display: flex;
justify-content: center;
align-items: center;
color: white;
flex-direction: column;
img {
height: 20rem;
}
span {
color: #4e0eff;
}
`;

Utils:
APIRoutes.js –
export const host = "http://localhost:5000";
export const loginRoute = `${host}/api/auth/login`;
export const registerRoute = `${host}/api/auth/register`;
export const logoutRoute = `${host}/api/auth/logout`;
export const allUsersRoute = `${host}/api/auth/allusers`;

81 | P a g e
export const sendMessageRoute = `${host}/api/messages/addmsg`;
export const recieveMessageRoute = `${host}/api/messages/getmsg`;
export const setAvatarRoute = `${host}/api/auth/setavatar`;

App.js:
import React, { Suspense, lazy } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const Chat = lazy(() => import("./pages/Chat"));

const Login = lazy(() => import("./pages/Login"));
const Register = lazy(() => import("./pages/Register"));
const SetAvatar = lazy(() => import("./components/SetAvatar"));

export default function App() {

return (
<BrowserRouter>
<Suspense fallback={<></>}>
<Routes>
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
<Route path="/setAvatar" element={<SetAvatar />} />
<Route path="/" element={<Chat />} />
</Routes>
</Suspense>
</BrowserRouter>
);
}

Index.css:
@import url("https://fonts.googleapis.com/css2?
family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,
200;1,300;1,400;1,500;1,600;1,700&display=swap");

82 | P a g e
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body,
button,
input {
font-family: "Josefin Sans", sans-serif;
}

body {
max-height: 100vh;
max-width: 100vw;
overflow: hidden;
}

.Toastify__toast-theme--dark {
background-color: #00000076 !important;
}

Index.js:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
ReactDOM.render(
<React.StrictMode>
<App />

83 | P a g e
 </React.StrictMode>,
document.getElementById("root")
);

assets:
loader.gif
logo.svg
robot.gif

.env:
REACT_APP_LOCALHOST_KEY="chat-app-current-user"

Package.json:
{
"name": "chat-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.25.0",
"buffer": "^6.0.3",
"emoji-picker-react": "^3.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"react-toastify": "^8.1.1",
"socket.io-client": "^4.4.1",
"styled-components": "^5.3.3",

84 | P a g e
 "uuid": "^8.3.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Back-End Code(Server-Side):

85 | P a g e
Controllers:
messageController.js-
const Messages = require("../models/messageModel");

module.exports.getMessages = async (req, res, next) => {

try {
const { from, to } = req.body;

const messages = await Messages.find({

users: {
$all: [from, to],
},
}).sort({ updatedAt: 1 });

const projectedMessages = messages.map((msg) => {

return {
fromSelf: msg.sender.toString() === from,
message: msg.message.text,
};
});
res.json(projectedMessages);
} catch (ex) {
next(ex);
}
};

module.exports.addMessage = async (req, res, next) => {

try {
const { from, to, message } = req.body;
const data = await Messages.create({
message: { text: message },
users: [from, to],
sender: from,

86 | P a g e
 });

if (data) return res.json({ msg: "Message added successfully." });

else return res.json({ msg: "Failed to add message to the database" });
} catch (ex) {
next(ex);
}
};

userController.js-
const User = require("../models/userModel");
const bcrypt = require("bcrypt");

module.exports.login = async (req, res, next) => {

try {
const { username, password } = req.body;
const user = await User.findOne({ username });
if (!user)
return res.json({ msg: "Incorrect Username or Password", status: false });
const isPasswordValid = await bcrypt.compare(password, user.password);
if (!isPasswordValid)
return res.json({ msg: "Incorrect Username or Password", status: false });
delete user.password;
return res.json({ status: true, user });
} catch (ex) {
next(ex);
}
};

module.exports.register = async (req, res, next) => {

try {
const { username, email, password } = req.body;
const usernameCheck = await User.findOne({ username });

87 | P a g e
 if (usernameCheck)
return res.json({ msg: "Username already used", status: false });
const emailCheck = await User.findOne({ email });
if (emailCheck)
return res.json({ msg: "Email already used", status: false });
const hashedPassword = await bcrypt.hash(password, 10);
const user = await User.create({
email,
username,
password: hashedPassword,
});
delete user.password;
return res.json({ status: true, user });
} catch (ex) {
next(ex);
}
};

module.exports.getAllUsers = async (req, res, next) => {

try {
const users = await User.find({ _id: { $ne: req.params.id } }).select([
"email",
"username",
"avatarImage",
"_id",
]);
return res.json(users);
} catch (ex) {
next(ex);
}
};

module.exports.setAvatar = async (req, res, next) => {

try {

88 | P a g e
 const userId = req.params.id;
const avatarImage = req.body.image;
const userData = await User.findByIdAndUpdate(
userId,
{
isAvatarImageSet: true,
avatarImage,
},
{ new: true }
);
return res.json({
isSet: userData.isAvatarImageSet,
image: userData.avatarImage,
});
} catch (ex) {
next(ex);
}
};

module.exports.logOut = (req, res, next) => {

try {
if (!req.params.id) return res.json({ msg: "User id is required " });
onlineUsers.delete(req.params.id);
return res.status(200).send();
} catch (ex) {
next(ex);
}
};

Models:
messageModel.js-
const mongoose = require("mongoose");

89 | P a g e
const MessageSchema = mongoose.Schema(
{
message: {
text: { type: String, required: true },
},
users: Array,
sender: {
type: mongoose.Schema.Types.ObjectId,
ref: "User",
required: true,
},
},
{
timestamps: true,
}
);

module.exports = mongoose.model("Messages", MessageSchema);

userModel.js-
const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({

username: {
type: String,
required: true,
min: 3,
max: 20,
unique: true,
},
email: {
type: String,

90 | P a g e
 required: true,
unique: true,
max: 50,
},
password: {
type: String,
required: true,
min: 8,
},
isAvatarImageSet: {
type: Boolean,
default: false,
},
avatarImage: {
type: String,
default: "",
},
});

module.exports = mongoose.model("Users", userSchema);

routes:
auth.js-
const {
login,
register,
getAllUsers,
setAvatar,
logOut,
} = require("../controllers/userController");

const router = require("express").Router();

91 | P a g e
router.post("/login", login);
router.post("/register", register);
router.get("/allusers/:id", getAllUsers);
router.post("/setavatar/:id", setAvatar);
router.get("/logout/:id", logOut);

module.exports = router;

messages.js-
const { addMessage, getMessages } = require("../controllers/messageController");
const router = require("express").Router();

router.post("/addmsg/", addMessage);
router.post("/getmsg/", getMessages);

module.exports = router;

.env:
PORT=5000
MONGO_URL="mongodb://localhost:27017/chat"
Index.js:
const express = require("express");
const cors = require("cors");
const mongoose = require("mongoose");
const authRoutes = require("./routes/auth");
const messageRoutes = require("./routes/messages");
const app = express();
const socket = require("socket.io");
require("dotenv").config();

app.use(cors());
app.use(express.json());

92 | P a g e
mongoose
.connect(process.env.MONGO_URL, {
useNewUrlParser: true,
useUnifiedTopology: true,
})
.then(() => {
console.log("DB Connetion Successfull");
})
.catch((err) => {
console.log(err.message);
});

app.use("/api/auth", authRoutes);
app.use("/api/messages", messageRoutes);

const server = app.listen(process.env.PORT, () =>

console.log(`Server started on ${process.env.PORT}`)
);
const io = socket(server, {
cors: {
origin: "http://localhost:3000",
credentials: true,
},
});

global.onlineUsers = new Map();

io.on("connection", (socket) => {
global.chatSocket = socket;
socket.on("add-user", (userId) => {
onlineUsers.set(userId, socket.id);
});

socket.on("send-msg", (data) => {

93 | P a g e
 const sendUserSocket = onlineUsers.get(data.to);
if (sendUserSocket) {
socket.to(sendUserSocket).emit("msg-recieve", data.msg);
}
});
});
Packeg.json:
{
"name": "chat-app-backend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"bcrypt": "^5.0.1",
"cors": "^2.8.5",
"dotenv": "^16.0.0",
"express": "^4.17.2",
"mongoose": "^6.2.1",
"nodemon": "^2.0.15",
"socket.io": "^4.4.1"
}
}

94 | P a g e
 8. User/Operational Manual –Including Security aspects
backup, Access Rights, Controls

Login Page:

Click here to Login

Click here to create a new user user if don’t have an account

95 | P a g e
Register Page:

Click here to Login

Click here to Register

Click here to login if already have an account

96 | P a g e
Set Avatar page:
Click any avatar image

Click here to set avatar

Welcome window:

Select anyone to chat

97 | P a g e
Chat window:
Click here to logout

Click here to text messages

Click here to pick Click here to send messages or just

random emoji press enter key

Security Aspects:
The Person Using the application is required to login first or if the person son’t have
any accout then he/she must have to register their username, email, password and
confirm password.

Profile:
A user can set any avatar image as his/her profile image.

Chatting:
A user can chat with any person by selecting their profile and can logout after
conversation by clicking the button which is mentioned upward also users can pick
random emoji during their conversation.

98 | P a g e
 10. Conclusion

As a conclusion, I can say that this undergoing project is giving great experience.
Thanks to this project, I am acquiring deeper knowledge concerning my technical
skills but I also personally benefited. Currently MERN stack is a common
technologies of web applications and chat applications, and one of the most popular
technology for development used by developers worldwide. If we surf internet we
can see millions of websites, applications and games built with MERN and MEAN
stack. I am learning to live in a different environment from the one I am used to.
Indeed, I am growing more independent in work and also in everyday life, realizing
that I could do more things than I thought like learning new things by myself.
There are huge opportunities available for the students who want to work in this field.
Many private and public organizations hire web designer and app designer for their
online work and development. With the rapid advent of online industry, the demand
of web development and app development professionals is increasing and this has
created a huge job opportunity for the aspirants in the upcoming days. Also an
experienced person in this field can also work as a freelancer; there are many online
companies which provide online projects to the individuals.

99 | P a g e
 11. Reference

Websites:
Stackoverflow - https://stackoverflow.com/
W3school - https://www.w3schools.com/
React.js - https://reactjs.org/
Youtube:
Claver programmer.
Codewithharry
Six pack programmer
Lama code

100 | P a g e