Bookshelf-React

Bookshelf-React is a React.js-based digital library application that features book management and catalog display.

Project Requirements

Part	Description
Features	• Create • Read • Update • Delete • Search
Packages	• Mongoose • Cors • Morgan
Libraries	React.js
Framework	• Express.js • Bootstrap 5
Tools	• Visual Studio Code • MongoDB • Node.js
VS Code Extensions	Prettier

Download & Install

1. Visual Studio Code

   https://bit.ly/VScode_Installer

   
   

2. NodeJS

   https://bit.ly/NodeJS_Installer

   
   

3. MongoDB

   https://bit.ly/MongoDB_Installer

Database

1. Open the MongoDB application, then click the Add new connection button.

   
   

2. Create a connection with any name (free), for example as shown in the following image:

   
   

3. Click the Create database button.

   
   

4. Please name the database and collection as follows:

   
   

5. Click the Import data button.

   
   

6. Look for the file called db_bookshelf_react.catalog.json, it is located in the bookshelf-react/public/database directory.
   

Get Started

1. Open Terminal, then create a new project:
   

   npx create-react-app bookshelf-react

   
   

2. Download and extract this repository.
   
   

3. Copy the directories: backend, public, and src.
   
   

4. Copy the files: BACA.md, README.md, and LICENSE.txt.
   
   

5. Paste and Replace into the bookshelf-react directory.
   
   

6. Open Terminal inside that directory.
   
   

7. Install bootstrap to manage the appearance (layout):
   

   npm install bootstrap

   
   

8. Install bootstrap-icons for icons:
   

   npm install bootstrap-icons

   
   

9. Install react-router-dom to manage page routes:
   

   npm install react-router-dom

   
   

10. Install axios to be able to make requests to the backend / API:
    

    npm install axios

    
    

11. Install express to make a backend server:
    

    npm install express

    
    

12. Install mongoose to connect the backend to MongoDB:
    

    npm install mongoose

    
    

13. Install cors to enable communication between frontend and backend across different ports or domains:
    

    npm install cors

    
    

14. Install morgan to display the HTTP request log in the terminal (useful for debugging):
    

    npm install morgan

    
    

15. Install nodemon to restart the server automatically:
    

    npm install --save-dev nodemon

    
    

16. Install concurrently to run multiple scripts simultaneously in the terminal:
    

    npm install --save-dev concurrently

    
    

17. Open package.json, then change the scripts section to look like this:
    

    "scripts": { "server": "nodemon --quiet backend/server.js", "react": "react-scripts start", "start": "concurrently --names \"BACKEND,FRONTEND\" --prefix name \"npm run server\" \"npm run react\"", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },

    
    

18. To run the web, type the command:
    

    npm start

    
    

19. Open your browser, then type -> http://localhost:3000/.
    
    

20. Please access the features and enjoy [Done].

Highlights

Home	Catalog

Add Book	Edit Book	Delete Book

Search

Appreciation

If this work is useful to you, then support this work as a form of appreciation to the author by clicking the ⭐Star button at the top of the repository.

Disclaimer

This application is the result of the development of the CAMP404 Course. I do not deny that I still use third-party services in this work, including: libraries, frameworks, and so on.

LICENSE

MIT License - Copyright © 2022 - Devan C. M. Wijaya, S.Kom

Permission is hereby granted without charge to any person obtaining a copy of this software and the software-related documentation files to deal in them without restriction, including without limitation the right to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons receiving the Software to be furnished therewith on the following terms:

The above copyright notice and this permission notice must accompany all copies or substantial portions of the Software.

IN ANY EVENT, THE AUTHOR OR COPYRIGHT HOLDER HEREIN RETAINS FULL OWNERSHIP RIGHTS. THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, THEREFORE IF ANY DAMAGE, LOSS, OR OTHERWISE ARISES FROM THE USE OR OTHER DEALINGS IN THE SOFTWARE, THE AUTHOR OR COPYRIGHT HOLDER SHALL NOT BE LIABLE, AS THE USE OF THE SOFTWARE IS NOT COMPELLED AT ALL, SO THE RISK IS YOUR OWN.