CardForge

The problem

CardForge is a calm, premium React design tool for creating, previewing, and exporting print-ready business cards.

What I built

Built a local-first business card studio with 16 templates and print-ready PDF export with bleed and crop marks, plus PNG, SVG, vCard, and QR output.

How it works

• Freeform editor — add, delete, duplicate, drag, resize, rotate, layer, align, and lock text, shapes, images, and QR codes. Whole drags are a single undo step.
• Real typography — 10 self-hosted typefaces (via @fontsource) with curated heading/body pairings, so every template renders in its true typeface, online or offline.
• True card geometry — the canvas tracks each preset's real aspect ratio (US, EU, JP, UK, square, mini; landscape/portrait) instead of forcing everything into a landscape box.
• Digital cards — share a link or QR that opens a tappable digital card and saves the recipient's contact. New links keep the filtered design in the URL fragment so ordinary hosting requests do not receive it.
• Private sharing controls — choose exactly which contact fields, pronouns, tagline, and images enter a link; optionally expire the card and disable vCard downloads.

Tradeoffs and limits

The live build is a portfolio demonstration. Availability and external services can vary, and the repository remains the source of truth.

What I learned

Added WCAG AA contrast checks, Playwright end-to-end tests, and Docker/nginx plus Vercel and Netlify deploy configs.