![</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={{](https://image.slidesharecdn.com/final-year-project-report-240425144010-dd5b8dff/85/final-year-project-report-E-learning-platform-integrated-with-AI-17-320.jpg)
![...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;
style?: CSSProperties;
type?: string;
onClick?: () => void;
}
const Link = (props: LinkProps) => {
const [hovered, setHovered] = useState(false);
return (
<span
onClick={props?.onClick}
onMouseEnter={() => setHovered(true)}](https://image.slidesharecdn.com/final-year-project-report-240425144010-dd5b8dff/85/final-year-project-report-E-learning-platform-integrated-with-AI-18-320.jpg)
![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;
style?: CSSProperties;
onChange: ChangeEventHandler<HTMLInputElement>;
}
const PhotoInput = (props: PhotoInputProps) => {
const [selectedImage, setSelectedImage] = useState<File | undefined>(
undefined
);
const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
if (event.target.files !== null) {](https://image.slidesharecdn.com/final-year-project-report-240425144010-dd5b8dff/85/final-year-project-report-E-learning-platform-integrated-with-AI-19-320.jpg)
![const image = event.target.files[0];
setSelectedImage(image);
props.onChange(event);
}
};
return (
<div
style={{
...styles.style,
...props.style,
}}
>
<label
htmlFor={props.id}
style={{
display: "inline-block",
width: "100%",
cursor: "pointer",
}}
>
{selectedImage ? (
<div
style={{
width: "52px",
height: "52px",
backgroundImage: `url(${URL.createObjectURL(selectedImage)})`,
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
borderRadius: "8px",
}}
/>
) : (
<div style={styles.uploadStyle}>+</div>
)}
<div style={styles.labelStyle}>{props.label}</div>
</label>
<input
type="file"
accept="image/png, image/gif, image/jpeg"
id={props.id}
name={props.name}
style={{ display: "none" }}
onChange={onChange}
/>
</div>](https://image.slidesharecdn.com/final-year-project-report-240425144010-dd5b8dff/85/final-year-project-report-E-learning-platform-integrated-with-AI-20-320.jpg)
![color: "white",
fontFamily: "VisbyRoundCF-DemiBold",
outline: "none",
border: "none",
borderRadius: "8px",
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",](https://image.slidesharecdn.com/final-year-project-report-240425144010-dd5b8dff/85/final-year-project-report-E-learning-platform-integrated-with-AI-23-320.jpg)
![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](https://image.slidesharecdn.com/final-year-project-report-240425144010-dd5b8dff/85/final-year-project-report-E-learning-platform-integrated-with-AI-24-320.jpg)
![);
};
export default LogInForm;
Here SignUpForm.tsx Code
import { useContext, useState } from "react";
import axios from "axios";
import { PersonObject } from "react-chat-engine-advanced";
import { useIsMobile } from "../functions/isMobile";
import { Context } from "../functions/context";
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 onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const userJson: PersonObject = {
email: email,
username: email,
first_name: firstName,
last_name: lastName,
secret: password,
avatar: null,](https://image.slidesharecdn.com/final-year-project-report-240425144010-dd5b8dff/85/final-year-project-report-E-learning-platform-integrated-with-AI-26-320.jpg)
![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"
style={{ width: isMobile ? "100%" : "calc(50% - 6px)" }}
onChange={(e) => setEmail(e.target.value)}
/>
<TextInput
label="Password"
name="password"
placeholder="********"
type="password"
style={{
width: isMobile ? "100%" : "calc(50% - 6px)",
float: "right",
}}
onChange={(e) => setPassword(e.target.value)}
/>
<PhotoInput
label="Profile picture"
name="avatar"
id="avatar-picker"
style={{ width: isMobile ? "100%" : "calc(50% - 6px)" }}
onChange={(e) => {
if (e.target.files !== null) {
setAvatar(e.target.files[0]);
}
}}
/>
<Button
type="submit"
style={{
width: isMobile ? "100%" : "calc(50% - 6px)",
float: "right",
}}](https://image.slidesharecdn.com/final-year-project-report-240425144010-dd5b8dff/85/final-year-project-report-E-learning-platform-integrated-with-AI-28-320.jpg)
![const ChatHeader = (props: CustomChatHeaderProps) => {
// State
const [isFilePickerLoading, setFilePickerLoading] = useState(false);
const [isDeleteLoading, setDeleteLoading] = useState(false);
// Hooks
const isMobile: boolean = useIsMobile();
// TODO: Show how TS recommends props.chat &&
const otherMember: PersonObject | undefined =
props.chat && getOtherUser(props.chat, props.username);
const onFilesSelect: React.ChangeEventHandler<HTMLInputElement> = (e) => {
if (!props.chat) return;
setFilePickerLoading(true);
const headers = {
"Project-ID": projectId,
"User-Name": props.username,
"User-Secret": props.secret,
};
const formdata = new FormData();
const filesArr = Array.from(e.target.files !== null ? e.target.files : []);
filesArr.forEach((file) => formdata.append("attachments", file, file.name));
formdata.append("created", nowTimeStamp());
formdata.append("sender_username", props.username);
formdata.append("custom_json", JSON.stringify({}));
axios
.post(
`https://api.chatengine.io/chats/${props.chat.id}/messages/`,
formdata,
{ headers }
)
.then((r) => setFilePickerLoading(false))
.catch((e) => setFilePickerLoading(false));
};
const onDelete = () => {
if (!props.chat) return;
setDeleteLoading(true);
const headers = { "Private-Key": privateKey };
axios
.delete(`https://api.chatengine.io/chats/${props.chat.id}/`, {
headers,
})](https://image.slidesharecdn.com/final-year-project-report-240425144010-dd5b8dff/85/final-year-project-report-E-learning-platform-integrated-with-AI-31-320.jpg)
![</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";
import { Context } from "../functions/context";
const MessageForm = (props: MessageFormProps) => {
const [text, setText] = useState<string>("");
const { user } = useContext(Context);
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
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](https://image.slidesharecdn.com/final-year-project-report-240425144010-dd5b8dff/85/final-year-project-report-E-learning-platform-integrated-with-AI-36-320.jpg)
![<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 axios from "axios";
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;
const headers = { "Private-Key": privateKey };
axios
.get("https://api.chatengine.io/users/", { headers })
.then((r) => setUsers(r.data))
.catch();
}
});
const searchResult = (query: string) => {](https://image.slidesharecdn.com/final-year-project-report-240425144010-dd5b8dff/85/final-year-project-report-E-learning-platform-integrated-with-AI-38-320.jpg)
![const foundUsers = users.filter(
(user) =>
JSON.stringify(user).toLowerCase().indexOf(query.toLowerCase()) !==
-1 && user.username !== props.username
);
return foundUsers.map((user) => {
return {
value: user.username,
label: (
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<span>
<Avatar avatarUrl={user.avatar} username={user.username} />
</span>
<span>
<div>
{user.first_name} {user.last_name}
</div>
<div>{user.username}</div>
</span>
</div>
),
};
});
};
const handleSearch = (query: string) => {
setOptions(query ? searchResult(query) : []);
};
const onSelect = (value: string) => {
setLoading(true);
const headers = {
"Project-ID": projectId,
"User-Name": props.username,
"User-Secret": props.secret,
};
const data = {
usernames: [props.username, value],
};
axios
.put("https://api.chatengine.io/chats/", data, { headers })
.then((r) => {](https://image.slidesharecdn.com/final-year-project-report-240425144010-dd5b8dff/85/final-year-project-report-E-learning-platform-integrated-with-AI-39-320.jpg)
final-year-project-report : E- learning platform integrated with AI
- 1. 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
- 2. 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)
- 3. 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
- 4. 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.
- 5. 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
- 6. 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.
- 7. 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.
- 8. 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.
- 9. 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
- 10. 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.
- 11. 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.
- 12. Design documents
- 14. ERD Of Real Time Chat Application
- 15. Flow Charts Of Real Time Chat Application
- 16. 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" /> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app- manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body>
- 17. </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={{
- 18. ...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; style?: CSSProperties; type?: string; onClick?: () => void; } const Link = (props: LinkProps) => { const [hovered, setHovered] = useState(false); return ( <span onClick={props?.onClick} onMouseEnter={() => setHovered(true)}
- 19. 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; style?: CSSProperties; onChange: ChangeEventHandler<HTMLInputElement>; } const PhotoInput = (props: PhotoInputProps) => { const [selectedImage, setSelectedImage] = useState<File | undefined>( undefined ); const onChange: ChangeEventHandler<HTMLInputElement> = (event) => { if (event.target.files !== null) {
- 20. const image = event.target.files[0]; setSelectedImage(image); props.onChange(event); } }; return ( <div style={{ ...styles.style, ...props.style, }} > <label htmlFor={props.id} style={{ display: "inline-block", width: "100%", cursor: "pointer", }} > {selectedImage ? ( <div style={{ width: "52px", height: "52px", backgroundImage: `url(${URL.createObjectURL(selectedImage)})`, backgroundRepeat: "no-repeat", backgroundSize: "cover", borderRadius: "8px", }} /> ) : ( <div style={styles.uploadStyle}>+</div> )} <div style={styles.labelStyle}>{props.label}</div> </label> <input type="file" accept="image/png, image/gif, image/jpeg" id={props.id} name={props.name} style={{ display: "none" }} onChange={onChange} /> </div>
- 21. ); }; const styles = { style: { position: "relative", display: "inline-block", width: "100%", paddingBottom: "12px", } as CSSProperties, uploadStyle: { color: "white", backgroundColor: "rgb(62, 64, 75)", display: "inline-block", height: "52px", width: "52px", borderRadius: "8px", textAlign: "center", fontSize: "30px", } as CSSProperties, labelStyle: { display: "inline-block", color: "rgb(175, 175, 175)", fontFamily: "VisbyRoundCF-DemiBold", fontSize: "14px", cursor: "pointer", position: "absolute", top: "18px", left: "66px", } as CSSProperties, inputStyle: { backgroundColor: "#3e404b", color: "white", fontFamily: "VisbyRoundCF-DemiBold", outline: "none", border: "none", borderRadius: "8px", 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";
- 22. interface TextInputProps { label: string; name: string; type?: string; placeholder?: string; style?: CSSProperties; 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: { position: "relative", display: "inline-block", width: "100%", paddingBottom: "12px", } as CSSProperties, labelStyle: { position: "absolute", top: "8px", left: "18px", fontSize: "11px", color: "rgb(175, 175, 175)", fontFamily: "VisbyRoundCF-DemiBold", width: "100px", } as CSSProperties, inputStyle: { backgroundColor: "#3e404b",
- 23. color: "white", fontFamily: "VisbyRoundCF-DemiBold", outline: "none", border: "none", borderRadius: "8px", 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",
- 24. 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
- 25. .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>
- 26. ); }; export default LogInForm; Here SignUpForm.tsx Code import { useContext, useState } from "react"; import axios from "axios"; import { PersonObject } from "react-chat-engine-advanced"; import { useIsMobile } from "../functions/isMobile"; import { Context } from "../functions/context"; 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 onSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); const userJson: PersonObject = { email: email, username: email, first_name: firstName, last_name: lastName, secret: password, avatar: null,
- 27. 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
- 28. 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" style={{ width: isMobile ? "100%" : "calc(50% - 6px)" }} onChange={(e) => setEmail(e.target.value)} /> <TextInput label="Password" name="password" placeholder="********" type="password" style={{ width: isMobile ? "100%" : "calc(50% - 6px)", float: "right", }} onChange={(e) => setPassword(e.target.value)} /> <PhotoInput label="Profile picture" name="avatar" id="avatar-picker" style={{ width: isMobile ? "100%" : "calc(50% - 6px)" }} onChange={(e) => { if (e.target.files !== null) { setAvatar(e.target.files[0]); } }} /> <Button type="submit" style={{ width: isMobile ? "100%" : "calc(50% - 6px)", float: "right", }}
- 29. > 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}
- 30. 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, } from "react-chat-engine-advanced"; import { PhoneFilled, DeleteFilled, PaperClipOutlined, LoadingOutlined, } from "@ant-design/icons"; import axios from "axios"; import { nowTimeStamp } from "../functions/dates"; import { getOtherUser } from "../functions/getOtherUser"; import { useIsMobile } from "../functions/isMobile"; import { privateKey, projectId } from "../functions/constants"; import { useState } from "react"; interface CustomChatHeaderProps extends ChatHeaderProps { chat?: ChatObject; username: string; secret: string; }
- 31. const ChatHeader = (props: CustomChatHeaderProps) => { // State const [isFilePickerLoading, setFilePickerLoading] = useState(false); const [isDeleteLoading, setDeleteLoading] = useState(false); // Hooks const isMobile: boolean = useIsMobile(); // TODO: Show how TS recommends props.chat && const otherMember: PersonObject | undefined = props.chat && getOtherUser(props.chat, props.username); const onFilesSelect: React.ChangeEventHandler<HTMLInputElement> = (e) => { if (!props.chat) return; setFilePickerLoading(true); const headers = { "Project-ID": projectId, "User-Name": props.username, "User-Secret": props.secret, }; const formdata = new FormData(); const filesArr = Array.from(e.target.files !== null ? e.target.files : []); filesArr.forEach((file) => formdata.append("attachments", file, file.name)); formdata.append("created", nowTimeStamp()); formdata.append("sender_username", props.username); formdata.append("custom_json", JSON.stringify({})); axios .post( `https://api.chatengine.io/chats/${props.chat.id}/messages/`, formdata, { headers } ) .then((r) => setFilePickerLoading(false)) .catch((e) => setFilePickerLoading(false)); }; const onDelete = () => { if (!props.chat) return; setDeleteLoading(true); const headers = { "Private-Key": privateKey }; axios .delete(`https://api.chatengine.io/chats/${props.chat.id}/`, { headers, })
- 32. .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
- 33. 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 { useIsMobile } from "../functions/isMobile"; import { Context } from "../functions/context"; import { MultiChatWindow, MultiChatSocket, useMultiChatLogic, MessageFormProps, ChatCardProps, ChatHeaderProps, } from "react-chat-engine-advanced"; import "../theme.css"; import Sidebar from "./Sidebar"; import MessageForm from "./MessageForm";
- 34. import UserSearch from "./UserSearch"; import ChatCard from "./ChatCard"; import ChatHeader from "./ChatHeader"; import { projectId } from "../functions/constants"; const ChatsPage = () => { // Hooks const { user } = useContext(Context); const isMobile: boolean = useIsMobile(); // 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={{ position: "relative", 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%", position: "absolute", top: "0px", left: "0px", backgroundColor: "rgb(40,43,54)", }} > <Sidebar /> </div> <div style={{
- 35. width: isMobile ? "100vw" : "calc(100vw - 6vw)", position: "absolute", 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} username={chatProps.username} onChatCardClick={chatProps.onChatCardClick} isActive={ props.chat !== undefined && chatProps.activeChatId === props.chat.id } chat={props.chat} /> )} renderChatHeader={(props: ChatHeaderProps) => ( <ChatHeader {...props} chat={chatProps.chat} username={chatProps.username} secret={chatProps.secret} /> )} renderMessageForm={(props: MessageFormProps) => ( <MessageForm {...props} /> )} renderChatSettings={() => <div className="ce-empty-settings" />} style={{ height: "100%" }} /> </div> </div>
- 36. </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"; import { Context } from "../functions/context"; const MessageForm = (props: MessageFormProps) => { const [text, setText] = useState<string>(""); const { user } = useContext(Context); const onSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); 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
- 37. 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"; import { Context } from "../functions/context"; 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} />
- 38. <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 axios from "axios"; 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; const headers = { "Private-Key": privateKey }; axios .get("https://api.chatengine.io/users/", { headers }) .then((r) => setUsers(r.data)) .catch(); } }); const searchResult = (query: string) => {
- 39. const foundUsers = users.filter( (user) => JSON.stringify(user).toLowerCase().indexOf(query.toLowerCase()) !== -1 && user.username !== props.username ); return foundUsers.map((user) => { return { value: user.username, label: ( <div style={{ display: "flex", justifyContent: "space-between", }} > <span> <Avatar avatarUrl={user.avatar} username={user.username} /> </span> <span> <div> {user.first_name} {user.last_name} </div> <div>{user.username}</div> </span> </div> ), }; }); }; const handleSearch = (query: string) => { setOptions(query ? searchResult(query) : []); }; const onSelect = (value: string) => { setLoading(true); const headers = { "Project-ID": projectId, "User-Name": props.username, "User-Secret": props.secret, }; const data = { usernames: [props.username, value], }; axios .put("https://api.chatengine.io/chats/", data, { headers }) .then((r) => {
- 40. 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 { /* TODO: Font Family https://www.dfonts.org/assets/visby-round-font-family/ */ font-family: 'VisbyRoundCF-DemiBold'; src: local('VisbyRoundCF-DemiBold'), url(./assets/VisbyRoundCF-DemiBold.woff) format('woff'); font-weight: normal; }
- 41. @font-face { /* TODO: Font Family https://www.dfonts.org/assets/visby-round-font-family/ */ font-family: 'VisbyRoundCF-Heavy'; src: local('VisbyRoundCF-Heavy'), url(./assets/VisbyRoundCF-Heavy.woff) format('woff'); font-weight: normal; } body { font-family: 'VisbyRoundCF-Regular'; 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; font-family: 'VisbyRoundCF-Regular'; 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%;
- 42. 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() { const { user } = useContext(Context); 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";
- 43. 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%,
- 44. 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; }
- 45. .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.
- 46. 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.
- 47. 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.