Overview
The brief, in full
Tanagra, part of the Chalhoub Group, is the GCC's leading luxury homeware destination. The goal: build a React Native app that mirrors the clean, refined web experience exactly, while adding native capabilities like BNPL checkout, full real-user monitoring, and Adjust attribution.
Platform
React Native CLI, iOS & Android, shared codebase
Core Tech Stack
BNPL Integrations
Analytics & Monitoring
Brand / Client
Tanagra · Chalhoub Group · UAE, KSA, Qatar, Kuwait
Key App Services
Development Process
How it was built
A deliberate, phased approach — from discovery through to live GCC rollout — with the Tanagra brand as the non-negotiable north star at every step.
01
Discovery & Research
Audited the Tanagra web experience (SFCC / Demandware platform) and benchmarked against luxury peers: NET-A-PORTER, Harrods, Farfetch. Conducted heuristic evaluation, mapped core user journeys (browse, PDP, checkout, gift registry), and aligned on KPIs with internal stakeholders.
02
Architecture & Project Setup
Chose React Native CLI over Expo for full native module control, required for Tamara SDK, Tabby SDK, Datadog RUM, and Adjust deep-link handling. Set up the TypeScript project structure, ESLint/Prettier config, Redux Toolkit store with RTK Query, and React Navigation v6 stack. Defined the multi-region runtime config architecture for all 4 GCC storefronts.
03
Design System: Light, Brand-Faithful
Built the design system to mirror tanagra.me exactly: white and warm off-white surfaces, near-black text, Playfair Display for headings, DM Sans for UI body copy. Gold used only on brand labels, prices, and primary CTAs. Every token, spacing value, and border-radius documented in a shared constants file.
04
BNPL: Tamara & Tabby Integration
Integrated both Tamara (3-instalment) and Tabby (4-instalment) SDKs to enable interest-free payments, a must-have for high-value luxury purchases in the GCC. Both are surfaced on the PDP, cart, and checkout screens with live split-payment previews. Implemented native SDK flows, handled redirect/callback for both providers, and ensured eligibility rules are enforced per market and currency.
05
Analytics, Monitoring & Attribution
Instrumented full observability across three layers: Datadog RUM for real-user monitoring, session replay, and performance; Firebase Analytics for full funnel event tracking; Firebase Crashlytics for crash and ANR reporting; and Adjust SDK for mobile attribution, deep-link handling, and campaign tracking across all 4 GCC markets.
06
QA, Accessibility & Staged Rollout
QA across 24+ device and OS configurations (iPhone SE → Pro Max; Android 10–14). Accessibility audit: 44pt minimum touch targets, VoiceOver and TalkBack, Arabic RTL layouts verified end-to-end. Staged rollout: UAE first, monitored live via Datadog dashboards and Adjust attribution, then phased expansion to KSA, Qatar, and Kuwait.
Integrations
The full technical stack
Every integration chosen to support Tanagra's specific requirements — GCC BNPL, real-user monitoring, mobile attribution, and a faithful SFCC backend connection.
Tamara
Leading GCC BNPL provider. Integrated via native SDK with eligibility checks and instalment previews on PDP, cart, and checkout.
Tabby
4-instalment zero-interest BNPL. Integrated alongside Tamara with live split-payment preview widgets on cart and checkout.
Datadog RUM
Real-User Monitoring for the React Native app. Tracks crashes, JS errors, and session replays with custom view tracking wired to React Navigation.
Firebase Analytics
Full funnel event tracking across screen views, add-to-cart, checkout, and purchases. Powers segmentation and reporting across all 4 GCC markets.
Firebase Crashlytics
Real-time crash reporting and ANR detection. Logs enriched with region, device, and app version for fast root-cause analysis.
Adjust SDK
Mobile attribution and deep-link handling across 4 GCC markets. Tracks installs, re-engagements, and campaign revenue attribution.
SFCC REST API
Salesforce Commerce Cloud backend, same platform as tanagra.me. All product, cart, checkout, and account endpoints via a typed Axios service layer.
Redux Toolkit + RTK Query
Centralised state for cart, wishlist, and session. RTK Query handles SFCC data fetching with caching and optimistic updates.
React Navigation v6
Stack, Tab, and Modal navigators with shared-element transitions. Deep-link routing integrated with Adjust for universal links on both platforms.
The app doesn't feel like a translation of the website. It feels like it was always meant to live on the phone.
Reflection
What I learned
Key Decisions
React Native CLI over Expo was the correct call. Full native module access was required for Tamara SDK, Tabby SDK, Datadog RUM native instrumentation, and Adjust deep-link handling. Enforcing a strict light-mode-only design kept decisions fast: every colour, spacing, and typeface had a direct tanagra.me reference to check against, eliminating guesswork.
- React Native CLI for full native module access
- Tamara + Tabby both integrated, maximum BNPL flexibility for GCC shoppers
- Light mode only, matching tanagra.me, no dark mode divergence
- RTK Query for typed, cached SFCC API layer from the start
Challenges Overcome
RTL Arabic support was more complex than anticipated. Many third-party components aren't RTL-aware and required custom wrapping with I18nManager.forceRTL and a bespoke useRTL() directional hook. Wiring Datadog RUM view tracking correctly inside a React Navigation stack required custom screen-change listeners. Coordinating Tamara and Tabby eligibility thresholds across 4 markets and 4 currencies needed a unified BNPL config layer.
- RTL: useRTL() hook applied to every directional component
- Datadog RUM custom view instrumentation inside React Navigation events
- Tamara + Tabby eligibility config across 4 markets and currencies
- Adjust deep-link handling on both cold-start and background re-open
What I'd Do Differently
With more runway, I'd invest in AR product visualisation. Placing a Baccarat vase on your dining table before purchasing is the kind of feature that elevates a luxury app from great to memorable. I'd also set up per-market Datadog dashboards from day one rather than retrofitting regional segmentation post-launch.
- AR product visualisation via RealityKit (iOS) + ARCore (Android)
- Per-market Datadog RUM dashboards configured from day one
- A/B test on BNPL widget placement to maximise conversion
- Offline-first product browsing for lower-connectivity market conditions
