Skip to content

Commit

Permalink
Added subscribe us feature
Browse files Browse the repository at this point in the history
  • Loading branch information
Sawan-Kushwah committed Nov 6, 2024
1 parent f81c0ed commit 88f258b
Show file tree
Hide file tree
Showing 5 changed files with 110 additions and 59 deletions.
7 changes: 2 additions & 5 deletions client/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ import Contributors from "./component/Contributors";
import Discussion from "./component/Discussion";
import ForgotPassword from "./component/ForgotPassword";
import ResetPassword from "./component/ResetPassword";
import Feedback from "./component/Feedback";
// import VerifyEmail from "./component/Verify";
// import ProtectedRoute from '../../client/src/component/ProtectedRoute'
import NotFound from "./component/NotFound";
Expand Down Expand Up @@ -133,9 +132,7 @@ function App() {
progress={progress}
onLoaderFinished={() => setProgress(0)}
/>
<div className="App">
<Feedback/>
</div>

<div className="alert-container">
<Alert alert={alert} />
</div>
Expand Down Expand Up @@ -273,7 +270,7 @@ function App() {
<Route exact path='/contactus' element={<ContactUs mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/privacypolicy' element={<PrivacyPolicy mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/termofuse' element={<TermOfUse mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/FAQ' element={<FAQ mode={mode}/>} /> {/* Add this line */}
<Route exact path='/FAQ' element={<FAQ mode={mode} />} /> {/* Add this line */}
<Route exact path='/createBlogPost' element={<CreateBlog />} /> {/* Add this line */}
<Route exact path='/read-more-blog/:id' element={<ReadMoreBlog mode={mode} setProgress={setProgress} showAlert={showAlert} />} /> {/* Add this line */}
<Route exact path='/*' element={<NotFound />} />
Expand Down
23 changes: 18 additions & 5 deletions client/src/component/Footer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import VisitorCounter from './Footers/VisitorCount';

const Footer = (props) => {
const [email, setEmail] = useState("");
const [name, setName] = useState("");
const [message, setMessage] = useState("");
const [isError, setIsError] = useState(false); // Flag to handle message color
const [stars, setStars] = useState(0);
Expand All @@ -16,9 +17,9 @@ const Footer = (props) => {
e.preventDefault();
setMessage(""); // Reset message

if (!email) {
if (!email || !name) {
setIsError(true);
setMessage("Please enter a valid email.");
setMessage("Please enter valid details.");
clearMessageAndResetEmail();
return;
}
Expand All @@ -29,13 +30,15 @@ const Footer = (props) => {
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ email }),
body: JSON.stringify({ name, email }),
});

const data = await response.json();

if (response.ok) {
setIsError(false);
setEmail('');
setName('')
setMessage("Thank you for subscribing!");
} else {
setIsError(true);
Expand All @@ -55,6 +58,7 @@ const Footer = (props) => {
setTimeout(() => {
setMessage("");
setEmail("");
setName("")
}, 7000);
};
useEffect(() => {
Expand Down Expand Up @@ -101,16 +105,25 @@ const Footer = (props) => {
<div className='mb-4' data-aos="fade-up" data-aos-duration='1500'>
<h4 style={{ color: props.mode === 'dark' ? 'white' : 'black' }} className="text-3xl font-semibold text-center mb-4">Subscribe to our Newsletter</h4>
<form
className="flex flex-col items-center gap-4 md:flex-row md:justify-center"
className="flex flex-col items-center gap-4 md:flex-row md:justify-center justify-center"
onSubmit={handleSubscribe}
>
<input
type="text"
placeholder="Enter your name"
value={name}
onChange={(e) => setName(e.target.value)}
required
className="px-4 py-2 border border-gray-300 rounded-md w-full max-w-xs focus:outline-none text-black"

/>
<input
type="email"
placeholder="Enter your email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="px-4 py-2 border border-gray-300 rounded-md w-full max-w-xs focus:outline-none"
className="px-4 py-2 border border-gray-300 rounded-md w-full max-w-xs focus:outline-none text-black mb-0"

/>
<button
Expand Down
39 changes: 5 additions & 34 deletions server/Controllers/OtherController.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
const Newsletter = require("../Models/Newsletter");
const nodemailer = require("nodemailer");
const { sendMailToSubscriber } = require("../sendSubscribeMail");

const subscribeNewsletter = async (req, res) => {
try {
const { email } = req.body;
const { name, email } = req.body;

// Check if email is provided
if (!email) {
if (!email || !name) {
return res.status(400).json({ message: "Email is required" });
}

Expand All @@ -17,39 +17,10 @@ const subscribeNewsletter = async (req, res) => {
}

// Save the subscriber email to the database
const newSubscriber = new Newsletter({ email });
const newSubscriber = new Newsletter({ name, email });
await newSubscriber.save();

// Configure the transporter
const transporter = nodemailer.createTransport({
service: "gmail",
auth: {
user: process.env.EMAIL_USER, // Your email
pass: process.env.EMAIL_PASS, // Your email password (use environment variables in production)
},
});

const mailOptions = {
from: "[email protected]",
to: email,
subject: "Thank you for Subscribing to Our Newsletter",
html: `
<div style="font-family: Arial, sans-serif; text-align: center;">
<h2>Thank You for Subscribing!</h2>
<p>Dear Subscriber,</p>
<p>We are thrilled to have you with us. Stay tuned for our latest updates and offers!</p>
<a href="https://bitbox-in.netlify.app/"
style="display: inline-block; padding: 10px 20px; margin-top: 20px; color: white; background-color: #007BFF; text-decoration: none; border-radius: 5px;">
Explore More
</a>
<p style="margin-top: 30px;">Best Regards,<br>BitBox Team</p>
</div>
`,
};

// Send the confirmation email
await transporter.sendMail(mailOptions);

sendMailToSubscriber(newSubscriber)
res.status(200).json({ message: "Subscription successful, confirmation email sent" });
} catch (error) {
console.error("Error in subscribing to newsletter:", error.message);
Expand Down
35 changes: 20 additions & 15 deletions server/Models/Newsletter.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
const mongoose = require("mongoose");

const NewsletterSchema = new mongoose.Schema({
email: {
type: String,
required: true,
unique: true,
match: [/\S+@\S+\.\S+/, 'Please enter a valid email address']
},
subscribedAt: {
type: Date,
default: Date.now
},
status: {
type: String,
enum: ['Subscribed', 'Unsubscribed'],
default: 'Subscribed'
}
name: {
type: String,
required: true,
trim: true
},
email: {
type: String,
required: true,
unique: true,
match: [/\S+@\S+\.\S+/, 'Please enter a valid email address']
},
subscribedAt: {
type: Date,
default: Date.now
},
status: {
type: String,
enum: ['Subscribed', 'Unsubscribed'],
default: 'Subscribed'
}
});

module.exports = mongoose.model("Newsletter", NewsletterSchema);
65 changes: 65 additions & 0 deletions server/sendSubscribeMail.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
const nodemailer = require('nodemailer');
require('dotenv').config();

const sendMailToSubscriber = (userdata) => {
const transporter = nodemailer.createTransport({
service: "gmail",
host: "smtp.gmail.com",
port: 587,
secure: false,
auth: {
user: process.env.EMAIL_ID,
pass: process.env.PASS_KEY,
},
});

async function main() {
try {
await transporter.sendMail({
from: {
name: "BitBox",
address: process.env.EMAIL_ID,
},
to: userdata.email,
subject: "Welcome to BitBox! 🚀 Join the Developer Community",
text: "Thank you for joining BitBox, your hub for project sharing and collaboration!",
html: `
<div style="background-color: #f4f4f9; color: #333; padding: 20px; font-family: Arial, sans-serif;">
<div style="max-width: 600px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
<h2 style="text-align: center; color: #4a90e2;">Welcome to BitBox, ${userdata.name}!</h2>
<p style="font-size: 16px; line-height: 1.6; color: #555;">
Hi ${userdata.name},
</p>
<p style="font-size: 16px; line-height: 1.6; color: #555;">
Thank you for subscribing to BitBox! We're excited to have you join a growing community of developers who showcase, share, and collaborate on projects.
</p>
<p style="font-size: 16px; line-height: 1.6; color: #555;">
As a BitBox member, you can:
</p>
<ul style="font-size: 16px; line-height: 1.6; color: #555;">
<li>📂 <strong>Upload Projects:</strong> Easily upload and showcase your projects on our platform.</li>
<li>🔍 <strong>Discover Projects:</strong> Explore a wide range of innovative projects shared by fellow developers.</li>
<li>🤝 <strong>Collaborate:</strong> Connect with other developers to share feedback and collaborate on projects.</li>
<li>📚 <strong>Learn and Grow:</strong> Learn from shared projects and contribute to the community’s knowledge base.</li>
</ul>
<p style="font-size: 16px; line-height: 1.6; color: #555;">
Join us as we build a supportive environment where developers can grow, learn, and create together. Welcome aboard!
</p>
<p style="font-size: 16px; line-height: 1.6; color: #555;">
Warm regards, <br/>
The BitBox Team
</p>
</div>
</div>
`,
});
console.log("Email sent successfully to " + userdata.email);
} catch (error) {
console.error("Error sending email:", error);
}
}

main();
};

module.exports = { sendMailToSubscriber };

0 comments on commit 88f258b

Please sign in to comment.