KFC Middle East PWA

Context

Americana Restaurants operates KFC across the Middle East and needed a single PWA to replace fragmented native apps in multiple markets. The ordering experience had to work reliably on low-end Android devices over cellular connections, handle peak Ramadan traffic, and support multiple languages and currencies.

Constraint

The biggest constraint was device diversity. Most customers were on budget Android phones with limited RAM and unreliable 3G/4G. The app had to stay under a strict performance budget while supporting Arabic RTL layouts, offline menu browsing, and real-time order tracking across multiple backend systems.

What I built

A React-based progressive web app serving KFC ordering across the MENA region. The platform handles menu browsing, customisation, cart, checkout, payment, and real-time order tracking. It replaced separate native apps with a single, installable web experience.

Decisions

• Chose a PWA over native to ship one codebase across all markets and eliminate app store update delays.
• Implemented aggressive code splitting and lazy loading to keep initial bundle under 150 KB gzipped.
• Used service workers for offline menu caching so customers could browse even on flaky connections.
• Built the RTL layout system to flip automatically based on locale rather than maintaining separate stylesheets.
• Integrated with multiple payment gateways per country since each market had different processor requirements.

Outcome

The PWA handles 100,000+ monthly orders across the Middle East. Page load times dropped below 3 seconds on 3G, and the installable experience drove higher repeat usage than the previous native apps.

Stack

• React
• TypeScript
• PWA
• Service Workers
• Redux
• REST APIs
• Node.js
• SCSS