mirror of
https://github.com/Gowtham-Darkseid/MailComposer.git
synced 2026-04-15 16:08:27 +02:00
gowtham-darkseid
260 lines
8.1 KiB
Markdown
260 lines
8.1 KiB
Markdown
# 📧 Mail Composer
|
|
|
|
[](https://github.com/Gowtham-Darkseid/MailComposer/stargazers)
|
|
[](https://github.com/Gowtham-Darkseid/MailComposer/network)
|
|
[](https://github.com/Gowtham-Darkseid/MailComposer/issues)
|
|
[](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.
|
|
|
|
|
|
|
|
## 🚀 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
|