🎯 Objectif du projet
Qrela est un générateur de QR code conçu pour rester gratuit, sans inscription, sans abonnement et entièrement personnalisable. Je voulais proposer un outil utile au quotidien avec une prise en main immédiate, sans friction et sans compte à créer.
Ce projet a aussi une dimension plus pragmatique : tester un modèle simple avec Google AdSense pour aider à financer l'infrastructure (notamment le VPS) qui héberge mes outils web.
Contrainte produit : garder une expérience claire et rapide, même avec la monétisation, tout en conservant la promesse "gratuit et sans compte".
✨ Ce que Qrela permet
L'interface couvre les cas d'usage principaux d'un QR code statique et donne un vrai contrôle sur le rendu final.
Types de contenu
URL, texte, email, téléphone, SMS et Wi‑Fi, avec validation des champs.
Export PNG / SVG
Téléchargement immédiat en PNG pour le web ou SVG pour l'impression.
Personnalisation avancée
Taille, marge, niveau de correction d'erreur, styles de points et couleurs.
Logo et dégradé
Ajout d'un logo central, options de contraste et presets visuels rapides.
Confidentialité
Génération locale dans le navigateur, sans envoi du contenu saisi au serveur.
QR statiques
Les QR générés n'expirent pas et ne dépendent pas d'un compteur de scans côté Qrela.
⚙️ Stack technique et architecture
Qrela est développé avec une stack front-end légère : Vite.js, JavaScript vanilla (modules ES), Tailwind CSS, et la librairie qr-code-styling pour la génération.
Flux principal
Ce qui est notable :
- Routes dédiées SEO (`/faq`, `/privacy`, `/about`) gérées dans la config Vite.
- Pages statiques générées avec canonical, OpenGraph et données structurées.
- UI modulaire dans `src/ui/` et logique QR dans `src/qr/`.
Structure du dépôt
qrela/
├── index.html
├── pages/
│ ├── faq.html
│ ├── privacy.html
│ ├── about.html
│ └── sitemap.xml / robots.txt
├── src/
│ ├── qr/ # génération, payload, export
│ ├── ui/ # bindings, rendu, pubs
│ └── utils/ # validateurs, presets, couleurs
├── vite.config.js
└── package.json
🔎 Travail SEO et pages de confiance
Sur ce projet, j'ai volontairement mis l'accent sur le SEO : pages dédiées, contenu explicatif, métadonnées complètes et maillage interne propre.
- Pages dédiées : `/faq`, `/privacy`, `/about` pour répondre aux questions et rassurer.
- Meta SEO : titres, descriptions, keywords, OpenGraph, Twitter cards.
- Données structurées : `WebApplication` sur l'accueil et `FAQPage` sur la FAQ.
- Indexation : `robots.txt` + `sitemap.xml` versionnés dans le projet.
Point produit important : clarifier tôt le message "gratuit, sans inscription, génération locale" améliore la confiance utilisateur et réduit la friction.
💸 Monétisation et exploitation
Qrela intègre des emplacements publicitaires AdSense sur l'accueil et les pages annexes. Le but n'est pas de verrouiller des fonctionnalités, mais de financer l'hébergement et le domaine tout en gardant l'outil accessible gratuitement.
Côté produit, le compromis est clair : préserver une navigation propre et rapide, tout en ajoutant une source de revenus potentielle pour soutenir les coûts techniques du VPS qui héberge mes services.
🧠 Ce que ce projet m'a appris
Qrela m'a obligé à gérer trois axes en même temps : qualité du scan, visibilité SEO et équilibre entre UX et monétisation.
1. Fiabilité du QR malgré la personnalisation
Plus on personnalise (logo, couleurs, dégradés), plus on peut casser la lisibilité. J'ai donc insisté sur les réglages de contraste et les niveaux de correction d'erreur pour garder un résultat robuste.
2. SEO utile sur un outil simple
Même sur un petit produit, un bon socle SEO (FAQ, privacy, about, données structurées, sitemap) fait la différence pour la compréhension du site par les moteurs de recherche.
3. Infrastructure et pragmatisme
Travailler sur un produit qui doit aussi participer au financement de son infra impose de prioriser ce qui apporte de la valeur immédiatement : performances, clarté de l'interface et maintenance simple.
🚀 Tester Qrela
Le projet est en ligne et le code source est public. Le générateur est accessible directement en démo, avec l'implémentation complète sur GitHub.