# ✨ Nashel — Frontend

> **Next.js 15 (App Router) · TypeScript · Tailwind CSS · Shadcn/UI · Zustand**

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

---

## 🎯 Преимущества для пользователя

**Клиент:**
- **Мгновенный поиск:** Находите мастеров прямо на карте в своем районе.
- **Инфо-карты:** Подробные страницы услуг с галереями работ, честными ценами и атрибутами.
- **Безопасный заказ:** Оформляйте сделки и отслеживайте их статус в реальном времени.

**Исполнитель:**
- **Цифровой кабинет:** Удобное управление услугами, расписанием и статусом доступности.
- **Галереи работ:** Загрузка и управление фотографиями с поддержкой Drag-and-Drop.
- **Система рейтинга:** Накапливайте отзывы и повышайте доверие клиентов.

---

## 🛠️ Технологический стек

| Технология | Назначение |
|------------|------------|
| **Next.js 15** | Фреймворк для SSR, маршрутизации и SEO-оптимизации |
| **Tailwind CSS** | Адаптивная верстка и дизайн-система |
| **Shadcn/UI** | Высококачественные доступные компоненты интерфейса |
| **Zustand** | Глобальное состояние (геолокация, сессии) |
| **React Leaflet** | Интерактивная карта (с динамической подгрузкой) |
| **Axios** | Интеграция с API (авторизация, заказы, репутация) |
| **React Hook Form** | Комплексная валидация форм (Zod) |

---

## ✅ Текущая реализация

### 1. Поиск и Интерактивность
- **Карта:** Отображение маркеров исполнителей, расчет дистанции до пользователя в реальном времени.
- **Smart Search:** Поиск по заголовкам, описаниям и компетенциям с мгновенной фильтрацией.
- **Сортировка:** По расстоянию, релевантности и качеству предложений.

### 2. Страница Услуги (Offer Page)
- **Rich Gallery:**
  - Продвинутая карусель с поддержкой клавиатуры (← →).
  - Превью-ряд с подсветкой активного фото.
  - Hover-эффект увеличения и плавные переходы.
- **Детализация:** Полный список атрибутов услуги, карточка исполнителя, статус верификации.

### 3. Личный кабинет (Dashboard)
- **Управление Офферами:**
  - Создание услуг с мультизагрузкой фото (до 10 шт).
  - Интерактивный порядок фото (Drag-and-Drop).
  - Пауза и мягкое удаление услуг.
- **Профиль:** Смена аватара, настройка сложных расписаний, управление компетенциями.
- **Orders API:** Полная интеграция с бэкенд-модулем заказов (принятие, завершение, споры).

---

## 🚀 Быстрый старт

1. Перейдите в директорию фронтенда:
   ```bash
   cd nashel-frontend
   ```
2. Установите зависимости:
   ```bash
   npm install
   ```
3. Создайте `.env.local`:
   ```env
   NEXT_PUBLIC_API_URL=http://localhost:5000
   ```
4. Запустите в режиме разработки:
   ```bash
   npm run dev
   ```

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

---

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

- [ ] **Real-time Chat:** Чат между клиентом и мастером на WebSockets.
- [ ] **Public Profiles:** Публичные страницы мастеров с портфолио и отзывами.
- [ ] **SEO Boost:** Гидратация мета-тегов для индексации поисковиками.
- [ ] **Push Notifications:** Уведомления о новых заказах и сообщениях.
- [ ] **Mobile App:** Разработка нативного приложения на React Native.
- [ ] **Verification UI:** Интерфейс загрузки документов для подтверждения статуса.