>_ DevTrendsfr

Langue

Accueil

Langages

Sections

Frontend Backend Mobile DevOps AI / ML GameDev Blockchain Embarqué Sécurité
TypeScript

Comment arrêter de payer pour les services en ligne de génération de codes QR basiques

Chaque fois qu'un designer ou un maquettiste a besoin d'un code QR net pour une landing page ou des supports d'impression, la même quête commence. Vous ouvrez le premier générateur trouvé dans une recherche, vous passez cinq minutes à ajuster les couleurs, vous téléchargez un logo, vous cliquez sur le bouton de téléchargement, et soudain le site exige une inscription, un abonnement payant, ou génère un code dynamique qui redirige via leurs serveurs lents. Ça vous parle ?

J'ai récemment découvert un projet open-source appelé mini-qr par un développeur connu sous le nom de lyqht. C'est une application web légère qui fait exactement ce que vous attendez : elle génère rapidement de magnifiques codes vectoriels sans filigranes, traceurs ni abonnements.

Pourquoi ce projet est utile en pratique

La plupart des générateurs open-source sortent des carrés ennuyeux noir et blanc dans un format basique. Mini QR va plus loin et propose un éditeur de style visuel avec un contrôle approprié du résultat.

Voici ce que cet outil peut faire :

  • Styliser les modules et les cadres. Vous pouvez changer la forme des points, les motifs de repérage (marqueurs d'angle), arrondir les coins et configurer le cadre extérieur avec du texte personnalisé.
  • Insérer des logos au centre. L'application gère automatiquement le niveau de correction d'erreur afin que les scanners continuent de lire le code de manière fiable même avec le centre couvert.
  • Des modèles de données pour différentes tâches. Pas besoin d'assembler manuellement des chaînes brutes comme WIFI:S:MyNet;T:WPA;P:secret;;. L'interface dispose de formulaires prêts à l'emploi pour les identifiants Wi-Fi, les contacts vCard, les événements de calendrier, les géolocalisations, les liens, et même les paiements QR EPC (SEPA).
  • Exporter dans n'importe quel format. Le résultat est livré en SVG propre pour l'impression, en PNG/JPG raster, ou en caractères ASCII/Unicode directement dans le terminal.

Le export par lot mérite une mention spéciale. Vous pouvez fournir à l'application un tableau CSV avec une liste de liens ou de contacts, et elle générera tout un lot d'images stylisées de manière cohérente dans une archive. Pour des badges de conférence ou des étiquettes d'inventaire dans un entrepôt, cela fait gagner quelques heures de travail fastidieux.

Scanner intégré et traitement local

En plus du générateur, l'application inclut un scanner. Il fonctionne directement via le flux WebRTC depuis une webcam ou analyse une image téléchargée.

Si le code contient des données structurées (par exemple, un mot de passe Wi-Fi ou un contact), le scanner reconnaît le type et affiche un bouton d'action rapide. Il n'y a pas de requêtes vers des backends tiers ici : tout l'analyse et le rendu se font strictement côté client dans le navigateur. Vos données ne vont nulle part.

L'application supporte également les PWA, vous pouvez donc l'installer comme une icône séparée sur votre bureau ou téléphone et l'utiliser sans connexion réseau constante.

Sous le capot

La pile technique du projet semble moderne et propre :

  • Vue 3 avec TypeScript
  • Construit avec Vite
  • Composants basés sur shadcn-vue et Tailwind CSS
  • Localisation dans plus de 30 langues via Crowdin
  • Tests de composants via Storybook

Les auteurs ont pris l'accessibilité au sérieux : l'interface respecte les exigences de base WCAG A, supporte les thèmes de couleur clair, sombre et système, et gère correctement les caractères UTF-8 complexes (écriture arabe, caractères CJK, emoji).

La bibliothèque de rendu interne peut être testée séparément directement dans le Storybook public du projet, ce qui facilite l'intégration de composants similaires dans vos propres services frontend.

L'exécuter en local

Si vous ne voulez pas utiliser la démo publique sur Vercel ou souhaitez déployer le générateur dans le réseau interne de votre entreprise avec vos propres préréglages de marque, le projet est facile à mettre en place localement.

Clonez le dépôt et installez les dépendances :

git clone https://github.com/lyqht/mini-qr.git
cd mini-qr
pnpm install
pnpm dev

Pour la production, le projet est packagé dans un conteneur Docker ou compilé dans un dossier statique avec la commande pnpm build, après quoi il peut être servi par n'importe quel serveur web comme Nginx ou Caddy.

Le projet est sous licence GPL-3.0. Cela signifie que le code est ouvert aux forks et à l'auto-hébergement, mais vous ne pourrez pas fermer les sources lors de modifications.

Qui trouvera cela utile

Mini QR répond à deux besoins à la fois.

Premièrement, c'est un outil de travail pratique pour les tâches quotidiennes : imprimer un mot de passe Wi-Fi invité pour la cuisine du bureau, préparer des codes SVG pour une présentation, ou formater des liens sur des badges de participants à une conférence.

Deuxièmement, c'est un bon exemple d'application Vue 3 et Tailwind de qualité. Vous pouvez y voir comment organiser des workflows Storybook pour des composants graphiques spécialisés, comment configurer des exports de fichiers pratiques, et comment automatiser les aperçus pour les pull requests.

Si vous traitez régulièrement des codes QR, consultez la démo ou marquez le projet. Il résout la tâche proprement et sans bruit supplémentaire.

Projets similaires