Feat: add email support (#609)

gloriababic · web-flow · commit cb4e1c4ac761 · 2025-09-16T09:30:01.000+02:00
* feat: add nodemailer, react-email and create basic template and transporter

* feat: send thank you email on contact

* fix: add aws credentials

* feat: add email templates preview
diff --git a/apps/contact/app/(email-templates)/contact.tsx b/apps/contact/app/(email-templates)/contact.tsx
@@ -0,0 +1,11 @@
+import { Heading, Html } from "@react-email/components";
+
+const ContactTemplate = () => {
+  return (
+    <Html lang="en">
+      <Heading>Thank you for contacting us!</Heading>
+    </Html>
+  );
+};
+
+export default ContactTemplate;
diff --git a/apps/contact/app/(helpers)/email.ts b/apps/contact/app/(helpers)/email.ts
@@ -0,0 +1,43 @@
+import { SendEmailCommand, SESv2Client } from "@aws-sdk/client-sesv2";
+import { render } from "@react-email/components";
+import { createTransport } from "nodemailer";
+
+const {
+  EMAIL_FROM,
+  AWS_REGION,
+  EMAIL_AWS_ACCESS_KEY,
+  EMAIL_AWS_SECRET_ACCESS_KEY,
+} = process.env;
+
+const sesClient = new SESv2Client({
+  region: AWS_REGION,
+  credentials: {
+    accessKeyId: EMAIL_AWS_ACCESS_KEY || "",
+    secretAccessKey: EMAIL_AWS_SECRET_ACCESS_KEY || "",
+  },
+});
+
+const transporter = createTransport({
+  SES: { sesClient, SendEmailCommand },
+});
+
+export const sendEmail = async ({
+  template,
+  options: { from, to, subject },
+}: {
+  template: React.ReactNode;
+  options: {
+    from?: string;
+    to: string;
+    subject: string;
+  };
+}) => {
+  const emailHtml = await render(template);
+
+  await transporter.sendMail({
+    from: from || EMAIL_FROM,
+    to,
+    subject,
+    html: emailHtml,
+  });
+};
diff --git a/apps/contact/app/api/contact/route.tsx b/apps/contact/app/api/contact/route.tsx
@@ -1,3 +1,5 @@
+//import { ContactTemplate } from "@/app/(email-templates)/contact";
+//import { sendEmail } from "@/app/(helpers)/email";
 import { processContact } from "@/app/(helpers)/notion";
 import { nanoid } from "nanoid";
 import { NextRequest } from "next/server";
@@ -96,6 +98,11 @@ export async function POST(request: NextRequest) {
         source: request.nextUrl.searchParams.get("source") || "Unknown",
       });
 
+      /* await sendEmail({
+        template: <ContactTemplate />,
+        options: { to: email, subject: "Thank you for contacting us!" },
+      }); */
+
       return new Response(
         JSON.stringify({
           message: "Success",
diff --git a/apps/contact/package.json b/apps/contact/package.json
@@ -6,20 +6,27 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "emails": "email dev --dir app/\\(email-templates\\)"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.5.2",
+    "@aws-sdk/client-sesv2": "^3.888.0",
     "@notionhq/client": "^5.0.0",
+    "@react-email/components": "^0.5.3",
     "nanoid": "^5.0.9",
+    "next": "15.5.2",
+    "nodemailer": "^7.0.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "zod": "^4.0.17"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@react-email/preview-server": "4.2.11",
     "@types/node": "^24",
+    "@types/nodemailer": "^7.0.1",
     "@types/react": "^19",
-    "@types/react-dom": "^19"
+    "@types/react-dom": "^19",
+    "react-email": "4.2.11",
+    "typescript": "^5"
   }
 }
diff --git a/bun.lock b/bun.lock
