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

🎯 Quick Start

# Clone the repository
git clone https://github.com/Gowtham-Darkseid/MailComposer.git

# Navigate to project directory
cd MailComposer

# Install dependencies
npm install

# Start development server
npm run dev

📧 Enable Real Email Sending

Create free EmailJS account
Set up email service (Gmail recommended)
Create email template with variables: {{to_email}}, {{subject}}, {{message}}
Update emailjs-config.js with your credentials
Start sending real emails!

See EmailJS Setup Guide for detailed instructions.

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

Fill in recipients - Enter email addresses in To, CC, or BCC fields (separate multiple emails with commas)
Add subject - Enter a descriptive subject line
Compose message - Use the rich text editor to write your email
Format text - Use toolbar buttons or keyboard shortcuts for formatting
Attach files - Click the attachment area or drag files to attach them
Set priority - Choose email priority level
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

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
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:

Check the existing issues in the repository
Create a new issue with detailed information about the problem
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