Inspiration
Traditional paper business cards get lost, thrown away, or quickly become outdated whenever an email, phone number, or job title changes. We wanted a lightweight, privacy-focused online tool where professionals, freelancers, and indie creators can instantly design elegant digital cards, share QR codes at meetups, and export print-ready assets without bulky design software.
What it does
Shadow Card is an online digital business card studio.
- Smart Card Parsing: Snap or upload a photo of an existing paper card, and AI automatically recognizes your name, title, and contact details.
- AI Bio Polish: Refines your elevator pitch or bio in multiple styles (Concise, Technical, Executive, Creative).
- Instant Live Preview: 4 hand-crafted card themes (Business, Tech, Minimal, Creative) and 8 curated color palettes with zero latency.
- Interactive QR Codes: Automatically encodes your personal website, portfolio, or vCard URL.
- PNG & Vector Export: Export ultra-crisp PNG business cards for mobile lockscreens, messaging apps, and social headers.
- Pro Profile & vCard: Pro tier offers an online profile page (/@yourname) where visitors can save your contact directly into their phone contacts with one click, along with visitor analytics and cloud sync.
How we built it
- Frontend: Built with Next.js (App Router) and React, styled with Tailwind CSS.
- Rendering Engine: Custom HTML5 Canvas rendering pipeline for pixel-perfect typography, crisp vector QR codes, and multi-resolution PNG export.
- Backend & Database: Supabase for database persistence, Row-Level Security (RLS), and authentication.
- AI Processing: Vision parsing and bio generation via modern multimodal LLM APIs.
Challenges we ran into
Balancing crisp client-side rendering with varying device pixel ratios (DPR) while maintaining exact millimeter print coordinates took several iterations of canvas scaling mathematics. We also designed local draft auto-saving so users never lose their card design even on unstable connections.
Accomplishments that we're proud of
- Zero-latency real-time preview of card themes and colorways.
- Clean, privacy-first architecture where free cards can be crafted locally without mandatory server-side tracking.
What's next
Adding animated Live Photo cards, wallet passes (Apple Wallet & Google Wallet), and team management for small studios.
Built With
- ai
- canvas
- next.js
- react
- supabase
- tailwind-css
- typescript
