dotcraft
Éditeur de QR codes stylisés dans le navigateur, utilisable sans compte.
- Objectif
- Créer des QR codes soignés et les conserver sans avoir à créer de compte : la bibliothèque vit dans le navigateur (localStorage et IndexedDB), et un compte gratuit facultatif la synchronise entre vos appareils.
- Résultat
- En production sur dotcraft.fr, utilisable sans compte, avec une synchronisation facultative entre appareils.
- Stack technique
- ReactTypeScriptViteDjangoDRFPostgreSQL
dotcraft est une application web React / TypeScript qui génère des QR codes directement dans le navigateur. Sans compte, la bibliothèque est enregistrée localement (localStorage et IndexedDB) et s’exporte dans un fichier ; avec un compte gratuit, elle est sauvegardée et synchronisée entre vos appareils grâce à une API Django / DRF. Le rendu des QR codes reste entièrement côté client.
Le contexte
Tout est parti d’un besoin simple : un QR code soigné, avec mon logo au centre. Les générateurs en ligne que j’ai trouvés étaient couverts de publicités, exigeaient un compte pour télécharger ou conserver ses codes, et produisaient souvent un QR code brut, sans options de style. Pour un outil qui peut tout faire dans le navigateur, cela faisait beaucoup de zones d’ombre sur ce que deviennent vos données.
Ce que j’ai construit
Vous partez d’une URL ou d’un texte, puis vous façonnez le résultat. Les modules peuvent être carrés, arrondis, en cercles ou en points ; les trois repères des coins peuvent être carrés, arrondis, circulaires ou en goutte, une forme dont un angle pointe vers le centre du code. Vous choisissez les couleurs, la marge, et pouvez placer un logo (PNG, JPG ou SVG) avec son fond, sa marge intérieure et ses coins arrondis. Avec un logo, la correction d’erreur passe automatiquement au niveau le plus élevé pour que le code reste lisible.
L’export se fait en PNG (512, 1024 ou 2048 pixels) ou en SVG autonome. Les QR codes s’organisent en projets et sous-dossiers, et sont enregistrés localement, dans le localStorage et l’IndexedDB du navigateur. Pour ne pas rester lié à un seul navigateur, la bibliothèque s’exporte dans un fichier que l’on réimporte ailleurs. Le compte reste facultatif : avec un compte gratuit, la bibliothèque est sauvegardée et synchronisée automatiquement entre vos appareils, et un mot de passe oublié se réinitialise par e-mail.
La stack et pourquoi
La toute première version était un script Python en ligne de commande, mon réflexe de développeur backend. Elle fonctionnait, mais un QR code est un objet visuel : modifier une couleur ou une forme en relançant une commande était bien trop lent. Je suis donc passé au web, avec Vite, React et TypeScript, et Claude Code m’a aidé à transformer le script en véritable éditeur en un après-midi.
Le QR code est généré à partir de sa matrice brute puis dessiné en SVG directement dans la page. Ce rendu sur mesure donne un contrôle total sur la forme des repères, y compris la goutte, et un export propre. La synchronisation des comptes s’appuie sur une API Django / Django REST Framework et une base PostgreSQL ; sur Vercel, un seul projet sert l’éditeur à la racine et l’API sous /api.
Où en est le projet
L’outil est en ligne sur dotcraft.fr et hébergé sur Vercel. Le code est open source sur GitHub, avec un README qui en décrit l’architecture : chacun peut vérifier ce que fait l’outil, s’en inspirer ou contribuer.