HiTechMailMan Email Template Builder

Dự án này là một công cụ tạo mẫu email (Email Template Builder) mạnh mẽ và linh hoạt, được xây dựng dựa trên Next.js và React. Người dùng có thể kéo thả (drag & drop) các thành phần để thiết kế email, chỉnh sửa nội dung trực tiếp, và xuất ra mã HTML tương thích với các trình đọc email phổ biến (Gmail, Outlook, v.v.).

Tài liệu mô tả dự án

---

Mục lục

• Email Template Builder
  • Nền tảng đánh giá
  • Mục lục
  • Tính Năng Chính (Features)
  • Sử Dụng Trình Chỉnh Sửa (How to use)
  • Hướng Dẫn Cài Đặt và Chạy Dự Án
    • Yêu Cầu
    • Cài Đặt
    • Cài Đặt với Docker

Tính Năng Chính (Features)

• Kéo Thả Trực Quan (Drag & Drop): Xây dựng bố cục email dễ dàng bằng cách kéo khối nội dung (Block) hoặc khối bố cục (Layout) vào khung thiết kế (Canvas). Hỗ trợ kéo thả để sắp xếp lại vị trí.
• Trình Chỉnh Sửa Văn Bản Phong Phú (Rich Text Editor): Tích hợp TipTap cho phép người dùng bôi đậm, in nghiêng, căn chỉnh văn bản, tạo danh sách (ol/ul), và chèn liên kết trực tiếp trên khung thiết kế hoặc qua bảng điều khiển.
• Quản Lý Bố Cục Nâng Cao (Advanced Layouts): Hỗ trợ khung dọc (Section/Vertical Frame) và khung ngang có chia cột (Columns/Horizontal Frame).
• Chỉnh Sửa Nhiều Phần Tử (Multi-select Editing): Nhấn giữ Phím Shift, Ctrl, hoặc Cmd để chọn nhiều phần tử cùng lúc. Bảng điều khiển bên phải (Right Panel) sẽ tự động gộp các thuộc tính chung để bạn có thể đổi màu chữ, font, khoảng cách của nhiều phần tử trong một lần.
• Phím Tắt Tiện Lợi (Keyboard Shortcuts): Hỗ trợ Ctrl+C / Ctrl+V để sao chép, dán phần tử, Delete / Backspace để xóa phần tử đang chọn, và Escape để bỏ chọn.
• Cấu Trúc HTML Email Đạt Chuẩn: Trình tạo mã HTML (HTML Generator) xuất ra cấu trúc bảng (Table-based layout) với inline-CSS, đảm bảo hiển thị đồng nhất trên mọi nền tảng email.
• Layers Panel: Xem và sắp xếp cấu trúc các thành phần của email qua dạng cây phân cấp. Có thể xóa các lớp không cần thiết.

Sử Dụng Trình Chỉnh Sửa (How to use)

1. Thêm khối mới: Kéo một khối từ thẻ Blocks ở bên trái và thả vào Canvas ở giữa.
2. Chỉnh sửa nội dung văn bản: Nhấp đúp (Double-click) vào bất kỳ dòng chữ (Heading, Paragraph, Button) nào để chỉnh sửa trực tiếp (Inline Editing), hoặc chỉnh sửa qua bảng bên phải (Right Panel). Bấm Ctrl + Enter để xuống dòng mới trong một danh sách/đoạn văn bản.
3. Thêm ảnh: Kéo khối Image, sau đó đổi đường dẫn URL bằng giao diện bên phải.
4. Chia cột / Bố cục: Kéo khối Columns (Horizontal) vào khung, sau đó thả các thành phần khác vào bên trong khối Columns.
5. Đổi Thuộc tính (Properties): Bạn có thể thay đổi:
   • Font chữ (Hỗ trợ nhiều font thay thế như Poppins, Arial, Georgia...).
   • Chiều rộng/chiều cao, padding, margin.
   • Viền (Border): Kích thước (Width), loại viền (Style), màu sắc (Color).
6. Sao Chép / Xóa: Nhấn chọn thành phần trên màn hình và dùng Ctrl+C, Ctrl+V (hoặc phím bấm tương tự ở thiết bị Mac) để sao chép/dán, nhấn Delete để xóa.
7. Xuất HTML: Khi chỉnh sửa xong, nhấn Export hoặc View HTML (mã nguồn có kèm thuộc tính Clipboard để Copy nhanh) ở thanh công cụ phía trên.

Hướng Dẫn Cài Đặt và Chạy Dự Án

Yêu Cầu

• Node.js >= 18.17.0
• npm, yarn, pnpm hoặc bun.

Cài Đặt

1. Cài đặt các thư viện phụ thuộc:

   npm install
   # hoặc
   yarn install
   # hoặc
   pnpm install

2. Chạy môi trường phát triển (Development Server):

   npm run dev
   # hoặc
   yarn dev

3. Mở trình duyệt và truy cập: http://localhost:3000

Cài Đặt với Docker

Dự án hỗ trợ chạy với Docker Compose, giúp thiết lập môi trường phát triển nhanh chóng mà không cần cài đặt Node.js trực tiếp.

1. Khởi động container ở chế độ phát triển (lần đầu sẽ tốn thời gian build image):

   docker compose -f docker-compose.dev.yml up -d

2. Nếu cần cài lại dependencies hoặc build lại image:

   docker compose -f docker-compose.dev.yml up -d --build

3. Mở trình duyệt và truy cập: http://localhost:3000

4. Để xem log của ứng dụng:

   docker compose -f docker-compose.dev.yml logs -f

5. Để dừng và xóa container:

   docker compose -f docker-compose.dev.yml down