SNAPPY CHAT

A Major Project-1 Report

Submitted in partial fulfillment of the requirement for the award of Degree of
Bachelor of Engineering in CSE-Artificial Intelligence and Machine
Learning

Submitted to

TECHNOCRATS INSTITUTE OF TECHNOLOGY

BHOPAL (M.P.)

MAJOR PROJECT-1 REPORT

Submitted by
Pankaj Prajapati (0111AL211116) Neeraj Sen(0111AL211102)

Lokendra Mathur (0111AL211087) Harshit Kumar (0111EC211039)

Under the supervision of

NAME OF THE GUIDE
CSE-Artificial Intelligence and Machine Learning

Coloured

ISO: 9001-2000

4
 TECHNOCRATS INSTITUTE OF TECHNOLOGY, BHOPAL
Session 2023-2024
TECHNOCRATS INSTITUTE OF TECHNOLOGY
, BHOPAL
CSE-ARTIFICIAL INTELLIGENCE & MACHINE LEARNING

DECLARATION

We (Name of a students) students of Bachelor of Engineering , CSE-Artificial

Intelligence and Machine Learning, TECHNOCRATS INSTITUTE OF
TECHNOLOGY, Bhopal, hereby declare that the work presented in this Major
Project is outcome of our own work and is correct to the best of our knowledge.
This work has been carried out taking care of Engineering Ethics.
The work presented does not infringe any patented work and has not
been submitted to any other University / Institute for the award of any degree /
diploma or any professional certificate.

Pankaj Prajapati (0111AL211116)

Neeraj Sen(0111AL211102)

Lokendra Mathur (0111AL211087)

Harshit Kumar (0111EC211039)

5
 TECHNOCRATS INSTITUTE OF TECHNOLOGY,
BHOPAL
CSE-ARTIFICIAL INTELLIGENCE & MACHINE LEARNING

CERTIFICATE

This is to certify that the work embodied in this Project entitled “TITLE
OF THE PROJECT” has been satisfactorily completed by Name and
Enrollment No. of Students. The work has been carried out under my / our
supervision and guidance in the CSE-Artificial Intelligence and Machine
Learning, TECHNOCRATS INSTITUTE OF TECHNOLOGY, Bhopal,
for partial fulfillment of the Bachelor of Engineering Degree during the
academic year 2023-2024.

Supervisor /(S)

(Name of Supervisor)1 ( Name of Supervisor)2

Designation…………… Designation…………

Approved By

Dr. Vivek Sharma

Professor & Head
CSE-Artificial Intelligence and Machine Learning,
Forwarded by:

Dr. Shashi Kumar Jain

Director
TECHNOCRATS INSTITUTE OF TECHNOLOGY, Bhopal

7
 TECHNOCRATS INSTITUTE OF TECHNOLOGY
BHOPAL
CSE-ARTIFICIAL INTELLIGENCE & MACHINE LEARNING

CERTIFICATE OF APPROVAL

The project work submitted is hereby approved as a systematic study of

an engineering subject. It is presented in a satisfactory manner. It is also accepted
as a prerequisite to the degree for which it has been submitted. It is understood
that by this approval the undersigned does not necessarily endorse or approve
any statement made, opinion expressed or conclusions drawn therein, but
approves the project only for the purpose for which it has been submitted.

(Internal Examiner) (External Examiner)

8
General Instructions :

1. Font used is Times New Roman

2. The figures mentioned within the brackets are the font sizes

3. The text within the thesis should be in 12 font size with 1 ½ spacing

4. Margin Top / Bottom / Right – 25 mm, Left – 37 mm

5. Printed one side

6. Figures continues with text

7. Photograph on photographic paper covered with rice paper

8. Heading should be in 16 font size

9. Sub. Heading should be in 14 font size

10. Text should be in 12 font size

11. Spiller binding

Bibliography/Reference:

9
 TABLE OF CONTENTS

TITLE PAGE NO.

Abstract III
Acknowledgement IV
List of figures VI
List of abbreviations VII
Chapter 1 Introduction 1
1.1 About Project 2
1.2 Project Objectives 4
Chapter 2 Software & Hardware Requirements 6
Chapter 3 Problem Description 9
Chapter 4 Literature Survey 11
Chapter 5 Software Requirements Specification 14
5.1 Functional Requirements 14
5.2 Non-Functional Requirements 14
Chapter 6 Software Design 16
6.1 Use case diagram 16
6.2 Data flow Diagram 17
Chapter 7 Output Screens 19

Chapter 8 Conclusion 23
References 24
Appendix-1: Glossary of Terms 25
Project Summary 27

I
 List of Figures

FIG. NO. TITLE PAGE NO.

1.1 Mern Stack 3

5.1 Signup page 19

5.2 Login page 19

5.3 Search the user 20

5.4 Create Profile 21

5.5 Run Time Chatting 20

5.6 Create Group 21

II
 LIST OF ABBREVIATIONS

ACRONYM FULL FORM

SDLC Software Development Life Cycle

Mongo DB Mongo DB

React JS React JS

Node JS Node JS

VS Visual Studio code

Exp JS Express JS

III
1
 CHAPTER-1
INTRODUCTION

1.1 About Project

Today Developers around the world are making efforts to enhance user experience of using application
as well as to enhance the developer’s workflow of designing applications to deliver projects and rollout
change requests under strict timeline. Stacks can be used to build web applications in the shortest span
of time. The stacks used in web development are basically the response of software engineers to current
demands. They have essentially adopted pre-existing frameworks (including JavaScript) to make their
lives easier. While there are many, MEAN and MERN are just two of the popular stacks that have
evolved out of JavaScript. Both stacks are made up of open source components and offer an end-to-end
framework for building comprehensive web apps that enable browsers to connect with databases. The
common theme between the two is JavaScript and this is also the key benefit of using either stack. One
can basically avoid any syntax errors or any confusion by just coding in one programming language,
JavaScript. Another advantage of building web projects with MERN is the fact that one can benefit
from its enhanced flexibility. In order to understand MERN stack, we need to understand the four
components that make up the 1`MERN stack(fig.1)

Key components and features of Web Based Chatting Application project include:

1. Backend Components (Node.js with Express.js):

 Authentication: Implement user authentication using libraries like Passport.js or JSON Web
Tokens (JWT) for secure user access.
 API Endpoints: Create RESTful APIs to handle user registration, login, messaging
functionalities, user profiles, and chatroom management.
 WebSocket Integration: Use technologies like Socket.IO for real-time communication,
enabling instant message delivery and notifications.
 Database (MongoDB): Store user data, chat history, and other relevant information using
MongoDB, a NoSQL database, for its flexibility with JSON-like documents.

2. Frontend Components (React):

 User Interface (UI): Design an intuitive and responsive UI for chatting, displaying messages,
2
 user profiles, and settings.
 User Authentication: Implement login, registration, and user profile management interfaces.
Real-time Messaging: Utilize WebSocket connections to display real-time messages and
notifications between users and in group chats.
 Message Formatting: Allow for text formatting, emojis, attachments, and possibly media
sharing within messages.
 Search Functionality: Implement search features to find users, previous chats, or specific
messages within the application.

3. Chat Features:

 One-on-One Chats: Enable users to initiate private conversations with other users.

 Group Chats/Channels: Allow users to create or join public or private group chats based on
interests or commonalities.

 Message Status: Display message delivery/read status (seen/unseen) to users.

 Typing Indicators: Show when someone is typing a message to improve the conversational
experience.

 Notifications: Implement push notifications or in-app notifications for new messages or

mentions.

2
 1.2 PROJECT OBJECTIVE

1. Create Real-Time Communication Platform: Develop a robust web application that

enables users to engage in real-time communication through instant messaging,
supporting one-on-one and group chat functionalities.

2. User Authentication and Security: Implement a secure authentication system to ensure

user data privacy and authentication for access, utilizing features like JWT or OAuth to
authenticate users securely.

3. Intuitive User Interface (UI): Design an intuitive and responsive UI/UX that offers an
engaging and user-friendly experience, focusing on ease of navigation, message
readability, and efficient interaction.

4. Messaging Features: Enable users to send and receive messages, emojis, attachments,
and media files in a seamless manner. Implement features such as typing indicators,
message status (delivered, read), and notifications for an enhanced chatting experience.

5. Group Chat Functionality: Provide the ability for users to create or join group chats
based on common interests or specific topics, allowing multiple users to participate in a
single conversation.

3
4
 CHAPTER-2
SOFTWARE & HARDWARE REQUIREMENTS

2.1 INTRODUCTION

Chat applications have become an integral part of our day-to-day life and have had a significant impact
on how we communicate with each other. With numerous chat applications available in the market,
each offering unique features and capabilities, users are spoilt for choice.
Companies that develop these applications compete with each other to add new features and improve
the user experience with each release. This competition has led to the development of some of the
world's top companies, generating high revenue and employing a large number of people.

2.2 SOFTWARE REQUIREMENTS

Software requirements (Developer)
• Languages:
⮚ HTML
⮚ React
• Frame Works & Libraries:
⮚ Express
⮚ Node.js
⮚ Chakra UI
• Tools:
⮚ Visual Studio Code
⮚ MongoDB Compas

2.3 HARDWARE REQUIREMENTS

Software requirements (Developer)
 Processor- A multi-core processor (e.g., Intel Core i5 or AMD Ryzen) for smooth development
 RAM at least 8GB of RAM
 Storage sufficient storage space for development tools, project files, and databases.
 Bandwidth

5
Software requirements (Client )
 Stable Internet connection
 Device: MERN application using a variety of devices, including Desktop computers and
Laptops(Windows, macOS, Linux) , Smartphones and Tablets (iOS, Android)

2
3
 CHAPTER-3
PROBLEM DESCRIPTION

The current digital landscape lacks an efficient and secure platform for real-time communication and
collaboration among users across diverse geographical locations. Traditional messaging apps often lack
certain features, robustness, or security measures, limiting users' ability to engage in seamless, private,
and reliable conversations. There is a need for a comprehensive web-based chatting application to
address these shortcomings and offer a superior communication experience.

Key Features and Functionality:

1. Real-Time Communication: Existing messaging apps might not provide seamless real-time
messaging capabilities, leading to delays or inconsistencies in message delivery.

2. Limited Security Measures: Many messaging platforms lack robust security features,
potentially exposing user data to breaches or unauthorized access.

3. Fragmented User Experience: Users often have to switch between multiple apps or platforms
for different communication needs, leading to a fragmented and inconvenient user experience.

4. Lack of Customization and Flexibility: Current applications might not offer enough
customization options or flexibility in terms of features, preventing users from tailoring the app
to their specific preferences.

5. Accessibility and User Interface Challenges: Some existing apps might have accessibility
issues or a complex user interface, making it challenging for users, especially those less tech-
savvy, to navigate and use the app effectively.

4
5
 CHAPTER-4
LITRATURE SURVEY

A literature survey for a web-based chatting application based on the MERN stack involves examining
existing research, articles, and resources related to similar applications, technologies, methodologies,
and best practices. This literature survey aimsto provide an overview of the current research on web
bassed chatting application, focusing on these key issues.

1. Real-Time Communication and WebSockets:

Explore academic papers, research articles, and documentation explaining the concepts and
implementation of WebSocket technology for real-time communication in web applications.
Review studies that compare different real-time communication technologies and protocols,
emphasizing their suitability for scalable and efficient messaging systems.

2. MERN Stack Architecture and Components:

Examine literature detailing the individual components of the MERN stack (MongoDB, Express.js,
React, Node.js) and their roles in developing web applications.
Research articles comparing the MERN stack with other popular stacks in terms of performance,
scalability, and ease of development.

3. User Interface (UI) and User Experience (UX) in Chat Applications:

Explore studies focusing on UI/UX design principles specific to chat applications, emphasizing ease
of use, accessibility, and engagement.
Examine research papers or case studies discussing strategies for designing intuitive chat interfaces
and optimizing user experience across devices.

4. Database Management with MongoDB:

Investigate academic papers or technical resources elaborating on the advantages and use cases of
MongoDB in web applications, focusing on its schema flexibility, scalability, and performance in
handling chat-related data.

5. Scalability and Performance Optimization:

Review articles and research papers that discuss strategies and methodologies for optimizing
performance and ensuring scalability in web-based chat applications built on the MERN stack.
6
7
 Explore case studies or technical reports highlighting successful scaling techniques and
infrastructure setups used in large-scale chat systems.

1. Privacy and Data Security in Chat Applications:

Explore research papers or articles discussing privacy concerns, data encryption methods, and
compliance standards applicable to chat applications to ensure user data protection and privacy.

2. Case Studies and Best Practices:

Analyze case studies or technical documentation of existing MERN stack-based chat applications,
focusing on architecture design, feature implementation, challenges faced, and solutions adopted.
Review best practices and lessons learned from the development and maintenance of successful
web-based chat applications.

3. Future Trends and Emerging Technologies:

Investigate forward-looking articles or research papers discussing potential advancements, trends,
and emerging technologies in the realm of web-based chatting applications, including AI integration,
voice/video capabilities, or AR/VR integration.

2
3
 CHAPTER-5
SOFTWARE REQUIREMENT SPECIFICATION

5.1 FUNCTIONAL REQUIREMENTS

 User Registration: User must be able to register for the application through an Email,
Username and Password. On Opening the application, user must be able to register themselves
or they can directly login if there have an account already. If user skips this step, user should
able to chat. The user’s email will be the unique identifier of his/her account on Chat
Application.

 Adding New Contacts: The application should detect all contacts from the server database. If
any of the contacts have user entered with Chat Application, those contacts must automatically
be added to the users contact list on Chat Application.

 Send Message: User should be able to send instant message to any contact on his/her Chat
Application contact list. User should be notified when message is successfully delivered to the
recipient by coloring message.

 Broadcast Message: User should be able to create groups of contacts. User should be able to
broadcast messages to these groups.

5.2 NON-FUNCTIONAL REQUIREMENTS

⮚ Privacy: Messages shared between users should be encrypted to maintain privacy.
⮚ Robustness: In case user’s system crashes, a backup of their chat history must be stored on
remote database servers to enable recoverability.
⮚ Performance: Application must be lightweight and must send messages instantly.

4
2
 CHAPTER-6
SOFTWARE DESGIN

USE CASE DIAGRAM

Figure 6.1 Use case Diagram

3
DATA FLOW DIAGRAM

Figure 6.2 Data Flow Diagram

4
5
 CHAPTER-7
OUTPUT SCREEN AND WORKING

Figure 7.1 Login Page

Figure 7.2 Sign Up Page

6
 Figure 7.3 Search the
existing user

Figure 7.4 Realtime Chatting

Interface
7
Figure 7.5 Create Group Chat

8
9
 Chapter-8
CONCLUSION

In conclusion, Web-based chatting applications represent a pivotal solution for instantaneous, versatile,
and accessible communication. Offering real-time messaging, cost-effectiveness, and a range of
communication formats, these platforms foster collaboration, privacy, and global connectivity. Their
ability to streamline interactions across devices and facilitate group collaboration underscores their
significance in modern-day communication landscapes.

Here are some of the key benefits of using the web based chatting application:

 Instant Communication: Enables real-time messaging for swift interactions.

 Accessibility: Available across devices, accessible from anywhere with internet.
 Cost-Effective: Often free or low-cost compared to traditional communication methods.
 Versatility: Supports various formats like text, images, voice, and video.
 Group Collaboration: Facilitates teamwork and networking via group chats.
 Search and Reference: Easy access to past conversations and shared files.
 Privacy Measures: Provides security features like encryption and privacy controls.

10
 REFERENCES

1. Mongo DB:
 https://docs.mongodb.com/ecosystem/drivers/
 https://www.guru99.com/what-is-mongodb.html

2. ExpressJS:
 https://expressjs.com/en/guide/routing.html
 https://www.javatpoint.com/expressjs-tutorial

3. ReactJS:
 https://reactjs.org/docs/getting-started.html
 https://www.javatpoint.com/reactjs-tutorial
 https://www.tutorialspoint.com/reactjs/reactjs_overview.html

4. NodeJS:
 https://nodejs.org/en/docs/
 https://www.javatpoint.com/nodejs-tutorial

5. WebSocket:
 https://yellow.systems/blog/guide-to-the-chat-architecture

6. Rest API:
 https://www.toptal.com/nodejs/secure-rest-api-in-nodejs

11
 APPENDIX-1 GLOSSARY OF TERMS

(In alphabetical order)

A
Authentication: The secure process of verifying and managing user identities to control access.

B
Backend( Server- Side) : The core of the application handling server logic, API requests , and
database interactions.

C
Chat History: A comprehensive log capturing past user conversation, offering insights and
reference.

D
Database( Mongo DB): The NoSQL database storing user profiles, messages, and other essential
data.

E
Express.js: A robust web application framework for Node.js simplifying backend development.

F
Frontend (Client-Slide): The user interface layer, responsible for the visual and interactive
elements.

N
Node.js: A JavaScript runtime environment executing server-side code, integral to Mern Stack.

12
R
Real-time Communication: Facilitating instantaneous message delivery and live updates
between users.

S
Socket.io: A powerful library enabling real-time , bidirectional communication for interactive
features.

U
User Interface: The graphical layout and design elements influencing user interaction.

V
Version Control ( Git ): A system for tracking changes in the source code, ensuring collaboration
and code integrity.

2
The Web-Based Chatting Application on the MERN stack is designed to create a dynamic and
user-friendly platform for real-time communication. Utilizing MongoDB for data storage,
Express.js and Node.js for server-side development, and React for the frontend, the project
focuses on implementing key features such as secure user authentication, real-time messaging
with WebSocket technology, multimedia sharing, user profiles, and responsive design.

The application aims to provide a seamless and interactive chatting experience, emphasizing
security, scalability, and a modern user interface.