L’origine
Un outil né d’un besoin personnel
Qrela est né d’un besoin assez simple : je cherchais un moyen de créer rapidement un QR code sans devoir ouvrir un compte ou découvrir, au moment du téléchargement, que certaines fonctions étaient payantes.
J’aurais pu utiliser l’un des nombreux générateurs déjà disponibles, mais j’ai préféré créer mon propre outil. Cela me permettait de répondre à mon besoin tout en travaillant davantage avec JavaScript vanilla, sans utiliser Angular ou Vue pour gérer l’interface.
Le projet a ensuite évolué pour devenir un outil public. L’objectif était de proposer un générateur gratuit, utilisable immédiatement et suffisamment complet pour ne pas se limiter à une simple URL.
Contenus
Plusieurs types de contenus dans un même générateur
Chaque choix adapte les champs affichés dans le formulaire. L’aperçu est mis à jour directement pendant la saisie, sans avoir à relancer la génération.
URL
Ouvrir un site ou une page
Texte
Afficher un contenu libre
Préparer un message
Téléphone
Composer un numéro
SMS
Préparer un SMS
Wi-Fi
Partager les informations d’un réseau
Une fois le QR code terminé, il peut être téléchargé en PNG pour une utilisation courante ou en SVG pour conserver une image nette lors d’une impression ou d’un agrandissement.
Personnalisation
Personnaliser le QR code sans compliquer son utilisation
Je ne voulais pas limiter Qrela à la génération d’un carré noir et blanc. L’outil propose plusieurs réglages pour adapter le résultat à un site, une affiche ou un document.
Il est possible de modifier la taille, la marge, le style des points, la forme des coins et les couleurs. Qrela prend également en charge les dégradés, les fonds transparents et l’ajout d’une image ou d’un logo au centre.
J’ai ajouté plusieurs presets pour obtenir rapidement un style classique, sombre, coloré ou avec un contraste renforcé. Les réglages plus précis restent disponibles pour les personnes qui souhaitent créer leur propre apparence.
La personnalisation doit néanmoins conserver un QR code lisible. L’interface explique donc le rôle de la marge, du contraste et du niveau de correction d’erreur.
Confidentialité
Une génération locale, sans compte
Qrela fonctionne entièrement dans le navigateur. Le texte, le mot de passe Wi-Fi ou toute autre information saisie n’est pas envoyé à un serveur pour produire l’image.
Aucune inscription
Pas de compte utilisateur, de tableau de bord ni de stockage des QR codes générés.
Données conservées localement
Le contenu est transformé en QR code directement dans le navigateur.
Aucune limite de scans
Le lien n’est pas redirigé et Qrela ne suit pas le nombre d’utilisations.
À savoir : les QR codes créés sont statiques. Une fois téléchargés, leur contenu ne peut plus être modifié. Pour changer une adresse ou un texte, il faut en générer un nouveau.
Développement
Construire l’interface en JavaScript vanilla
J’ai volontairement développé Qrela en JavaScript vanilla avec Vite. Ce choix m’a permis de travailler directement sur la gestion des événements, l’état de l’interface et la mise à jour du QR code, sans m’appuyer sur le système de composants d’un framework.
La bibliothèque qr-code-styling prend en charge la génération et la personnalisation du QR code. Tailwind CSS permet de conserver une présentation cohérente sur ordinateur comme sur mobile.
Cette organisation était importante, car l’application possède de nombreux réglages qui doivent rester synchronisés. Une modification de couleur, de contenu ou de taille doit immédiatement être visible dans l’aperçu sans provoquer une régénération inutile à chaque frappe.
Génération et export
Création du QR code et téléchargement en PNG ou SVG.
Gestion de l’interface
Événements du formulaire et mise à jour de l’aperçu.
État de l’application
Synchronisation du contenu et des réglages visuels.
Validation et presets
Contrôle des données et styles prêts à utiliser.
Mise en ligne
Un outil déployé et mis à jour automatiquement
Qrela est construit avec Vite puis servi par Nginx dans un conteneur Docker. Le conteneur rejoint le réseau utilisé par Caddy, qui rend ensuite l’application accessible depuis son sous-domaine.
Le déploiement est automatisé avec GitHub Actions. Lorsqu’une modification est envoyée sur la branche principale, le workflow se connecte à mon VPS, récupère la nouvelle version du dépôt et reconstruit le conteneur.
Cette partie du projet m’a permis d’aller au-delà de la création de l’interface. Qrela est un véritable outil public que je peux corriger et faire évoluer sans effectuer manuellement toutes les étapes du déploiement.
Bilan
Ce que je retiens de Qrela
Qrela m’a permis de revenir aux bases du développement front-end en construisant une interface dynamique avec JavaScript vanilla.
J’ai travaillé sur la transformation de plusieurs types de données, la synchronisation d’un formulaire avec un aperçu en temps réel, la personnalisation d’un rendu graphique et l’export dans plusieurs formats.
Le projet m’a également appris à réfléchir à ce qui se passe après le développement : confidentialité des données, pages d’aide, référencement, déploiement et maintenance.
Aujourd’hui, Qrela est disponible gratuitement et peut être utilisé sans créer de compte. Il répond toujours au besoin qui m’avait poussé à le développer, tout en étant accessible à d’autres personnes.
À vous de créer
Créer votre QR code avec Qrela
L’outil est disponible gratuitement, sans inscription et directement depuis votre navigateur.