A

Synopsis Report
On
“MERN Chat”
Submitted in Partial Fulfillment of the Requirements for the
Award of the Degree of
Bachelor of Computer Application / Bachelor of Science (IT)

Submitted by
Atul Rai (202210101300005)
Ashwin vats (202210101300028) Shubhranshu (202210101300007)

Under the Guidance of

Mr. Sarfraz Ahmad
Assistant Professor
Department of Computer Science & Information Systems

Shri Ramswaroop Memorial University

Lucknow – Deva Road, Barabanki (UP)

January, 2025
 Abstract
In today’s digital world, real-time communication has become an essential part of various
industries, including business, education, and social networking. This project, MERN
Chat, is a real-time messaging platform built using the MERN (MongoDB, Express.js,
React.js, Node.js) stack, with Socket.io enabling instant message exchange between
users. The application provides seamless user authentication, persistent message history,
profile management, and online status updates.
The core functionalities of MERN Chat include secure user authentication, real-time
messaging, message history retrieval, and profile customization. Upon registration, user
credentials are stored securely in the USERS database, and authentication is handled
through bcrypt and JWT tokens. Once logged in, users can send and receive messages,
which are stored in the MESSAGES database, containing details such as Sender ID,
Receiver ID, Message ID, message content, and timestamps. The chat history is retrieved
dynamically by filtering messages between specific users, ensuring a seamless
conversation experience.
This project follows an Agile methodology, ensuring iterative development and testing at
each stage. The front-end is built using React.js and Tailwind CSS, providing a
responsive and user-friendly interface, while the back-end, developed using Node.js and
Express.js, ensures efficient handling of API requests and database interactions.
WebSockets (Socket.io) is integrated to facilitate real-time communication.
MERN Chat is a practical implementation of modern web technologies and serves as an
excellent learning experience for full-stack development. Future enhancements include
push notifications, group chats, and end-to-end encryption to improve security and user
engagement. This project demonstrates expertise in real-time web applications,
authentication protocols, and database management, making it a valuable addition to any
developer’s portfolio.
1. Title of the Project
MERN Chat: A Real-Time Messaging Platform.

2. Statement about the Problem

With the growing need for instant communication in both professional and personal contexts,
messaging platforms have become essential tools for seamless interactions. However, existing
messaging platforms often face several challenges:
• Latency: Delay in message delivery and retrieval.
• Security: Ensuring data privacy and preventing unauthorized access.
• User Experience: Providing intuitive, easy-to-use, and visually appealing interfaces.

This project aims to address these issues by creating a robust, real-time messaging platform
using the MERN Stack and Socket.io. By offering secure login/authentication, real-time
communication, and a user-friendly interface, the platform can cater to both professional and
personal communication needs.

3. Why is the Particular Topic Chosen?

The choice of creating a real-time messaging platform using the MERN stack and WebSockets
was driven by several learning objectives:
• Hands-On Experience with MERN Stack: By implementing MongoDB, Express.js,
React.js, and Node.js together, I deepened my understanding of full-stack development.
• Real-Time Communication: The rise in real-time communication (like live chat, instant
messaging, etc.) in apps across sectors necessitated gaining expertise in WebSockets
(Socket.io).
• User Authentication: Handling secure user authentication using JWT (JSON Web
Tokens) and bcrypt for password hashing provided valuable experience in secure
development.
In addition, building a messaging platform provides practical insights into back-end server
management, data storage, and front-end UI design, all of which are crucial skills for modern
web developers.

4. Objective and Scope of the Project

Objective
The primary objective of this project is to develop a fully functional, secure, and scalable chat
application that provides:
• Real-time messaging: Enabling users to send and receive messages instantly using
Socket.io.
• User authentication: Secure login and registration functionality with hashed passwords
and token-based authentication.
 • Persistent message history: Messages are stored in MongoDB to ensure users can access
and review past conversations.
• Online status indicators: Display real-time user presence (online or offline) using
Socket.io.
• User Profiles: Allow users to manage personal details and profile settings.

Scope
The project encompasses the following features:
• Real-time Messaging: Real-time communication is enabled through Socket.io.
• User Authentication: Secure login/signup system with password hashing using bcrypt.
• Message History: Store messages in MongoDB, making it available for users to retrieve
conversations.
• Online Status & Profiles: Display active user statuses and allow users to manage their
profiles.

5. Methodology
The development process followed an Agile approach, with iterative cycles of building features,
testing, gathering feedback, and refining the application. The key features developed include:
1. User Authentication: Implemented using JWT for session management and bcrypt for
password hashing.
2. Real-Time Messaging: Integrated Socket.io to handle real-time message exchanges and
user activity.
3. Message History: Messages are stored in MongoDB, ensuring they can be retrieved even
after logging out or refreshing the page.
4. Profiles & Online Indicators: User profiles were implemented with real-time status
tracking, allowing users to see who is online.
Tools used:
• MongoDB: Used for storing user data, messages, and profile details in a document-based
structure.
• Express.js & Node.js: Formed the back-end structure, handling routing, server-side
logic, and middleware.
• React.js: Built the front-end user interface, providing a dynamic and responsive
experience.
• Socket.io: Facilitated real-time communication between users through WebSockets.
• Tailwind CSS: Utilized for designing a modern, mobile-responsive user interface.
6. Hardware & Software to be Used.
Hardware
• Development Platform: Any modern laptop/computer with internet connectivity for
developing and testing.
• Deployment: Cloud servers for deployment (Vercel & Render).

Software
• MongoDB: Used to store user data and messages, making it easy to query and retrieve
them based on timestamps and user IDs.
• Express.js: Acts as the back-end framework to handle HTTP requests, user
authentication, and message management.
• Node.js: Powers the server-side application, providing the necessary runtime for
JavaScript execution.
• React.js: Powers the front-end user interface, handling dynamic elements such as
message displays, user profiles, and online status.
• Socket.io: Enables real-time, bi-directional communication between the server and the
client.
• Tailwind CSS: Provides utility-first CSS for building a responsive, modern, and clean
user interface.
• GitHub: Used for version control, collaboration, and code sharing.
• Vercel & Render: Used for hosting the application on the cloud.

7. What Contribution Would the Project Make?

While the application does not introduce groundbreaking innovations, it does offer a
comprehensive platform for secure, real-time messaging. This project contributes to:
• Real-Time Communication: Users can chat instantly without waiting for page reloads.
• Security Features: Password hashing and token-based authentication ensure data safety.
• User Experience: A simple, modern chat interface that enhances user interaction.
Additionally, it serves as a practical resource for developers interested in implementing chat
functionality in modern web apps using technologies like Socket.io and the MERN stack.

8. Schedule of the Project (Gantt Chart)

Week Activity
Week-1 Research and Project Setup
Week-2 Set up User Authentication & Database Schema
Week-3 Implement Real-Time Messaging with WebSockets
Week-4 Develop User Profiles, Online Indicators & History
Week-5 Testing, Deployment, and Final Enhancements
9. References/Bibliography
• MERN Stack Documentation (Official): https://mern.io
• Socket.io Documentation: https://socket.io/docs/
• Tailwind CSS Documentation: https://tailwindcss.com/docs
• MDN Web Docs (JavaScript, HTML, and CSS): https://developer.mozilla.org
• W3Schools: https://www.w3schools.com
• Angela Yu's MERN Stack Bootcamp (2024): https://www.udemy.com/course/the-
complete-web-development-bootcamp/

Additional Details:
Innovation & Unique Features:
• WebSockets (Socket.io) for real-time messaging enables instantaneous message delivery,
eliminating delays often associated with traditional polling methods.
• Tailwind CSS is used for quick styling, ensuring a responsive design that adapts to
different screen sizes.
• Online Status Indicators: The app tracks user status in real-time, providing an engaging
experience where users know when others are online.
• Persistent Message History: Users can access their conversation history at any time, even
after they log out.
Learning Outcomes & Skills Gained:
• Full-Stack Development: Hands-on experience in both the back-end (Node.js, Express.js,
MongoDB) and front-end (React.js) development.
• WebSocket Integration: Mastered real-time communication using Socket.io and
improved understanding of event-driven programming.
• Deployment: Experience deploying the application on cloud platforms such as Vercel and
Render.
• Responsive UI Development: Gained expertise in using Tailwind CSS for creating user-
friendly and responsive interfaces.
Challenges Faced & Solutions:
• Real-Time Messaging: Initial difficulties in synchronizing messages across users were
solved by using Socket.io for reliable message delivery.
• Handling Authentication: Secure password handling was implemented using bcrypt,
while JWT was used for session management.
• Responsive Design: Challenges related to different screen sizes were addressed using
Tailwind CSS, which provides responsive utilities.
Future Enhancements:
• Push Notifications: Notifications for new messages will be added to alert users in real
time.
 • Group Chat: Support for group chats where multiple users can communicate
simultaneously.
• End-to-End Encryption: Enhance privacy by implementing end-to-end encryption for all
messages.
Technology Stack Justification:
• MERN Stack is perfect for building full-stack JavaScript applications, making it easy to
create and manage the server, database, and client all within a single language.
• WebSockets (Socket.io) are essential for implementing real-time communication,
offering bi-directional messaging with low latency.
• Tailwind CSS was chosen for its simplicity and utility-first approach to creating modern,
clean, and responsive UIs.
Impact on Target Audience:
• Businesses: Use this platform for internal team communication and customer support
chat services.
• Social Platforms: Provide real-time communication for users to interact with each other.
The app ensures that users experience reliable and secure messaging, making it suitable for
various use cases such as professional communication and casual social interactions.