Kelechi OkekeAbuja, Nigeria
Selected Work

(04)

adsVase Mobile

The native companion — reel editor, realtime chat and AI on the go.

Year
2025 — Now
Role
Frontend
Stack
Expo 55 · React Native · Reanimated 4 · TanStack Query
Status
Building

(01) Overview

adsVase Mobile is the platform's native companion — not a webview in a trench coat, but a full 67-screen Expo app with its own reel editor, realtime chat and the Adora AI assistant on board.

It's built on the newest of the stack — React 19 with the React Compiler enabled, typed expo-router routes, Reanimated 4 — with Zod guarding every byte that crosses the network.

(02) The Challenge

Mobile is where the platform gets judged: video-heavy feeds on mid-range phones and patchy networks, a creation flow that has to feel like a native editor, chat that reconnects gracefully — plus all the React Native bridge quirks nobody warns you about.

(03) Architecture — and why

  • React Compiler + typed routes, early

    Automatic memoization replaces hand-written useMemo ceremony, and typed expo-router routes turn broken links into compile errors — adopting both meant refactoring real code into compiler-safe forms.

  • Zod at every network boundary

    Strict schemas throw on auth and token payloads; loose schemas log-and-continue for domain data. Backend drift can't crash the app, but identity can never silently corrupt.

  • Zustand for the client, Query for the server

    Client state stays in tiny stores; server data lives in TanStack Query with the device's connectivity bridged into its online manager — a debounced offline banner instead of a broken screen.

  • Feature-colocated routing

    Every route folder owns its _components, _hooks and _utils — a feature is one directory, so it can be understood (or deleted) in one move.

  • Two backends, one app

    The main REST + WebSocket API and the separate Adora AI microservice each get their own client — the AI surface can evolve without touching the core API layer.

(04) Engineering Highlights

/01

A reel editor built from scratch

Draggable text and stickers over video — pan, tap and double-tap-to-edit composed as racing gestures, spring physics via Reanimated shared values, and a delete drop-zone. CapCut-style editing with no commercial SDK.

/02

Windowed hydration for ranked feeds

The recommender returns ranked IDs only — naive fetching means one request per item. A sliding window over parallel queries hydrates a few at a time, preserves rank order with a contiguous-prefix gate, and skips failures instead of blocking the tail.

/03

Sockets that don't stampede

Chat reconnects with exponential backoff plus jitter, so a thousand phones coming back online don't hit the backend as one wave — and token rotation swaps auth without leaking a duplicate connection.

/04

Native quirks, solved for real

React Native's FormData corrupts file-URI uploads, so media goes through the filesystem API with iOS photo-library URI resolution — and every image is compressed and EXIF/GPS-stripped before it leaves the phone.

/05

Video that behaves

Reels play and pause off list viewability, respect iOS silent mode on purpose, and tap-to-mute with an auto-hiding overlay — so off-screen videos never fight for the speaker.

/06

Adora AI in your pocket

Thirteen tones, twelve assistant modes, comment sentiment analysis and auto-reply with a human-handoff threshold — a configurable AI product surface, not a chat box.

(05) The Flow

  1. 01

    Feed, reels and explore hydrate from ranked recommendations

  2. 02

    The composer branches — image, carousel or video ads, articles, or a full reel edit

  3. 03

    Overlays drag with spring physics; music and stickers layer on

  4. 04

    Publish — then chat, push notifications and Adora keep the loop going

(06) Impact

67

screens across the app

63k

lines of TypeScript

0

commercial SDKs in the reel editor

Next project

Stockfront