🎯 Pourquoi ce projet ?
En tant que personne déficiente visuelle, j'ai toujours été confronté à des applications mobiles et web qui ne prenaient pas en compte les besoins d'accessibilité. L'application officielle Ginko de Besançon, bien que fonctionnelle, présentait des lacunes importantes pour les utilisateurs de synthèse vocale et ceux ayant des difficultés visuelles.
C'est de cette frustration qu'est née Ginku : une application web pensée dès le départ pour être accessible à tous. Mon objectif était simple : permettre à n'importe qui de consulter les horaires de bus et de tramway de manière fluide, que ce soit avec ou sans assistance technologique.
💡 Le saviez-vous ? En France, environ 1,7 million de personnes sont atteintes d'un trouble de la vision. L'accessibilité numérique n'est pas un luxe, c'est une nécessité.
✨ Fonctionnalités principales
Ginku a été conçue pour offrir une expérience utilisateur simplifiée tout en restant complète. Voici les principales fonctionnalités disponibles :
Horaires en temps réel
Consultez les prochains passages de bus et tramway avec une mise à jour automatique des données.
Toutes les lignes
Accédez à l'ensemble des lignes du réseau Ginko : bus, tramway et lignes spéciales.
Infos trafic
Restez informé des perturbations, travaux et modifications de parcours en cours.
Lignes favorites
Enregistrez vos lignes préférées pour y accéder rapidement depuis la page d'accueil.
Recherche rapide
Trouvez une ligne ou un arrêt en quelques caractères grâce à la barre de recherche intelligente.
Compatible synthèse vocale
Navigation entièrement accessible aux lecteurs d'écran (VoiceOver, NVDA, JAWS).
🛠️ Stack technique
Pour développer Ginku, j'ai choisi une stack moderne et performante qui me permettait d'itérer rapidement tout en garantissant une excellente expérience utilisateur.
Frontend
Vue.js 3 avec la Composition API offre une excellente réactivité et une structure de code claire. Couplé à Vite pour un rechargement instantané en développement, le workflow est extrêmement fluide. Tailwind CSS permet de créer rapidement une interface cohérente et responsive.
Backend
Le backend Node.js avec Express sert de proxy entre le frontend et l'API officielle Ginko. Ce choix architectural permet de :
- Sécuriser la clé API : elle n'est jamais exposée côté client
- Mettre en cache les réponses : réduction des appels API et amélioration des performances
- Transformer les données : adaptation du format pour le frontend
Déploiement
L'application est containerisée avec Docker pour garantir un déploiement reproductible. Caddy sert de serveur web pour les fichiers statiques et de reverse proxy pour router les requêtes vers le bon service.
🏗️ Architecture du projet
Ginku suit une architecture classique mais efficace, séparant clairement le frontend du backend :
Flux de données :
- L'utilisateur accède à l'application via son navigateur
- Caddy sert les fichiers statiques Vue.js (SPA)
- Le frontend effectue des requêtes vers
/api/* - Caddy route ces requêtes vers le backend Node.js
- Le backend ajoute la clé API et interroge l'API Ginko officielle
- Les données sont mises en cache (TTL ~60s) puis renvoyées au frontend
Structure des fichiers
ginku/
├── front/ # SPA Vue 3 (Vite + Tailwind)
│ ├── src/
│ │ ├── components/
│ │ ├── views/
│ │ └── router/
│ └── .env.development
├── backend/ # API Express (proxy)
│ ├── routes/
│ ├── middleware/
│ └── .env
├── docker-compose.yml
├── Caddyfile
└── pnpm-workspace.yaml
🧗 Défis rencontrés
Ce projet m'a permis de surmonter plusieurs défis techniques et de développer de nouvelles compétences :
1. Accessibilité ARIA
Rendre une application véritablement accessible ne se limite pas à ajouter quelques attributs alt.
J'ai dû apprendre les bonnes pratiques ARIA, structurer le HTML sémantiquement, gérer le focus clavier,
et tester régulièrement avec des lecteurs d'écran comme NVDA et VoiceOver.
2. Gestion du cache
Trouver le bon équilibre entre fraîcheur des données et performance a nécessité plusieurs itérations. Un TTL de 60 secondes s'est avéré optimal pour les horaires en temps réel.
3. Configuration Docker multi-services
Orchestrer frontend, backend et reverse proxy dans Docker Compose tout en gérant les réseaux et les variables d'environnement a été formateur. La documentation de chaque étape dans le README facilite maintenant le déploiement.
💪 Ce que j'ai appris : L'accessibilité doit être pensée dès la conception, pas ajoutée après coup. Chaque décision d'UI a un impact sur l'expérience des utilisateurs de technologies d'assistance.
🚀 Essayez Ginku
L'application est disponible en ligne et le code source est ouvert. N'hésitez pas à l'essayer et à contribuer !