Mervida
Opened three new revenue streams for a Nigerian food brand, retail, bulk wholesale, and diaspora orders, from a single storefront.
GFO Foods needed to sell premium, clean-label Nigerian harvests to three completely different buyers: everyday retail shoppers, corporate clients ordering in bulk, and diaspora customers who want product delivered to family back home. Each has different pricing, logistics, and service expectations that a standard checkout couldn't handle. Mervida solves this with one storefront that adapts to whoever's buying, and a WhatsApp-based checkout that routes every order to a real person for consultation on delivery fees and logistics. A wholesale buyer or a complex diaspora order that would have bounced off a generic checkout form now becomes a sales conversation instead. One platform, three markets, without the cost of building three separate systems.
The application is built on the Next.js App Router paradigm, leveraging React Server Components for optimal SEO and initial page load performance. The UI layer is constructed using a bespoke component system styled with Tailwind CSS v4 and animated using Framer Motion. Data flow for user orders bypasses traditional automated payment gateways, instead formatting cart contents and routing them directly to a WhatsApp Business API endpoint for human-in-the-loop processing.
Rendering Strategy
Chose
Next.js App Router with React Server Components
Why
Chosen for its out-of-the-box SEO benefits, file-based routing, and ability to serve static pages rapidly, which is crucial for an e-commerce catalog.
Trade-off
Requires a strict mental model separation between client and server components, occasionally adding complexity to interactive state management.
Checkout Flow
Chose
WhatsApp checkout routing over automated payment gateways
Why
Selected over Paystack or Stripe to accommodate custom delivery fees, bulk wholesale orders, and specialised diaspora services that require human consultation.
Trade-off
Sacrifices end-to-end checkout automation in favour of high-touch customer service and maximum logistical flexibility.
UI Architecture
Chose
Custom UI components over component libraries (MUI, Chakra UI)
Why
Building bespoke components with Tailwind CSS and Framer Motion ensures the platform's visual identity matches its 'natural, clean-label' brand aesthetic perfectly.
Trade-off
Increased initial development time, but resulted in a lighter, more unique interface than any pre-built library would have produced.
Integrate a headless CMS (e.g., Sanity or Strapi) to allow non-technical staff to update the product catalog dynamically
Implement a localised payment gateway for fully automated retail checkouts alongside the WhatsApp flow
Add internationalisation (i18n) to natively support multiple languages for the global diaspora audience