Email Management System - Development Guide

Source: Dev.to

Key Features

• Rich Text Editing – Advanced WYSIWYG editor powered by TipTap with comprehensive formatting options.
• Dynamic Variables – Insert and manage template variables with live preview functionality.
• Responsive Design Testing – Preview emails in desktop and mobile views.
• Email Components – Ready‑made components for tables, social links, and structured sections.
• Content Management – Create, save, edit, and organize templates with folder organization.
• Background & Layout Editor – Visual editor for customizing email structure and backgrounds.
• Header & Footer Management – Reusable headers and footers for consistent branding.
• Export Options – Export to HTML and variable schemas.
• Database Integration – PostgreSQL with Prisma ORM for reliable storage and retrieval.

Tech Stack

Prerequisites

• Node.js (v18.0.0 or higher)
• PostgreSQL (v14 or higher)
• npm or yarn

Getting Started

1. Clone the Repository

git clone https://github.com/billowdev/email-management.git
cd email-management

2. Install Dependencies

npm install
# or
yarn install

3. Set Up Environment Variables

# Copy the sample env file and update with your database credentials
cp env-sample .env

Edit .env and configure the database connection:

DATABASE_URL="postgresql://username:password@localhost:5432/email_management?schema=public"

4. Generate Prisma Client & Run Migrations

npx prisma generate
npx prisma migrate dev

5. Seed the Database

npm run seed
# or
yarn seed

6. Start the Development Server

npm run dev
# or
yarn dev

Open your browser at http://localhost:3000.

Project Structure

email-management/
├── prisma/                   # Prisma schema & migrations
│   ├── schema.prisma         # DB schema definition
│   ├── migrations/           # Migration files
│   └── seed.ts               # Seeding script
├── src/
│   ├── app/                  # Next.js App Router pages
│   │   ├── api/              # API routes (templates, variables, …)
│   │   ├── page.tsx          # Main page (template editor)
│   │   └── email-preview/    # Email preview page
│   ├── components/           # React components
│   │   ├── editor/           # Template editor components
│   │   │   ├── sections/        # Email section components (tables, social links)
│   │   │   ├── variables/       # Variable management components
│   │   │   ├── background/      # Background editor components
│   │   │   └── header-footer/   # Header & footer components
│   │   └── pages/            # Page‑level components
│   ├── lib/                  # Utility libraries
│   │   └── prisma.ts           # Prisma client setup
│   ├── services/             # Business logic & API services
│   │   ├── emailTemplateService.ts
│   │   ├── emailBackgroundService.ts
│   │   └── exportService.ts
│   └── types/                # TypeScript type definitions
│       ├── email-templates.ts
│       └── prisma.ts
└── next.config.ts            # Next.js configuration

Core Component Files

Database Models (overview)

• EmailTemplate – Stores template content and relationships.
• TemplateVariable – Defines variables usable within a template.
• TemplateSampleData – Holds sample data for previewing templates.
• TemplateStyle – Stores styling information (colors, spacing, etc.).
• HeaderFooter – Stores header/footer settings for templates.

See prisma/schema.prisma for the complete schema.

Usage Guide

Creating a Template

1. Use the template creation form at the top of the main page.
2. Default variables (firstName, lastName, email) are added automatically.

Editing Content

• Use the rich‑text editor toolbar for formatting.
• Insert variables via the Variable Panel on the right.
• Add components (tables, social links) using the toolbar.

Adding Variables

1. Click “Add New Variable” in the variable panel.
2. The variable becomes available in the editor as {{variableName}}.

Customizing Layout

1. Switch to the “Preview & Layout” tab.
2. Adjust background colors, container widths, and spacing.
3. Configure headers and footers (logos, text, styling).

Testing Templates

• Preview Mode – See the template with variables populated.
• Full Page Preview – Opens a dedicated preview page.
• Responsive Testing – Toggle between mobile and desktop views.

Enjoy building beautiful, dynamic email templates! 🚀

Email Management System – Development Guide

A sophisticated email‑template management system with rich features for creating, editing, and managing dynamic email templates. Built with Next.js, React, TipTap rich‑text editor, and Prisma ORM with PostgreSQL.

🌟 Key Features

• Rich Text Editing – Advanced WYSIWYG editor powered by TipTap with comprehensive formatting options.
• Dynamic Variables – Insert and manage template variables with live‑preview functionality.
• Responsive Design Testing – Preview emails in desktop and mobile views.
• Email Components – Ready‑made components for tables, social links, and structured sections.
• Content Management – Create, save, edit, and organize templates with folder organization.
• Background & Layout Editor – Visual editor for customizing email structure.
• Header & Footer Management – Reusable headers/footers for consistent branding.
• Export Options – Export in multiple formats (HTML, variable schema, content‑only).
• Database Integration – PostgreSQL with Prisma ORM for reliable storage and retrieval.

📦 Technology Stack

• Framework: Next.js
• UI Library: Ant Design
• Editor: TipTap (@tiptap/react)
• ORM: Prisma
• Database: PostgreSQL
• Language: TypeScript / React

Exporting Templates

1. Use the Export dropdown in the UI to choose a format:

   • Complete template – full HTML with styles.
   • Content only – just the body HTML.
   • Variables schema – JSON schema of all variables used.

2. The corresponding API endpoints live in src/app/api/ and allow you to:

   • Create / read / update / delete templates.
   • Manage template variables.
   • Save & retrieve background and header/footer settings.

Developing New Features

1. Add a New Editor Section Component

Create a new component under src/components/editor/sections/.
Below is a minimal example:

// src/components/editor/sections/NewComponent.tsx
import React from 'react';
import { Editor } from '@tiptap/react';
import { Button } from 'antd';

interface NewComponentProps {
  editor: Editor | null;
}

const NewComponent: React.FC<NewComponentProps> = ({ editor }) => {
  const insertContent = () => {
    if (!editor) return;
    editor.chain().focus().insertContent('New component content').run();
  };

  return <Button onClick={insertContent}>Insert New Component</Button>;
};

export default NewComponent;

3. Integrate the component into the EmailTemplateEditor toolbar.

2. Update Variable Types

1. Edit the VariableType enum in prisma/schema.prisma.

2. Generate and run a migration:

   npx prisma migrate dev --name add-new-variable-type

3. Update the variable‑type options in the variable creation/edit UI components.

Contribution Workflow

1. Fork the repository.

2. Create a feature branch:

   git checkout -b feature/my-feature

3. Implement your changes.

4. Run linting and ensure all checks pass:

   npm run lint
   npm run test

5. Commit with a descriptive message.

6. Push to your fork and open a Pull Request.

Local Development Checklist

• PostgreSQL server is running.

• Verify the connection string in .env.

• Sync the Prisma schema:

  npx prisma db push

• Open the app in a browser and check the console for errors.

• Ensure TipTap extensions are correctly configured.

• Look for syntax errors in the export service (src/app/api/...).

• Verify the generated HTML structure of templates.

• Test the UI in multiple browsers (Chrome, Firefox, Safari).

Documentation Links

• TipTap: https://tiptap.dev/
• Prisma: https://www.prisma.io/docs/
• Next.js: https://nextjs.org/docs
• Ant Design: https://ant.design/docs/react/introduce

Repository

View on GitHub