A

MAJOR PROJECT
ON
“ AMAZON CLONE ”
SUBMITTED IN PARTIAL FULFILMENT FOR THE AWARD OF
BECHELOR OF TECHNOLOGY IN
COMPUTER SCIENCE & ENGINEERING
SUBMITTED TO
RAJIV GANDHI PROUDYOGIKI VISWAVIDYALAYA
BHOPAL (M.P.)

SUBMITTED BY
ABHAY SINGH-0614CS211001
SHANA PARBEEN- 0614CS223D10
UNDER THE GUIDENCE OF
ASST. PROF. SANTOSH PATEL
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
PANDIT DEV PRABHAKAR SHASTRI COLLEGE OF TECHNOLOGY
CHHATARPUR (M.P.)
PANDIT DEVPRABHAKAR SHASTRI COLLEGE OF TECHNOLOGY
CHHATARPUR(MP)
 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

CERTIFICATE
THIS IS TO CERTIFY THAT MAJOR PROJECT ENTITLED " AMAZON CLONE ” SUBMITTED TO
RAJIV GANDHI PROUDYOGIKI VISHWAVIDYALAYA, BHOPAL (M.P.) FOR PARTIAL FULFILMENT
FOR THE AWARD OF THE DEGREE OF THE BACHELOR OF TECHNOLOGY IN COMPUTER SCIENCE
& ENGINEERING.

ABHAY SINGH – 0614CS211001

SHANA PARBEEN- 0614CS223D10

HOD ( CSE ) PROJECT GUIDE BY

PROF. SANDEEP SHARMA ASST. PROF. SANTOSH PATEL

Head Of Institude
Dr. J.SONI
PT DEV PRABHAKAR SHASTRI COLLEGE OF TECHNOLOGY
 PANDIT DEVPRABHAKAR SHASTRI COLLEGE OF TECHNOLOGY
CHHATARPUR(MP)

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

APPROVAL CERTIFICATE

THIS IS HEREBY CERTIFIED THAT THE MAJOR PROJECT ENTITLED " AMAZON
CLONE" BEING SUBMITTED TO THE RGPV, BHOPAL IS A GENUINE WORK
PERFORMED BY THEM.

ABHAY SINGH – 0614CS211001

SHANA PARBEEN- 0614CS223D10

INTERNAL EXAMINER EXTERNAL

EXAMINER

ACKNOWLEDGEMENT
THIS IS ONE OF THE BEST MOMENTS OF OUR B.TECH PROGRAM TO PUBLICLY
ACKNOWLEDGMENT THOSE WHO HAVE CONTRIBUTED IN MANY DIFFERENT
WAYS TO MAKE MY SUCCESS A PART OF THEIR OWN. THE COMPLETION OF THE
MINOR PROJECT DEPENDS UPON THE CO-OPERATION, COORDINATION AND
COMBINED EFFECTS OF SEVERAL RESOURCES OF KNOWLEDGE ENERGY.

WE HEARTILY THANKS TO ASST. PROF. SANTOSH PATEL, WHO HAVE SUPPORTED

IN MAJOR PROJECT, FACULTIES OF DEPARTMENT OF COMPUTER SCIENCE &
ENGINEERING, FOR ACCEPTING US TO WORK UNDER THEIR VALUABLE
GUIDANCE, CLOSELY SUPERVISED THIS WORK OVER THE PAST FEW MONTHS
AND OFFERING MANY INNOVATIVE IDEAS AND HELPFUL SUGGESTIONS, WHICH
LED TO THE SUCCESSFUL COMPLETION OF THIS DISSERTATION WORK.

WE ARE ESPECIALLY THANKFUL DR.J.SONI PRINCIPAL, PDSCT, CHHATARPUR FOR

HIS KIND CO- OPERATION AND RENDERING ME ALL POSSIBLE FACILITIES.

WE ARE THANKFUL TO ALL STAFF MEMBERS OF THE CSE DEPARTMENT AND MY

FRIENDS FOR THEIR TIMELY HELP CO-OPERATION AND SUGGESTION DURING MY
PROJECT WORK. LASTLY BUT NOT THE LEAST, WE MUST EXPRESSTHANKS TO MY
FAMILY, WITHOUT THEIR MORAL SUPPORT IT WAS IMPOSSIBLE FOR ME TO
COMPLETE THIS MAJOR PROJECT WORK.

ABHAY SINGH – 0614CS211001

SHANA PARBEEN- 0614CS223D10

CONTENTS
(AMAZON CLONE)

Index:-
  Introduction
 Objectives of the Project
 Other Tools and Libraries

 Features of the Chat Application

o User Authentication & Security
o Real-time Messaging
o UI/UX Design
o Additional Functionalities
 System Architecture
o Backend Architecture
o Frontend Architecture
o Database Design
 Implementation Details
o User Authentication (JWT)
o WebSocket for Real-time Communication
o Message Storage & Management
 Testing
 Challenges Faced and Solutions
 Future scope
 Conclusion
 Snapshots

 INTRODUCTION:

The Chat Application Is A Real-Time Messaging Platform Developed Using The Mern
(Mongodb, Express.Js, React.Js, Node.Js) Stack. It Provides A Seamless Communication
Experience With Modern Ui/Ux And Essential Messaging Features. The Application
Ensures User Authentication And Security Using Jwt, While Websocket Enables Real-
Time Chat Functionality. With Features Like A Typing Indicator, Chat Deletion, And
Password Recovery, The App Delivers An Efficient And User-Friendly Experience.

 OBJECTIVES:

The Objective Of This Project Is To Develop A Secure And Efficient Real-Time Chat
Application With Modern UI/UX. It Aims To Provide Seamless Communication With
Essential Features Like Authentication, Message Deletion, And Real-Time Updates While
Ensuring User Security And Convenience.

 TECHNOLOGY STACK:

The Chat Application Is Developed Using The Following Technologies:

 Frontend: React.Js, Tailwind CSS, React-Toastify
 Backend: Node.Js, Express.Js
 Database: Mongodb
 Authentication: JSON Web Token (JWT)
 Real-Time Communication: Websocket
 Other Tools: Bcrypt For Password Hashing, Nodemailer For Email-Based Password
Recovery

 OTHER TOOLS AND LIBRARIES:

 Yarn: As the package manager.

 Nodemon: For monitoring changes in the code and restarting the server automatically.
  JSON Web Tokens: For secure authentication.

 AI TOOLS:

 Gemini: Used for error detection and code analysis, identifying syntax errors, logical
issues, and potential bugs, ensuring high code quality.
 ChatGPT: Provided real-time troubleshooting, explained issues, suggested fixes, and
optimized code, reducing development time and improving efficiency.

 Features of the Chat Application:

User Authentication & Security

 Users can register with a unique username and email ID.
 Login is possible using either email or username.
 Passwords are stored securely using hashing techniques.
 JWT-based authentication ensures secure sessions.

Real-time Messaging
 Messages are delivered in real-time using WebSocket.
 Typing indicators notify users when someone is typing.

UI/UX Design
 The application features a modern, colorful UI for an engaging user experience.
 The user’s profile is represented with an auto-generated logo based on the first
letter of their name.
 The layout is responsive, ensuring usability on both desktop and mobile devices.
Additional Features:
1. Sound ON/OFF for Notifications:
Users can toggle the sound for chat notifications, enabling them to mute or enable sound alerts

as per their preference.

 2. Light Mode/Dark Mode:
Users can switch between light and dark modes to customize the interface for their comfort and
reduce eye strain.
3. Talking Accessibility:
Aimed at improving accessibility for users with speech impairments or those who prefer voice
interaction, this feature enables the app to support voice commands or text-to-speech functionalities.
4. Editing Messages:
Users can edit their sent messages, allowing them to correct or modify previously sent text.
5. Profile Photo Update & Resume/Pause in Profile Photos:
Users can update their profile photo and have the option to pause or resume changing the photo as
needed.

Additional Functionalities
 Forgot Password Feature: Users can reset their password using email verification.
 Notifications: React-Toastify is used to show alerts for new messages, login status,
and errors.

 System Architecture:

Backend Architecture
 Node.js and Express.js handle API requests and business logic.
 JWT is used for authentication and maintaining user sessions.
 WebSocket enables real-time communication.
Frontend Architecture
 React.js is used for dynamic UI rendering.
 Tailwind CSS ensures a responsive and attractive design.
 React-Toastify provides notifications for better user experience.
Database Design
 MongoDB is used to store user details, messages, and authentication tokens.
 Collections: Users, Messages, and Authentication Tokens.

 Implementation Details:

User Authentication (JWT)

 Users register using a unique username and email.
 Passwords are securely stored using bcrypt hashing.
 JWT tokens are issued upon successful login to manage sessions securely.

WebSocket for Real-time Communication

 Messages are exchanged between users using WebSocket, ensuring instant
delivery.
 The typing indicator is implemented using WebSocket events.
Message Storage & Management
 Messages are stored in MongoDB with timestamps.

 Testing and Debugging:

 Unit testing was performed for API endpoints.

 UI responsiveness and WebSocket events were manually tested.

 Debugging tools like Postman were used for API testing.

 Challenges Faced and Solutions:

Challenges- Solutions-
Implementing real-time chat without
Used WebSocket for instant messaging
delays
Handling authentication securely Integrated JWT with token expiration
Designing a responsive UI Used Tailwind CSS for flexible layouts
Implemented email-based verification with
Ensuring secure password reset
Nodemailer

 Future Enhancements:
 Read Receipts: Show when messages are seen.
 Group Chats: Allow users to create and join group conversations.
 Message Reactions: Enable users to react to messages with emojis.
 File Sharing: Support for sending images, videos, and documents.

 Conclusion:
The chat application successfully integrates real-time messaging with authentication, a
modern UI, and essential chat functionalities. Built with MERN technologies, it offers a
secure and engaging communication platform. Future updates will focus on improving
user experience and adding more features.
Snapshots: