Project Report
Website clone(WhatsApp Frontend development)
Name: Aadesh Gupta

Problem Statement
Create clones of famous websites such as Netflix, YouTube, Twitter,
Amazon, Flipkart, Swiggy, Zomato, IRCTC, etc. The website you are
making a clone of should be reputed and not a dull one. It should
contain challenging design to get your project approved.

Problem Solution:
Initially WhatsApp has a simple, contemporary design that is not too
difficult to imitate. As a result, rather than having to struggle with
challenging design features, learners may concentrate on honing their
front-end development abilities. Second, WhatsApp offers an easy-
to-use design that enables seamless interaction between users and
the service. Students may obtain practical experience in developing
user-friendly interfaces by imitating this style. In conclusion, creating a
replica of the WhatsApp website may be a great method for learners
to improve their front-end programming abilities while working on a
practical project with wide appeal.

Abstract
A website called a "WhatsApp clone" is made to mimic the key functions
of the well known social media chatting app WhatsApp. To give users
another venue for exchanging quick messages, photographs, and links
while connecting with others in real-time, a WhatsApp clone was
developed.Message privately. End-to-end encryption and privacy controls.
Stay connected. Message and call for free* around the world. Build
community. Group conversations made simple. Express yourself. Say it
with stickers, voice, GIFs and more. WhatsApp business. Reach your
customers from anywhere using the application. Modern online
technologies like HTML , CSS, JavaScript are used in the creation of
WhatsApp clones. To give user the same experience as the official
WhatsApp web app. Since the main domain was front-end development
so no backend language is used to obtain the result and project is totally
made using front-end development languages and frameworks

Workflow Diagram

Study official WhatsApp Website
When creating a copy of WhatsApp, developers must thoroughly comprehend the
platforms features and operations by studying the official website. Developers may
learn about the platform's architecture, design patterns, and user experience by
examining the official website. These insights can then be applied to the cloned
platform to provide consumers a comparable experience. Studying the official
website may also assist developers in figuring out how to improve or separate the
copied platform from the original producing a distinctive and cutting edge platform
that targets a certain niche market. A thorough grasp of the WhatsApp, which may
be included into the copied platform to give further features and functions can also
be gained by developers by studying the official website. To sum up, it is imperative
for developers to thoroughly grasp the platform, its features, and its architecture
before copying WhatsApp in order to reproduce or enhance it in the cloned
platform.

Choose Tools and Technology
Languages used for Front-end Development
❖ HTML
❖ CSS
❖ Javascript
❖ ReactJs
❖ Tailwind CSS
❖ Visual Studio Code is used as IDE
❖ Npm

Mockup and Wireframes

Mockup and Wireframes

Data Required
As it is a front-end clone of WhatsApp, the ui/ux design was took
into account and attempted to be exact. Every webpage that is
cloned as part of the project is carefully designed, and the code is
done to be simple to comprehend and update as needed.

Resource utilization
The front-end of WhatsApp is replicated while taking resource use
into account. The integration of several resources, including as
HTML, CSS, JavaScript, pictures, and other media files, is
necessary for front-end development. To make sure that the
website operates well and offers a smooth user experience, it is
crucial to optimise the usage of these resources.

Lines of code

Thank You