Skip to content
This repository has been archived by the owner on Oct 10, 2023. It is now read-only.

SecondThundeR/modsen-test-task

Repository files navigation

Практическое задание JS (TS) / React

Demo: https://modsen-test-task.vercel.app/

Задание

Необходимо разработать React-приложение поиска книг с помощью Google Books API: Документация

Для авторизации запросов к API выбрать способ с предоставлением API key

Функционал

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

Замечания

  • При желании можно использовать Redux/Mobx
  • Во время загрузки книг стоит показать какой-то индикатор
  • Можно использовать сторонние библиотеки, например для визуализации и украшении приложения можно использовать Bootstrap или похожего UI фреймворк.
  • Помните про обработку ошибок!
  • Верстка может быть самая простая, однако она не должна ломаться при разрешениях от 320px до 1920px.

Примерный вид приложения

image image

Текущий вид приложения

Экран поиска

Search Page Search Page (Phone)

Экран книги

Book Page Book Page (Phone)