Employee of the Month Generator
React app that turns employee details into polished celebration posts and certificates — optimised for LinkedIn, Instagram, Twitter, and PDF export.
// problem
Business Problem
Recognising employees every month takes time — writing tailored copy, sizing graphics for each platform, and exporting certificates is repetitive manual work that HR teams and managers often skip. EOTMG automates the whole flow from name to publish-ready output.
// constraints
Constraints
- Output must be correctly sized and formatted per platform (LinkedIn, Instagram, Twitter, photo caption)
- PNG, JPG, and PDF exports must preserve design quality from the browser preview
- Instant preview — users see the final result as they type, no submit step
// architecture
Architecture
frontend
React 18 with Vite — form, live preview, and export panel as distinct component groups
contentEngine
Template-based content generator that maps role, accomplishments, and platform to celebration copy and design theme suggestions
export
html2canvas for raster image export (PNG/JPG), jsPDF for certificate-quality PDF generation, Clipboard API for one-click copy
deployment
Vercel static deployment — zero backend, fully client-side
Scalability Strategy
- Template system decouples copy patterns from UI — adding new platforms or design themes requires no component changes
- Client-side only architecture means zero server costs at any usage volume
- Clipboard, PNG, JPG, and PDF export paths are independent and tree-shakeable
Security Decisions
- Fully client-side — no employee data ever leaves the browser
- No backend, no database, no auth surface to attack
- Vercel static hosting with automatic HTTPS
Target Outcomes
- Live tool at eotmg.vercel.app — ready to use with no account or setup required
- Multi-platform output from a single input form — LinkedIn, Instagram, Twitter, and caption
- One-click export to PNG, JPG, PDF, or clipboard for immediate use
- Real-time preview eliminates back-and-forth between editing and checking output