React GraphQL MDC simple UI

Styling Guidelines

• Use the "Mulish" Google font
• You can use the following colors (You don't have to use all but you can pick and choose from here)

The view has the following features:-

1. A search bar that allows users to search for books by title.
2. A list of search results that displays the book title, author, and a button to add the book to the students reading list.
3. A reading list that displays all the books that the teacher has added.
4. A button to remove a book from the reading list.

Requirements

• Use React as the frontend framework.
• Showcase the use of React hooks.
• Use material-ui as the component library.
• Create components as you feel is best suited for your solution

Data

To get access to data you can switch into the src/backend folder and run

npm install

Then run the following command to start the server

npm start

This starts a simple Graphql server at the url http://localhost:4000/, the server has a single query books that returns a list of books.

query Books {
  books {
    author
    coverPhotoURL
    readingLevel
    title
  }
}