12 KiB
12 KiB
📁 Структура проекта 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 # Этот файл
🎯 Ключевые принципы
-
Только Material Web Components
- Используем компоненты из
@material/web - Никаких собственных UI компонентов
- Кастомизация только через CSS Variables
- Используем компоненты из
-
Material Design 3 Grid
- Используем Material Grid System
- Responsive breakpoints из Material Design
- Никакого Tailwind CSS
-
iOS 24+ стиль
- Blur эффекты
- Rounded corners (16px, 20px, 24px)
- Glassmorphism
- Smooth animations
-
Чистый CSS
- Без Tailwind CSS
- CSS Variables для темизации
- CSS Grid и Flexbox
-
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:
'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