Tapcard
A digital business card you share by QR code, nearby radar or your phone's own sharing.
Works today in the browser: card editing with privacy levels, templates, QR sharing, a print kit, contacts with lead scores, meeting notes and a Nearby radar tab. Not built yet: a server or accounts (data stays in your own browser) and real profile links (they are placeholders). The Nearby radar and its consent and encrypted-transfer steps only work between windows of the same browser; Bluetooth between real phones needs a mobile app that does not exist yet. It has not been tested on real Android or iPhone devices, and sharing with non-users through AirDrop or Quick Share is untried on real phones too.
01Project overview
Build a card with a privacy level for every detail, then share it by QR code, a Nearby radar, or the phone's own share sheet. Includes templates, a print kit, a contacts list with lead scores and meeting notes.
Key features
- Privacy level for each detail: public, or hidden until the other person shares theirs back
- Templates, a Free and a Premium view, and separate identities
- QR code that carries only the public details
- Print kit: business card, round sticker, table sign and review sign, exported as a PNG
- Contacts list with a rule-based lead score and follow-up dates, plus meeting notes
- Nearby tab: radar, invitation, consent and encrypted transfer (test radar between browser windows)
- Share with anyone nearby through the phone's own share sheet, using a standard contact file
02Problem being solved
Paper cards get lost and most digital cards ask the person receiving them to install an app. Tapcard explores a card that works for anyone with a phone camera, while the owner decides which details each person may see.
03Technical architecture
- A single self-contained HTML file with plain JavaScript and no framework.
- All data is kept in the browser's local storage. There is no server and no account.
- Canvas draws the print kit. qrcode.js draws QR codes. The contact card is a standard vCard (.vcf) file.
- Nearby messages are encrypted in the page with the Web Crypto API (ECDH P-256, HKDF and AES-GCM). In the browser a BroadcastChannel carries them between windows.
- A transport boundary lets a native plugin named TapcardNearby replace the test radar later without changing the page. The adapter code has never run on real hardware.
Technical documentation
Native Nearby plugin contract
The page expects a plugin called TapcardNearby with requestPermissions, checkAvailability, start, send and stop, and the events peerFound, peerLost and message. Messages are already encrypted by the page, so the plugin only moves bytes. This plugin does not exist yet.
Test on two real phones before shipping
Android to Android, Android to iPhone and iPhone to iPhone; Bluetooth off and permission denied; matching pairing codes; decline, cancel, out-of-range and timeout; nothing saved until the receiver taps Save; and invitations that only reach the chosen device.
Screenshots
Captured from the real prototype using fictional sample data (Sample Person, Example Studio and three sample leads). The Nearby screenshot uses the test radar between two browser windows, not real phones.
04Technologies used
- HTML
- CSS
- JavaScript
- Canvas
- Web Crypto API
- BroadcastChannel
- Web Share API
- qrcode.js
05Development process
- Started with the card, the privacy levels and the QR code, since they work on any phone camera.
- Added the print kit, contacts and meeting notes around that core.
- Built the whole Nearby flow (radar, invite, accept, encrypted transfer, save, QR fallback) against a test transport, then wrote down the contract a native plugin must meet.
- Kept every limit in plain words in the interface and in the spec, so nothing claims more than it does.
06Interactive demonstration
This is the real prototype, running in your browser. Anything you type stays on this device. To try Nearby, open the prototype in two windows (button below), tap Nearby in both, then tap Start Radar. It only finds windows of the same browser; Bluetooth between real phones is not built yet.
Open the prototype in its own window ↗07Screenshots
08Challenges and solutions
Challenge
Browsers cannot advertise over Bluetooth, and Safari on iPhone has no Web Bluetooth at all.
Solution
The page talks to a small transport interface. In the browser it uses a test radar between windows. A planned Capacitor plugin would use real Bluetooth Low Energy, and the page switches to it automatically when it is present.
Challenge
iPhones do not accept unsolicited Bluetooth files from third-party apps, so a card cannot be pushed to someone without Tapcard.
Solution
Sharing with non-users goes through the phone's own share sheet (AirDrop on iPhone, Quick Share on Android) with a standard .vcf file. Details marked 'after connect' start unticked, because a non-user can never connect back.
Challenge
A nearby radar must only show real users and must not guess distance.
Solution
Two phones only see each other if both run Tapcard in the foreground. Signal strength is never turned into metres; without proximity data every device sits on one ring labelled 'Signal detected'.
09Future improvements
- Build and test the TapcardNearby plugin on real Android and iPhone devices
- Try the share-sheet route (AirDrop and Quick Share) on real phones
- Add a Supabase backend with accounts so profile links become real
- Wrap the app with Capacitor for the Android and iOS stores
10Source code
Source code is not public yet
This project has no public repository. When one exists, add its URL as repo in data/projects.ts and the link appears here.