An Internship Report On

“FULL STACK WEB DEVELOPMENT”

Submitted in Partial fulfillment for the award of degree of

Bachelor of
Engineering in
COMPUTER SCIENCE AND ENGINEERING
Submitted by
ADITHI K M
1MJ20CS005

Internship carried out at

“INVENTERON TECHNOLOGIES”
Bangalore, Karnataka

INTERNAL GUIDE EXTERNAL GUIDE

Mrs. Swasti Sudha Mr. Mohammad Misbah
Assistant Professor, Dept. of CSE Software Eng. Trainer
MVJ College of Inventeron Technologies
Engineering Bangalore-01
Bangalore-67

(An Autonomous Institute)

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
MVJ COLLEGE OF ENGINEERING
BANGALORE-67
2023-24
 (An Autonomous Institute)
(Affiliated to Visvesvaraya Technological University, Belagavi
Approved by AICTE, New Delhi, Recognized by UGC with 2(f) & 12(B) status
Accredited By NBA and NACC.) Whitefield, Near ITPB, Bangalore-67and NACC.)
Whitefield, Near ITPB, Bangalore-67

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE
This is to certify that the Internship report entitled “FULL STACK WEB
DEVELOPMENT” is a bonafide work carried out by ADITHI K M (1MJ20CS005) in
partial fulfillment for the award of the degree of Bachelor of Engineering in Computer
Science and Engineering of Visvesvaraya Technological University, Belagavi during the
academic year 2023 – 2024. It is certified that all the corrections/suggestion indicated for
Internal Assessment have been incorporated in the report. The Internship report has been
approved as it satisfies the academic requirements in respect of Project work prescribed for
the said degree.

Signature of External Guide Signature of Internal Guide Signature of the HOD

Mr. Mohammed Misbah Mrs. Swasti Sudha Dr.Kiran Babu T S
Software Eng. Trainee Assistant Professor, HOD
Inventeron Technologies Department of CSE Department of CSE

Signature of Internal Examiner Signature of External Examiner

 (An Autonomous Institute)
(Affiliated to Visvesvaraya Technological University, Belagavi
Approved by AICTE, New Delhi, Recognized by UGC with 2(f) & 12(B) status
Accredited By NBA and NACC.) Whitefield, Near ITPB, Bangalore-67and NACC.)
Whitefield, Near ITPB, Bangalore-67

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

DECLARATION

I, ADITHI K M, hereby declare that the Internship titled “FULL STACK WEB
DEVELOPMENT” embodied in this report has been carried out by me during VIII Semester
of B.E degree at MVJCE Bangalore affiliated to VISVESVARAYA TECHNOLOGICAL
UNIVERSITY, BELGAUM. The work embodied in this report is original and it has not been
submitted in partor full for any other degree in any University.

ADITHI K M
1MJ20CS005

Date:
Place: BANGALORE
INTERNSHIP CERTIFICATE
 ACKNOWLEDGEMENT

The satisfaction and euphoria that accompany a successful completion of any task would be
incomplete without the mention of the people who made it possible, success is the epitome of
hard work and perseverance, but steadfast of all is encouraging guidance.

So, with gratitude, I acknowledge those whose guidance and encouragement served as
beacons of light and crowned our effort with success.

I am thankful to our Management of MVJ College of Engineering for being a constant

inspiration and providing all the facilities that were needed throughout the course.

I am thankful to our Principal Dr. Suresh Babu, MVJCE, Bengaluru and our Vice
Principal Dr. Brindha M , MVJCE, Bengaluru for their encouragement and support
throughout the course.

I would also like to express my sincere gratitude to Mr. Kumar, Controller of

Examinations, MVJCE, Bengaluru, for his persistent guidance.

I consider it a privilege and honor to express my sincere gratitude to Dr. Kiran Babu T S,
HOD of CSE Department for his constant encouragement and all the support provided
during this course.

I convey my sincere thanks to my guide Ms. Anita Mithapalli, Assistant Professor,

Department of CSE for her valuable guidance throughout the tenure of this course, and
whose support andencouragement made this work possible.

It’s also a great pleasure to express my deepest gratitude to all my faculty members of my
department for their cooperation and constructive criticism offered, which helped me a lot
during my project work.

Finally, I would like to thank all my family members and friends whose encouragement and
support was invaluable.

Thanking you,

i
 ABSTRACT

This internship at Inventeron Technologies involves Web programming project based on full
stack Web development with React-JS, Html, CSS, Java script, firebase-console in the
backend. Full-Stack development project refers to the end-to-end application software
development, including the front end and back-end. This project involves a real-time chatting
messenger application where the term “Chat” refers to the process of communicating,
interacting and/or exchanging messages between two users online. This chat application has
basic two components firebase and the frontend client. Clients who want to chat with each
other connect to the firebase at the backend which provides Authentication with email and
password along with Firestore database and Storage mechanism. The chat application we have
created will be more like a peer to peer chat.so this means. Every message is broadcasted to
every connected chat user. In recent years, chat applications have evolved and made a major
change in social media because of their distinctive features that attract audiences. It provides
real-time messaging capabilities and offers different services including, exchange text
messages, images uploads, profile updates and simple UI -login and registration mechanism.

ii
 CONTENTS

Acknowledgement i
Abstract ii
CHAPTER 1.............................................................................................................................1
Introduction..................................................................................................................1-3
CHAPTER 2..........................................................................................................................2-6
About the Organization..................................................................................................2
2.1 Introduction..........................................................................................................4
2.2 History..................................................................................................................4
2.3 Vision...................................................................................................................4
2.4 Mission.................................................................................................................4
2.5 Core Values.........................................................................................................5
2.6 Goals...................................................................................................................5
2.7 Services................................................................................................................5
2.7.1 Embedded Applications development.......................................................5
2.7.2 Web design and development....................................................................5
2.7.3 IT Service...................................................................................................5
2.7.4 PCB design................................................................................................5
2.7.5 ERP.............................................................................................................5
2.7.6 IT Training................................................................................................6
2.7.7 Online Web and Multimedia......................................................................6
2.7.8 Cloud Computing.......................................................................................6
2.7.9 Business Solutions.....................................................................................6
CHAPTER 3..........................................................................................................................5-9
About the Department....................................................................................................5
3.1 Introduction..........................................................................................................5
3.2 Description........................................................................................................5-9
CHAPTER 4......................................................................................................................10-11
Internship Domain........................................................................................................10
4.1 Introduction........................................................................................................10
4.2 Company Domain.........................................................................................10-11
4.3 Course Objectives...............................................................................................11
CHAPTER 4......................................................................................................................12-15
System Design................................................................................................................12
 CONTENTS
5.1 Existing System.................................................................................................12
5.2 Description...................................................................................................12-14
5.3 Outline................................................................................................................14
5.4 Reasons to use React.JS...............................................................................14-15
5.5 Objectives and Features....................................................................................15
CHAPTER 6...........................................................................................................................16
System Requirements...................................................................................................16
6.1 Software requirements.......................................................................................16
6.2 Hardware requirements......................................................................................16
6.3 React-Messenger (Private-Chat) components...................................................16
CHAPTER 7......................................................................................................................17-21
Implementation............................................................................................................17
7.1 Commands Deployed.........................................................................................17
7.2 Core Functional Elements............................................................................17-18
7.3 Screenshots....................................................................................................18-21
CHAPTER 8............................................................................................................................22
Data Flow Diagram.......................................................................................................22
Future Aspects..........................................................................................................23-24
CONCLUSION.......................................................................................................................25
REFERENCES.......................................................................................................................26
 TABLE OF FIGURES

Fig no. Name Page no

1 Inventeron Technologies logo 06
2 React-Messenger (Private-chat) components 16
3 Screenshots: A) Frontend 18-20

B) Backend 20-21
4 Data Flow Diagram 22
 WEB DEVELOPMENT

CHAPTER -1

INTRODUCTION
In today's digital age, real-time communication is essential for various online platforms, from
social media to business collaboration tools. Real-time chatting applications enable users to
engage in instant conversations with one another, fostering communication, collaboration, and
connectivity. Web development is considered a discipline, while web developers are the
practitioners within that field. Web developers build websites and ensure they perform reliably
and efficiently. A web developer’s job is to create websites. While their primary role is to ensure
the website is visually appealing and easy to navigate, many web developers are also responsible
for the website’s performance and capacity.

Web developers usually fall under one of three categories: back-end developers, front-end
developers, and full-stack developers. Some web developers also work as webmasters. Let’s take a
closer look at each of these roles.
(A) Back-end web developers create the website’s structure, write code, and verify the code
works. Their responsibilities also may include managing access points for others who need to
manage a website’s content.
(B) Front-end web developers work on the visual part of the website—the page visitors see and
interact with (also known as the user interface). They design the physical layout of each page,
integrate graphics, and use HTML and JavaScript to enhance the site.
(C) Full-stack developers do the work of both back-end and front-end developers. These developers
have the knowledge to build a complete website.

Web developer tasks and responsibilities.

As a web developer, you could work for a company or agency, or as a freelancer taking on
projects for individual clients. Your tasks will vary depending on your work situation, but day-to-
day responsibilities might generally include:
(a) Designing user interfaces and navigation menus
(b) Writing and reviewing code for sites, typically HTML, XML, or JavaScript
(c) Integrating multimedia content onto a site
(d) Testing web applications
(e) Troubleshooting problems with performance or user experience
(f) Collaborating with designers, developers, and stakeholders.

Dept. Of CSE, MVJCE 2023-24 Page 1

 WEB DEVELOPMENT

Full stack web development encompasses both the front-end and back-end aspects of building web
applications. It involves working with a combination of technologies, languages, and frameworks
to create functional and responsive web experiences.
Developing a real-time chatting application requires proficiency in several key areas, including:
(A)Front-end development involves creating the user interface (UI) and user experience (UX) of
the application. Key technologies and tools in front-end development include HTML, CSS, and
JavaScript, along with frameworks and libraries such as React.js. These technologies enable
developers to build interactive and visually appealing interfaces for users to engage with.In the
context of a real-time chatting application, the front-end is responsible for displaying messages,
managing user interactions, and updating the UI in real-time as new messages arrive.
(B) Back-end of a web application handles data processing, storage, and server-side logic. It
typically involves working with server-side programming languages like Node.js and Java.
Database such as Firebase are used for storing and retrieving chat messages and user data.
Web development implies the method of making and keeping up websites, web applications, and
other online stages, including errands such as coding, planning, and guaranteeing their usefulness
and convenience on the Internet. It is an innovation that plays an essential role in forming the
computerized scene of different businesses.
In the modern world, this tool has permeated essentially each industry, changing conventional
trade practices and empowering modern openings. Let's explore a few of the key divisions that
broadly utilize this tool.

(a) E-commerce: The e-commerce industry intensely depends on this tool to form user-friendly
and outwardly engaging online stores. Thus, from product catalogues to secure payment gateways,
web developers guarantee smooth and productive online shopping encounters for customers.
(b)Healthcare: It has revolutionized healthcare services by encouraging telemedicine,
appointment scheduling platforms, and electronic well-being record systems. Thus, it upgrades
patient care, availability, and communication between medical experts and their patients.
(c) Education: Within the education division, it has opened up new avenues for learning.
Additionally, online learning platforms, web-based courses, and educational apps have ended up
prevalent, giving adaptable and open learning opportunities for students of all ages.
(d) Travel and Tourism: It has changed the travel industry, permitting businesses to exhibit their
services through outward-engaging websites. Travel agencies, booking platforms, and tourism
information websites all depend on web developers to attract and serve travelers.

Dept. Of CSE, MVJCE 2023-24 Page 2

 WEB DEVELOPMENT

Therefore, Full stack web development for real-time chatting applications requires a
comprehensive understanding of both front-end and back-end technologies, along with proficiency
in database management, security, and authentication. By leveraging the right tools and
frameworks, developers can create robust and scalable chatting platforms that facilitate seamless
communication and collaboration among users in real-time.
This introduction provides a high-level overview of the key components and considerations
involved in building real-time chatting applications. As technology continues to evolve,
developers must stay updated with the latest trends and best practices to deliver exceptional user
experience in the ever changing landscape of web development.

Dept. Of CSE, MVJCE 2023-24 Page 3

 WEB DEVELOPMENT

CHAPTER-
2
ABOUT THE ORGANIZATION

2.1 Introduction

Inventeron Technologies and Business Solutions LLP is a Limited Liability Partnership firm
incorporated on 24 December 2013. It is registered at Registrar of Companies, Bangalore. Its total
obligation of contribution is Rs.50,000. Inventeron Technologies and Business Solutions LLP's
last financial year end date for which Statement of Accounts and Solvency were filed is N/A and
as per records from Ministry of Corporate Affairs (MCA), date of last financial year end date for
which Annual Return were filed is N/A.

2.2 History

Even though the company legally registered in the year 2013, it made its humble beginning in the
year 2012 with a team of only six members. In the beginning the team started designing some
protocols for wireless communication with a range up to 4 to 5 km line of sight. After the
successful completion of the project, the team started approaching the clients who were in need.
The company got couple of good clients and started serving them. That is how the company
started generating the revenue. Since the team members were al engineers were experts in
Embedded electronics, Java, Dot net and Android. The company simultaneously started to develop
websites and few latest apps needed for the clients. The company later registered on 24th
December 2013 and took own space for the office, established well equipped office space with
good R&D unit and needed infrastructure, hired many fresher's for different domains of company
and started working with new hopes. Presently the company have around 25 employees including
all the departments like Embedded, Java, Dot net, android, Testing, PCB design, IOT and so on.
The company is working with many Industrial projects in different domains and working for its
own products.

2.3 Vision

To provide quality services that exceeds the expectations of our esteemed customers.

2.4 Mission
To build long term relationships with the customers and clients and provide exceptional

Dept. Of CSE, MVJCE 2023-24 Page 4

 WEB DEVELOPMENT
customer services by pursuing business through innovation and advanced technology.

Dept. Of CSE, MVJCE 2023-24 Page 5

 WEB DEVELOPMENT

2.5 Core Values

Inventeron believe in treating their customers with respect and faith. They grow through
creativity, invention and innovation. They integrate honesty, integrity and business ethics into all
aspects of our business functioning.

2.6 Goals

Regional expansion in the field of Electronics engineering and software field and develop a strong
base of key clients. Increase the assets and investments of the company to support the
development of services. To build good reputation in the field of Electronics Engineering and
software development and become a key player in the industry.

2.7 Services
2.7.1 Embedded Applications development:
We do Apps in Embedded systems related to navigation, safety and security systems, Vehicle
tracking systems, robotics, Biometrics and much more.
2.7.2 Web design and development:
We not only design the online web but also we do web design and development adding
various features of multimedia technology into it and come up with the best and unique low
cost outcome at very short duration of time.
2.7.3 IT Service:
Choosing the Information technology as one of the service area we provide all the necessary
service related to it. Server Maintenance Knowing the importance of maintenance of servers
in the website hoisting and online webs with multimedia we do have our own separate server
and we do maintain them.
2.7.4 PCB design:
Since we deal with our own embedded products we have our own pcb designing team who
designs quality PCBs required and we give the same support to our valuable clients.
2.7.5 ERP:
ERP is an industry acronym for Enterprise Resource Planning. Broadly speaking, ERP refers
to automation and integration of a company's core business to help them focus on
effectiveness & simplified success. We do handle them and give ultimate results.
2.7.6 IT Training:
Knowing the importance of skilled trainers in the Industry we do offer Industrial Training for
the interested persons and train them with utmost knowledge and latest skill and making them

Dept. Of CSE, MVJCE 2023-24 Page 6

 WEB DEVELOPMENT

confident enough to face the challenges of the IT world.

2.7.7 Online Web and Multimedia:
We not only design the online web but also we do online web design and development adding
various features of multimedia technology into it and come up with the best and unique low
cost outcome at very short duration of time.
2.7.8 Cloud Computing:
We do Cloud Computing and related services which is the practice of using a network of
remote servers hosted on the Internet to store, manage, and process data, rather than a local
server or a personal computer.
2.7.9 Business Solutions:
We do provide high quality and cost effective Business Solutions for various sectors of IT and
Non It Professionals hence playing a smart role in the development of any Business either
small scale or large scale.

Fig no.1 Inventeron Technolgies logo

Dept. Of CSE, MVJCE 2023-24 Page 7

 WEB DEVELOPMENT

CHAPTER -3

ABOUT THE DEPARTMENT

3.1 Introduction

Inventeron Technologies and Business Solutions LLP, or ITABS, is an Indian based engineering
and electronics company headquartered in Bangalore, Karnataka, India. It is both product and
service oriented software company having its products in wireless communication Technology
and provides quality service to its valuable clients in its domain.

3.2 Description

 Corporate Name: Inventeron Technologies and Business Solutions LLP

 Website: http://www.inventeron.com

 Company Category: IT Software/Embedded.

 Branches: ECE, EEE, CSE, ISE, MECHANICAL, BCA

 Speciality
The Organization is helpful in successfully building projects based on Full Stack Web
:
Development, Embedded System and IOT, AI & ML, Linux, Dev ops, AWA,
Block Chain.
 Industry: IT Services and IT Consulting

 Company Size: 51-200 Employees and 114 Associated Members

 Headquarters: Bangalore, Karnataka

 Founded: 2013

 Co-Founder and Managing Director: Mohammed Misbah.

The Department of Full stack-web development at Inventeron is focused on providing students

with a strong foundation in the Java and JavaScript programming language, as well as in-depth
knowledge of the various technologies and tools used in Web Programming. The course
curriculum is designed to cover all aspects of Web including some of the topics covered in the
course such as:

Dept. Of CSE, MVJCE 2023-24 Page 8

 WEB DEVELOPMENT
(A) Front-End Development:
 HTML and HTML5

 CSS and CSS3

 JavaScript Fundamentals

 jQuery

 Responsive Web Design

 Building Single Page Applications with React.js

 Advanced Front end framework

(B) Back-end Development:

 Introduction to Node.js

 Server-side Development with Node.js

 Express.js for Web Application Development

 API Design and Development

 Databases (SQL and NoSQL)

 Data Modeling and Database Integration

 Server Deployment and Management

(C) Full-Stack-Development Projects:

 Building Full-Stack Web Applications

 Integrating Front-end and Back-end

 Real-time Application Development

 Security and Authentication

 Version Control with Git

 Project Deployment

Dept. Of CSE, MVJCE 2023-24 Page 9

 WEB DEVELOPMENT

(D) Company Products:

 Smart Surveillance system

 Safety and Security Systems

 Industrial Automation

 Smart Traffic Systems

 Vehicle Tracking Systems

 Software Applications

 Website Design and Development

(E) Company Clients:

 Bioneed India Pvt.ltd

 Indian Air Force

 Next Power Systems Pvt.ltd

 Robert Bosch

 NSK Electronics

The department has highly qualified faculty with industry experience, who are committed to
providing students with practical, hands-on training. The training methodology includes lectures,
case studies, and project-based learning to ensure that students gain a deep understanding of the
concepts and are able to apply them in real-world scenarios.

The department also offers career guidance and placement assistance to students, helping them to
secure internships and job opportunities in leading software development companies. Overall, the
Department of Full-Stack Web development at Inventeron Technologies is a highly regarded
program that provides students with the skills and knowledge needed to succeed in the rapidly
evolving field of current Science and Technology.

Dept. Of CSE, MVJCE 2023-24 Page 10

 WEB DEVELOPMENT

CHAPTER - 4

INTERNSHIP DOMAIN
4.1 Introduction
Inventeron offers Full Stack Web-Course Syllabus, In the ever-evolving world of technology, the
demand for full stack developers has skyrocketed. These versatile professionals possess a unique
skill set that enables them to handle both the front-end and back-end aspects of web
development.

Full stack development is a term that's become increasingly popular in the tech industry. It
refers to the ability to work on both the front-end and back-end of a web application or website.
In essence, a full stack developer is a 'jack of all trades' in web development, capable of
handling every aspect of a project. This includes the user interface, user experience, server
management, and database administration.

During the internship program, we got good exposure to Java programming concepts, MySQL
database concepts and will also learn about the Project life cycle of Software-web development.
These skill-sets are learned to enable us to stand out during the interview process and can expect
better job opportunities. Web-development is a very popular field and there are a ton of companies
looking for people with this skill set.

4.2 Company Domains:

(A) Education: Inventeron has extended its Arms into the field of Education and brought a
revolutionary change in the field by launching various software projects which are suitable in the
educational institutes in various aspects such as student data base management, attendance and
library management system including server maintenance.
(B) IT: With the emerging Information technology Inventeron provide related and necessary
services in the field of IT.
(C) Government: Inventeron tied up with many Government and Non-Government organization
and we do fulfill all the Software and Hardware demand Efficiently.
(D) Food and Beverages: Since Food and Beverages is the fastest and evergreen Industry always
moving together with the growing technology Inventeron has given technical support in many
aspects to this industry.

Dept. Of CSE, MVJCE 2023-24 Page 11

 WEB DEVELOPMENT

(E) Retails: Inventeron has developed software applications needed for smooth maintenance of
the accounts and Transactions in the Retails and Wholesale Industry.
(F) Health Care: Healthcare is the ever needed and very important sector always seeking
contribution of Technology for its efficient monitoring. Inventeron has given smart solutions in
many ways like software application development, Product development, service and
Maintenance. (G)IT Consulting: Inventeron has tied up with many companies and we train the
candidates with good skills by giving them real time exposure and consult them to many top
MNC’s.
(H) Outsourcing: Inventeron does outsource many projects to our associated companies and have
build a very good network among the companies.
(I) HR Management: Inventeron has a separate HR department for training and Recruiting
Purpose. We do offer HR management skills for the needed.

4.3 Course Objectives:

To provide better knowledge within short period of time In “Full Stack Web development”
Internship Program, we have learned to develop web- project by using Java, HTML, CSS,
JavaScript, Firestore and MySQL databases, JQuery, React-JS, Node-JS Here You will learn Core
Java, JSP, Servlet and MySQL database. It is fully hands on based, for creating web application
using HTML, and JavaScript.
We will be able to develop Front-End and Back-End Programming.
(a)Understanding the basics of web-development, JavaScript and Databases.
(b) Learning your way with the system architecture and knowing what is required for the software or
the website you are developing, including the OS.
(c) Front-end coding with HTML, JavaScript and CSS.
(d)Back-end coding with Postman, SQL-workbench.
(e)Building dynamic apps using Express-JS, React, for seamless end-to-end web development.

Dept. Of CSE, MVJCE 2023-24 Page 12

 WEB DEVELOPMENT

CHAPTER -5

SYSTEM DESIGN

5.1 Existing System

To create a chat Application using React JS and Firebase:

5.2 Description

A chat application makes it easy to communicate with people anywhere in the world by sending
and receiving messages in real time. With a chat app, users are able to receive the same engaging
and lively interactions through custom messaging features, just as they would in person. This also
keeps users conversing on your platform instead of looking elsewhere for a messaging solution.
It’s a private chat, which can help ensure that your users have a memorable experience.
Some of the elements rendered in creating the chat applications are:
(a) Java Script:
It is a powerful programming language that can add interactivity to a website. JavaScript is
necessary for front end web development is that it adds interactivity to webpages; HTML
determines the content and CSS styles it while JavaScript brings it all to life.

(b) HTML:
The Hyper Text Mark-up Language or HTML is the standard mark-up language for documents
designed to be displayed in a web browser. It can be assisted by technologies such as Cascading
Style Sheets (CSS) and scripting languages such as JavaScript .HTML can embed programs
written in a scripting language such as JavaScript, which affects the behavior and content of web
pages. Inclusion of CSS defines the look and layout of content.

(c) CSS:
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language such as HTML CSS is a cornerstone technology of the
World Wide Web, alongside HTML and JavaScript CSS is designed to enable the separation of
presentation and content, including layout, colors, and fonts This separation can improve content
accessibility; provide more flexibility and control in the specification of presentation
characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a
separate .
Dept. Of CSE, MVJCE 2023-24 Page 13
 WEB DEVELOPMENT

(d) React.js and React-Native:

It is primarily a front-end JavaScript library for building user interfaces. It focuses on the view
layer of web applications, allowing developers to create dynamic and interactive UI components.
React.js is commonly used for building single-page applications (SPAs) and is often paired with
other front- end technologies like HTML, CSS, and JavaScript to create rich, responsive, and
engaging user experiences. React Native is an open-source java-script based UI software
framework. It is used to develop or render real-time applications for various platforms using
responsive codebase.

(e) Visual Studio and Npm:

(1) Visual Studio Code, created by Microsoft, is a versatile and free open-source code editor
compatible with Windows 10, MacOS, and Linux. It offers a suite of features to enhance
coding experience, including syntax highlighting, code completion, snippets, and debugging
capabilities. Its IntelliSense feature provides code suggestions, while the built-in debugger
supports both source and machine-level debugging. Additionally, it includes tools like the class
and database schema designers. Visual Studio Code supports 36 programming languages and
allows for easy installation of plugins to extend functionality. The Community edition is freely
available, making it accessible to developers of all levels.
(2) npm short for Node Package Manager, is a widely used package manager for JavaScript
programming language. It is a subsidiary of GitHub, providing hosting services and version
control through Git. npm serves as a central registry for JavaScript packages, making it the
largest of its kind globally. Developers worldwide utilize npm to share and access software
packages, both for open source contributions and private project
● website
● registry
● Command Line Interface (CLI)
(f) Backend:
Firebase is a cloud-based database that stores data in JSON format and synchronizes it in real-
time across subscribed devices. It offers a fast and user-friendly approach, making it ideal for
mobile and web applications. Acting as the backend, Firebase provides features such as data
storage, user authentication, static hosting, and more. Its mutable real-time database allows
programmers to store and sync information instantly between different devices, facilitating the
development of collaborative applications.

Dept. Of CSE, MVJCE 2023-24 Page 14

 WEB DEVELOPMENT

 Firestore Database--(Cloud Firestore): Cloud Firestore on the other hand stores data in
the form of documents which are organized in collections. It scales huge sizes of
information data and no sharding is required. Cloud Firestore is a flexible, scalable
database for mobile, web and server development from Firebase and Google Cloud
Platform. It is NoSQL document database that lets the user to store, sync and query the
data for the mobile and web apps.

 Authentication: connecting firebase to auth- Login and Sign-up: Authentication

provides the backend services, easy to use SDKs and ready-made UI libraries to
authenticate users to the application. It supports authentication using passwords, phone
numbers, emails and other identity providers like Google, Facebook, Twitter and many
more.

 Cloud Storage: Cloud Storage is developed for the developer who need to store and serve
user- generated content, such as photos, videos, or audios. Cloud Storage for Firebase is
simple, powerful, and cost-effective object storage service built for Google scale.

 Test Mode deployment: with read and write real-time capabilities.

5.3 Outline

User can login to the chat application using their username and password then allowed to use the
chat app. In this chat application user can send and receive text Messages, Multimedia sharing of
images along with texts, it creates peer-to-peer chat for common discussion. After using the chat
application user can logout the chat app through the logout option. There is an option for profile
viewing and profile image updates as well.

5.4 Reasons to use React.JS

 Simple: With React, you express how your app should look at any given point in time - and it
will automatically manage your UI updates when your underlying data changes.

 Declarative: With changes in Data, React automatically refreshes with it and it knows to only
update the changed parts and not the whole UI. This improves the overall performance.

 Reusable: With React we can build reusable components, we majorly build components with

Dept. Of CSE, MVJCE 2023-24 Page 15

 WEB DEVELOPMENT
the help of react. As they are encapsulated components it makes the code reuse, testing, and

Dept. Of CSE, MVJCE 2023-24 Page 16

 WEB DEVELOPMENT
removal of errors pretty easy.

Simple, declarative, and reusable. These are the top 3 major qualities of React.

5.5 Objectives and features

1) Easy login – in this app, we only need to add our name and then the system will provide us an
unique UID in the Backend-Firebase- Auth, which will be used only by the user under whose
name it is registered.

2) Open source – people which are interested to talk about a topic which they like and people
which are interested in it, can join and communicate with others easily, as the chat is open
sourced; which means people can join and easily leave the chat space. It renders services
similar to Android/ios chat-app.

3) Connects people globally – as the application runs through help of internet, it helps in
connecting people easily. User can register himself with a distinct email and password and
create a new account into the applications home page.

4) Use of UID address – UID address is provided to the user, after logging into the application.
UID address provided to the user is unique, as they can only be used by the user, which is
assigned to it. This saves duplication of information of user, which may have same name. UID
details are stored and rendered onto Firestore Database in its backend.

Dept. Of CSE, MVJCE 2023-24 Page 17

 WEB DEVELOPMENT

CHAPTER-6
SYSTEM REQUIREMENTS
6.1 Software Requirements:
 Front End: HTML, CSS, JavaScript, ReactJS
 Back End: Nodemon.js
 Database: Firebase
 Hosting/Server: Localhst:3000
 Operating System: Microsoft Windows 10 or above versions.
 Language Used (Front End): Visual Studio Code [Index.html] (Version:1.57.1)

6.2 Hardware Requirements:

 Windows system
 A good internet quality

6.3 React-Messenger (Private-Chat) components:

React Messenger

Dept. Of CSE, MVJCE 2023-24 Page 18

 WEB DEVELOPMENT

CHAPTER-7
IMPLEMENTATION
7.1 Commands Deployed:

1) Npm install react-router-dom: npm package that enables you to implement dynamic routing
in a web app. It allows you to display pages and allow users to navigate them. It is a fully-featured
client and server-side routing library for React.
2) Npm install react-moment: JavaScript library that simplifies working with dates, times, and
calendars in React Native applications. With react native moment, you can easily parse, format,
manipulate, and display dates and times in various formats.
3) Npm install Firebase: This package supports web (browser), mobile-web. The important
aspect of a dynamic website is a real-time and reliable database. Firebase provides a real-time
database, authentication, and cloud storage for applications of different platforms.
4) Npm install @web-vitals: Web Vitals are a set of useful metrics that aim to capture the user
experience of a web page.

5) Npm install: All the necessary node-modules with json files and libraries get installed.

7.2 Core Functional Elements required for execution of Code:

1) App.js: It acts as mediator or managers part of the existing file codes as it shows
components on the front-end part
2) Colors.js: Overall background-color of entire register/sign-up page, login-page and chat-
page are created in this file. [Browser-Router] :It is a function It enables navigation between
views from different components in a React application, allows the browser URL to be
changed, and keeps the UI in sync with the URL.
3) Firebase.js: It exports Authentication email and password with chat texts onto firestore
database and uploading images onto storage collection in firebase console.
4) Profile.js: File exports its updated profile images onto firestore collection. It also shows the
current users gmail account and the date of logging-in the website chat application.
5) Home.js: It contains [Timestamp function] which is a sequence of characters, denoting the
date or time at which a certain event occurred. It's the time at which an event is recorded by
React-Native real time web chat application. Tracking the running time in seconds.
5(A) It also contains on Snapshot function: It is a firebase call-back method to set up real-
time listeners for any changes to the current contents of last/previous text-data. It recognizes
the users which are online logged in and who r active currently inside the chat-app.

Dept. Of CSE, MVJCE 2023-24 Page 19

 WEB DEVELOPMENT

5(B) It also showcases the Message Form dialogue box with upload option and sending button
icons.
6) PrivateRoute.js: It ensures that the home page is only accessible if the user is authenticated
7) Auth.js: It enables the React-Native app to consume authentication data and actions within the
application before storing it onto the database, hence can handle large sizes of text chats in the
React-Messenger.
8) Navbar.js: Its links the Register and Login page to the React-Messenger Home Page.
9) User.js: It deploys the current and previous user’s avatar and indicates the last message
rendered in the Home page. It also indicates which user is Online and currently in off mode.

7.3 Screenshots
A) Frontend:
Register Page

Login Page

Dept. Of CSE, MVJCE 2023-24 Page 20

 WEB DEVELOPMENT

Home Page

Dept. Of CSE, MVJCE 2023-24 Page 21

 WEB DEVELOPMENT

B) Back-end: Firebase

Fig: Firebase Authentication

Dept. Of CSE, MVJCE 2023-24 Page 22

 WEB DEVELOPMENT

Fig: Cloud Firestore Fig: Cloud Storage

C) Source Code

Fig :App.JS

Dept. Of CSE, MVJCE 2023-24 Page 23

 WEB DEVELOPMENT

Fig :Firebase.JS

Dept. Of CSE, MVJCE 2023-24 Page 24

 WEB DEVELOPMENT

CHAPTER -
8
DATA FLOW DIAGRAM

Dept. Of CSE, MVJCE 2023-24 Page 25

 WEB DEVELOPMENT

CHAPTER-9

FUTURE ASPECTS

Creating a private chat messenger using React and Firebase presents exciting opportunities for
future development and expansion. Here's a glimpse into the potential future scope:

1) Enhanced Security Features:

Implement advanced security measures such as two-factor authentication (2FA), biometric
authentication, or device verification to further strengthen user privacy and prevent unauthorized
access. Explore blockchain technology for decentralized and immutable message storage, ensuring
maximum security and data integrity.

2) AI-Powered Chatbots:
Integrate AI-driven Chatbots to automate responses, provide personalized recommendations, or
assist users with common queries. Utilize natural language processing (NLP) algorithms to
enhance Chatbot capabilities and enable more natural and human-like interactions.

3) Voice and Video Calling:

Extend the application's functionality to support voice and video calling features, enabling users to
communicate in real-time using audio and video streams.

4) Cross-Platform Compatibility:
Develop native mobile applications for iOS and Android platforms using React Native, ensuring a
consistent user experience across different devices and operating systems.

5) Integration with External Services:

Integrate with third-party services and APIs to expand the application's functionality, such as file
sharing, location sharing, or collaborative document editing.

6) Community and Collaboration Features:

Introduce community forums, group chat rooms, or collaborative workspaces to foster user
engagement, collaboration, and knowledge sharing.

Dept. Of CSE, MVJCE 2023-24 Page 26

 WEB DEVELOPMENT

7) Monetization Opportunities:
Explore monetization strategies such as premium subscriptions, in-app purchases, or targeted
advertising to generate revenue from the application. Offer premium features or additional
services to incentivize users to upgrade to paid plans or make in-app purchases.

By continually innovating and evolving the React-based private chat messenger using Firebase,
developers can stay ahead of the curve and capitalize on emerging trends and technologies to
deliver a cutting-edge communication platform that meets the evolving needs and expectations of
users.

Dept. Of CSE, MVJCE 2023-24 Page 27

 WEB DEVELOPMENT

CONCLUSION

Developing a private chat application utilizing React and Firebase provides a robust and scalable
solution for real-time messaging needs. Reacts component-based architecture facilitates the
creation of a dynamic and responsive user interface, while Firebase's real-time database and
authentication services offer seamless integration and efficient data synchronization. The
combination of these technologies enables developers to rapidly build secure and feature-rich chat
applications that meet modern requirements. With ongoing updates and support from both the
React and Firebase communities, this stack remains a compelling choice for those seeking to
develop private chat applications. By integrating authentication, encryption, and real-time
messaging features, developers can create a robust and user-friendly application that prioritizes
privacy and usability. With careful planning and attention to detail, a React-based private chat
application can provide a seamless and enjoyable chatting experience for users while maintaining
the highest standards of security and privacy using Firebase as its backend with notable
Authentication deployment.

This project is build to showcase a fully functioning chat experience, with support for rich
messages, simple user interfaces for chatting, image uploads, profile view and avatar changes and
more to its backend part visualizing Real-time storage of authenticated password and email with
messaging chats onto the firestore database console. Helping users to understand how a basic chat
application apps are being rendered in real world.

Dept. Of CSE, MVJCE 2023-24 Page 28

 WEB DEVELOPMENT

REFERENCES
While developing this project internet was the eternal support.
Following are the websites referred by me which helped me developing my project:
1. www.realtimechatroom.com
2. http://chatroom.org
3. Visual Studio code (Nodejs)
4. HTML Intro, Date of retrieval 07 Nov.2020:https://www.w3schools.com/html/html_intro.asp
5. CSS Intro, Date of retrieval 07 Nov.2020:https://www.w3schools.com/css/css_intro.asp
6. Learn ReactJS JavaScript library, Date of retrieval 08 Nov.2020
https://www.tutorialspoint.com/reactjs/index.html
7. History of ReactJS, Date of retrieval 02 December 2020
https://www.education-ecosystem.com/guides/programming/react-js/history
8. Vrijraj Singh, Introduction to Firebase, Date of retrieval 03 Dec 2020
https://medium.com/codingurukul/introduction-to-firebase-f9f6ccc8a785
9. Firebase Authentication, Date of retrieval 04 Dec 2020: https://firebase.google.com/docs/auth
10. Firebase Cloud Storage, Date of retrieval 04 Dec 2020:
https://firebase.google.com/docs/storage
11. www.linkedin.com/pulse/full-stack-developer-course-syllabus-nextskill-technologies-7dgmf/
12. https://github.com
13. https://youtube.com

Dept. Of CSE, MVJCE 2023-24 Page 29

 WEB DEVELOPMENT

Dept. Of CSE, MVJCE 2023-24 Page 30

 WEB DEVELOPMENT

Dept. Of CSE, MVJCE 2023-24 Page 31

 WEB DEVELOPMENT

Dept. Of CSE, MVJCE 2023-24 Page 32

 WEB DEVELOPMENT

Dept. Of CSE, MVJCE 2023-24 Page 33

 WEB DEVELOPMENT

Dept. Of CSE, MVJCE 2023-24 Page 34

 WEB DEVELOPMENT

Dept. Of CSE, MVJCE 2023-24 Page 35