lOMoARcPSD|54294637

chat app report

Software Engineering (Charotar University of Science and Technology)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

A
Project Report
On
"Chat app"

Prepared by
Jensi J. Faldu (20DCE028)

Under the guidance of

Prof. Janardan Bharvad

A Report Submitted to
Charotar University of Science and Technology
For Partial Fulfillment of the Requirements for the
5th Semester Summer Internship-I (CE346)

Submitted at

Department of Computer Engineering

Devang Patel Institute of Advance Technology and Research
At: Changa, Dist: Anand – 388421
July 2021

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

CERTIFICATE

This is to certify that the report entitled “Chat app” is a bonafide work carried out
by Ms. Jensi J Faldu (20DCE028) under the guidance and supervision of Prof.
Janardan bharvad for the subject CE346 Summer Internship-I of 5th Semester of
Bachelor of Technology in Department of Computer Engineering, DEPSTAR
at Faculty of Technology & Engineering – CHARUSAT, Gujarat.

To the best of my knowledge and belief, this work embodies the work of the
candidate himself, has duly been completed and fulfills the requirement of the
ordinance relating to the B.Tech. The degree of the University is up to the standard
regarding the content, presentation, and language for being referred to the examiner.

Prof. Janardan Bharvad Mr. Priyank Ajudiya

Assistant Professor Project manager
Department of Computer Engineering Diversity Infotech
DEPSTAR, CHARUSAT, Changa, Gujarat. Surat.

Dr. Dweepna Garg Dr. Amit Ganatra

Head of Department Principal, DEPSTAR
Department of Computer Engineering Dean, FTE
DEPSTAR, CHARUSAT, Changa, Gujarat CHARUSAT, Changa, Gujarat.

Devang Patel Institute of Advance Technology And Research At Changa, Ta. Petlad,
Dist. Anand, PIN: 388 421. Gujarat

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 ACKNOWLEDGEMENT

ACKNOWLEDGEMENT

We, the developer of a chat web-based application system “Chat app”, with immense pleasure
and commitment would like to present the project assignment. The development of this
project has given us a wide opportunity to think, implement and interact with various aspects
of management skills as well as the new emerging technologies.

Every work that one completes successfully stands on the constant encouragement, goodwill,
and support of the people around. We hereby avail this opportunity to express our gratitude to
the number of people who extended their valuable time, full support, and cooperation in
developing the project.

We would like to thank our principal sir, Dr. Amit Ganatra for providing this subject for the
5th-semester student.

We express a deep sense of gratitude towards our Head of the CE Department, Dr. Dweepna
Garg, and project guide Prof. Priyank Ajudiya for the support during the whole summer
internship. It is because of them, that we were prompted to do hard work & adopt new
technologies.

Thanks,
Faldu Jensi (20DCE028)

DEPSTAR i Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 ABSTRACT

ABSTRACT

Chatting is a method of using technology to bring people and ideas together despite
geographical barriers. The technology has been available for years but the acceptance was
quite recent. Our project is an example of a chat server. It is made up of two applications - the
client application, which runs on the user’s web browser, and the server application, which
runs on any hosting servers on the network. To start chatting clients should get connected to a
server where they can privately. Security measures were taken during the last one.

DEPSTAR ii Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 DECLARATION BY THE CANDIDATE

DECLARATION BY THE CANDIDATE

We hereby declare that the project report entitled “CHAT APP” submitted by us to
Diversity infotech in partial fulfillment of the requirement for completing the summer
internship, carried out by me under the guidance of Mr. priyank ajudiya.

We further declare that the work carried out and documented in this project report has not been
submitted anywhere else either in part or in full and it is the original work, for the award of any
other degree or diploma in this institute or any other institute or university.

Jensi Faldu(20DCE028)

DEPSTAR iii Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 Table of content

TABLE OF CONTENTS
Acknowledgment...........................................................................................................................................i
Abstract …………….……........................................................................................................... ii
Declaration by the Candidate ...................................................................................................................... iii
Table of Content ..........................................................................................................................................iv
Chapter 1 Project Definition …………………………………..………………...1
1.1 Project Overview ....................................................................................................................................2
1.2 Objective .................................................................................................................................................3
1.3Scope of the project..................................................................................................................................3
Chapter 2 System Requirements Study .....……………………...…….………. 4
2.1 Hardware Specification ......................................................................................................................... 5
2.2 Software Specification .......................................................................................................................... 5
Chapter 3 Major Functionality …….……………………………..…………… 6
3. Functionality of chat app......................................................................................................................... 7
3.2 Non-functionality of chat app …….. ................................................................................................... 7
3.3 Background and related work………………………………………………………………………….7
3.3.1 Front-End ........................................................................................................................................... 7
3.3.2 Back-End ............................................................................................................................................ 8
3.3.3 Development With ............................................................................................................................. 8
Chapter 4 Flowchart ……………...….……………………………….………… 9
4.1 System flowchart …………………..................................................................................................... 10
4.2 App flowchart…................................................................................................................................... 11
Chapter 5 Project Screenshot ……………………………………..………....... 12
5.1 Screen Layout ...................................................................................................................................... 13
Chapter 6 System Limitation ……………………….…..…………….…..…… 18
6.1 Limitations ………………………………………………………………………………………....... 19
Chapter 7 Future Enhancement ……………………….………………...……. 20
7.1 Future Scope …….………………………………………………………………………………....... 21
Chapter 8 Conclusion ………….………………………………….……...……. 22
8.1 References …….…………………………………………………………………………………...... 23

DEPSTAR iv Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 TABLE OF FIGURE

TABLE OF FIGURES
4.1 System flowchart..................................................................................................................10
4.2 Chat app flowchart …….....................................................................................................11
5.1 Project screenshots………………………………………………………………………….…….12
5.1.1 Signup page…………………………………………………………………………….….…13
5.1.2 Login page……………………………………………………………………………….……13
5.1.3 Set avtaar screen……………………………………………………………………….…....14
5.1.4 Welcome screen…………………………………………………………………………..….14
5.1.5 Chat page………………………………………………………………………………….….15
5.1.6 Database of users…………………………………………………………………………....16
5.1.7 Database of messages………………………………………………………………………17

DEPSTAR v Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 PROJECT DEFINITION

CHAPTER 1: PROJECT DEFINITION

DEPSTAR 1 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 PROJECT DEFINITION

1.1 PROJECT OVERVIEW

A chat app is a web-based application that is connected to a complete
database. The database includes information about users, and messages. In
real-time people connect with other people using much more chat web-based
applications.

The system module is divided into three parts

1. Select Username

2. Select Avtaar

3. Send messages

1.2 OBJECTIVE
• Communication: To develop an instant messaging solution to enable users to
seamlessly communicate with each other.
• User-friendliness: The project should be very easy to use enabling even a novice
Person to use it.

1.3 SCOPE OF THE PROJECT

• Companies would like to have communication software wherein they can
communicate instantly within their organization.
• The fact that the software uses an internal network set up within the organization
makes it very secure from outside attacks.

DEPSTAR 2 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 SYSTEM REQUIREMENTS STUDY

CHAPTER 2: SYSTEM REQUIREMENTS STUDY

DEPSTAR 3 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 SYSTEM REQUIREMENTS STUDY

2.1 HARDWARE SPECIFICATION:

• Windows: 7 or newer
• MAC: OS X v10.7 or higher
• Processor: Minimum 1 GHz; Recommended 2GHz or more
• Ethernet connection (LAN) OR a wireless adapter (Wi-Fi)
• Hard Drive: Minimum 32 GB; Recommended 64 GB or more
• Memory (RAM): Minimum 1 GB; Recommended 4 GB or above

Supported Browsers:
People often ask what browser they should use. There is no single answer for this. Use
whichever browser works best on your computer. However, we recommend downloading
Firefox and/or Chrome in addition to having Internet Explorer or Safari.

-Firefox(97.0)
-Chrome(98.0.4758.102)
-safari

2.2 SOFTWARE SPECIFICATION:

• Visual Studio Code(VS Code)

DEPSTAR 4 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 MAJOR FUNCTIONALITY

CHAPTER 3: MAJOR FUNCTIONALITY

DEPSTAR 5 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 MAJOR FUNCTIONALITY

3.1 FUNCTIONALITY OF THE CHAT APP IS AS FOLLOWS:

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

2. 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 user’s contact list on Chat Application.

3. Send Message: The user should be able to send an instant message to any contact on his/her
Chat Application contact list.

3.2 NON-FUNCTIONALITY OF THE CHAT APP IS AS FOLLOWS:

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

3.3 BACKGROUND AND RELATED WORK:

3.3.1 FRONT-END:

• Sign-In & Sign-Up Pages.

• Used a password-based system, so only registered users can access the website.

• Getting a list of users.

• Had a logout button so users can easily log out of their profile.

DEPSTAR 6 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 MAJOR FUNCTIONALITY

3.3.2 BACK-END:
• Used Express js-based application for the backend process.

• Used MongoDB atlas for storing the collections.

3.3.3 DEVELOPED WITH

• Visual Studio Code - A source code editor developed by Microsoft for Windows, Linux, and
macOS. It includes support for debugging, embedded Git control, syntax highlighting,
intelligent code completion, snippets, and code refactoring
• Node.js - Javascript runtime
• React - A Javascript library for building user interfaces
• Webpack - A module bundler
• SCSS - A CSS metalanguage
• Bootstrap 4 - Bootstrap is an open-source toolkit for developing with HTML, CSS, and JS
• Axios – Promise-based HTTP client for the browser and node.js
• Express js - Express is a minimal and flexible Node.js web application framework that
provides a robust set of features for web and mobile applications.
• MongoDB atlas- MongoDB Atlas is the global cloud database service for modern
applications.

DEPSTAR 7 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 PROJECT SCREENSHOTS

CHAPTER 4: FLOWCHART

DEPSTAR 8 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 PROJECT SCREENSHOTS

4.1 SYSTEM FLOWCHART:

Figure 4.1 System flowchart

A chat consists of two major parts(fig.4.1):
• Chat App or client part, which is a Web chat application. Build on React
• Chat Server Engine or server part, which is a pool of external servers responsible for the chat
operation. This is the place where all the chat magic happens.
Both parts contain various components that communicate with each other and bring the chat into
action

DEPSTAR 9 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 PROJECT SCREENSHOTS

4.2 CHAT APP FLOWCHART :

figure 4.2 Chat app flowchart

In the chat, app users can register or log in to their account. if the user has no account then he/she
will first create their account and then the user redirects to the set after page. On this page users
pic up any avatar and then set it for profile. Next user redirect to welcome screen. User pic their
friend account and send the message if not then user will logout their profile. (fig 4.2)

DEPSTAR 10 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 PROJECT SCREENSHOTS

CHAPTER 5: PROJECT SCREENSHOTS

DEPSTAR 11 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 PROJECT SCREENSHOTS

5.1 SYSTEM LAYOUT:

Sign up Page:

figure 5.1.1 Sign up page

Log in Page:

figure 5.1.2 Log in page

DEPSTAR 12 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 PROJECT SCREENSHOTS

• Sign up page for create an account and Login page for login their profile(fig 5.1.1 and fig
5.1.2)

Set avtaar Page:

figure 5.1.3 Avtar page

Welcome Screen Page:

figure 5.1.4 Welcome screen page

• user will set their profile picture (fig.5.1.3) and than user redirect to welcome screen(fig
5.1.4)

DEPSTAR 13 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 PROJECT SCREENSHOTS

Chat Page:

figure 5.1.5 Chat page

figure 5.1.5 Chat page

• user can pic up their friend username and send messages(fig 5.1.5)
• log out button in the right side . if the user logs out of his/her profile then he/she will do.

DEPSTAR 14 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 PROJECT SCREENSHOTS

Data Base of Users:

figure 5.1.6 Database of users

• store the data of n no. of users data like username, password , email, avtar image on
MongoDB compass.

DEPSTAR 15 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 PROJECT SCREENSHOTS

Data Base of Messages:

figure 5.1.7 Database of messages

• store the data of n no. of messages on MongoDB compass.

DEPSTAR 16 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 SYSTEM LIMITATION

CHAPTER 6: SYSTEM LIMITATION

DEPSTAR 17 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 SYSTEM LIMITATION

6.1 LIMITATIONS:

• Does not support audio conversation.

• This chat app can’t use without the internet.

DEPSTAR 18 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 FUTURE ENHANCEMENT

CHAPTER 7: FUTURE ENHANCEMENT

DEPSTAR 19 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 FUTURE ENHANCEMENT

7.1 FUTURE SCOPE:

Right now, we are just dealing with text communication. There are several chat apps that serve a
similar purpose as this project, but these apps were rather difficult to use and provide confusing
interfaces. A positive first impression is essential in human relationships as well as in human-
computer interaction. This project hopes to develop a chat service Web app with a high-quality
user interface. In the future, we may be extended to include features such as:

• File Transfer
• Voice Message
• Video Message
• Audio Call
• Video Call
• Group Call

DEPSTAR 20 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 REFERENCES

CHAPTER 8: CONCLUSION

DEPSTAR 21 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

20DCE028 REFERENCES

8.1 REFERENCES :
[1] https://docs.mongodb.com/ecosystem/drivers/

[2] https://www.guru99.com/what-is-mongodb.html

[3] https://expressjs.com/en/guide/routing.html

[4] https://www.javatpoint.com/expressjs-tutorial

[5] https://www.npmjs.com/

[6] https://reactjs.org/docs/getting-started.html

[7] https://www.javatpoint.com/reactjs-tutorial

[8] https://nodejs.org/en/docs/

[9] https://www.javatpoint.com/nodejs-tutorial

[10] https://www.toptal.com/nodejs/secure-rest-api-in-nodejs

DEPSTAR 22 Department of computer Engineering

Downloaded by tipen motivue ([email protected])

 lOMoARcPSD|54294637

Downloaded by tipen motivue ([email protected])