Single User Send Email

mkdir pi
cd api
npm init -y
npm install express nodemailer dotenv cors

EMAIL_HOST=smtp.gmail.com
EMAIL_HOST_USER=olee.techs@gmail.com
EMAIL_HOST_PASSWORD=jzsbfkxvmxiabwow
PORT=4000

npx create-react-app client
cd client

// index.js
const express = require('express');
const nodemailer = require('nodemailer');
require('dotenv').config();
const cors = require('cors');

const app = express();
const port = process.env.PORT || 4000;

const transporter = nodemailer.createTransport({
  host: process.env.EMAIL_HOST,
  port: 587,
  secure: false,
  auth: {
    user: process.env.EMAIL_HOST_USER,
    pass: process.env.EMAIL_HOST_PASSWORD
  }
});
app.use(cors()); 
app.use(express.json());

app.post('/send-email', async (req, res) => {
  const { recipient, subject, text } = req.body;

  const mailOptions = {
    from: process.env.EMAIL_HOST_USER,
    to: recipient,
    subject: subject,
    text: text
  };

  try {
    const info = await transporter.sendMail(mailOptions);
    res.status(200).json({ message: 'Email sent successfully', info });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(port, () => {
  console.log(`Server is running on port :${port}`);
});

node index.js

npm install axios

import React, { useState } from 'react';
import axios from 'axios';

const EmailForm = () => {
  const [recipient, setRecipient] = useState('');
  const [subject, setSubject] = useState('');
  const [text, setText] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post('http://localhost:4000/send-email', {
        recipient,
        subject,
        text
      });
      console.log(response.data);
    } catch (error) {
      console.error('Error sending email:', error.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Recipient Email:
        <input type="email" value={recipient} onChange={(e) => setRecipient(e.target.value)} />
      </label>
      <br />
      <label>
        Subject:
        <input type="text" value={subject} onChange={(e) => setSubject(e.target.value)} />
      </label>
      <br />
      <label>
        Text:
        <textarea value={text} onChange={(e) => setText(e.target.value)} />
      </label>
      <br />
      <button type="submit">Send Email</button>
    </form>
  );
};

export default EmailForm;

import logo from './logo.svg';
import './App.css';
import EmailFrom from './components/EmailForm';
function App() {
  return (
    <div className="App">
<EmailFrom/>
    </div>
  );
}

export default App;