/Book-Search-Engine

A book search engine using MERN stack.

Primary LanguageJavaScriptMIT LicenseMIT

Book-Search-Engine MIT

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.

Table of Contents

Description

AS AN avid reader
I WANT to search for new books to read
SO THAT I can keep a list of books to purchase

back to top

Tech Stack

  • CSS3
  • HTML5
  • Javascript
  • Node.js
    • npm
      • Concurrently
      • Nodemon
  • Express.js
  • MongoDB
    • Mongoose
  • GraphQL
    • Apollo Server
    • graphql-tag
  • Bcrypt
  • jsonwebtoken
    • JWT Decode
  • dotenv
  • React
    • React-DOM
    • React Router DOM
    • Apollo Client
  • Vite
    • Vite React Plugin
  • Bootstrap
    • React-Bootstrap

back to top

Installation

  1. 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
  2. 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
  3. Config: Please add the correct environmental variables in the .env file in the server directory like the example below:

    MONGODB_URI=mongodb+srv://<username>:<password>@<cluster-name>.mongodb.net/<collection-name>
    SECRET=<SECRET-TO-JWT>

back to top

Usage

  • 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

back to top

Screenshots

Logged In & Saved Books View

Screenshot

Links

Tweet about this

back to top

License

  • This application is licensed by MIT.

back to top


Copyright