Emails Your App Sends

Welcome, password reset, order and notification emails, and making them look good

Written by Andrew Lee Jenkins6 min read1 activity

Buzz presents

welcome, password reset, order and notification emails are the four kinds most apps send!! and we make them look realy nice too.welcome, password reset, order and notification emails are the four kinds most apps send!! and we make them look realy nice too.

Buzz fans out four envelopes decorated with a ribbon bow, a brass key, a receipt and a small bell — Welcome, password reset, order and notification emails

Common Email Types#

Here are the emails almost every app ends up sending. Each example uses the same resend client you set up in Resend Basics.

Welcome Emails#

When someone signs up, send them a friendly welcome. First impressions matter!

await resend.emails.send({
  from: '[email protected]',
  to: newUser.email,
  subject: 'Welcome to YourApp!',
  html: `
    <h1>Welcome, ${newUser.name}!</h1>
    <p>We're excited to have you. Here's how to get started...</p>
  `
})

Password Reset Emails#

For when people forget their password (which is all of us, constantly).

await resend.emails.send({
  from: '[email protected]',
  to: user.email,
  subject: 'Reset Your Password',
  html: `
    <p>Click the link below to reset your password:</p>
    <a href="${resetLink}">Reset Password</a>
    <p>This link expires in 1 hour.</p>
  `
})

Order Confirmations#

For online stores.

await resend.emails.send({
  from: '[email protected]',
  to: customer.email,
  subject: `Order Confirmation #${order.id}`,
  html: `
    <h1>Thanks for your order!</h1>
    <p>Order total: $${order.total}</p>
    <p>We'll email you when it ships.</p>
  `
})

Notifications#

Keep people in the loop on what's happening.

await resend.emails.send({
  from: '[email protected]',
  to: user.email,
  subject: 'Someone commented on your post',
  html: `
    <p>${commenter.name} commented on your post:</p>
    <blockquote>${comment.text}</blockquote>
  `
})

Side note. Every one of these needs an email address, and that list is worth more than people think. Build one. Email still works.

Making Emails Look Good#

Buzz stamps the same coloured design onto a row of cream cards, each with a blank strip left open — Templates keep every email consistent, just fill in the details

Plain HTML emails can look pretty bare. Resend works with React Email, a tool for building good-looking emails out of React components. Install it with npm install react-email (older tutorials import from @react-email/components, which is deprecated now).

// emails/welcome.jsx
import { Html, Button, Text } from 'react-email'
 
export function WelcomeEmail({ name }) {
  return (
    <Html>
      <Text>Welcome, {name}!</Text>
      <Button href="https://yourapp.com/get-started">
        Get Started
      </Button>
    </Html>
  )
}

Then hand it to Resend with react instead of html. Call it like a function, not as a JSX tag, the way the Resend docs show.

import { WelcomeEmail } from './emails/welcome'
 
await resend.emails.send({
  from: '[email protected]',
  to: newUser.email,
  subject: 'Welcome to YourApp!',
  react: WelcomeEmail({ name: newUser.name })
})

You build email templates the same way you build web pages, so your emails come out looking professional and consistent.

This lesson ends with a short activity.