E-commerce website using React.js and Redux Toolkit
Tags: ecommerce
Published: 2023-11-07 07:47:49

---
title: E-commerce website using React.js and Redux Toolkit
published: true
date: 2023-11-06 00:34:00 UTC
tags: Ecommerce
canonical_url: https://reactjsexample.com/e-commerce-website-using-react-js-and-redux-toolkit/
---

# E-Commerce-App
 ![E-commerce website using React.js and Redux Toolkit](https://reactjsexample.com/content/images/2023/11/Code_2023-11_16-29-22.jpg)

E-commerce website using React.js and Redux Toolkit.

## About The Project

- In this project, I wanted to create an E-Commerce website using `React.js` and `Redux Toolkit`. The project consists of a home page with all products, a specific detail page for each product and a shopping cart page where users can add the products they want. All products on the homepage are fetched from an API. During this time, a loading screen is shown to the user. You can see the details of the product that you want by clicking on its image and you can add it to the cart. You can also change the number of products you added or delete the product from the cart. While you are doing these operations, you will see an information message on the navbar. 

- State management is very easy using Redux Toolkit. It allows that using a state on different pages. The navbar shows the number of products in the cart that we can access on each page.

- Another important point of the project is routing between pages. `React Router` was used for this.

- The website is responsive to all screen sizes.

## Main Technologies For The Project

![E-commerce website using React.js and Redux Toolkit](https://camo.githubusercontent.com/ab4c3c731a174a63df861f7b118d6c8a6c52040a021a552628db877bd518fe84/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f72656163742d2532333230323332612e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d7265616374266c6f676f436f6c6f723d253233363144414642) ![E-commerce website using React.js and Redux Toolkit](https://camo.githubusercontent.com/9a7c7ebbabb2096c0ad0cac6f64bc9fe93f4954a3ae3f51d6f3e076ba462aab1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f72656475782d2532333539336438382e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d7265647578266c6f676f436f6c6f723d7768697465) ![E-commerce website using React.js and Redux Toolkit](https://camo.githubusercontent.com/4f9d20f3a284d2f6634282f61f82a62e99ee9906537dc9859decfdc9efbb51ec/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f52656163745f526f757465722d4341343234353f7374796c653d666f722d7468652d6261646765266c6f676f3d72656163742d726f75746572266c6f676f436f6c6f723d7768697465)

## Website Link 👇

- You can visit my website by clicking the link below. Feel free to share your observations with me.

[https://hasan-e-commerce.netlify.app/](https://hasan-e-commerce.netlify.app/)

## Screenshots

`Loading Screen`

![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280401523-1ff52573-a162-46e9-81e3-543ab57060da.jpg)

* * *

`Home Page`

![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280401540-b30ae86d-da96-4107-a17d-2ba02500741c.jpg)

![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280401550-a02cec30-0743-4beb-9b28-3402a098baa2.jpg)

![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280401565-f277173a-4aa2-4eea-9b16-d40494a68de2.jpg)

![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280401572-e7f91421-5e63-40e9-8058-c750c85d60d4.jpg)

![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280401578-62f36174-f48b-4e23-9b19-d27dfdba1814.jpg)

* * *

`Details Page`

![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280401528-ff3ae818-c629-4f78-a296-99df22ba9712.jpg)

![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280401549-326af687-6eea-4f66-a0c9-2d3fc39cc666.jpg)

![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280401554-a1b0156f-d187-4b53-a341-a46ab5b62d1c.jpg)

![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280401569-5da4d509-34ef-48ca-b513-fe8a6dc43a6c.jpg)

`Shopping Cart Page`

![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280401575-54d69f10-5642-4f48-8c9a-32a66d0e7937.jpg)

![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280401583-3399f9a8-3972-43db-b395-ec2205869704.jpg)

## Responsive to Smaller Screen Size (Phone View)

 ![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280425002-595fa0b5-5dc0-40da-9025-22d669424b03.png) ![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280425006-21c1ff39-7002-450b-8729-e236fcaa22cd.png)

![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280425010-d08cbc27-a0ef-405c-b78b-fe5ff47a9f65.png) ![E-commerce website using React.js and Redux Toolkit](https://user-images.githubusercontent.com/102024926/280425013-ebd198be-0479-4ab4-80c1-eabab311db52.png)

## Npm

- To install packages `npm install` after that to run `npm run dev`.

## GitHub

[View Github](https://github.com/ysnhasan1/E-Commerce-App?ref=reactjsexample.com)