A

Report of Miniproject
On
A chat application in react js with firebase using Netlify
Submitted in Partial Fulfillment of the Requirements of University of
Mumbai for the Degree of
Bachelor of Engineering (TE. Computer Engineering)
BY:
36. SAGAR PRASAD
32.Anushka patil
33.RASHMI PATIL
29. YASH MATHRE
27.SAYALI NAGVEKAR
For Subject
Miniproject
Under Guidance
Prof. Babeetta Bhagat

Department of Computer Engineering

Vishwaniketan’s Institute of Management, Entrepreneurship and
Engineering Technology, Khalapur, Raigad
University of Mumbai
Academic Year: 2022-23
 Chapter 1
INTRODUCTION
1. INTRODUCTION

1.1 Background:

Netlify is a web development platform that provides developers with a modern workflow
to build, deploy, and manage high-performance websites and applications. Founded in
2014, Netlify is a cloud-based platform that has quickly become a popular choice among
developers for its ease of use and powerful features.

Netlify's platform is built around the JAMstack (JavaScript, APIs, and Markup)
architecture, which enables developers to create fast and secure websites and
applications that can scale easily. The platform offers a range of tools and services,
including continuous deployment, automatic SSL encryption, form handling, and
serverless functions, all of which are designed to make the development process as
streamlined and efficient as possible.

One of the key features of Netlify is its ability to integrate with a variety of front-end
frameworks and content management systems (CMS), including React, Vue.js, Gatsby,
and WordPress. This allows developers to leverage their existing skills and tools while
taking advantage of the benefits of the JAMstack architecture.

Netlify has gained a strong following in the web development community, with over 1
million developers and businesses using the platform to build and deploy their websites
and applications. The company has also received recognition from industry analysts,
including Gartner and Forrester, for its innovation and market leadership in the web
development space.
1.2 Motivation:

The motivation behind this project is to provide a simple and cost-effective solution for
hosting static websites. Traditional web hosting solutions can be expensive and often
require significant technical expertise to set up and maintain. By using Netlify, users can
host their websites at a fraction of the cost and without the need for complex server
configurations.

The need for reliable and secure file storage and sharing has become increasingly important
for businesses and individuals alike. With the growing amount of digital data being
created and stored, it is essential to have a storage solution that is scalable, secure, and
cost-effective. Netlify provides all of these features and more, making it an ideal
solution for anyone looking to host their files in the cloud.

The use of cloud-based storage solutions like Netlify has become a best practice in the
industry. By leveraging the power of the cloud, businesses and organizations can reduce
their IT infrastructure costs, increase their flexibility, and improve their disaster recovery
capabilities. This project will help readers to learn how to implement a cloud-based file
hosting solution using Netlify and stay current with industry trends.
 Chapter 2

LITERATURE SURVEY
Literature Survey

[1]"Real-Time Chat Application using React JS and Firebase" by T. R. Patil and R. N.

Mohanty.
This paper describes the design and implementation of a real-time chat application using
React JS and Firebase. The authors discuss the architecture, features, and performance of
the application and highlight the benefits of using Firebase for real-time data
synchronization.

[2]"Performance Comparison of React JS and Angular JS for Chat Application

Development" by A. H. M. Kamal and S. M. Fattah.
This paper compares the performance of React JS and Angular JS for developing a chat
application. The authors evaluate the two frameworks based on metrics such as response
time, memory usage, and CPU utilization and provide recommendations for choosing the
best framework for chat application development.

[3]"Security Analysis of Chat Applications using Firebase Cloud Messaging" by M.

Abdessalem, R. Fakhfakh, and N. Yahyaoui.
This paper examines the security of chat applications using Firebase Cloud Messaging. The
authors analyze the security features of Firebase and identify potential vulnerabilities in the
messaging system. They also propose solutions to enhance the security of chat applications
using Firebase.
2. LITERATURE SURVEY

2.1 Basic Technologies:

React JS: A popular JavaScript library for building user interfaces and web applications.

Firebase: A cloud-based platform provided by Google that offers a range of backend services,
such as real-time database, authentication, and hosting, to build and scale web and mobile
aplications.

Netlify: A cloud-based platform for building, deploying, and managing web applications and
sites, which supports React JS and Firebase.

Real-time database: A type of database that allows users to store and retrieve data in real-time,
often used in chat applications to enable real-time messaging and updates.

Authentication: A process that verifies the identity of a user, often used in chat applications to
secure access to chatrooms and user data.

Hosting: A service that allows users to deploy and serve their web application or site on the
internet, often used in chat applications to enable easy access to the chatrooms.

Cloud functions: A feature that enables users to write and deploy server-side code in response
to events in their application, often used in chat applications to process messages and trigger
actions.

Chatroom ID: A unique identifier assigned to each chatroom, which allows users to join or
leave specific chatrooms.

User ID: A unique identifier assigned to each user, which allows the application to authenticate
and track user activity.

Chat message component: A component in React JS that renders a message in the chatroom,
including the sender's name, message content, and timestamp.
2.2 Existing System:

The existing system present in a chat application built using React JS with Firebase and hosted
on Netlify typically includes the following components:

User interface: The front-end of the chat application built using React JS, which includes
components for displaying chat messages, user profiles, chatrooms, and other UI elements.

Real-time database: The Firebase real-time database, which stores the chat messages, user data,
and other application data. The real-time database enables real-time messaging and updates, as
well as secure user authentication and authorization.

Authentication: Firebase Authentication, which is used to handle user authentication and

authorization. Firebase Authentication provides secure sign-in methods, such as email/password
and Google sign-in, and also supports custom authentication methods.

Cloud functions: Firebase Cloud Functions, which is used to write server-side code triggered
by events in the application. Cloud Functions can perform tasks such as sending notifications
and processing messages.

Netlify hosting: The chat application is hosted on Netlify, which provides a secure and
scalable hosting solution for the React JS application.

API integrations: The chat application may integrate with other APIs or third-party services,
such as chatbots or analytics tools, to enhance the functionality of the application.

Overall, this system architecture enables real-time messaging and updates, secure user
authentication and authorization, and scalable hosting and deployment, making it an ideal
solution for building a chat application in React JS with Firebase using Netlify.
2.3 Problem Statement:

The problem statement for a chat application in React JS with Firebase using Netlify could
be to create a secure, scalable, and real-time messaging platform that enables users to
communicate with each other seamlessly. The chat application should be easy to use, fast,
and reliable, with a user-friendly interface that allows users to join or create chatrooms, send
and receive messages, and view their chat history. The application should also support
multiple users and have robust security features to protect user data and prevent unauthorized
access. Additionally, the application should be easy to deploy, manage, and scale, with
support for API integrations and third-party services. The main challenge would be to ensure
that the application is fast, reliable, and responsive, even with a large number of users, and
to provide a seamless user experience that encourages users to engage with the platform.
 Chapter 3

REQUIREMENT GATHERING
3.1 Software and Hardware Requirements

1. Hardware Requirement:

• Processor – i3/i5 or higher RAM: 4 GM or higher.

• Hard Disk – 160 GB or higher.

2. Software Requirement:

• Platform: Window’s 10 or 11.

• Web Browser: Chrome, Firefox, Opera, etc.
• Used: React, Firebase, Netlify.
 Chapter 4
PLAN OF PROJECT
4.1 Proposed System Architecture:

Figure 4.1 DFD Level 0

DFD level 0 shows the Flow of our website. It shows how user access our website and
to store their data. And how should they secure their data.
 Data Flow Diagram Level 1

Figure 4.2 DFD Level 1

This DFD shows the main functions of a chat application, including login, sign up, user
profile, chat, group chat, and settings. The user interacts with the application through the
client, which communicates with the Firebase database hosted on the cloud. Firebase
manages user authentication, stores user profiles and chat messages, and provides
functionality for creating and managing groups. Netlify is used to host the client-side web
application, which communicates with the Firebase database.
 A chat application in react js with firebase using Netlify

4.2 Methodology:

Requirements gathering: The first step is to gather the requirements for the chat application,
which includes the features, functionalities, and user interface. This step involves
understanding the business goals and user needs, and developing a clear understanding of what
the application should do and how it should look.

System design: The second step is to design the system architecture, which includes the front-
end, back-end, and hosting components. This step involves selecting the appropriate tools and
technologies, such as React JS, Firebase real-time database, and Netlify hosting, and designing
the system architecture to ensure scalability, security, and performance.

Front-end development: The third step is to develop the front-end of the chat application using
React JS. This step involves developing the user interface, including components for displaying
chat messages, user profiles, chatrooms, and other UI elements. The front-end development
should also ensure that the application is responsive, easy to use, and visually appealing.

Back-end development: The fourth step is to develop the back-end of the chat application using
Firebase. This step involves setting up the Firebase real-time database, configuring Firebase
Authentication, and implementing server-side code using Firebase Cloud Functions. The back-
end development should ensure that the application is secure, scalable, and supports real-time
messaging and updates.

Integration testing: The fifth step is to test the integration between the front-end, back-end, and
hosting components. This step involves testing the functionality of the application, ensuring
that it works as expected and that there are no bugs or issues.

Deployment: The final step is to deploy the chat application on Netlify hosting. This step
involves configuring the hosting environment, setting up SSL certificates, and deploying the
application to the live server. The deployment should ensure that the application is available to
users and that it can be easily scaled and managed.
 A chat application in react js with firebase using Netlify

Chapter 5
RESULT ANALYSIS
 A chat application in react js with firebase using Netlify

5.1 Results and Discussion

Figure 5.1
First user has create account on the Netlify to host the website where the the user can sign up
using his email id and password.

Figure 5.2
A user can login to the Netlify to use the services where the the user can sign up using his email
id and password.
 A chat application in react js with firebase using Netlify

Figure 5.3
The homepage features a clean and modern design with a prominent header that displays the
Netlify logo, along with links to the company's product offerings.

This page shows the S3(Simple Storage Service) service of AWS. Here you can see more
information about S3.

Figure 5.4
The Sites menu in Netlify refers to the section of the Netlify dashboard where you can deploy a
new site.
 A chat application in react js with firebase using Netlify

Figure 5.5
The Deploys menu in Netlify is where you can manage and monitor the deployment of your website. Here's
an overview of the different sections within the Deploys menu

Figure 5.7

Click on Edit then you have to unblock public access to access a bucket.

Figure 5.6
The general settings section in Netlify allows you to configure various general settings for your website.
Here's an overview of the different settings you can configure in the general section.
 A chat application in react js with firebase using Netlify

Figure 5.7
To use the chat application a new user must register to the website first by selecting a name,email-
id,password and avatar.

Figure 5.8
A user can login in the chat application by using email and password if a user is already
registered.
 A chat application in react js with firebase using Netlify

Figure 5.9
In the login interface user can find other users using the search feature and chat with that user.

Figure 5.10
In the chat interface a user can chat with multiple people at a time and send them messages individually.
 A chat application in react js with firebase using Netlify

Chapter 6
CONCLUSION
CONCLUSION

In conclusion, a chat application built using React JS with Firebase and hosted on Netlify is
a powerful and scalable solution for creating a real-time messaging platform. This system
architecture enables secure user authentication and authorization, real-time messaging and
updates, and scalable hosting and deployment, making it an ideal solution for building a chat
application. The system can also be easily integrated with other APIs or third-party services
to enhance its functionality. Overall, a chat application built using React JS with Firebase
and hosted on Netlify provides a fast, reliable, and user-friendly way for users to
communicate with each other seamlessly.
 Chapter 7
REFERENCES
REFERENCES

1. T. R. Patil and R. N. Mohanty, " Real-Time Chat Application using React JS and
Firebase", International Journal of Computer Applications, vol. 53, no. 4, pp.
19-22, 2012

2. A. H. M. Kamal and S. M. Fattah, " Performance Comparison of React JS and

Angular JS for Chat Application Development", 2013 17th International
Conference on Information Visualisation, pp. 1-3, 2013

3. M. Abdessalem, R. Fakhfakh, and N. Yahyaoui "Security Analysis of Chat

Applications using Firebase Cloud Messaging", 2017 IEEE Visualization in
Data Science (VDS), pp. 2-5, 2017