denis
/
uchill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
uchill/front_material/TASKS_SUMMARY.md

5.7 KiB
Raw Permalink Blame History

📋 Краткое резюме задач для нового Frontend

🎯 Цель

Создать новый frontend с Material UI 3, iOS 24+ дизайном и нижней панелью навигации.

✅ Основные задачи (по приоритетам)

🔴 Критичные (MVP)

  1. Инициализация проекта

    • Создать Next.js 16 проект в front_material/
    • Настроить TypeScript, ESLint
    • Установить Material Web Components (@material/web)
    • Настроить Docker

  2. Базовые компоненты

    • Создать wrapper компоненты для Material UI
    • Создать iOS-стиль компоненты (Card, Button, Input)
    • Настроить цветовую тему из landing_site

  3. Навигация

    • Создать Bottom Navigation Bar (iOS-style)
    • Создать Top Navigation Bar
    • Настроить роутинг для разных ролей

  4. Аутентификация

    • Страницы login/register
    • AuthContext для управления пользователем
    • Middleware для защиты маршрутов

  5. Дашборды

    • Дашборд ментора
    • Дашборд клиента
    • Дашборд родителя

🟡 Важные (Основной функционал)

  1. Основные страницы

    • Расписание (календарь, создание занятий)
    • Чат (WebSocket интеграция)
    • Видеозвонки (LiveKit интеграция)
    • Материалы
    • Домашние задания

  2. Интеграция с Backend

    • API клиент (Axios)
    • WebSocket хуки
    • Интеграция всех модулей

  3. Стилизация

    • Tailwind CSS с кастомными цветами
    • iOS 24+ стиль (blur, rounded corners)
    • Анимации и переходы
    • Dark mode

🟢 Дополнительные (Полировка)

  1. Docker и деплой

    • Обновить docker-compose.yml
    • Production сборка
    • Оптимизация

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

    • README
    • Документация компонентов
    • Инструкции по деплою

📦 Технологии

  • Next.js 16.1+ (с Turbopack - быстрее Vite)
  • Material Web Components 3 (@material/web) - ТОЛЬКО Material компоненты!
  • Material Design 3 Grid System - для layout
  • TypeScript
  • Чистый CSS (БЕЗ Tailwind CSS)
  • CSS Variables для темизации
  • Axios (API клиент)
  • LiveKit (видеозвонки)
  • WebSocket (чат, доска)
  • Material Symbols (иконки от Google)

🎨 Дизайн

  • Стиль: iOS 24+
  • Цвета: Из landing_site (фиолетовый #7444FD основной)
  • Навигация: Bottom Bar (iOS-style)
  • Эффекты: Blur, glassmorphism, rounded corners

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

front_material/
├── src/
│   ├── app/              # Next.js App Router
│   ├── components/       # React компоненты
│   │   ├── material/     # Material UI wrappers
│   │   ├── ios/          # iOS-style компоненты
│   │   └── navigation/   # Навигация
│   ├── contexts/         # React Context
│   ├── hooks/            # Custom hooks
│   ├── api/              # API клиенты
│   └── styles/           # Стили
├── assets/               # Ассеты (уже есть)
├── Dockerfile
└── package.json

🚀 Быстрый старт

# 1. Инициализация (БЕЗ Tailwind CSS!)
cd front_material
npx create-next-app@latest . --typescript --no-tailwind --app --no-src-dir

# 2. Установка зависимостей
npm install @material/web axios date-fns livekit-client

# 3. Запуск
npm run dev

# Или через Docker
docker compose up front_material

⚠️ Важно:

  • НЕ используем Tailwind CSS
  • Используем ТОЛЬКО Material Web Components
  • Сетка из Material Design 3 Grid System

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

  • Полный план: IMPLEMENTATION_PLAN.md
  • Быстрый старт: QUICK_START.md
  • Этот файл: TASKS_SUMMARY.md

⏱️ Оценка времени

  • Фаза 1 (MVP): 2-3 недели
  • Фаза 2 (Основной функционал): 3-4 недели
  • Фаза 3 (Полировка): 1-2 недели

Итого: 6-9 недель

⚠️ Важные замечания

  1. Vite: Next.js 16 уже использует Turbopack (быстрее Vite), рекомендуется использовать его
  2. Material UI: Это Web Components, нужны wrapper компоненты для React
  3. Bottom Navigation: На десктопе можно показывать sidebar вместо bottom bar
  4. Миграция: Постепенно переносить функциональность со старого frontend

Начало: _______________
Ответственный: _______________