Orient App
Un site où les élèves du Togo explorent toutes les formations, écoles et bourses post-bac reconnues au même endroit, avec un test d'orientation qui leur suggère celles qui correspondent à leur profil.
Intégration front-end - réalisation de l'interface publique, traduction de la maquette en un front-end Nuxt au pixel près, branché sur l'API
Orient App réunit le catalogue post-bac du Togo : des centaines de formations, les établissements qui les proposent, leurs frais et conditions d'admission, ainsi que les bourses et les dates de concours. Les élèves et leurs parents le consultent librement, sans compte, et peuvent passer un test d'orientation de 11 questions qui classe les formations selon leur série, leurs notes, leurs intérêts, leur ville et leur budget. Développé par une équipe de Lomé comme première application de l'écosystème EduConnect, il est en production avec un catalogue public de 438 formations réparties sur 131 établissements. Sur ce projet, j'avais la charge de la partie publique côté client : j'ai implémenté l'interface à partir de la maquette, au pixel près, et relié chaque écran à l'API.
Le problème
Un élève qui termine le lycée au Togo n'a aucun endroit unique pour voir quelles études lui sont réellement ouvertes. L'information est éparpillée entre le bouche-à-oreille, les listes du ministère et les visites d'écoles, elle est souvent incomplète ou périmée, et rien ne la relie au profil de l'élève. Les choix de filière, d'établissement et de budget se font à moitié à l'aveugle, dans l'urgence des résultats du bac.
L’approche
Le catalogue, la logique de matching et les outils d'administration ont été portés par le reste de l'équipe sur une API Laravel ; ma partie, c'est l'interface que les élèves et les parents utilisent vraiment. Je l'ai construite en front-end Nuxt et j'ai reproduit la maquette au pixel : le catalogue et ses filtres, les fiches établissement et formation avec leurs grilles de frais, le test d'orientation, et les pages vitrine publiques. Chaque écran lit l'API via TanStack Query avec des réponses typées et validées, et la mise en page est pensée mobile d'abord pour tenir sur un téléphone Android bas de gamme et une connexion faible.
Le résultat
- Le site public est en production sur orientapp.w3frame.com, avec un catalogue de 438 formations sur 131 établissements que tout le monde peut consulter sans compte.
- Les élèves et les parents filtrent tout le catalogue par domaine, ville, cycle et budget, ouvrent un établissement et lisent sa grille de frais, et passent le test d'orientation, le tout depuis un téléphone.
- De vrais élèves l'utilisent ; un groupe WhatsApp assure le support. Aucun chiffre d'usage n'est communicable.
Fonctionnalités clés
- Un seul catalogue public des études post-bac au Togo : formations, établissements, bourses, documents administratifs et dates de concours, tout consultable sans compte.
- Filtrage par domaine d'études, ville, cycle et budget, avec la liste des disciplines qui s'adapte au domaine choisi.
- Fiches établissement avec une grille de frais détaillée par faculté ou institut, par cycle et par année d'étude.
- Un test d'orientation de 11 questions, faisable en invité, qui classe les formations selon la série, les notes, les intérêts, la ville et le budget de l'élève.
- Aperçu des résultats pour les invités, résultats complets et bourses correspondantes débloqués après inscription.
- Chaque fiche sur sa propre adresse, pour qu'une page formation ou établissement soit trouvable depuis un moteur de recherche.
- Conçu mobile d'abord pour les téléphones Android bas de gamme et les connexions instables.
- Interface reproduite au pixel depuis la maquette partagée, cohérente sur tous les écrans.
Stack
- Nuxt
- Vue 3
- TypeScript
- Nuxt UI
- Tailwind CSS 4
- TanStack Query
- Zod
- @nuxtjs/seo
- PostHog
- Laravel 12 (API)
- PostgreSQL
Intégration front-end - réalisation de l'interface publique, traduction de la maquette en un front-end Nuxt au pixel près, branché sur l'API — Produit interne de W3 Frame (Lomé, Togo), première application de l'écosystème EduConnect (2026)