# 🚀 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:** Да

## 📦 Установка

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

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

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

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

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

## 🐳 Docker

```bash
# Development
docker compose up front_material

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

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

```text
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`:

```env
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` для поэтапной разработки.

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

- [План реализации](./IMPLEMENTATION_PLAN.md)
- [Руководство по Material Components](./MATERIAL_COMPONENTS_GUIDE.md)
- [Быстрый старт](./QUICK_START.md)

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

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

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

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