Générateur de Tickets de Conférence
L'ambition derrière la création.
Ce projet va bien au-delà d'une simple intégration de maquette. L'objectif était de créer une expérience d'onboarding fluide et professionnelle pour un événement tech. L'utilisateur saisit ses informations, télécharge sa photo de profil via une zone de drag-and-drop intuitive, et obtient un ticket généré dynamiquement. Tout le processus se déroule côté client, sans rechargement de page, avec une attention particulière portée sur l'accessibilité (a11y) et la gestion des états de validation.
Le Challenge
Le principal défi technique se situait au niveau de la gestion de l'upload d'image côté client. Il ne s'agissait pas d'un simple champ de texte : il fallait gérer les événements de drag-and-drop, lire et convertir l'image à la volée via l'API FileReader pour en afficher un aperçu, et appliquer des règles de validation strictes (fichiers JPG/PNG uniquement, taille maximale de 500 Ko). Le tout en s'assurant que les messages d'erreurs soient correctement annoncés par les lecteurs d'écran.
La Solution
Pour éviter le code 'spaghetti', j'ai opté pour une approche orientée objet (OOP) en Vanilla JavaScript. J'ai découpé la logique en classes indépendantes respectant le principe de responsabilité unique (SOLID) : un gestionnaire dédié à l'avatar, un validateur pour le formulaire (Regex, champs requis), et un générateur pour l'affichage final du ticket. Côté intégration, l'interface repose sur les CSS Custom Properties et Flexbox pour garantir un rendu 'pixel-perfect' et 100% responsive.
Aperçu de l'interface utilisateur
