250 lines
12 KiB
Markdown
250 lines
12 KiB
Markdown
# 📁 Структура проекта 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
|