# 📁 Структура проекта 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 (
{/* Содержимое */}
); } ``` --- **Последнее обновление:** 26 января 2026