Full-stack AI app that transforms user prompt, email designs into pixel-perfect HTML email templates in seconds.
The project involved engineering a full-stack AI application that seamlessly transforms user prompts and email designs into pixel-perfect HTML email templates within seconds.
Built using cutting-edge technologies like Next.js, TailwindCSS, Shadcn, Zustand, AI SDK, Nginx, and PM2, the app ensures high performance and reliability. With a focus on speed, the application generates outputs in under 10 seconds, making it highly efficient for users.
Additionally, the user experience was enhanced through the implementation of server-sent events for real-time code streaming and the integration of an image provider to supply placeholder images, ensuring a smooth and visually appealing workflow.
To further enrich the app's functionality, an in-house icon API was developed to integrate icons into email templates. This API intelligently retrieves the correct SVG icon from Tabler Icons, converts it to PNG format, and returns it to the client for display.
A modern code editor, powered by CodeMirror, was integrated into the UI to provide a sleek and user-friendly coding experience. Extensive research was conducted to compare CodeMirror, Monaco, and Sandpack, ensuring the best choice for the project.
Memory leaks were identified and resolved using Chrome DevTools, while performance optimization was achieved by monitoring re-renders with the React-Scan package and implementing function and component-level memoization, reducing re-renders by 20x.
The app also features efficient client-side template storage and retrieval using IndexedDB, enabling fast and persistent management of email templates.
AI output quality was significantly improved through research on email development, prompt tuning, and experimentation with large language models (LLMs).
Deployed on a shared server and managed with PM2 and Nginx for stability and scalability. Nginx is configured with HTTP/2, improving page load speeds and overall performance through features like header compression and multiplexing.
This comprehensive approach to development, optimization, and deployment highlights the project's focus on delivering a robust, high-performance solution for email template generation.
Note: Images are for demonstration purposes only; all rights belong to their owners.
Continue Exploring
A SaaS product enabling businesses to track & visualize carbon emissions.
Order Management is a solution that enhances daily dispatch operations, right from order capture to delivery, with the help of powerful automation.
Orchestration (now known as Shipflex), is a fleet management software to manage captive, contracted & outsourced fleets on a single platform.