126 lines
4.7 KiB
Markdown
126 lines
4.7 KiB
Markdown
# 🚀 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.
|