Google-books-finder

Форк
0

README.md

Google-books-finder

Проект является тестовым заданием, некоторые решения могут быть не самыми оптимальными. С каждым проектом я расту и развиваюсь как разработчик, поэтому прошу ознакомиться с другими моими проектами в которых исправлены недочеты предыдущих.

Цель проекта - демонстрация навыков. Личная цель - обучение новым технологиям.

Техническое задание:

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

В данном проекте я познакомился и разобрался с:

  1. Redux - Работал без toolkit т.к. по тз он был запрещен. Расписывал все типы. Писал асинхронны запрос в thunk. Хранил данные в map для более удобного поиска по id книги.
  2. CSS - Делал адаптивную верстку используя media-запросы.
  3. API - Использовал более сложный api google books.
  4. Vite - Работал с данным сборщиком, настраивал конфиг.
  5. Docker - Создал dockerfile с конфигурацией.
  6. React router dom - Добавил навигацию через данную библиотеку. Ранее работал с роутингом next js.

Описание

Updated on Nov 28, 2023

Языки

TypeScript

  • Dockerfile
  • HTML
  • CSS
Сообщить о нарушении

Использование cookies

Мы используем файлы cookie в соответствии с Политикой конфиденциальности и Политикой использования cookies.

Нажимая кнопку «Принимаю», Вы даете АО «СберТех» согласие на обработку Ваших персональных данных в целях совершенствования нашего веб-сайта и Сервиса GitVerse, а также повышения удобства их использования.

Запретить использование cookies Вы можете самостоятельно в настройках Вашего браузера.