AutoÉdouard Pro est une plateforme complète de préparation au code de la route conçue pour une auto-école : le site qui présente l’établissement, l’espace où l’élève s’entraîne et passe ses examens blancs, et les outils internes qui font vivre la banque de questions. L’interface entière a été dessinée et développée, du parcours de vente jusqu’au back-office des moniteurs.
Le parti pris de conception
L’élève a entre 15 et 20 ans, révise sur son téléphone, et compare la plateforme à des applications gratuites qu’il a déjà installées. Tout se joue donc sur l’écran de série : la question et son visuel occupent le haut de l’écran, les propositions de réponse sont de grandes cartes cliquables, et le compte à rebours reste lisible sans jamais devenir agressif. Aucune gamification tapageuse — le sérieux est ce qui distingue l’outil de son école d’un quiz publicitaire.
Second parti pris, moins visible mais structurant : la couleur ne porte jamais seule l’information. Une réponse juste ou fausse se lit à l’icône et au mot écrit autant qu’au vert ou au rouge, et le chronomètre est désactivable en mode entraînement. Un quiz chronométré rempli d’images est exactement le type d’interface qui échoue à un contrôle d’accessibilité.
Livré
- Site vitrine de l’auto-école : accueil, présentation de l’établissement, entraînement, tarifs
- Écran de série chronométrée, avec progression, visuel de question et propositions multiples
- Suivi de progression de l’élève : taux de réussite, questions vues, maîtrise thème par thème sur les dix thèmes du programme officiel
- Espace professionnel avec back-office de suivi des élèves
- Studio de production du contenu : rédaction des questions et pilotage de la banque
- Pages de tarifs et dispositions légales
- Système de design complet : palette, typographie, composants, zones tactiles, règles de contraste
Technologies utilisées
- Vue 3 en application monopage, routage côté navigateur
- Tailwind CSS, conception mobile d’abord
- Build Vite, ressources versionnées et compressées
- Accessibilité : contraste minimum 4,5:1, zones tactiles de 48 px, information jamais portée par la seule couleur
- Architecture cible en production : Next.js et PostgreSQL, chronométrage arbitré côté serveur pour que le compte à rebours affiché ne soit qu’un miroir
- Hébergement Apache / Virtualmin, HTTPS
