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.
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
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
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.
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.
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.
The sign-in button on the navbar will take us to the sign-in screen.
You can create an account by clicking the "register" link under the login button.
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.
When we click on a product we can see all the details for the product.
We can also add a review on a product,
When we click the Add to Cart
button, it takes us to our cart.
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,
After putting the details and selecting the payment method it will take us to the Payment option.
You can pay using PayPal.
Let's log out and log in as admin. To log in as admin use the following details:
Email: [email protected]
Password: 123456
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.
Click on "Admin" on the right side of the navbar we can see three options, users, products, and orders.
When we click on user,
we can see a list of all the users using this app,
Now admin can edit and delete a user.
After clicking on products we can see a list of products,
Here, the admin can edit and delete a product and can create a product when clicking on the "Create Product" button.
After clicking on the orders button, we can see all the orders of all users,
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.
What's your thoughts?
Please Register or Login to your account to be able to submit your comment.