Développement web
Cartes de contact digitales — Solrus
Système de cartes de visite digitales pour l'équipe Solrus : QR code, enregistrement du contact en un tap (vCard) et aperçus de lien personnalisés par personne.
- Client
- Solrus
- Année
- 2026
- Catégorie
- Développement web
React | Vercel Edge Middleware | vCard / QR code
Les personas
Le membre de l'équipe Solrus
Distribuer une carte de visite professionnelle scannable sans dépendre d'un développeur pour la moindre mise à jour.
Il fait imprimer sa carte avec un QR code une fois, mais peut changer de poste ou de numéro ensuite. Il a besoin que modifier une information passe par une seule source de données, sans devoir réimprimer sa carte à chaque changement — moi y compris : je fais partie de l'équipe Solrus en tant que développeur web frontend, et j'ai contribué à plusieurs de leurs projets, notamment les cartes de contact QR présentées ici.
La personne qui scanne le QR code
Enregistrer le contact ou consulter les liens de la bonne personne, sans étape supplémentaire.
Elle scanne rapidement lors d'un salon ou d'une rencontre professionnelle et s'attend à voir immédiatement un nom et une photo qui correspondent à la personne en face d'elle — pas un aperçu générique du site Solrus qu'elle devra ensuite explorer pour retrouver le bon profil.
Le besoin métier
Chaque associé avait besoin d'une carte de visite scannable, mais le site est une SPA React : les robots de prévisualisation (WhatsApp, iMessage, LinkedIn...) n'exécutent pas le JavaScript et ne voyaient donc jamais le nom ou la photo de la bonne personne — un lien partagé affichait toujours le même aperçu générique du site, quel que soit le membre de l'équipe qui le distribuait.
Diagnostic & recherche
Test des aperçus de lien envoyés sur WhatsApp, iMessage et LinkedIn depuis la SPA existante pour confirmer que les robots ne voyaient qu'un aperçu générique, puis comparatif de plusieurs approches (pré-rendu statique, SSR complet, middleware Edge) sur leur coût d'intégration respectif — l'option retenue devait s'ajouter à l'architecture React existante sans en imposer une réécriture complète ni ralentir le temps de réponse perçu par un visiteur humain.
La réponse apportée
Une page /card/:slug par personne avec QR code, un bouton « Save Contact » qui génère un fichier vCard pour un enregistrement en un tap plutôt qu'une saisie manuelle, et une liste de liens (téléphone, WhatsApp, LinkedIn, sites) pilotée par une seule source de données pour que la mise à jour d'un numéro ne demande qu'une seule modification. Pour les aperçus de lien, un middleware Vercel Edge intercepte la requête avant le rendu React et réinjecte les balises Open Graph et Twitter Card propres à la personne dans le HTML statique renvoyé au robot, sans jamais toucher au rendu vu par un visiteur humain.
Résultat mesurable
Système déployé pour les 8 membres de l'équipe Solrus, chacun avec sa carte imprimée et son QR code.
React | Vercel Edge Middleware | vCard / QR code