# 📧 Mail Composer

[![GitHub stars](https://img.shields.io/github/stars/Gowtham-Darkseid/MailComposer?style=social)](https://github.com/Gowtham-Darkseid/MailComposer/stargazers)
[![GitHub forks](https://img.shields.io/github/forks/Gowtham-Darkseid/MailComposer?style=social)](https://github.com/Gowtham-Darkseid/MailComposer/network)
[![GitHub issues](https://img.shields.io/github/issues/Gowtham-Darkseid/MailComposer)](https://github.com/Gowtham-Darkseid/MailComposer/issues)
[![GitHub license](https://img.shields.io/github/license/Gowtham-Darkseid/MailComposer)](https://github.com/Gowtham-Darkseid/MailComposer/blob/main/LICENSE)

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

![Mail Composer Demo](https://via.placeholder.com/800x400/3b82f6/white?text=Mail+Composer+Demo)

## 🚀 Live Demo

[Try Mail Composer Live](https://your-deployment-url.com) *(Coming Soon)*

## 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

## 🎯 Quick Start

```bash
# 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

1. **Create free [EmailJS account](https://www.emailjs.com/)**
2. **Set up email service** (Gmail recommended)
3. **Create email template** with variables: `{{to_email}}`, `{{subject}}`, `{{message}}`
4. **Update `emailjs-config.js`** with your credentials
5. **Start sending real emails!**

*See [EmailJS Setup Guide](./EMAILJS_SETUP.md) for detailed instructions.*

### Building for Production

```bash
npm run build
```

The built files will be in the `dist` directory.

### Preview Production Build

```bash
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:

```css
: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)
```javascript
// Already configured in functions/index.js
// Just set your Gmail credentials in Firebase Functions config
```

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

#### Mailgun
```javascript
// 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
```javascript
// 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:

```javascript
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](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