Compass/backend/email/CLAUDE.md

backend/email

React Email templates + send helpers. Templates render to HTML; Resend delivers them.

See README.md for the dev preview server (yarn dev → http://localhost:3001) and knowledge.md for the detailed walkthrough. Cross-package context is in the root CLAUDE.md.

Layout

backend/email/
├── emails/
│   ├── new-message.tsx, new-match.tsx, new-endorsement.tsx, welcome.tsx, ...
│   │       One React component per email. Default-exported, with previewProps for the dev server.
│   ├── functions/
│   │   ├── helpers.tsx       sendNewEndorsementEmail, sendWelcomeEmail, ...  ← import these from API
│   │   ├── send-email.ts     Low-level Resend wrapper
│   │   ├── create-emails.ts  Bulk creation helper
│   │   └── mock.ts, send-test-email.ts
│   ├── utils.tsx             Shared layout / styling components
│   └── static/               Image assets (only used by the dev preview server)
└── tests/

Adding a new email

1. Create emails/<name>.tsx exporting a React component as default. Use @react-email/components primitives for email-safe HTML.
2. Add previewProps so the dev preview server renders it without real data.
3. Add a send<Name>Email(...) helper in emails/functions/helpers.tsx. API handlers call this helper, not the template directly.
4. Trigger from a backend handler:

   import {sendNewEndorsementEmail} from 'email/functions/helpers'
   await sendNewEndorsementEmail(privateUser, creator, onUser, text)
   

Build / test

yarn --cwd=backend/email typecheck
yarn --cwd=backend/email lint[-fix]
yarn --cwd=backend/email test

You typically don't need to start the email dev preview server yourself — the human runs it when iterating on a template.