E-Library Using ReactJs

By Pedapati Raja Stuthi Paul

ReactJs and a mock backend json-server were used to create an online library administration web application.

An web application using React Js and mock backend json-server that manages E-Library.

Requirements :

- Node Js 

Packages used in this packet 

- react

- json-server

- react-redux 

- redux

- react-router-dom

- axios

- material-ui/icons

- material-ui/lab

Installing Packages required for the project

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

Pages

1. Login Page (/login)

The login portal is displayed on this page.

2. Register Page (/register)

The register portal is displayed on this page.

3. Home page (/)

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

4. 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.

5 Admin page 

On this page , we can add new books or update the books.

6 Orders page 

On this page, we display all the orders of the user.

7 Returns page 

On this page, we display the pending book returns of the user.

How to Run 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.

 

http://localhost:3001/ - copy and paste this in browser to view the app.