Wedding Invitation Generator
A dynamic email agent for crafting and sending personalized wedding invitations using customizable HTML templates. Features live preview, media integration, and direct email delivery via Resend API.
Frontend: Built with Next.js (App Router), React, TypeScript, and Tailwind CSS for a responsive UI. Uses Shadcn UI components.
Templating: Dynamic HTML generation based on user inputs (colors, text, images). Supports multiple templates ('Luxury', 'Modern').
Media Integration: Connects with the YRM Media Processor for selecting header images stored in S3-compatible storage.
Email Delivery: Utilizes a Next.js API route (`/api/emailer`) to send HTML emails via the Resend API.
Live Preview: Renders HTML content within an iframe for accurate desktop and mobile previews, preserving scroll position.
Console Logging: Provides real-time feedback on operations (template changes, sending status, errors) in a dedicated console panel.
React
Next.js
TypeScript
Tailwind CSS
Resend API
HTML Email
Shadcn UI
Technical Processing Pipeline
Template Configuration & Preview
1. User modifies form inputs (text, colors, etc.).
2. React state updates trigger component re-render.
3. `generateEmailHtml` function called with current state.
4. HTML string generated based on selected template.
5. Preview iframe `srcDoc` updated with new HTML.
React State + `generateEmailHtml()`
Email Sending Workflow
1. User clicks "Send Invitation".
2. Client validates recipient email.
3. `generateEmailHtml` creates final HTML content.
4. `fetch` request to `/api/emailer` (Next.js API Route).
5. API route calls Resend API with email details.
6. Client UI/Console updated with success/error.
POST /api/emailer → Resend API
Invitation Configuration
Invitation Preview
Processing Console