1
MINI PROJECT REPORT
on
AMAZON CLONE
BE(IT)-V Sem
By
Nela Kavya Sri(160120737126)
Mounika Bhargavi Giridi (160120737129)
Sindhu Shaini (160120737135)
Under the guidance of
Mrs.Sri Lakshmi & Mr.Rajesh Kannan
Assistant Professors
IT Department
DEPARTMENT OF INFORMATION TECHNOLOGY
CHAITANYA BHARATHI INSTITUTE OF TECHNOLOGY (A)
(Affiliated to Osmania University; Accredited by NBA(AICTE) and NAAC(UGC), ISO Certified 9001:2015)
KOKAPET(V),GANDIPET(M),RR District HYDERABAD - 75
Website: www.cbit.ac.in
2021-2022
1
This is to certify that the project work entitled “AMAZON CLONE” submitted to CHAITANYA
BHARATHI INSTITUTE OF TECHNOLOGY, in partial fulfillment of the requirements for the
completion of Minor Project-I of V Semester B.E. in Information Technology, during the Academic Year
2022-2023, is a record of original work done by Kavya Sri Nela (160120737126) , Mounika Bhargavi
Giridi (160120737129) and Sindhu Shaini (160120737135) during the period of study in the Department of
IT, CBIT, HYDERABAD, under our guidance.
Project Guide Head of the Department
Mrs.Sri Lakshmi & Mr.Rajesh Kannan Dr.K.Radhika
Assistant Professors , Dept. of IT, Professor, Dept. of IT,
CBIT, Hyderabad. CBIT, Hyderabad.
2
ACKNOWLEDGEMENTS
We would like to express our heartfelt gratitude to Mrs.Sri Lakshmi & Mr.Rajesh Kannan,our project
guide, for her invaluable guidance and constant support, along with her capable instruction and persistent
encouragement.
We are grateful to our Head of Department, Dr.K.Radhika, for her steady support and for the provision of
every resource required for the completion of this project.
We would like to take this opportunity to thank our Principal, Dr.P.Ravinder Reddy, as well as the
Management of the Institute, for having designed an excellent learning atmosphere.
Our thanks are due to all members of the staff and our lab assistants for providing us with the help required to
carry out the groundwork of this project.
3
ABSTRACT
Nowadays, the world has moved online and Amazon is a prime example of a website with all the key
elements making up a good e-commerce site. Earlier amazon was put together using HTML, CSS and
JavaScript . But as the time passed and when the different frameworks came into the spotlight , the website
got updated .We are building an e-commerce application using MERN Stack, which is inspired by Amazon.
Through this project, we have discovered a way to build a functional clone of Amazon’s e-commerce website.
4
CONTENTS
S. Topics Page.
N No
o
List of Figures 6
List of Tables -
Abbreviations -
Abstract 4
1 Introduction
1.1 Motivation 7
1.2 Objective of the Project 7
1.3 Problem Statement 7
2 Existing System
2.1 Literature survey 8
3 Proposed Methodology
3.1 System Specifications 9
3.2 System Design 9
3.3 Proposed Work 10
4 Implementation and Results 11-32
5 Conclusion and Future Scope 33
Bibliography 34
5
List of Figures
Figure No Name of the Figure Page No
3.1 Flow chart 9
4.1 Fig 4.1 12
4.2 Fig 4.2 13
4.3 Fig 4.3 14
4.4 Fig 4.4 15
4.5 Fig 4.5 16
4.6 Fig 4.6 21
4.7 Fig 4.7 22
4.8 Fig 4.8 23
4.9 Fig 4.9 24
4.10 Fig 4.10 25
4.11 Fig 4.11 26
4.1.1 home page 27
4.1.2 products list 27
4.1.3 footer 28
4.1.4 amazon business 28
4.1.5 create account 29
4.1.6 invalid details 29
4.1.7 Sign-in 30
4.1.8 after login 30
4.1.9 product details 31
4.1.10 proceed to buy 31
4.1.11 profile, your order and 32
signout
4.1.12 user profile 32
6
1.INTRODUCTION
1.1 MOTIVATION:
We wanted to build an e-commerce application using MERN Stack , which is inspired by Amazon. We
wanted to know how the Amazon website has been built with various features. Our project aim is to provide a
theoretical contribution in understanding the present status of online shopping.
1.2 OBJECTIVE OF THE PROJECT:
Businesses, in any field, have a lot of competition. They are always on the lookout for a proven way to
increase their business revenue. Restaurants, retail shops, and vape stores - whatever a business may want
to sell, if the business doesn't have an e- commerce website, they are leaving money on the table! The
world has moved online – a fact that businesses have to accept and put up a website to address.
Amazon is a prime example of a website with all the key elements making up a good e-commerce
site. The e-commerce website of Amazon was initially put together with simple HTML, CSS and JavaScript.
But as time progressed and different frameworks came into the limelight, the website got a makeover. So, our
objective is to build a functional clone of the Amazon e-commerce website, relying on the MERN stack.
1.3 PROBLEM STATEMENT:
We are implementing a project which is a user-friendly Amazon-clone. Our project allows users to save time
by shopping different categories through a wide range of wholesale retailers.
7
2.EXISTING SYSTEM
2.1 LITERATURE SURVEY:
The e-commerce website of Amazon was initially put together with simple HTML, CSS and JavaScript.
But as time progressed and different frameworks came into the limelight, the website got a makeover. Our
project provides insight into the phases involved in development of a low complexity website, we did it by
choosing the easiest programming language to read and write in ReactJs since it’s fast and efficient .
Mongodb which is document based Database software for zero configuration and maintenance. The low
complexity and zero to low maintenance website.
8
3.PROPOSED METHODOLOGY
3.1 SYSTEM SPECIFICATIONS:
Operating System: Windows 10
Languages used: In order to run in VScode
and modify this program on your personal machine, you will need to have installed the following apps
● VS Code
● React JS
● Node JS
● Express JS
● MongoDB
3.2 SYSTEM DESIGN:
Fig 3.1: Flow chart
9
3.3 PROPOSED WORK:
This proposed project consists of:
• Homepage:
Homepage is the default page of the website. It consists of a navigation bar, all the deals related to
products and a footer page. In the navigation bar, there is a search icon, sign in button, cart icon and
profile button. And the footer consists of information about us.
• Products:
The Product page consists of details about the products. Whenever we click on a particular product
then it displays all information related to that product.
• Sign In/ Sign Up:
If the user is new to the website then first he/she must create an account by filling up all the credentials
and after registering he/she can login in into their accounts using their email and password given
during registration.
• Cart Page:
Cart page displays all the products added to the cart by the user along with the total amount. Here the
user even have an option to delete the products
• Order Page:
Order page displays the products which are ready to place the order.
10
4. IMPLEMENTATION AND RESULTS
1. Here are the steps that are used in the project:
01. home page
02. footer
03. create account
04. sign-in
05. profile
06. cart
07. order
08. products
01.Homepage:
Homepage is the default page of the website. It consists of a navigation bar, all the deals related to products
and a footer page.
In here we used some special commands and packages for creating the header which are login
symbol,avatar,search etc..
import Carousel from 'react-bootstrap/Carousel';
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of
JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next
controls and indicators.
we used this carousel for image sliding in the home page and we used the multi carousel to slide multiple slide
at one section
import Slider from './Slider';
import './home.css';
11
Fig 4.1 - home page
In the Banner section we divided the categories like laptops ,smartwatches etc..
For that we imported the card sections like row ,column
import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Card from './Card';
import MultiCard from './MultiCard';
React-Bootstrap is a front-end framework that was designed keeping react in mind. We can use the following
approach in ReactJS to use the react-bootstrap Container, Row, Col Component.
12
● Container Component provides a way to center and horizontally pad the contents of our
application. It is used when the user wants the responsive pixel width.
● Row Component provides a way to represent a row in the grid system. It is used when we want to
display data in the form of rows.
● Col Component provides a way to represent a column in the grid system. It is used when we want
to display data in the form of columns
Fig 4.2
Cards are surfaces that display content and actions on a single topic.
They should be easy to scan for relevant and actionable information. Elements, like text and images, should be
placed on them in a way that clearly indicates hierarchy.
Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember
that cards are entry points to more complex and detailed information.
Outlined Card
13
Set variant="outlined" to render an outlined card.
<Card variant="outlined">{card}</Card>
Fig 4.3
02. footer
In the footer section we gave the information about amazon clone and what are the business site is with
,contact detials etc..
A footer is an important element of a website’s design since it signals to the user that they have reached the
end of the webpage and provides useful links to other areas of the website that the user may want to visit.
Prerequisite:
● Basic knowledge of npm & create-react-app command.
● Basic knowledge of styled-components.
14
npx create-react-app react-footer
Now go to your react-footer folder by typing the given command in the terminal:
cd react-footer
Required module: Install the dependencies required in this project by typing the given command in the
terminal.
npm install --save styled-components
Now create the components folder in src then go to the components folder and create two files by the name
Footer.js and FooterStyles.js
Fig 4.4
import React from 'react';
import LanguageIcon from '@mui/icons-material/Language';
import $ from 'jquery';
import logo from './logo.png';
15
Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows
you to include only the icons that your project is using.
Installation (for standard modern project)
npm install react-icons --save
Icons in the computing world are defined as pictorial representations or ideograms displayed on a computer
screen that conveys a meaning. Icons convey characteristics that separate them from each other and make a
thing exist uniquely. Under all of these aspects, they are also called symbols popularly that quickly
comprehend thoughts about a software tool, a function, a file, a data. Icons represent real-world entities that
contain detailed illustrations and are designed so that one symbol speaks it all.
Fig 4.5
03. create account
Users and Sellers can register into the website and login with their email or phone number and password.
Window-shopping doesn’t require any kind of authentication.For Signup page the imported
packages:
import React, { useState } from 'react';
import axios from 'axios';
import CountryCode from './CountryCode';
import './login-register.css';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
16
import { NavLink, useNavigate } from 'react-router-dom';
import Alert from '@mui/material/Alert/Alert';
import AlertTitle from '@mui/material/AlertTitle/AlertTitle';
This package take country-list as reference, and make it more friendly to react-select
Maps ISO 3166-1-alpha-2 codes to English country names and match react-select options props.
Install
npm install react-select-country-list --save
or
yarn add react-select-country-list
<Alert variant="outlined" className='alert success-alert'>Registered successfully! Please <NavLink
to='/login'>login</NavLink></Alert>
<div className='form-details'>
<h3>Create Account</h3>
<form method='POST' onSubmit={ sendData }>
<label htmlFor='name'>Your name</label>
<input type='text' name='name' id='name' placeholder='First and last name' onChange={ formUpdate } value={
signUpInfo.name } required />
<label htmlFor='number'>Mobile number</label>
<div className='mobile-number'>
<CountryCode />
<input type='text' name='number' id='number' placeholder='Mobile number' onChange={ formUpdate } value={
signUpInfo.number } required />
17
</div>
<label htmlFor='email'>Email</label>
<input type='email' name='email' id='email' placeholder='Email Address' onChange={ formUpdate } value={
signUpInfo.email } required />
<label htmlFor='password'>Password</label>
<input type='password' name='password' id='password' placeholder='Password (At least 6 characters)' onChange={
formUpdate } value={ signUpInfo.password } required />
<label htmlFor='confirmPassword'>Confirm Password</label>
<input type='password' name='confirmPassword' id='confirmPassword' placeholder='Confirm Password' onChange={
formUpdate } value={ signUpInfo.confirmPassword } required />
<button type='submit' id='submit'>Continue</button>
</form>
04. sign-in
For sign page ,we imported
import React, { useState } from 'react';
import './login-register.css';
import { NavLink, useNavigate } from 'react-router-dom';
import Alert from '@mui/material/Alert/Alert';
import AlertTitle from '@mui/material/AlertTitle/AlertTitle';
import axios from 'axios';
Alerts are urgent interruptions, requiring acknowledgment, that inform the user about a situation. Material UI
for React has this component available for us, and it is very easy to integrate. We can use Alert Component in
ReactJS using the following approach.
Creating React Application And Installing Module:
18
Step 1: Create a React application using the following command.
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
Step 3: After creating the ReactJS application, Install the material-ui modules using the following
command.
npm install @material-ui/core
npm install @material-ui/lab
React MUI is a UI library providing predefined robust and customizable components for React for easier web
development. The MUI design is based on Material Design by Google.
In this article, we are going to discuss the React MUI AlterTitle API. The Alert component allows the user
to show important tips or messages on the page.
Import AlterTitle API:
import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';
Approach: Let us create a React project and install React MUI module. Then we will create a UI that will
showcase React MUI AlertTitle API.
Creating React Project:
Step 1: To create a react app, you need to install react modules through npx command. “npx” is used instead
of “npm” because you will be needing this command in your app’s lifecycle only once.
npx create-react-app project_name
Step 2: After creating your react project, move into the folder to perform different operations.
cd project_name
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/lab
The <Link> and <NavLink> are the components provided by react-router-dom to navigate around the react
application. Generally, we use anchor tags for this purpose while navigating. Then what’s the difference? Let’s
find out.
Anchor tags will reload the page and re-render all the components. While <Link> and <NavLink> will only
re-render updated components matched with the URL path of the Route without reloading. It helps the
Single-Page Applications to work faster while routing.
19
<Link> Component Props:
● to: String or object which specifies the pathname.
● replace: Replaces the pathname in the history stack with new.
● innerRef: Passes ref to the element rendered by the component.
Modules Required:
● npm
● create-react-app
● react-router-dom
Creating React Application And Installing Module:
Step 1: Create a new react application by the following command using terminal:
npx create-react-app <project_name>
Step 2: Go to the project folder by the following command:
cd <project_name>
Step 3: Install dependency react-router-dom using the following command:
npm install react-router-dom
Note: To check whether the dependency has been installed or not , go to package.json and checkout in the
dependencies.
Step 4: Create a new folder named components in the src folder and add Home.js, About.js and Contact.js
files to it.
20
Fig 4.6
05. Profile
import React, { useEffect, useState } from 'react';
import NameBanner from './NameBanner';
import UserDetails from './UserDetails';
import { useNavigate } from 'react-router-dom';
import './profile.css';
21
import axios from 'axios';
import Loader from '../loader/Loader';
Name banner - It is a simple line text banner component (like warning, error, success). Styles (font and
background) can be customized. By default the banner has a fade in and fade out animation of 2s. This can be
used in two ways, banner can be shown for a specific amount of time using visibleTime prop, or can be
handled manually by making the title text null or changing the string.
Install it from npm and include it in your React build process (using Webpack, Browserify, etc).
npm i react-js-banner
Import Banner in your react component.
import Banner from 'react-js-banner';
First things You should have a react app created already and install react-router-dom from npm (just for this
example, you don't need react-router-dom for useContext). Now create a file in your source folder and name it
userDetails.jsx this is the file that will be creating the context.
Fig 4.7
22
Fig 4.8
06. Cart
Packages imported in cart section:
import React, { useEffect, useState } from 'react';
import Loader from '../loader/Loader';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import Alert from '@mui/material/Alert';
import './cart.css';
23
import CartProduct from './CartProduct';
import SubTotal from './SubTotal';
useCart
The useCart hook exposes all the getter/setters for your cart state.setItems(items) The setItems method should
be used to set all items in the cart. This will overwrite any existing cart items. A quantity default of 1 will be
set for an item implicitly if no quantity is specified.
Fig 4.9
07. orders
packages imported in order section:
import React, { useEffect, useState } from 'react';
import NameBanner from './NameBanner';
import { useNavigate } from 'react-router-dom';
import './profile.css';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';
24
import 'bootstrap/dist/js/bootstrap.bundle.min';
import OrderTop from './OrderTop';
import OrderedProduct from './OrderedProduct';
import Loader from '../loader/Loader';
Higher-order components or HOC is the advanced method of reusing the component functionality
logic. It simply takes the original component and returns the enhanced component.
Syntax:
const EnhancedComponent = higherOrderComponent(OriginalComponent);
Reason to use Higher-Order component:
● Easy to handle
● Get rid of copying the same logic in every component
● Makes code more readable
Using npm: $ npm install react-ordering --save
Fig 4.10
25
08.products
packages imported in product section:
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './product.css';
import { useParams, useNavigate } from 'react-router-dom';
import Loader from '../loader/Loader';
Fig 4.11
26
4.1 OUTPUT RESULT:
Fig 4.1.1 -homepage
Fig 4.1.2 -products list
27
Fig 4.1.3 -Footer
Fig 4.1.4 -amazon bussiness
28
Fig 4.1.5 -create account
Fig 4.1.6 -invalid details
29
Fig 4.1.7 -Sign-in
Fig 4.1.8 -after login
30
Fig 4.1.9 - product details
Fig 4.1.10 - proceed to buy
31
Fig 4.1.11 - profile, your orders and sign out
Fig 4.1.12 - user profile
32
5.CONCLUSION AND FUTURE SCOPE
The system that we have developed with free of errors and at the same time it is efficient and less
time consuming for shopping. The purpose of our project is to develop a web application for purchasing items
from e-commerce websites(Amazon Clone). This project enabled us to gain valuable information and practical
knowledge on several topics like designing web pages using React JS, usage of responsive templates and
management of databases using MongoDB. Also, the project helped to understand about the development
phases of a project and software development life cycle.
In future application we are willing to add few features:
-> payment mode
33
BIBLIOGRAPHY
• https://www.amazon.in/ref=nav_logo
• https://medium.com/cleverprogrammer/amazon-clone-using-react-the-ultimate-guide-fba2b36f3458
• https://docs.aws.amazon.com/datapipeline/latest/DeveloperGuide/dp-manage-pipeline-clone-console.html
34
