Initializing...
Engineering Case Study
xCardGen: Automated Event Badge Generator & Headless Renderer
Allowing event organizers to generate customized digital attendee badges in bulk within seconds.
Under 2 Seconds per Badge
Generation Speed
98% Manual Design Reduction
Time Saved
Unlimited Attendee Cards
Capacity
NestJS + Puppeteer
SSR Worker Pool
The
Challenge
Event organizers spend days manually customizing attendee badges, speaker graphics, and pass cards in graphic design software. Manual card production is error-prone and delays social media event promotion.
The
Strategy
I built xCardGen as an automated card generator powered by canvas serialization and headless SSR:
1. Canvas Drag-and-Drop Serialization
Organizers build visual card templates using an interactive canvas editor. Templates serialize into JSON metadata specifying text placement, dynamic variables (Attendee Name, Title, Avatar), and visual branding elements.
2. Headless SSR Worker Pool (NestJS + Puppeteer)
When an attendee list CSV is uploaded, NestJS background workers launch parallel Puppeteer browser instances to render high-resolution PNG badges and store them in object storage for instant social media sharing.
Technology Infrastructure
Next.js 16NestJSPuppeteer Server-Side RendererPrismaPostgreSQLTailwind CSS 4
Key
Outcomes
- Outcome 01
Reduced event badge creation time from days of manual labor to seconds.
- Outcome 02
Powered instant social media badge sharing for thousands of conference attendees, boosting event reach.
- Outcome 03
Integrated both card payment options and instant digital payment support for event organizers.