MailFrame Promo

Лендинг для платформы email-маркетинга MailFrame

🎯 О проекте

MailFrame — это платформа для создания и управления email-рассылками. Этот репозиторий содержит промо-сайт, демонстрирующий возможности сервиса.

Основные возможности

• 📊 Дашборд — основная панель управления кампаниями
• 👥 Управление контактами — база подписчиков с сегментацией
• 📧 Шаблоны писем — готовые и пользовательские шаблоны
• 🚀 Email-рассылки — создание и отправка кампаний
• 📈 Аналитика — детальная статистика и анализ результатов
• ⚙️ Настройки — гибкая конфигурация сервиса

🏗️ Архитектура

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

Технологический стек

Core

• Next.js 15.5.3 — React-фреймворк с App Router и Pages Router (гибридный подход)
• React 19.1.0 — библиотека для создания UI
• TypeScript 5 — типизированный JavaScript
• Bun — быстрый пакетный менеджер и runtime

Стилизация

• Tailwind CSS 4.0 — utility-first CSS-фреймворк
• Shadcn UI — коллекция переиспользуемых компонентов
• Radix UI — примитивы для доступных компонентов
• Motion (Framer Motion) 12.23 — библиотека анимаций

Утилиты

• next-themes — управление темами (светлая/темная)
• Tabler Icons & Lucide React — иконки
• clsx & tailwind-merge — утилиты для работы с классами
• rough-notation — анимированные аннотации

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

Требования

• Node.js 20+ или Bun 1.0+
• Docker & Docker Compose (для контейнеризации)

Локальная разработка

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

# Установка зависимостей (используется Bun)
bun install

# Запуск dev-сервера с Turbopack
bun run dev

# Приложение доступно по адресу http://localhost:3000

Docker Development

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

# Только приложение
docker compose up mailframe-promo -d

# Просмотр логов
docker compose logs -f mailframe-promo

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

Docker Production

# Создайте .env файл из примера
cp .env.example .env

# Отредактируйте .env файл
nano .env

# Сборка и запуск production
docker compose -f docker-compose.prod.yml up -d

# Пересборка образа
docker compose -f docker-compose.prod.yml build --no-cache

# Проверка статуса
docker compose -f docker-compose.prod.yml ps

# Просмотр логов
docker compose -f docker-compose.prod.yml logs -f

Дополнительные команды

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

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

# Production build (без Docker)
bun run build
bun start

🤝 Разработка

Правила коммитов

Следуйте Conventional Commits:

feat: добавлена новая секция на главной
fix: исправлена анимация на мобильных
docs: обновлён README
style: форматирование кода
refactor: рефакторинг компонента Header

Workflow

1. Создайте feature-ветку: git checkout -b feature/new-section
2. Внесите изменения следуя FSD-принципам
3. Убедитесь, что код проходит линтинг: bun run lint
4. Создайте Pull Request с описанием изменений

🔗 Ссылки

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

• Next.js Documentation
• Feature-Sliced Design

Технологии

• React Documentation
• Tailwind CSS
• Shadcn UI
• Radix UI
• Bun
• Docker

---