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.
- Node Js
- react
- json-server
- react-redux
- redux
- react-router-dom
- axios
- material-ui/icons
- material-ui/lab
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
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.
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.
Submitted by Pedapati Raja Stuthi Paul (rajastuthipaul)
Download packets of source code on Coders Packet
Comments