All projects

Web app2026

Orient App

A website where students in Togo can explore every recognized post-secondary program, school and scholarship in one place, with an orientation test that suggests the ones that fit their profile.

Front-end integration - built the public client interface, translating the design into a pixel-perfect Nuxt front-end wired to the API

Orient App homepage on desktop: a dark green hero with the serif heading 'Trouve ta voie apres le bac.', a 'RENTREE 2026-2027' tag, the buttons 'Faire le test d'orientation' and 'Parcourir les etablissements', a search field, a counters row (438 formations, 131 etablissements referencies, 0 bourses actives), and the start of a study-domain grid.
Orient App homepage on desktop: a dark green hero with the serif heading 'Trouve ta voie apres le bac.', a 'RENTREE 2026-2027' tag, the buttons 'Faire le test d'orientation' and 'Parcourir les etablissements', a search field, a counters row (438 formations, 131 etablissements referencies, 0 bourses actives), and the start of a study-domain grid.

Orient App brings together Togo's post-secondary catalogue: hundreds of programs, the schools that deliver them, their fees and admission requirements, plus scholarships and competitive-exam dates. Students and their parents browse it freely, without an account, and can take an 11-question orientation test that ranks programs against their exam track, grades, interests, city and budget. It is built by a Lomé team as the first product of the EduConnect ecosystem and is in production, with a public catalogue of 438 programs across 131 institutions. On this project I was responsible for the public-facing client: I implemented the interface from the design, matched it to the pixel, and wired every screen to the API.

The problem

A student finishing secondary school in Togo has no single place to see what studies are actually open to them. The information is spread across word of mouth, ministry lists and school visits, it is often incomplete or out of date, and nothing connects a student's own profile to it. Choices about programs, schools and fees end up being made half-blind, under time pressure right after exam results.

The approach

The catalogue, the matching logic and the admin tools were handled by the rest of the team on a Laravel API; my part was the interface students and parents actually use. I built it as a Nuxt front-end and reproduced the design to the pixel: the catalogue and its filters, the school and program pages with their fee tables, the orientation test, and the public marketing pages. Every screen reads the API through TanStack Query with typed, validated responses, and the layout is built mobile-first so it holds up on a low-end Android phone and a weak connection.

The result

  • The public site is in production at orientapp.w3frame.com, with a catalogue of 438 programs across 131 institutions that anyone can browse without an account.
  • Students and parents can filter the whole catalogue by domain, city, cycle and budget, open a school and read its fee grid, and take the orientation test, all from a phone.
  • Real students are using it; a WhatsApp group handles support. No usage figures can be shared.

Key features

  • One public catalogue for post-secondary study in Togo: programs, schools, scholarships, administrative documents and competitive-exam dates, all browsable without an account.
  • Filtering by study domain, city, cycle and budget, with the list of disciplines adapting to the domain you pick.
  • School pages with a fee grid broken down by faculty or institute, cycle and year of study.
  • An 11-question orientation test, doable as a guest, that ranks programs by how well they fit the student's exam track, grades, interests, location and budget.
  • Preview of results for guests, with full results and matched scholarships unlocked after signing up.
  • Each record on its own address, so a program or school page can be found from a search engine.
  • Built mobile-first for low-end Android phones and unstable connections.
  • Interface reproduced to the pixel from the shared design, consistent across every screen.

Stack

  • Nuxt
  • Vue 3
  • TypeScript
  • Nuxt UI
  • Tailwind CSS 4
  • TanStack Query
  • Zod
  • @nuxtjs/seo
  • PostHog
  • Laravel 12 (API)
  • PostgreSQL

Front-end integration - built the public client interface, translating the design into a pixel-perfect Nuxt front-end wired to the API — Internal product of W3 Frame (Lomé, Togo), first app of the EduConnect ecosystem (2026)

Next projectRevue Tɩ́ɩ́ŋá