MigranX

Project Overview

MigranX is a shopping and delivery platform designed around a specific need: when people move from countries like Nigeria or Ghana to the United States, they leave behind access to the food and products they grew up with. Ethnic grocery stores and restaurants exist in the US, but finding them, knowing what's available, and placing an order is still largely informal. MigranX centralises that experience.

The platform is three-sided. Consumers browse and order from vendors — restaurants and grocery stores serving diaspora communities. Vendors list their products and manage their storefronts. Drivers pick up and deliver orders. Each side has its own dedicated app. The platform also has a public-facing website.

I was part of the front-end engineering team at MigranX, working across three surfaces: the consumer app, the driver app, and the website. The seller app was handled separately by the team.

Platform Structure

• Consumer app — where diaspora community members browse vendors, order food and products, and track deliveries. Built with React Native Expo in JavaScript.
• Driver app — where delivery drivers accept orders, navigate to pickup and drop-off points, and manage their earnings. Built with React Native Expo in TypeScript.
• Website — the platform's public web presence. Built with Next.js.
• Seller app — where vendors manage their listings, profile, and orders. Handled by other engineers on the team.

Delivery Options

One of the distinguishing features of MigranX is that it supports three delivery modes, not just one:

• Same-day delivery — an on-demand delivery driver picks up and delivers the order within the day
• Shipping — for vendors that are not locally reachable, orders can be shipped, opening the platform to vendors and customers who are not in the same city
• Pickup — the customer collects the order directly from the vendor

The Problem

Immigration involves practical trade-offs that aren't always visible until you're living them. One of them is food. People who relocate from West Africa, the Caribbean, or other regions to the United States often find that their home-country staples — specific cuts of meat, dried fish, plantain varieties, regional spices, or prepared dishes from their own culinary tradition — are either hard to find locally or entirely unavailable through mainstream platforms.

Ethnic grocery stores and diaspora-focused restaurants do exist, but the discovery problem is real: they're scattered, not well indexed on general-purpose platforms, and their stock or availability is often unpredictable. There was no centralised platform where someone could search for their home-country product, see what local vendors carry it, and place an order — whether they want it delivered today, shipped from further away, or are happy to pick it up themselves.

On the vendor side, small food businesses serving diaspora communities had limited digital infrastructure. Running operations through WhatsApp or word-of-mouth works at small scale but doesn't grow. They needed a platform that could handle listings, orders, and a storefront without requiring them to build their own.

And for drivers looking for delivery work in this niche, no purpose-built tool existed for managing the specific flow of ethnic grocery and food deliveries.

Consumer App — React Native Expo (JavaScript)

The consumer app is the primary interface for diaspora community members who want to find and order from vendors. It covers the full shopping experience:

• Browse vendors by category — restaurants, grocery stores, specialty shops — with location-based discovery surfacing nearby options first
• Search products across all vendors with category and subcategory filtering
• Multi-vendor cart — items from different vendors can be added to the same cart, with clear handling of vendor constraints
• Checkout with the three delivery modes: same-day delivery, shipping, or pickup — each with appropriate shipping rate selection
• Order tracking with real-time status updates and live driver location on a map during delivery
• Wishlist, favourites, referral programme, and in-app customer support via integrated chat
• OTA updates via EAS so JavaScript changes can be shipped to users without requiring an app store review cycle

State management uses Zustand for global auth and cart state, with React Query handling server state — product listings, vendor data, order history — with built-in caching to avoid redundant requests.

Driver App — React Native Expo (TypeScript)

The driver app handles the delivery side of the platform. A driver logs in, goes online, and begins receiving order requests. From there the app manages the entire delivery lifecycle:

• Real-time incoming order notifications — drivers accept or decline and the order is queued immediately
• Google Maps integration with turn-by-turn navigation to the pickup location, then to the delivery address
• Background location tracking with a 30-second heartbeat and a 10-metre movement threshold, keeping the platform updated on the driver's position during active deliveries
• Order verification through photo capture at pickup and delivery — a record of handoff
• Earnings dashboard showing daily, weekly, and monthly totals, with history and trend data
• Bank account linking via Plaid for payout setup
• Inactivity detection that automatically sets the driver to offline after a configurable period without activity
• OTA updates via EAS — same rapid iteration capability as the consumer app

The driver app is built in TypeScript, which made managing the complex order state machine — incoming, accepted, en route to pickup, picked up, en route to delivery, delivered — significantly more tractable than it would have been in plain JavaScript.

Website — Next.js 16 (TypeScript)

The website at migranx.com is the main digital hub for the platform — the entry point for prospective consumers, vendors, and drivers before they download an app. Built with Next.js 16 (App Router) in TypeScript, with Tailwind CSS 4 and Framer Motion for animation.

It covers several distinct surfaces:

• Homepage — hero, feature sections explaining the three delivery modes, how the platform works for each side (consumers, vendors, drivers), and calls to action for app download
• Blog — an MDX-based content system covering culturally relevant topics for diaspora communities: recipes, food culture, community resources. Blog posts are written in Markdown with embedded React components (tabs, callouts, accordions, galleries, video). The system includes full-text search, tag filtering, pagination, read-time estimates, recently viewed history, related post recommendations, and email subscription
• Sell With Us — onboarding page for vendors who want to list on the platform, explaining the steps, benefits, and FAQ
• Deliver With Us — recruitment page for prospective delivery drivers
• Deep linking — the website handles iOS Universal Links and Android App Links, routing users who tap a share link, referral code, or product URL directly into the mobile app (or falling back to the web page if the app isn't installed). Referral codes, product shares, food listings, and vendor shops all have dedicated shareable URLs that route intelligently
• Dynamic product and vendor pages — individual pages for food items, products, and vendor shops, generated from the platform's API

Outcomes

• All three surfaces are live: the website at migranx.com, the consumer app, and the driver app — all in active use on the MigranX platform.
• The consumer app covers the full ordering experience across three delivery modes, giving users flexibility that goes beyond what most on-demand delivery apps offer in this space.
• The driver app handles the operational side of delivery end-to-end — order acceptance, navigation, background location tracking, photo verification, and earnings — in a single purpose-built tool.
• The shipping option extends the platform beyond local on-demand delivery, allowing vendors and customers who aren't in the same city to transact.
• The website's deep linking infrastructure means any shareable link — a product, a vendor, a referral code — routes users directly into the mobile app when installed, reducing friction between web discovery and in-app ordering.
• The blog gives the platform an ongoing content channel targeted at diaspora communities, covering food culture and community topics that are directly relevant to the platform's audience.

Key Learnings

• Building multiple surfaces for the same platform requires discipline: The consumer app, driver app, and website all depend on the same backend. Data shape decisions made for one surface affect all others. Keeping that alignment as features evolve meant staying closely coordinated with the back end and the rest of the team.
• JavaScript vs TypeScript across two apps in the same domain: The consumer app is JavaScript; the driver app is TypeScript. Working across both in the same domain made the difference concrete. The driver app's order state machine — with multiple valid status transitions and error states — was noticeably easier to reason about in TypeScript than it would have been without types.
• Three delivery modes means three checkout flows: Same-day delivery, shipping, and pickup look similar at the cart level but diverge significantly by checkout. Shipping needs rate selection and address validation; same-day needs driver availability; pickup needs vendor confirmation. What appeared to be one checkout became conditional branching that had to be designed carefully to avoid a confusing user experience.
• OTA updates changed how we thought about releases: Being able to push JavaScript changes to both apps without an app store review cycle made iteration faster and reduced the pressure of any individual release. Bugs that would have stayed in production for days waiting on review could be patched within hours.