# 📁 Структура проекта front_material

```
front_material/
├── app/                                # Next.js App Router
│   ├── (auth)/                        # Группа: Публичные страницы авторизации
│   │   ├── login/
│   │   │   └── page.tsx              # Страница входа
│   │   ├── register/
│   │   │   └── page.tsx              # Страница регистрации
│   │   ├── forgot-password/
│   │   │   └── page.tsx              # Восстановление пароля
│   │   ├── reset-password/
│   │   │   └── page.tsx              # Сброс пароля
│   │   ├── verify-email/
│   │   │   └── page.tsx              # Подтверждение email
│   │   └── layout.tsx                # Layout для auth страниц
│   │
│   ├── (protected)/                   # Группа: Защищенные страницы
│   │   ├── dashboard/
│   │   │   ├── mentor/
│   │   │   │   └── page.tsx          # Дашборд ментора
│   │   │   ├── client/
│   │   │   │   └── page.tsx          # Дашборд клиента
│   │   │   ├── parent/
│   │   │   │   └── page.tsx          # Дашборд родителя
│   │   │   └── page.tsx              # Общий дашборд (редирект)
│   │   │
│   │   ├── schedule/
│   │   │   └── page.tsx              # Расписание
│   │   │
│   │   ├── students/
│   │   │   └── page.tsx              # Студенты (только ментор)
│   │   │
│   │   ├── children/
│   │   │   └── page.tsx              # Дети (только родитель)
│   │   │
│   │   ├── homework/
│   │   │   └── page.tsx              # Домашние задания
│   │   │
│   │   ├── materials/
│   │   │   └── page.tsx              # Материалы
│   │   │
│   │   ├── chat/
│   │   │   └── page.tsx              # Чат
│   │   │
│   │   ├── video/
│   │   │   ├── [roomId]/
│   │   │   │   └── page.tsx          # Видеокомната
│   │   │   └── page.tsx              # Список видеозвонков
│   │   │
│   │   ├── profile/
│   │   │   └── page.tsx              # Профиль
│   │   │
│   │   ├── settings/
│   │   │   └── page.tsx              # Настройки
│   │   │
│   │   ├── notifications/
│   │   │   └── page.tsx              # Уведомления
│   │   │
│   │   ├── payment/
│   │   │   ├── success/
│   │   │   │   └── page.tsx          # Успешная оплата
│   │   │   └── page.tsx              # Оплата подписки
│   │   │
│   │   ├── analytics/
│   │   │   └── page.tsx              # Аналитика (ментор)
│   │   │
│   │   ├── feedback/
│   │   │   └── page.tsx              # Обратная связь (ментор)
│   │   │
│   │   ├── my-progress/
│   │   │   └── page.tsx              # Мой прогресс (клиент)
│   │   │
│   │   └── layout.tsx                # Layout для защищенных страниц
│   │
│   ├── layout.tsx                     # Корневой layout
│   ├── page.tsx                       # Главная страница
│   ├── globals.css                    # Глобальные стили
│   └── middleware.ts                  # Middleware для защиты маршрутов
│
├── components/                        # React компоненты
│   ├── navigation/
│   │   ├── BottomNavigationBar.tsx   # Нижняя панель (Material Navigation)
│   │   ├── TopNavigationBar.tsx      # Верхняя панель
│   │   └── index.ts
│   │
│   ├── layout/
│   │   ├── ProtectedLayout.tsx       # Layout для защищенных страниц
│   │   ├── AuthLayout.tsx            # Layout для auth страниц
│   │   └── index.ts
│   │
│   ├── dashboard/
│   │   ├── StatCard.tsx              # Карточка статистики
│   │   ├── LessonCard.tsx            # Карточка занятия
│   │   └── index.ts
│   │
│   ├── schedule/
│   │   ├── Calendar.tsx              # Календарь
│   │   ├── LessonDialog.tsx          # Диалог занятия
│   │   └── index.ts
│   │
│   ├── chat/
│   │   ├── ChatList.tsx              # Список чатов
│   │   ├── ChatWindow.tsx            # Окно чата
│   │   └── index.ts
│   │
│   ├── video/
│   │   ├── VideoRoom.tsx             # Видеокомната
│   │   ├── VideoControls.tsx         # Управление видео
│   │   └── index.ts
│   │
│   └── common/
│       ├── LoadingSpinner.tsx        # Material Circular Progress
│       ├── ErrorMessage.tsx          # Сообщение об ошибке
│       └── index.ts
│
├── contexts/                          # React Context
│   ├── AuthContext.tsx               # Контекст аутентификации
│   ├── OnboardingContext.tsx         # Онбординг-туры (Driver.js, привязка к страницам и ролям)
│   ├── ThemeContext.tsx              # Контекст темы (light/dark)
│   └── SelectedChildContext.tsx      # Контекст выбранного ребенка (для родителей)
│
├── hooks/                             # Custom hooks
│   ├── useAuth.ts                    # Хук авторизации
│   ├── useWebSocket.ts               # Хук WebSocket
│   ├── useChatWebSocket.ts           # Хук WebSocket для чата
│   ├── useBoardWebSocket.ts          # Хук WebSocket для доски
│   └── useMediaQuery.ts              # Хук для responsive
│
├── api/                               # API клиенты
│   ├── client.ts                     # Axios клиент
│   ├── auth.ts                       # API аутентификации
│   ├── schedule.ts                   # API расписания
│   ├── students.ts                   # API студентов
│   ├── chat.ts                       # API чата
│   ├── materials.ts                  # API материалов
│   ├── homework.ts                   # API домашних заданий
│   ├── payment.ts                    # API оплаты
│   └── types/                        # TypeScript типы для API
│       ├── auth.ts
│       ├── schedule.ts
│       └── ...
│
├── lib/                               # Утилиты
│   ├── material-components.ts        # Импорт всех Material компонентов
│   ├── onboarding-steps.ts           # Шаги онбординга по страницам/ролям (ментор, студент, родитель)
│   └── utils.ts                      # Вспомогательные функции
│
├── styles/                            # CSS стили
│   ├── material-theme.css            # Material UI 3 тема (цвета из landing_site)
│   ├── material-grid.css             # Material Grid System
│   ├── ios-material.css              # iOS 24+ адаптация для Material
│   └── globals.css                   # Глобальные стили
│
├── types/                             # TypeScript типы
│   ├── material-web.d.ts             # Типы для Material Web Components
│   └── index.d.ts                    # Общие типы
│
├── public/                            # Статические файлы
│   ├── favicon.ico
│   └── robots.txt
│
├── assets/                            # Ассеты проекта (уже есть)
│   └── logo/
│       ├── favicon.png
│       └── logo.svg
│
├── .env.example                       # Пример переменных окружения
├── .env.local                         # Локальные переменные (не в git)
├── .dockerignore                      # Исключения для Docker
├── .gitignore                         # Исключения для Git
├── Dockerfile                         # Docker конфигурация
├── next.config.js                     # Next.js конфигурация
├── tsconfig.json                      # TypeScript конфигурация
├── package.json                       # Зависимости
├── package-lock.json                  # Lock файл
│
├── IMPLEMENTATION_PLAN.md             # План реализации
├── QUICK_START.md                     # Быстрый старт
├── TASKS_SUMMARY.md                   # Резюме задач
├── MATERIAL_COMPONENTS_GUIDE.md       # Руководство по Material компонентам
└── STRUCTURE.md                       # Этот файл
```

---

## 🎯 Ключевые принципы

1. **Только Material Web Components**
   - Используем компоненты из `@material/web`
   - Никаких собственных UI компонентов
   - Кастомизация только через CSS Variables

2. **Material Design 3 Grid**
   - Используем Material Grid System
   - Responsive breakpoints из Material Design
   - Никакого Tailwind CSS

3. **iOS 24+ стиль**
   - Blur эффекты
   - Rounded corners (16px, 20px, 24px)
   - Glassmorphism
   - Smooth animations

4. **Чистый CSS**
   - Без Tailwind CSS
   - CSS Variables для темизации
   - CSS Grid и Flexbox

5. **Next.js 16 с Turbopack**
   - Не используем Vite (Turbopack быстрее)
   - App Router
   - Server Components где возможно
   - Client Components для интерактивности

---

## 📂 Пример структуры одной страницы

```
app/(protected)/schedule/
├── page.tsx                  # Главный компонент страницы
├── loading.tsx              # Loading UI (опционально)
└── error.tsx                # Error UI (опционально)
```

**page.tsx:**
```tsx
'use client';

import '@/lib/material-components';

export default function SchedulePage() {
  return (
    <div className="md-grid">
      <div className="md-col-4 md-col-sm-8 md-col-md-12">
        <md-elevated-card>
          {/* Содержимое */}
        </md-elevated-card>
      </div>
    </div>
  );
}
```

---

**Последнее обновление:** 26 января 2026
