Retour au portfolio
● Réalisé Claude · HTML · CSS · JavaScript · PWA · GitHub Pages

QR-Contact

Une carte de visite numérique gratuite, sans compte ni abonnement. En quelques clics, on crée une carte personnalisée avec ses coordonnées et ses réseaux. Un QR code scannable ajoute directement le contact dans le téléphone de l'interlocuteur.

Le point de départ

J'avais un événement professionnel à venir et une frustration qui revenait à chaque fois : les cartes de visite papier. On en distribue, on en reçoit, et trois jours plus tard elles sont au fond d'un sac ou à la poubelle. Personne n'a le temps de les saisir manuellement dans ses contacts.

Les solutions existantes (Blinq, Linktree, HiHello) fonctionnent bien, mais elles ont toutes le même défaut : elles nécessitent un compte, parfois un abonnement, et vos données (et celles de vos contacts) partent sur leurs serveurs.

Je voulais quelque chose de gratuit, sans compte, qui marche directement dans le navigateur et qui génère un vrai vCard scannable : le format standard qui permet d'ajouter un contact directement dans les contacts du téléphone.

Comment je l'ai construit

J'ai construit QR-Contact avec Claude, en une session de travail. L'application est un fichier HTML unique avec du JavaScript intégré. Pas de serveur, pas de base de données, pas de dépendance externe sauf une librairie de génération de QR code.

Le vrai défi technique était la photo. Un QR code a une capacité limitée en données. Intégrer une photo directement dans le QR code le rend illisible dès que la qualité est un peu élevée. J'ai résolu ce problème en gérant trois versions de la photo simultanément :

L'application s'installe sur l'écran d'accueil du téléphone comme une vraie app (PWA), fonctionne hors connexion, et est hébergée gratuitement sur GitHub Pages.

Le résultat

5 étapes pour créer sa carte (identité, contact, réseaux, couleurs, QR)
0€ coût, sans compte, sans abonnement, sans publicité
1 scan suffit pour ajouter le contact directement dans le téléphone

L'application permet aussi de personnaliser les couleurs aux couleurs de sa charte graphique, d'ajouter des liens vers ses documents (plaquette, CV, brochure), et d'exporter sa carte au format JSON pour la réimporter plus tard.

Écran d'accueil de l'application QR-Contact
L'écran d'accueil de QR-Contact
Exemple de QR code généré par QR-Contact
Le QR code généré, prêt à être scanné

Ce que ça illustre

QR-Contact est un bon exemple de ce qu'on peut construire rapidement avec l'IA sans être développeuse. Le besoin était précis, la solution existante ne convenait pas, et en une session de travail avec Claude l'application était fonctionnelle.

C'est aussi l'occasion de montrer concrètement comment je travaille avec Claude Code : pas juste "demander à l'IA", mais comprendre le problème technique, le décomposer, et itérer jusqu'à ce que ça fonctionne vraiment.

Stack technique

HTML / CSS / JavaScript PWA (Progressive Web App) vCard 3.0 QR Code Generator Claude Code (construction) GitHub Pages (hébergement)
Voir l'application → Retour au portfolio