Приложение для размещения объявлений

Данный проект представляет собой приложение, в котором можно:

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

Содержание

• Приложение для размещения объявлений
  • Содержание
  • Используемые технологии
  • Функциональность
  • Способы запуска
    • Через Docker
    • Локальный запуск
  • Особенности реализации
  • Возможные проблемы и нюансы
    • 🔗 Дополнительно

---

Используемые технологии

• React + TypeScript + Vite
• Redux Toolkit (RTK Query) для управления состоянием и запросами к серверу
• react-hook-form для создания форм и валидации
• Material UI для UI-компонентов и стилизации
• Docker (опционально) для контейнеризации клиентской и серверной части
• Node.js (Express) для серверной части (обработка CRUD по объявлениям)
• ESLint с правилами TypeScript
• Jest / Vitest (тесты для клиентской части)

---

Функциональность

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

   • Отображение всех объявлений
   • Пагинация (макс. 5 на страницу)
   • Поиск по названию (с debounce) и фильтрация по категории
   • Если пользователь не авторизован — может только просматривать

2. Добавление / Редактирование

   • Пошаговая форма:
     • Шаг 1: основные поля (название, описание, локация, фото, категория)
     • Шаг 2: поля зависят от выбранной категории
   • Валидация полей, в том числе дифференцированная по категории
   • Сохранение черновика в localStorage, если пользователь не отправил форму
   • Редактирование с предзаполнением, если пользователь авторизован

3. Авторизация (фейковая)

   • Диалоговое окно для логина
   • «test / 1234» → «Вход» (при успешном вводе выставляется fake-token)
   • Скрытие/отображение кнопок «Разместить» и «Редактировать/Удалить» в зависимости от авторизации

4. Просмотр объявления

   • Детальная информация (все поля)
   • Кнопка «Редактировать» доступна только авторизованному пользователю

5. Статичная серверная часть

   • Простейший Express-сервер с in-memory хранилищем объявлений
   • CRUD-операции: GET /items, GET /items/:id, POST /items, PUT /items/:id, DELETE /items/:id

---

Способы запуска

Через Docker

1. Установите Docker и Docker Compose (v2).
2. Перейдите в корень проекта:

   cd path/to/project

3. Соберите и запустите контейнеры:

   docker-compose up --build

4. Приложение будет доступно на порту 80 (клиент, React)
   Сервер (Express) — на порту 3000.

Для остановки контейнеров:

docker-compose down

Локальный запуск

1. Сервер:

   • Перейдите в папку server (если выделена отдельно)
   • Установите зависимости:

     npm install

   • Запустите сервер:

     npm run start

   • По умолчанию сервер слушает http://localhost:3000

2. Клиент:

   • Перейдите в папку client
   • Установите зависимости:

     npm install

   • Запустите в режиме разработки (Vite):

     npm run dev

   • Откройте http://localhost:5173 (или другой порт, указанный в консоли)

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

1. RTK Query (Redux Toolkit) — для запросов к бэкенду:
   • itemsApi с методами getItems, createItem, updateItem, deleteItem.
2. react-hook-form — для пошаговой формы:
   • Сохранение состояния между шагами
   • Валидация полей по категориям
   • Сохранение черновика (localStorage)
3. Material UI — для UI:
   • Stepper для пошаговой формы
   • TextField, Select, Button, Container, etc.
   • Адаптивная сетка (Grid)
4. Авторизация (фейк):
   • При username === "test" && password === "1234" → Выдаётся fake-token
   • При наличии fake-token → Доступен функционал добавления/редактирования
   • Иначе — только просмотр
5. Тесты (Vitest / react-testing-library):
   • Тесты на компоненты (RHFTextField, AuthDialog)

---

Возможные проблемы и нюансы

1. Docker:
   • Если Docker Daemon не запущен — контейнеры не создаются.
   • При ошибке Cannot find module 'app.js' — убедитесь, что файлы копируются корректно в Dockerfile.
2. Не хватает прав на редактирование:
   • Если пользователь не авторизован (token === null) — не отображаются кнопки «Разместить», «Редактировать».
3. Поиск:
   • Начинается только после 3 введённых символов. При <3 символах показываются все объявления.
4. Черновик:
   • Сохраняется в localStorage при каждом изменении полей (если не редактируем). При успешной отправке — очищается.
5. Поддержка горячей перезагрузки (Vite):
   • В режиме dev перезапускается только клиентская часть. Сервер Express обновляйте вручную.

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

• Документация проекта (docs)