mirror of
https://github.com/Gowtham-Darkseid/MailComposer.git
synced 2026-07-11 09:03:41 +02:00
feat: Complete Mail Composer with EmailJS integration
- Rich email composer with formatting tools (bold, italic, underline, links) - Multi-recipient support (To, CC, BCC fields) - File attachments with drag & drop support - Priority levels and email validation - Draft management with auto-save and cloud sync - Real email sending via EmailJS integration - Responsive design for mobile and desktop - Comprehensive error handling and fallback modes - Complete documentation and setup guides - Firebase integration ready for advanced features Features: ✅ Real email sending (EmailJS) ✅ Rich text editor ✅ File attachments ✅ Draft management ✅ Form validation ✅ Responsive UI ✅ Error handling ✅ Documentation
This commit is contained in:
gowtham-darkseid
@@ -0,0 +1,260 @@
|
||||
# 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:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. Set up Firebase (for email sending):
|
||||
```bash
|
||||
# Follow the detailed guide in FIREBASE_SETUP.md
|
||||
cp .env.example .env
|
||||
# Edit .env with your Firebase configuration
|
||||
```
|
||||
|
||||
4. Start the development server:
|
||||
```bash
|
||||
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](./FIREBASE_SETUP.md) 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
|
||||
|
||||
```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
|
||||
Reference in New Issue
Block a user