Book-Search-Full-Stack
A React-based Single-Page-App (SPA) with helper/util functions and React Hooks to query and display books based on user searches. It also uses Node, Express, MongoDB, and socket.io.
Table of Content
- Project Links
- Screenshots-Demo
- Project Objective
- User Story
- Technologies
- Installation
- Usage
- Credits and Reference
- Tests
- Author Contact
- License
Project Links
Deployed Link on Heroku: https://whispering-brushlands-26885.herokuapp.com/
GitHub Repo link: https://github.com/imbingz/Book-Search-Full-Stack
Screenshots-Demo
Project Objective
- This should be a SPA (Single Page Application) that uses
react-router-domto navigate, hide and show React components without changing the route within Express. - User can search for books via the Google Books API and render them here. User has the option to "View" a book, bringing them to the book on Google Books, or "Save" a book, saving it to the Mongo database.
- Use socket.io to create a notification of the saved-book title that triggers whenever a user saves an book.
- Renders all books saved to the Mongo database. User has an option to "View" the book, bringing them to the book on Google Books, or "Delete" a book, removing it from the Mongo database.
- At a minimum, books should have each of the following fields:
-
title- Title of the book from the Google Books API -
authors- The books's author(s) as returned from the Google Books API -
description- The book's description as returned from the Google Books API -
image- The Book's thumbnail image as returned from the Google Books API -
link- The Book's information link as returned from the Google Books API
-
User Story
As a user, I want to be able to search for books, view details of a book on Google Books, and "Save" as well as 'Delete" a book.
Technologies
Reactjs node.js, Mongodb, Mongoose, Express js, socket.io/socket.io-client
React-Bootstrap, React-Router-Dom, React-Icons, React-Tostify
Installation
Access to GitHub.com and a code editor such as vscode is necessary. Click the GitHub link provided above to the APP REPO. Click on the green button that says Clone or Download and Choose how you would like to download: using the SSH/HTTPS keys or download the zip file. If using SSH/HTTPS Key: You will copy the link shown and open up either terminal (mac: pre-installed) or gitbash (pc: must be installed). Once the application is open, you will type git clone paste url here. If using Download ZIP: Click on Download Zip. Locate the file and double click it to unzip the file. Locate the unzipped folder and open it.
Usage
In order to use this APP, you need terminal (mac: pre-installed) or gitbash (pc: must be installed). You also need to download and install node.js and npm or yarn package manager. Open the cloned REPO in your favorite code editor, and then in terminal, enter the command “npm i“ or “yarn add” to install the dependencies. You will also need to signup for a free account at mongodb.com. In addition, make sure to create a .env file on the project root, and input your own mongodb Atals config information (see .env_example for samples). You also need to obtain a Google Book API Key link here and replace process.env.REACT_APP_BOOK_API_KEY in src/Search/Search.js file with you own API KEY. Now you are ready to start using the app by entering “npm start” on your terminal or gitbash. If you just want to try how the app works, you can go to the link here
Credits and Reference
The following links have helped me with this project.
React Icons
mongodb.com
Heroku
Reaect Tostify
React Boootstrap
Photo by Susan Yin on Unsplash
How do I hide API key in create-react-app
Tests
npm test
Author Contact
Contact the author with any questions!
Github link: imbingz
Email: contact.bingz@gmail.com
License
This project is MIT licensed.
Copyright © 2020 BING Z
This README was built with ❤️ by BING Z