DEV Community

loading...

React ECommerce Project 2021 In 9 Hours

basir profile image Bassir Jafarzadeh (Programming Teacher) ・2 min read

Hello and Welcome to my coding course to build an eCommerce website like amazon by MERN stack in 9 hours. In this course, you will learn the essential tools and skills to design, develop, and deploy a fully-function marketplace website using React and Redux in frontend and Node and MongoDB in the backend.

Amazona

You will learn:

  • create functional components by React
  • use React hooks to handle form inputs
  • manage application state by redux using custom hooks
  • create backend web API by node and express js
  • design database model by MongoDB
  • perform CRUP operations on orders, products, and users by mongoose ORM
  • handle authentication and authorization using JsonWebToken
  • create seller and admin roles to manage products, orders, and users
  • handle shopping cart for the customer to place orders

Source Code and Demo

👉 Demo : https://newamazona-final.herokuapp.com
👉 Code : https://github.com/basir/amazona
👉 Questions : Email basir.jafarzadeh@gmail.com

Features

Watch React & Node Tutorial

Audiences

This course is for non-coders or juniors who want to be a professional web developer to get a job in 22 million job opportunities around the world. Basic knowledge of web developments like html, css and basic javascript is necessary for this course.

What You Will Build

  1. Home Screen
    1. Create react app
    2. List data using JSX and map function
  2. Product Screen
    1. Url routing in react
    2. Handle events in react
  3. Cart Screen
    1. Save and retrieve data in local storage
    2. Working javascript array functions
    3. Update summary based on cart changes
  4. Sign-in and Register Screen
    1. Create dynamic form
    2. Input validation in frontend and backend
    3. Create web server using node.js
    4. Connect to Mongodb database
    5. Add registered user to the database
    6. Authenticate user based on email and password
    7. Using Jsonwebtoken to authorize users
  5. Shipping and Payment Screen
    1. Create wizard form to get user data in multiple steps
    2. Save user info in the local storage
    3. get user location using google map
  6. Place Order Screen
    1. Validate and create order in the database
  7. Order Screen
    1. Payment with Paypal
    2. Show order state based on user and admin activities
  8. Profile Screen
    1. Create authenticated routes
    2. enable user to update their informations
    3. enable user to logout and clear local storage
    4. show list of orders to user and link it to details
  9. Seller Menu
    1. add products, upload files
    2. manage orders
  10. Admin Menu
    1. manage users
    2. add seller permission

Summary

In this tutorial, we have made an eCommerce website like Amazon. Feel free to change this project based on your needs and add it to your portfolio.
Also, I will love to hear your comment about this React and Node tutorial. Please share your thoughts here.
React ECommerce Project

Discussion (2)

Collapse
awematest profile image
AWEMA - TA

hi , can i translate your course into french please ?

Collapse
sami_hd profile image
Sami

It dosen't open in my browser

Forem Open with the Forem app