uchill/front_material

🚀 Uchill Frontend - Оптимизированный Frontend

Новая оптимизированная версия frontend для образовательной платформы Uchill.

✨ Особенности

• Next.js 16 с Turbopack для быстрой разработки
• Material Web Components 3 для современного UI
• iOS v24+ стиль интерфейса:
  • Стеклянные панели с блюром и зернистостью (.ios-glass-panel)
  • Деликатный фиолетово-белый градиент фона (body overlay)
  • Прозрачные обёртки дашборда без заливки фона
  • Усиленные тени и подсветка стекла для глубины
• Оптимизация производительности:
  • Code splitting и lazy loading
  • In-memory кеширование
  • Оптимизация изображений
  • Bundle optimization
  • CSS Variables для быстрого рендеринга

🛠️ Технологический стек

• Framework: Next.js 16.1+ (Turbopack)
• UI Library: Material Web Components 3
• State Management: Zustand
• API Client: Axios с кешированием
• Styling: CSS Variables (без Tailwind)
• TypeScript: Да

📦 Установка

# Установить зависимости
npm install

# Запустить dev server
npm run dev

# Собрать для production
npm run build

# Запустить production server
npm start

# Анализ bundle size
npm run analyze

🐳 Docker

# Development
docker compose up front_material

# Production build
docker build --target production -t front-material .

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

front_material/
├── app/                    # Next.js App Router
├── components/             # React компоненты
├── lib/                    # Утилиты и библиотеки
│   ├── api-client.ts      # API клиент с кешированием
│   ├── cache.ts           # Система кеширования
│   └── material-components.ts  # Импорт Material компонентов
├── hooks/                  # Custom hooks
├── contexts/              # React Context
├── api/                   # API модули
├── styles/                # CSS стили
│   ├── globals.css        # Глобальные стили
│   └── material-theme.css # Material тема
├── types/                 # TypeScript типы
└── utils/                 # Утилиты

🎨 Оптимизации

Code Splitting

• Material Web Components загружаются по требованию
• Отдельные chunks для больших библиотек (LiveKit, Material)
• React и React DOM в отдельном chunk

Кеширование

• In-memory кеш для быстрого доступа
• localStorage для персистентности
• API запросы кешируются автоматически

Рендеринг

• CSS Variables вместо JS тем (быстрее)
• Оптимизация изображений (AVIF, WebP)
• Lazy loading компонентов

📝 Переменные окружения

Создайте .env.local на основе .env.example:

NEXT_PUBLIC_API_URL=http://localhost:8123/api
NEXT_PUBLIC_WS_URL=ws://localhost:8123/ws
NEXT_PUBLIC_LIVEKIT_URL=ws://localhost:7880

🔧 Разработка

Следуйте плану из IMPLEMENTATION_PLAN.md для поэтапной разработки.

📚 Документация

• План реализации
• Руководство по Material Components
• Быстрый старт

🧭 Навигация и контейнеры страниц

• Для страниц dashboard, schedule, chat, students используется полная ширина (без верхнего TopNavigationBar), а внутренние отступы задаются самой страницей/панелями.

🪪 Карточки (Material 3)

• На странице students список студентов отображается карточками в стиле Material Design 3: изображение/аватар сверху, ниже имя и краткая подпись (например, количество занятий). Ориентир по визуальному паттерну — раздел “Cards” в Material 3.