Feature 5: User can view saved quotes in library

[codingcodymiller]

⚙️ Feature

Users can see the quotes that they have saved.

📐 Functionality

Users will be able to view a dashboard of the books they have saved quotes for and click on the book cover for a book to see all the saved quotes for that book.

🖼️ Wireframes

Mobile

Desktop

🐘 Database

• Update book table to include a row for larger image

☁️ Server

• Update endpoint to save quote to include large image URL
• write endpoint to get a list of all books for a single user
  • sends the larger image, book id, and book name (for alt text)
• revise endpoint to get quotes to include the ability to get quotes for a single book

⚡ Client

• Update quote storage to also include a larger image of the book cover
  • Review Google Books data to determine name of property to access the larger image URL
• Create a component for a single book cover
  • uses the larger book image
  • should navigate to quotes for just that book when clicked
• Create a component for the book cover list
• Update QuoteDashboard to include the ability to show results for only a single book
  • Add bookId to state, with default null to account for all books
    • Not sure how to pass id to quotes view...maybe URL parameter?

🧑‍⚕️ Clean Up

• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.