Современное веб-приложение для управления почтовыми рассылками

MailFrame — это высокопроизводительное веб-приложение, редактор MJML-шаблонов писем и осуществления рассылок.

• ⚡ Быстрая разработка с Vite и Hot Module Replacement
• 🎨 Современный UI с Consta Design System и TailwindCSS
• 🔧 Type Safety с TypeScript
• 📊 Управление состоянием с Zustand и React Query
• 🧩 Модульная архитектура по принципам Feature-Sliced Design
• 🔒 Строгие правила импортов с ESLint Boundaries
• 📱 Адаптивный дизайн для всех устройств

• React 19 - библиотека для создания пользовательских интерфейсов
• TypeScript 5.8 - типизированный JavaScript
• Vite 6 - современный инструмент сборки
• TailwindCSS 4 - utility-first CSS фреймворк

• Consta Design System - корпоративная система дизайна
• React Hook Form - производительные формы с минимальными ре-рендерами
• React Router DOM 7 - декларативное клиентское роутинг
• React Icons - популярные иконки для React

• Zustand - небольшая, быстрая и масштабируемая state-management библиотека
• TanStack React Query - мощная библиотека для синхронизации данных
• Create GStore - дополнительные утилиты для управления состоянием

• Zod - TypeScript-first схемы валидации
• Hookform Resolvers - резолверы для React Hook Form

• ESLint - статический анализ кода
• Prettier - форматирование кода
• Knip - поиск неиспользуемого кода
• Bundle Analyzer - анализ размера бандла

Проект использует Feature-Sliced Design (FSD) — архитектурную методологию для создания масштабируемых фронтенд-приложений.

src/
├── app/          # 🏗️ Конфигурация приложения
│   ├── entrypoints/    # Точки входа
│   ├── layouts/        # Макеты страниц
│   ├── providers/      # Провайдеры контекста
│   └── router/         # Настройка роутинга
│
├── pages/        # 📄 Страницы приложения
│   └── [page-name]/    # Композиция виджетов
│
├── widgets/      # 🧩 Виджеты
│   └── [widget-name]/  # Композиция фич
│
├── features/     # ✨ Бизнес-функции
│   └── [feature-name]/ # Законченная бизнес-логика
│
├── entities/     # 🏢 Бизнес-сущности
│   └── [entity-name]/  # Модели предметной области
│
└── shared/       # 🔧 Переиспользуемые ресурсы
    ├── api/            # API клиенты
    ├── config/         # Конфигурация
    ├── lib/            # Внешние библиотеки
    ├── ui/             # UI компоненты
    └── utils/          # Утилиты

• Node.js >= 18
• Bun (рекомендуется) или npm/yarn

# Клонирование репозитория
git clone <repository-url>
cd app

# Установка зависимостей
bun install

Создайте файл .env в корне проекта:

VITE_API_BASE_URL=http://localhost:4200
VITE_COOKIE_DOMAIN=localhost

# Запуск в режиме разработки
bun run dev

# Сборка для продакшена
bun run build

# Предварительный просмотр продакшен сборки
bun run preview

# Линтинг кода
bun run lint

# Форматирование кода
bun run format

# Поиск неиспользуемого кода
bun run knip

1. Перед началом работы: git pull и проверка, что ваша ветка удалена
2. Создание ветки: Создайте отдельную ветку для каждой задачи
3. Форматирование: Запустите bun run format перед коммитом
4. Уведомление: Отметьтесь в канбане после отправки изменений

Проект использует строгие правила импортов через ESLint Boundaries:

shared → entities → features → widgets → pages → app

Нижние слои не могут импортировать верхние

• Сущности не могут импортировать другие сущности
• Фичи не могут импортировать другие фичи
• Страницы не могут импортировать другие страницы

• Все модули экспортируются через index.ts
• Прямые импорты из внутренних файлов запрещены

• Язык: Английский для кода, русский для комментариев
• Именование файлов: kebab-case
• Именование компонентов: PascalCase
• Именование переменных: camelCase
• Типизация: Строгая типизация, избегание any

# Сборка и запуск
docker compose up -d --build

# Остановка
docker compose down

git pull
docker compose down
docker compose up -d --build

Подробные инструкции по деплою доступны в DEPLOY.md.

• Bundle Analyzer: Автоматически открывается после сборки
• React Query DevTools: Доступны в режиме разработки
• TypeScript: Строгая проверка типов
• ESLint: Статический анализ кода

1. Форкните репозиторий
2. Создайте ветку для фичи: git checkout -b feature/amazing-feature
3. Следуйте правилам архитектуры и импортов
4. Добавьте тесты для новой функциональности
5. Запустите bun run format перед коммитом
6. Создайте Pull Request

Этот проект является частной разработкой. Все права защищены.