IPS Academy, Indore Institute of

Engineering and Science

(A UGC Autonomous Institute)
Department of Computer Science & Engineering-AIML

2024-25

A Mini Project Synopsis

“ ”Chatapp”

For the partial fulfillment for the award of the Bachelor of Technology (CSE-AIML) Degree by Rajiv
Gandhi Proudyogiki Vishwavidhyalaya, Bhopal.

Guided by: - Submitted by: -

Aniket Singh (0808CL221021)

Ayush Gupta (0808Cl221037)

Bharat Khatwani (0808Cl221040)

Page | 1
 Table of Contents

1. Problem & Solution Domain (1-2 Page)

2. Requirement Specification (Hardware and Software Requirement) (1 Page)

3. Expected Outcome (1 Page)

Page | 2
 Problem Statement and Solution Domain
● Problem Statement:
A full-stack real-time chat application “Chatapp” using React JS and Firebase. It
covers user authentication, chat functionalities, profile management, and image
uploads, along with responsive design. The application consisting of a user-
friendly interface and implementing features like message sending, user
searching, and managing chat data effectively.

● Solution Domain:

To build a full-stack real-time chat application like Chatapp using the technologies you
provided—React.js and Firebase—we need to structure the solution around the frontend,
backend, and additional tools for real-time communication and user experience. This
combination allows us to develop a scalable, secure, and highly interactive chat platform
with minimal backend infrastructure.

Frontend:
The frontend will be developed using React.js, a JavaScript library that provides a
component-based architecture. This will allow us to break down the interface into
reusable components, such as a chat window, user list, and profile management section.
React’s declarative nature makes it easy to handle dynamic data like real-time messages,
while efficiently updating the user interface with minimal re-rendering through its
virtual DOM. For managing the application’s state, we can use Redux or Context API,
depending on the complexity. In a chat application, the global state needs to track
current users, chat histories, message status, and real-time updates, making a state
management tool crucial for keeping the UI in sync.

Page | 3
 For styling, CSS or Styled Components will be used to style individual components.
This ensures each component can be styled modularly and reused across the app.
Additionally, frameworks like Tailwind CSS or Bootstrap will be used to build a
responsive design that works seamlessly on both desktop and mobile devices, which is
critical for a modern chat application. These frameworks provide pre-built classes and
grid systems, allowing the interface to adapt easily to different screen sizes.

Backend:
On the backend, Firebase acts as the backbone for user authentication, real-time data
storage, and file handling. Firebase Authentication will manage user registration and
login, supporting traditional email/password authentication as well as social login
options like Google or Facebook. This allows us to provide a secure and flexible
authentication system with minimal setup, while also allowing users to update their
profiles with custom display names and profile pictures.

For storing chat data, Firebase Firestore, a NoSQL real-time database, will handle all
messages and user data. Firestore is ideal for this use case because it supports real-time
listeners, which allow chat messages to be updated instantly across all user sessions
without manual refreshes. The database will be structured to store chat messages, user
profiles, and timestamps, ensuring that chats can be loaded dynamically, and message
history can be retrieved quickly. By leveraging Firestore’s automatic scalability, we can
ensure the application performs well, even as the number of users grows.

In addition, Firebase Cloud Storage will handle file uploads, allowing users to send
images in the chat or upload profile pictures. When an image is uploaded, it is stored
securely in Cloud Storage, and the URL is saved in Firestore alongside the chat
message. This ensures that the images can be retrieved efficiently and displayed in the
chat window without storing the actual media files in the database, which optimizes
performance.

Page | 4
 Additional Tools:
While Firebase’s built-in real-time capabilities via Firestore’s listeners handle most of
the real-time communication needs, we may use Axios or the Fetch API if there is a
need to integrate third-party APIs into the application. For example, if we want to
integrate a GIF search feature or pull external data into the chat application, Axios
would make it easier to handle HTTP requests and responses.

Although Node.js is not a core requirement for Firebase-powered applications, it may

still be introduced for custom backend logic using Firebase Cloud Functions. This is
useful for scenarios where custom business logic is required, such as handling complex
notifications, processing user data, or integrating with third-party services that go
beyond Firebase’s default offerings.

Page | 5
 Requirements Specification
1. Functional Requirements:
A. User Authentication and Management
 Sign Up
 Login/Logout
 User Profile
 Authentication Persistence

B. Chat Features:
 Real-time Messaging
 Search for Users
 Message Storage
 Send Images
 Notifications

C. Profile Management:
 Editable Profile

D. Real-time Syncing:
 Firestore Listeners

2. Non-Functional Requirements

A. Performance
 Real-time Performance
 Scalability

B. Security
 Data Security
 Authentication Validation
 Secure Image Uploads

Page | 6
 C. Responsiveness:
 Cross-Device Compatibility
 Responsive UI

D. User Experience:
 User-Friendly UI
 Message Readability

3. Technical Requirements:
 React.js
 Redux/Context API
 Firebase Authentication
 Firebase Firestore
 Firebase Cloud Storage
 Tailwind CSS or Bootstrap
 Axios or Fetch API

Page | 7
 Expected Outcome

 Real-time chat functionality with instant message updates.

 Secure user authentication with email, password, and social login options.
 Editable user profiles with image uploads.
 Ability to search and chat with other users.
 Support for sending text messages and images.
 Responsive design for mobile and desktop devices.
 Seamless synchronization of chat data across all user sessions.
 Scalable backend with efficient data handling using Firebase.
 User-friendly interface with easy navigation and chat management.
 Reliable and secure storage of chat messages and media files.

Page | 8