# 📋 Краткое резюме задач для нового 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

---

**Начало:** _______________  
**Ответственный:** _______________