PROJECT REPORT ON

CHAT APPLICATION USING

REACT NATIVE

1
 PROJECT LAB REPORT AT
QUANTUM UNIVERSITY
ROORKEE, INDIA

Submitted in partial fulfilment of the requirements of Bachelor’s

of Technology in Computer Science Engineering

Submitted by Q ID

Ishak Gauri 22030522

Pratiksha Singh 22030508

Aayush Kumar Jha

Aayush Chaudhary 22030468

2
 QUANTUM UNIVERSITY
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
ROORKEE, INDIA

CERTIFICATE

This is to certify that the project report entitled “CHAT APPLICATION” being submitted by
Ishak Gauri, Pratiksha Singh, Aayush Kumar Jha and Aayush Chaudhary in partial fulfilment
for the award of the Degree of Bachelor’s of Technology in Computer Science and
Engineering to the Quantum University, Roorkee a sare cord of Bonafide work carried out by
these students under my guidance and supervision.

Project Supervisor
Asst. Prof Manoj PAL
Department of Computer Science
And Engineering, Roorkee, India

3
 DECLARATION

I hereby declare that the project entitled “Chat Application” submitted for the Bachelor’s of
Computer Science and Engineering is my original work and the project has not formed the
basis or submitted for the award of any degree, diploma, or any other similar titles in any
college/ institute / university.

Members: Ishak Gauri, Pratiksha Singh, Aayush Jha, Aayush Chaudhary

Signature:

Place:
Date:

4
 ACKNOWLEDGMENT

We would like to express my sincere thanks to Asst. Prof Manoj Pal, for his valuable
guidance and support in completing our project. We would also like to express our gratitude
towards our department for giving us this great opportunity to do a project on “Chat
Application”.

Your valuable guidance and suggestions helped us in various phases of the completion of
this project. We will always be thankful to you in this regard.

5
 ABSTRACT

Chat applications enable real-time communication through text, audio, or video, connecting
multiple users via a server-client architecture. This project focuses on building a secure
client-server-based mobile chat application supporting features like real-time messaging,
cross-platform compatibility, and user status tracking (online/offline).
The proposed system includes friendship requests, secure key exchange for session initiation,
and end-to-end message encryption, ensuring privacy and protection against unauthorized
access.
Additionally, the system prioritizes fast message transfer and local storage security. The
project also evaluates the application's performance and security to enhance user experience
and data protection.

6
 TABLE OF CONTENTS

Certificate
Declaration
Acknowledgment
Abstract
Chapter: 1 Introduction
Chapter: 2 Objectives of the project
Chapter: 3 SDLC
3.1 Project Planning
3.2 Requirements
3.3 Design
3.3.1 DFD (Data Flow Diagram)
3.3.2 ERD (Entity Relationship Diagram)
Chapter: 4 Needs of React Native for the Chat Application
4.1 Coding:
4.1.1 App.js
4.1.2 App config.js
4.1.3Firebase.js
Chapter: 5 Snapshots of App
Fig 5.1.1 Login page
Fig 5.1.2 Signup page
Fig 5.1.3 Chats page
Fig 5.1.4 Users page
Chapter: 6 Conclusion
Chapter: 7 Future Work

7
Chapter 1

Introduction
Communication is the cornerstone of human interaction, and traditional methods such as
emails, phone calls, and text messages have been integral to personal and professional
exchanges for decades. However, these methods often lack the immediacy and accessibility
required in today's fast-paced world. The introduction of chat applications for mobile web has
revolutionized the way people connect and collaborate.
This project explores the development and utility of a mobile web-based chat application as a
modern alternative to traditional communication methods. It highlights the app's ability to
offer real-time messaging, cross-platform compatibility, and enhanced user engagement,
which significantly streamline interactions compared to conventional tools.
By addressing limitations like delayed responses and fragmented communication channels,
the chat application serves as a comprehensive solution for seamless and efficient exchanges
in professional and personal contexts.

8
 Chapter 2

Objectives of the Project

1. Develop a responsive mobile web-based chat application.
2. Enable real-time communication with instant messaging features.
3. Enhance user engagement with interactive elements like notifications and read
receipts.
4. Ensure cross-platform compatibility for consistent performance.
5. Implement a scalable and secure architecture for reliable usage.
6. Provide a modern alternative to traditional communication methods.
7. Support collaboration through group chats and multimedia sharing.

This project aims to deliver an efficient and user-friendly communication

platform leveraging modern technology.

9
 Chapter 3

SDLC
The Software Development Life Cycle (SDLC) is a structured process used for developing
software applications. It provides a systematic approach to ensure the efficient planning,
design, development, testing, deployment, and maintenance of software. The SDLC
framework enhances project management and ensures high-quality software delivery by
reducing risks and errors.

Phases of SDLC
1. Project Planning
2. Gathering Requirements & Analysis
3. Design
4. Coding or Implementation
5. Testing & Deployment
6. Maintenance

3.1 Project Planning

The login and signup features for the chat application will be developed using React Native
and Firebase. The first week will focus on gathering requirements and setting up Firebase
Authentication. In the second week, React Native forms for login/signup will be created with
input validation. Firebase Authentication will be integrated in week three, and the final week
will involve testing for secure user authentication and error handling. The goal is to ensure a
smooth and secure user experience.

10
3.2 Requirements

Minimum Hardware Requirements:

 Operating System: Android, iOS, Windows, macOS, or Linux.
 Processor: The minimum processor requirement for mobile devices is a quad-core
processor (e.g., Snapdragon 600 series or A10 Bionic chip) for optimal performance
and 800MHZ Intel Pentium III.
 Memory: 512 MB
 Disk Space: 750 MB of free disk space

Software Requirements:
The software requirements for the chat application include React Native, Firebase SDK,
Node.js, Android Studio/Xcode (for mobile development), and VS Code (for desktop
development). Additionally, a Firebase account for authentication and database management
is required.

3.3 Design

3.3.1 DFD (Data Flow Diagram)

The data flow diagram (DFD) for the React Native chat app shows how data moves between
the user interface, Firebase Authentication, and Firestore database. User input, like login
details or chat messages, is sent to Firebase for authentication and storage, with real-time
updates pushed back to the app interface. The DFD illustrates the flow of data between the
app, Firebase backend, and users.

11
DFD for Chat Application

Fig 3.3.1.1 DFD

12
3.3.2 ERD (Entity Relationship Diagram)
An Entity-Relationship (ER) Diagram visually shows how different entities in a system relate
to each other. In a chat application:
 Entities: Represent objects like User, Message, and Chatroom.
 Attributes: Characteristics of entities, e.g., User has user-id, username, and email.
 Relationships: How entities are connected, e.g., User sends Messages, and Messages
belong to a Chatroom.

Typical relationships:
 User-Message: One user sends multiple messages (one-to-many).
 Message-Chatroom: One message belongs to one chat room (many-to-one).
 User-Chatroom: One user can join multiple chat rooms (many-to-many).

Fig 3.3.2.1 Diagram

13
Chapter 4

Needs of React Native for the Chat Application

React Native is ideal for the chat application as it enables cross-platform development,
allowing a single codebase for both Android and iOS. It supports real-time communication
through technologies like Firebase for message synchronization and user authentication. The
framework also allows fast development with its hot-reloading feature and has strong
community support and tools for integration.
Advantages of React Native
1. Cross-Platform Compatibility: One codebase for both Android and iOS, saving time
and effort.
2. Reusable Code: Code is shared between platforms, speeding up development and
maintenance.
3. Live Updates: Allows instant updates without app store resubmission.
4. Strong Ecosystem: Extensive libraries and tools, including Firebase integration for
real-time features.
5. Native Performance: Near-native performance with the option to implement native
modules when needed.
Disadvantages of React Native
1. Complex Native Features: Custom native features might require additional native
development.
2. Performance Limitations: For resource-heavy tasks, React Native may not match
native performance.
3. Limited Customization: Certain UI/UX customizations may be limited compared to
fully native apps.
4. Dependency on Third-Party Libraries: Some libraries may not be as stable or mature
as in native development.
5. Inconsistent Updates: Rapid framework changes could lead to compatibility issues.

14
4.1 Coding

4.1.1 App.js

import React, { useState, createContext, useContext, useEffect } from "react"; import

{ NavigationContainer } from "@react-navigation/native"; import { createStackNavigator }
from "@react-navigation/stack"; import { View, ActivityIndicator } from 'react-native';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import
{ Ionicons } from '@expo/vector-icons'; import Chats from './screens/Chats';import Settings
from "./screens/Settings"; import { colors } from "./config/constants"; import SignUp from
"./screens/SignUp"; import Chat from "./screens/Chat"; import { onAuthStateChanged } from
'firebase/auth';import { auth } from './config/firebase'; import Profile from "./screens/Profile";
import Login from "./screens/Login"; import Users from "./screens/Users"; import About
from "./screens/About"; import Account from "./screens/Account"; import Help from
"./screens/Help"; import Group from "./screens/Group"; import ChatInfo from
"./screens/ChatInfo"; import ChatHeader from "./components/ChatHeader";
import ChatMenu from "./components/ChatMenu"; import { MenuProvider } from"react-
native-popup-menu"; import{ AuthenticatedUserProvider, AuthenticatedUserContext } from
"./contexts/AuthenticatedUserContext";import { UnreadMessagesProvider,
UnreadMessagesContext } from "./contexts/UnreadMessagesContext"; const Stack =
createStackNavigator(); const Tab = createBottomTabNavigator(); const TabNavigator = ()
=> {
const { unreadCount, setUnreadCount } = useContext(UnreadMessagesContext); return
(<Tab.NavigatorscreenOptions={({ route }) => ({tabBarIcon: ({ focused, color, size }) =>
{let iconName = route.name === 'Chats' ? 'chatbubbles' : 'settings';iconName += focused ? '''-
outline'; return <Ionicons name={iconName} size={size} color={color} />;
},tabBarActiveTintColor: colors.primary, tabBarInactiveTintColor: 'gray', headerShown: true,
presentation: 'modal',})}
<Tab.Screen name="Chats" options={{ tabBarBadge: unreadCount > 0 ? unreadCount :
null }}> {() => <Chats setUnreadCount={setUnreadCount} />}</Tab.Screen> <Tab.Screen
name="Settings" component={Settings} /> </Tab.Navigator> ); }; const MainStack = () =>
(<Stack.Navigator> <Stack.Screen name="Home" component={TabNavigator} options={{
headerShown: false }} /> <Stack.Screen name="Chat" component={Chat}
options={({ route }) => ({headerTitle: () => <ChatHeader
chatName={route.params.chatName} chatId={route.params.id} />, headerRight: () =>
( <View style={{ flexDirection: 'row', alignItems: 'center' }}> <ChatMenu
chatName={route.params.chatName} chatId={route.params.id} /> </View> ),})} />
<Stack.Screen name="Users" component={Users} options={{ title: 'Select User' }} />
<Stack.Screen name="Profile" component={Profile} /> <Stack.Screen name="About"
component={About} /> <Stack.Screen

15
name="Help" component={Help} /> <Stack.Screen name="Account" component={Account}
/> <Stack.Screen name="Group" component={Group} options={{ title: 'New Group' }} />
<Stack.Screen name="ChatInfo" component={ChatInfo} options={{ title: 'Chat
Information' }} /> </Stack.Navigator>); const AuthStack = () => ( <Stack.Navigator
screenOptions={{ headerShown: false }}> <Stack.Screen name='Login' component={Login}
/> <Stack.Screen name='SignUp' component={SignUp} /> </Stack.Navigator> ); const
RootNavigator = () => { const { user, setUseruseContext(AuthenticatedUserContext); const
[isLoading, setIsLoading]= useState(true); useEffect(() => { const unsubscribeAuth =
onAuthStateChanged(auth, async authenticatedUser =>{setUser(authenticatedUser || null);
setIsLoading(false);}); return unsubscribeAuth; }, []); if (isLoading) {return (<View
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <ActivityIndicator
size='large' /> </View>) ; } return (<NavigationContainer>{user ? <MainStack /> :
<AuthStack />}</NavigationContainer>);};const App = () => {return (<MenuProvider>
<AuthenticatedUserProvider> <UnreadMessagesProvider> <RootNavigator />
</UnreadMessagesProvider></AuthenticatedUserProvider></MenuProvider>)}; export
default App;

4.1.2 App config.js

import 'dotenv/config'; export default {"expo": {"name": "react-native-chat",
"slug": "react-native-chat", "version": "1.0.0", "orientation": "portrait","icon":
"./assets/icon.png", "userInterfaceStyle": "light", "splash": { "image": "./assets/splash.png",
"resizeMode": "contain", "backgroundColor": "#ffffff"},"assetBundlePatterns": ["**/*" ],
"ios": {"supportsTablet": true }, "android": { "adaptiveIcon": { "foregroundImage":
"./assets/adaptive-icon.png", "backgroundColor": "#ffffff" },"package":
"com.ctere1.reactnativechat"}, "web": { "favicon": "./assets/favicon.png" }, "extra":
{ "apiKey": "AIzaSyB4jclqifUKo8hR4haA7a06HYa5sRkKfTs", "authDomain": "react-
native-chat-3c2cc.firebaseapp.com", "projectId": "react-native-chat-
3c2cc","storageBucket":"react-native-chat-3c2cc.firebasestorage.app","messagingSenderId":
"745254154522","appId":
"1:745254154522:web:51f64c869ae9b94835bca3","measurementId": "G-DSSZP7MPRF",
"eas": { "projectId": "3ec666c0-7ba9-413d-8110-d5fd5fd4005f" // Replace this with your
actual EAS Project ID } } }}

16
4.1.3Firebase.js
// config/firebase.js
import 'dotenv/config'; // Ensure you load the .env file // import { initializeApp } from
"firebase/app"; import { getAnalytics } from "firebase/analytics"; import { getAuth } from
"firebase/auth"; // Firebase configuration from .env file// const firebaseConfig = { apiKey:
process.env.EXPO_PUBLIC_API_KEY, authDomain:
process.env.EXPO_PUBLIC_AUTH_DOMAIN, databaseURL: `https://$
{process.env.EXPO_PUBLIC_PROJECT_ID}.firebaseio.com`,projectId:process.env.EXPO_
PUBLIC_PROJECT_ID,storageBucket:process.env.EXPO_PUBLIC_STORAGE_BUCKET,
messagingSenderId:process.env.EXPO_PUBLIC_MESSAGING_SENDER_ID,appId:proces
s.env.EXPO_PUBLIC_APP_ID,measurementId:
process.env.EXPO_PUBLIC_MEASUREMENT_ID,};// Initialize Firebase// const app =
initializeApp(firebaseConfig);// Initialize Firebase services// const auth = getAuth(app); const
analytics = getAnalytics(app); // Export Firebase services for use elsewhere in your appexport
{ auth, analytics };

17
Chapter 5

5.1 Snapshots of App

Fig 5.1.1 Login page Fig 5.1.2 Signup page

18
Fig 5.1.3 Chats page Fig 5.1.4 Users page

19
Chapter 6
Conclusion
The chat application serves as a robust platform for seamless communication, connecting
users through efficient and interactive features. By incorporating essential entities such as
users, messages, and chat rooms, it ensures an organized and user-friendly experience.
With a well-structured foundation illustrated by the Entity-Relationship (ER) diagram, the
application is equipped to support scalable and secure communication. Its design prioritizes
functionality, user engagement, and adaptability to modern needs.
Looking ahead, the integration of advanced technologies like AI, enhanced security measures,
and cross-platform compatibility will enable the application to evolve further. By
continuously innovating, the platform can meet diverse user demands and remain relevant in
a dynamic digital landscape.
The chat application's future promises enhanced usability and a broader reach, making it an
invaluable tool for both personal and professional communication.

20
Chapter 7
Future Work
The chat application holds significant potential for growth and evolution, ensuring its
relevance in an ever-changing technological landscape. Below are some potential avenues for
development:

1. Advanced Features: Add file sharing, voice notes, and video messaging.
2. AI Integration: Enable smart replies, sentiment analysis, and personalized
recommendations.
3. Enhanced Security: Introduce end-to-end encryption and biometric authentication.
4. Cross-Platform: Ensure seamless functionality across web, mobile, and desktop.
5. Customizations: Allow personalized themes and chat room settings.
6. Global Reach: Support multiple languages for diverse user bases.
7. Third-Party Integration: Connect with calendars and task managers.
8. Scalability: Optimize for large communities and peak usage.
9. Real-Time Analytics: Offer insights to monitor and enhance chat activities.
10. AR Features: Include immersive virtual chat environments.
These advancements will keep the application competitive and future-ready.

21