E-mails

TurboStack uses Resend to send transactional emails by default. They have an amazing documentation that allows you to setup your account quickly, just like TurboStack.

​

First things first

1. Create your account on Resend
2. At “Overview” tab, you’ll see the following image:

3. Click the button and then copy the generated key into your .env.localfile:

RESEND_API_KEY={{YOUR_API_KEY}}

4. You can now click the “Send Email” button to confirm everything is fine.

​

Validate your domain at Resend

1. Go to the “Domains” page on Resend.
2. Click “Add domain” button and enter your domain name.

3. You’ll then see instructions to add 3 DNS entries at your Registrar.
4. After adding them at your Registrar, you can click the “Verify DNS Records button.
5. When the DNS line status go from “Pending” to “Verified” you’ll be done.

​

Creating an Audience to collect leads

Collecting leads is an important task to any Indie Hacker. Resend help us with an “Audience”, allowing us to Manage subscribers of a given account.

To create an audience, do the following steps:

1. Go to the “Audience” page on Resend
2. Create an “Audience” and give it a name of your choice.
3. Copy the generated audience_id to your .env.local file:

RESEND_AUDIENCE_ID={{YOUR_AUDIENCE_ID}}

4. You can now use the endpoint /api/leads to collect leads to your audience programatically:

<form
  className={cn("flex space-x-2 max-w-2xl w-full", className)}
  onSubmit={async (e) => {
    e.preventDefault(); 
    setLoading(true);

    {/* Add the following code */}
    await fetch('/api/lead', {
      method: 'POST',
      body: JSON.stringify({ email })
    })

    toast.success('Success! Your e-mail was added to our waitlist. We\'ll get in touch soon')
  }}>
  <Input
    name="email"
    type="email"
    value={email}
    onChange={e => setEmail(e.target.value)}
    placeholder="Your best e-mail"
    required
  />
  <Button className="w-full max-w-[240px]" loading={loading} disabled={!email}>Join waitlist</Button>
</form>