Skip to content

Latest commit

 

History

History
45 lines (28 loc) · 2.2 KB

README.md

File metadata and controls

45 lines (28 loc) · 2.2 KB

Book Assignment View

Overview

This project implements a book assignment view for teachers, allowing them to search for books, add them to a reading list, and remove them as needed. It uses modern web technologies to create a responsive and user-friendly interface.

Technologies

  • GraphQL: For querying the backend.
  • Apollo Client: For state management and interacting with the GraphQL API.
  • Material-UI: For UI components.
  • React: As the frontend framework.
  • TypeScript: For type checking and improved code quality.
  • react-infinite-scroll-component: For implementing infinite scrolling in the reading list.
  • localStorage: For persisting the reading list.

Features

  • Search Bar: Allows users to search for books by title.
  • Search Results: Displays the book image, title, author, and a button to add the book to the reading list.
  • Reading List: Displays all the books that the teacher has added.
  • Remove Book: Allows users to remove a book from the reading list by clicking the icon.

Executing Program

  • To start the backend, navigate to /backend and run npm install then npm run start:dev.
  • To start the frontend, navigate to /frontend and run npm install then npm start.

Screenshots

Reading List (Large Screen)

Reading List (Mobile)

Reading List (Mobile 2)

Alert (Large Screen)

Alert (Large Screen 2)

Alert (Mobile)

Search List (Large Screen)

Search List (Mobile)