Cupple Web Admin

Содержание

• Cupple Web Admin
  • Обзор проекта
  • Основной функционал
  • Технический стек
    • Основные технологии
    • Управление состоянием и данными
    • Роутинг
    • Тестирование
    • Линтинг и форматирование
  • Скрипты
    • Разработка
    • Сборка
    • Линтинг
    • Тестирование
    • Дополнительно
  • Система контроля качества кода
  • Файловая структура проекта
  • Конфигурация TypeScript
    • Ключевые особенности

Обзор проекта

Административная панель управления для платформы Cupple.

Основной функционал

1. Chats
   • Просмотр чатов
   • Удаление чата

Технический стек

Основные технологии

• React 18.3.1
• TypeScript
• Vite 5.4.1
• Ant Design 5.20.4
• TailwindCSS 4.0.6

Управление состоянием и данными

• Zustand 4.5.5
• TanStack Query (React Query) 5.66.9
• Axios 1.7.7

Роутинг

• React Router DOM 6.26.1

Тестирование

• Vitest
• React Testing Library
• Jest DOM

Линтинг и форматирование

• ESLint
• Prettier
• Stylelint
• Husky для pre-commit хуков
• lint-staged

Скрипты

Разработка

npm run dev # Запуск dev сервера

Сборка

npm run build # Компиляция TS и сборка проекта

Линтинг

npm run lint # Запуск ESLint npm run lint:ts # Проверка TS файлов npm run lint:ts:fix # Автоисправление TS файлов

Тестирование

npm run test:unit # Запуск unit тестов npm run test:coverage # Проверка покрытия тестами

Дополнительно

npm run preview # Предпросмотр сборки npm run check:ts # Проверка типов TypeScript

Система контроля качества кода

• Pre-commit hooks для проверки кода
• Pre-push hooks для проверки типов и инкремента версии
• Автоматическое форматирование при коммите
• Строгая проверка TypeScript

Файловая структура проекта

Структура следует принципам Feature-Sliced Design для лучшей масштабируемости и поддерживаемости кода.

1. app/

   • Конфигурация приложения
   • Провайдеры (Router, Query, Theme)
   • Глобальные стили

2. entities/

   • Основные бизнес-сущности
   • Модели данных
   • Базовые компоненты сущностей

3. features/

   • Функциональные модули
   • Реализация бизнес-логики
   • Обработчики взаимодействия

4. pages/

   • Компоненты страниц
   • Роутинг
   • Композиция features и widgets

5. shared/

   • UI-компоненты
   • Утилиты
   • Константы
   • API клиенты

6. widgets/

   • Композитные UI компоненты
   • Переиспользуемые блоки интерфейса

Конфигурация TypeScript

{
  "compilerOptions": {
    // Целевая версия JavaScript
    "target": "ES2022",

    // Поддержка современных возможностей
    "lib": ["ES2020", "DOM", "DOM.Iterable", "ESNext.Array"],
    
    // Модульная система
    "module": "esnext",
    "moduleResolution": "bundler",
    
    // React настройки
    "jsx": "react-jsx",
    
    // Строгая типизация
    "strict": true,
    
    // Улучшения разработки
    "incremental": true,        // Инкрементальная компиляция
    "allowJs": true,           // Поддержка JS файлов
    "noEmit": true,           // Без генерации файлов (используется Vite)
    
    // Импорты
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    
    // Алиасы путей
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]      // Короткий импорт через @
    },
    
    // Тестирование
    "types": ["vitest", "node", "vitest/globals"]
  },
  
  // Файлы проекта
  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
  "files": ["vite.d.ts"],
  "exclude": ["node_modules"]
}

Ключевые особенности

• Современный target (ES2022)
• Строгая типизация
• Поддержка React JSX
• Алиас @ для импортов из src
• Интеграция с Vitest для тестирования
• Инкрементальная компиляция