Shopping Cart using ReactJS

By Pedapati Raja Stuthi Paul

Using React Js to create a shopping cart with data from a mock backend (JSON server).

In this Code packet, We will learn how to create a shopping cart using ReactJS.

The Packages used in this Packet 

Installing packages that are required for the Project

npm i json-server 
npm i axios redux 
npm i react react-redux react-router-dom 
npm i @material-ui/core 
npm i @material-ui/icons 
npm i @material-ui/lab

DATABASE FILE (db.json) 

It contains the data of the shopping items in JSON format.

Pages 

1. Home page(/)

On this page, we display shopping cart items and cart counter.

2. Cart page(/cart) 

On this page, we display the cart items. we can also change the quantity of an item in the cart and delete an item from the cart.

How to run the code packet

1. Open the terminal and navigate to the folder and enter the following command to run the mock backend(JSON server).

json-server --watch db.json

2. Open a new terminal and navigate to the folder and enter the following command to run the app.

npm start 

while running this command you will be asked to change the port. This is because the JSON server runs on port 3000 which is the default port for the app. Press shift+y to allow it to change the port. After compiling, the app opens in the default browser.

 

HOME PAGE 

CART PAGE