Web Chat Application Using MERN Stack
GIBBERISH
Presented By
Dhanush T
Gokul K
Jeffin Solomon Asir J S
Abstract: Web Chat Application Using MERN Stack
This project presents a Web Chat Application
developed using the MERN stack (MongoDB, [Link],
[Link], and [Link]) to provide a fast, secure, and user-
friendly messaging platform.
Project Overview
The Web Chat Application enables users to engage in
real-time conversations, supporting one-on-one
messaging and group chats. It offers instant message
delivery, user authentication, and a dynamic UI, ensuring
an engaging and secure communication experience.
Application Rundown
[Link] Page
o When a user opens the application, they are
greeted with a login page.
o Users can log in using pre-registered
credentials or sign up for a new account.
o Authentication is secured using JWT (JSON Web
Tokens) and bcrypt for password encryption.
[Link] Page (Chat Dashboard)
o After logging in, users are redirected to the Chat
Dashboard, which displays:
List of recent conversations
Active online users
Option to search for other users
o Users can select an existing chat or start a new
conversation.
[Link]-on-One & Group Chats
o Users can send and receive messages instantly.
o Supports real-time message delivery using
[Link].
o Messages are stored in MongoDB, allowing users
to retrieve chat history.
o Typing indicators and read receipts enhance
interaction.
o Users can create or join group chats to
communicate with multiple people at once.
[Link] Features
o Users can send text messages, images, and
emojis.
o Message timestamps show when each
message was sent.
o Option to delete or edit messages within a
certain time frame.
[Link] Profile & Settings
o Users can update their profile picture, display
name, and status.
o Settings allow users to change passwords,
manage notifications, and enable dark
mode.
[Link] & Session Management
o Users can securely log out at any time.
o Session handling ensures users stay logged in
unless they choose to sign out.
Key Functionalities
User Authentication: Secure login/logout system
with password encryption.
Real-time Messaging: Instant communication with
[Link] integration.
Chat Rooms & Group Chats: Users can create,
join, and leave group conversations.
Message Storage: Persistent chat history stored in
MongoDB.
Typing Indicators & Read Receipts: Enhances
user interaction.
Responsive UI: Built with [Link] and styled using
CSS frameworks.
Technologies and Their Role
MongoDB: Stores user information, chat history, and
metadata.
[Link]: Handles API requests, user
authentication, and backend logic.
[Link]: Provides a dynamic and responsive
frontend experience.
[Link]: Manages backend operations efficiently.
[Link]: Enables real-time communication
between users.
JWT & Bcrypt: Ensures authentication and security.
Conclusion
With features like instant messaging,
authentication, chat history storage, typing
indicators, and group chats, this project not only
highlights efficient real-time communication but also
emphasizes data security and user convenience. The
integration of [Link] enables fast, bidirectional data
exchange, ensuring smooth and responsive interactions.
