Moderator App 2

Продолжение проекта-реализации административной панели для модераторов Авито. Модератору доступны просмотр объявлений, фильтрация, сортировка, просмотр карточек товаров, отправка фидбека и принятие решений (Одобрить/Отклонить/На редактирование), а также просмотр личной статистики.

Что нового в версии?

Каждый пункт = новый коммит

• Клонирование оригинального репозитория + начатый этап адаптивности
• Адаптивность дизайна под разные разарешения устройств. Подходит для эрканов > 600px, для меньших размеров - отдельная мобильная версия (в будущем)
• Корректная обработка ошибок во время фетча (сетевых) и ошибок, пришедших с сервера (HTTP):
  • Вынос фетча в отдельную функцию в src/utils/fetchData.jsx
  • Try/catch блоки для поимки сетевых ошибок
  • Описания ошибок в консоли в зависимости от вида и кода
  • Произведена мануальная проверка на отслеживание сетевых ошоибок и 4хх
  • Плюс фикс некоторых багов (накладка элементов друг на друга, форматирование текста в истории модерации, форматирование таблиц в карточках объявлений, исправлена схема фидбека для "Отклонено" и "На доработку")
• Редактирование системы поиска: теперь поиск работает от 3 символов воизбежание излишней нагрузки на сервер. Имплементация недостающих ховеров на элементы
• Bulk операции: селект нескольких объявлений со счетчиком выбранных, массовое одобрение, отклонение и отправка на доработку. А также:
  • Кнопка быстрой прокрутки наверх
  • Разделение главной (src/pages/ads) на компоненты и разделение css файлов. Такая же практика будет применена к другим страницам
  • Улучшение адаптивности в связи с новыми элементами
  • Вынос POST запросов на approve/reject/request-changes в отдельные util функции и их переиспользование

Быстрый старт

1. Клонирование репозитория

git clone git@github.com:caxapb/ModeratorApp.git
cd ModeratorApp

2. Запуск docker-compose

docker-compose up --build

Серверная часть доступна на http://localhost:3001. Фронтенд доступен на http://localhost:5173.

Стек технологий

• React и React Router
• Vite
• Порт: 5173

Функционал

• Главная страница:
  • Список карточек объявлений (изображение, название, цена, категория, дата, статус, приоритет),
  • Фильтрация по категории, статусу, цене
  • Сортировка по цене, дате, приоритету в восходящем или нисходящем порядке
  • Поиск объявлений
  • Сброс всех филльтров
  • Пагинация: навигация между страницами, настройка модератором количества объявлений на страницу, общее количество объявлений
• Карточка товара:
  • Галерея изображений
  • Полное описание товара и информация о продавце
  • История модерации
  • Панель модератора с возможностью одобрить/отклонить/отправить на редактирование объявление с обязанностью дать причину/комментарий, если это не одобрение
  • Навигация к списку или к предыдущему/следующему объявлению
• Статистика
  • Выбор периода, за который нужна статистика
  • Общая статистика модератора (общее количество проверенных объявлений, процент одобренных, процент отклоненных, среднее время на проверку)
  • Графики активности по дням за последние неделю и месяц
  • Круговая диаграмма распределения решений
  • График по категориям проверенных объявлений

Особенности реализации

• На сервере была добавлена обработка CORS: app.use(cors());
• Реализация горячих клавиш на наведение фокуса на поиск (/), на одобрение объявления (английская a/A, но сработает и на русской раскладке), на отклонение объявления (английская d/D, но сработает и на русской раскладке)
• Выбор периода для статистики
• Контейнеризация
• Кастомный хук
• Подробные комментарии в коде
• Основная статистика взята с /api/v1/stats/summary. Она также может быть получена от /api/v1/moderators/me, оба дают похожие данные (но разные значения), однако не указано что подойдет.
• Большинство обязательных функциональных требований было выполнено, "со звездочкой" выполнена часть

Основные файлы и архитектура

• src/pages/ads/Ads.jsx — страница списка объявлений
• src/pages/adCart/AdCart.jsx - карточка товара с подробным описанием
• src/pages/stats/Stats.jsx - страница статистики
• src/components/Header.jsx - хедер

Папка src содержит весь код. Внутри нее папки:

1. hooks: кастомные хуки
2. components: компоненты, которые переиспользуются (Header, AdPreview - набор из которого формирует список)
3. pages: страницы с соответствующими компонентами. Всего 3 страницы: stats - статистика, ads - список объявлений, adCard - карточка товара. Каждая страница - папка и имеет свои дочерние, но не переиспользуемые компоненты, например чарты на странице статистики.

Что остается на будущее?

Так как время на задание было сильно ограничено, мне не удалось справиться со всем пуллом заданий, которые я поставила себе. Однако, это точки роста, которые помогут мне развиваться дальше и погрузиться в профессию глубже

• Работа над плавностью переходов, оптимизацией загрузок и анимациями для пользователей
• Покрытие кода тестами
• Темная тема
• JS -> TS