A

Project Report

on

“Real-Time Chat Application”

Submitted in partial fulfillment for the award of the degree of

Bachelor of Technology
in
Computer Science & Engineering
Under the Supervision of
Ms. Smriti, A.P, Dept. of CSE

By

Ritik, 5066965
Vijay, 5066979

Department of Computer Science and Engineering

Ganga Institute of Technology & Management,
Kablana, Jhajjar-124104 (Haryana)
 CERTIFICATE

This is to certify that the project work entitled “Real-Time Chat Application”, is original
and have been carried out by us in the partial fulfillment for the award of the degree of Bachelor
of Technology in Computer Science & Engineering to the Department of Computer Science &
Engineering, Ganga Institute of Technology and Management, Kablana, Jhajjar, Haryana, for
duration of six months, is an authentic record of their work carried out under my supervision.
The matter presented in this project work has not been submitted, in part or in full, for any other
degree or diploma of this or any other university.

Candidates:
Ritik, 5066965
Vijay, 5066979

Guide:
Ms. Smirti
Assistant Professor
Department of Computer Science & Engineering
Ganga Institute of Technology and Management, Kablana, Jhajjar-124103

i
 DECLARATION

This is to certify that the project work entitled “Real-Time Chat Application”, has been
carried out by us in the Department of Computer Science & Engineering, Ganga Institute of
Technology and Management, Kablana, Jhajjar, Haryana. This work has not been submitted
for similar purpose anywhere else. We shall be solely responsible for any dispute arising out of
our project work.

Signed:
Ritik, 5066965
Vijay, 5066979

ii
 ACKNOWLEDGEMENTS

No task is a single man’s effort. Various factors, situations and persons integrate to provide the
background for the accomplishment of a task. Similarly, this project work could not have been
realized without a great deal of guidance and both mental and practical support. We would like
to deeply thank those people who provided us with everything we needed during the time in
which this project work lasted.

First and foremost, we owe our heartfelt thankfulness to our guide, Ms. Smirti. We are
verygrateful for her insightful guidance, invaluable support, and understanding. Without her
constant guidance, encouragement, support and stress-free environment, we would not have
reached this point. Despite her busy schedule, she has made himself available to clarify our
doubts.

We would also like to thank our respected HOD and faculty members of CSE department for
providing us the opportunities, support and the necessary help to complete this project work.

We are also very thankful to Prof. (Dr.) Aman Aggarwal, Director, Ganga Institute of
Technology and Management for providing all the resources to carry out the project work at
the department.

We would like to thank all the laboratory staff for providing the laboratory support in terms of
software etc., whenever we needed. At last we wish to express our heartfelt gratitude to our
friends, who have supported and helped us in the past four years.

Finally, the existent journey is placed in the holy feet of almighty.

With Gratitude to the Existence.

Signed:
Ritik, 5066965
Vijay, 5066979

iii
 ABSTRACT

A real-time chat application is a software program that enables users to communicate with
each other in real-time. With the widespread adoption of digital communication and the
increasing reliance on mobile devices, computers, chat applications have become an essential
tool for staying connected and conducting business in today's world. This project report aims
to design and implement a real-time chat application that is reliable, secure, and user-friendly.

The project report starts by outlining the objectives of the application, which include
providing a platform for users to exchange messages and information. The report then
describes the technical requirements of the application, such as the programming language,
database management system, and communication protocols that will be used.

The report emphasizes the importance of user experience and provides detailed user interface
(UI) designs for the chat application. The UI is designed to be intuitive, responsive, and
aesthetically pleasing to enhance the user's overall experience. The report also outlines the
security measures that will be implemented to protect user data and prevent unauthorized
access to the application.

To achieve the real-time functionality of the application, the report proposes the real time
database provided by firebase. Real time database enable real-time updates in the database
which can be reflected on chats of the clients, allowing for instant message delivery and
updates. The report also details the algorithms that will be used for message queuing and
delivery, ensuring that messages are delivered to the intended recipient promptly and
efficiently.

In conclusion, this project report proposes the development of a real-time chat application
that provides users with a reliable, secure, and user-friendly platform for communication. The
application is designed for real-time messaging. The report provides a detailed plan for the
development, testing, and deployment of the application, ensuring that the final product
meets the objectives of the project.

iv
 CONTENTS
Certificate i
Candidate’s Declaration ii
Acknowledgements iii
Abstract iv
Contents v-vi
List of Figures vii
1. Introduction 1-4
1.1 Purpose of real-time chat application 1
1.2 Title of the project 2
1.3 Objective 2
1.4 Problem specification/Need of project 3
1.5 Feasibility study 4

2. Software Requirement & Specifications 5

2.1 Frontend 5
2.2 Backend 5
2.3 Database 5
2.4 Server 5
3. Methodology 6-9
Selection of technology/Specific requirement 34
3.1 React 6
3.2 Javascript 6
3.3 JSX 7
3.4 JSON 7
3.5 SASS 7
3.6 Material Icon (MUI Icons) 8
3.7 Firebase 8
3.8 VS Code 9
4. Coding 10-30
4.1 Login 10-12
4.2 Home 12-17
4.3 Details 17-21
4.4 AuthContext 22-22
4.5 ChatContext 22-23

v
 4.6 [Link] 23-24
4.7 [Link] 24-30
5. ANALYSIS, RESULT AND DISCUSSION 31-39
5.1 Data flow diagram 31
5.2 Input-output form (screen layout) 32-35
5.3 Mobile-UI 36-37
5.4 Dark Theme 38-38
5.5 Limitation 39-39
6. Conclusion 40
6.1 Final conclusion 40
6.2 Future scope 40
7. REFRENCES 41

vi
 List of Figures

Figure Title Page

No.
5.1.1 Data Flow Diagram 31
5.2.1 Login Screen 32
5.2.2 Logging from google 32
5.2.3 Create your profile 33
5.2.4 Avatar Preview 33
5.2.5 Home page 34
5.2.6 Search 34
5.2.7 Profile 35
5.2.8 Chat with friends 35
5.3.1 Mobile message 36
5.3.2 Mobile Chat 37
5.3.3 Mobile settings 37
5.4.1 Dark theme for Laptop 38
5.4.2 Dark theme for Mobile 38

vii
 INTRODUCTION

1.1 Purpose of real-time chat application

A real-time chat application is a software program that enables people to communicate with
each other instantly over the internet. It allows users to send and receive messages in real-
time, as well as engage in group discussions, voice and video calls, file sharing, and more.
These applications have become an essential tool for individuals, businesses, and
organizations to communicate and collaborate with one another, regardless of their location.
With the rise of mobile devices, real-time chat applications have become even more
important, as people can use them on the go to stay connected with their colleagues, friends,
and family. In this age of instant gratification, real-time chat applications offer a seamless and
convenient way to stay connected with the people that matter most.

Real-time chat applications typically feature a simple and intuitive interface that allows users
to quickly send and receive messages, see when others are online, and easily manage their
conversations. Some of the most popular real-time chat applications include WhatsApp,
Facebook Messenger, Slack, Microsoft Teams, and Zoom.

1
 1.2 TITLE OF THE PROJECT

Real-Time chat Application

A real-time chat application is a software program that enables users to communicate with
one another in real-time. These applications can be used for personal or professional purposes
and can be accessed through desktop, web or mobile platforms.

Real-time chat applications are designed to provide an instant messaging platform where
users can exchange messages, images, videos, and other types of multimedia content. These
applications typically provide features like group chats, one-on-one chats, voice and video
calls, file sharing, and more.

The development of real-time chat applications involves complex backend architecture and
requires the use of various programming languages, tools, and libraries.

1.3 OBJECTIVE

The main objective of real time chat application are:

• To provide a user-friendly and intuitive interface that allows users to easily navigate
through the application and access its features.

• To offer advanced features such as voice and video calls, group chats, file sharing,
and more, to provide a comprehensive communication platform for users.

• To ensure the security and privacy of user conversations through end-to-end

encryption and other security measures.

• To make the application accessible through desktop, web, and mobile platforms,
ensuring cross-platform compatibility.

2
1.4 PROBLEM SPECIFICATION/ NEED OF PROJECT

In today's fast-paced world, people need a convenient and efficient way to communicate with
each other in real-time. However, existing chat applications often have limitations, such as
poor user interface, limited functionalities, or security concerns. Therefore, we aim to
develop an innovative and user-friendly real-time chat application that addresses these issues
and provides a seamless communication experience.

Our application will provide the following solutions to the existing problems:

1 User-Friendly Interface: The application will have an intuitive and user-friendly interface
that allows users to easily navigate through the app and access various features.

2 Enhanced Functionality: The application will offer a range of features such as voice and
video calls, file sharing, group chats, and more, to provide users with a comprehensive
communication platform.

3 Cross-Platform Compatibility: The application will be compatible with desktop, web,

and mobile platforms, making it accessible to a wider audience.

4 Efficient Resource Management: The application will be optimized to consume fewer

resources, ensuring efficient use of device storage and battery life.

Our goal is to create an innovative real-time chat application that offers an unparalleled user
experience, addresses existing problems, and sets new standards for communication
applications.

3
 1.5 FEASIBILITY STUDY

The feasibility study of Real-Time Chat Application shows that it is possible to develop the
application with advanced features using various programming languages and frameworks.
The financial feasibility is positive as the development, infrastructure, and marketing costs
can be managed, and the application can generate revenue through various monetization
models.

The operational feasibility is also positive as the application's features are designed to provide
an intuitive and user-friendly interface that is easy to navigate, and it can be accessed through
desktop, web, and mobile platforms. The application's security features ensure the privacy
and security of user conversations.

4
 SOFTWARE REQUIREMENT & SPECIFICATION
2 SOFTWARE REQUIREMENT & SPECIFICATION

The software requirements and specifications for Real-Time Chat Application are as follows:

2.1 Frontend: The application's frontend can be developed using popular frameworks
such as React with SASS and for functionality.
1. React
2. SASS
3. JAVASCIPT
4. JSX
5. JSON
6. Context Api
2.2 Backend: The application's backend can be handled using firebase API and many
functionalities such as authentication will be done using firebase.
1. Firebase
2. Authentication

2.3 Database: The application's database can be implemented using firebase real-time
database as of its real time updating capability.

2.4 Server: The application can be hosted on cloud computing services such as Amazon
Web Services (AWS), Google Cloud Platform (GCP), or Microsoft Azure and
multiple options but as we are using firebase we can use firebase hosting for hosting
our web app.

5
 METHODOLOGY

3 SELECTION OF TECHNOLOGY/ SPECIFIC REQUIREMENT

Languages Used:

3.1 React: React is a popular open-source JavaScript library used for building user
interfaces (UIs) for web and mobile applications. React allows developers to build
reusable UI components that can be used to create complex and interactive user
interfaces. React is a popular open-source JavaScript library used for building user
interfaces (UIs) for web and mobile applications. React allows developers to build
reusable UI components that can be used to create complex and interactive user
interfaces.
React is based on the concept of a "virtual DOM" which is a lightweight
representation of the actual DOM. This virtual DOM is used to improve the
performance of the application by minimizing the number of updates needed to render
the UI. When a change is made to the UI, React updates the virtual DOM, calculates
the differences between the virtual DOM and the actual DOM, and then only updates
the parts of the actual DOM that have changed.

3.2 JavaScript: JavaScript is a client-side language, which means it runs on the user's
browser and is used to manipulate the Document Object Model (DOM) of a web
page. It is often used to add interactivity and dynamic behavior to web pages, such
as form validation, animations, and user interface enhancements.
JavaScript is known for its versatility and flexibility. It supports object-
oriented programming, functional programming, and procedural programming
paradigms. It has a wide range of built-in functions and libraries that can be used to
perform various tasks, such as manipulating the DOM, handling events, making
AJAX requests, and performing animations.

6
3.3 JSX: JSX is a syntax extension used in React applications that allows developers to
write HTML-like code within JavaScript. It stands for JavaScript XML and it is a
combination of JavaScript and XML-like syntax. JSX makes it easier for developers
to write and understand code by creating a hierarchy of components that resemble
traditional HTML markup.
JSX is not a requirement for using React, but it is a popular way to define
React components because it simplifies the process of creating UI elements and
makes the code more readable and maintainable. When JSX code is compiled, it is
transformed into plain JavaScript code that can be executed by the browser.

3.4 JSON: JSON stands for JavaScript Object Notation. It is a lightweight data
interchange format that is easy for humans to read and write, and easy for machines
to parse and generate. JSON is based on a subset of the JavaScript programming
language, and is often used as a data format for APIs and web applications.
JSON is a text-based format that consists of key-value pairs enclosed in curly
braces {} or square brackets []. Keys must be strings, and values can be strings,
numbers, booleans, null, objects, or arrays.

3.5 SASS: Sass (short for Syntactically Awesome Style Sheets) is a CSS preprocessor
that adds advanced features to CSS, such as variables, nesting, mixins, and
functions. Sass allows developers to write more maintainable and scalable CSS code
by providing a way to organize code and reuse styles across multiple elements.

Sass code is written in .scss files, which are similar to standard CSS files but
with added functionality. For example, Sass allows developers to define variables for
colors, font sizes, and other styles. Variables are defined using the $ symbol, and can
be reused throughout the code.

7
3.6 Material Icons (MUI Icons): MUI icons are a set of customizable vector icons that
can be used in web applications. MUI (formerly known as Material-UI) is a popular
React component library that provides pre-built UI components and styling tools.
MUI icons are based on the Material Design guidelines and include a wide
range of commonly used icons, such as navigation icons, social media icons, and file
type icons. They are designed to be lightweight and scalable, and can be easily
customized to fit the needs of a specific project.

3.7 Firebase: Firebase is a mobile and web application development platform,

originally developed by Firebase Inc. and later acquired by Google. Firebase
provides a suite of tools and services that help developers build, test, and deploy
mobile and web applications quickly and easily.

Some of the key features of Firebase include:

o Realtime Database: Firebase provides a cloud-hosted NoSQL database that
allows developers to store and sync data in real-time across multiple clients.
o Authentication: Firebase includes built-in authentication services that allow
developers to easily add user authentication to their applications, including
email and password authentication, social media sign-in, and multi-factor
authentication.
o Hosting: Firebase provides web hosting services that allow developers to
easily deploy and host their web applications, with automatic SSL certificates
and custom domain support.

8
3.8 VS Code: Visual Studio Code (VS Code) is a free and open-source code editor
developed by Microsoft. It is designed to be lightweight and highly customizable,
with features such as code highlighting, debugging, and code completion.

Pages:

9
 4. Coding

[Link]
import React, { useState, useEffect } from 'react'
import logo from '../images/[Link]'
import google from '../images/[Link]'
import loginLogo from '../images/[Link]'
import "./[Link]"
import { signInWithPopup, GoogleAuthProvider, onAuthStateChanged } from
"firebase/auth";
import { auth } from "../firebase"
import { useNavigate } from "react-router-dom";
import { onValue, ref } from "firebase/database";
import { db } from "../firebase"

export const Login = () => {

const provider = new GoogleAuthProvider();
const navigate = useNavigate();
const [err, setErr] = useState(false);
const [login, setLogin] = useState(false);
useEffect(() => {
onAuthStateChanged(auth, (user) => {
if (user) {
onValue(ref(db, 'users/' + [Link]), (snapshot) => {
const data = [Link]();
if (data) {
navigate("/")
}
else {
navigate("/details")
}
});

10
} else {
setLogin(true)
}
});
}, [])
const signIn = async () => {
try {
await signInWithPopup(auth, provider)
.then((result) => {
const user = [Link];
onValue(ref(db, 'users/' + [Link]), (snapshot) => {
const data = [Link]();
if (data) {
navigate("/")
}
else {
navigate("/details")
}
});

})

} catch (err) {
setErr(true);
}
}
if (login) {
return (
<div className='login'>
<div className="loginContainer">
<div className="appName">
<img className="logo" src={logo} alt="logo" />
<h2>Chatcord</h2>
</div>

11
<img src={loginLogo} alt="login" />
<div className="welcome">
<h2 className='welcomeText'>Welcome to Chatcord</h2>
<p>Chat with your friends online</p>
<button onClick={signIn}>Continue with google <img src={google} alt="google logo"
/></button>
{err && <span>Something went wrong</span>}
</div>
</div>
</div>
)
}
}

[Link]

import React, { useEffect, useState } from 'react'

import { Chat } from '../components/Chat'
import { Sidebar } from '../components/Sidebar'
import { set, ref as ref_database, onValue } from "firebase/database";
import { db, auth } from "../firebase"
import { useNavigate } from "react-router-dom";
import { onAuthStateChanged } from "firebase/auth";

export const Home = () => {

const navigate = useNavigate();
const [user, setUser] = useState()
const [userId, setUserId] = useState()
const [userData, setUserData] = useState()
const [userStatus, setUserStatus] = useState(true)
const [side, setSide] = useState()
const [sidebarDisplay, setsidebarDisplay] = useState(true)
const [chatDisplay, setchatDisplay] = useState(true)

12
useEffect(() => {
onAuthStateChanged(auth, (user) => {
if (user) {
setUserId([Link]);
onValue(ref_database(db, 'users/' + [Link]), (snapshot) => {
const data = [Link]();
if (data) {
navigate("/")
}
else {
navigate("/details")
}
});

} else {
navigate("/login")
}
});

}, [])

useEffect(() => {
onValue(ref_database(db, 'users/' + userId), (snapshot) => {
const data = [Link]();
if (data) {
setUserData(data)
}
});
}, [userId])

useEffect(() => {
if (userData) {

13
if (userStatus) {
set(ref_database(db, 'users/' + userId), {
name: [Link],
userStatus: [Link],
profile_picture: userData.profile_picture,
status: "Online"
});

}
else {

const currentDate = new Date();

const date = [Link]();
const month = [Link]();
const year = [Link]();
const minutes = [Link]();
const hours = [Link]();
const second = [Link]();
const timestamp = new Date().getTime();
// [Link](timestamp);

let monthDateYear = date + '-' + (month + 1) + '-' + year;

let time = hours + ':' + minutes;

function convertTime(time) {
let timeArr = [Link](':');
let hours = parseInt(timeArr[0]);
let minutes = timeArr[1];
let amPm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12;
if(minutes<10){
minutes="0"+minutes;
}

14
let convertedTime = `${hours}:${minutes} ${amPm}`;
return convertedTime;
}

set(ref_database(db, 'users/' + userId), {

name: [Link],
userStatus: [Link],
profile_picture: userData.profile_picture,
status: "last seen at " +convertTime(time)+" on "+monthDateYear
});

}
}
}, [[],userStatus])

[Link]("visibilitychange", (event) => {

if ([Link] === "visible") {
setUserStatus(true)
} else {
setUserStatus(false)
}
});

[Link]('beforeunload', function (e) {

setUserStatus(false)
});

const [theme, setTheme] = useState();

useEffect(() => {
const currentTheme = [Link]('Theme');
if (currentTheme) {
setTheme(currentTheme);

15
}
});
useEffect(() => {
const home = [Link]('home');
if (theme === 'dark') {
// [Link]('dark')
const home = [Link]("home");
[Link]("dark-theme")
[Link]("light-theme")

}
else if (theme === 'light') {
// [Link]('light')
[Link]('light-theme')
[Link]('dark-theme')

}
}, [theme])
const takeTheme = (data) => {
setTheme(data)
}
const takeUser = (data) => {
setUser(data);
if (data) {
if ([Link] <= 850) {
setsidebarDisplay(false)
setchatDisplay(true)
}
}

}
const takeDisplay = (data) => {
if (data) {
setSide([Link]())

16
if (data) {
// [Link]([Link]);
if ([Link] <= 850) {
setchatDisplay(false)
setsidebarDisplay(true)
}
}
}
}

return (
<div id="home" className='light-theme home'>
<div className="homeContainer">
{sidebarDisplay && <Sidebar mode={takeTheme} userId={takeUser} display={side} />}
{chatDisplay && <Chat userId={user} display={takeDisplay} />}

</div>
</div>
)
}

[Link]

import React, { useContext, useState, useEffect, useRef } from 'react'

import "./[Link]"
import logo from '../images/[Link]'
import addAvatar from '../images/[Link]'
import PersonIcon from '@mui/icons-material/Person';
import AutoAwesomeMosaicIcon from '@mui/icons-material/AutoAwesomeMosaic';
import { AuthContext } from '../context/AuthContext';
import { db, storage, auth } from "../firebase"
import { uploadBytesResumable, ref as ref_storage, getDownloadURL } from
"firebase/storage"
import { set, ref as ref_database, onValue } from "firebase/database";

17
import { onAuthStateChanged } from "firebase/auth";
import { useNavigate } from "react-router-dom";

export const Details = () => {

const [err, setErr] = useState(false);
const [loading, setLoading] = useState(false);
const [fill, setFill] = useState(false);
const [details, setDetails] = useState(false);
const { currentUser } = useContext(AuthContext)
const navigate = useNavigate();

useEffect(() => {
onAuthStateChanged(auth, (user) => {
if (user) {
onValue(ref_database(db, 'users/' + [Link]), (snapshot) => {
const data = [Link]();
if (data) {
navigate("/")
}
else {
setDetails(true)
}
});

} else {
navigate("/login")
}
});
}, [])

const storageRef = ref_storage(storage, `${[Link]}`);

onValue(ref_database(db, 'users/' + [Link]), (snapshot) => {

18
const data = [Link]();
if (data) {
navigate("/")
}
});

const selectImage = () => {

const image = [Link]("profileImage");

[Link]("change", () => {
const files = [Link]("profileImage").files[0];
if (files) {
const imgPreview = [Link]("imgpreview");
const fileReader = new FileReader();
[Link](files);
[Link]("load", function () {
[Link] = "block";
[Link] = '<img src="' + [Link] + '" />';

});
}
})
}

const handleSubmit = async (e) => {

[Link]()
const displayName = [Link][0].value;
const userStatus = [Link][1].value;
const userImage = [Link][2].files[0];
if (displayName !== "") {
if (userStatus !== "") {

19
if (userImage !== undefined) {
try {
setLoading(true);
setFill(false)
await uploadBytesResumable(storageRef, userImage).then(() => {
setLoading(true);
getDownloadURL(storageRef).then(async (url) => {
[Link](url)
await set(ref_database(db, 'users/' + [Link]), {
name: displayName,
userStatus: userStatus,
profile_picture: url,
status: "Online"
});
navigate("/")
})
})

} catch (error) {
setErr(true);
setLoading(false);
}

}
else {
setFill(true)
}
}
else {
setFill(true)
}

20
else {
setFill(true);
}
}
if (details) {
return (
<div className="details">
<form className="detailsContainer" onSubmit={handleSubmit}>
<div className="appName">
<img className="logo" src={logo} alt="logo" />
<h2>Chatcord</h2>
</div>
<h2>Create your profile</h2>
<div className='input'><PersonIcon style={{ fontSize: "30px" }} /><input type="text"
placeholder='Name' /></div>
<div className='input'><AutoAwesomeMosaicIcon style={{ fontSize: "30px" }} /><input
type="text" placeholder='Write about yourself ' /></div>

<input onClick={selectImage} style={{ display: "none" }} type="file" id="profileImage"

accept="image/png, image/gif, image/jpeg" />
<label htmlFor="profileImage"><img src={addAvatar} alt="avatar" /><span>Add an
avatar</span></label>
<div id='imgpreview'></div>
{loading && <span>Uploading and compressing the image please wait...</span>}
{err && <span>Something went wrong</span>}
{fill && <span>Please fill all details</span>}
<button type='submit'>Continue</button>
</form>
</div>
)
}
}

21
 [Link]
import { createContext, useEffect, useState } from "react";
import { auth } from "../firebase";
import { onAuthStateChanged } from "firebase/auth";

export const AuthContext = createContext();

export const AuthContextProvider = ({ children }) => {

const [currentUser, setCurrentUser] = useState({});

useEffect(() => {
const unsub = onAuthStateChanged(auth, (user) => {
setCurrentUser(user);
});

return () => {
unsub();
};
}, []);

return (
<[Link] value={{ currentUser }}>
{children}
</[Link]>
);
};

[Link]
import { createContext, useReducer} from "react";
export const ChatContext = createContext();

export const ChatContextProvider = ({ children }) => {

const INITIAL_STATE = {

22
 user: []
};

const chatReducer = (state, action) => {

switch ([Link]) {
case "CHANGE_USER":
return {
user: [Link]
};

default:
return state;
}
};

const [state, dispatch] = useReducer(chatReducer, INITIAL_STATE);

return (
<[Link] value={{ data: state, dispatch }}>
{children}
</[Link]>
);
};

[Link]
import { Details } from "./pages/Details";
import { Home } from "./pages/Home";
import { Login } from "./pages/Login";
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";

23
import * as serviceWorkerRegistration from "./[Link]";

function App() {

return (
<BrowserRouter>
<Routes>
<Route path="/">
<Route index element={<Home/>}/>
<Route path="login" element={<Login/>} />
<Route path="details" element={<Details/>} />
</Route>
</Routes>
</BrowserRouter>
);

[Link]();
export default App;

[Link]
@import

url('[Link]

::-webkit-scrollbar {
width: 5px;
border-radius: 30px;

24
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.203);
}

::-webkit-scrollbar-thumb {
background: #888;
}

::-webkit-scrollbar-thumb:hover {
background: #555;
}

*{
font-family: 'Roboto', sans-serif;
}

// login
.login {
height: 100vh;
width: 100vw;
background-color: #FAC204;
display: flex;
align-items: center;
justify-content: center;

.loginContainer {
height: 90%;
width: 350px;
padding: 20px 0px 20px 0px;

25
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-radius: 15px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;

.appName {
display: flex;
align-items: center;

.logo {
width: 100px;
}

h2 {
text-transform: uppercase;
font-weight: bolder;
color: #4e426d;
}
}

img {
width: 350px;
}

.welcome {
display: flex;
align-items: center;
flex-direction: column;

.welcomeText {
margin: 0 10px;

26
color: #4e426d;
}

p{
margin: 0px;
margin-bottom: 20px;
font-size: 12px;
}

button {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 10px;
border: none;
background-color: #4e426d;
border-radius: 8px;
color: white;
font-size: 15px;
width: 300px;
cursor: pointer;

img {
width: 25px;
padding-left: 10px;
}
}
}

}
}

// details
.details {

27
height: 100vh;
width: 100vw;
background-color: #FAC204;
display: flex;
align-items: center;
justify-content: center;

.detailsContainer {
padding: 30px 0px;
width: 350px;
display: flex;
flex-direction: column;
gap: 15px;
background-color: white;
border-radius: 15px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
align-items: center;
justify-content: center;

.appName {
display: flex;
align-items: center;

.logo {
width: 100px;
}

h2 {
text-transform: uppercase;
font-weight: bolder;
}
}

h2 {

28
color: #4e426d;
}

.chat {
// margin: 0 0 0 10px;
overflow: hidden;
width: 100% !important;
background-image: var(--msg-bg) !important;
display: none;
animation: chat 0.2s ease 0s 1 normal forwards;

@keyframes chat {
0% {
transform: translateX(-100vw);
}

100% {
transform: translateX(0);
}
}

.userInfo {

margin: 0px !important;

border-radius: 0 0 20px 20px !important;
border-bottom: none !important;

.backButton {
display: flex !important;
}

.userInfoOption {
.UserInfoOptions {

29
width: 100% !important;
top: 100px !important;
right: 0px !important;
// display: flex !important;
align-items: center;
justify-content: center;
box-shadow: none !important;

.userDetailsCard {
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0,
0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

}
}
}

.message {
margin: 0px !important;
background-color: var(--app-bg) !important;
height: calc(100vh - 141px) !important;
padding: 5px 10px 5px 10px !important;
}
.input {
margin: 0 !important;
width: 100% !important;
border-top: none !important;
border-radius: 20px 20px 0 0 !important;

.inputContainer {
border-radius: 20px !important;
}}}}}

30
5 Analysis result and discussion

5.1 Data Flow Diagram

Fig. 5.1.1 Data flow diagram

31
5.2 Input-Output form (Screen Layout)

Login Screen:

Fig. 5.2.1 Login Screen

First user will land on login page of our real time chat application.

User have to continue with google to access application.

After entering google account if user have already an account on chatcord the user will be
directly redirected to home page. But if user doesn’t have account the user have to create
profile by entering his/her name, status and avatar.

Fig. 5.2.2 Logging from google

32
Create your profile:
If user doesn’t have account on chatcord. The user have to create profile by entering name,
status, and adding avatar, these details can be changed later.

Fig. 5.2.3 Create your profile

You will also get preview of your added avatar.

Fig. 5.2.4 Avatar Preview

After entering all details user will be redirected to home page.

33
Home page:

Fig. 5.2.5 Home page

After arriving on home page user can search for their friends by hitting on search and add
them by clicking on chat icon.

Search:

Fig. 5.2.6 Search

34
Profile:

User can change their profile details from profile by accessing it by clicking on more option>
your profile.

Fig. 5.2.7 Profile

Chatting with friends:

After finding friends from search the user can have chat with them bye sending
messages to them. The application is also able to show the online and last seen
status of the next person.

Fig. 5.2.8 Chat with friends

35
5.3 Mobile UI

We have to create UI in such a way that it appears good on mobile devices as well as on
desktop. So we have to built UI using pure CSS.

The UI is completely user friendly and responsive.

PWA: PWA stands for Progressive Web App. It is a type of web application that is built
using modern web technologies and designed to provide users with an app-like experience on
their mobile or desktop devices.
Messages:

Fig. 5.3.1 Mobile message

36
Chats:

Fig. 5.3.2 Mobile Chat

Settings: Settings have option to switch between light and dark mode, user can logout by
clicking on logout button.

Fig. 5.3.3 Mobile settings

37
5.4 DARK THEME

A dark theme is often used in applications that are used for prolonged periods, such as text
editors, code editors, and productivity tools, as it reduces the amount of glare emitted by the
screen and can be less distracting than a bright, white background.
Dark theme for Pc/ laptop:

Fig. 5.4.1 Dark theme for Laptop

Dark theme for Mobile devices:

Fig. 5.4.2 Dark theme for Mobile

38
5.5 Limitations

While real-time chat applications provide a convenient and effective means of communication,
they also have some limitations that should be considered.

• Security: Real-time chat applications can be vulnerable to security threats such as

hacking, data breaches, and malware attacks. It is crucial to implement strong security
measures to protect user data and privacy.

• User overload: Real-time chat applications can become overwhelming for users when
they receive too many notifications or messages, leading to communication overload
and decreased productivity.

• Legal compliance: Real-time chat applications must comply with various regulations
and laws related to data privacy, user protection, and content moderation.

• Language barriers: Real-time chat applications may face challenges in handling

communication between users who speak different languages.

39
6. Conclusion and future scope

6.1 Final Conclusion

• In conclusion, a real-time chat application is an essential tool for communication in
today's fast-paced world. With the advancement of technology, people expect to
communicate instantly with each other, and a real-time chat application provides this
functionality.

• To create a successful real-time chat application, there are several key factors to
consider. These include user experience, security, scalability, and the ability to
integrate with other systems.

• Furthermore, it is crucial to choose the right technology stack for building a real-time
chat application, as it directly affects the application's performance and scalability.
Some of the popular technologies used for building real-time chat applications include
[Link], React, and Firebase.

• Finally, to ensure the success of a real-time chat application, it is crucial to

continually monitor and optimize its performance and user experience, gather
feedback from users, and make necessary improvements.

6.2 Future scope

The future scope for real-time chat applications is vast, with several emerging trends and
technologies. Here are some potential future developments for real-time chat applications:

• Artificial Intelligence: Real-time chat applications can leverage artificial intelligence

(AI) to enhance user experience, personalize conversations, and automate routine tasks
such as scheduling meetings and appointments.

• Voice and Video Calling: The demand for voice and video calling within chat
applications is increasing. Real-time chat applications can incorporate these features to
provide a complete communication experience to users.

40
7. REFRENCES

David Flanagan(2002) JavaScript: The Definitive Guide: Master the World's Most-Used
Programming Language.

Robin Wieruch, Robin Wieruch (2017) The Road to Learn React Your Journey to Master Plain
Yet Pragmatic React. Js.

Thomas Powell, Fritz Schneider, Thomas Powell, Fritz Schneider (2004) JavaScript: The
Complete Reference, 2nd Edition.

Thomas A. Powell, Fritz Schneider, Thomas A. Powell, Fritz Schneider (2012)

JavaScript The Complete Reference 3rd Edition.

41