92 lines
5.2 KiB
Markdown
92 lines
5.2 KiB
Markdown
# ✨ 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:** Интерфейс загрузки документов для подтверждения статуса.
|