How I built a QR business card generator with Next.js
Most small businesses still rely on printed visiting cards that get outdated quickly and are hard to track or update.
I wanted to solve a simple problem:
Make a business card that can be shared instantly, updated anytime, and accessed through a QR code.
So I built a QR-based digital business card generator using Next.js.
The problem
Traditional visiting cards have a few issues:
- Information becomes outdated (phone, email, address)
- No way to track usage
- Easy to lose or forget
- Not optimized for mobile sharing
I wanted something that:
- Works on WhatsApp instantly
- Can be updated anytime
- Is always accessible via a single link or QR code
The idea
The concept was simple:
Generate a digital business card → attach a QR code → share anywhere
Each card contains:
- Name
- Phone number
- Business info
- Social links
- Profile photo (optional)
And everything is accessible through a single URL.
Tech stack
- Next.js (App Router)
- Tailwind CSS
- Vercel (deployment)
- QR code generation library
Architecture overview
- User fills form
- Data stored in database
- Unique URL generated
- QR code created
- Share anywhere
Key implementation details
Card creation API
- Accept input
- Validate data
- Store in DB
- Return card ID
QR generation
https://digitingcard.com/card/abc123
Dynamic route
/card/[id]
- Fetch data
- Render mobile UI
- Share + Save contact
Sharing
- WhatsApp button
- Copy link
- Download QR
Challenges
- Minimal UI design
- Mobile-first experience
- Editable cards without QR change
What I learned
- Simple tools solve real problems
- Distribution > features
- QR workflows are underused
Live demo
What’s next
- Analytics
- Lead tracking
- Custom branding
- Bulk creation
Final thought
Execution matters more than originality.
Top comments (0)