Book-finder-V2

Новая реализация моего старого проекта, как итог: полностью написал проект (с нуля) на Typescript, SCSS

Versel - деплой

Описание:

Проект, который позволяет находить интересующие книги с помощью Google Books API (для авторизации использовал API key), отфильтровав по:

• автору;
• категории (art, biography, computers, history, medical, poetry, all);
• актуальности (relevance, newest);
• варианту (full, ebook, free-ebook, paid-ebook);
• типу (books, magazines);

Переход по страницам происходит с помощью бокового сайдбара, в котором кроме навигационных кнопок и индикатора прокрутки имеются кнопки:

• открывающая поле с поисковым фильтром;
• открывающая поле с настройками, где можно самостоятельно выбрать цвет текса, сайдбара, бэкграунда, индикатора прокрутки; также есть возможность загрузить свое изображение и поставить его на фон и выбрать вид идикатора прокрутки - круглый и в виде линии.

Найденные книги отображаются на странице '/result' в виде карточек, каждая карточка состоит из изображения обложки книги, названия книги индикатора, показывающего, добавлена ли книга в избранное ( можно как добавлять, так и удалять из избранного путем нажатия на индикатор ).

Избранные книги отображаются на странице '/starred', вид карточек аналогичен тому, что на странице '/result'.

При нажатии на карточку происходит переход на страницу '/item', где отображатся вся информация по найденной книге.

Имеются соответствующие оповещения если:

• ошибка загрузки данных;
• нечего показывать;
• книга добавлена/удалена из избранного.

Дополнительно имеется домашняя страница, где имеется информация о сайдбаре и карточка с сылками на мои контакты.

Пагинация реализована тремя вариантами:

• 'load more' (нажатие на кнопку загрузки, подгружает новые книги и отображает их ниже уже отображенных)
• через кнопки "back" и "next" (при нажатии на кнопки происходит псевдопереход на страницу с предыдущими/следующими результатами, путем удаления уже отображенных и показа новых);
• через кнопки страниц (пример: 1 - 2 - 3 - 4 - ... - 17) (функционал аналогичен кнопкам "back" и "next": псевдопереход-> удаление старых книг -> показ новых)

Использовал при написании проекта:

• Typescript
• React(с хуками)
• react-router-dom
• Redux (@reduxjs/toolkit)
• react-spinner-loader
• Formik
• SCSS
• react-bootstrap
• bootstrap
• i18next

Проблемы:

• API отдает разное количество totalItems при одних и тех же параметрах запроса, из-за чего пагинация через кнопки 1-2-3-4 и тд становится больше обузой.
• очень странно реагирует на урл созданный через new URL(...) [вообще другие результаты поиска возвращает, решается путем декодинга || если захардкоить и самостоятельно прописывать урл]

Задачи:

• установить prettier и Eslint
• Создать слайс сайдбара ( для отображения активной вкладке при переходе между страницами )
• Решить проблему с созданием урлов
• Создать папку с интерфейсами
• Стилизовать карточки на странице результатов поиска
• Стилизация домашней страницы
• добавить оставшиеся переводы.
• мб убрать пагинацию именно через цифры страниц.
• Внести правило без any в конфиг TS
• Стилизовать активную книгу
• рефакторинг структры дирректорий
• Рефакторинг
• добавить оповещения при изменении настроек
• Отлов ошибок + показ соответствующих оповещений