Cookies Psst! Do you accept cookies?

We use cookies to enhance and personalise your experience.
Please accept our cookies. Checkout our Cookie Policy for more information.

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

December 30, 2020 3 minutes

In this tutorial, we’ll look at how to build an e-commerce web application with React and Node.js.

The app will demonstrate a basic cart management system, as well as a simple method of handling user authentication. We’ll make use of React-Redux for state management and we will be using MongoDB for storing our data.

Prerequisites

This tutorial assumes you have a basic understanding of React, Node.js, express.js, and MongoDB.

Alt Text

For this project, you should have installed the latest version of Node and npm in your system.

You can check that both are installed correctly by issuing the following commands from the command line:

node -v
> 15.4.0

npm -v
> 7.0.15
Enter fullscreen mode Exit fullscreen mode

Before starting development, let's talk about the specifications of the web app in this part.

Features:

  • Full-featured shopping cart
  • Product reviews and ratings
  • Top products carousel
  • Product pagination
  • Product search feature
  • User profile with orders
  • Admin product management
  • Admin user management
  • Admin Order details page
  • Mark orders as a delivered option
  • Checkout process (shipping, payment method, etc)
  • PayPal / credit card integration
  • Database seeder (products & users)

The tech stack we are going to use is:

  • MongoDB
  • Express.js
  • Reactjs
  • Node.js
  • React Bootstrap v4
  • Redux

Sitemap

Alt Text

Overview

Now we'll have an overview of our web app along with the screenshots and after that, in part 2 of this series, we will start implementing the backend using Node.js.

On the homepage, we have our products listed.
Alt Text

On the navbar, We have our logo and a search bar and on the right side of the navbar, we have a cart and login button.

Alt Text


We also have pagination. This means that if the number of items on a page is greater than 3 then the remaining products will move to the next page.
Alt Text

The sign-in button on the navbar will take us to the sign-in screen.

Alt Text

You can create an account by clicking the "register" link under the login button.

Alt Text

For this app, you can log in as a user as well as an admin.

Let's login as a user first. After login, we can see all the products listed and we can see our name on the right side of the navbar.

Alt Text

When we click on a product we can see all the details for the product.

Alt Text

We can also add a review on a product,

Alt Text

When we click the Add to Cart button, it takes us to our cart.

Alt Text

Here we can delete the product from the cart and add the quantity of the product.

After clicking proceed to checkout it takes us to the checkout page where we can put all our delivery details,

Alt Text

After putting the details and selecting the payment method it will take us to the Payment option.
You can pay using PayPal.

Alt Text

Let's log out and log in as admin. To log in as admin use the following details:

Email: [email protected]
Password: 123456
Enter fullscreen mode Exit fullscreen mode

After login, we can see products listed, on the right corner of the navbar we can see admin user and admin.
Admin user is the same as the "user" account.
Let's explore Admin.

Alt Text

Click on "Admin" on the right side of the navbar we can see three options, users, products, and orders.

Alt Text

When we click on user,
we can see a list of all the users using this app,

Alt Text

Now admin can edit and delete a user.

After clicking on products we can see a list of products,

Alt Text

Here, the admin can edit and delete a product and can create a product when clicking on the "Create Product" button.

Alt Text

After clicking on the orders button, we can see all the orders of all users,

Alt Text

Here Admin can mark as deliver the product if the product is paid and delivered on the given address.

I hope this article was interesting and in the next part we will be diving into development and will start implementing Backend using Node.js

Thanks.

Last Stories

What's your thoughts?

Please Register or Login to your account to be able to submit your comment.