All Projects

Auto-Generated Business Cards

A templating system that auto-generates branded business cards with dynamic QR codes, vCard downloads, and property assignments. Per employee, zero design work.

Live
Business card front
Business card back with QR code

Drag to flip

How It Works

  • Each employee gets a unique URL (e.g., cards.bonavistapm.com/SPNCE) with no manual card design needed
  • Template engine auto-generates cards from employee data: name, title, phone, email, photo, and assigned properties
  • Dynamic QR code on the back links directly to the employee's digital card page
  • vCard (.vcf) download for one-tap contact saving on any phone
  • Adheres to complex brand template requirements: consistent fonts, colors, logo placement, and spacing across all 100+ employee cards
  • Property listing integration shows each employee's assigned buildings
  • Dark/light theme support on the digital card page
  • Responsive mobile-first design; cards look correct on any screen size

Why Build It

With 100+ employees across 60+ properties, maintaining individual business cards was a design bottleneck. New hires, title changes, and property reassignments meant constant manual updates. This system generates pixel-perfect cards automatically from a single employee record, including the QR code, so onboarding a new hire takes zero design time.

Built With

Next.jsReactTypeScriptTailwind CSSQR Code API