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

8.4 KiB
Raw Blame History

🚀 Быстрый старт нового Frontend

Шаг 1: Инициализация проекта

cd front_material

# Создать Next.js проект БЕЗ Tailwind CSS
npx create-next-app@latest . --typescript --no-tailwind --app --no-src-dir --eslint

# Установить зависимости
npm install @material/web axios date-fns
npm install livekit-client

# Установить dev зависимости
npm install -D @types/node @types/react @types/react-dom

⚠️ Важно: Создаем проект БЕЗ Tailwind CSS, используем только Material Web Components!

Шаг 2: Базовая структура папок

Создать следующую структуру:

front_material/
├── app/                        # Next.js App Router
│   ├── (auth)/                # Публичные страницы
│   │   ├── login/
│   │   ├── register/
│   │   └── layout.tsx
│   ├── (protected)/            # Защищенные страницы
│   │   ├── dashboard/
│   │   ├── schedule/
│   │   ├── chat/
│   │   └── layout.tsx
│   ├── layout.tsx
│   └── page.tsx
├── components/                 # React компоненты
│   ├── navigation/             # Навигация (Material Navigation)
│   ├── layout/                 # Layout компоненты
│   └── pages/                  # Страничные компоненты
├── contexts/                   # React Context
├── hooks/                      # Custom hooks
├── api/                        # API клиенты
├── lib/                        # Утилиты и импорты Material
├── styles/                     # CSS стили
│   ├── material-theme.css      # Material UI тема
│   ├── material-grid.css       # Material Grid System
│   ├── ios-effects.css         # iOS 24+ эффекты
│   └── globals.css             # Глобальные стили
├── types/                      # TypeScript типы
│   └── material-web.d.ts       # Типы для Material Web Components
├── public/                     # Статические файлы
├── assets/                     # Ассеты (уже есть - logo, favicon)
├── Dockerfile
├── .dockerignore
├── .env.example
├── package.json
└── tsconfig.json

Шаг 3: Настройка Material Web Components

Создать файл styles/material-theme.css:

/* Material Design 3 цвета на основе landing_site */
:root {
  /* Primary (основной фиолетовый из landing_site) */
  --md-sys-color-primary: #7444FD;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FAF8FF;
  --md-sys-color-on-primary-container: #282C32;
  
  /* Secondary */
  --md-sys-color-secondary: #7444FD;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #F9F3EF;
  --md-sys-color-on-secondary-container: #282C32;
  
  /* Surface */
  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-on-surface: #282C32;
  --md-sys-color-surface-variant: #F6F7FF;
  --md-sys-color-on-surface-variant: #858585;
  
  /* Background */
  --md-sys-color-background: #F6F7FF;
  --md-sys-color-on-background: #282C32;
  
  /* Error */
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  
  /* Outline */
  --md-sys-color-outline: #E6E6E6;
  --md-sys-color-outline-variant: #F1F1F1;
  
  /* iOS 24+ стиль */
  --ios-blur: blur(20px);
  --ios-radius: 20px;
  --ios-radius-sm: 16px;
  --ios-radius-lg: 24px;
  --ios-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Темная тема */
[data-theme="dark"] {
  --md-sys-color-primary: #9D6AFF;
  --md-sys-color-on-primary: #000000;
  --md-sys-color-primary-container: #4A148C;
  --md-sys-color-on-primary-container: #E1BEE7;
  
  --md-sys-color-surface: #161921;
  --md-sys-color-on-surface: #FFFFFF;
  --md-sys-color-surface-variant: #282C32;
  --md-sys-color-on-surface-variant: #cbcbcb;
  
  --md-sys-color-background: #161921;
  --md-sys-color-on-background: #FFFFFF;
  
  --md-sys-color-outline: #565656;
  --md-sys-color-outline-variant: #282C32;
}

Создать файл styles/material-grid.css:

/* Material Design 3 Grid System */
.md-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  padding: 0 16px;
}

/* Responsive breakpoints */
@media (min-width: 600px) {
  .md-grid {
    gap: 24px;
    padding: 0 24px;
  }
}

@media (min-width: 1240px) {
  .md-grid {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Column classes */
.md-col-1 { grid-column: span 1; }
.md-col-2 { grid-column: span 2; }
.md-col-3 { grid-column: span 3; }
.md-col-4 { grid-column: span 4; }
.md-col-6 { grid-column: span 6; }
.md-col-8 { grid-column: span 8; }
.md-col-12 { grid-column: span 12; }

Импортировать в app/layout.tsx:

import '@/lib/material-components'; // Импорт всех Material компонентов
import '@/styles/material-theme.css';
import '@/styles/material-grid.css';
import '@/styles/globals.css';

Шаг 4: Обновление docker-compose.yml

Добавить в docker-compose.yml (в корне проекта):

# Новый frontend Material UI
front_material:
  build:
    context: ./front_material
    dockerfile: Dockerfile
    target: development
    args:
      - NODE_VERSION=20
  container_name: platform_front_material
  restart: unless-stopped
  command: npm run dev
  environment:
    - NODE_ENV=development
    - NEXT_PUBLIC_API_URL=http://web:8000/api
    - NEXT_PUBLIC_WS_URL=ws://web:8000/ws
    - NEXT_PUBLIC_LIVEKIT_URL=ws://livekit:7880
    - WATCHPACK_POLLING=true
    - CHOKIDAR_USEPOLLING=true
  ports:
    - "3000:3000"
  volumes:
    - ./front_material:/app
    - /app/node_modules
    - /app/.next
  networks:
    - app_network
  depends_on:
    - web
  stdin_open: true
  tty: true

Важно: Закомментировать или удалить старый frontend сервис.

Шаг 5: Создание Dockerfile

Создать front_material/Dockerfile:

# Development stage
FROM node:20-alpine AS development

WORKDIR /app

# Копируем package files
COPY package*.json ./

# Устанавливаем зависимости
RUN npm install

# Копируем остальные файлы
COPY . .

# Открываем порт
EXPOSE 3000

# Запускаем dev server
CMD ["npm", "run", "dev"]

# Production stage
FROM node:20-alpine AS production

WORKDIR /app

# Копируем package files
COPY package*.json ./

# Устанавливаем только production зависимости
RUN npm ci --only=production

# Копируем исходный код
COPY . .

# Собираем приложение
RUN npm run build

# Открываем порт
EXPOSE 3000

# Запускаем production server
CMD ["npm", "start"]

Шаг 6: Создание .dockerignore

Создать front_material/.dockerignore:

node_modules
.next
.env.local
.env*.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.DS_Store
*.pem

Шаг 7: Создание .env.example

Создать front_material/.env.example:

# API
NEXT_PUBLIC_API_URL=http://localhost:8123/api
NEXT_PUBLIC_WS_URL=ws://localhost:8123/ws

# LiveKit
NEXT_PUBLIC_LIVEKIT_URL=ws://localhost:7880

# Environment
NODE_ENV=development

Шаг 8: Запуск

# Локально (без Docker)
cd front_material
npm install
npm run dev

# Или через Docker Compose (из корня проекта)
docker compose up front_material

# Или все сервисы вместе
docker compose up

Следующие шаги

Следуйте плану из IMPLEMENTATION_PLAN.md:

  1. Этап 1: Подготовка проекта ✅
  2. Этап 2: Дизайн-система и компоненты
  3. Этап 3: Архитектура
  4. И так далее...