Mail Composer

A modern, feature-rich email composer application built with vanilla JavaScript, HTML, CSS, and Firebase for real email sending capabilities.

Features

✉️ Core Email Functionality

• Real email sending - Powered by Firebase Functions and Nodemailer
• To, CC, BCC fields - Support for multiple recipients
• Subject line - Required field validation
• Priority levels - Normal, High, Low priority options
• Rich text editor - Bold, italic, underline formatting
• Link insertion - Add clickable links to your emails

📎 Attachments

• File upload support - Drag and drop or click to select
• File type validation - PDF, DOC, DOCX, TXT, JPG, PNG, GIF
• Size limits - Maximum 10MB per file
• Visual file list - See attached files with remove options

💾 Draft Management

• Cloud sync - Drafts stored in Firebase Firestore
• Manual save - Save drafts manually anytime
• Auto-save - Automatic draft saving every 30 seconds
• Draft loading - Load and continue editing saved drafts
• Draft deletion - Remove unwanted drafts
• Local backup - Drafts also persist in localStorage

🔥 Firebase Integration

• Real email sending - Firebase Functions with Nodemailer
• Cloud storage - Firestore for drafts and email logs
• Error handling - Comprehensive error reporting
• Email logging - Track sent emails for analytics
• Multiple providers - Support for Gmail, SendGrid, Mailgun, etc.

🎨 User Experience

• Responsive design - Works on desktop and mobile devices
• Modern UI - Clean, professional interface
• Real-time validation - Instant feedback on form fields
• Character counter - Track message length
• Keyboard shortcuts - Ctrl+B (bold), Ctrl+I (italic), Ctrl+U (underline), Ctrl+S (save)
• Loading states - Visual feedback during operations

🔒 Data Safety

• Form validation - Prevents sending incomplete emails
• Unsaved changes warning - Alerts before leaving page with unsaved content
• Error handling - Graceful handling of failures

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Firebase account (for email sending)

Quick Start

1. Clone or download this project

2. Install dependencies:

   npm install
   

3. Set up Firebase (for email sending):

   # Follow the detailed guide in FIREBASE_SETUP.md
   cp .env.example .env
   # Edit .env with your Firebase configuration
   

4. Start the development server:

   npm run dev
   

5. Open your browser and navigate to the URL shown in the terminal (typically http://localhost:5173)

Firebase Setup

For full email sending functionality, you need to set up Firebase. See the detailed Firebase Setup Guide for step-by-step instructions.

Development Mode

Without Firebase setup, the application will work in development mode with simulated email sending for testing the UI and functionality.

Building for Production

npm run build

The built files will be in the dist directory.

Preview Production Build

npm run preview

Usage

Composing an Email

1. Fill in recipients - Enter email addresses in To, CC, or BCC fields (separate multiple emails with commas)
2. Add subject - Enter a descriptive subject line
3. Compose message - Use the rich text editor to write your email
4. Format text - Use toolbar buttons or keyboard shortcuts for formatting
5. Attach files - Click the attachment area or drag files to attach them
6. Set priority - Choose email priority level
7. Send or save - Click Send to send immediately, or Save Draft to save for later

Working with Drafts

• Auto-save: Drafts are automatically saved every 30 seconds while composing
• Manual save: Click "Save Draft" to save immediately
• Load draft: Click "Load" on any saved draft to continue editing
• Delete draft: Click "Delete" to remove unwanted drafts

Keyboard Shortcuts

• Ctrl+B / Cmd+B - Bold
• Ctrl+I / Cmd+I - Italic
• Ctrl+U / Cmd+U - Underline
• Ctrl+S / Cmd+S - Save draft

Technical Details

Technologies Used

• Frontend: Vanilla JavaScript (ES6+), HTML5, CSS3
• Backend: Firebase Functions (Node.js)
• Database: Firebase Firestore
• Email Service: Nodemailer with Gmail/SMTP support
• Build Tool: Vite
• Storage: Firestore + localStorage for draft persistence
• Styling: CSS Custom Properties (CSS Variables)
• Icons: Unicode emojis and custom SVG

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

File Structure

├── index.html              # Main HTML file
├── style.css               # Styles and layout
├── main.js                 # Application logic
├── firebase-config.js      # Firebase configuration
├── package.json            # Dependencies and scripts
├── firebase.json           # Firebase project configuration
├── firestore.rules         # Firestore security rules
├── firestore.indexes.json  # Firestore indexes
├── .env.example            # Environment variables template
├── FIREBASE_SETUP.md       # Firebase setup guide
├── functions/              # Firebase Functions
│   ├── index.js            # Cloud Functions code
│   └── package.json        # Functions dependencies
├── public/
│   └── vite.svg            # App icon
└── README.md               # This file

Customization

Styling

Modify CSS custom properties in style.css to change colors, fonts, and layout:

:root {
  --primary-color: #3b82f6;
  --success-color: #10b981;
  --error-color: #ef4444;
  /* ... other variables */
}

Email Service Integration

The application now includes Firebase Functions for real email sending. Supported email services:

Gmail (Default)

// Already configured in functions/index.js
// Just set your Gmail credentials in Firebase Functions config

SendGrid

// In functions/index.js, add SendGrid configuration:
const sgMail = require('@sendgrid/mail');
sgMail.setApiKey(process.env.SENDGRID_API_KEY);

Mailgun

// In functions/index.js, add Mailgun configuration:
const mailgun = require('mailgun-js');
const mg = mailgun({
  apiKey: process.env.MAILGUN_API_KEY,
  domain: process.env.MAILGUN_DOMAIN
});

Custom SMTP

// Modify the transporter in functions/index.js:
const transporter = nodemailer.createTransporter({
  host: 'your-smtp-host.com',
  port: 587,
  secure: false,
  auth: {
    user: process.env.EMAIL_USER,
    pass: process.env.EMAIL_PASSWORD
  }
});

File Upload Limits

Modify file size and type restrictions in the validateFile() method:

const maxSize = 10 * 1024 * 1024; // 10MB
const allowedTypes = [
  'application/pdf',
  // ... add more types
];

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is open source and available under the MIT License.

Support

If you encounter any issues or have questions, please:

1. Check the existing issues in the repository
2. Create a new issue with detailed information about the problem
3. Include steps to reproduce the issue

Roadmap

• Email templates
• Spell check integration
• Emoji picker
• Scheduled sending
• Email signatures
• Contact management
• Dark mode theme
• Offline support