BrandForge AI: A Production-Grade AI Social Post Generator
An AI-powered creative suite that transforms brand assets into polished, on-brand social media posts using a multimodal Gemini model and a true WYSIWYG interactive canvas.
Roles: Lead Architect & Full-Stack Developer
Client: PartyHub (Professional Take-Home Assignment)
Overview
Developed and delivered a production-grade AI creative tool from concept to deployment in under 48 hours for the PartyHub SDE-1 assignment. The core challenge was to move beyond a simple API call and engineer a flawless, interactive user experience. The final product features a 'Scaled WYSIWYG' architecture, ensuring the live preview is a pixel-perfect, scaled representation of the final high-resolution download. This solved critical visual consistency bugs and resulted in a robust, intuitive, and production-ready creative tool.
Tech Stack
- Next.js
- TypeScript
- Tailwind CSS
- Google Gemini 1.5 Flash
- Framer Motion
- html-to-image
- Lenis (Smooth Scroll)
- Sonner (Toasts)
- OGL (WebGL for Aurora BG)
Features
- True WYSIWYG Scaled Preview ArchitectureEngineered a robust front-end architecture where the live preview is a CSS-scaled version of a single, high-resolution (1080x1350px) master component. This guarantees that the editor is a 100% pixel-perfect representation of the final downloaded image, eliminating all layout and text-wrapping inconsistencies.
- Multimodal AI Creative DirectionLeverages the Gemini 1.5 Flash model to analyze user-uploaded images and generate a complete creative package—including enhanced copy, hashtags, and layout suggestions—returned as a structured JSON object for reliable integration.
- Robust Interactive CanvasFeatures a percentage-based, draggable logo with robust boundary clamping, ensuring the element is always retrievable and never vanishes at the edges. The entire UI is built for a fluid, professional-grade user experience.
- Client-Side Image Processing PipelineImplemented a reliable client-side workflow that accepts any user-uploaded image format, converts it to a standardized JPEG for processing, and uses 'html-to-image' to render the final, user-customized canvas into a high-resolution PNG ready for social media.