Similarity Report ID: oid:16158:45045424

PAPER NAME

AAYUSH KUUMAR - ( A60205221239).do

cx

WORD COUNT CHARACTER COUNT

3228 Words 19582 Characters

PAGE COUNT FILE SIZE

30 Pages 5.2MB

SUBMISSION DATE REPORT DATE

Oct 18, 2023 12:53 PM GMT+5:30 Oct 18, 2023 12:53 PM GMT+5:30

6% Overall Similarity
The combined total of all matches, including overlapping sources, for each database.
2% Internet database 0% Publications database
Crossref database Crossref Posted Content database
6% Submitted Works database

Excluded from Similarity Report

Bibliographic material Quoted material
Cited material Small Matches (Less then 14 words)

Summary
 ABSTRACT

React.js, a leading JavaScript library, has revolutionized web development

with its efficiency and power in creating dynamic user interfaces. This
innovation is transforming web application development by providing a
lightning-fast update mechanism through its virtual DOM and offering a
structured, component-based architecture that simplifies UI development.
4
React.js has become a cornerstone of modern web development, enabling the
creation of responsive and interactive applications. This abstract emphasizes
the significance of React.js in the web development landscape, underlining its
advantages for building efficient and engaging user interfaces.

Keywords: React.js, JavaScript library, web development, user interfaces, virtual DOM,
component-based architecture, efficiency, web applications

1
 LIST OF FIGURES

Figure No. Figure Caption Page

No.
Figure 3.3.1 Firebase logins , userID and password of users
Figure 3.3.2 Deployment Page Information
1
Figure 3.4.1 Home Page
Figure 3.4.2 Home Page
Figure 3.4.3 Home.js
Figure 3.4.4 Home.css
Figure 3.4.5 Header.js
Figure 3.4.6 Header.css
Figure 3.4.7 Login Page
Figure 3.4.8 Login.js
Figure 3.4.9 Login.css
Figure 3.4.10 Firebase.js
Figure 3.4.11 Basket Page
Figure 3.4.12 Reducer.js
Figure 3.4.13 Checkout.js
Figure 3.4.14 Checkout.css
Figure 3.4.15 Checkoutproduct.js
Figure 3.4.16 Checkoutproduct.css
Figure 3.4.17 Subtotal.js
Figure 3.4.18 Subtotal.css
Figure 3.4.19 Product.js
Figure 3.4.20 Product.css
Figure 3.4.21 Checkout Page
Figure 3.4.22 Payment.js
Figure 3.4.23 Payment.css

2
LIST OF ABBREVIATIONS

S. No. Terms Expanded Form

1 MVC Model View Controller
2 DOM Document Object Model
3 SPA Single Page Application
4 IDE Integrated Development Environment
5 CSS Cascading Style Sheets

3
 2

CONTENTS

Front Page Page No.

Declaration by student i

Certificate by company ii

Certificate by supervisor (Forwarded by HOD/HOI) iii

Acknowledgement iv

Abstract v

List of Figures vi

List of Abbreviations vii

Chapter 1. Introduction 1-3

Chapter 2. Review of Literature and Definition of Problem 4-5

Chapter 3. Materials and Methods 6-21

Chapter 4. Results and Discussion 22

Chapter 5. Conclusion and Future Prospects 23-24

Chapter 6. Summary 25

Chapter 7. References/ Bibliography 26

4
Chapter 1:
Introduction
1.1 React.js
React.js, an open-source JavaScript framework and library, originated from the
hallowed halls of Facebook. It was developed to revolutionize the way we build dynamic
and responsive user interfaces and web applications. At its core, React simplifies the process
of creating interactive web interfaces, allowing developers to work more efficiently with
considerably less code than traditional vanilla JavaScript.
In the realm of React, development revolves around the concept of reusable
components. Think of these components as the independent Lego blocks that you assemble
to create your application. Each component represents a building block in your user
interface, contributing to the overall user experience.
3
React's primary role is to manage the view layer, akin to the 'V' in the model-view-
controller (MVC) pattern. Unlike traditional web development, React encourages the
dissection of complex user interfaces into smaller, reusable components, fostering a more
efficient and modular approach to web application development. This fusion of JavaScript's
speed and efficiency with React's adept DOM manipulation results in faster webpage
rendering and the creation of highly dynamic and responsive web applications.

1.2 A Brief History of React.js

The roots of React.js trace back to 2011 when Facebook sought to enhance user
experiences by building a faster, more responsive, and dynamic user interface. Enter Jordan
Walke, a software engineer at Facebook, who introduced React as the answer to this
challenge. React revolutionized the landscape of web development by providing a structured
approach to building dynamic and interactive user interfaces with reusable components.
React made its debut on Facebook's newsfeed, and with its groundbreaking approach
to DOM manipulation and user interface design, it quickly gained popularity within the
JavaScript ecosystem after being open-sourced.

5
1.3 What Does React.js Do?
To appreciate React's significance, we must first understand the traditional approach
to web development. When you navigate a website, your browser sends requests to the server
for each new page or resource you wish to access. This leads to a back-and-forth loading
pattern, which can be acceptable for simple websites but proves inefficient for data-driven
platforms.
In a conventional JavaScript application, any change in data requires manual DOM
manipulation, resulting in full page reloads. React adopts a distinct approach – that of a
single-page application (SPA). SPAs load a single HTML document initially and
subsequently update only the parts of the webpage that require modification using
JavaScript. This client-side routing eliminates the need for full page reloads, enhancing
performance and delivering a more dynamic user experience.
A pivotal element of React's architecture is the virtual DOM. It acts as a replica of
the actual DOM and is updated immediately when data changes occur. React then smartly
determines the most efficient way to update the actual DOM, rendering it as cost-effective
as possible. This approach results in faster user interfaces that reflect changes swiftly,
without reloading entire pages.

1.4 The Amazon Clone Project

The centerpiece of this internship is the Amazon clone project, a captivating endeavor that
allows us to apply React.js in a practical and tangible manner. While it may not be a full-
fledged Amazon website, it serves as a scaled-down working model closely resembling the
Amazon shopping experience. This project, available online via accessible links, is equipped
with key components designed to emulate the real Amazon website.
Project Objectives
 Home Screen: The Amazon clone project features a dynamic home screen, the very
first interaction point for users. Here, users can explore a catalog of products,
displayed in an Amazon-like fashion. It's the digital storefront where the shopping
journey begins.
 Login Page: Authentication is a vital aspect of any e-commerce platform, and our
project mirrors this by including a secure login page. Users can access their accounts
or create new ones, ensuring a personalized shopping experience.

6
 Checkout Page: The heart of e-commerce lies in the checkout process. The project
replicates this experience by providing a seamless checkout page. Users can review
their selected items, make payment, and place orders.
 Basket Page: Just like the Amazon shopping cart, our clone project offers a basket
page. Users can add products to their basket while shopping and review the items
before proceeding to checkout.
 This project is designed to provide hands-on experience with React.js in the context
of a real-world application. By implementing these fundamental components, we
gain a practical understanding of how React can be used to create user-friendly,
interactive web applications.
 In the following chapters, we will delve deeper into the technical aspects of this
project, exploring the development process, challenges faced, and the insights gained
from working on the Amazon clone. Our journey with React.js will be enriched by
this practical experience, demonstrating the power and versatility of this framework
in modern web development.

7
Chapter 2:
Review of Literature and Definition of Problem
2.1 Review of React.js Concepts, Libraries, and Best Practices
React.js is a dynamic framework known for its unique concepts, libraries, and best practices.
We will review the following key elements:
 Components: React.js development revolves around the creation and management
of components, which are reusable building blocks for user interfaces.
 Virtual DOM: The virtual Document Object Model (DOM) is a core concept that
enhances the efficiency of rendering updates in web applications.
 State Management: Exploring state management techniques, including the use of
libraries like Redux, to handle data and UI interactions.
 Lifecycle Methods: Understanding the various lifecycle methods available in
React.js for controlling component behavior.
 Best Practices: Examining coding conventions and strategies for creating efficient,
maintainable, and scalable React applications. This includes the use of functional
components, hooks, and JSX for enhanced code quality.

2.2 Analysis of E-Commerce Platforms and Their Features

 Product Catalog Display: How e-commerce platforms present product catalogs and
facilitate user navigation.
 User Authentication: The importance of secure and user-friendly authentication
methods for online shopping.
 Shopping Cart Management: Understanding the intricacies of cart management,
including adding, removing, and modifying items.
 Secure Checkout Processes: Examining the steps involved in ensuring secure and
streamlined payment processing

8
2.3 Identification of Challenges and Definition of Problems
Building an Amazon clone using React.js presents a unique set of challenges and problems.
These include:
 Performance Optimization: Ensuring that the application can efficiently handle
extensive product catalogs and maintain fast load times.
 Payment Processing: Implementing secure and seamless payment processing,
including various payment methods and encryption.
 Responsive Design: Creating a responsive user interface that adapts to various
devices and screen sizes.
 Data Consistency: Ensuring that product data remains consistent across the
application and database.
 Scalability: Preparing for the potential growth of the platform and the increased
demands it may face.
 Security: Addressing security concerns to protect user data and transactions.

9
Chapter 3
Materials and Methods
3.1 How to install react js
 Step 1: Install Node.js LTS version from the official website.
 Step 2: Open the command prompt and check the Node.js installation with node -v.
 Step 3: Install Create React App globally by running npm install -g create-react-
app.
 Step 4: Create a new folder for your React app with mkdir your-folder-name.
 Step 5: Move to the newly created folder using cd your-folder-name.
 Step 6: Inside the folder, create your React app by running create-react-app your-
app-name. Remember that app names must be in lowercase.
 Step 7: Open your preferred Integrated Development Environment (IDE), like
Visual Studio Code, and navigate to the app folder.
 Step 8: Start your React app with npm start. This will launch the development
server and open your app in a new browser tab.

3.2 Libraries used in amazon clone project

 @emotion/react and @emotion/styled:
@emotion/react: Part of the Emotion library, used for styling in React
applications. It provides hooks and utilities for managing and applying styles to
components.
@emotion/styled: Allows you to create styled components in React using
tagged template literals.
 @mui/icons-material and @mui/material:
@mui/icons-material: Provides icons for Material-UI, a popular UI
component library for React.
@mui/material: The core library for Material-UI, offering various UI
components and styles.
 Firebase: A Backend-as-a-Service (BaaS) platform by Google. Offers cloud-based
services such as real-time database, authentication, and cloud storage.

10
  React-currency-format : Used for formatting currency in React applications. Enables
the easy display of currency values with customizable options.
 React-router-dom : A library for managing routing and navigation in React
applications. Provides components and utilities for creating a navigation structure in
your app.
 Web-vitals : A library for tracking web performance metrics, including Core Web
Vitals. Offers tools and functions for measuring and analyzing web application
performance.

3.3 Firebase
In the context of an Amazon clone project, Firebase services can be described as follows:

 Firebase Authentication: Used to handle user registration, login, and authentication

in your Amazon clone app. It allows users to create accounts, sign in, and access

personalized features like saving their shopping carts and order history.

 Firebase Realtime Database or Cloud Firestore: These databases store product

listings, user reviews, shopping cart contents, and order history. They provide real-

time synchronization, ensuring that users see up-to-date product information and can

track their orders in real time.

 Firebase Cloud Functions: Used for backend logic, such as processing orders,

sending notifications for order updates, and managing inventory. Cloud Functions

can automate tasks to keep the app's data and processes in sync.

 Firebase Cloud Storage: Used to store and serve images and media files for product

listings. It ensures fast and reliable delivery of product images to users while

allowing easy management of media assets.

 Firebase Cloud Messaging: Enables push notifications to inform users about new

product arrivals, order updates, and personalized offers. This keeps users engaged

and informed about their shopping activities.

11
 Firebase Hosting: Hosts the web frontend of your Amazon clone app, making it

easily accessible to users. Firebase Hosting ensures your app is delivered quickly

and securely to users worldwide.

 Firebase Analytics and Performance Monitoring: These tools provide insights

into user behavior, app performance, and potential areas for improvement. They help

you optimize the user experience and app performance to enhance user satisfaction.

 Firebase Remote Config: Allows you to tweak app behavior and appearance

without releasing app updates. For example, you can use it to modify the app's

interface, update pricing, or change promotional banners in real time.

Figure 3.3.1 : Firebase logins , userID and password of users

12
 Figure 3.3.2 : Deployment Page Information

3.4 Amazon Clone Project

In amazon clone project , each page has its corresponding JavaScript (.js) and CSS
(.css) files, making it easier to manage and develop. Here's a summary of the components
and files for each of your project's pages:

Home Page

Figure 3.4.1 : Home page

13
 Figure 3.4.2 : Home page

Figure 3.4.3 : Home.js

home.js: This is the main JavaScript file for the home page, where you likely define the
layout and functionality of the home page.

14
 Figure 3.4.4: Home.css

Home.css: The corresponding CSS file for styling the home page.

Figure 3.4.5: Header.js

Header.js: If the header is a reusable component, it would be in a separate JavaScript file for
consistency and reusability.

15
 Figure 3.4.6 Header.css

Header.css: CSS for styling the header.

Login Page:

Figure 3.4.7 : Login Page

16
 Figure 3.4.8: Login.js

login.js: The JavaScript file for the login page, which manages user authentication and user
interface elements.

Figure 3.4.9: Login.css

login.css: CSS for styling the login page.

17
 Figure 3.4.10 Firebase.js

firebase.js: This file is probably where you manage the Firebase integration for user
authentication.

Basket Page:

Figure 3.4.11: Basket Page

18
 Figure 3.4.12 : reducer.js

Figure 3.4.13: Checkout.js

checkout.js: This JavaScript file is likely responsible for rendering and managing the
contents of the basket (checkout) page.

19
 Figure 3.4.14 : Checkout.css

checkout.css: CSS for styling the checkout page.

Figure 3.4.15 : Checkoutproduct.js

checkoutproduct.js: If this component represents individual products in the basket, it would

have its own JavaScript and CSS files.

20
 Figure 3.4.16: Checkoutproduct.css

checkoutproduct.css: CSS specific to styling individual products in the basket.

Figure 3.4.17: Subtotal.js

subtotal.js: If this component calculates and displays the subtotal, it should have its own
JavaScript and CSS files.

21
 Figure 3.4.18 Subtotal.css

subtotal.css: CSS for styling the subtotal component

Figure 3.4.19 : Product.js

product.js: This component is probably used for rendering product details within the basket
and should have its own JavaScript and CSS files.

22
 Figure 3.4.20 Product.css

product.css: CSS for styling individual products within the basket.

Checkout Page:

Figure 3.4.21 Checkout Page

23
Figure 3.4.22 Payment.js

Figure 3.4.23 Payment.css

24
3.5 How to deploy amazon-clone website in react js
 Install Firebase Tools (if not already installed):
o npm install -g firebase-tools
 Log in to Firebase (if you haven't already):
o fifirebase loginrebase login

 Navigate to your project's build folder:

o cd your-project-directory/build

 Initialize Firebase for your project:

o firebase init

 Follow the prompts and select the hosting option. Configure it to use the build
directory as the public directory.
 Deploy your app to Firebase:
o firebase deploy

25
Chapter 4
Results And Discussion
4.1 Demonstrations of Amazon Clone Project Features
 User Authentication: We showcase the user registration and login functionality,
emphasizing not only the robust security measures in place but also the user-friendly
experience. Users can create accounts and access the platform seamlessly, ensuring
their data remains protected.
 Basket Management: We demonstrate the intuitive basket management system,
allowing users to effortlessly add and remove items from their shopping basket. This
functionality ensures a smooth and hassle-free shopping experience, with real-time
updates to the user's selected items.
 React.js Animations: We highlight the engaging usage of React.js animations
within the platform. These animations elevate the user interface, providing an
interactive and visually appealing experience. Users can enjoy smooth transitions
and dynamic interactions throughout their shopping journey.
 Checkout Page: We walk through the streamlined checkout process, focusing on
the clarity and transparency it offers. The checkout page displays the total order
amount and provides a preview of selected items. This feature enhances user
satisfaction by ensuring that users have a clear understanding of their purchase before
proceeding, promoting trust and confidence.
These demonstrations collectively reflect the seamless and feature-rich nature of the Amazon
Clone Project, designed to deliver an exceptional e-commerce experience.

26
Chapter 5:
Conclusion and Future Prospects
In this concluding chapter, we encapsulate the journey through our internship and the
development of the Amazon clone project using React.js. We summarize our achievements
and explore the potential future prospects of both React.js and our Amazon clone project.

5.1 Conclusion
In retrospect, our internship has been a profound learning experience, offering
invaluable insights into React.js and e-commerce application development. The
development of the Amazon clone project has been a significant milestone, demonstrating
our ability to translate theoretical knowledge into practical, real-world applications.
Key takeaways and accomplishments:
 Mastery of React.js: We have gained a deep understanding of React.js, its core
concepts, libraries, and best practices. This knowledge has empowered us to build
interactive and efficient web applications.
 Real-world E-commerce Experience: The development of the Amazon clone
project has provided us with hands-on experience in e-commerce application
development. We have successfully implemented essential features like user
authentication, basket management, and a seamless checkout process.
 Problem-solving and Innovation: Throughout this journey, we have encountered
and overcome various challenges, from performance optimization to security
considerations. These experiences have nurtured our problem-solving skills and
fostered a spirit of innovation.
 User-Centric Design: The project's emphasis on user experience and interface
design has enhanced our ability to create user-centric applications that prioritize
transparency and usability.

27
5.2 Future Prospects
As we conclude this phase of our internship, we look forward to the future with
optimism and a vision for further growth and innovation:
 React.js Advancements: The field of web development is constantly evolving.
React.js continues to expand with new features and libraries. Staying updated with
the latest developments will be crucial to maintain our skills and remain at the
forefront of technology.
 E-commerce Evolution: The e-commerce landscape is dynamic, with ever-
changing consumer preferences and technology trends. Future prospects include
integrating advanced features like machine learning-based product
recommendations, enhanced payment gateways, and more immersive user interfaces.
 User Engagement and Scalability: Building a user base and ensuring the scalability
of the Amazon clone project is a future goal. Engaging users, gathering feedback,
and continuously improving the platform will be a central focus.
 Security Enhancements: Security is paramount in e-commerce. Future prospects
involve implementing additional security measures, staying ahead of potential
threats, and ensuring the utmost protection of user data.
 Exploration of New Markets: Beyond the Amazon clone project, we can explore
opportunities in diverse e-commerce niches, expanding our portfolio and reaching a
broader audience.

28
Chapter 6:
Summary
In this chapter, we explored the use of React.js to create an Amazon clone project.
React.js is a JavaScript library for building user interfaces, and it proved to be an ideal choice
for replicating the Amazon shopping experience. This chapter covered the following key
points:
 React Basics: We began by understanding the fundamentals of React, including
components, state, and props. React's component-based architecture allowed us to
create reusable UI elements.
 Creating the Amazon Clone: We dove into the development of the Amazon clone
project. We discussed how to structure the project, design the user interface, and
manage state effectively.
 State Management: We employed React's state management to handle user
interactions, such as adding items to the cart and updating product listings in real
time.
 Firebase Integration: To deploy the Amazon clone project, we integrated it with
Firebase, a cloud-based platform. Firebase's services, such as Authentication and
Realtime Database, played a pivotal role in managing user accounts and data.
 Deployment: We walked through the steps to deploy the Amazon clone to Firebase
Hosting. The deployment process ensured that our project was accessible to users
worldwide.
Throughout the chapter, we learned how to harness the power of React.js to build a
dynamic and responsive web application. The Amazon clone project provided hands-on
experience in creating a real-world application, demonstrating the versatility and potential
of React for modern web development.

29
References/Bibliography

https://blog.hubspot.com/website/reactjs#:~:text=The%20React.,you%20would%20with%
20vanilla%20JavaScript

30
 Similarity Report ID: oid:16158:45045424

6% Overall Similarity
Top sources found in the following databases:
2% Internet database 0% Publications database
Crossref database Crossref Posted Content database
6% Submitted Works database

TOP SOURCES
The sources with the highest number of matches within the submission. Overlapping sources will not be
displayed.

Athlone Institute of Technology on 2022-08-14

1 3%
Submitted works

Amity University on 2016-06-10

2 2%
Submitted works

University of Greenwich on 2023-04-23

3 <1%
Submitted works

Westcliff University on 2023-08-06

4 <1%
Submitted works

Sources overview