Dr.

AMBEDKAR INSTITUTE OF TECHNOLOGY

(An Autonomous Institution. Aided By Government Of Karnataka)
Near Jnana Bharathi Campus. Bangalore-560056

MINI PROJECT
Report
on

“CHAT APPLICATION
USING REACT.JS”
BACHELOR OF ENGINEERING
IN
COMPUTER SCIENCE AND ENGINEERING
2020-21

SUBMITTED
BY
DIVAKAR D G SUHAS
1DA18CS047 1DA18CS049

UNDER THE GUIDANCE

OF
Mr. Harish G
Assoc.Prof,Dept of CSE
Dr.AIT

Department of Computer Science & Engineering

2020-21
 Dr.AMBEDKAR INSTITUTE OF TECHNOLOGY
(An Autonomous Institution. Aided By Government Of Karnataka)
Near Jnana Bharathi Campus. Bangalore-560056

CERTIFICATE

This is to certify that the Project work entitled “CHAT APPLICATION USING
REACT.JS” submitted in the partial fulfilment of the 6th semester Mini-Project curriculum
during the year 2020-21, is a result of bonafied work carried out by

DIVAKAR D G SUHAS
1DA18CS047 1DA18CS049

Signature of Guide:

Mr. Harish G
Assoc,Prof , Dept of CSE
Dr.AIT

1. Internal examiners

2. External examiners
Dr. Siddaraju,
H.O.D
Department of CSE,
Dr.AIT
 ACKNOWLEDGEMENT

The satisfaction that accompanies to this project would be incomplete without the mention of
the people who made it possible, without whose constant guidance and encouragement would have
made our efforts go in vain

We consider ourselves privileged to express our gratitude and respect towards all those who
guided us through the project, “Chat Application using react.js”.

We would like to express our gratitude to Dr. M. Menakshi, Principal Dr. AIT, for providing
us the congenial environment to work in.

We would like to express our profuse gratitude to Dr. Siddaraju, HOD, Dept. of Computer
Science & Engineering, Dr. AIT, for giving us the support, encouragement and providing us the
required lab facilities that was necessary for the completion of this project.

As a token of gratitude, we would like to acknowledge our sincere gratefulness to the internal
guide Mr. Harish G, Associate Professor, Dept. of CSE, Dr.AIT, for her unlimited support and
encouragement provided throughout the process.

We also express our gratitude and sincere thanks to all the teaching and non-teaching staff of
Computer Science & Engineering Department.

Finally, yet importantly, we would like to express our heartfelt thanks to our beloved Parents
for their blessings and our Friends for their help and wishes for the successful completion of this
project report

DIVAKAR D

G SUHAS
 ABSTRACT

Teleconferencing or Chatting, is a method of using technology to bring people and ideas

together despite of the geographical barriers. The technology has been available for years but the
acceptance it was quit recent. Our project is an example of realtime chat application.
React.js was the most loved web framework by the developers worldwide because it
helps us create the most engaging web apps efficiently and fast with minimal coding. In an
attempt to witness this power we created a chat application using react.js and Firebase as
backend

The web app that allows the users to create account and login safely either by Google
Auth or Email & password login with the help of firebase Authentication. The main goal is to
allow the users to share the information remotely and safely, Firebase embedded with firebase
authentication, firebase storage, firebase firestore realtime database for managing users data
safe and secure.

Our web chat app allows the users to send various types information like “text, video’s, image,
emoji” it handles any unexpected error or exceptions by giving a pop up notification to users.
The web app allows the users to create a room and chat with mass group of people at once
 Table of Contents

Chapter No Topics Page no

Chapter 1 Introduction 1
Chapter 2 Literature Survey 2

Chapter 3 Software Requirement Specification 4

Chapter 4 Design and Implementation 6

Chapter 5 Testing 29

Chapter 6 Snapshots 33
Conclusion 37
Future Enhancement 38
Bibliography 39
Chat Application using reactjs Page No:1

CHAPTER 1

INTRODUCTION

Communication is a mean for people to exchange messages. It has started since the
beginning of human creation. Distant communication began as early as 1800 century with the
introduction of television, telegraph and then telephony. Interestingly enough, telephone
communication stands out as the fastest growing technology, from fifixed line to mobile
wireless, from voice call to data transfer. The emergence of computer network and
telecommunication technologies bears the same objective that is to allow people to
communicate. All this while, much efforts has been drawn towards consolidating the device
into one and therefore indiscriminate the services. Chatting is a method of using technology to
bring people and ideas together despite of the geographical barriers.

Messaging apps are great way to share information in direct messages, from yahoo
chat that started in those early days of internet to snapchat, whatsApp and Facebook’s highly
sophisticated chat messenger, online Chat application have evolved dramatically over last
decade. At the heart of these chat app innovation lies fascinating for web technology that was
earlier seen as a fleeting fad. As now more than 70% of total visits on top digital news websites,
the need for developing web-specific chat apps has escalated.

In an attempt to simulate the functions of realtime chat and providing the users with rich and
easy UserInterface(UI), allowing them to connect with their surroundings by just a simple
signup a web based chat application been built.

Our Web based chat application created with the help of react, react is built around
components, and to manage our user related data google’s Firebase technology been used,
frontend of the chat application is built using reactjs UI components, connecting with people
is very much essential in today’s world, and allow them to share information fast, safe and
secure, we managed to develop web based chat application that allow the user to share the
information like text, images, videos and emoji’s to express their thoughts and feelings to
opposite user.

Users can get messages in realtime with fraction of second with the help of firebase firestore
NoSql database to store any amount of data & retrieve it as often as we like. Safe, secure and
flexible storage with great set of development tools. Users are authenticated using Google
OAuth and with their Email and Password authentication. Users data are safe with strong
firebase firestore security rules. In our web chat application users can make sure that their
friend is in online or not database is quick to update the state of users to all users in realtime.

Combined these two powers to provide the basic chat app facilities to users and allow them to
stay connected.

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

Chat Application using reactjs Page No:2

CHAPTER 2

LITERATURE SURVEY
2.1 REACTJS

React(also known as React.js or ReactJS) is a free and open source front-end JavaScript
library for building user interface or UI components. It is maintained by Facebook and a
community of individual developers and companies. React can be used as a base in the
development of single page or mobile applications. React’s popularity today has eclipsed that
of all other front end development frameworks

Features of React

1. JSX-JavaScript Syntax Extension

JSX is a syntax extension to

JavaScript. It is used with react to describe
what the user interface should look like. By
using JSX, we can write HTML structures
in the same file that contains JavaScript
code. This makes the code easier to understand and debug, as it avoids the usage of complex
JavaScript DOM structures.

2. Virtual DOM

React keeps a lightweight representation

of the real DOM in the memory, and that is
known as “Virtual DOM(VDOM)

3. Performance

React uses VDOM, which makes the web

application run mush faster than those
developed with alternate front-end frameworks. React breaks a complex user interface into
individual components, allowing multiple users to work on each component simultaneously,
thereby speeding up the development time.

4. Extensions

React goes beyond simple UI design and has many extensions that offers complete
application architecture support. It provides server-side rendering, which entails rendering a
normally client-side only web application on the server.

5. One-way Data Binding

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

Chat Application using reactjs Page No:3

React’s one-way data binding keeps everything modular and fast. A unidirectional data
flow means that when developer designs a react app, they often nest child components.
This way a developer knows where error accurs.

2.2. FIREBASE

Firebase is a toolset to “build, improve, and grow your app”, and the tools it gives you cover a
large portion of the services that developers would normally have to build themselves, but don’t
really want to build, because they’d rather be focusing on the app experience itself. This
includes things like analytics, authentication, databases, configuration, file storage, push
messaging, and the list goes on. The services are hosted in the cloud, and scale with little to no
effort on the part of the developer.

a. Cloud Firestore
NoSql database built for global apps, Cloud Firestore is a NoSql document database
that lets you easily store, sync, and query data for your mobile and web apps-at global
scale
b. Authentication
Firebase Authentication provides backend services, easy-to-use SDKs, and ready-
made UI libraries to authenticate users to your app. Normally, it would take you months
to set up your own authentication system. And even after that, you would need to keep
a dedicated team to maintain that system. But if you use Firebase, you can set up the
entire system in under 10 lines of code that will handle everything for you, including
complex operations like account merging.

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

Chat Application using reactjs Page No:4

CHAPTER 3

SOFTWARE REQUIREMENT SPECIFICATION

Requirement analysis is a software engineering technique that is composed of the various tasks
that determine the needs or conditions that are to be met for a new or altered product, taking
into consideration that the possible conflicting requirement of various users.
3.1 Hardware & Software Requirement
3.1.1 Hardware Requirements

The hardware requirement specifies the necessary hardware which provides us the
platform to implement our programs.

 The smartphone or laptop should have an OS windows 10/higher.

 1.2 Ghz dual-core processor and 2GB of RAM.

3.1.2 Software Requirements

The software requirement specifies the pre-installed software needed to run the code
being implemented in this project.

 Windows or Mac Operating System

 Microsoft Visual Studio Code
 React JS: Front-end Application
 Firebase: Cloud Firestore database
 Node.js: Server-side JavaScript

3.2 Functional & Non-Functional Requirement

3.2.1 Functional Requirements

Functional requirements are those requirements that are used to illustrate the internal
working nature of the system, the description of the system, and explanation of each subsystem.
It consists of what task the system should perform, the process involved, which data should the
system holds and the interfaces with the user. The functional requirements identified are:

 The web app must have login functionality.

 The web app must allow users to send and receive information in realtime with no
interruption and list all the recent messages.

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:5

 The web chat app should provide a state update of all the users in realtime.

3.2.2 Non-Functional Requirements

It describes aspects of the system that are concerned with how the system provide
the functional requirements They are:

 Security: Only the authorized users allowed to participate in chatting a make new
friends, database is secured and accessed only by the authorized users who logged in.
The database security rules built to provide the high security to the users data.

 Performance and Response time: The system should have high performance rate
when executing user’s input and should be able to provide response within a short time
span

 Error handling: Error should be considerably minimized and an appropriate error

message that guides the user to recover from an error should be provided. Validation of
user’s input is highly essential.

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

Chat Application using reactjs Page No:6

CHAPTER 4

DESIGN AND IMPLEMENTATION

4.1 System Architecture

App.js

Login.js Signup.js Home.js

Sidebar.js
Authorized
User
Main_Container.js

Chat_Message.js
Figure 4.1
Chat_Input.js

The System Design is based on web application design which is compact for mobile browser
which allows users to chat remotely and get connected with others. This system design contains
main modules such as app.js which includes login module signup module and Home module
where users are landed once they login securely. We briefly explain these modules below.

4.1 a) Login Module

Login

Create Account Google OAuth Forgot Password Figure 4.1 a

The login module gives a measure for user to login with email and password. If the person is
new user then he/she can create account with his email in the signup page or he/she can login
directly using Google account. If user forgot his/her password, he/she can reset the password
with the link sent to their verified email ID.

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:7

4.1 b) Home Module

Home

Main_Conatiner Sidebar

Chat_Message

Chat_Input
Figure 4.1 (b)

Home module is the main module where users are landed once they login, Home module
contains sidebar where the users friends list is visible, Main_Container includes
Chat_Messages which retrieves messages data from database and shows to the user and also
includes the Chat_Input which takes the input from user and stores in database.

4.2 Flow Diagram

User Login

Start Chat with

Search for Friend Logout
your friend

Send text, images,

videos, emoji’s

Figure 4.2
4.3 Use Case Diagram

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:8

Use Case Diagram Figure 4.3

4.4 Flow Chart

Figure 4.4

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:9

CODING
App.js

1 import styled from "styled-components";

2 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
3 import Loading from "react-loading";
4 import "./App.css";
import Login from "./Pages/Login";
5
import SignUp from "./Pages/SignUp";
6 import Home from "./Pages/Home";
7 import { useState, useEffect } from "react";
8 import db, { auth } from "./firebase";
9 import MainContainer from "./Components/MainContainer";
10 import SideBar from "./Components/SideBar";
11 import ClipLoader from 'react-spinners/ClipLoader';
12 import FrontPage from './Components/home/home';
13 import Forget from "./Components/Forget/forget";
14 import firebase from "firebase";
import { Offline, Online } from "react-detect-offline";
15
import PermScanWifiIcon from '@material-ui/icons/PermScanWifi';
16
17 function App() {
18 const [loading, setLoading] = useState(false)
19 const [user, setUser] = useState(JSON.parse(localStorage.getItem("user")));
20
21 useEffect(()=> {
22 setLoading(true)
23 setTimeout(()=> {
24 setLoading(false)
25 }, 1000)
}, [])
26
27
28
29 const [signUp, setSignUp] = useState(false);
30
31
32 const signOut = () => {
33 db.collection("users")
34 .doc(auth.currentUser?.uid)
35 .update({
36 isOnline: false,
lastOnline: firebase.firestore.Timestamp.now(),
37
})
38
39 auth
40 .signOut()
41 .then(() => {
42 setUser(null);
43 localStorage.removeItem("user");
44 })
45 .catch((err) => {
46 alert(err.message);
});
47
};
48
49 return (

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:10

50 <Container>
51 <Online>
52 <Router>
53 <Switch>
{
54
loading ?
55 <ClipLoader
56 size={100}
57 color={'#7335dd'}
58 loading={loading}
59 />
60 :
61 <Route exact={true} path="/">
62 <div className="front">
63 <FrontPage />
</div>
64
</Route>
65
}
66 {
67 loading ?
68 <center>
69 <div
70 className="shadow p-3"
71 style={{ backgroundColor: "#E7E7E7", justifyContent: "center"}}
72 >
73 <Loading type="bars" color="black" height={100} width={100} />
74
<h3>Processing...</h3>
75
</div>
76 </center>:
77 <Route exact={true} path="/forget">
78 <Forget />
79 </Route>
80 }
81
82 {!user && signUp ? (
83 <Route exact={true} path="/login">
84 <SignUp setSignUp={setSignUp} />
</Route>
85
) : !user && !signUp ? (
86 <Route exact={true} path="/login">
87 <Login setUser={setUser} setSignUp={setSignUp} />
88 </Route>
89 ) : (
90 <Switch>
91 <Route path="/login">
92 <Home signOut={signOut} user={user}/>
93 </Route>
94 <Route path="/:userId" exact>
<div className="chatDisplaysmall">
95
<MainContainer userName={user.fullname}/>
96
</div>
97 <div className="chatDisplay">
98 <SideBar signOut={signOut} user={user} />
99 <MainContainer userName={user.fullname} />
100 </div>
101 </Route>
102 <Route path="/signup">
103 <SignUp />
104 </Route>
105 </Switch>
)}
106

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:11

107 </Switch>
108 {/*<Route path="\*" component={Notfound}/>*/}
109 </Router>
110 </Online>
<Offline >
111
<PermScanWifiIcon className="wifi"/>
112 <span style={{fontSize: "20px"}}>Please check your connection</span>
113 </Offline>
114 </Container>
115 );
116 }
117
118 export default App;
119
120 const Container = styled.div`
margin:0;
121
padding:0;
122
display: flex;
123 width: 100vw;
124 min-height: 100vh;
125 height: fit-content;
126 justify-content: center;
127 align-items: center;
128 background: linear-gradient(to bottom, #7335dd 20%,#dbdbdb 0%,#dbdbdb 50%,#dbdbdb 80%);
129 `;

Pages:
Login.js

1 import React, { useState, useEffect } from "react";

2 import styled from "styled-components";
3 import Logo from "../assets/Bubbles-alt-icon.png";
4 import GoogleLogo from "../assets/google.png";
import db, { auth, provider } from "../firebase";
5
import { useStateValue } from "../StateProvider";
6 import {Default} from 'react-spinners-css';
7 import { toast } from 'react-toastify';
8 import 'react-toastify/dist/ReactToastify.css';
9 import back from '../assets/background2.jpg';
10 import LockIcon from '@material-ui/icons/Lock';
11 import EmailIcon from '@material-ui/icons/Email';
12 import { Link } from 'react-router-dom';
13 import firebase from "firebase";
14
toast.configure()
15
function Login({ setUser, setSignUp }) {
16
const [email, setEmail] = useState("");
17 const [loading, setLoading] = useState(false);
18 const [password, setPassword] = useState("");
19 const [{ user }, dispatch] = useStateValue();
20
21 const signInWithGoogle = () => {
22 auth
23 .signInWithPopup(provider)
24 .then((result) => {
25 const newUser = {
fullname: result.user.displayName,
26
email: result.user.email,
27 photoURL: result.user.photoURL,

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:12

28 isOnline: true
29 };
30 setUser(newUser);
31 localStorage.setItem("user", JSON.stringify(newUser));
db.collection("users").doc(result.user.uid).set(newUser,{merge: true});
32
// db.collection('users')
33 // .doc(auth.currentUser.uid)
34 // .update({
35 // isOnline: true,
36 // lastOnline: firebase.firestore.Timestamp.now(),
37 // })
38 })
39 .catch((err) => toast.error(err.message,{position: toast.POSITION.TOP_CENTER, autoClose:
40 2000,hideProgressBar: true}));
41 };
42
const signInWithEmail =async (e) => {
43
e.preventDefault();
44 setLoading(true);
45
46 auth
47 .signInWithEmailAndPassword(email, password)
48 .then((auth) => {
49 if (auth.user.emailVerified) {
50 dispatch({
51 type: "SET_USER",
52 user: auth.user,
});
53
const newUser = {
54 name: auth.user.displayName,
55 photo: auth.user.photoURL,
56 isOnline: true
57 };
58
59 setUser(newUser);
60 localStorage.setItem("user", JSON.stringify(newUser));
61
62 db.collection('users')
.doc(auth.user.uid)
63
.update({
64 isOnline: true
65 })
66
67 } else {
68 toast.error("Please Verify Your Account",{position: toast.POSITION.TOP_CENTER,
69 autoClose:3000,hideProgressBar: true});
70 }
71
72 setLoading(false);
})
73
.catch((error) => (toast.error((error.message),{position: toast.POSITION.TOP_CENTER,
74
autoClose: 2000,hideProgressBar: true}),setLoading(false)));
75 };
76
77 console.log(loading)
78
79 return (
80 <Container style={{backgroundImage:"linear-gradient(to bottom, rgba(230, 230, 255, 0.8),
81 rgba(230, 230, 255, 0.7)),url("+back+")",
82 backgroundRepeat:"repeat"}}>
83 <Header>
<div className="header__logo">
84

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:13
85 <Link to="/">
86 <img src={Logo} alt="logo image" />
87 </Link>
88 </div>
89
<div className="header__title">
90 <Link to="/" style={{textDecoration:"none", color:"#000"}}>
91 <p>Connect</p>
92 </Link>
93 </div>
94 </Header>
95 <LoginComponent>
96 <h3>Sign-In</h3>
97
98 <LoginForm onSubmit={signInWithEmail}>
<Email>
99
{/* <p>Email</p> */}
100
<input
101 onPaste={(e)=>{
102 e.preventDefault()
103 return false;
104 }} onCopy={(e)=>{
105 e.preventDefault()
106 return false;
107 }}
108 type="email"
109 name="email"
placeholder="Email"
110
value={email}
111 onChange={(e) => setEmail(e.target.value)}
112
113 />
114 <EmailIcon className="icon"/>
115 </Email>
116 <Password>
117 {/* <p>Password</p> */}
118 <input
119 onPaste={(e)=>{
e.preventDefault()
120
return false;
121 }} onCopy={(e)=>{
122 e.preventDefault()
123 return false;
124 }}
125 placeholder="Password"
126 type="password"
127 name="password"
128 value={password}
129 onChange={(e) => setPassword(e.target.value)}
/>
130
<LockIcon className="icon"/>
131
</Password>
132
133 <div className="signInOptions">
134
135 {loading ?<Default color="blue" size={34}/>
136 : <button onClick={signInWithEmail}><span>Sign-In Securely</span></button>}
137
138 {loading && <p style={{margin: "5px 30px 0 30px"}}>please wait..</p>}
139
140 <OtherSignInOption onClick={signInWithGoogle}>
<img src={GoogleLogo} alt="" />
141

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:14

142 <p>Sign In With Google</p>

143 </OtherSignInOption>
144 </div>
145 <div className="mt-2">
<Link to="/forget" style={{ color: "black", fontWeight:"lighter", marginLeft:"5%" }}>
146
<b className="text-secondary">Forget Password</b>
147 </Link>
148 </div>
149
150 <p className="or__divider">
151 ------------ <span className="OR__word">&nbsp; OR &nbsp;</span>{" "}
152 ------------
153 </p>
154
155 <button className="register__btn" onClick={() => setSignUp(true)}>
Create an Account
156
</button>
157
</LoginForm>
158 </LoginComponent>
159 </Container>
160 );
161 }
162
163 export default Login;
164
165 const Container = styled.div`
166 margin:0;
width: 100vw;
167
display: flex;
168 flex-direction: column;
169 height: 650px;
170 min-height: 100vh;
171 @media (max-width: 800px) {
172 justify-content: flex-start;
173 overflow: hidden !important;
174 }
`;

Signup.js

1 import React, { useRef, useState } from "react";

2 import styled from "styled-components";
3 import {Default} from 'react-spinners-css'
4 import Logo from "../assets/Bubbles-alt-icon.png";
import showPwdImg from './show-password.svg';
5
import hidePwdImg from './hide-password.svg';
6 import db, { auth, storage } from "../firebase";
7 import validator from 'validator';
8 import { toast } from 'react-toastify';
9 import 'react-toastify/dist/ReactToastify.css';
10 import back from '../assets/background2.jpg';
11 import { Link } from 'react-router-dom';
12 import PersonIcon from '@material-ui/icons/Person';
13 import EmailIcon from '@material-ui/icons/Email';
14 import LockIcon from '@material-ui/icons/Lock';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
15
import firebase from "firebase";
16
17 toast.configure()
18

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:15

19 function SignUp({ setSignUp }) {

20 const storageRef = storage.ref();
21 const [fullname, setFullname] = useState("");
22 const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
23
const [repassword, setRepassword] = useState("");
24 const [profile, setProfile] = useState("");
25 const [disable, setDisable] = useState(false);
26 const [loading, setLoading] = useState(false);
27 const [errorMessage, setErrorMessage] = useState('');
28 const [matchError, isMatching] = useState('');
29 const [isRevealPwd, setIsRevealPwd] = useState(false);
30
31 const validate = (value) =>{
32 if(validator.isStrongPassword(value, {
minLength: 6, minLowercase: 1,
33
minUppercase: 1, minNumbers: 1, minSymbols: 1
34
})) {
35 setErrorMessage('Strong Password')
36 } else{
37 setErrorMessage('Weak Password');
38 }
39 }
40
41 const CheckMatching = (value) =>{
42 if(value !== password){
43 isMatching('Password not Matching')
} else{
44
isMatching('');
45 }
46 }
47
48 const signUp = (e) => {
49 e.preventDefault();
50 setLoading(true);
51 auth
52 .createUserWithEmailAndPassword(email, password)
53 .then((result) => {
result.user.updateProfile({
54
id: result.user.uid,
55 displayName: fullname,
56 photoURL: profile,
57 email: email,
58 });
59
60 result.user
61 .sendEmailVerification()
62 .then(toast.info("Mail Sent...verify your account!", {position: toast.POSITION.TOP_CENTER,
63 autoClose: 3000}))
.catch((error) => {
64
toast.error(error.message,{position: toast.POSITION.BOTTOM_CENTER, autoClose: 2000});
65
});
66 const newUser = {
67 fullname: fullname,
68 email: email,
69 lastOnline: firebase.firestore.Timestamp.now(),
70 photoURL: profile,
71 };
72 db.collection("users").doc(result.user.uid).set(newUser);
73
74 setSignUp(false);
setLoading(false);
75

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:16

76 })
77 .catch((error) => (toast.error(error.message,{position: toast.POSITION.BOTTOM_CENTER,
78 autoClose: 2000, hideProgressBar:true}),setLoading(false)));
79 };
80
const setPicture = async (e) => {
81 setDisable(true);
82 const file = e.target.files[0];
83 console.log(file);
84
85 const fileRef = storageRef.child(file.name);
86 await fileRef.put(file);
87 const link = await fileRef.getDownloadURL();
88 setProfile(link);
89 console.log(profile);
setDisable(false);
90
};
91
92 return (
93 <Container style={{backgroundImage:"linear-gradient(to bottom, rgba(230, 230, 255, 0.8),
94 rgba(230, 230, 255, 0.7)),url("+back+")",backgroundRepeat:"repeat"}}>
95 <Header>
96 <div className="header__logo">
97 <Link to="/">
98 <img src={Logo} alt="logo" />
99 </Link>
100 </div>
101
<div className="header__title">
102 <Link to="/" style={{textDecoration:"none", color:"#000"}}>
103 <p>Connect</p>
104 </Link>
105 </div>
106 </Header>
107 <SignUpComponent >
108 <h3>Create an Account<PersonAddIcon className="icon"/></h3>
109
110 <SignUpForm onSubmit={signUp}>
<Name>
111
<input
112 type="text"
113 name="name"
114 placeholder="Enter FullName"
115 value={fullname}
116 onChange={(e) => setFullname(e.target.value)}
117 required
118 />
119 <PersonIcon className="icon"/>
120 </Name>
<Email>
121
<input
122
type="email"
123 name="email"
124 placeholder="Enter email"
125 value={email}
126 required
127 onChange={(e) => setEmail(e.target.value)}
128 />
129 <EmailIcon className="icon"/>
130 </Email>
131 <Password>
<input
132

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:17

133 onPaste={(e)=>{
134 e.preventDefault()
135 return false;
136 }} onCopy={(e)=>{
e.preventDefault()
137
return false;
138 }}
139 required
140 type={isRevealPwd ? "text" : "password"}
141 name="password"
142 placeholder="Enter Password"
143 value={password}
144 onChange={(e) => {validate(e.target.value); setPassword(e.target.value);}}
145 />
146 <LockIcon className="icon"/>
<img
147
title={isRevealPwd ? "Hide password" : "Show password"}
148
src={isRevealPwd ? hidePwdImg : showPwdImg}
149 onClick={() => setIsRevealPwd(prevState => !prevState)}
150 />
151 <br />
152 <span style={{color: 'gray', fontSize: '14px'}}>
153 <ul>
154 <li>Lenght of password should be 6</li>
155 <li>Lowercase atleast 1</li>
156 <li>Uppercase atleast 1</li>
157 <li>Numbers(0-9) atleast 1</li>
<li>atleast one Special Character(@,$,%,^)</li>
158
</ul>
159 </span>
160 <span style={errorMessage ==='Strong Password'?{fontWeight: 'bold', color: 'green'}:
161 {fontWeight: 'bold', color: 'red'}}>{errorMessage}</span>
162 </Password>
163
164 <RePassword>
165 <input
166 onPaste={(e)=>{
167 e.preventDefault()
return false;
168
}} onCopy={(e)=>{
169 e.preventDefault()
170 return false;
171 }}
172 required
173 type="password"
174 name="repassword"
175 placeholder="Re-Enter password"
176 value={repassword}
177 onChange={(e) => {CheckMatching(e.target.value); setRepassword(e.target.value);}}
178 /><br />
179 <span style={{fontWeight: 'bold', color: 'red', fontSize: '13px'}}>{matchError}</span>
180 </RePassword>
181
182 <ProfilePicture>
183 <p>Profile Picture</p>
184
185 {disable && <Default color="blue" size={16}/>}
186 <input accept="image/*" type="file" onChange={setPicture} disabled={disable||loading}
187 />
189 </ProfilePicture>
190 {loading && <Default color="blue" size={16}/>}
191 <button type="submit" disabled={disable||loading}>

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:18
192 Create a Account
193 </button>
194 <button onClick={() => setSignUp(false)}>Back to login</button>
195 </SignUpForm>
196 </SignUpComponent>
197 </Container>
198 );
199 }
200
201 export default SignUp;
202
203 const Container = styled.div`
204 margin:0;
205 width:100vw;
206 display: flex;
207 flex-direction: column;
208 height: 900px;
209 min-height: 100vh;
210 padding-bottom: 100px;
211
212 @media (max-width: 650px) {
213 display: flex;
214 width: 100%;
215 margin: 0;
216 justify-content: flex-start;
217 overflow: hidden !important;
218 }
219 `;

Home.js

1 import React from "react";

2 import styled from "styled-components";
3
4 import SideBar from "../Components/SideBar";
import whatsappHome from "../assets/Bubbles-alt-icon.png";
5
import disableBrowserBackButton from '../Disableback'
6 function Home({ signOut, user}) {
7 {
8 disableBrowserBackButton();
9 return (
10 <Container>
11 <Main>
12 <SideBar signOut={signOut} user={user} />
13 <div className="sg__2gf5">
14 <img src={whatsappHome} alt="" />
</div>
15
</Main>
16
</Container>
17 );
18 }
19 }
20
21 export default Home;
22
23 const Container = styled.div`
24 width: 100vw;
25 display: flex;
justify-content: center;
26

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs Page No:19

27 height: 100vh;
28 // min-height: 600px;
29 // max-height: 1400px;
30 // background-color: red;
position: relative;
31
@media (max-width: 1366px) {
32 justify-content: flex-start;
33 }
34 @media (min-width: 1000px) {
35 width: 95vw;
36 height: 90vh;
37 min-height: 600px;
38 box-shadow: -4px 10px 40px -6px rgba(0, 0, 0, 0.80);
39 }
40 `;

Main Container.js

1 import React, { useEffect, useRef, useState } from "react";

2 import styled from "styled-components";
3 import AccountCircleIcon from "@material-ui/icons/AccountCircle";
4 import SearchIcon from "@material-ui/icons/Search";
5 import MoreVertIcon from "@material-ui/icons/MoreVert";
6 import ChatInput from "./ChatInput";
import ChatMessage from "./ChatMessage";
7
import { useParams,useHistory } from "react-router-dom";
8 import db, { auth } from "../firebase";
9 import firebase from "firebase";
10 import arrow from '../assets/backarrow.png';
11 import IconButton from "@material-ui/core/IconButton";
12 import MenuItem from "@material-ui/core/MenuItem";
13 import Menu from "@material-ui/core/Menu";
14 import chatback from './../img/chatImage.png'
15
16 function MainContainer({ userName }) {
let history = useHistory();
17
const messageRef = useRef();
18
let { userId } = useParams();
19 const [user, setUser] = useState([]);
20 const [messages, setMessages] = useState([]);
21 const [anchorEl, setAnchorEl] = React.useState(null);
22 var day = "none";
23 var newMessage,wait = false;
24 const [myself, setMyself] = useState([]);
25
26 const getUser = () => {
27 db.collection("users")
.doc(userId)
28
.onSnapshot((snapshot) => {
29 setUser(snapshot.data());
30 });
31 };
32
33 const MyOptions = [
34 <a href="mailto: connectchattingteam@gmail.com?subject=Reporting Abuse&body=

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:20
35 2020 Hi sir/madam, this is from the team connect,
36 we ask you to send detailed information about your query.
37 Attach screenshots to improve the chances of query resolution."
38 style={{textDecoration: "none", fontSize: "15px", color: "#000"}}>report</a>
];
39
const handleClick = (event) => {
40 setAnchorEl(event.currentTarget);
41 };
42 const open = Boolean(anchorEl);
43 const handleClose = () => {
44 setAnchorEl(null)
45 };
46
47
48 const sendMessage = (messageData) => {
49 if (userId) {
let payload = {
50
text: messageData.message,
51
files: messageData.files?.length > 0 ? messageData.files : [],
52 videos: messageData.videos?.length > 0 ? messageData.videos : [],
53 voice: messageData.voice ? messageData.voice : "",
54 senderEmail: auth.currentUser?.email,
55 receiverEmail: user.email,
56 timestamp: firebase.firestore.Timestamp.now(),
57 };
58 db.collection("chats").doc(userId).collection("messages").add(payload);
59 db.collection("chats")
.doc(auth.currentUser?.uid)
60
.collection("messages")
61
.add(payload);
62 let Friend = {
63 email: user?.email,
64 photoURL: user?.photoURL,
65 fullname: user?.fullname,
66 newMessages: 0
67 };
68
69 let Friend2 = {
70 email: auth.currentUser?.email,
photoURL: auth.currentUser?.photoURL,
71
fullname: auth.currentUser?.displayName,
72 newMessages: firebase.firestore.FieldValue.increment(1)
73 };
74
75 db.collection("FriendsList")
76 .doc(auth.currentUser?.uid)
77 .collection("List")
78 .doc(userId)
79 .set(Friend);
80
db.collection("FriendsList")
81
.doc(userId)
82
.collection("List")
83 .doc(auth.currentUser?.uid)
84 .set(Friend2,{merge:true});
85
86 }
87 };
88
89 const getMessages = () => {
90 db.collection("chats")
.doc(auth.currentUser?.uid)
91

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:21
92 2020 .collection("messages")
93 .orderBy("timestamp", "asc")
94 .onSnapshot((snapshot) => {
95 let messages = snapshot.docs.map((doc) => doc.data());
const newMessage = messages .filter(
96
(message) =>
97 message.senderEmail === (user?.email) ||
98 message.receiverEmail === (user?.email)
99 );
100
101 setMessages(newMessage);
102 });
103 };
104
105 const scrollToBottom = () => {
messageRef.current?.scrollIntoView();
106
}
107
108 useEffect(() => {
109 getUser();
110 db.collection("FriendsList")
111 .doc(auth.currentUser?.uid)
112 .collection("List")
113 .doc(userId)
114 .update({
115 newMessages: 0
116 });
}, [userId]);
117
118 useEffect(() => {
119 getMessages();
120 }, [user]);
121
122 useEffect(() => {
123 scrollToBottom();
124 }, [messages]);
125
126 const checkDay = (timestamp) => {
if(day == new Date(timestamp.toDate()).toString().slice(0,15))
127
{
128 return true;
129 }
130 day = new Date(timestamp.toDate()).toString().slice(0,15);
131 return false;
132 }
133 return (
134 <Container>
135 <Header>
136 <HeaderLeft>
<img src={arrow} className="back" onClick={history.goBack}></img>
137
<Profile >
138
{user?.photoURL ? (
139 <img
140 src={user?.photoURL}
141 style={{
142 width: "35px",
143 height: "35px",
144 marginLeft: "10px",
145 borderRadius: "50%",
146 }}
147 alt="error"
/>
148

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:22
149 2020 ) : (
150 <ProfilePicture/>
151 )}
152 </Profile>
153
<p className="_ghter54">{user?.fullname}</p>
154 {user?.isOnline?
155 <span className="onlineStatus"></span>
156 :
157 <p style={{fontWeight:"lighter",fontSize:"12px"}}>
158 LastSeen &nbsp;
159 {user?.lastOnline && new Date((user?.lastOnline).toDate()).toString().slice(16,21)}
160 {user?.lastOnline && new Date((user?.lastOnline).toDate()).toString().slice(3,11)}
161 </p>
162 }
</HeaderLeft>
163
<HeaderRight>
164
<IconButton
165 aria-label="more"
166 onClick={handleClick}
167 aria-haspopup="true"
168 aria-controls="long-menu"
169 >
170 <MoreIcon />
171 </IconButton>
172 <Menu
173 anchorEl={anchorEl}
keepMounted onClose={handleClose}
174
open={open}>
175 {MyOptions.map((option) => (
178 <MenuItem
179 key={option}
180 >
181 {option}
182 </MenuItem>
183 ))}
184 </Menu>
185 </HeaderRight>
</Header>
186
187 <MessageContainer>
188 {messages.map((message) => (
189 <><p className="day" style= {checkDay(message.timestamp)?
190 {display:"none"}:
191 {fontWeight:"bold"}}>
192 {new Date((message.timestamp).toDate()).toString().slice(0,10)}
193 </p>
194 <ChatMessage
195 text={message.text}
sender={message.senderEmail}
196
files={message.files}
197
videos={message.videos}
198 timestamp={message.timestamp}
199 voice={message.voice}
200 />
201 </>
202 ))}
203 <div ref={messageRef} style={{width: 0, height: 0}}></div>
204 </MessageContainer>
205
206 <ChatInput sendMessage={sendMessage} />
</Container>
207

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:23
208 2020
);
209 }
210
211 export default MainContainer;
212
const Container = styled.div`
213 width: 65%;
214 height: 100%;
215 display: flex;
216 flex-direction: column;
217 overscroll-behavior-y: contain;
218 scroll-snap-type: y proximity;
219 scroll-snap-align: end;
220 min-width: 320px;
221 @media (max-width: 600px) {
width: 100%;
222
}
223
`;

Sidebar.js

1 import React, { useEffect, useState } from "react";

2 import styled from "styled-components";
3 import AccountCircleIcon from "@material-ui/icons/AccountCircle";
4 import TollIcon from "@material-ui/icons/Toll";
import InsertCommentIcon from "@material-ui/icons/InsertComment";
5
import MoreVertIcon from "@material-ui/icons/MoreVert";
6 import FriendProfile from "./FriendProfile";
7 import db, { auth } from "../firebase";
8 import { useHistory } from "react-router-dom";
9 import IconButton from "@material-ui/core/IconButton";
10 import MenuItem from "@material-ui/core/MenuItem";
11 import Menu from "@material-ui/core/Menu";
12 import firebase from "firebase";
13 import { usePageVisibility } from 'react-page-visibility';
14
function SideBar({ signOut, user }) {
15
const history = useHistory();
16
const [users, setUsers] = useState([]);
17 const [friendsList, setFriendsList] = useState([]);
18 const [searchInput, setSearchInput] = useState("");
19 const [anchorEl, setAnchorEl] = React.useState(null);
20 const isVisible = usePageVisibility();
21
22 const MyOptions = [
23 "Sign Out"
24 ];
25 const handleClick = (event) => {
setAnchorEl(event.currentTarget);
26
};
27 const open = Boolean(anchorEl);
28 const handleClose = () => {
29 setAnchorEl(null)
30 };
31
32 useEffect(() => {
33 const fetchdata = async () => {
34 const data = await db.collection("users").get();

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:24
35 2020 setUsers(
36 data.docs.filter((doc) => doc.data().email !== auth.currentUser?.email)
37 );
38 };
const fetchFriends = async () => {
39
const data = await db
40 .collection("FriendsList")
41 .doc(auth.currentUser?.uid)
42 .collection("List")
43 .onSnapshot((snapshot) => {
44 setFriendsList(snapshot.docs);
45 });
46 };
47 fetchdata();
48 fetchFriends();
}, []);
49
50
const searching = (e) => {
51 setSearchInput(e.target.value);
52 };
53 const goToUser = (id) => {
54 if (id) {
55 history.push(`/${id}`);
56 }
57 };
58
59 const searchItem = users.filter((data) => {
if (searchInput) {
60
if (
61 data.data().email.toLowerCase().includes(searchInput.toLowerCase()) ||
62 data.data().fullname.toLowerCase().includes(searchInput.toLowerCase())
63 ) {
64 return data;
65 }
66 }
67 });
68
69 const item = searchItem.map((data) => {
return (
70
<FriendProfile
71 fullname={data?.data().fullname}
72 photoURL={data?.data().photoURL}
73 onClick={() => goToUser(data.id)}
74 ></FriendProfile>
75 );
76 });
77 useEffect(() => {
78 if(isVisible && user){
79 db.collection("users")
.doc(auth.currentUser?.uid)
80
.update({
81
isOnline: true
82 })}
83 else{
84 db.collection("users")
85 .doc(auth.currentUser?.uid)
86 .update({
87 isOnline: false,
88 lastOnline: firebase.firestore.Timestamp.now(),
89 })
90 }
}, [isVisible])
91

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:25
92 2020
93 return (
94 <Container>
95 <Header>
<Profile
96
onClick={() => {
97 history.push("/login");
98 signOut();
99 }}
100 >
101 {auth?.currentUser?.photoURL ? (
102 <img
103 className="user__profile__image"
104 src={auth.currentUser.photoURL}
105 alt=""
/>
106
) : (
107
<ProfilePicture />
108
109 )}
110
111 <div className="userName">
112 {
113 auth?.currentUser?.displayName?(
114 <p>{auth.currentUser.displayName}</p>
115 ):(
116 null
)}
117
</div>
118
119 </Profile>
120
121 <HeaderRight>
122 <IconButton
123 aria-label="more"
124 onClick={handleClick}
125 aria-haspopup="true"
126 aria-controls="long-menu"
>
127
<MoreIcon />
128 </IconButton>
129 <Menu
130 anchorEl={anchorEl}
131 keepMounted onClose={handleClose}
132 open={open}>
133 {MyOptions.map((option) => (
134 <MenuItem
135 key={option}
136 onClick={() => {
history.push("/login");
137
signOut();
138
}}>
139 {option}
140 </MenuItem>
141 ))}
142 </Menu>
143 </HeaderRight>
144 </Header>
145
146 <SearchContainer>
147 <SearchBar
placeholder="Search or Start new chat..."
148

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:26
149 2020 onChange={searching}
150 value={searchInput}
151 />
152 </SearchContainer>
153
<MainContent>
154 {item.length > 0 ? (
155 item
156 ) : (
157 <div className="friends__list">
158 {friendsList.map((friend) => (
159 <FriendProfile
160 fullname={friend.data().fullname}
161 photoURL={friend.data().photoURL}
162 newMessages={friend.data().newMessages}
onClick={() => goToUser(friend.id)}
163
/>
164
))}
165 </div>
166 )}
167 </MainContent>
168 </Container>
169 );
170 }
171
172 export default SideBar;
173 const Container = styled.div`
width: 35%;
174
background-color: #f8f9fb;
175 min-width: 280px;
176 border-right: 1px solid lightgray;
177 height: 100%;
178
179 display: flex;
180 flex-direction: column;
181 @media (max-width: 600px) {
182 width: 100vw;
183 }
`;
184

Chat Message.js

1 import React from "react";

2 import styled from "styled-components";
3 import { auth } from "../firebase";
4
function ChatMessage({ text, timestamp, voice, sender, videos, files }) {
5
return (
6 <Container sender={sender}>
7 <AttachFiles filesLength={files.length || videos.length}>
8 {files &&
9 files?.map((file) => (
10 <div
11 key={file}
12 className="image__cont"
13 style={{
14 width: "200px",
height: "200px",
15
16
display: "flex",
17 alignItems: "stretch",

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:27
2020
18 }}
19 >
20 <img
21 src={file}
alt="some thing went wrong"
22
style={{
23 width: "100%",
24
25 imageRendering: "pixelated",
26 }}
27 />
28 </div>
29 ))}
30
31 {videos &&
videos.map((video) => (
32
<div
33
key={video}
34 className="video__cont"
35 style={{
36 width: "200px",
37 height: "200px",
38 border: "1px solid green",
39 display: "flex",
40 alignItems: "center",
41 }}
42 >
<video src={video} alt="" width="100%" height="100%" />
43
</div>
44 ))}
45 </AttachFiles>
46 <Text>
47 <p>{text}</p>
48 </Text>
49 <DateMessage>
50 <p>{new Date(timestamp.toDate()).toString().slice(16,21)}</p>
51 </DateMessage>
52 </Container>
);
53
}
54
55 export default ChatMessage;
56
57 const Container = styled.div`
58 display: flex;
59 margin: 0px 15px 15px 15px;
60 flex-direction: column;
61 position: relative;
62 width: fit-content;
max-width: 400px;
63
// padding: 12px;
64
word-break: break-word;
65
66 @media (min-width: 750px) {
67 min-width: 200px;
68 }
69 @media (max-width: 1000px) {
70 max-width: 350px;
71 min-width: 130px;
72 }
73 @media (max-width: 750px) {
max-width: 220px;
74

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:28
75 2020
}
76 padding-right: 10px;
77 height: auto;
78 align-self: ${(props) =>
props.sender === auth.currentUser?.email ? "flex-end" : "flex-start"};
79
border-radius: 10px;
80 box-shadow: -2px 5px 10px -4px rgba(0, 0, 0, 0.30);
81 background-color: ${(props) =>
82 props.sender === auth.currentUser?.email ? "#7e7db6" : "#656565"};
83 font-size: 14px;
84 `;
85
86 const Text = styled.div`
87 p{margin: 0;}
88 padding: 10px 0 0 10px;
line-height: 20px;
89
color: white;
90
// font-weight: bold;
91 `;
92 const DateMessage = styled.div`
93 font-size: 11px;
94 color: #eee;
95 font-weight: lighter;
96 // margin-top: 10;
97 align-self: flex-end;
98 `;
99
const AttachFiles = styled.div`
100
display: ${(props) =>
101 props.filesLength > 0 ? "grid": "none"};
102 grid-gap: 10px;
103 padding: 10px 0 0 10px;
104 grid-template-columns: ${(props) =>
105 props.filesLength > 1 ? "repeat(2, 200px)" : "200px"};
106 `;

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:29
2020
CHAPTER 5

TESTING

Verify users can register using

TEST CASE NAME NUMBER 1
email address
EXECUTED Divakar D & G
DEVELOPED BY Divakar D & G Suhas
BY Suhas
DEVELOPED EXECUTED
10-7-2021 10-7-2021
DATE DATE
The User is able to register using email and password on a dedicated sign-up page by
completing email verification step using the link sent to their registered mailId.

TEST SCENARIO RESULT

Verify users can register using email address PASSED

TEST CASE NAME Email Verification Link NUMBER 2

Divakar D & G
DEVELOPED BY Divakar D & G Suhas EXECUTED BY
Suhas
DEVELOPED EXECUTED
10-7-2021 10-7-2021
DATE DATE
In this test case verifies that once user created an account using email and password the user
gets an instant verification link by clicking create account button.

TEST SCENARIO RESULT

Email Verification Link PASSED

Alert user if he tries to create an

account with same mail id once
TEST CASE NAME registered NUMBER 3

DEVELOPED BY Divakar D & G Suhas EXECUTED Divakar D & G

BY Suhas
DEVELOPED 10-7-2021 EXECUTED 10-7-2021
DATE DATE

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

Chat Application using reactjs PageNo:30
2020
For above test case an alert window pops up saying that the email id is already in use.

TEST SCENARIO RESULT

Alert user if he tries to create an account with PASSED
same mail id once registered.

TEST CASE NAME Check whether user can set

profile picture while registering NUMBER 4
are not
DEVELOPED BY Divakar D & G Suhas EXECUTED BY Divakar D & G
Suhas
DEVELOPED 12-7-2021 EXECUTED 13-7-2021
DATE DATE
For the above test case user can choose an image from his device to set it as a profile picture
while registering.

TEST SCENARIO RESULT

Check whether user can set profile picture while PASSED
registering are not

Check whether users are allowed

TEST CASE NAME to login only when they verify NUMBER 5
their email
Divakar D & G
DEVELOPED BY Divakar D & G Suhas EXECUTED BY
Suhas
DEVELOPED EXECUTED
12-7-2021 13-7-2021
DATE DATE

On trying to log in without verifying the mail, the website alerts the user to verify before
logging in.

TEST SCENARIO RESULT

Check whether users are allowed to login only PASSED
when they verify their email

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:31
2020
Check user can directly sign-in 6
TEST CASE NAME NUMBER
through Google.
Divakar D & G
DEVELOPED BY Divakar D & G Suhas EXECUTED BY
Suhas
DEVELOPED 13-7-2021 EXECUTED 14-7-2021
DATE DATE
For the above test case, the user can directly sign in through Google.

TEST SCENARIO RESULT

Check user can directly sign-in through Google. PASSED

Check user can send messages

to any individual who has
TEST CASE NAME NUMBER 6
already registered on the
website.
Divakar D & G
DEVELOPED BY Divakar D & G Suhas EXECUTED BY
Suhas
DEVELOPED 13-7-2021 EXECUTED 15-7-2021
DATE DATE
The user can send a message to any other user by searching their email or name in the search bar.

TEST SCENARIO RESULT

Check user can send messages to any PASSED
individual who has already registered on the
website.

Check does a User is able to

TEST CASE NAME login in two different devices at NUMBER 7
a time or not?”
Divakar D & G Suhas EXECUTED Divakar D & G
DEVELOPED BY
BY Suhas
DEVELOPED 13-7-2021 EXECUTED 15-7-2021
DATE DATE
The user can log in through multiple devices using the same email.

TEST SCENARIO RESULT

Check does a User is able to login in two PASSED
different devices at a time or not?

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:32
2020
TEST CASE NAME Check a click on the sign-out button
NUMBER 8
it properly logs out or not.
DEVELOPED BY Divakar D & G Suhas EXECUTED BY Divakar D & G
Suhas
DEVELOPED DATE 10-7-2021 EXECUTED 10-7-2021
DATE
The above test case proves that user can sign-out only by clicking the sign-out button the page
redirects to the login page.

TEST SCENARIO RESULT

Check a click on the sign-out button it properly PASSED
logs out or not.

TEST CASE NAME Verify that the user’s online

NUMBER 9
status changes accordingly.
DEVELOPED BY Divakar D & G Suhas EXECUTED BY Divakar D & G
Suhas
DEVELOPED 10-7-2021 EXECUTED 10-7-2021
DATE DATE
The user is shown online only when he/she is logged in and viewing the chat window, otherwise his
last seen time is displayed.

TEST SCENARIO RESULT

Verify that the user’s online status changes PASSED
accordingly

TEST CASE NAME Check online status update when

user is disconnected from internet NUMBER 10

DEVELOPED BY Divakar D & G Suhas EXECUTED BY Divakar D & G

Suhas
DEVELOPED DATE 10-7-2021 EXECUTED 10-7-2021
DATE

The chat application won’t be able to update the database when internet connectivity is
disabled

TEST SCENARIO RESULT

Check online status update when user is FAILED
disconnected from internet

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:33
2020
CHAPTER 6

SNAPSHOTS
Desktop/Laptop View Mobile View

Login Page

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:34
2020
Sign up Page

Chat Home Page

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:35
2020
Chat Area

Send Emoji’s and Text

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:36
2020

Add Attachments

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:37
2020

CONCLUSION
The project Chat application using react js was completed successfully. There is always a room
for improvements in any web based app. We achieved in connecting two individuals, one-to-
one communication. There are several web based app which serves similar purpose as this
project, but these web based apps were rather difficult to use and may provide complicated user
interface which leads to difficult in figuring out, users interface should be easy and effective.
This project main goal was to create a simple, secure web based chat application which can
accessed on any device using browser and without having to install any application externally.

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:38
2020

FUTURE ENHANCEMENT
Our Chat application is made for connecting two individuals and allow them to chat personally
share information we say that there’s some limitations which we have to follow inorder to
achieve, with this note we can say that our chat application will not allow users to create groups
or adding participants into a single group and sending a mass message to all users at a time
future enhancement would be allowing users to create a group and chat also making a video
call chats.

Dr. Ambedkar Institute of Technology 2020-21 CSE Department

 Chat Application using reactjs PageNo:39
2020

BIBLIOGRAPHY
 To Learn Visual Studio Code
https://code.visualstudio.com/learn

 Learn Nodejs
https://nodejs.dev/learn/

 Learn reactjs
https://reactjs.org/docs/getting-started.html

 Learn about Firebase

https://firebase.google.com/docs

 Learn about Bootstrap

https://getbootstrap.com/docs/4.1/getting-started/introduction/

 Learn about material UI

https://material-ui.com/getting-started/learn/

Dr. Ambedkar Institute of Technology 2020-21 CSE Department