# Google Books Search### OverviewIn this activity, you'll create a new React-based Google Books...

Question

# Google Books Search### OverviewIn this activity, you'll create a new React-based Google Books Search app. This assignment requires you to create React components, work with helper/util functions, and utilize React lifecycle methods to query and display books based on user searches. You'll also use Node, Express and MongoDB so that users can save books to review or purchase later.### CommitsHaving an active and healthy commit history on GitHub is important for your future job search. It is also extremely important for making sure your work is saved in your repository. If something breaks, committing often ensures you are able to go back to a working version of your code.* Committing often is a signal to employers that you are actively working on your code and learning. * We use the mantra “commit early and often.” This means that when you write code that works, add it and commit it! * Numerous commits allow you to see how your app is progressing and give you a point to revert to if anything goes wrong.* Be clear and descriptive in your commit messaging. * When writing a commit message, avoid vague messages like "fixed." Be descriptive so that you and anyone else looking at your repository knows what happened with each commit.* We would like you to have well over 200 commits by graduation, so commit early and often!### Submission on BCS* **Please submit both the deployed Heroku link to your homework AND the link to the Github Repository!**### Instructions* This application requires at minimum 2 pages, check out the following mockup images for each page: * [Search](Search.png) - 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. * [Saved](Saved.png) - 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.1. Start by using the 07-Ins_Mern example as a base for your application.2. Add code to connect to a MongoDB database named `googlebooks` using the mongoose npm package.3. Using mongoose, then create a Book schema.4. 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* Creating `documents` in your `books` collection similar to the following:  ```js  {   authors: ["Suzanne Collins"]   description: "Set in a dark vision of the near future, a terrifying reality TV show is taking place. Twelve boys and twelve girls are forced to appear in a live event called The Hunger Games. There is only one rule: kill or be killed. When sixteen-year-old Katniss Everdeen steps forward to take her younger sister's place in the games, she sees it as a death sentence. But Katniss has been close to death before. For her, survival is second nature."   image: "http://books.google.com/books/content?id=sazytgAACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api"   link: "http://books.google.com/books?id=sazytgAACAAJ&dq=title:The+Hunger+Games&hl=&source=gbs_api"   title: "The Hunger Games"  }  ```5. Create a layout similar to the mockups displayed above. This should be a SPA (Single Page Application) that uses [`react-router-dom`](https://github.com/reactjs/react-router) to navigate, hide and show your React components without changing the route within Express.* The layout should include at least two React Components for each page `Search` and `Saved`.* Feel free to try out alternative CSS framework to Bootstrap.6. Add the following Express routes for your app:* `/api/books` (get) - Should return all saved books as JSON.* `/api/books` (post) - Will be used to save a new book to the database.* `/api/books/:id` (delete) - Will be used to delete a book from the database by Mongo `_id`.* `*` (get) - Will load your single HTML page in `client/build/index.html`. Make sure you have this _after_ all other routes are defined.* Deploy your application to Heroku once complete. **You must use Create React App** and current versions of React and React-Router-Dom for this assignment.- - -### Bonus Live Updates to Saved Books* Use React routing and [socket.io](http://socket.io) to create a notification or a component that triggers whenever a user saves an book. Your message should include the title of the saved book. * Say you have multiple browsers open, each one visiting your site. If you save an book in one browser, then all of your browsers should notify you that a new book was saved. * [Socket.io NPM package](https://www.npmjs.com/package/socket.io)### Reminder: Submission on BCS* **This assignment must be deployed.** * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository!- - -### Minimum RequirementsAttempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. Hosting on Heroku and adding a README.md are required for this homework. In addition, add this homework to your portfolio, more information can be found below.- - -### Create a README.mdAdd a `README.md` to your repository describing the project. Here are some resources for creating your `README.md`. Here are some resources to help you along the way:

Sanghamitra · Accepted Answer

GoogleBookSearch/client/package.json { "name": "google-books", "version": "0.1.0", "description": "Google Books", "private": true, "proxy": "http://localhost:3001/", "dependencies": { "react": "^16.6.3", "react-dom": "^16.6.3", "react-scripts": "^2.1.1", "react-router-dom": "^5.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "browserslist": [ ">0.2%", "not dead", "not ie ) }; }; export default App; GoogleBookSearch/client/src/App.test.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(, div); ReactDOM.unmountComponentAtNode(div); }); GoogleBookSearch/client/src/components/Form/index.js import React from "react"; function Form(props){ return ( Search for and save Books of Interest Search ); } export default Form; GoogleBookSearch/client/src/components/Header/index.js import React from "react"; import style from "./style.css"; function Header() { return ( Google Books Search ); } export default Header; GoogleBookSearch/client/src/components/Header/library.png GoogleBookSearch/client/src/components/Header/style.css .jumbotron .text-light{ color: #0c5460 !important; } .jumbotron{ background-color:#fff !important; padding-top: 1% !important; padding-bottom: 0px !important;} .search { border:1px solid #dee2e6; border-radius:5px; padding:2%; margin-bottom:2%; } .result { border:1px solid #dee2e6; border-radius:5px; padding:2%; margin-bottom:2%; } .search .btn{background-color:#0c5460;} .search h2{color:#0c5460;} GoogleBookSearch/client/src/components/NavBar/index.js import React from "react"; import { Link } from "react-router-dom"; import "./style.css"; function Navbar() { return ( Google Books Search Saved ); } export default Navbar; GoogleBookSearch/client/src/components/NavBar/style.css nav { background-color: #0c5460; } a { text-decoration: none; color: white } a:hover { text-decoration: underline; color: white } .navbar-brand { font-size: 35px; } .nav-item { font-size: 25px; } .nav-link:hover { background-color:#fff; color:#0c5460; } GoogleBookSearch/client/src/components/Results/index.js import React, { Component } from "react"; import API from "../../utils/API"; class Results extends Component { state = { savedBooks: [], } componentDidMount() { API.savedBooks() .then(savedBooks => this.setState({ savedBooks: savedBooks })) .catch(err => console.error(err)); } handleSave = book => { if (this.state.savedBooks.map(book => book._id).includes(book._id)) { API.deleteBook(book._id) .then(deletedBook => this.setState({ savedBooks: this.state.savedBooks.filter(book => book._id !== deletedBook._id) })) .catch(err => console.error(err)); } else { API.saveBook(book) .then(savedBook => this.setState({ savedBooks: this.state.savedBooks.concat([savedBook]) })) .catch(err => console.error(err)); } } render() { return ( {!this.props.books.length ? ( No Results to Display ) : ( {this.props.books.map(result => ( {result.title} by {result.authors} {result.description} View this.handleSave(result)} className="btn badge-pill btn-outline-warning mt-3 ml-3" > {this.state.savedBooks.map(book => book._id).includes(result._id) ? "Unsave" : "Save"} ))} )} ) } } export default Results; GoogleBookSearch/client/src/components/Wrapper/index.js import React from "react"; function Wrapper(props) { return ; } export default Wrapper; GoogleBookSearch/client/src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.register(); GoogleBookSearch/client/src/pages/NoMatch.js import React from "react"; import Header from "../components/Header"; function NoMatch() { return ( 404 Page Not Found ð ); } export default NoMatch;

# Google Books Search ### Overview In this activity, you'll create a new React-based Google Books Search app. This assignment requires you to create React components, work with helper/util functions,...

Solution

Answer To This Question Is Available To Download

Related Questions & Answers