Project Report
Uploaded by
sd8546706Project Report
Uploaded by
sd8546706A
Project Report
On
ChatApp
Submitted in the partial fulfilment of the requirement of
Bachelor of Technology
In
Computer Science and Engineering
Under the Guidance of Submitted by
Mr. Sachin Sharma Tanish Garg
Assistant Professor 2021216814
CSE, 7th Sem
Department of Computer Science and Engineering
Guru Nanak Institute of Technology, Mullana
Session 2024-2025
CANDIDATE’S DECLARATION
I hereby certify that theworkwhichisbeingpresentedinthisProjectentitled
“ChatApp”inpartialfulfilmentoftherequirementfortheawardofdegreeofB.Tech
ComputerScienceandEngineeringsubmittedinDepartmentofComputerScience&
Engineering at Guru Nanak Institute of Technology, Mullana, Ambala affiliated to
Kurukshetra University, Kurukshetra is an authentic record of my work carried out
under the supervision of Mr. Sachin Sharma, Assistant professor, Department of
CSE, GNIT, Mullana, Ambala.
ThematterpresentedherehasnotbeensubmittedbymetoanyotherUniversity
/ Institute for the award of any otherdegree.
Tanish Garg
2021216814
Thisistocertifythattheabovestatementmadebythecandidateiscorrecttothebest
of my knowledge.
Mr. Sachin Sharma Ms. Geetika konshal
Assistant professor HOD Deptt. of CSE
i
ACKNOWLEDGEMENT
IwishtoexpressmysincereregardsandgratitudetoMr.SachinSharma(Assistant
professor),intheDepartmentofComputerScienceandEngineeringforhisguidance,
moral boosting, continuous encouragement, and appreciation, which are the vital
factors in the successful completion of my major project work.
I sincerely extend my thanks to Ms. Geetika Konshal Head, the Department of
Computer Science & Engineering for his administrative support and guidance.
My sincere thanks to all the faculty members and technical staff of the Computer
Science&EngineeringDepartmentforprovidingpleasantworkingconditionsforthe
complete duration of the major project.
TheseAcknowledgementsshallremaininconclusivewithoutthankingmyclassmates
who helped provide a calm and congenial atmosphere without which my project
would not have seen light of the day.
Tanish Garg
ii
LIST OF FIGURES
Figure No. Description Page No.
4.1.1 Data Flow Diagram 8
5.1.1 Login Page 9
5.1.2 Signup page 9
5.1.3 Home Page 10
5.1.4 Conversation 10
5.1.5 Updating Name & 11
Profile_pic
5.1.6 Forgot Password 11
iii
CONTENTS
Particulars Page No.
Candidate’s Declaration i
Acknowledgement ii
List of Figures iii
Abstract vi
Chapter 1: Introduction 1-2
1.1Overview 1
1.2Scope of the Project 2
Chapter 2: Feasibility Study 3-5
2.1Introduction to Feasibility Study 3
2.2Technical Feasibility 4
2.3Economical Feasibility 4
2.4Operational Feasibility 4
2.5Description of the Existing system 4-5
2.6Proposed System 5
2.7Hardware & Software Requirements 5
Chapter 3: Problem Formulation and Requirement Phase 6-7
3.1Problem Statement 6
3.2Aim & Objectives 6-7
3.3Module Description 7
Chapter 4: System Design and Implementation 8
4.1Data Flow Diagram 8
Chapter 5: Result and Discussion 9-11
5.1Screenshots 9-11
iv
Chapter 6: Conclusion and Future Scope 12
6.1Conclusion 12
6.2Future Scope 12
References 13
Annexure(Code) 14-33
v
ABSTRACT
Theadventofdigitalcommunicationhasrevolutionisedthewayweinteractwitheach
other, fostering connections across vast distances. The demand for efficient and
user-friendly communication platforms has surged in recent years, driving the
development of innovative solutions. This project presents ChatApp, a web-based
application designed to provide a seamless and engaging real-time communication
experience.
ChatAppisbuiltwithamoderntechstack(React,Express,Node,Tailwind,Socket.io,
Mongoose). ChatApp delivers a smooth and responsive user interface for real-time
communication. The application leverages MongoDB for scalable data storage and
Socket.io for instant message delivery, ensuringaseamlessandengagingexperience
for users.
ChatApprepresentsasignificantadvancementinthefieldofreal-timecommunication
platforms. By combining cutting-edge technologiesandauser-focusedapproach,the
applicationdeliversapowerfulandengagingsolutionthatmeetstheevolvingneedsof
modern users.
vi
CHAPTER: 1
INTRODUCTION
1.1Overview:
The demand for efficient and user-friendly communication platforms has surged in
recent years, driving the development of innovative solutions. This project presents
ChatApp, a web-based application designed to provide a seamless and engaging
real-time communication experience.
Leveraging a robust technological stack, ChatApp offers a comprehensive suite of
featuresthatcatertothediverseneedsofmodernusers.Theapplication'sfrontendis
built on ReactJS. This foundation enables a dynamic and interactive user interface,
ensuring a smooth and intuitive experience.
To enhance thevisualappealandresponsivenessoftheapplication,TailwindCSSis
employed as the styling framework. Tailwind's utility-first approach empowers
developerstorapidlycreatecustomstyleswithouttheneedforextensiveCSSclasses.
This streamlined development process results in a visually pleasing and adaptable
interface that seamlessly adjusts to different screen sizes and devices.
On the backend, Express.js, a Node.js web framework, serves asthefoundationfor
handling server-side logic and API endpoints. Express's modular and flexible
architecture facilitates the efficient management of HTTP requests and responses,
ensuring optimal performance and scalability.
To store chat data and enable real-time communication, MongoDB, a NoSQL
database,isutilised.MongoDB'sdocument-orientedstructureprovidesaflexibleand
scalable solution for storing and retrieving chat messages efficiently.
The centrepiece of ChatAppisitsreal-timecommunicationcapabilities,poweredby
Socket.io. This library enables bi-directional communication between the clientand
server, allowing for instant message delivery and updates.
ChatApp offers a range of features designed to enhance user interaction and
communication.Userscancreateaccounts,login,andengageinreal-timetext-based
conversations.
Asthedigitallandscapecontinuestoevolve,ChatAppispoisedtoplayavitalrolein
fostering connections and facilitating meaningful interactions.
1
1.2Scope of the project:
● One-to-one messaging: Users can send and receiveprivatemessagestoand
from other users. Users can send emoji along with text.
● Real-time communication: Messages are delivered instantly, providing a
seamless and interactive experience.
● Securepasswordauthentication:Userscancreateaccountsandloginusing
secure passwords to protect their data.
● File sharing:Users can send and receive files, suchas images and video clips.
● Emoji:Users can send emoji along with text.
● Userprofiles:Userscancreateprofileswithbasicinformation,suchasname
and profile picture.
● User Blocking: It provides the feature to block aspecificpersonsothatthe
user can feel safe.
● Message history: Users can view previous messages to find specific
conversations.
● Extensive mobile app development: The focus will be on developing a
web-based chat application, with potential mobile app development
considered in future iterations.
2
CHAPTER: 2
FEASIBILITY STUDY
2.1Introduction to feasibility study:
Afeasibilitystudyisaprocessofanalysingandidentifyingifaproblemcanbesolved
or not solved, focusing on helping answer the essential question of “Should we
continue the proposed project ideas?” All activities ofthestudyaredirectedtoward
helpinganswerthisquestion.Afeasibilitystudyisgenericandcanbeappliedtoany
typeofproject,beitforsystemsandsoftwaredevelopment,makinganacquisition,or
anyotherproject.Afeasibilitystudyisatestofasystemaccordingtoitsworkability
to meet user needs and effective use of the resources. We can test our system by
differenttypesoffeasibility.Thisstudyhassixpartstoconductaneffectivefeasibility
study:
1. The Project Scope: This is used to define the business problem and/or
opportunity to be addressed. The adage,” The problem well stated is half
solved.” is very apropos. The scope should be definitive and to the point
rambling narrative serves no purpose and can confuse project participants.
2. The current analysis: This is used to define and understand the current
methodofimplementation,suchasasystem,aproject,etc.Fromthisanalysis,
it is not uncommon to discover there is actually nothing wrong with the
current system or product other than somemisunderstandingsregardingitor
perhaps it needs some simple modification as opposed to a major overhaul.
3. Requirements: How requirements are defined depends on the object of the
project’sattention.Forexample,howrequirementsarespecifiedforaproduct
is substantially different than requirements for an edifice, a bridge, or an
informational system.
4. The approach: Represents the recommended solution orcourseofactionto
satisfy the requirements.
5. Evaluation: Examine the cost-effectiveness of the approach selected. This
begins with an analysis of the eliminated total cost of the project.
6. Review: All of the preceding elements are then assembled into a feasibility
study and a formal review is conducted with all parties involved.
3
2.2Technical Feasibility:
Based on the proposed featuresandtechnologies,theChatAppprojectistechnically
feasible.FrontendDevelopment(ReactJs&Tailwind),BackendDevelopment(Node&
Express), Real-Time Communication(Socket.io), Security(Salt & Hashing),
Database(MongoDB). By addressing potential challenges and following best
practices, the project can be successfully implemented to provide a reliable and
scalable real-time communication platform.
2.3Economical feasibility:
The economic viability of ChatApp hinges on a careful analysis of its costs and
potentialrevenuestreams.Here'sabreakdownofkeyfactorsinfluencingitseconomic
feasibility:
● Development Costs (Labor, Hardware & Software, Project Management
Tools).
● Maintenance Costs (Server, Updates, Bugs Fix).
● Return on Investment (Projected Revenue, Discounted Cash Flow Analysis).
By thoroughly examining these factors, youcanmakeinformedeconomicdecisions
regarding the development and launch of ChatApp.
2.4Operational feasibility:
● User Acceptance: Will users find the website easy to use and beneficial?
Conducting user surveys or usability tests can help assess this.
● Resource Availability: Does the project have access to the necessary
resources, such as hosting infrastructure, and development tools?
● Cost-Effectiveness: Is the project cost-effective in terms of development,
maintenance, and operation?
● Scalability: Is the projectscalabletoaccommodatepotentialgrowthinusers
and data volume?
2.5Existing System:
● Web-basedchatapplications:Existingweb-basedchatplatformsthatrequire
installation of browser extensions or plugins.
● Installation requirements: Many existing chat applications require users to
install software or browser extensions, which can be inconvenient for users
who prefer not to install additional applications.
4
● Lack of privacy features: Some existing systems may not have robust
privacyfeatures,suchastheabilitytodeleteentirechatsorpreventmessages
from being unsend.
2.6Proposed System:
● Web-based platform: A fully web-based platform thatdoesnotrequireany
installation.
● Privacy-focused features:
○ No message unsending:Messages can’t be unsend oncethey are sent.
○ Complete chat deletion: Users can delete entire chat histories from
the database.
○ Secure communication: Encryption and other security measures to
protect user data.
● User-friendly interface: A simple and intuitive interfacethatiseasytouse,
even for non-technical users.
2.7Hardware & Software Requirements:
Hardware Requirements:
● Computer:Anymoderncomputercapableofrunningacodeeditorandaweb
browser will suffice.
● Internet Connection: Required for fetching data from the Database and
posting to the website.
● RAM:A minimum of 4GB RAM is needed for a good userexperience.
Software Requirements:
● Frontend:
○ ReactJS:A JavaScript library for building user interfaces.
○ Tailwind CSS:A CSS framework for rapid UI development.
● Backend:
○ Node.js:A JavaScript runtime environment.
○ Express.js:A web framework for building Node.js applications.
○ Socket.io:A real-time communication library.
● Database:
○ MongoDB:A NoSQL document database.
5
CHAPTER: 3
PROBLEM FORMULATION AND REQUIREMENT
PHASE
3.1Problem Statement:
Many existing communication platforms require userstoinstallsoftwareorbrowser
extensions, which can be inconvenient and pose security risks. Additionally, these
platformsmaynotoffersufficientprivacyfeatures,suchastheabilitytodeleteentire
chat histories or prevent messages from being unsend.
3.2Aim and Objective of the project:
Aim:
TheprojectaimstoDevelopasecureandprivateweb-basedcommunicationplatform,
Provideuserswiththeabilitytodeleteentirechathistories,Implementstrongprivacy
features, Create a user-friendly interface.
Objectives:
● Secure and Private Communication: Ensure that all user data, including
messages and personal information, is protected from unauthorised access.
Provide a platform for one-to-one communication.
● Robust Encryption: Implement strong encryption algorithms, such as salt
and hashing, to protect user passwords and ensure data integrity.
● Real-Time Communication: Utilise Socket.io to enable instant message
delivery and create a dynamic and interactive user experience.
● Accessibility:Ensure that the ChatApp is accessibleto all users.
● Data Integrity and Confidentiality: Maintain the accuracy and privacy of
user data throughout transmission and storage.
● User Blocking: It provides the feature to block aspecificpersonsothatthe
user can feel safe.
● User Profile/Avatar: It provides a feature to add a profile pic or an avatar
using the name of the user.
● Emoji:Users can send emoji along with text.
● Security Best Practices: Stay updated with the latestsecuritybestpractices
and implement measures to safeguard user data against emerging threats.
6
● Scalability: Design the app architecture to be scalable, allowing for future
updates and integration of new features.
3.3Module Description:
1. Frontend Modules:
○ ReactJS: A well-established and widely used JavaScript library for
building user interfaces, providing a solid foundation for the frontend.
○ TailwindCSS:Autility-firstCSSframeworkthatoffersflexibilityand
efficiency in styling the application.
2. Backend Modules:
○ Node.js: A popular runtime environment for JavaScript, providing a
scalable and efficient backend.
○ Express.js: A versatile web framework that simplifies the
development of server-side logic.
○ MongoDB:ANoSQLdatabasesuitableforhandlingunstructureddata
like chat messages, offering flexibility and scalability.
3. Real-Time Communication Module:
○ Socket.io: A reliable and mature library for building real-time
applications, capable of handling the requirements of a chat
application.
4. Security Module:
○ Encryption: Using salt and hashing for password storage and
encryption of sensitive data ensures security.
○ Authentication: Implementing secure authentication mechanisms
protects user accounts and data.
7
CHAPTER: 4
SYSTEM DESIGN
4.1Data Flow Diagram:
Figure: 4.1.1 Data Flow Diagram
8
CHAPTER: 5
RESULT AND DISCUSSIONS
5.1 Screenshots:
1) Login Page:
Figure: 5.1.1 Login Page
2) Signup Page:
Figure: 5.1.2 Signup Page
9
3) Home Page:
Figure: 5.1.3 Home Page
4) Conversation:
Figure: 5.1.4 Conversation
10
5) Updating Name & Profile_pic:
Figure: 5.1.5 Updating Name & Profile_pic
6) Forgot Password:
Figure: 5.1.6 Forgot Password
11
CHAPTER: 5
CONCLUSION AND FUTURE SCOPE
5.1Conclusion:
The ChatAppprojectsuccessfullyaddressesthegrowingneedforsecureandprivate
communicationplatformsthatprioritiseuserprivacyandconvenience.Byprovidinga
web-based application that does not requireanyinstallationandoffersfeaturessuch
as complete chat deletion and message unsending prevention, the ChatApp aims to
cater to the needs of users who value these aspects. The ChatApp project has the
potential to be a valuable addition to the landscape of communication platforms,
offering users a secure and convenient way to connect and communicate online.
5.2Future Scope:
1. Calling: Implement voice and video calling featuresfor chats.
2. File sharing: Expand file sharing capabilitiestoincludelargerfilesizesand
different file formats.
3. Integration with other platforms: Integrate with social media platforms,
calendars, or task management tools to enhance user experience.
4. AI-powered features: Explore incorporating AI features such as natural
language processing for intelligent chat suggestions or sentiment analysis.
5. Customizationoptions:Allowuserstocustomisetheirchatinterface,themes,
and notification settings.
6. Partnerships: Collaborate with other businesses or organisations to offer
complimentary services or cross-promote products.
12
REFERENCES
● https://react.dev/
● https://nodejs.org/en/
● https://www.mongodb.com/
● https://www.npmjs.com/
● https://www.youtube.com
● https://www.w3schools.com/
● https://tailwindcss.com/
13
ANNEXURE
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="ChatApp created using create-react-app" />
<link rel="manifest" href="manifest.json" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh
0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Login</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcI
dslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</html>
14
App.js
import './App.css';
import { Outlet } from 'react-router-dom';
import { Toaster } from 'react-hot-toast';
function App() {
return (
<>
<Toaster />
<main >
<Outlet />
</main>
</>
);
}
export default App;
App.css
.scrollbar::-webkit-scrollbar {
width: 10px;
}
.scrollbar::-webkit-scrollbar-track {
@apply bg-slate-100
}
.scrollbar::-webkit-scrollbar-thumb {
@apply bg-slate-200 rounded-full
}
15
App.test.js
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { RouterProvider } from 'react-router-dom';
import router from './routes';
import { Provider } from 'react-redux'
import { store } from './redux/store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<RouterProvider router={router}>
<App />
</RouterProvider>
</Provider>
16
</React.StrictMode>
);
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@apply bg-slate-200
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
routes/index.js
import App from "../App";
import Home from "../pages/Home";
import LoginPage from "../pages/LoginPage";
import AuthLayouts from "../layout/AuthLayouts";
import RegisterPage from "../pages/RegisterPage";
import MessagePage from "../components/MessagePage";
17
import Forgotpassword from "../pages/Forgotpassword";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element: <App />,
children: [
{
path: "register",
element: <AuthLayouts><RegisterPage /></AuthLayouts>
},
{
path: "login",
element: <AuthLayouts><LoginPage /></AuthLayouts>
},
{
path: 'forgot-password',
element: <AuthLayouts><Forgotpassword /></AuthLayouts>
},
{
path: "",
element: <Home />,
children: [
{
path: ':userId',
element: <MessagePage />
18
}
]
}
]
}
])
export default router
redux/store.js
import userReducer from './userSlice'
import { configureStore } from '@reduxjs/toolkit'
export const store = configureStore({
reducer: {
user: userReducer
},
})
redux/userSlice.js
import { createSlice } from '@reduxjs/toolkit'
const initialState = {
_id: "",
name: "",
email: "",
profile_pic: "",
token: "",
onlineUser: [],
19
socketConnection: null
}
export const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
setUser: (state, action) => {
state._id = action.payload._id
state.name = action.payload.name
state.email = action.payload.email
state.profile_pic = action.payload.profile_pic
state.bg_color = action.payload.bg_color
},
setToken: (state, action) => {
state.token = action.payload
},
logout: (state) => {
state._id = ""
state.name = ""
state.email = ""
state.profile_pic = ""
state.token = ""
state.socketConnection = null
state.bg_color = ""
},
setOnlineUser: (state, action) => {
20
state.onlineUser = action.payload
},
setSocketConnection: (state, action) => {
state.socketConnection = action.payload
}
},
})
// Action creators are generated for each case reducer function
export const { setUser, setToken, logout, setOnlineUser, setSocketConnection } =
userSlice.actions
export default userSlice.reducer
pages/LoginPage.js
import React from 'react'
import axios from 'axios'
import toast from 'react-hot-toast';
import Avatar from '../components/Avatar';
import Loading from '../components/Loading';
import { useDispatch } from 'react-redux';
import { setToken } from '../redux/userSlice';
import { Link, useNavigate } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
const LoginPage = () => {
const [loading, setLoading] = React.useState(false)
const [isEmailValid, setEmailValid] = React.useState(false)
21
const [showPassword, setShowPassword] = React.useState(false);
const [data, setData] = React.useState({ email: "", password: "", userId: "",
profile_pic: "", name: "", bg_color: "" });
const navigate = useNavigate()
const dispatch = useDispatch()
const handleOnChange = (e) => {
const { name, value } = e.target
setData((prev) => ({
...prev,
[name]: value
}))
}
const handleEmailSubmit = async (e) => {
setLoading(true)
e.preventDefault()
e.stopPropagation()
const URL = `${process.env.REACT_APP_BACKEND_URL}/api/email`
try {
if (data.email) {
const response = await axios.post(URL, data)
if (response.data.success) {
setEmailValid(true)
toast.success(response.data.message)
setData(prev => ({ ...prev, userId: response.data.data._id, profile_pic:
response.data.data.profile_pic, name: response.data.data.name, bg_color:
response.data.data.bg_color }))
setLoading(false)
22
}
}
else {
setLoading(false)
toast.error("Please Enter Something First.")
}
} catch (error) {
toast.error(error?.response?.data?.message)
setLoading(false)
}
}
const handlePasswordSubmit = async (e) => {
setLoading(true)
e.preventDefault()
e.stopPropagation()
const URL = `${process.env.REACT_APP_BACKEND_URL}/api/password`
try {
const response = await axios({
method: 'post',
url: URL,
data: {
userId: data.userId,
password: data.password
},
withCredentials: true
})
23
if (response.data.success) {
toast.success(response.data.message)
dispatch(setToken(response?.data?.token))
localStorage.setItem('token', response?.data?.token)
setLoading(false)
navigate('/')
}
} catch (error) {
toast.error(error?.response?.data?.message)
setLoading(false)
}
}
return (
<div className='mt-5'>
<div className='bg-white w-full max-w-md rounded overflow-hidden p-4 mx-auto'>
{loading &&
(<div className='fixed top-0 bottom-0 left-0right-0flexjustify-centeritems-center
bg-gray-700 bg-opacity-40 z-10'>
<Loading />
</div>)
}
{
isEmailValid &&
<div className='d-flex justify-content-center'>
<Avatar
width={70}
24
height={70}
name={data.name}
imageUrl={data.profile_pic}
bg_color={data.bg_color}
/>
</div>
}
<h1 className='text-center mt-2 fw-bold' style={{ fontSize: "25px" }}>Login</h1>
<div className="form-floating mt-12">
<input name="email" type="email" className="form-control" id="floatingEmail"
placeholder="name@example.com" value={data.email}
onChange={handleOnChange} required autoFocus readOnly={isEmailValid} />
<label htmlFor="floatingEmail">Email address</label>
</div>
{
isEmailValid ?
<>
<div className="d-flex form-floating my-3">
<input name="password" type={showPassword ? "text" : "password"}
className="form-control" id="floatingPassword" value={data.password}
onChange={handleOnChange} required />
<label htmlFor="floatingPassword">Password</label>
<button className="ms-2" type="button" onClick={() => {
setShowPassword(!showPassword)
}}>
{!showPassword ? (
<FontAwesomeIcon icon={faEye} />
25
) : (
<FontAwesomeIcon icon={faEyeSlash} />
)}
</button>
</div>
<p className='text-right'><Link to={"/forgot-password"}
className='hover:text-primary font-semibold text-decoration-underline'>Forgot
password</Link></p>
<button type="button" className="btn my-3 btn-primary w-100"
onClick={handlePasswordSubmit}>Login</button>
</>
:
<>
<button type="button" className="btn btn-primary my-4 w-100"
onClick={handleEmailSubmit}>Let's Go</button>
<p className='text-center mb-2'>New User? <Link to={"/register"}
className='hover:text-primary font-semibold
text-decoration-underline'>SignUp</Link></p>
<p className='text-center'>Don't remember your password? <Link
to={"/forgot-password"} className='hover:text-primary font-semibold
text-decoration-underline'>Forgot password</Link></p>
</>
}
</div>
</div>
)
}
export default LoginPage
26
pages/RegisterPage.js
import React from 'react'
import axios from 'axios'
import toast from 'react-hot-toast';
import Loading from '../components/Loading'
import uploadFile from '../helpers/uploadFile';
import { IoClose } from "react-icons/io5";
import { Link, useNavigate } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
const RegisterPage = () => {
const [otp, setOtp] = React.useState()
const [otpSent, setOtpSent] = React.useState(false)
const [loading, setLoading] = React.useState(false)
const [uploadPhoto, setUploadPhoto] = React.useState("")
const [showPassword, setShowPassword] = React.useState(false)
const [emailVarified, setEmailVerified] = React.useState(false)
const navigate = useNavigate()
const [data, setData] = React.useState({
name: "",
email: "",
password: "",
profile_pic: "",
bg_color: ""
})
const bgColor = [
27
'bg-slate-200',
'bg-teal-200',
'bg-red-200',
'bg-green-200',
'bg-yellow-200',
'bg-gray-200',
"bg-cyan-200",
"bg-sky-200",
"bg-blue-200"
]
React.useEffect(() => {
document.title = "SignUp"
const randomNumber = Math.floor(Math.random() * 9)
setData((prev) => ({
...prev,
bg_color: bgColor[randomNumber]
}))}, [])
const handleOtpChange = (e) => {
setOtp(e.target.value)
}
const handleOnChange = (e) => {
const { name, value } = e.target
setData((prev) => {
return {
...prev,
[name]: value
28
}})}
const handleUploadPhoto = async (e) => {
setLoading(true)
const file = e.target.files[0]
const uploadPhoto = await uploadFile(file)
setUploadPhoto(file)
setData((prev) => ({
...prev,
profile_pic: uploadPhoto?.url
}))
setLoading(false)
}
const handleClearUploadPhoto = (e) => {
e.stopPropagation()
e.preventDefault()
setUploadPhoto(null)
}
const handleRegisterSubmit = async (e) => {
setLoading(true)
e.preventDefault()
e.stopPropagation()
const URL = `${process.env.REACT_APP_BACKEND_URL}/api/register`
try {
const response = await axios.post(URL, {
...data,
otp
29
})
if (response.data.success) {
toast.success(response.data.message)
setData({
name: "",
email: "",
password: "",
profile_pic: "",
bg_color: ''
})
setLoading(false)
navigate('/login')
}
} catch (error) {
toast.error(error?.response?.data?.message)
setLoading(false)
}
}
return (
<div className='mt-5'>
<div className='bg-white w-full max-w-md rounded overflow-hidden p-4
mx-auto'>
<h1 className='text-center mt-2 fw-bold' style={{ fontSize: "25px"
}}>SignUp</h1>
{
!otpSent ?
<form onSubmit={sendOtp}>
30
<>
<div className="form-floating mt-12">
<input name="email" type="email" className="form-control" id="floatingEmail"
placeholder="name@example.com" value={data.email}
onChange={handleOnChange} required autoFocus readOnly={emailVarified} />
<label htmlFor="floatingEmail">Email address</label>
</div>
<button type="button" className={`btn btn-primary my-3w-100d-${emailVarified
&& "none"}`} onClick={checkEmail}>Check Email</button>
</>
{emailVarified &&
<>
<div className="form-floating my-3">
<input name="name" type="text" className="form-control" id="floatingInput"
value={data.name} onChange={handleOnChange} required autoFocus />
<label htmlFor="floatingInput">Enter Your Name</label>
</div>
<div className="flex form-floating mb-3">
<input name='password' type={showPassword ? "text" : "password"}
className="form-control" id="floatingPassword" placeholder="Password"
value={data.password} onChange={handleOnChange} required />
<label htmlFor="floatingPassword">Password</label>
<button className="ms-2" type="button" onClick={() => {
setShowPassword(!showPassword)
}}>
{!showPassword ? (
<FontAwesomeIcon icon={faEye} />
31
) : (
<FontAwesomeIcon icon={faEyeSlash} />
)}
</button>
</div>
<div className='flex flex-col mb-3'>
<label htmlFor='profile_pic'>
<div className='h-14 bg-slate-200 flex justify-center items-center border rounded
hover:border-primary cursor-pointer'>
<p className='text-sm max-w-[300px] text-ellipsis line-clamp-1'>
{
uploadPhoto?.name ? uploadPhoto?.name : "Upload profile photo"
}
</p>
{
uploadPhoto?.name && (
<button className='text-lg ml-2 hover:text-red-600'
onClick={handleClearUploadPhoto}>
<IoClose />
</button>
)
}
</div>
</label>
<input
type='file'
32
id='profile_pic'
name='profile_pic'
className='bg-slate-100 px-2 py-1 focus:outline-primary hidden'
onChange={handleUploadPhoto}/>
</div>
<button type="submit" className="btn btn-primary w-100">Send Otp</button>
</>}
</form>
:
<form onSubmit={handleRegisterSubmit}>
<div className="form-floating mt-12">
<input name="otp" type="number" className="form-control" id="floatingLabel"
value={otp} onChange={handleOtpChange} required autoFocus />
<label htmlFor="floatingLabel">Enter Otp</label>
</div>
<button type="submit" className="btn btn-primary mt-3 w-100">Verify
Otp</button>
</form>}
<p className='mt-3 text-center'>Already have an account? <Link to={"/login"}
className='hover:text-primary font-semibold
text-decoration-underline'>Login</Link></p>
{loading &&
(<div className='fixed top-0 bottom-0 left-0right-0flexjustify-centeritems-center
bg-gray-700 bg-opacity-40 z-10'>
<Loading />
</div>)}</div></div>)}
export default RegisterPage
33
You might also like
- Jaypee University of Information Technology, Waknaghat - 173234 (India)No ratings yetJaypee University of Information Technology, Waknaghat - 173234 (India)22 pages
- Web Based Chat Application Minor ProjectNo ratings yetWeb Based Chat Application Minor Project20 pages
- Projectsyn (2) (1) (1) (1) (1) - MergedNo ratings yetProjectsyn (2) (1) (1) (1) (1) - Merged26 pages
- CSE NIT FINAL YEAR Project Proposal 7th SemesternewNo ratings yetCSE NIT FINAL YEAR Project Proposal 7th Semesternew29 pages
- Abhay & Shana Major-Project-8th-Sem NewNo ratings yetAbhay & Shana Major-Project-8th-Sem New14 pages
- Web Based Chat Application Minor ProjectNo ratings yetWeb Based Chat Application Minor Project20 pages
- Final Report On Chat Application Using MernNo ratings yetFinal Report On Chat Application Using Mern50 pages
- Sri Siddhartha Academy of Higher EducationNo ratings yetSri Siddhartha Academy of Higher Education33 pages
- Vasantrao Naik Mahavidyalaya: Mr. Sunil BankarNo ratings yetVasantrao Naik Mahavidyalaya: Mr. Sunil Bankar52 pages
- Realtime Chat Application Document Batch-09No ratings yetRealtime Chat Application Document Batch-0994 pages
- BC DACS4 NguyenDinhDuyThai 22IT.B186 TranNhatLam 22IT.B115No ratings yetBC DACS4 NguyenDinhDuyThai 22IT.B186 TranNhatLam 22IT.B11524 pages
- Netiq Identity Manager: Setup Guide For LinuxNo ratings yetNetiq Identity Manager: Setup Guide For Linux322 pages
- Presentation About Hacking (Cybersecurity)No ratings yetPresentation About Hacking (Cybersecurity)15 pages
- Gartner Research Cloud Computing Planning Guide 2019100% (1)Gartner Research Cloud Computing Planning Guide 201959 pages
- Student Management System Proposal Slide PDFNo ratings yetStudent Management System Proposal Slide PDF16 pages
- AWS FullStack Vulnerability Threat Detection ChecklistNo ratings yetAWS FullStack Vulnerability Threat Detection Checklist3 pages
- Blazic (2021) - The Cybersecurity Labour Shortage in EuropeNo ratings yetBlazic (2021) - The Cybersecurity Labour Shortage in Europe13 pages
- The Generations of Computer From First To FifthNo ratings yetThe Generations of Computer From First To Fifth33 pages
- Excel 2007 Advanced Report Development PDFNo ratings yetExcel 2007 Advanced Report Development PDF2 pages
- N-Tier Architecture in University PortalsNo ratings yetN-Tier Architecture in University Portals2 pages
- ATM Banking Software Support-Submitting A Software Support IncidentNo ratings yetATM Banking Software Support-Submitting A Software Support Incident1 page
- Een Inkijk in Werken Bij CERN - Eveline SintnicolaasNo ratings yetEen Inkijk in Werken Bij CERN - Eveline Sintnicolaas19 pages
- Zscaler Private Access: Fast, Secure Access To Private Applications With Cloud-Delivered Zero Trust Network Access (ZTNA)No ratings yetZscaler Private Access: Fast, Secure Access To Private Applications With Cloud-Delivered Zero Trust Network Access (ZTNA)4 pages
