A book search engine demonstrating M.E.R.N. stack development by using using Google Books API and GraphQL with Apollo Server to fetch and modify data, replacing the old RESTful API method. This app is also deploy to Heroku @ B.S.E.
AS AN avid reader
I WANT to search for new books to read
SO THAT I can keep a list of books to purchase
-
Packages to support this application can be installed by using npm install commands.
Note: If you do not have a
package.json
in your directory already, enter command below to initiate.npm init -y
-
Important: Please @ the EXACT versions as shown above to ensure the functionality of this application.
-
Main Project:
npm install concurrently@8.2.1 nodemon@3.0.1
-
Server:
npm install @apollo/server@4.9.3 bcrypt@5.1.1 express@4.18.2 graphql@16.8.1 graphql-tag@2.12.6 jsonwebtoken@9.0.2 mongoose@7.5.3 npm install --save-dev dotenv@16.3.1 nodemon@3.0.1
-
Client:
npm install @apollo/client@3.8.4 @vitejs/plugin-react@4.1.0 bootstrap@5.3.2 jwt-decode@3.1.2 react@18.2.0 react-bootstrap@2.8.0 react-dom@18.2.0 react-router-dom@6.16.0 vite@4.4.9 npm install --save-dev @types/react@18.2.22 @types/react-dom@18.2.7 eslint@8.50.0 eslint-plugin-react@7.33.2 eslint-plugin-react-hooks@4.6.0 eslint-plugin-react-refresh@0.4.3
-
-
Config: Please add the correct environmental variables in the
.env
file in theserver
directory like the example below:MONGODB_URI=mongodb+srv://<username>:<password>@<cluster-name>.mongodb.net/<collection-name> SECRET=<SECRET-TO-JWT>
-
This application can be invoked by using the following command:
npm start
-
Workflow:
GIVEN a book search engine WHEN I load the search engine THEN I am presented with a menu with the options Search for Books and Login/Signup and an input field to search for books and a submit button WHEN I click on the Search for Books menu option THEN I am presented with an input field to search for books and a submit button WHEN I am not logged in and enter a search term in the input field and click the submit button THEN I am presented with several search results, each featuring a book’s title, author, description, image, and a link to that book on the Google Books site WHEN I click on the Login/Signup menu option THEN a modal appears on the screen with a toggle between the option to log in or sign up WHEN the toggle is set to Signup THEN I am presented with three inputs for a username, an email address, and a password, and a signup button WHEN the toggle is set to Login THEN I am presented with two inputs for an email address and a password and login button WHEN I enter a valid email address and create a password and click on the signup button THEN my user account is created and I am logged in to the site WHEN I enter my account’s email address and password and click on the login button THEN I the modal closes and I am logged in to the site WHEN I am logged in to the site THEN the menu options change to Search for Books, an option to see my saved books, and Logout WHEN I am logged in and enter a search term in the input field and click the submit button THEN I am presented with several search results, each featuring a book’s title, author, description, image, and a link to that book on the Google Books site and a button to save a book to my account WHEN I click on the Save button on a book THEN that book’s information is saved to my account WHEN I click on the option to see my saved books THEN I am presented with all of the books I have saved to my account, each featuring the book’s title, author, description, image, and a link to that book on the Google Books site and a button to remove a book from my account WHEN I click on the Remove button on a book THEN that book is deleted from my saved books list WHEN I click on the Logout button THEN I am logged out of the site and presented with a menu with the options Search for Books and Login/Signup and an input field to search for books and a submit button
- GitHub Repo : Book-Search-Engine
- HeroKu Deployed Link : Book Search Engine: B.S.E.