Клиентская часть платформы Nashel — маркетплейса для поиска и найма профессиональных исполнителей. Реализован как современное SPA/SSR приложение с тёмной темой, интерактивной картой и богатым UX.

🎯 Какую проблему решает Nashel

Клиенты тратят часы на поиск надёжных мастеров. Исполнители теряют заказы из-за отсутствия нормального онлайн-присутствия.

Nashel соединяет их мгновенно:

Ищи мастера прямо на карте рядом с домом
Смотри фото работ, цены и описание услуги
Нажми одну кнопку — и выйди на связь с исполнителем

👤 Роли пользователей

Роль	Возможности
Клиент	Поиск услуг, просмотр профилей, карта
Кандидат в мастера	Личный кабинет, создание профиля исполнителя
Мастер	Полный кабинет: управление услугами, расписание, статус
Компания	Расширенный кабинет с представлением от юрлица

🗂️ Структура проекта

src/
├── app/                    # Страницы (Next.js App Router)
│   ├── (auth)/             # Регистрация, вход
│   ├── dashboard/          # Личный кабинет исполнителя
│   │   ├── offers/         # Управление услугами: список, создание, редактирование
│   │   ├── profile/        # Профиль, аватар, локация, расписание, компетенции
│   │   └── settings/       # Настройки аккаунта
│   ├── offers/[id]/        # Публичная страница просмотра услуги
│   ├── search/             # Поиск услуг + карта
│   └── layout.tsx          # Общий layout с навигацией
│
├── components/             # Переиспользуемые компоненты
│   ├── ui/                 # Shadcn UI компоненты (Button, Card, Dialog и т.д.)
│   ├── ImageUploader/      # Компонент загрузки, перетаскивания и удаления фото
│   └── ...
│
└── shared/
    ├── api/                # Функции для обращения к API (catalog, search, auth)
    └── store/              # Zustand: геолокация пользователя

✅ Что реализовано

Аутентификация

Регистрация и вход (JWT в localStorage)
Защищённые маршруты
Сохранение сессии

Карта и поиск

Интерактивная карта на React Leaflet (без SSR)
Поиск по названию услуги, описанию и компетенциям
Результаты поиска появляются по мере ввода (от 2 символов)
Маркеры исполнителей на карте с всплывающими подсказками
Отображение расстояния до исполнителя (м/км)
Сортировка: «Идеально подходят», «Ближайшие», «Лучший рейтинг»
Фильтры поиска: по названию, описанию, компетенциям
Отображение услуги приоритетнее исполнителя (если нашлась услуга — исполнитель отдельно не показывается)

Карточка услуги в поиске

Большое фото с hover-анимацией (scale + fade)
Цена в рублях (₽), расстояние с иконкой
Краткое описание услуги
Роль и статус исполнителя (Мастер / Кандидат в мастера / Компания)
Кнопка «Просмотреть услугу» — открывает страницу в новой вкладке

Публичная страница услуги (`/offers/[id]`)

Большой блок с фото-галереей (карусель):
- Навигация мышью (стрелки видны при наведении)
- Навигация клавишами ← →
- Счётчик фото (1/N)
- Превью-ряд внизу (миниатюры) с кольцевой подсветкой активного
Блок описания с аккуратным заголовком
Блок характеристик услуги (атрибуты ключ-значение) — под описанием
Правая колонка: карточка исполнителя (имя, роль, рейтинг, документы)
Блок «Готовы заказать?» с кнопкой «Связаться с исполнителем»
Блок похожих услуг из категории (заглушка, готовится к наполнению)
Адаптивная верстка: мобильная → десктопная

Профиль исполнителя (личный кабинет)

Загрузка аватара (превью + сохранение)
Редактирование описания, компетенций (теги с поиском)
Установка рабочего расписания по дням недели
Переход в роль исполнителя
Смена пароля

Управление услугами

Список моих услуг с фото-обложкой
Создание и редактирование услуги:
- Блок загрузки фото (первым, до 10 шт., каждое ≤ 5 МБ)
- Drag-and-drop для перестановки фото мышью
- Кнопка удаления под каждым фото
- Первое фото = обложка услуги
- Название, описание, цена (тип + сумма), атрибуты
Приостановка услуги (пауза)
Удаление услуги (soft delete)
Приостановленные и удалённые услуги не видны в поиске

🚀 Запуск

cd nashel-frontend

# Установить зависимости
npm install

# Запустить dev-сервер
npm run dev

Приложение доступно по адресу: http://localhost:3000

Переменные окружения

Создать файл .env.local:

NEXT_PUBLIC_API_URL=http://localhost:5000

🔧 Технологии

Технология	Назначение
Next.js 15 (App Router)	SSR/SPA, маршрутизация
TypeScript	Типизация
Tailwind CSS	Стилизация
Shadcn/UI	Готовые UI компоненты
Zustand	Глобальное состояние (геолокация)
React Leaflet	Карта (с отключённым SSR)
React Hook Form + Zod	Формы и валидация
Axios	HTTP-запросы к API
Lucide React	Иконки
Sonner	Тосты/уведомления

🔮 Планы развития

Реальный чат с исполнителем (WebSocket)
Страница профиля исполнителя (публичная)
Система отзывов и рейтингов (реальные данные)
Оформление заказа через платформу
Push-уведомления
Мобильное приложение (React Native)
Полнотекстовый фильтр по категориям и тегам
Похожие услуги (реальные данные из той же категории)
SEO-оптимизация публичных страниц

README.md Unescape Escape

✨ Nashel — Frontend