Anastasia-kot / future-test-website

adaptive website for finding books with using API (google books API). The source code is in the developer branch

Home Page:https://anastasia-kot.github.io/future-test-website

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Онлайн-сервис поиска книг с помощью Google Books API

Использованный стек/ технические требования:

  • React
  • Redux, Redux-Thunk
  • Formik
  • Axios для взаимодействия с Google Books API. Сгенерирован Google API key
  • Адаптивность от 320px до 1920px
  • максимально переиспользуемые компоненты (организация архитектуры, структуры приложения ) (использован Feature-Sliced Design)
  • обработка ошибок - некорректных данных при ошибках API-запроса
  • Покрытие тестами (в процессе покрытия тестами)
  • Typescript

Функционал

  • форма для поиска - поле и кнопка поиска. По введенной пользователем подстроке производится поиск книг. Триггером к поиску является либо нажатие Enter (когда текстовое поле в фокусе), либо нажатие кнопки поиска.
  • Фильтрация по категориям. Ниже текстового поля располагается селект с категориями: all, art, biography, computers, history, medical, poetry. Если выбрано "all" (выбрано изначально), то поиск производится по всем категориям.
  • Сортировка. Рядом с селектом категорий находится селект с вариантами сортировки: relevance (выбран изначально), newest.
  • Найденные книги отображаются карточками, каждая из которых состоит из изображения обложки книги, названия книги, названия категории и имен авторов. Если для книги приходит несколько категорий, то отображается только первая. Авторы отображаются все. Если не приходит какой-либо части данных, то вместо нее просто пустое место. Над блоком с карточками отображается количество найденных по запросу книг.
  • Пагинация реализована по принципу 'load more'. Ниже блока с карточками находится кнопка 'Load more', по клику на нее к уже загруженным книгам подгружаются еще. Шаг пагинации - 30.
  • При клике на карточку происходит переход на детальную страницу книги, на которой выводятся ее данные: изображение обложки, название, все категории, все авторы, описание.
  • Во время загрузки книг показывается индикатор загрузки
  • Обработка ошибок - некорректных данных в promise.data при отрисовке, при получении

Макет

image image

About

adaptive website for finding books with using API (google books API). The source code is in the developer branch

https://anastasia-kot.github.io/future-test-website


Languages

Language:TypeScript 65.2%Language:CSS 27.7%Language:HTML 7.1%