Skip to content

A full-stack MERN app to search the Google Books API and keep a list of favorites for a given user.

License

Notifications You must be signed in to change notification settings

etorres-revature/React-Google_Books

Repository files navigation

Github License

Google Books API Search

Project Description

Google Books API Search is a MERN full-stack web-application. The front-end is displayed using React.js with client-side routing provided by the react router. Server-side routing is performed with Express.js. The development environment was provided by Node.js. And, persistent data is stored in a MongoDB database.

Users are taken to the Home Page where they can choose to search the Google Books API or see books saved in the MongoDB database.

The Search Page provides a text input component that makes a call to the Google Books API and returns book information that is dynamically displayed. There is a "save" button that will add new books to the MongoDB database.

The Saved Page connects to the MongoDB database to pull information on books that have been saved previously and dynamically display them. There is a "remove" button in case duplicate books have been saved, or the user wants to delete a book from the MongoDB database.

Table of Contents

Installation Instructions

If you want to use this code for yourself please clone/fork the Google Books API Search repository.

Usage

The Google Books API repository is deployed on Heroku.

Users start using the Google Books API Search on the Home Page.

GOOGLE BOOKS API SEARCH home page

Navigating to the Search Page displays a text input for Users to type in the names of books that they want to search. Information is conditionally displayed such that when there is nothing to display, Users see that message.

GOOGLE BOOKS API SEARCH search page

Once a user has entered the name of a book for which to search, then the app displays a card per book dynamically with the information returned from the Google Books API.

GOOGLE BOOKS API SEARCH search page with search

Each book card has a "save" button that will include that particular book card's information in the MondoDB database.

GOOGLE BOOKS API SEARCH save alert

Navigating to the Saved Page dynamically displays a book card for each book that has been saved into the MongoDB database.

GOOGLE BOOKS API SEARCH saved page

If a User discovers for any reason that a book needs to be removed form the MongoDB database (if there is a duplicate, for instance...)

GOOGLE BOOKS API SEARCH saved page with duplicate

... then the User can click on the "remove" button of the book card associated with the book to be removed; ...

GOOGLE BOOKS API SEARCH remove alert

... and, that book's information will be deleted from the MongoDB database and no longer be dynamically displayed on the Saved Page.

GOOGLE BOOKS API SEARCH no more duplicate on page

The Google Books API Search also has a NoMatch Page. When a User attempts to visit a URI/URL that is not in the client-side router, the following page will be displayed:

GOOGLE BOOKS API SEARCH nomatch page

Guidelines for Contributing

If you have thoughts on further features or any suggestions on how to improve Google Books API Search, please send them to the e-mail address listed below.

Tests

Test early; test often.

Technologies Used

💻 💻 💻 💻 💻 💻

📝 HTML5 📝

HTML5 is a markup language used for structuring and presenting content on the World Wide Web. The goals are to improve the language with support for the latest multi-media and other new features; to keep the language both easily readable by humans and consistently understood by computers and devices; and to remain backward compatible to older software. Many new symantec features are included.

HTML5 content borrowed from this page.

🎨 CSS 🎨

Cascading Style Sheets (CSS) is a stylesheet language used for describing the presentation of a document written in a markup language (such as HTML5). CSS is designed to enable the separation of presentation and content; including layout, colors, and fonts. This separation improves content accessibility to provide more flexibility and control in the specification of presentation characteristics, enabling multiple web pages to share formatting by specifying relevant CSS in a separate file, which reduces complexity and repetition in the structural content (HTML), as well as enabling the file to be cached to improve the page load speed between the pages that share the file and its formatting.

Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice, and on Braille-based tactile devices.

CSS content borrowed from this page.

👞 Bootstrap 4 👞

Bootstrap 4 is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Bootstrap 4 content borrowed from this page.

🎇 JavaScript 🎇

JavaScript (JS) is one of the core technologies of the World Wide Web (along with HTML and CSS). It enables interactive web pages and is an essential part of web applications. JS is a multi-faceted, scripting language that provides versatility through Application Programming Interfaces (APIs) and Document Object Model (DOM) manipulation, among others.

JavaScript content borrowed from this page.

🌐 NODE.js 🌐

NODE.js is an open-source, cross-platform JavaScript runtime environment that execute JavaScript code outside a web browser. NODE.js lets developers use JavaScript to write command line tools and for server-side scripting. NODE.js represents a "Javascript everywhere" paradigm, unifying web-application development around a single programming language, rather than different programming languages for server- and client-side scripts.

NODE.js content borrowed from this page.

Download Node.js.

📡 Express.js 📡

Express.js is a minimal and flexible NODE.js web application framework that provides a robust set of features for web and mobile applications. The myriad HTTP utility methods and middleware allow for the creation of a robust API. Express.js provides a thin layer of fundamental features, without obscuring NODE.js features.

Express.js content borrowed from this page.

👹 MongoDB 👹

MongoDB is a document-oriented NoSQL database used for high volume data storage. Instead of using tables and rows like traditional databases, MongoDB makes use of collections and documents. Documents consist of key-value pairs that are the basic unit of data and more closely resemble the JSON architecture.

MongoDB content borrowed from this page.

💫 React.js 💫

React.js is an open source JavaScript library that is used for building interfaces for single-page applications, which handles the view layer for web and mobile apps. React allows for the creation of reusable UI components. This allows developers to create large web applications that change data, without reloading the page.

React.js content borrowed from this page.

Author

This Google Books API Search was built by 💚 Eric D. Torres 💚

Questions

Check out my GitHub profile.

You can contact me by e-mail at etorresnotary@gmail.com for any additional questions and/ or clarifications you may need about the project.

License

This application uses the MIT License found here.

This README.md file generated with my NODE.js README Generator app.

About

A full-stack MERN app to search the Google Books API and keep a list of favorites for a given user.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published