Architecting SabiNaija: High-Throughput Trivia with Offline Fallback

When we set out to build SabiNaija, our Nigerian cultural trivia and trivia dueling platform, we set a strict engineering baseline: a commuter riding through a network dead-zone on the Third Mainland Bridge in Lagos should be able to launch the app, answer ten rounds of trivia, earn streak achievements, and never see a loading spinner fail.

In standard cloud-first web development, every tap triggers an API request to a remote server. The client waits for DNS resolution, TLS negotiation, database querying, and payload delivery. Over reliable fiber, this takes 60–120 milliseconds. But over crowded 3G or erratic 4G mobile connections across West African cell towers, latency spikes to 2,000–5,000 milliseconds. Packet loss often causes requests to fail entirely.

To solve this, we inverted the traditional architecture. Instead of treating the server as the primary brain and the browser as a dumb terminal, we built SabiNaija as a Local-First, Edge-Reconciled Progressive Web Engine.

Core Architectural Takeaways

Local Question Vaults: Sharded JSON question bundles stored inside browser IndexedDB, version-stamped with cryptographic hashes.
Optimistic State Evaluation: Instant answer verification on the device, eliminating network round-trips from the core gameplay loop.
Edge Leaderboard Aggregation: Cloudflare Workers reconciling asynchronous streak mutations at edge nodes nearest to the user.

1. Decoupling Gameplay from Network Round-Trips

The cardinal sin of trivia and casual gaming apps is network blocking. When a player taps an answer, they expect immediate sensory feedback — a crisp haptic tap, color transition, and score update. If the app suspends the UI waiting for a backend confirmation, the psychological rhythm is shattered.

In SabiNaija, the verification logic does not live exclusively on a remote server. When a user opens the application, our Service Worker checks the current cache state. If a bundle of daily questions has already been prefetched, the game runs completely out of memory and client storage.

// Service Worker Cache-First Route for Daily Trivia Batches
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.pathname.startsWith('/api/deck/daily')) {
    event.respondWith(
      caches.open('sabi-decks-v1').then(async (cache) => {
        const cachedResponse = await cache.match(event.request);
        if (cachedResponse) return cachedResponse;
        
        try {
          const networkResponse = await fetch(event.request);
          if (networkResponse.status === 200) {
            cache.put(event.request, networkResponse.clone());
          }
          return networkResponse;
        } catch (err) {
          return new Response(JSON.stringify({ offline: true, deck: fallbackLocalDeck }), {
            headers: { 'Content-Type': 'application/json' }
          });
        }
      })
    );
  }
});

2. Managing Client Storage with IndexedDB & Delta Sync

While `localStorage` is convenient, its 5MB storage limit and synchronous blocking behavior make it dangerous for rich trivia apps containing thousands of verified cultural entries, slang dictionaries, and audio clips. We implemented an asynchronous IndexedDB wrapper with a delta-synchronization protocol.

Each question payload contains:

A unique 64-bit identifier.
The 10 cultural category tags (e.g., Slang, Textiles, Nollywood).
A salted cryptographic hash of the correct answer index to prevent casual client inspection in browser dev tools.
A rich historical explanation paragraph displayed immediately after the user submits their guess.

Whenever connectivity is detected (via the browser `navigator.onLine` event and passive ping probes), the sync engine sends a lightweight payload consisting solely of question IDs answered while offline, time elapsed, and cryptographic completion tokens.

"An offline-first application is not one that merely tolerates disconnections; it is one that assumes disconnection as the natural default state."

3. Mitigating Anti-Cheat without Latency Penalties

One primary concern with client-side trivia verification is cheating: what prevents a tech-savvy user from inspecting network requests or manipulating their local score before syncing? In SabiNaija, we tackled this through time-bound challenge tokens and tamper-evident message signatures.

When an offline session begins, the device initializes a cryptographically signed HMAC token containing a millisecond timestamp. Each answer recorded appends a nonce and time delta. If a user submits a 10-question round completed in 300 milliseconds, the Cloudflare Worker drops the score during ingestion without impacting the local user experience.

4. Lessons for Modern Web Product Builders

Engineering SabiNaija reinforced three essential truths for developing software in high-growth, high-latency regions:

Bandwidth is an expense; treat it with respect. By compressing question decks and caching static assets aggressively, we reduced the average session footprint from 3.2MB down to less than 180KB.
Zero-latency interaction creates emotional loyalty. When users realize an app never fails or stutters even in basement car parks or remote highways, their trust in the product surges.
The web platform is more powerful than ever. With modern Web APIs (Service Workers, IndexedDB, CacheStorage, Web Crypto), there is rarely a need for heavyweight native runtimes to achieve native-level fluidity.

Written by Anietie Nkakat

Founder & Principal Engineer at AEN Creative. Passionate about building resilient distributed systems, edge architectures, and culturally resonant digital products.