Google Book Searcher

Приложение, позволяющее искать книги через Google Books API

Посмотреть деплой

Экосистема

• TypeScript
• React SPA
• redux, react-redux, redux-toolkit, Thunk - хранилище, redux-persist - для кеширования хранилища в LocalStorage
• uniqid - для уникальных айди
• sass - для scss
• classnames - для модулей scss
• ESlint - для линтинга
• gh-pages - деплой
• Docker - для запуска в контейнере

Функционал

Элементы

• Форма из инпута ключевой фразы и селектора категорий. Сабмит-кнопка неактивна при пустом инпуте
• При запросе в форме не с главной страницы - редирект на главную с найденными карточками
• Счетчик полученных книг из запроса
• Фильтрация полученных книг по релефантности, старым и новым изданиям (дропдаун показывается, если найдены книги, и скрыт, если ничего не найдено)
• Пагинация с шагом 30 и подгрузкой по кнопке
• Фильтрация дублей результатов запроса к Google Books API
• Заглушки всех элементов книги в случае отсутствия данных в ответе сервера (Картинка, название, автор, дата и тд)

Информация о статусах

• Спиннер загрузки
• Попап-информатор об ошибке сервера
• Информатор дефолтного состояния блока с карточками до запроса

Роутинг

• Главная страница поиска
• Страница конкретной книги с динамическим роутом
• 404 страница

Хранилище

• Организовано модульно через Slice
• все стейты сохраняются локально при перезагрузке страницы
• Все reducers и middleware вынесены в отдельные файлы

Безопасность

• API-ключ вынесен в .env и не хранится в коде

Верстка

• Адаптивная до 320px

Reference

• ТЗ

Команды:

• clone branch with git@github.com:proehavshiy/google-books-searcher.git
• npm run build - build final version
• npm run deploy - deploy the project to gh-pages
• npm run lint - lint all files
• npm run lint:fix - fix all fixable files

Docker

• npm run image - create Docker image
• npm run container - run container
• npm run stop - stop & delete container

Docker Make

• make build - create Docker image
• make run - run container
• make stop - stop & delete container
• make check - check all containers