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-оптимизация публичных страниц
|