Amazon clone
Introduction
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, 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.
Objective
We will be building an e-commerce application using React, which is inspired by Amazon. This project
covers an entire E-Commerce solution! From Designing, Authentication till Payments.
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.
Through this project, we’ll discover a way to build a functional clone of Amazon’s e-commerce website,
relying on React and Firebase.
Project Stages
The first task, once we get the development environment ready, will be to set up the React Router.
Once we have everything in place, we can start off with creating the website header, which will
basically serve as the navigation bar, as in most modern websites.
Next up is the home page building. In this project, we’ll be keeping it simple by showing all our
sample products on the homepage.
Then we’ll be setting up the React Context API. The Context API is a component structure provided
by the React framework, which enables us to share specific states across all levels of the application.
In our project, we’ll need to manage two states: basket (to manage the shopping cart) and user (for
managing the details of the currently logged in user).
For setting up the payments functionality, we’ll be using APIs provided by Stripe.
Handling our database and authentication needs to be supported and we’ll be using Firebase for the
same. Basically the database will be used to store the login information for the users, but the
resource can be used for storing product information as well.
Once we have Firebase setup, we can work on the Login page of our application.
Successful implementation of the above requirements will lead to completion of the core
implementation of our e-commerce solution. Next up, deploy!
Primary goals
Create header/navigation bar to navigate between pages.
Create a home page to display products.
Create a login page for user login.
Add functionalities like basket, payment and authentication .
Requirements
In order to have a working application, some knowledge in the following can be required:
Basic knowledge of [Link], React context API, [Link].
Firebase features knowledge.
1
Frontend Technologies like HTML, CSS and Java script.
As for backend: Firebase.
Text editor(we are using Visual studio code).
stripe for payments functionality.
Advantages
It replicates the core functionalities of [Link], such as product browsing, adding to cart, and
checkout with a great UI experience.
Built with Secure and powerful technologies i.e. [Link] and firebase.
we can able to add items to cart and can remove also.
we can able to purchase the products using card via stripe payment method.
We can login and logout.
Steps to run project
npm start : Runs the app in development mode. Open [Link] to view it in
browser. The page will reload if we make any edits and can see errors in console.
npm run build : Builds the app for production to the build folder. It correctly bundles React in
production mode and optimizes the build for the best performance.
Future scope
The project has a very vast scope in future. Project can be updated in near future, when requirement for the
same arises as it is very flexible in terms of expansion. As later on , we can provide payment gateway, can
be added inventory management system, can be added multiple branches and many features can be added in
this project to make it more robust.
Conclusion
This project helps us in gaining valuable information and practical knowledge on several topics like
designing web pages using html and css, usage of responsive templates, designing of web applications, and
management of database using firebase. The entire system is secured. Also the project helps us
understanding about the development phases of a project. There is a scope for further development in our
project to a great extent.
Reference
Download [Link]
[Link]
[Link]
The React Beginner’s handbook by Flavio copes
[Link]
[Link]