go>> google-library-card>> 返回
项目作者： dsmooke

项目描述 ：
A React-based Google Books Search application.
高级语言： JavaScript
项目地址: git://github.com/dsmooke/google-library-card.git
创建时间： 2021-03-31T00:10:10Z
项目社区：https://github.com/dsmooke/google-library-card
开源协议：MIT License
下载


Google Library Card

M.I.T. License use

Description

A React-based Google Books Search application.

View the deployed application here

Update April 2021 link to the deployed application is inactive

Table of Contents

Technologies Used

  • React
  • Node
  • Express
  • MongoDB
  • Mongoose

Goals

  • Search for books using Google Books API
  • Save books
  • Render all books saved to the Mongo database
  • View and Delete button
  • Use mongoose and create a Book schema
  • Deploy to Heroku
  • Add application/repository to your portfolio

Instructions

To create React components, work with helper/util functions, and utilize React lifestyle methods to query and display books based on user searches. Use Node, Express and MongoDB so that users can save books to review or purchase later.

This application requires at minimum 2 pages, check out the following mockup images for each page:

Search - 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 - 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 01-Ins_Mern/create-react-express 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:

  1. {
  2.   authors: ["Suzanne Collins"]
  3.   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."
  4.   image: "http://books.google.com/books/content?id=sazytgAACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api"
  5.   link: "http://books.google.com/books?id=sazytgAACAAJ&dq=title:The+Hunger+Games&hl=&source=gbs_api"
  6.   title: "The Hunger Games"
  7. }
  1. Create a layout similar to the mockups displayed above. This should be a SPA (Single Page Application) that uses react-router-dom 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.
  1. Feel free to try out alternative CSS framework to Bootstrap.

  • 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.

User Story

  1. AS A reader who is always looking for new books to read
  2. I WANT an application that finds me book recommendations based on my search input
  3. SO THAT I can save books that interest me AND refer to them when it's time for a new book

Acceptance Criteria

  1. GIVEN a book finding application that finds books based on user's selection
  2. WHEN a user clicks on the link
  3. THEN the application will open in Heroku
  4. WHEN on the Search Page and a user inputs a search and clicks the search button
  5. THEN the Google API will render the books below
  6. WHEN a user clicks the View book button
  7. THEN they will be directed to the book page on Google Books
  8. WHEN a user clicks the Save book button
  9. THEN the book will be saved to the Mongo database
  10. WHEN a user clicks the Saved page
  11. THEN the user will be directed to a page that displays all their saved books
  12. WHEN on the Saved books page
  13. THEN the user will have the option to View or Delete a book
  14. WHEN a user clicks the Delete button
  15. THEN the book will be deleted from the page and the Mongo database
  16. WHEN the user clicks the View button on the Saved page
  17. THEN the user will be directed to the book page on Google Books
  19. WHEN the user examines the documentation of the application
  20. THEN the user will see a folder structure that meets the MVC paradigm
  21. WHEN the user examines the code of the application
  22. THEN the user will see code that meets good quality coding standards

Installation

  1. Clone repo and install packages. Edit scripts within package.json file. npm start to run in integrated terminal, run in browser with localhost:3000.

Contributing

Dana Smooke

License

MIT

© 2021 Trilogy Education Services, LLC, a 2U, Inc. brand. Confidential and Proprietary. All Rights Reserved.