feat: replace sendgrid with nodemailer

.env.sample

@@ -1,6 +1,8 @@
-SENDGRID_API_KEY=
-PERSONAL_EMAIL=
+# Contact Form
+GMAIL_APP_PASSWORD=
+GMAIL_USER=
 
+# DatoCMS
 DATO_PREVIEW=
 DATO_API_TOKEN=
 DATO_ENV=

.husky/commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx --no -- commitlint --edit ${1}

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

README.md

@@ -11,3 +11,11 @@ pnpm run dev
 ```
 pnpm run build && pnpm run prod
 ```
+
+### Environment Variables
+
+You can pull the environment variables securely from [Vercel CLI](https://vercel.com/docs/cli):
+
+```
+vercel env pull
+```

package.json

@@ -27,14 +27,14 @@
     "@apollo/client": "^4.0.11",
     "@apollo/client-integration-nextjs": "^0.14.3",
     "@designbycode/tailwindcss-text-stroke": "^1.3.0",
-    "@sendgrid/mail": "^8.1.6",
     "@tailwindcss/postcss": "^4.1.18",
     "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
     "datocms-structured-text-utils": "^5.1.7",
     "dotenv": "^17.2.3",
     "graphql": "^16.12.0",
     "next": "16.1.1",
+    "nodemailer": "^7.0.12",
     "react": "19.2.3",
     "react-datocms": "^7.2.4",
     "react-dom": "19.2.3",
@@ -55,6 +55,7 @@
     "@testing-library/react": "^16.3.1",
     "@trivago/prettier-plugin-sort-imports": "^6.0.0",
     "@types/jest": "^30.0.0",
+    "@types/nodemailer": "^7.0.4",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
     "@types/validator": "^13.15.10",

src/app/api/contact/route.ts

@@ -1,41 +1,42 @@
 /* eslint-disable import/prefer-default-export */
 import { type NextRequest, NextResponse } from 'next/server';
 
-import sgMail, { type ResponseError } from '@sendgrid/mail';
+import nodemailer from 'nodemailer';
 
 import type { ContactFormData } from 'components/Contact/ContactForm';
 
-sgMail.setApiKey(process.env.SENDGRID_API_KEY);
+// Validate required environment variables
+if (!process.env.GMAIL_USER || !process.env.GMAIL_APP_PASSWORD) {
+  throw new Error('Missing required environment variables: GMAIL_USER and/or GMAIL_APP_PASSWORD must be set');
+}
+
+const transporter = nodemailer.createTransport({
+  service: 'gmail',
+  auth: {
+    user: process.env.GMAIL_USER,
+    pass: process.env.GMAIL_APP_PASSWORD,
+  },
+});
 
 export const POST = async (req: NextRequest) => {
   const { name, email, subject, message } = (await req.json()) as ContactFormData;
 
   const content = `Name: ${name}\n Email: ${email}\n Message: ${message}`;
 
-  const data = {
-    to: process.env.PERSONAL_EMAIL,
-    from: 'contact@danielslovinsky.com',
-    subject,
-    text: content,
-    html: content.replace(/\n/g, '<br>'),
-  };
-
-  const send = async () => {
-    try {
-      await sgMail.send(data);
-    } catch (e) {
-      console.error(e);
-
-      const response = (e as ResponseError).response;
-      if (response) {
-        console.error(response.body);
-      }
-
-      return NextResponse.error();
-    }
-  };
-
-  await send();
-
-  return NextResponse.json({ status: 'success' });
+  try {
+    await transporter.sendMail({
+      from: process.env.GMAIL_USER,
+      to: process.env.GMAIL_USER,
+      replyTo: email,
+      subject: `Contact Form Submission: ${subject}`,
+      text: content,
+      html: content.replace(/\n/g, '<br>'),
+    });
+
+    return NextResponse.json({ status: 'success' });
+  } catch (error) {
+    console.error('Email sending error:', error);
+
+    return NextResponse.json({ status: 'error', message: 'Failed to send contact message.' }, { status: 500 });
+  }
 };

src/components/Contact/ContactForm.tsx

@@ -16,17 +16,24 @@ const defaultFormData = {
   message: '',
 };
 
+enum ContactFormStatus {
+  Idle = 'Send Message',
+  Loading = 'Sending...',
+  Error = 'Submission error',
+  Success = "Thanks! I'll get back to you soon.",
+}
+
 export type ContactFormData = typeof defaultFormData;
 
 const ContactForm: FC = () => {
   const [formData, setFormData] = useState(defaultFormData);
   const [errors, setErrors] = useState<Record<string, string[] | undefined>>({});
-  const [status, setStatus] = useState<'Send Message' | 'Sending...' | 'Submission error' | 'Sent!'>('Send Message');
+  const [status, setStatus] = useState<ContactFormStatus>(ContactFormStatus.Idle);
 
   const onSubmit: FormEventHandler<HTMLFormElement> = async e => {
     e.preventDefault();
     setFormData(defaultFormData);
-    setStatus('Sending...');
+    setStatus(ContactFormStatus.Loading);
 
     try {
       const response = await fetch('/api/contact', {
@@ -38,23 +45,23 @@ const ContactForm: FC = () => {
       });
 
       if (response.ok) {
-        setStatus('Sent!');
+        setStatus(ContactFormStatus.Success);
       } else {
         console.error(response.statusText);
-        setStatus('Submission error');
+        setStatus(ContactFormStatus.Error);
       }
     } catch (error) {
       console.error(error);
-      setStatus('Submission error');
+      setStatus(ContactFormStatus.Error);
     }
   };
 
   const handleChange = (
     { target: { name, value } }: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
     validators?: ValidatorFunction[],
   ) => {
-    if (status !== 'Send Message') {
-      setStatus('Send Message');
+    if (status !== ContactFormStatus.Idle) {
+      setStatus(ContactFormStatus.Idle);
     }
     setFormData(prev => ({
       ...prev,
@@ -108,7 +115,7 @@ const ContactForm: FC = () => {
         />
         <button
           type="submit"
-          className="border-2 border-solid border-maya-blue px-10 py-4 font-bold uppercase hover:bg-white/5 focus-visible:bg-white/5 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent md:col-span-2"
+          className="cursor-pointer border-2 border-solid border-maya-blue px-10 py-4 font-bold uppercase hover:bg-white/5 focus-visible:bg-white/5 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent md:col-span-2"
           disabled={submitDisabled}
         >
           {status}

src/environment.d.ts

@@ -1,7 +1,8 @@
 declare namespace NodeJS {
   interface ProcessEnv {
     NODE_ENV: 'development' | 'production' | 'test';
-    PERSONAL_EMAIL: string;
+    GMAIL_USER: string;
+    GMAIL_APP_PASSWORD: string;
     SENDGRID_API_KEY: string;
     DATO_PREVIEW: string;
     DATO_API_TOKEN: string;