By Zeeshan Haider Shaheen

How I built an e-Commerce website in React JS and Node.js in 1 week(Part-1/3)

In this tutorial, we will learn how to build e-commerce web applications using React and Node.js

This project comes from the Brad Travers Udemy course that I follow. I share in writing to reflect my learning. The Github code, Udemy lessons, and demo links are mentioned at the end of this series.

The application will demonstrate a basic shopping cart management system and a simple way to handle user authentication. We’ll use React-Redux for state management, and we’ll use MongoDB to store our data.

A prerequisite for

This tutorial assumes a basic understanding of React, Node.js, Express.js, and MongoDB.For this project, you should have the latest versions of Node and NPM installed on your system. You can check that both are installed correctly by issuing the following command from the command line:

Node -v > 15.4.0 NPM -v > 7.0.15Copy the code

Before we begin development, let’s discuss the specifications for Web applications in this section.

Features:

  • Fully functional shopping cart
  • Product reviews and ratings
  • Top product carousel
  • The product page
  • Product search function
  • User profile with order
  • Management Product management
  • Administrator User Management
  • Manage the order details page
  • Mark the order as a delivery option
  • Checkout process (delivery, payment method, etc.)
  • PayPal/ Credit card integration
  • Database planter (Product and user)

The technology stack we will use is:

  • MongoDB
  • Express.js
  • React JS
  • Node.js
  • Response guidance V4
  • return

Site map

An overview of the

Now, we’ll give an overview of our Web application as well as screen captures, after the first in this seriesPart 2On the home page, we list our products.On the navigation bar, we have our logo and search bar, and on the right side of the navigation bar, we have a shopping cart and a login button.We also have paging. This means that if the number of items on the page is greater than 3, the remaining products will be moved to the next page.

The login button on the navigation bar will take us to the login screen.You can create an account by clicking the “Register” link under the Login button.

For this application, you can log in as a user and administrator.

Let’s log in as users first. After logging in, we can see all the products listed, and we can see our name on the right side of the navigation bar.When we click on the product, we can see all the details of the product.We can also add reviews to products,When we click the Add to Cart button, it takes us to the cart.Here we can remove the product from the shopping cart and add the quantity of the product. After clicking continue to checkout, it takes us to the checkout page where we can take all our shipping details,After entering details and selecting a payment method, it will take us to payment options. You can pay with PayPal.

Let’s log out and log in as administrator. To log in as an administrator, use the following details:

Email: [email protected]
Password: 123456
Copy the code

After logging in, we can see the listed products, and in the upper right corner of the navigation bar, we can see the administrator users and administrators. The administrator account is the same as the user account. Let’s explore administrators.Click “Administrator” on the right side of the navigation bar, we can see three options: user, product and order.When we click on the user, we can see a list of all the users that are using this application,Administrators can now edit and delete users. After clicking on the product, we can see the list of products,Here, administrators can edit and delete products, and they can create products when they click the Create Product button.After clicking the order button, we can see all orders from all users,Here, the administrator can mark the product as delivered if the product has been paid for and delivered at the given address. I hope this article is interesting inThe next part of theWe’ll go further and start implementing the backend using Node.js. Thank you.

E-commerce Sites (3 part Series)