DEV Community

Cover image for Amazona Part 1: Build ECommerce Website Like Amazon
Bassir Jafarzadeh (Programming Teacher)
Bassir Jafarzadeh (Programming Teacher)

Posted on • Updated on

Amazona Part 1: Build ECommerce Website Like Amazon

Welcome to my React and Node tutorial to build a fully-functional e-commerce website in 5 hours. Open your code editor and follow me for the next hours to build an e-commerce website using React and Node.JS.

Source Code and Demo

👉 Demo : https://amazonaapp.herokuapp.com
👉 Code : https://github.com/basir/amazona

Watch React & Node Tutorial

You Will Learn

  • HTML5 and CSS3: Semantic Elements, CSS Grid, Flexbox
  • React: Components, Props, Events, Hooks, Router, Axios
  • Redux: Store, Reducers, Actions
  • Node & Express: Web API, Body Parser, File Upload, JWT
  • MongoDB: Mongoose, Aggregation
  • Development: ESLint, Babel, Git, Github,
  • Deployment: Heroku
  • Watch React & Node Tutorial

Table Of Content:

  • Part 01- Introduction
  • Part 02- Create Home Page Template (HTML, CSS)
  • Part 03- Add Sidebar Menu and Product Page (JavaScript)
  • Part 04- Create React App (React)
  • Part 05- Create Shopping Cart (React)
  • Part 06- Build Backend (Node)
  • Part 07- Connect to Database (MongoDB)
  • Part 08- Manage Products
  • Part 09- Register and Sign-In
  • Part 10- Checkout Form
  • Part 11- Create Order
  • Part 12- Manage Order
  • Part 13- User Profile
  • Part 14- Search and Sort Products
  • Part 15- Comment and Rate Product
  • Part 16- Publish on Heroku

Let's skim through the above parts that I am going to share with you in the next articles. Please leave your comments to let me know if they are along with your needs or not.

Free Live Class For Part 2: Design Web Template

Be online on my youtube channel this Wednesday 26 Feb at 9:30 pm EST to participate in my online class and see how Amazona will be designed.

Subscribe to Basir Youtube Channel

Part 01- Introduction

It gives you an overview of the tutorial to build an eCommerce website like Amazon.

Part 02- Create Home Page Template (HTML, CSS)

In this part, you create a web template for the eCommerce website. We start by installing development tools. VS Code is the code editor and Google Chrome is the web browser that we use throughout this tutorial.

Alt Text

Part 03- Add Sidebar Menu and Product Page (JavaScript)

We will create a hamburger menu that shows and hide the sidebar. Also, we design the details page of the products.

Alt Text

Part 04- Create React App (React)

This part is about the frontend. We use React library to build the UI elements.

Part 05- Create Shopping Cart (React)

When you add a product to the cart we need to redirect the user to the shopping cart page to update or remove items from the cart.

Alt Text

Part 06- Build Backend (Node)

This part is about Node and Express. They are the popular framework to create a web server using JavaScript language.

Part 07- Connect to Database (MongoDB)

In this part, we will create a MongoDB database and save and retrieve the admin user.

Part 08- Manage Products

Admin should be able to define products and update the count in stock whenever they like. This page is about managing ECommerce products.

Alt Text

Part 09- Register and Sign-In

We need to register the user before redirecting them to the checkout. In this part, we will create forms for getting user info and save them in the database.

Alt Text

Part 10- Checkout Form

In this part, we implement the checkout wizard including sign in, shipping info, payment method, and place order.

Alt Text

Part 11- Create Order

After placing orders by users we need to save them in the database and process the orders.

Alt Text

Part 12- Manage Order

Admin needs to check recent orders and process them. This part shows a list of products.

Alt Text

Part 13- User Profile

In this part, we create a user profile page to update user information including name, email, and password.

Alt Text

Part 14- Search and Sort Products

Users should be able to filter products and sort them based on price and time.

Alt Text

Part 15- Comment and Rate Product

In this part, we create a review form for products and show the average rating to the users.
Alt Text

Part 16- Publish on Heroku

In the end, we need to publish the website on the internet. In this part, we will publish on the Heroku but the same steps apply for other cloud servers.

Summary

In this tutorial, you will make an eCommerce website like Amazon. We will walk through all steps and get to know all the tools and skills to build this website. Please share your thoughts here.

Top comments (27)

Collapse
 
nicobobb profile image
Nicolás Bobb

I look forward to the second part

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Sure. I will share it by the end of tomorrow. I am going to hold live class on youtube for them. Are you in?

Collapse
 
donald24ever profile image
Eyituoyo Donald Okegbe

What's your YouTube channel?

Thread Thread
 
basir profile image
Bassir Jafarzadeh (Programming Teacher) • Edited

It is here youtube.com/channel/UC2xRE4hUCQ3xO...
I am going to go live this Wednesday (February 26) at 9:30 pm Eastern Standard Time.
Please join me at that time for Part 2, create a web template for Amazona.

Thread Thread
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Waiting is over. Watch the full tutorial here: youtu.be/Fy9SdZLBTOo

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Waiting is over. Watch the full tutorial here: youtu.be/Fy9SdZLBTOo

Collapse
 
calag4n profile image
calag4n

Cool, I'll follow. đź‘Ś

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Thank you. I am preparing the materials for this tutorial for the next 15 weeks. Please share you thoughts with me.

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Waiting is over. Watch the full eCommerce tutorial here: youtu.be/Fy9SdZLBTOo

Collapse
 
brooksur profile image
Brooks Benson

Very much looking forward to this!!

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Waiting is over. Watch the full eCommerce tutorial here: youtu.be/Fy9SdZLBTOo

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Thank for your interest. I am going to hold live class on youtube for them. Are you in?

Collapse
 
funfake profile image
funfake

That's a greatly done topic. Thank you

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Waiting is over. Watch the full eCommerce tutorial here: youtu.be/Fy9SdZLBTOo

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Thanks for your comment. Which part is more interesting for you?

Collapse
 
dmsinfosys profile image
DMSInfosystem

Get the best flipkart clone app development services to build your own online marketplace. DMS Infosystem provide a range of services to suit your needs.

Collapse
 
rohansingh profile image
Rohan Singh

Thanks for sharing such a great post. This blog described development process in well manner. Get more detailed information on cost to develop an app like Amazon, if you are planning to develop eCommerce app like Amazon: semidotinfotech.com/blog/how-to-de...

Collapse
 
webcluesinfo profile image
WebClues Infotech • Edited

The article surely covers major features that can be implemented but I would like to suggest you read the article in below link to get a development timeline of each feature in e-commerce app like Amazon - webcluesinfotech.com/how-to-build-...

Collapse
 
donald24ever profile image
Eyituoyo Donald Okegbe

Really nice! Looking forward to this

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Waiting is over. Watch the full eCommerce tutorial here: youtu.be/Fy9SdZLBTOo

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Thank you. Please let me know which part is more interesting for you.

Collapse
 
mensdarko profile image
Darko Mens

Can't wait to be part of this amazing learning experience.
As a beginner hope to have the best of coding experience

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Thanks for your interest. I will have a live session for Part 2: Design Web Template Of Amazona on Youtube this Wednesday 26 Feb at 9:30 pm EST. Please join to my channel youtube.com/channel/UC2xRE4hUCQ3xO...

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Waiting is over. Watch the full eCommerce tutorial here: youtu.be/Fy9SdZLBTOo

Collapse
 
cadams profile image
Chad Adams • Edited

Would be a much better tutorial if you incorporated AWS with this imo.

Or you could take this tutorial after you’re done and convert it to AWS. :)

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

Waiting is over. Watch the full eCommerce tutorial here: youtu.be/Fy9SdZLBTOo

Collapse
 
basir profile image
Bassir Jafarzadeh (Programming Teacher)

I have some experience to publish Node application on AWS and it is very similar to Heroku. You just need to set the domain, config host, use nginx and etc. For sure I will work on it.