Project Setup
Project Setup
প্রথমে একটি ফোল্ডার বানাই mailproject তার মধ্যে ব্যাকএন্ড(api) ও ফ্রন্টএন্ড(client) প্রজেক্ট তৈরী করি।
Backend
mkdir pi
cd api
npm init -y
npm install express nodemailer dotenv cors
BashCreate a .env
file in the project root:
.env
EMAIL_HOST=smtp.gmail.com
EMAIL_HOST_USER=olee.techs@gmail.com
EMAIL_HOST_PASSWORD=jzsbfkxvmxiabwow
PORT=4000
BashFrontend
npx create-react-app client
cd client
BashBackend Part
Backend Api
index.js
// 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}`);
});
BashRun the Express Server
node index.js
BashReact Part
Frontend Form
npm install axios
BashCreate a new component for the email form:
src/components/EmailForm.js
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;
BashApp.js এ কম্পোনেন্ট টি লোড করি
import logo from './logo.svg';
import './App.css';
import EmailFrom from './components/EmailForm';
function App() {
return (
<div className="App">
<EmailFrom/>
</div>
);
}
export default App;
Bash