https://github.com/softenrj/mystimail
Custom HTML Email Sender with Nodemailer
https://github.com/softenrj/mystimail
email email-sender monaco-editor nextjs nodejs nodemailer npm project react redux redux-toolkit tailwindcss
Last synced: 4 months ago
JSON representation
Custom HTML Email Sender with Nodemailer
- Host: GitHub
- URL: https://github.com/softenrj/mystimail
- Owner: softenrj
- Created: 2025-03-31T12:48:43.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-01T12:08:58.000Z (about 1 year ago)
- Last Synced: 2025-04-01T13:24:21.807Z (about 1 year ago)
- Topics: email, email-sender, monaco-editor, nextjs, nodejs, nodemailer, npm, project, react, redux, redux-toolkit, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 33.5 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Custom HTML Email Sender with Nodemailer
This is a Next.js project that allows users to send custom HTML emails. It integrates Nodemailer for email sending, and features a Monaco editor for writing the HTML email content. The application also provides real-time output rendering of the email content using an iframe and offers an option to attach a signature to the email. The entire state is managed using Redux Toolkit.
## 🎬 Demo Video
[](https://drive.google.com/file/d/1mfuzsdWwozlLhGJPBTDr4dPtLB8NpUMy/view?usp=sharing)
## Features
- **Email Options**: Choose the 'From', 'To', 'BCC', and 'Subject' fields.
- **Monaco Panel**: A Monaco editor to write and edit custom HTML content for the email.
- **Real-Time Preview**: See how the email will look in real-time with an iframe rendering the HTML.
- **Attach Signature**: Option to attach a signature with the email.
- **Send Email**: Send the email with a toast notification confirming the action.
- **State Management**: All app state is managed by Redux Toolkit.
## Prerequisites
Make sure you have the following installed:
- Node.js (>=14.x)
- npm (>=6.x)
## Getting Started
### 1. Clone the repository
```bash
git clone https://github.com/softenrj/your-repo-name.git
cd your-repo-name
```
### 2.Install the dependencies:
```bash
cd your-repository-name
npm install
```
### 3.Set up environment variables for Nodemailer:
- Create a .env.local file at the root of the project and add your email configuration, for example:
```ini
EMAIL1 = "app_password" //email 1
EMAIL2 = "app_password" //email 2
```
### 4.Start the development server:
```ini
npm run dev
```
### 5.Visit http://localhost:3000 in your browser to access the email sender app.
## Usage
**Must**
- First open file in
```bash
components/Options_email.tsx
```
and add your Email in option Html tag
`Then` **create put you app pass accoring to preference of your email in options html**
**Fill in the email fields:**
- To, BCC, and Subject for the email.
**Write your HTML content:**
- Use the Monaco Editor to write your custom HTML email content. The email content will be rendered in the iframe below in real-time.
**Attach a signature (Optional):**
- Attach a signature (Optional):
- ⚠️if you already make a signature.html in /public and add your signature
**Send the email:**
- Hit the Send Email button, and if successful, you’ll get a toast notification confirming the email was sent.
## Technologies Used
- **Next.js:** React framework for building the web application.
- **Nodemailer:** Library for sending emails.
- **Monaco Editor:** Code editor used for writing HTML content