Тестовое задание: Клон Avito

Постановка задачи

Разработать клон Avito с базовыми возможностями по работе с объявлениями. Приложение должно поддерживать размещение, редактирование и отображение объявлений в трех различных категориях: недвижимость, авто и услуги.

Требования

Технические

Обязательные

• Node.js v20
• React v18+
• react-router-dom для роутинга
• Использование готового API, расположенного в папке server этого репозитория
• Исходный код решения должен быть выложен с вашего аккаунта на Github с readme-файлом, содержащим инструкцию по запуску проекта и обоснованием выбора необязательных технологий

Дополнительные

• Разрешено использование любой библиотеки UI-компонентов
• Крайне желательно использование TypeScript
• Разрешено использование любых внешних библиотек, в том числе:
  • Дизайн-система/UI-kit (Material-UI, Ant Design)
  • Стейт менеджмент (Redux, MobX, Effector)
  • Линтер (ESLint)
  • Prettier
  • Система сборки (Webpack, Vite)
  • Библиотека для работы с асинхронными HTTP запросами (React Query, Axios)
• Возможность запустить проект в контейнеризированной docker-среде, ещё лучше - сервер и клиент запускаются при помощи docker compose
• Прерывание (отмена/прекращение) запросов переходе со страницы на страницу
• Покрытие кода юнит-тестами
• Комментарии к коду и документация

В скобках приведены примеры, вы вольны использовать любые другие инструменты и библиотеки

Функциональные

• Размещение объявлений: многошаговая форма для размещения объявлений
• Список объявлений: отображение всех размещенных объявлений
• Просмотр объявления: детальная карточка объявления с возможностью редактирования
• Редактирование объявлений: изменение существующих объявлений с предзаполненными данными
• Авторизация: (Дополнительно) реализовать авторизацию пользователей для размещения и редактирования объявлений

Маршрутизация

• /form — для размещение и редактирования объявления.
• /list — для отображения списка объявлений.
• /item/:id — для просмотра конкретного объявления.

Шаги формы

Основной шаг (для всех категорий)

• Название (обязательное)
• Описание (обязательное)
• Локация (обязательное)
• Фото (необязательное)
• Категория объявления (выпадающий список: Недвижимость, Авто, Услуги) (обязательное)

Категорийный шаг

Зависит от выбранной категории для объявления:

• Недвижимость:

  • Тип недвижимости (например: квартира, дом, коттедж и т.д.) (выпадающий список, обязательное, строка)
  • Площадь (кв. м, обязательное, число)
  • Количество комнат (обязательное, число)
  • Цена (обязательное, число)

• Авто:

  • Марка (выпадающий список, обязательное, строка)
  • Модель (обязательное, строка)
  • Год выпуска (обязательное, число)
  • Пробег (км, опциональное, число)

• Услуги:

  • Тип услуги (например: ремонт, уборка, доставка) (выпадающий список, обязательное, строка)
  • Опыт работы (лет, обязательное, число)
  • Стоимость (обязательное, число)
  • График работы (опциональное, строка)

• Если форма находится в режиме редактирования - нужно каким-либо образом отобразить это визуально (например, с помощью заголовка)

• Также должна быть реализована валидация всех полей

Список объявлений

• Максимальное количество объявлений на странице - 5
• После размещения объявление отображается в списке на маршруте /list
• На странице есть кнопка "Разместить объявление", которая будет вести на форму
• Превью объявления в списке показывает фото (или заглушку, если фото нет), название, локацию и категория объявления (авто, недвижимость или услуга)
• Есть кнопка "Открыть", которая будет вести на страницу объявления /item/:id
• Реализован поиск объявления по названию
• Реализована пагинация (допускается как на клиенте так и на сервере)
• Реализована фильтрация по категории объявления
• Дополнительно: при выборе значения для фильтра по категории появляются дополнительные фильтры по обязательным полям выбранной категории

Просмотр и редактирование

• При клике на объявление в списке открывается подробная карточка со всем полями
• Возможность редактирования объявления: переход на /form с предзаполненными данными

Сохранение данных (Дополнительно)

• При перезагрузке страницы данные формы должны сохраняться в черновик.