Integración del Input de Email en el Header con la API de Resend.com

Objetivo: Conectar el campo de correo electrónico en el header de la landing page de ArianeDevs con la API de Resend.com para capturar contactos de personas y empresas interesadas en ser contactadas, definiendo un asunto adecuado para los correos.

Instrucciones:

1.  Configuración de Variables de Entorno:
•   Seguridad: No exponer la API key en el código.
•   Implementación:
•   Crear un archivo .env en la raíz del proyecto Astro.
•   Añadir la API key: RESEND_API_KEY=tu_api_key_aqui
•   Asegurarse de incluir .env en .gitignore.

2.  Desarrollo del Componente de Email:
•   Captura y Validación:
•   Identificar el input de email en el header.
•   Implementar validaciones para asegurar un formato de correo válido.
•   Definición del Asunto:
•   Ejemplos:
•   “Interés en Contactar - ArianeDevs”
•   “Solicitud de Información - ArianeDevs”

3.  Integración con Resend.com:
•   Función para Enviar el Email:
•   Crear una función server-side en Astro (e.g., src/pages/api/sendEmail.js) que:
•   Reciba el email desde el frontend.
•   Utilice la API de Resend.com para enviar el correo con el asunto definido.
•   Maneje respuestas y errores adecuadamente.
•   Configuración del Frontend:
•   Configurar el formulario para enviar una solicitud POST a la API creada al enviar el email.
•   Proporcionar feedback al usuario sobre el estado del envío.

4.  Seguridad y Buenas Prácticas:
•   Protección de la API Key: Asegurar que la clave solo se acceda desde el servidor.
•   Prevención de Abuso: Implementar mecanismos como reCAPTCHA para evitar spam.

5.  Pruebas y Validación:
•   Funcionales: Verificar que los correos se envíen correctamente.
•   Seguridad: Asegurar que la API key no sea accesible desde el frontend.
•   Usabilidad: Garantizar una experiencia fluida en mobile, tablet y desktop.

Ariane-Devs / ariane_devs_com

Integración del Input de Email en el Header con la API de Resend.com #4