170 lines
5.7 KiB
Markdown
170 lines
5.7 KiB
Markdown
# 📋 Краткое резюме задач для нового Frontend
|
||
|
||
## 🎯 Цель
|
||
Создать новый frontend с Material UI 3, iOS 24+ дизайном и нижней панелью навигации.
|
||
|
||
---
|
||
|
||
## ✅ Основные задачи (по приоритетам)
|
||
|
||
### 🔴 Критичные (MVP)
|
||
|
||
1. **Инициализация проекта**
|
||
- [ ] Создать Next.js 16 проект в `front_material/`
|
||
- [ ] Настроить TypeScript, ESLint
|
||
- [ ] Установить Material Web Components (`@material/web`)
|
||
- [ ] Настроить Docker
|
||
|
||
2. **Базовые компоненты**
|
||
- [ ] Создать wrapper компоненты для Material UI
|
||
- [ ] Создать iOS-стиль компоненты (Card, Button, Input)
|
||
- [ ] Настроить цветовую тему из `landing_site`
|
||
|
||
3. **Навигация**
|
||
- [ ] Создать Bottom Navigation Bar (iOS-style)
|
||
- [ ] Создать Top Navigation Bar
|
||
- [ ] Настроить роутинг для разных ролей
|
||
|
||
4. **Аутентификация**
|
||
- [ ] Страницы login/register
|
||
- [ ] AuthContext для управления пользователем
|
||
- [ ] Middleware для защиты маршрутов
|
||
|
||
5. **Дашборды**
|
||
- [ ] Дашборд ментора
|
||
- [ ] Дашборд клиента
|
||
- [ ] Дашборд родителя
|
||
|
||
### 🟡 Важные (Основной функционал)
|
||
|
||
6. **Основные страницы**
|
||
- [ ] Расписание (календарь, создание занятий)
|
||
- [ ] Чат (WebSocket интеграция)
|
||
- [ ] Видеозвонки (LiveKit интеграция)
|
||
- [ ] Материалы
|
||
- [ ] Домашние задания
|
||
|
||
7. **Интеграция с Backend**
|
||
- [ ] API клиент (Axios)
|
||
- [ ] WebSocket хуки
|
||
- [ ] Интеграция всех модулей
|
||
|
||
8. **Стилизация**
|
||
- [ ] Tailwind CSS с кастомными цветами
|
||
- [ ] iOS 24+ стиль (blur, rounded corners)
|
||
- [ ] Анимации и переходы
|
||
- [ ] Dark mode
|
||
|
||
### 🟢 Дополнительные (Полировка)
|
||
|
||
9. **Docker и деплой**
|
||
- [ ] Обновить docker-compose.yml
|
||
- [ ] Production сборка
|
||
- [ ] Оптимизация
|
||
|
||
10. **Документация**
|
||
- [ ] README
|
||
- [ ] Документация компонентов
|
||
- [ ] Инструкции по деплою
|
||
|
||
---
|
||
|
||
## 📦 Технологии
|
||
|
||
- **Next.js 16.1+** (с Turbopack - быстрее Vite)
|
||
- **Material Web Components 3** (`@material/web`) - **ТОЛЬКО Material компоненты!**
|
||
- **Material Design 3 Grid System** - для layout
|
||
- **TypeScript**
|
||
- **Чистый CSS** (БЕЗ Tailwind CSS)
|
||
- **CSS Variables** для темизации
|
||
- **Axios** (API клиент)
|
||
- **LiveKit** (видеозвонки)
|
||
- **WebSocket** (чат, доска)
|
||
- **Material Symbols** (иконки от Google)
|
||
|
||
---
|
||
|
||
## 🎨 Дизайн
|
||
|
||
- **Стиль:** iOS 24+
|
||
- **Цвета:** Из `landing_site` (фиолетовый #7444FD основной)
|
||
- **Навигация:** Bottom Bar (iOS-style)
|
||
- **Эффекты:** Blur, glassmorphism, rounded corners
|
||
|
||
---
|
||
|
||
## 📁 Структура проекта
|
||
|
||
```
|
||
front_material/
|
||
├── src/
|
||
│ ├── app/ # Next.js App Router
|
||
│ ├── components/ # React компоненты
|
||
│ │ ├── material/ # Material UI wrappers
|
||
│ │ ├── ios/ # iOS-style компоненты
|
||
│ │ └── navigation/ # Навигация
|
||
│ ├── contexts/ # React Context
|
||
│ ├── hooks/ # Custom hooks
|
||
│ ├── api/ # API клиенты
|
||
│ └── styles/ # Стили
|
||
├── assets/ # Ассеты (уже есть)
|
||
├── Dockerfile
|
||
└── package.json
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 Быстрый старт
|
||
|
||
```bash
|
||
# 1. Инициализация (БЕЗ Tailwind CSS!)
|
||
cd front_material
|
||
npx create-next-app@latest . --typescript --no-tailwind --app --no-src-dir
|
||
|
||
# 2. Установка зависимостей
|
||
npm install @material/web axios date-fns livekit-client
|
||
|
||
# 3. Запуск
|
||
npm run dev
|
||
|
||
# Или через Docker
|
||
docker compose up front_material
|
||
```
|
||
|
||
**⚠️ Важно:**
|
||
- НЕ используем Tailwind CSS
|
||
- Используем ТОЛЬКО Material Web Components
|
||
- Сетка из Material Design 3 Grid System
|
||
|
||
---
|
||
|
||
## 📚 Документация
|
||
|
||
- **Полный план:** `IMPLEMENTATION_PLAN.md`
|
||
- **Быстрый старт:** `QUICK_START.md`
|
||
- **Этот файл:** `TASKS_SUMMARY.md`
|
||
|
||
---
|
||
|
||
## ⏱️ Оценка времени
|
||
|
||
- **Фаза 1 (MVP):** 2-3 недели
|
||
- **Фаза 2 (Основной функционал):** 3-4 недели
|
||
- **Фаза 3 (Полировка):** 1-2 недели
|
||
|
||
**Итого:** 6-9 недель
|
||
|
||
---
|
||
|
||
## ⚠️ Важные замечания
|
||
|
||
1. **Vite:** Next.js 16 уже использует Turbopack (быстрее Vite), рекомендуется использовать его
|
||
2. **Material UI:** Это Web Components, нужны wrapper компоненты для React
|
||
3. **Bottom Navigation:** На десктопе можно показывать sidebar вместо bottom bar
|
||
4. **Миграция:** Постепенно переносить функциональность со старого frontend
|
||
|
||
---
|
||
|
||
**Начало:** _______________
|
||
**Ответственный:** _______________
|