DEV Community

🔥 Building an email automation system with React Flow and Resend 🎉

Nevo David on July 31, 2023

TL;DR In this tutorial, you'll learn how to build an email automation system to message people with a sequence of messages every 10 minu...

Read full post

Sumit Saurabh • Jul 31 '23

Love this article! 🚀

Nevo David • Jul 31 '23

Thank you so much Sumit!

Yuval • Aug 1 '23

good job, as always

Nevo David • Aug 1 '23

Thank you so much Yuval!

Matija Sosic • Jul 31 '23

Awesome stuff Nevo - react-flow looks amazing!

Nevo David • Jul 31 '23

Thank you so much Matija! 🔥

Bu Kinoshita • Jul 31 '23

WOW, that's awesome!

Nevo David • Jul 31 '23

🙇🏻‍♂️

gaurbprajapati • Jul 31 '23

Content 🔥

Nevo David • Jul 31 '23

🚀

Leandro Nuñez • Jul 31 '23

Awesome. Thanks!

Nevo David • Aug 1 '23

Thank you LEANDRO!

Okoro chimezie bright • Jul 31 '23

Thanks for sharing

Nevo David • Aug 1 '23

Thank you for reading!

abest • Aug 1 '23

Love this thank you so much

Nevo David • Aug 1 '23

Thank you 🚀

Costasgk • Aug 1 '23

Keep up the good work!

Nevo David • Aug 1 '23

Thank you so much Costasgk!

reconsumeralization • Aug 10 '23

Certainly! Here's an updated version of the code that includes a job queue (such as Bull) to handle the delayed email sending.

.env.local file:

RESEND_API_KEY=<place_your_API_key>

For the send.js file (using Bull for job queue):

import { Resend } from "resend";
import Queue from "bull";

const resend = new Resend(process.env.RESEND_API_KEY);

const emailQueue = new Queue('emails', 'redis://127.0.0.1:6379');

emailQueue.process(async (job) => {
  const { email, subject, task } = job.data;
  await resend.emails.send({
    from: "name@yourcompany.dev",
    to: [email],
    subject,
    text: task,
  });
});

export default async function handler(req, res) {
  const { subject, email, tasks } = req.body;
  if (!subject || !tasks || !email) {
    return res.status(400).json({ invalid: true });
  }

  for (const task of tasks) {
    await emailQueue.add({ email, subject, task }, { delay: 600000 });
  }

  return res.status(200).json({ invalid: false });
}

For the pages/index.js file:

const sendEmail = (index) => {
  fetch("/api/send", {
    method: "POST",
    body: JSON.stringify({
      email,
      subject,
      tasks: nodes.map(data => data.value),
    }),
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((data) => {
      alert(`Sent to processing`);
    })
    .catch((err) => {
      alert(`Encountered an error when message${index} ❌`);
      console.error(err);
    });
};

const handleSubmit = (e) => {
  e.preventDefault();
  sendEmail();
  setEmail("");
  setSubject("");
};

This updated code snippet utilizes a Redis-backed job queue (Bull) to handle the 10-minute delay between email sends. In this way, it bypasses the request handling limitations of serverless platforms like Vercel, and it can be efficiently managed and scaled.

Bull will take care of scheduling the email jobs with a 10-minute delay, and you won't have to worry about request timeouts. Make sure you have Redis running on your server, and you might need to include Bull and Redis as dependencies in your project.

Now, you have a more scalable solution that's suitable for production. Enjoy your emailing without the horror of manual delays! 🌙💼

Priddybroderick • Aug 4 '23

I'm excited to learn how to build an email automation system using ReactFlow and Resend. The step-by-step explanations and code snippets are very helpful. I'll make sure to check out the GitHub repository and give it a star. Keep up the great work for further details resizeimageto50kb.com/