167 lines
8.5 KiB
Markdown
167 lines
8.5 KiB
Markdown
# ✨ Nashel — Frontend
|
||
|
||
> **Next.js 15 · TypeScript · React · TailwindCSS · Shadcn/UI**
|
||
|
||
Клиентская часть платформы **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)
|
||
- Приостановленные и удалённые услуги не видны в поиске
|
||
|
||
---
|
||
|
||
## 🚀 Запуск
|
||
|
||
```bash
|
||
cd nashel-frontend
|
||
|
||
# Установить зависимости
|
||
npm install
|
||
|
||
# Запустить dev-сервер
|
||
npm run dev
|
||
```
|
||
|
||
Приложение доступно по адресу: `http://localhost:3000`
|
||
|
||
### Переменные окружения
|
||
|
||
Создать файл `.env.local`:
|
||
|
||
```env
|
||
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-оптимизация публичных страниц
|