Context
The client wanted a free, ad-free quiz product people would actually finish — not a banner-stuffed trivia clone. That meant a clean play loop on phones and tablets, a real question catalogue, and a backend that could serve topics and scores without slowing the client down.
Open Trivia is the end-to-end mobile product I designed and built for that brief: Flutter clients on iOS and Android, Laravel APIs, and PostgreSQL for the question and session data.
Overview
I owned client and server: topic browsing, timed question play, results, and answer verification — plus the REST contract that keeps Flutter and Laravel in sync. The UX is intentionally simple: start → pick a topic → answer under a countdown → see score → review mistakes.
The visual system is high-contrast and brand-forward (magenta / charcoal / white) with wave transitions between sections — readable on small screens and consistent across the full session flow. Copy surfaces in both English and French (Retour, Réponse:), reflecting a bilingual audience.
What shipped
- Start experience: branded splash with a single clear CTA (“Tap to start”)
- Topic library: two-column catalogue across general knowledge, books, film, music, TV, video games, board games, science & nature, computers, mathematics, and more
- Timed play: category header, question index, circular countdown, and four-option multiple choice
- Results summary: question count, score %, correct / incorrect split, with paths to go back or verify answers
- Answer review: per-question cards with green/red feedback and the correct answer when the player missed
- Ad-free consumer model: uninterrupted sessions by design — no interstitial clutter in the play path
- Cross-platform delivery: one Flutter codebase for phones and tablets; Laravel + PostgreSQL for APIs and persistence
Stack & craft
Flutter / Dart for the multiplatform client; Laravel (PHP) for REST APIs; PostgreSQL for durable storage. The engineering focus was reliable client–server sync (session state, scoring, review payloads) and consistent layout across device sizes and orientations.
Building an ad-free quiz sounds light until you own the whole loop: content model, timed interaction, results, localization strings, and an API that stays fast when people hammer “next question.”
Outcome
The client received a shippable consumer product — free to play, ad-free by principle, and coherent from splash through answer review. It is a clear example of full-stack ownership on a mobile client product: product IA, UI polish, and backend delivery in one pass.
