1923pt B.tech It Batchno 177
1923pt B.tech It Batchno 177
1923pt B.tech It Batchno 177
i
PROFESSIONAL TRAINING REPORT AT
Sathyabama Institute of Science and Technology
(Deemed to be university)
By
Preethi. S
Reg no-39120084
NOVEMBER 2021
ii
SATHYABAMA
INSTITUTE OF SCIENCE AND TECHNOLOGY
(DEEMED TO BE UNIVERSITY)
BONAFIDE CERTIFICATE
Internal Guide
Dr. J. Jabez
iii
DECLARATION
We, Sumit, Harsh, Abhay & Arpeet hereby declare that the project report entitled Chat
application using React js done by us under the guidance of Mr. Azar Ahmed fulfilment of
the requirements for the award of Bachelor of Computer Application.
DATE:
PLACE:
ACKNOWLEDGEMENT
We convey our thanks to Mr Azhar ahmed for providing us necessary support and
details at the right time during the progressive reviews.
We would like to express our sincere and deep sense of gratitude to our Project
Guide Mr Azhar ahmed for his valuable guidance, suggestions and constant
encouragement paved way for the successful completion of my project work.
We wish to express our thanks to all Teaching and Non-teaching staff members of
the KCC INSTITUTE who were helpful in many ways for the completion of the
project.
….
.
..
ABSTRACT
v
TABLE OF CONTENTS
TITLE PAGE NO
S.NO
1
ABSTRACT V
4 AIM
1-2
1. DESCRIPTION
2. BACKEND SOURCE
3. SCOPE AND OBJECTIVE
4. PROJECT OUTLINE
5. HARDWARE REQUIREMENTS
6. SOFT WARE REQUIREMENTS
5 CHAT ENGINE
1. FEATURES 2-3
2. CHAT OBJECT
3. MESSAGE OBJECT
4. WORKING OF API
6 NETLIFY
1. ADVANTAGES 3-4
2. DISADVANTAGES
7 1. Html 4-5
2. CSS
8 REACT JS 5-8
vi
1. REQUIREMENTS
2. NEEDS
3. ADVANTAGES
4. DISADVANTAGES
5. PROS AND CONS
6. BENIFIT
7. APPLICATION OF REACT-JS
9 RESULT 31-34
10 CONCLUSION 34
LIST OF FIGURES
1
REACT –JS
1. ADVANTAGES 6-8
2. BE NIFITS
3. PROS AND CONS
4. APPLICATIONS
4 RESULT 31-34
LIST OF ABBREVATIONS
vii
API Application Programming
Interface
JS JAVA SCRIPT
viii
AIM:
To create a chat Application using React js
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. Whether it’s a private
chat, group chat, or large scale chat, adding personalized chat features to your app
can help ensure that your users have a memorable experience.
BACKEND - REACTJS
React (also known as React.js or ReactJS) is a free and open-source front-end
JavaScript library for building user interfaces based on UI components. It is
maintained by Meta (formerly Facebook) and a community of individual developers
and companies.React can be used as a base in the development of single-page,
mobile, or server-rendered applications with frameworks like Next.js. However, React
is only concerned with state management and rendering that state to the DOM, so
creating React applications usually requires the use of additional libraries for routing,
as well as certain client-side functionality.
PROJECT 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 , create groups or chat groups for their common discussion .
chat admin is someone who creates the group who’s allowed to add any numbers
user under the group where they can share their common thoughts. After using the
chat application user can logout the chat app through the logout option.
1
The chat application is built using react js deployed using chat engine api , and
hosted on netlify. The main aspect is where one user can can send text ,images from
one end and the other receives the same from their end. Also user can create a chat
group ,add any number of people to their wish and share the text,images apparently
the other members of the group receives the same in the chat room.
HARDWARE REQUIREMENTS
• Windows system
SOFTWARE REQUIREMENTS
• react js
Chat Engine is an API which makes it easy to build chat services. Building a chat
from scratch takes a lot of time, code, and is expensive. It's better to use a product
instead of writing it from scratch. We make it easy to build your chat idea in minutes.
2
FEATURES:
• Authenticate user
• Subscribe (connect) to incoming chats and messages
• Create chats and messages
• Add and remove people from chats
• Edit and delete chat and message data.
CHAT OBJECT:
MESSAGE OBJECT:
•
• id (int) - Unique primary key to identify this message
• sender (String) - Unique username of the person who sent this message
• text (String) - Contents of the message sent
• created (Datetime) - Date-time of message creation
NETLIFY
3
Netlify is a web developer platform that multiplies productivity By unifying the elements of the
modern decoupled web, from local development to advanced edge logic, Netlify enables a 10x faster
path to much more performance, secure, and scalable websites and apps. Our bet on the Jamstack is
quickly coming true. The web is rapidly changing away from monolithic to decoupled apps, and web
developers are storming ahead with more power than ever. Netlify is built to cater to that movement,
and in just a few years we’ve on-boarded millions of developers and businesses, and are building and
serving millions of web projects daily around the globe. Fun fact: in the time it took you to read the
above, Netlify served over 600,000 requests.
ADVANTAGES:
● Netlify Is Less Expensive, and You Get a Faster Site.
● Netlify Build Enables Developers to Build With Any Integration.
● It's Easier to Launch a Site Using Netlify.
DISADVANTAGES:
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 StyleSheets(CSS) and scripting languages such
4
as JavaScript
HTML can embed programs written in a scripting language such as JavaScript,
which affects the behaviour and content of web pages. Inclusion of CSS defines the
look and layout of content
css
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation of a document written in a mark up 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, colours, 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 .
REACT-JS
React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript
library for building user interfaces based on UI components. It is maintained by Meta
(formerly Facebook) and a community of individual developers and companies. React can
be used as a base in the development of single-page, mobile, or server-rendered
applications with frameworks like Next.js. However, React is only concerned with state
management and rendering that state to the DOM, so creating React applications usually
requires the use of additional libraries for routing, as well as certain client-side functionality.
React js requirements:
5
• HTML + CSS. No front-end dev is a stranger to HTML and CSS. ...
• JSX. In React, you never really touch HTML proper. ...
• JavaScript Fundamentals + ES6. ...
• Node + npm. ...
• Redux.
NEEDS OF REACT-JS
To react, you just need basic knowledge of CSS and HTML. React can be used to create
mobile applications (React Native). And React is a diehard fan of reusability, meaning
extensive code reusability is supported. So at the same time, we can make IOS, Android
and Web applications.
React is an excellent tool with which to create interactive applications for mobile, web, and
other platforms. React's popularity and usage are increasing day by day for good reason.
As a developer, coding in React makes you better at JavaScript, a language that holds
nearly 90% of the web development share today.
ADVANTAGES:
6
DISADVANTAGES:
• The high pace of development. The high pace of development has an advantage and
disadvantage both. ...
• Poor Documentation. It is another cons which are common for constantly
updating technologies. ...
• View Part. ReactJS Covers only the UI Layers of the app and nothing else. ...
• JSX as a barrier.
BENIFITS OF REACT-JS
• Performance
• Code reusability
• Easy to learn easy and quick testing
• Native app development
• Server side rendering
7
APPLICATIONS OF REACT-JS
8
SOURCE CODE:
App.css
*{
Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
.ce-chat-list {
.ce-chats-container {
.ce-active-chat-card {
.ce-chat-subtitle-text {
9
.ce-chat-form-container {
.ce-text-input {
.ce-primary-button {
position: relative;
bottom: 1px;
.ce-danger-button {
.ce-settings {
.ce-autocomplete-input {
10
border-radius: 6px !important;
.ce-autocomplete-options {
.ce-chat-settings-container {
.ce-chat-avatars-row {
/* CUSTOM FEED */
.chat-feed {
height: 100%;
width: 100%;
overflow: scroll;
11
.chat-title-container {
padding: 18px;
text-align: center;
.chat-title {
color: #7554a0;
font-weight: 800;
font-size: 24px;
.chat-subtitle {
color: #7554a0;
font-weight: 600;
font-size: 12px;
padding-top: 4px;
.message-row {
float: left;
width: 100%;
display: flex;
margin-left: 18px;
.message-block {
12
width: 100%;
display: inline-block;
.message-avatar {
width: 44px;
height: 44px;
border-radius: 22px;
color: white;
text-align: center;
background-repeat: no-repeat;
background-position: center;
background-size: 48px;
.logout-button {
text-align: center;
margin-top: 20px;
margin-left: 43%;
margin-bottom: 40px;
width: 70px;
13
.message {
padding: 12px;
font-size: 16px;
border-radius: 6px;
max-width: 60%;
.message-image {
margin-right: 18px;
object-fit: cover;
border-radius: 6px;
height: 30vw;
/* width: 30vw; */
max-height: 200px;
max-width: 200px;
min-height: 100px;
min-width: 100px;
.read-receipts {
position: relative;
bottom: 6px;
.read-receipt {
width: 13px;
height: 13px;
14
border-radius: 13px;
margin: 1.5px;
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
.message-form-container {
position: absolute;
bottom: 0px;
padding: 18px;
.message-form {
overflow: hidden;
border-radius: 6px;
background-color: white;
.message-input {
height: 40px;
background-color: white;
15
padding: 0px 18px;
outline: none;
font-size: 15px;
.image-button {
cursor: pointer;
height: 100%;
.send-button {
height: 42px;
background-color: white;
cursor: pointer;
.send-icon {
top: 1px;
position: relative;
transform: rotate(-90deg);
.picture-icon {
top: 1px;
16
position: relative;
font-size: 14px;
/* FORM STYLES */
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
.wrapper {
height: 100vh;
width: 100%;
background: linear-gradient(90deg, rgba(117, 84, 160, 1) 7%, rgba(117, 84, 160, 1) 17%, rgba(106,
95, 168, 1) 29%, rgba(99, 103, 174, 1) 44%, rgba(87, 116, 184, 1) 66%, rgba(70, 135, 198, 1) 83%,
rgba(44, 163, 219, 1) 96%, rgba(22, 188, 237, 1) 100%, rgba(0, 212, 255, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
.input {
color: #333;
17
font-size: 1.2rem;
margin: 0 auto;
border-radius: 0.2rem;
border: none;
width: 90%;
display: block;
outline: none;
margin-bottom: 25px;
.form {
width: 400px;
.title {
text-align: center;
color: white;
margin-bottom: 30px;
width: 100%;
font-size: 2.3em;
18
.button {
border-radius: 4px;
border: none;
background-color: white;
color: black;
text-align: center;
text-transform: uppercase;
font-size: 22px;
padding: 20px;
width: 200px;
cursor: pointer;
margin: 5px;
width: 90%;
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.4s;
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
19
top: 0;
right: -20px;
transition: 0.5s;
.button:hover span {
padding-right: 25px;
.button:hover span:after {
opacity: 1;
right: 0;
.error {
color: white;
text-align: center;
margin-top: 20px;
APP.js
import { ChatEngine } from "react-chat-engine";
import './App.css';
20
if(!localStorage.getItem('username')) return <LoginForm />
return (
<ChatEngine
height = "100vh"
projectID = "7a704088-98dc-4203-a0f7-cc2159f81d85"
userName = {localStorage.getItem('username')}
userSecret = {localStorage.getItem('password')}
/>} />
);
index.js
import React from 'react';
import ReactDom from 'react-
dom';
import App from './App';
ReactDom.render(<App/>,
document.getElementById('root'))
;
Chatfeed.jsx
import MessageForm from "./MessageForm";
import MyMessage from "./MyMessage"; import
TheirMessage from "./TheirMessage";
21
const chat = chats &&
chats[activeChat];
/>
))
}
return (
<div key={`msg_${index}`}
style={{ width: '100%' }}>
<div
className="message-block">
{
isMyMessage
22
?
<MyMessage message={message} />
:
<TheirMessage message={message}
lastMessage={messages[lastMessageKey]} />
}
</div>
<div className="read-
receipts" style={{ marginRight: isMyMessage
? '18px' : '0px', marginLeft: isMyMessage ?
'0px' : '68px' }}>
{renderReadReceipts(message, isMyMessage)}
</div>
</div>
)
})
localStorage.removeItem('username');
localStorage.removeItem('password');
window.location.reload();
}
return (
<div className="chat-feed">
<div className="chat-title-
container">
<div className="chat-
title">
23
{chat.title}
</div>
<div className="chat-
subtitle">
{chat.people.map((person) => `
${person.person.username}`)}
</div>
<div className="logout-
button">
<button
onClick={logout}>Logout</button>
</div>
{renderMessages()}
<div style={{ height:
'100px' }} />
<div className="message-
form-container">
<MessageForm {...props}
chatId={activeChat} />
</div>
</div>
</div>
)
}
export default ChatFeed;
loginform.jsx
24
const handleSubmit = async (e) => {
e.preventDefault();
try {
await
axios.get("https://api.chatengine.io/chats"
, { headers: authObject });
localStorage.setItem('username', username);
localStorage.setItem('password', password);
window.location.reload();
} catch (error)
{ setError("Oops,
Wrong
Credentials..Try again")
}
return (
<div className="wrapper">
<div className="form">
<h1 className="title" >
Chat Application </h1>
<form
onSubmit={handleSubmit}>
<input type="text"
value={username} onChange={(e) =>
setUsername(e.target.value)}
className="input" required
placeholder="Username" />
25
<input type="password"
value={password} onChange={(e) =>
setPassword(e.target.value)}
className="input" required
placeholder="Password" />
<div align="center">
<button
type="submit" className="button">
<span>Start
Chatting</span>
</button>
</div>
</form>
<div
className="error">{error}</div>
</div>
</div>
);
}
messageform.jsx
event.preventDefault();
26
const text = value.trim();
if (text.length > 0) {
setValue('');
setValue(event.target.value);
isTyping(props, chatId);
return (
<form className="message-form"
onSubmit={handleSubmit}> <input
className="input-message"
value={value}
onChange={handleChange}
27
onSubmit={handleSubmit}
/>
<label htmlFor="upload-button">
<span className="image-button">
</span>
</label>
<input id="upload-button"
type="file"
multiple="false"
onChange={handleUpload}
/>
</button>
</form>
mymessage.jsx
const MyMessage = ({ message }) => {
if (message?.attachments?.length > 0) {
return (
<img
28
src={message.attachments[0].file}
alt="message-attachment"
className="messgage-image"
/>
Theirmessages.jsx
const TheirMessage = ({ lastMessage, message }) => {
return (
<div className="message-row">
{isFirstMessageByUser && (
<div className="message-avatar"
)}
{message?.attachments?.length > 0
?(
<img
src={message.attachments[0].file}
alt="message-attachment"
className="messgage-image"
29
/>
):(
{message.text}
</div>
</div>
return (
{message.text}
</div>
TheirMessage.jsx
const TheirMessage = ({ lastMessage, message }) => {
30
const isFirstMessageByUser = !lastMessage || lastMessage.sender.username !
== message.sender.username;
return (
<div className="message-row">
{isFirstMessageByUser && (
<div className="message-avatar"
)}
{message?.attachments?.length > 0
?(
<img
src={message.attachments[0].file}
alt="message-attachment"
className="messgage-image"
/>
):(
{message.text}
</div>
</div>
31
}
RESULT
login-page
HOME PAGE
32
SENDING MESSAGES
33
CONCLUSION :
We have successfully created a Chat Apllicaiton using React js with the help of chat
engine API key and hosted successfully on netlify
34
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: