Тестовое задание для стажёра Frontend компании "Авито"

Суть задания

Разработать личный кабинет продавца на маркетплейсе, в котором есть возможность управлять своими объявлениями и заказами. Пункты, отмеченные галочкой (✓) - выполнены.

Общие вводные

• Тестовое задание необходимо реализовать с использованием представленного api.
• Результат тестового должен соответствовать требованиям, описанным ниже.
• В пунктах «Будет плюсом» обозначены требования, выполнять которые не обязательно, но даже частичное выполнение этих пунктов позволит лучше раскрыть ваши знания и навыки.

Функциональные требования

Приложение должно состоять из:

1. [✓] Страницы объявления
2. [✓] Страницы всех объявлений
3. [✓] Страницы заказов
4. [✓] Панели навигации

На странице всех объявлений:

1. [✓] Отображается список всех объявлений продавца
2. [✓] Реализована пагинация показа объявлений
3. [✓] Реализован выбор количества объявлений для показа на странице (по умолчанию должно быть 10)
4. [✓] Реализован поиск по названию объявления
5. [✓] Можно перейти на страницу объявления (по клику на карточку)
6. [✓] В карточке объявления есть следующая информация о нем:
   • [✓] Картинка
   • [✓] Название;
   • [✓] Стоимость;
   • [✓] Количество просмотров;
   • [✓] Количество лайков;
7. [✓] Есть возможность создавать новые объявления (Модальное окно с input):
   • [✓] Картинка (текстовое поле для ввода URL);
   • [✓] Название (текстовое поле);
   • [✓] Описание (текстовое поле)
   • [✓] Стоимость (числовое поле);

На странице объявления:

1. [✓] Есть возможность просмотра объявления
2. [✓] В редактировании объявления есть возможность:
   • [✓] Менять картинку;
   • [✓] Менять название;
   • [✓] Менять цену;
   • [✓] Менять описание.

На странице заказов:

1. [✓] Отображается список заказов с фильтрами по статусу
2. [✓] Возможно сделать сортировку по сумме заказа
3. [✓] На карточке заказа изображена следующая информация:
   • [✓] Количество товаров;
   • [✓] Возможность завершения заказа;
   • [✓] Стоимость заказа;
   • [✓] Дата создания заказа;
   • [✓] Статус (текстом);
   • [✓] Номер заказа;
   • [✓] Кнопка “Показать все товары”, показывающая все товары в данном заказе (можно отображать их в этой же карточке или сделать модальное окно)
4. [✓] При клике на товар в заказе есть возможность перейти в объявление продавца по этому товару

Панель навигации:

1. [✓] Вкладка “Объявления” - реализован переход на страницу объявлений
2. [✓] Вкладка “Заказы” - реализован переход на страницу заказов

Дополнительное задание

1. [✓] На странице всех объявлений реализована фильтрация выдачи по:
   • цене;
   • просмотрам;
   • лайкам
2. [✓] На странице объявлений при клике на кнопку “Заказы” на карточке товара происходит переход в раздел Заказы, где показаны заказы, которые содержат это объявление в товарах.
3. [✓] На странице заказов реализована пагинация показа заказов.

Нефункциональные требования

1. Стек технологий:
   • Frontend фреймворк: React, версия 18
   • Можно использовать любую общедоступную библиотеку компонент. Была использована библиотека PrimeReact
   • сборщик: Webpack/Vite (Был использован Vite)
   • Node.js: 20 или выше
   • пакетный менеджер: npm
2. Роутинг выполнен с использованием React Router v6

Будет плюсом:

1. [✓] Использование TypeScript
2. [✓] Настройка проверки кода с помощью ESLint
3. Наличие docker-файла для запуска
4. Прерывание (отмена/прекращение) запросов переходе со страницы на страницу
5. Покрытие кода юнит-тестами

Ход решения, вопросы и проблемы, возникшие в ходе работы

1. Последняя версия библиотеки "json-server" (v1.0.0-beta.2) работала некорректно в плане фильтрации и сортировки: например, запрос GET advertisements?name_like=телефон возвращал все данные по эндпоинту advertisements вместо тех, что содержат данное слово. Было решено откатиться на версию v0.17.4, где никаких проблем с сортировкой и фильтрацией нет.
2. Не было инструкций как действовать после добавления нового объявления. Было решено сделать сортировку объявлений по дате создания по убыванию, так как логично было бы видеть последние объявления первыми. При добавлении нового объявления было решено возвращаться на первую страницу и отображать объявления с новым добавленным элементом в начале списка.
3. В качестве UI Kit была выбрана библиотека PrimeReact, поскольку был опыт работы с ней ранее. К плюсам данной библиотеки можно отнести достаточно большое количество компонентов на все случаи жизни, большое количество тем, как светлых, так и тёмных, подробная документация с примерам кода. К минусам можно отнести достаточно большой объём компонентов.
4. Пункт из дополнительного задания по переходу к заказам, содержащим текущее объявление, был реализован в виде ссылки на странице самого объявления, а не на карточке объявления на странице всех объявлений. Посчитал, что так будет логичней и удобней.

Минусы и недостатки в проекте

Поскольку на выполнение проекта давалось ограниченное время, реализация имеет ряд недостатков:

1. Отсутствуетвалидация форм. Сделана минимальная валидация стандартными средствами HTML5.
2. Мало внимания уделено дизайну и вёрстке
3. Обработаны не все возможные ошибки. Ошибки выводятся в консоль, либо с помощью компонента Toast
4. Необходимо добавить прелоадеры и скелетоны для более лучшего user experience
5. Фильтрацию по лайкам, просмотрам и цене неплохо было бы сделать путём ввода диапазона "от и до". Сейчас реализован только точный фильтр (по конкретному числу).

Установка и запуск проекта

0. Установить NodeJS v20 или выше, и пакетный мнеджер npm
1. Клонировать репозиторий git clone https://github.com/tracktor-git/avito-test
2. Установить зависимости npm install
3. Запустить сервер npm run server
4. Запустить проект в режиме разработки npm run dev
5. Проект будет доступен по адресу http://localhost:5173/