This is my app.js file inside the api folder. I have set it up to take in the form details from the Contact.js file and send an email using the nodemailer library. I have already deployed my site on Vercel.
require("dotenv").config();
const nodemailer = require("nodemailer");
const transporter = nodemailer.createTransport({
service: 'gmail',
host: "smtp.gmail.com",
port: 587,
secure: false,
auth: {
user: process.env.USER,
pass: process.env.APP_PASSWORD,
},
});
module.exports = async (req, res) => {
if (req.method === 'POST') {
const formDetails = req.body;
const mailOptions = {
from: {
name: formDetails.firstName,
address: formDetails.email
},
to: process.env.USER,
subject: "Portfolio Form",
text: `Name: ${formDetails.firstName}nEmail: ${formDetails.email}nPhone: ${formDetails.phone}nMessage: ${formDetails.message}`,
};
try {
await transporter.sendMail(mailOptions);
console.log('Email has been sent');
res.status(200).json({ code: 200, message: 'Email sent successfully' });
} catch (error) {
console.error(error);
res.status(500).json({ code: 500, message: 'Error in sending email' });
}
} else {
res.status(405).json({ code: 405, message: 'Method Not Allowed' });
}
};
this is my Contact.js file where the form is located :
import { React, useState } from "react";
import { Container, Row, Col } from "react-bootstrap";
import contactImg from "../assets/img/contact-img.svg";
import 'animate.css';
import TrackVisibility from 'react-on-screen';
export const Contact = () => {
const formInitialDetails = { firstName: '', lastName: '', email: '', phone: '', message: '' }
const [formDetails, setFormDetails] = useState(formInitialDetails);
const [buttonText, setButtonText] = useState('Send');
const [status, setStatus] = useState({});
const onFormUpdate = (category, value) => {
setFormDetails({ ...formDetails, [category]: value })
}
const handleSubmit = async (e) => {
e.preventDefault();
setButtonText("Sending...");
let response = await fetch("/api/contact", {
method: "POST",
headers: { "Content-Type": "application/json;charset=utf-8", },
body: JSON.stringify(formDetails),
});
let result = await response.json();
setFormDetails(formInitialDetails);
if (result.code === 200) {
setStatus({ success: true, message: 'Message sent successfully! I will get back to you as sson as possible!'});
} else {
setStatus({ success: false, message: 'Something went wrong, please try again later.'});
}
setButtonText("Send");
};
return (
<section className="contact" id="connect">
<Container>
<Row className="align-items-center">
<Col size={12} md={6}>
<TrackVisibility>
{({ isVisible }) =>
<img className={isVisible ? "animate__animated animate__zoomIn" : ""} src={contactImg} alt="Contact Me"/>
}
</TrackVisibility>
</Col>
<Col size={12} md={6}>
<TrackVisibility>
{({ isVisible }) =>
<div className={isVisible ? "animate__animated animate__fadeIn" : ""}>
<h2>Get In Touch</h2>
<form onSubmit={handleSubmit}>
<Row>
<Col size={12} sm={6} className="px-1">
<input type="text" value={formDetails.firstName} placeholder="First Name" onChange={(e) => onFormUpdate('firstName', e.target.value)} />
</Col>
<Col size={12} sm={6} className="px-1">
<input type="text" value={formDetails.lastName} placeholder="Last Name" onChange={(e) => onFormUpdate('lastName', e.target.value)}/>
</Col>
<Col size={12} sm={6} className="px-1">
<input type="email" value={formDetails.email} placeholder="Email Address" onChange={(e) => onFormUpdate('email', e.target.value)} />
</Col>
<Col size={12} sm={6} className="px-1">
<input type="tel" value={formDetails.phone} placeholder="Phone No." onChange={(e) => onFormUpdate('phone', e.target.value)}/>
</Col>
<Col size={12} className="px-1">
<textarea rows="6" value={formDetails.message} placeholder="Message" onChange={(e) => onFormUpdate('message', e.target.value)}></textarea>
<button type="submit"><span>{buttonText}</span></button>
</Col>
{
status.message &&
<Row>
<p className={status.success === false ? "danger" : "success"}>{status.message}</p>
</Row>
}
</Row>
</form>
</div>}
</TrackVisibility>
</Col>
</Row>
</Container>
</section>
)
}
I have already tried to change up the module.exports line as I thought perhaps the error 500 was coming from there… I have also completely changed up my code and asked AI to help me out finding what the problem is to no avail. Please help 🙁
