Skip to content
πŸ“š Full-stack MERN application that queries the Google books API and retrieves book info and lets users to save books to their collection: https://stormy-badlands-29590.herokuapp.com/
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
client
controllers
models
routes
scripts
.gitignore
README.md
package-lock.json
package.json
server.js

README.md

MERN Google Books Search

This is a full-stack MERN application I built for my coding bootcamp, which allows users to search for book titles and retrieve information about them by utilizing the Google Books API. It relies on a MongoDB database for data persistence, Express for routing from my server, React for serving up and manipulating front-end content, and Node as its runtime environment. Users can navigate between the search page, where they can search for and examine different books, and the saved page, where they can see any books they've chosen to add to their collection. They also have the option of deleting a book from their saved collection after they've added it, which will update the database accordingly.

Demo Gif

πŸ”‘ How to Use the App:

On the search page, simply enter in a title (or partial title) of any book you'd like to search for, and the app will retrieve 15 titles from the Google books API and display them on the page after formatting the response object and mapping it to a card component.

Each book displayed on the page has a "save book" button that you can press to save that particular book to your "saved" collection. You can click the saved navigation tab at any time to be routed to the saved books page, where you can view any of the books you've saved to your collection.

Enjoy!

πŸ“ Deployment Instructions

Deployed version of the app can be found here. To run this app on your machine, follow these instructions.

  1. Clone this repository down to your machine.

  2. You will need to have Node.js installed as well as MongoDB in order to continue.

  3. Enter mongod in your command line to start your database listening for requests.

  4. Enter npm install in your command line after navigating into the root directory, which will install the dependencies listed in the package.json.

  5. Enter npm start, which will start the app on http://localhost:3000. For more options on running the app on your own machine or setting up builds for deployment, check out the Create-React-App docs linked below.

  6. Navigate to http://localhost:3000 in your browser, or ctrl-click the link that will be logged to your console. Enjoy!

This project was bootstrapped with Create React App.

πŸ”§ Technologies Used

  • HTML5 and CSS3 for page content and styling.

  • Bootstrap as a CSS framework for styles and components.

  • React.js as the main UI library for serving up and manipulating front-end content.

  • MongoDB as the database.

  • Javascript for the app's logic.

  • Node.js for the app's runtime environment.

  • Express.js for routing.

  • NPM for installation of the packages required by the app, listed as dependencies in the package.json.

    • axios as a promise based HTTP client.
    • mongoose for querying the mongo database.
    • express as a routing framework.
    • react-router-dom as a React routing library for navigating between pages.
    • react-reveal a lightweight animation library for revealing content on scroll.

Acknowledgements

Thank you to my instructor Jerome and my TA's Jimmy, Jacob and Sajeel for their help!

Icons made by Icon Pond from www.flaticon.com is licensed by CC 3.0 BY

Background pattern is from Subtle Patterns.

🌌 Author

Thor Nolanβ€”https://github.com/ThorNolan

You can’t perform that action at this time.