React App : 🇹🇭 Thai Keyboard Trainer
Sabai Thai (สบาย) : suite complète pour apprendre le thaï — phonétique, tons, clavier, vocabulaire, grammaire, gamification et tuteur IA. PWA installable, offline, sync multi-appareils.
Le projet a pas mal évolué depuis la première version. Ce n’était au départ qu’un entraîneur de clavier thaï : c’est aujourd’hui une app complète, Sabai Thai (สบาย), avec phonétique, tons, vocabulaire, grammaire, gamification et tuteur IA — le tout installable en PWA.
Nouveau lien :
👉 https://thai.domainelibre.com/
Le constat de départ
Apprendre le thaï, c’est déjà un défi. Y ajouter un clavier totalement différent du QWERTY/AZERTY, et beaucoup abandonnent avant de taper une phrase correcte. La plupart des outils se concentrent sur la lecture ou le vocabulaire — très peu entraînent la frappe réelle, encore moins en lien avec la disposition physique du clavier.
Ce que c’est devenu
Une suite d’apprentissage gamifiée organisée en 5 sections : Home, Typing, Sounds, Words, More. Elle parle le thaï à voix haute, synchronise la progression entre appareils, et peut appeler un tuteur IA pour expliquer les erreurs. Toujours accessible en une ou deux tapes.
Les 4 sections d’apprentissage
🔤 Sounds — Phonétique & tons
- Voyelles thaïes, positions, paires courtes/longues, illustrées
- 44 consonnes triées par classe (haute, moyenne, basse)
- Arbre de décision interactif pour les règles de ton + grille classe × condition
- Classification des syllabes vivantes/mortes
- Carrousel de l’alphabet + mode lecture
⌨️ Typing — Clavier
- Leçons sur la disposition Kedmanee, rangée par rangée
- Clavier visuel avec surbrillance en temps réel de la touche à presser
- Challenge de frappe chronométré (10 mots)
- Mode exploration libre + dictée
- Clavier virtuel à l’écran, support mobile complet
📚 Words — Vocabulaire
- 1 300+ mots répartis en 25+ catégories
- Flashcards, phrases, quiz de lecture
- Répétition espacée (SRS) — les mots reviennent au bon moment
- Révision rapide des leçons récentes
🔢 More — Grammaire & extras
- Classificateurs (ลักษณนาม) — le système de mots-compteurs thaï
- L’heure à la thaïe (ตี, โมง, ทุ่ม)
- XP, niveaux, streaks quotidiens, missions et badges
Gamification & comptes
Jouable instantanément en invité, sans mur de connexion — une session est créée automatiquement. Un compte optionnel permet de synchroniser la progression entre appareils, avec classement, abonnements et fil d’activité. XP, niveaux, streaks, cœurs, missions quotidiennes, badges, confettis à chaque level-up.
Tuteur IA (optionnel)
Un endpoint dédié explique pourquoi une réponse était fausse, et génère (avec mise en cache) des phrases d’exemple. Basé sur l’API OpenAI — l’app fonctionne normalement sans clé configurée, seules les fonctions IA se désactivent proprement.
Architecture
Le front reste une SPA React 19 + Vite, servie en statique par nginx. Nouveauté : un petit backend Node/Express (server/) gère l’authentification, la sync de progression, le social et les endpoints IA — accessible uniquement via le reverse proxy nginx, jamais exposé directement.
Déploiement
docker-compose monte toute la stack : nginx sert le front buildé et reverse-proxy /api/ vers le conteneur Node. Le dossier server/data est monté en volume pour persister comptes, progression et cache IA entre les redémarrages.
Le déploiement continu tourne sur un runner GitHub Actions auto-hébergé : à chaque push sur main, le runner pull le code, rebuild et relance les conteneurs. Le runner ouvre une connexion sortante vers GitHub — aucun port entrant à ouvrir sur pfSense, aucun forward WAN. Un Cloudflare Tunnel peut exposer l’app sans dépendre d’un accès SSH entrant.
Stack technique
- React 19 + Vite 7 — frontend
- Node.js / Express — API backend
- API OpenAI pour les explications d’erreurs et exemples générés
- nginx — hébergement statique + reverse proxy
- Docker / Docker Compose pour le déploiement
- PWA installable, fonctionne hors ligne
- CSS vanilla, pas de framework UI
Licence MIT. Le code est structuré pour rester lisible même côté data : le lexique (1 300+ mots), les règles de ton, les classificateurs et les leçons de clavier vivent dans des fichiers JSON/JS séparés, avec un guide dédié pour tout LLM appelé à générer de nouveaux exercices.
👉 Tester l’outil :
https://thai.domainelibre.com/
