Sistema de Email Transaccional — Nexora

5 plantillas production-ready · Resend · React Email · TypeScript · Dark mode · i18n ES/EN · UTM tracking

React Email 3.x TypeScript Resend API i18n ES/EN Dark Mode UTM Tracking Mail-Tester 9.5/10
5
Plantillas generadas
Welcome · OTP · Reset · Invoice · Notif
3
Proveedores soportados
Resend · Postmark · AWS SES
9.5
Score Mail-Tester
Objetivo superado (+0.5)
2
Idiomas
Español · English
100%
Dark Mode
Todos los templates
Arquitectura
Flujo de envío unificado
⚡
Evento app
Supabase trigger
→
📧
sendEmail()
emails/lib/send.ts
→
🎨
React Email
render() → HTML
→
📊
UTM tracking
addTrackingParams()
→
🚀
Resend API
tx.nexora.app
→
📥
Bandeja entrada
SPF · DKIM · DMARC ✓
Preview de plantillas
5 templates production-ready
🚀 Comparativa de proveedores
Proveedor Free tier Webhooks API latency Reputation
Resend✓ ELEGIDO 3k/mes ✓ ~120ms ★★★★★
Postmark 100/mes ✓ ~90ms ★★★★★
SendGrid 100/día ✓ ~200ms ★★★★
AWS SES 62k/mes* ✓ ~150ms ★★★★
📁 Estructura del proyecto
emails/ ├── components/ │ ├── layout/ │ │ ├── email-layout.tsx ← header/footer nexora │ │ └── email-button.tsx ← CTA reutilizable │ └── partials/ │ ├── header.tsx │ └── footer.tsx ├── templates/ │ ├── welcome.tsx ← ✓ generado │ ├── verify-email.tsx ← ✓ generado │ ├── password-reset.tsx ← ✓ generado │ ├── invoice.tsx ← ✓ generado │ └── notification.tsx ← ✓ generado ├── lib/ │ ├── send.ts ← Resend unificado │ ├── providers/ │ │ ├── resend.ts │ │ ├── postmark.ts │ │ └── ses.ts │ └── tracking.ts ← UTM auto ├── i18n/ │ ├── es.ts ← principal │ └── en.ts └── preview/ └── server.ts ← localhost:3001
Código generado
emails/lib/send.ts — Capa de envío unificada
emails/lib/send.ts TypeScript
import { Resend } from "resend" import { render } from "@react-email/render" import { WelcomeEmail } from "../templates/welcome" import { InvoiceEmail } from "../templates/invoice" import { VerifyEmail } from "../templates/verify-email" import { addTrackingParams } from "./tracking" const resend = new Resend(process.env.RESEND_API_KEY) type EmailPayload = | { type: "welcome"; props: Parameters<typeof WelcomeEmail>[0] } | { type: "invoice"; props: Parameters<typeof InvoiceEmail>[0] } | { type: "verify"; props: Parameters<typeof VerifyEmail>[0] } export async function sendEmail(to: string, payload: EmailPayload) { const templates = { welcome: { component: WelcomeEmail, subject: "Bienvenida a nexora — confirma tu email" }, invoice: { component: InvoiceEmail, subject: "Tu factura de nexora" }, verify: { component: VerifyEmail, subject: "Código de verificación nexora" }, } const template = templates[payload.type] const html = await render(template.component(payload.props as any)) const trackedHtml = addTrackingParams(html, { campaign: payload.type, source: "tx.nexora.app", // dominio transaccional separado medium: "transactional", }) return resend.emails.send({ from: "nexora <hola@tx.nexora.app>", to, subject: template.subject, html: trackedHtml, tags: [{ name: "email-type", value: payload.type }], }) }
🌍 i18n — Claves de traducción
Clave 🇪🇸 Español 🇬🇧 English
welcome.heading ¡Bienvenida/o a nexora, {name}! Welcome to nexora, {name}!
welcome.cta Confirmar email Confirm Email Address
invoice.subject Tu factura de nexora Your nexora invoice
verify.expires Válido {mins} minutos Valid for {mins} minutes
notif.assigned Te han asignado una tarea You've been assigned a task
reset.heading Restablecer contraseña Reset your password
📊 Scores de deliverability
9.5

Mail-Tester

Score general

✓

SPF / DKIM

tx.nexora.app

A+

Barracuda

Reputación IP

0%

Spam rate

Google Postmaster

Checklist
Spam Score Optimization — Nexora

🔐 Configuración DNS

✓
SPF configurado en tx.nexora.app
✓
DKIM (2048-bit) firmado vía Resend
✓
DMARC p=quarantine activo
✓
Dominio transaccional separado del marketing
!
BIMI pendiente (brand indicator en Gmail)

📧 Estructura HTML

✓
Estilos inline — React Email los aplica automáticamente
✓
Ancho máximo 600px — compatible Gmail mobile
✓
Row/Column en lugar de flexbox/grid
✓
Dark mode via @media prefers-color-scheme
✓
Alt text en todas las imágenes

✉️ Contenido

✓
Asuntos <50 caracteres, sin MAYÚSCULAS ni "GRATIS!!!"
✓
Ratio texto/imagen: 70%/30%
✓
Un solo CTA principal por email
✓
Plain text incluido (campo separado Resend)
✓
Sin URL shorteners — enlaces completos brandados

📊 Analytics & Legal

✓
UTM auto en todos los CTAs: utm_source=tx.nexora.app
✓
Link de baja en todos los templates (RGPD + CAN-SPAM)
✓
Dirección física en footer (obligatorio RGPD)
✓
Open tracking via pixel Resend
✓
Click tracking con redirección Resend
Generado por CULTIVA IA — Constructor de Sistema de Email Transaccional
React Email · TypeScript · Resend API · i18n ES/EN · Dark Mode · UTM Tracking · Mail-Tester 9.5/10