final-year-project-report : E- learning platform integrated with AI

Project Report
On
“Real Time Chat Application”
Submitted for the partial fulfillment of the requirement for the degree of
Bachelor of Technology
in
COMPUTER SCIENCE & ENGINEERING
By
NAME: AMAN RAJ Reg. No: 2001287354
NAME: DIVYANSH KUMAR SINGH Reg. No: 2001287092
NAME: ABHISHEK KUMAR SINGH Reg. No: 2001287040
Guided By
Prof. Suren Kumar Sahu
GITA AUTONOMOUS COLLEGE, BHUBANESWAR
APRIL - 2024

Department of Computer Science & Engineering
GITA Autonomous College, Bhubaneswar
Ref no:…………………… Date:…………………..
Certificate
This is to certify that the project report entitled
“_______________________________________________” submitted by
i) Mr./Ms. AMAN RAJ Reg No. 2001287354
ii) Mr./Ms. DIVYANSH KUMAR SINGH Reg No. 2001287092
iii) Mr./Ms. ABHISHEK KUMAR SINGH Reg No. 2001287040
is an authentic work carried out by him/her at GITA under my guidance. The matter embodied
in this project work has not been submitted earlier for the award of any degree or diploma to
the best of my knowledge and belief.
Prof. (Dr.) Tarini Prasad Panigrahy Prof. Suren Kumar Sahu
(H.O.D., Dept. of CSE) (Guide)
Examined by:
( Prof.(Dr.) )
(External Examiner)

Department of Computer Science & Engineering
GITA Autonomous College, Bhubaneswar
ACKNOWLEDGEMENT
I express and gratitude to Prof. Suren Kumar Sahu project supervisor
for his guidance and constant support.
I also take this opportunity to thank Prof. (Dr.) Tarini Prasad Panigrahy,
head of Department, Computer Science & Engineering, for his constant
support and timely advice.
Lastly, words run to express my gratitude to all the faculties of the CSE
Dept.and friends for their support and co-operation, constructive
criticism and valuable suggestion during preparation of this project
report.
Thanking All…..
Name Of The Student Reg .No Signature Of The Student
AMAN RAJ 2001287354 Aman Raj
DIVYANSH KUMAR SINGH 2001287092 Divyansh Kumar Singh
ABHISHEK KUMAR SINGH 2001287040 Abhishek Kumar Singh

Abstract
In the contemporary digital landscape, real-time communication has become a cornerstone of interpersonal
interactions. Real-time chat applications have emerged as indispensable tools, facilitating instant
communication across geographical boundaries and time zones. This abstract explores the architecture,
features, and significance of real-time chat applications in transforming communication paradigms.
Real-time chat applications leverage advanced networking protocols and technologies to enable
instantaneous message delivery. These applications typically consist of client-server architectures, where
clients, such as mobile or web-based interfaces, communicate with servers responsible for message routing
and storage. The use of protocols like WebSocket ensures low-latency communication, allowing users to
exchange messages in real-time without perceptible delays.
Key features of real-time chat applications include text messaging, multimedia sharing, and group chat
functionality. Text messaging forms the core of communication, offering users a platform for instant textual
interaction. Multimedia sharing enhances the user experience by enabling the exchange of images, videos,
documents, and other files within the chat interface. Group chat functionality fosters collaborative
communication, allowing multiple users to engage in discussions simultaneously.
The significance of real-time chat applications transcends personal communication, extending to various
domains such as business, education, healthcare, and customer service. In the business realm, real-time chat
facilitates seamless collaboration among team members, irrespective of their geographical locations. Instant
messaging enhances productivity by enabling quick decision-making and information sharing. Similarly,
educational institutions leverage real-time chat applications to facilitate remote learning, enabling educators
and students to engage in interactive discussions and virtual classrooms.
In the healthcare sector, real-time chat applications play a pivotal role in telemedicine, allowing healthcare
professionals to remotely diagnose, consult, and monitor patients in real-time. Patient engagement platforms
equipped with chat functionality enable healthcare providers to deliver personalized care and support,
thereby improving patient outcomes and satisfaction. Additionally, real-time chat applications are
instrumental in customer service operations, enabling businesses to offer prompt assistance and support to
their clientele.

TALBLE OF CONTENTS
Chapter No.Topics Page No.
Chapter 1 : INTRODUCTION 1-19(sample)
Objective of the system
Justification and need for the system
Advantages of the system
Previous work (if any) or related systems, how they are used
Chapter 2 : DEVELOPMENT OF THE SYSTEM 20-40
2.1 Software Requirement Specification (SRS)
(Write in IEEE format. Must contain Functional requirement,
non functional requirement and other requirements)
2.2 Design Documents
2.2.1 High Level Design Documents
(Like DFDs, Structured chart, UI design, UML diagrams, ER model and
schema definitions)
2.2.2 Detailed Design Documents ( Algorithm/Flow Charts etc
Chapter 3 : IMPLEMENTATION & CODING
(coding Should be submitted in CD/DVD/pendrive)
Chapter 4 : TESTING & TESTING RESULTS 40-50
Chapter 5 : RESULTS AND CONCLUSION 50-55

INTRODUCTION
Real-time chat applications have become an integral part of modern communication, facilitating
instantaneous interaction and collaboration among individuals, businesses, and institutions. These
applications leverage advanced networking technologies to enable seamless exchange of messages,
multimedia, and real-time communication experiences. This introduction sets the stage for exploring the
objectives, justification, advantages, and context of real-time chat systems, as well as any previous work or
related systems in the field.
OBJECTIVES OF THE SYSTEM
1. Enable Instant Communication: The primary objective of the system is to provide users with a platform for
instantaneous communication, allowing them to exchange messages and information in real-time.
2. Facilitate Collaboration: The system aims to facilitate collaboration among users by offering features such
as group chats, channels, and collaborative tools, enabling teams to work together efficiently and
seamlessly.
3. Support Multimedia Sharing: One of the objectives is to support the sharing of multimedia content,
including images, videos, documents, and files, to enhance the depth and richness of communication.
4. Foster Connectivity: The system seeks to foster connectivity among users by bridging geographical
barriers and enabling communication from any location with an internet connection, promoting inclusivity
and accessibility.
5. Enhance Productivity: By reducing response times, enabling quick decision-making, and facilitating
information sharing, the system aims to enhance productivity and efficiency in personal and professional
contexts.
6. Provide Versatile Communication Tools: Another objective is to provide users with versatile
communication tools, including voice/video calls, screen sharing, and collaborative features, to cater to
diverse communication needs and preferences.
Justification and need for the system
Instant Communication: Real-time chat systems fulfill the need for instantaneous communication, allowing
users to exchange messages and information in real-time, thereby reducing delays and enhancing
responsiveness.
Remote Collaboration: With the rise of remote work and dispersed teams, there is a growing need for tools
that facilitate seamless collaboration among team members irrespective of their geographical locations,
bridging gaps and promoting teamwork.
Enhanced Productivity: By enabling quick decision-making, facilitating information sharing, and reducing the
time spent on communication tasks, real-time chat systems contribute to increased productivity and
efficiency in personal and professional contexts.

Accessibility and Inclusivity: These systems promote accessibility and inclusivity by providing a platform for
communication from any location with an internet connection, ensuring that users from diverse
backgrounds and locations can participate in conversations and collaborations.
Agility and Flexibility: Real-time chat systems offer agile communication solutions that allow users to adapt
quickly to changing circumstances, respond promptly to inquiries, and collaborate dynamically, fostering
agility and flexibility in workflows.
Customer Support: Businesses require efficient customer support solutions to address customer queries and
issues in a timely manner. Real-time chat systems fulfill this need by offering instant assistance, query
resolution, and personalized interactions, thereby enhancing customer satisfaction and loyalty.
Multimedia Sharing: The need to share multimedia content such as images, videos, and documents is
increasingly prevalent in modern communication. Real-time chat systems support multimedia sharing,
enriching communication experiences and facilitating effective knowledge exchange.
Scalability and Adaptability: As organizations grow and evolve, they require communication solutions that
can scale and adapt to accommodate changing user needs and technological advancements. Real-time chat
systems offer scalable and adaptable platforms that can grow alongside businesses and meet evolving
communication requirements.
Transparency and Accountability: Real-time chat systems promote transparency and accountability by
providing a documented record of communication exchanges, ensuring that information is readily
accessible and traceable, thus fostering accountability and transparency in organizational processes.
Competitive Advantage: In today's competitive landscape, organizations that leverage real-time chat
systems gain a competitive advantage by fostering efficient communication, facilitating collaboration, and
enhancing customer engagement, thereby positioning themselves for success in the digital age.

Advantages of the System
Instant Communication: Real-time chat systems facilitate instant communication, enabling users to
exchange messages and information rapidly.
Enhanced Collaboration: These systems promote collaboration among team members by providing a
platform for seamless communication and information sharing.
Increased Productivity: By reducing response times and streamlining communication processes, real-time
chat systems contribute to increased productivity in personal and professional settings.
Accessibility: Users can access real-time chat systems from any location with an internet connection,
making communication convenient and accessible.
Multimedia Sharing: These systems support multimedia sharing, allowing users to exchange images, videos,
documents, and files to enhance communication and collaboration.
Flexibility: Real-time chat systems offer flexible communication options, including text messaging,
voice/video calls, and group chats, catering to diverse communication needs and preferences.
Remote Work Support: With the rise of remote work, real-time chat systems provide essential tools for
remote teams to stay connected and collaborate effectively regardless of their physical locations.
Customer Support: Businesses can use real-time chat systems to offer prompt and personalized customer
support, improving customer satisfaction and loyalty.
Scalability: Real-time chat systems can scale to accommodate growing user bases and increasing message
volumes, ensuring a seamless communication experience as organizations expand.
Integration Capabilities: These systems often integrate with other tools and platforms, allowing users to
streamline workflows and access additional features within the chat interface.
These advantages highlight the importance of real-time chat systems in facilitating efficient
communication, collaboration, and productivity across various contexts.
Software Requirement Specification (SRS)
Introduction:
Purpose:
The purpose of this Software Requirement Specification (SRS) document is to outline the functional
and non-functional requirements for the development of a Real-Time Chat Application. This
document serves as a reference for stakeholders, developers, and testers to understand the scope
and expectations of the system.

Scope
The Real-Time Chat Application aims to provide users with a platform for instant communication
through text-based messages. The application will support user registration, authentication, one-
on-one and group messaging, real-time notifications, user management, and security measures.
Definitions, Acronyms, and Abbreviations
SRS: Software Requirement Specification
IEEE: Institute of Electrical and Electronics Engineers
UI: User Interface
API: Application Programming Interface
Overall description:
Product Perspective
The Real-Time Chat Application will be a standalone system, accessible through web and mobile
interfaces. It will interact with a centralized server to manage user accounts, messages, and other
system functionalities.
Product Features:
User Registration and Authentication
One-on-One and Group Messaging
Real-Time Notifications
User Management (Administrative)
Security Measures (Encryption, Authentication)
Performance Optimization
Cross-Platform Compatibility
Scalability for Future Expansion
Users classes and characteristics:
User: General users who register and use the chat application.
Administrator: Users with administrative privileges for managing the system and user accounts.
Operating Environment

The application will be developed using modern web technologies and frameworks, ensuring
compatibility with popular web browsers (Chrome, Firefox, Safari) and mobile platforms (iOS,
Android).
Specific Requirement
Functional Requirement
User Authentication:
The system shall allow users to register for an account by providing necessary information.
Users shall be able to log in securely using their credentials.
Users shall have the option to reset their password through a secure process.
Messaging:
Users shall be able to send text messages to individuals or groups.
The system shall display the online status of other users.
Users shall receive real-time notifications for new messages.
Users shall be able to delete or edit their own messages within a certain time frame.
User Management
Administrators shall have the ability to manage user accounts, including adding, editing, or
deleting accounts.
Administrators shall be able to ban or suspend users as needed.
Non Functional Requirement
Security:
The application shall use encryption to ensure the privacy and security of messages.
The system shall implement measures to prevent unauthorized access to user accounts and data.
Performance:
The application shall be able to handle a large number of concurrent users without significant
performance degradation.
Messages shall be delivered in real-time with minimal delay.

Reliability:
The system shall have a high uptime, with minimal downtime for maintenance or upgrades.
Messages shall be reliably delivered without loss or duplication
Usability:
The user interface shall be intuitive and easy to navigate for users of all levels.
The application shall support multiple devices and screen sizes, maintaining consistent usability.
Scalability:
The system architecture shall be scalable to accommodate future growth in user base and feature
enhancements.
The application shall support adding new features and functionalities without requiring significant
redesign.
Other Requirements:
The application shall be compatible with modern web browsers (Chrome, Firefox, Safari) and
mobile platforms (iOS, Android).
The system shall be developed using industry-standard programming languages and frameworks.
The application shall be deployed on a secure and reliable hosting platform.

ERD Of Real Time Chat Application

Flow Charts Of Real Time Chat Application

IMPLEMENTATION AND CODING
Here index.html Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

</body>

</html>
Here manifest.json Code
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Here Button.tsx Code
import { CSSProperties, ReactNode, useState } from "react";
interface ButtonProps {
children?: ReactNode;
style?: CSSProperties;
type?: string;
}
const Button = (props: ButtonProps) => {
const [hovered, setHovered] = useState(false);
return (
<button
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{

...styles.style,
...(hovered && styles.hoverStyle),
...props.style,
}}
>
{props.children}
</button>
);
};
const styles = {
style: {
width: "100%",
height: "53px",
color: "white",
backgroundColor: "#fa541c",
border: "none",
outline: "none",
borderRadius: "8px",
fontFamily: "VisbyRoundCF-DemiBold",
cursor: "pointer",
transition: "all .44s ease",
WebkitTransition: "all .44s ease",
MozTransition: "all .44s ease",
} as CSSProperties,
hoverStyle: { filter: "brightness(145%)" } as CSSProperties,
};
export default Button;
Here Link.tsx Code
import { CSSProperties, ReactNode, useState } from "react";
interface LinkProps {
children?: ReactNode;
type?: string;
onClick?: () => void;
}
const Link = (props: LinkProps) => {
const [hovered, setHovered] = useState(false);
return (
<span
onClick={props?.onClick}
onMouseEnter={() => setHovered(true)}

onMouseLeave={() => setHovered(false)}
style={{
...styles.style,
...(hovered && styles.hoverStyle),
...props.style,
}}
>
{props.children}
</span>
);
};
const styles = {
style: {
color: "#fa541c",
cursor: "pointer",
transition: "all .44s ease",
WebkitTransition: "all .44s ease",
MozTransition: "all .44s ease",
} as CSSProperties,
hoverStyle: {
filter: "brightness(145%)",
textDecoration: "underline",
} as CSSProperties,
};
export default Link;
Here Photoinput.tsx Code
import { CSSProperties, ChangeEventHandler, useState } from "react";
interface PhotoInputProps {
label: string;
id: string;
name: string;
placeholder?: string;
onChange: ChangeEventHandler<HTMLInputElement>;
}
const PhotoInput = (props: PhotoInputProps) => {
const [selectedImage, setSelectedImage] = useState<File | undefined>(
undefined
);
const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
if (event.target.files !== null) {

);
};
const styles = {
style: {
position: "relative",
width: "100%",
paddingBottom: "12px",
} as CSSProperties,
uploadStyle: {
color: "white",
backgroundColor: "rgb(62, 64, 75)",
height: "52px",
width: "52px",
textAlign: "center",
fontSize: "30px",
} as CSSProperties,
labelStyle: {
color: "rgb(175, 175, 175)",
fontSize: "14px",
cursor: "pointer",
position: "absolute",
top: "18px",
left: "66px",
} as CSSProperties,
inputStyle: {
backgroundColor: "#3e404b",
color: "white",
outline: "none",
border: "none",
padding: "24px 18px 12px 18px",
width: "100%", // For the padding 18px + 18px
} as CSSProperties,
};
export default PhotoInput;
Here TextInput.tsx Code
import { CSSProperties, ChangeEventHandler } from "react";

interface TextInputProps {
label: string;
name: string;
type?: string;
placeholder?: string;
onChange: ChangeEventHandler<HTMLInputElement>;
}
const TextInput = (props: TextInputProps) => {
return (
<div
style={{
...styles.style,
...props.style,
}}
>
<div style={styles.labelStyle}>{props.label}</div>
<input
type={props.type ? props.type : "text"}
name={props.name}
placeholder={props.placeholder}
style={styles.inputStyle}
onChange={props.onChange}
/>
</div>
);
};
const styles = {
style: {
width: "100%",
paddingBottom: "12px",
} as CSSProperties,
labelStyle: {
top: "8px",
left: "18px",
fontSize: "11px",
color: "rgb(175, 175, 175)",
width: "100px",
} as CSSProperties,
inputStyle: {
backgroundColor: "#3e404b",

color: "white",
outline: "none",
border: "none",
padding: "24px 18px 12px 18px",
width: "100%", // For the padding 18px + 18px
} as CSSProperties,
};
export default TextInput;
Here index.tsx Code
import { CSSProperties, useState } from "react";
import valley from "../assets/valley.jpeg";
import SignUpForm from "./SignUpForm";
import LogInForm from "./LogInForm";
const AuthPage = () => {
const [hasAccount, setHasAccount] = useState(false);
const backgroundImage = {
backgroundImage: `url(${valley})`, // Here due to variable
} as CSSProperties;
return (
<div className="background-image" style={backgroundImage}>
<div className="background-gradient-dark">
<div style={styles.formContainerStyle}>
<div style={styles.titleStyle}>Chat-Application <br></br>Made With In India</div>
{hasAccount ? (
<LogInForm onHasNoAccount={() => setHasAccount(false)} />
) : (
<SignUpForm onHasAccount={() => setHasAccount(true)} />
)}
</div>
</div>
</div>
);
};
const styles = {
formContainerStyle: {
width: "100%",
maxWidth: "650px",

padding: "36px 72px",
} as CSSProperties,
titleStyle: {
fontSize: "24px",
fontFamily: "VisbyRoundCF-Heavy",
letterSpacing: "0.5px",
color: "white",
paddingBottom: "11vw",
} as CSSProperties,
};
export default AuthPage;
Here LogInForm.tsx Code
import { useState, useContext } from "react";
import axios from "axios";
import TextInput from "./components/TextInput";
import Button from "./components/Button";
import Link from "./components/Link";
import { Context } from "../functions/context";
import { projectId } from "../functions/constants";
import { PersonObject } from "react-chat-engine-advanced";
interface LogInFormProps {
onHasNoAccount: () => void;
}
const LogInForm = (props: LogInFormProps) => {
// State
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
// Hooks
const { setUser } = useContext(Context);
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const headers = {
"Project-ID": projectId,
"User-Name": email,
"User-Secret": password,
};
axios

.get("https://api.chatengine.io/users/me/", {
headers,
})
.then((r) => {
if (r.status === 200) {
const user: PersonObject = {
first_name: r.data.first_name,
last_name: r.data.last_name,
email: email,
username: email,
secret: password,
avatar: r.data.avatar,
custom_json: {},
is_online: true,
};
setUser(user);
}
})
.catch((e) => console.log("Error", e));
};
return (
<div>
<div className="form-title">Welcome To The Chat-Application</div>
<div className="form-subtitle">
New here? <Link onClick={() => props.onHasNoAccount()}>Sign Up</Link>
</div>
<form onSubmit={onSubmit}>
<TextInput
label="Email"
name="email"
placeholder="amanraj23december@gmail.com"
onChange={(e) => setEmail(e.target.value)}
/>
<TextInput
label="Password"
name="password"
placeholder="********"
type="password"
onChange={(e) => setPassword(e.target.value)}
/>
<Button type="submit">Log In</Button>
</form>
</div>

);
};
export default LogInForm;
Here SignUpForm.tsx Code
import { useContext, useState } from "react";
import { PersonObject } from "react-chat-engine-advanced";
import { useIsMobile } from "../functions/isMobile";
import { privateKey } from "../functions/constants";
import TextInput from "./components/TextInput";
import PhotoInput from "./components/PhotoInput";
import Button from "./components/Button";
import Link from "./components/Link";
interface SignUpFormProps {
onHasAccount: () => void;
}
const SignUpForm = (props: SignUpFormProps) => {
// State
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [avatar, setAvatar] = useState<File | undefined>(undefined);
// Hooks
const { setUser } = useContext(Context);
const isMobile: boolean = useIsMobile();
const userJson: PersonObject = {
email: email,
username: email,
first_name: firstName,
last_name: lastName,
secret: password,
avatar: null,

custom_json: {},
is_online: true,
};
let formData = new FormData();
formData.append("email", email);
formData.append("username", email);
formData.append("first_name", firstName);
formData.append("last_name", lastName);
formData.append("secret", password);
if (avatar) {
formData.append("avatar", avatar, avatar.name);
}
const headers = { "Private-Key": privateKey };
axios
.post("https://api.chatengine.io/users/", formData, {
headers,
})
.then((r) => {
if (r.status === 201) {
userJson.avatar = r.data.avatar;
setUser(userJson);
}
})
.catch((e) => console.log("Error", e));
};
return (
<div>
<div className="form-title">Create an account</div>
<div className="form-subtitle">
Already a member?{" "}
<Link onClick={() => props.onHasAccount()}>Log in</Link>
</div>
<form onSubmit={onSubmit}>
<TextInput
label="First name"
name="first_name"
placeholder="Aman"
style={{ width: isMobile ? "100%" : "calc(50% - 6px)" }}
onChange={(e) => setFirstName(e.target.value)}
/>
<TextInput

label="Last name"
name="last_name"
placeholder="Raj"
style={{
width: isMobile ? "100%" : "calc(50% - 6px)",
float: "right",
}}
onChange={(e) => setLastName(e.target.value)}
/>
<TextInput
label="Email"
name="email"
placeholder="amanraj23december@gmail.com"
onChange={(e) => setEmail(e.target.value)}
/>
<TextInput
label="Password"
name="password"
placeholder="********"
type="password"
style={{
float: "right",
}}
onChange={(e) => setPassword(e.target.value)}
/>
<PhotoInput
label="Profile picture"
name="avatar"
id="avatar-picker"
onChange={(e) => {
if (e.target.files !== null) {
setAvatar(e.target.files[0]);
}
}}
/>
<Button
type="submit"
style={{
float: "right",
}}

>
Sign Up
</Button>
</form>
</div>
);
};
export default SignUpForm;
Here ChatCard.tsx Code
import {
ChatCard,
ChatCardProps,
ChatObject,
} from "react-chat-engine-advanced";
import { getOtherUser } from "../functions/getOtherUser";
interface CustomChatCardProps extends ChatCardProps {
username: string;
isActive: boolean;
onChatCardClick: (chatId: number) => void;
chat?: ChatObject;
}
const CustomChatCard = (props: CustomChatCardProps) => {
if (!props.chat) return <div />;
const otherMember = getOtherUser(props.chat, props.username);
const firstName = otherMember ? otherMember.first_name : "";
const lastName = otherMember ? otherMember.last_name : "";
const username = otherMember ? otherMember.username : "";
const messageText = props.chat.last_message.text;
const hasNotification =
props.chat.last_message.sender_username !== props.username;
return (
<ChatCard
title={`${firstName} ${lastName}`}
description={
messageText === null || messageText.length === 0
? "Say hello!"
: messageText
}
hasNotification={hasNotification}
avatarUrl={otherMember?.avatar}

avatarUsername={username}
avatarStyle={{
boxShadow: otherMember?.is_online
? "rgb(24 144 255 / 35%) 0px 2px 7px"
: "rgb(245 34 45 / 35%) 0px 2px 7px",
border: otherMember?.is_online
? "1px solid rgb(24 144 255)"
: "1px solid rgb(245 34 45)",
}}
isActive={props.isActive}
onClick={() => props.chat && props.onChatCardClick(props.chat.id)}
/>
);
};
export default CustomChatCard;
Here ChatHeader.tsx Code
import {
ChatHeaderProps,
ChatObject,
PersonObject,
Avatar,
import {
PhoneFilled,
DeleteFilled,
PaperClipOutlined,
LoadingOutlined,
} from "@ant-design/icons";
import { nowTimeStamp } from "../functions/dates";
import { getOtherUser } from "../functions/getOtherUser";
import { privateKey, projectId } from "../functions/constants";
import { useState } from "react";
interface CustomChatHeaderProps extends ChatHeaderProps {
chat?: ChatObject;
username: string;
secret: string;
}

.then(() => setDeleteLoading(false))
.catch(() => setDeleteLoading(false));
};
return (
<div className="ce-custom-chat-header">
{otherMember && (
<div>
<Avatar
className="ce-custom-header-avatar"
avatarUrl={otherMember?.avatar}
username={otherMember?.username}
isOnline={otherMember?.is_online}
/>
<div className="ce-custom-header-text">
<div className="ce-custom-header-title">
{otherMember.first_name} {otherMember.last_name}
</div>
<div className="ce-custom-header-subtitle">
{otherMember.is_online ? "Online" : "Offline"}
</div>
</div>
<div className="ce-custom-header-icon-wrapper">
<form style={{ display: "inline-block" }}>
<label htmlFor="ce-files-picker">
{isFilePickerLoading ? (
<LoadingOutlined className="ce-custom-header-icon" />
) : (
<PaperClipOutlined className="ce-custom-header-icon" />
)}
</label>
<input
multiple
id="ce-files-picker"
style={{ visibility: "hidden", height: "0px", width: "0px" }}
type="file"
onChange={onFilesSelect}
/>
</form>
<PhoneFilled className="ce-custom-header-icon" />
{isDeleteLoading ? (
<LoadingOutlined className="ce-custom-header-icon" />
) : (
<DeleteFilled

onClick={() => onDelete()}
className="ce-custom-header-icon"
/>
)}
</div>
</div>
)}
<style>{`
.ce-custom-header-avatar { display: inline-block; position: relative; top: 28px; margin-left: ${
isMobile ? "48px" : "12px"
}; border: 1px solid ${
otherMember?.is_online ? "rgb(24, 144, 255)" : "#fa541c"
}; box-shadow: ${
otherMember?.is_online
? "rgb(24 144 255 / 35%)"
: "rgb(245 34 45 / 35%)"
} 0px 2px 7px; width: 38px !important; height: 38px !important; font-size: 14px !important; transition:
all 0.66s ease; }
`}</style>
</div>
);
};
export default ChatHeader;
Here Index.tsx Code
import { useContext, CSSProperties } from "react";
import valley from "../assets/valley.jpeg";
import {
MultiChatWindow,
MultiChatSocket,
useMultiChatLogic,
MessageFormProps,
ChatCardProps,
ChatHeaderProps,
import "../theme.css";
import Sidebar from "./Sidebar";
import MessageForm from "./MessageForm";

import UserSearch from "./UserSearch";
import ChatCard from "./ChatCard";
import ChatHeader from "./ChatHeader";
import { projectId } from "../functions/constants";
const ChatsPage = () => {
// Hooks
const { user } = useContext(Context);
// Chat Engine Hooks
const username: string = user ? user.username : "";
const secret: string = user && user.secret !== null ? user.secret : "";
const chatProps = useMultiChatLogic(projectId, username, secret);
const backgroundImage = {
backgroundImage: `url(${valley})`, // Here due to variable
} as CSSProperties;
return (
<div className="background-image" style={backgroundImage}>
<div className="background-gradient-light">
<div
style={{
top: isMobile ? "0px" : "10vh",
left: isMobile ? "0px" : "calc(50vw - 3vw - 1.5vw - 35vw)",
height: isMobile ? "100vh" : "80vh",
width: isMobile ? "100vw" : "calc(100vw - 10.5vw - 10.5vw)",
backgroundColor: "grey",
}}
>
<div
style={{
width: "6vw",
height: "100%",
top: "0px",
left: "0px",
backgroundColor: "rgb(40,43,54)",
}}
>
<Sidebar />
</div>
<div
style={{

width: isMobile ? "100vw" : "calc(100vw - 6vw)",
top: "0px",
left: isMobile ? "0px" : "6vw",
height: "100%", // Fill parent height
}}
>
<MultiChatSocket {...chatProps} />
<MultiChatWindow
{...chatProps}
renderChatForm={() => (
<UserSearch
username={chatProps.username}
secret={chatProps.secret}
onSelect={(chatId: number) =>
chatProps.onChatCardClick(chatId)
}
/>
)}
renderChatCard={(props: ChatCardProps) => (
<ChatCard
{...props}
onChatCardClick={chatProps.onChatCardClick}
isActive={
props.chat !== undefined &&
chatProps.activeChatId === props.chat.id
}
chat={props.chat}
/>
)}
renderChatHeader={(props: ChatHeaderProps) => (
<ChatHeader
{...props}
chat={chatProps.chat}
secret={chatProps.secret}
/>
)}
renderMessageForm={(props: MessageFormProps) => (
<MessageForm {...props} />
)}
renderChatSettings={() => <div className="ce-empty-settings" />}
style={{ height: "100%" }}
/>
</div>
</div>

</div>
</div>
);
};
export default ChatsPage;
Here MessageForm.tsx Code
import { useContext, useState } from "react";
import { CaretUpFilled } from "@ant-design/icons";
import { MessageObject, MessageFormProps } from "react-chat-engine-advanced";
import { nowTimeStamp } from "../functions/dates";
const MessageForm = (props: MessageFormProps) => {
const [text, setText] = useState<string>("");
if (text.trim().length === 0) {
return;
}
if (!user || user.email === null) {
return;
}
setText("");
const message: MessageObject = {
text: text,
sender_username: user.email,
created: nowTimeStamp(),
custom_json: {},
attachments: [],
};
props.onSubmit && props.onSubmit(message);
};
return (
<form onSubmit={onSubmit} className="ce-custom-message-form">
<input

onChange={(e) => setText(e.target.value)}
value={text}
placeholder="Type something..."
className="ce-custom-message-input"
/>
<button type="submit" className="ce-custom-send-button">
<CaretUpFilled />
</button>
</form>
);
};
export default MessageForm;
Here SideBar.tsx Code
import { useContext } from "react";
import {
LogoutOutlined,
HomeFilled,
MessageFilled,
SettingFilled,
} from "@ant-design/icons";
import { Avatar } from "react-chat-engine-advanced";
const Sidebar = () => {
const { user, setUser } = useContext(Context);
return (
<div style={{ textAlign: "center" }}>
<div className="ce-sidebar-menu">
<HomeFilled className="ce-sidebar-icon" />
<MessageFilled className="ce-sidebar-icon ce-sidebar-icon-active" />
<SettingFilled className="ce-sidebar-icon" />
</div>
<Avatar
className="sidebar-avatar"
avatarUrl={typeof user?.avatar === "string" ? user.avatar : undefined}
username={user?.username}
isOnline={true}
/>

<LogoutOutlined
onClick={() => setUser(undefined)}
className="signout-icon"
/>
</div>
);
};
export default Sidebar;
Here UserSearch.tsx Code
import { AutoComplete, Input } from "antd";
import type { SelectProps } from "antd/es/select";
import { useState, useEffect, useRef } from "react";
import { PersonObject, Avatar } from "react-chat-engine-advanced";
import { privateKey, projectId } from "../functions/constants";
interface CustomChatFormProps {
username: string;
secret: string;
onSelect: (chatId: number) => void;
}
const UserSearch = (props: CustomChatFormProps) => {
const didMountRef = useRef(false);
const [loading, setLoading] = useState<boolean>(false);
const [query, setQuery] = useState<string>("");
const [users, setUsers] = useState<PersonObject[]>([]);
const [options, setOptions] = useState<SelectProps<object>["options"]>([]);
useEffect(() => {
if (!didMountRef.current) {
didMountRef.current = true;
axios
.get("https://api.chatengine.io/users/", { headers })
.then((r) => setUsers(r.data))
.catch();
}
});
const searchResult = (query: string) => {

props.onSelect(r.data.id);
setLoading(false);
setQuery("");
})
.catch(() => setLoading(false));
};
return (
<div>
<AutoComplete
dropdownMatchSelectWidth={252}
className="ce-chat-form-autocomplete"
options={options}
onSelect={onSelect}
onSearch={handleSearch}
value={query}
>
<Input.Search
size="large"
placeholder="Chats"
enterButton
loading={loading}
onChange={(e) => setQuery(e.target.value)}
/>
</AutoComplete>
</div>
);
};
export default UserSearch;
Here App.CSS Code
@import url("https://cdnjs.cloudflare.com/ajax/libs/antd/4.21.5/antd.min.css");
@font-face {
/* TODO: Font Family https://www.dfonts.org/assets/visby-round-font-family/ */
font-family: 'VisbyRoundCF-Regular';
src: local('VisbyRoundCF-Regular'), url(./assets/VisbyRoundCF-Regular.woff) format('woff');
font-weight: normal;
}
@font-face {
font-family: 'VisbyRoundCF-DemiBold';
src: local('VisbyRoundCF-DemiBold'), url(./assets/VisbyRoundCF-DemiBold.woff) format('woff');
}

@font-face {
font-family: 'VisbyRoundCF-Heavy';
src: local('VisbyRoundCF-Heavy'), url(./assets/VisbyRoundCF-Heavy.woff) format('woff');
}
body {
margin: 0px;
}
.form-title {
font-size: 42px;
font-family: 'VisbyRoundCF-Heavy';
letter-spacing: 0.5px;
color: #e8e8e8;
padding-bottom: 12px;
}
.form-subtitle {
font-size: 18px;
letter-spacing: 0.5px;
color: #cf0b0b;
padding-bottom: 24px;
}
.background-image {
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
.background-gradient-dark {
width: 100vw;
height: 100%;
overflow-y: scroll;
background: linear-gradient(66deg, rgb(26, 94, 230) 0%, rgb(84, 111, 250) 50%, rgba(46, 73, 230, 0.8)
100%);
/* ^ Built with https://cssgradient.io/ */
}
.background-gradient-light {
width: 100vw;
height: 100%;

overflow-y: scroll;
background: linear-gradient(66deg, rgba(68, 125, 196, 0.9) 0%, rgba(43, 94, 182, 0.8) 50%, rgba(81, 64,
234, 0.7) 100%);
/* ^ Built with https://cssgradient.io/ */
}
Here App.tsx Code
import { useContext } from "react";
import { Context } from "./functions/context";
import AuthPage from "./AuthPage";
import ChatsPage from "./ChatsPage";
import "./app.css";
function App() {
if (user) {
return <ChatsPage />;
} else {
return <AuthPage />;
}
}
export default App;
import ReactDOM from "react-dom/client";
import App from "./App";
import "./assets/VisbyRoundCF-Regular.woff";
import { ContextProvider } from "./functions/context";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<ContextProvider>
<App />
</ContextProvider>
);
Here Index.tsx Code
import ReactDOM from "react-dom/client";

import App from "./App";
import "./assets/VisbyRoundCF-Regular.woff";
import { ContextProvider } from "./functions/context";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<ContextProvider>
<App />
</ContextProvider>
);
Here Theme.css Code
.ce-chat-list { background-color: rgb(222, 222, 230) !important; }
.ce-chat-form { background-color: rgb(22, 83, 204) !important; padding-bottom: 14px !important; }
.ce-chat-form-title { color: white !important; font-family: 'VisbyRoundCF-DemiBold' !important; }
.ce-default-button { border: none !important; background-color: rgb(17,33,93) !important; color: white
!important; }
.ce-text-input { background-color: rgb(17, 33, 93) !important; color: white !important; font-family:
'VisbyRoundCF-DemiBold' !important; border: 2px solid #fa541c !important; border-radius: 8px
!important; }
.ce-text-input::placeholder { color: white !important; }
.ce-chat-card { border: 1px solid rgb(17,33,93) !important; background-color: rgb(17,33,93) !important;
margin: 10px 12px !important; height: 68px !important; }
.ce-chat-card:hover { border: 1px solid #1890ff !important; box-shadow: rgb(17,33,93) 0px 2px 7px
!important; }
.ce-chat-card-loading { height: 10px !important; }
.ce-chat-card-title-loading { top: 16px !important; }
.ce-active-chat-card { border: 1px solid #1890ff !important; background-color: #1890ff !important; box-
shadow: rgb(17,33,93) 0px 2px 7px !important; color: white !important; }
.ce-chat-card-title { color: white !important; font-family: 'VisbyRoundCF-DemiBold' !important; }
.ce-chat-card-subtitle { font-family: 'VisbyRoundCF-DemiBold' !important; font-size: 12px !important;
bottom: 16px !important; width: calc(70% - 44px) !important; color: #c5c5c5 !important; }
.ce-chat-card-time-stamp { font-family: 'VisbyRoundCF-DemiBold' !important; font-size: 12px !important;
bottom: 16px !important; }
.ce-chat-card-unread { top: calc((68px - 12px) / 2) !important; }
.ce-avatar-status { border: 2px solid rgb(17,33,93) !important; width: 10px !important; height: 10px
!important; }
.ce-chat-card-avatar { top: 12px !important; }
.ce-chat-feed-column { border: none !important; }
.ce-chat-feed { background-color: rgb(17,33,93) !important; }
.ce-message-list { margin-top: 24px !important; margin-left: 12px !important; margin-right: 12px
!important; padding: 0px 3.3vw !important; background: linear-gradient(0deg, rgb(17,33,93) 0%,

rgb(17,33,93) 75%, rgb(17,33,93) 100%); border-radius: 8px 8px 0px 0px !important; height: calc((100% -
85px) - 72px - 24px - 12px) !important; }
.ce-message-date-text { font-family: 'VisbyRoundCF-DemiBold' !important; color: rgb(17,33,93)
!important; font-size: 14px !important; letter-spacing: -1px; }
.ce-my-message-body { font-family: 'VisbyRoundCF-Regular' !important; font-size: 12px !important;
padding: 15px !important; }
.ce-my-message-timestamp { font-family: 'VisbyRoundCF-DemiBold' !important; font-size: 12px
!important; padding: 15px !important; margin-right: 0px !important; letter-spacing: -1px; }
.ce-their-message-body { font-family: 'VisbyRoundCF-Regular' !important; font-size: 12px !important;
padding: 15px !important; background-color: rgb(17,33,93) !important; color: white !important; }
.ce-their-message-timestamp { font-family: 'VisbyRoundCF-DemiBold' !important; font-size: 12px
!important; padding: 15px !important; margin-left: 0px !important; letter-spacing: -1px; }
.ce-their-message-timestamp { color: rgb(241, 240, 240) !important; letter-spacing: -1px; }
.ce-their-message-sender-username { color: rgb(17,33,93) !important; }
.ce-message-file { background-color: rgb(17,33,93) !important; color: #c5c5c5 !important; border-radius:
8px !important; }
.ce-message-image { background-color: rgb(17,33,93) !important; color: #c5c5c5 !important; border-
radius: 8px !important; padding: 0px !important; max-width: 124px !important; max-height: 124px
!important; }
.ce-mobile-chat-list-button { top: 32px !important; left: 0px !important; }
.ce-mobile-chat-settings-button { display: none !important; }
.ce-custom-chat-header { display: inline-block; position: relative; width: 100%; height: 86px; }
.ce-custom-header-text { display: inline-block; max-width: 50%; padding-left: 14px; position: relative;
top: 21px; }
.ce-custom-header-title { color: white; font-size: 13px; font-family: 'VisbyRoundCF-DemiBold'; }
.ce-custom-header-subtitle { color: rgb(17,33,93); font-size: 11px; }
.ce-custom-header-icon-wrapper { display: inline-block; max-width: 50%; position: relative; top: 36px;
float: right; }
.ce-custom-header-icon { margin-right: 12px; cursor: pointer; color: rgb(17,33,93) !important; transition:
all 0.66s ease; }
.ce-custom-header-icon:hover { color: rgb(24, 144, 255) !important; }
.ce-custom-message-form { position: relative; height: 68px; margin-left: 12px; margin-right: 12px; width:
calc(100% - 12px - 12px); border-radius: 0px 0px 8px 8px; background-color: rgb(17,33,93); }
.ce-custom-message-input { position: absolute; top: 12px; left: 3.3vw; width: calc(100% - 3.3vw - 3.3vw -
14px - 15px - 15px); box-shadow: rgb(17,33,93) 0px 2px 7px; border: 1px solid rgb(24, 144, 255); outline:
none; background-color: rgb(17,33,93); color: white; font-size: 12px; padding: 0px 15px; font-family:
'VisbyRoundCF-DemiBold'; height: 36px; border-radius: 8px; transition: all .44s ease; }
.ce-custom-message-input:focus { box-shadow: rgb(17,33,93) 0px 2px 7px; border: 1px solid #40a9ff; }
.ce-custom-message-input::placeholder { color: #e1e1e1; }
.ce-custom-send-button { cursor: pointer; background-color: rgb(24, 144, 255); border: 1px solid rgb(24,
144, 255); width: 36px; height: 36px; border-radius: 8px; color: white; box-shadow: rgb(17,33,93) 0px 5px
15px; position: absolute; top: 12px; right: 3.3vw; transition: all .44s ease; }

.ce-custom-send-button:hover { background-color: #40a9ff; }
.ce-sidebar-menu { position: absolute; top: 30vh; }
.ce-sidebar-icon { width: 6vw; padding-top: 12px; padding-bottom: 12px; font-size: 16px; color: rgb(43,
153, 227) !important; }
.ce-sidebar-icon-active { color: rgb(24, 144, 255) !important; border-left: 2px solid rgb(24, 144, 255); }
.sidebar-avatar { position: absolute !important; bottom: 66px; left: calc(50% - 22px); border: 1px solid
rgb(24, 144, 255); box-shadow: rgb(24 144 255 / 35%) 0px 2px 7px; }
.signout-icon { cursor: pointer; color: rgb(17,33,93) !important; transition: all 0.66s ease; font-size: 18px;
position: absolute; bottom: 24px; left: calc(50% - 9px); }
.signout-icon:hover { color: #1890ff !important; }
.ce-chat-form-autocomplete { width: calc(100% - 12px - 12px) !important; margin: 0px 12px !important;
padding-top: 28px !important; padding-bottom: 32px !important; }
.ant-input-lg { background-color: rgb(17,33,93) !important; outline: none !important; border: 1px solid
rgb(17,33,93) !important; color: white !important; border-radius: 8px 0px 0px 8px !important; }
.ant-input-lg::placeholder { color: white !important; font-family: 'VisbyRoundCF-DemiBold' !important;
padding-top: 12px !important; }
.ant-input-search-button { background-color: rgb(17,33,93) !important; border: none !important; outline:
none !important; margin-left: 3px !important; border-radius: 0px 8px 8px 0px !important; }
.ant-input-search-button:hover { background-color: rgb(17,33,93) !important; }
.ant-input-group-addon { background-color: rgb(17,33,93) !important; }
.ce-empty-settings { background-color: rgb(17,33,93) !important; width: 3vw; height: 100vh; }
TESTING AND TESTING RESULTS
Testing Strategy:
Unit testing: Testing individual components/modules of the application, such as user
authentication, messaging service, and database interactions.
Integration Testing: Testing the integration of different components to ensure they work
together seamlessly.
System testing: Testing the entire system as a whole to verify that it meets the specified
requirements.
User Acceptance Testing: Involving end-users to test the application's usability, functionality,
and performance in real-world scenarios.
Security Testing: Testing the application for vulnerabilities, such as SQL injection, cross-site
scripting (XSS), and authentication bypass.
Performance Testing: Testing the application's performance under various conditions,
including load testing, stress testing, and scalability testing
Regression Testing: Testing to ensure that new changes or updates do not introduce new
bugs or affect existing functionalities.

Testing Results:
Unit testing results: All individual components/modules passed unit tests with no critical
issues identified. Minor bugs were fixed during development.
Integration testing results: Integration testing revealed some issues with data flow
between components, which were resolved through code modifications and configuration
adjustments.
System testing results: System testing showed that the application met most of the
specified requirements. However, some minor usability issues were identified, such as
inconsistent UI elements and error handling.
Users acceptance testing results: End-users provided positive feedback on the
application's ease of use and functionality. However, some users reported occasional delays
in message delivery during peak usage times.
Security testing results: Security testing uncovered a few vulnerabilities, including potential
SQL injection flaws and session management weaknesses. These were promptly addressed
through code fixes and security patches.
Performance testing results: Performance testing revealed that the application could
handle a moderate number of concurrent users without significant degradation in
performance. However, further optimization may be needed to improve scalability for larger
user loads.
Regression testing results: Regression testing confirmed that new changes and updates
did not introduce any new bugs or regressions. The application remained stable and
functional after implementing new features and bug fixes.
Results and Conclusion:
Results
Functionality:
User Interface: Users were able to seamlessly join chat rooms, send and receive messages in real-time, and
switch between different chat rooms with ease.
Message Delivery: Messages were delivered in real-time with minimal latency, ensuring smooth
communication between users.
User Management: The application successfully handled user authentication, allowing users to log in and
manage their sessions.
Scalability: The application was able to support a reasonable number of concurrent users and chat rooms
without significant performance degradation.
Performance:
Latency: Messages were delivered almost instantaneously, with minimal delay even when handling
multiple chat rooms and concurrent users.
Resource Usage: The application used system resources efficiently and could maintain performance under
moderate load.

Stability: The chat application remained stable throughout testing and usage, with few to no crashes.
Security:
Authentication and Authorization: Proper mechanisms were in place for user authentication and access
control to ensure secure communications.
Data Privacy: Measures were taken to protect user data and messages from unauthorized access.
User Feedback:
Positive feedback regarding ease of use and the intuitive interface.
Users appreciated the real-time nature of the chat and the smooth transition between chat rooms.
Suggestions were made for additional features such as reactions, threading, and enhanced notifications.
Conclusion
Success: The real-time chat application project was largely successful in achieving its goals. Users were
satisfied with the application's performance, responsiveness, and ease of use.
Challenges:
Scalability: Managing an increased number of concurrent users can be challenging, and some optimizations
may be required for large-scale usage.
User experience: Additional features such as threaded conversations, file sharing, and reactions could
further enhance the user experience.
Lessons Learned:
Load Testing: It is important to perform thorough load testing to anticipate and handle potential scalability
issues.
Security: Ensuring robust security measures for data privacy and user authentication is essential for
maintaining user trust.
User-Centric Design: Listening to user feedback and iterating on the application can help improve the
overall user experience.
Future Directions:
Feature Expansion: Introducing features such as file sharing, reactions, and threading to enhance user
experience.
Scalability Improvements: Implementing optimization techniques and possibly adopting newer
technologies to handle larger user bases.
Cross-platform Compatibility: Expanding the application to support various devices and platforms.
Advanced Security: Continuously improving security measures to keep up with evolving security threats.

final-year-project-report : E- learning platform integrated with AI

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie final-year-project-report : E- learning platform integrated with AI

Ähnlich wie final-year-project-report : E- learning platform integrated with AI (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

final-year-project-report : E- learning platform integrated with AI