The brief
The Email Signature Generator was a free lead-generation tool ApproveMe shipped to drive top-of-funnel awareness for WP E-Signature. The product: a polished single-page React wizard where anyone — no login — picks a template, fills in their details, watches the preview update live, and copies the final HTML into Gmail or Outlook in under two minutes. Eight templates, every typographic and color knob exposed, image uploads, social links, optional custom CTAs.
I built roughly 30 of the 51 React components on the project — the template renderers, the step-based dashboard wizard, the page components and their animations, utility modules, and the state-and-actions layer that ties them together.
What I built
A wizard architecture without Redux ceremony. A clean three-way
separation: React Hook Form owns inputs and validation,
little-state-machine
owns the canonical app state, and a small watch() bridge keeps them in
sync without dropping changes. The decision to skip Redux was deliberate
— a single-page wizard doesn’t need the action/reducer overhead, and the
lighter state container kept the bundle small.
Email-safe template rendering, in React. All eight signature
templates render as nested HTML tables with inline styles — the only
markup that survives the CSS sandboxes inside Gmail, Outlook, Apple
Mail, and Yahoo. Written as React components for the editor’s live
preview, but the output is dead-simple HTML the user pastes into their
mail client and forgets about. Each template also declares an
unusedFields array, so the sidebar hides irrelevant controls
per-template — UX driven by config, not branching component logic.
Animation that’s actually choreographed. Framer Motion across page transitions and a set of SVG-based reveal animations on the landing page — lines drawing themselves, curves rotating in — orchestrated entries rather than opacity fade-ins. The same variant pattern carries through to micro-interactions inside the wizard.
Anonymous, UUID-based persistence. No login. Every signature gets a UUID at creation; the React app saves to a Laravel endpoint that upserts the full editor state as a JSON blob keyed by UUID. Email validation runs through BriteVerify on save; lead capture flows into Active Campaign for the nurture sequence. A user can return days later via shareable link and pick up exactly where they left off.
What’s notable about it now
The signature generator did the same job for ApproveMe that the contracts library did — top-of-funnel exposure, friendly free tool, lead capture into the CRM, nurture toward WP E-Signature. Two products, two surfaces, same model. And like the rest of the ApproveMe network, the architecture honored the constraint: no login, no friction, no Redux when a state machine would do.