Skip to content
Back to Projects
LivePlatform

HIEN Marketing Automation

Social Media Template Engine

HIEN Marketing Automation addresses a real operational bottleneck for small e-commerce businesses: the manual process of applying branding templates to dozens or hundreds of product images for each social media campaign. The tool transforms this from a per-image manual task (open Photoshop, position template, export, repeat) into a batch automated process that maintains pixel-perfect brand consistency across all output formats.

The template engine overlays brand frames, promotional badges, price callouts, and decorative elements onto product photos with configurable positioning rules. Social media presets encode the exact dimensions and safe zones for Instagram (square and story), Facebook (post and banner), Zalo, and TikTok — output is sized and composed correctly for each platform without manual cropping. Zustand manages the complex template editor state: selected template, active product image, overlay positions, color scheme overrides, and export queue.

Google APIs integration handles content distribution workflows — processed images can be organized and distributed via Google Drive for team access, fitting into the broader content calendar workflow. Sharp handles the image processing pipeline server-side: compositing layers, applying compression, converting formats, and generating web-optimized output files. The result is a marketing workflow that a small team can operate without a dedicated graphic designer for routine social media content production.

Key Highlights

  • Auto-insert branding template designs into product images with pixel-perfect positioning
  • Multiple social media preset formats (Instagram, Facebook, Zalo, TikTok)
  • Google APIs integration for image processing and content distribution
  • Real-time preview with Zustand state management for complex template state
  • Image optimization pipeline via Sharp for web-ready output

Technologies

Next.js 15TypeScriptGoogle APIsSharpZustandTailwind CSS
View on GitHub

Screenshots

HScreenshot coming soon
HScreenshot coming soon
HScreenshot coming soon

Related Projects