How We Built Agora: A Multilingual Grocery App That Loads in Under 2 Seconds
Agora needed a grocery app that felt equally native to an Arabic-speaking shopper and an English-speaking one , not a translated app, but one built for both from the ground up.Divtechnosoft designed and built that app end to end , from the RTL Arabic interface to the Firebase backend , and shipped it in under 4 months.
About Agora
Agora is a grocery delivery app built for shoppers in Manama, Bahrain, where English- and Arabic-speaking customers often shop side by side.
Shoppers browse a live product catalog, watch prices update as promotions and stock levels change, and check out with whichever payment method is already on their phone.
Founded
2019
Industry
Retail E-commerce
Solution
Mobile Application
The Problem
Independent and regional grocery retailers are competing against large e-commerce platforms that already offer instant checkout, multiple languages, and loyalty perks as standard.
Starting from scratch, Agora needed a mobile app that could match that experience without the budget or team size of a national chain , real-time pricing tied to live inventory, checkout in more than one language, and a loyalty program to keep shoppers from switching to a bigger competitor.
Challenges We Solved
Four problems shaped most of the engineering decisions on this project: language, pricing, payments, and speed.
Right-to-Left Arabic Layout
Arabic reads right to left, so every screen , product grids, filters, the checkout flow, even the loyalty points widget , had to mirror correctly instead of just having its text translated.vvvv
Real-Time Pricing
Promotions, stock levels, and discounts change throughout the day, so prices on the product grid needed to update without the shopper refreshing the app or losing their place in checkout. Prices update per promotion, instantly reflecting on items already sitting in a cart.
Payment Integration
Shoppers needed to check out with the payment method they already trust , Apple Pay for iOS users and Benefit Pay for local bank cards , without the flow feeling different depending on which one they picked.
Fast Load Times on a Large Catalog
A catalog of over 15,000 SKUs meant every product image had to be compressed and cached without a noticeable drop in quality, especially on slower mobile connections.
Our Development Roadmap
Four phases, seventeen weeks, one team handling everything from design through payment integration.
Requirements & Design
Mapped how Arabic- and English-speaking shoppers would each move through the app, then designed UI components that could mirror correctly for RTL without maintaining two separate design systems.
Backend Development
Built the Firebase backend and custom APIs that handle pricing, inventory sync, and order management , the layer everything else in the app depends on, including how orders are managed on a custom merchant admin dashboard.
Mobile App Development
Built the Ionic app itself , product browsing, cart, checkout, loyalty points, and language switching , as a single codebase instead of separate iOS and Android builds.
Payment Integration
Connected Apple Pay and Benefit Pay to the checkout flow and tested both against real transactions before launch.
Our Approach
Rather than translating an existing template, we designed Agora's interface, pricing logic, and backend together, so the multilingual, real-time, and payment layers all sit on the same foundation instead of being bolted on separately.
Language-First Interface Design
Every screen was built with RTL and LTR layouts as equal defaults, not a translated afterthought , so switching from English to Arabic mirrors the entire layout correctly, not just the text.
Pricing Logic Tied to Inventory
Prices are calculated from live inventory and active promotions in Firebase, so a discount ending or stock running low reflects on the shopper's screen within milliseconds , not on the next app refresh.
Checkout Built Around Local Payment Habits
Card payments, Apple Pay, and Benefit Pay all run through the same checkout flow, so adding a new payment method later doesn't mean redesigning how customers pay.
Loyalty Logic Built Into the Backend
Shoppers earn points per amount spent, which can be redeemed at checkout. Points and coupon logic live in the same backend as pricing and inventory, so a redeemed coupon updates the order total the same way a live promotion does.
Key Features
What shoppers actually see and use inside the app, day to day.
Seamless Language Switching
Customers switch between English and Arabic from a single toggle, and the app remembers their chosen language across all future sessions.
Live Price Updates
Product prices update on screen the moment a promotion starts or ends, without the shopper needing to pull down and refresh the page.
Loyalty Points on Every Order
Based on a points-per-amount-spent ratio, customers earn points automatically at checkout and see their running balance from the account screen.
Coupon Codes at Checkout
Shoppers enter a promo code during checkout and see the discount applied to the order total before confirming payment.
Apple Pay and Benefit Pay Checkout
Customers pay with a saved card, Apple Pay, or Benefit Pay , whichever is already set up on their phone , without leaving the checkout screen.
Category Browsing with Filters
Using filters for price, brand, dietary preferences, and in-stock availability, shoppers narrow down the product catalog by category and filter before searching by name.
Cached Product Images
Product photos load from cache on repeat visits, so browsing the catalog a second time is noticeably faster than the first.
Firebase-Powered Backend
Inventory, pricing, and order data all run through Firebase, which is what keeps price changes and order status updates showing up without a manual refresh.
Live Order Tracking
Customers see their order status update in real time from confirmation through delivery, including a live delivery map and status text like 'Preparing' and 'Out for Delivery'.
"Divtechnosoft delivered an exceptional app that transformed our business. The multilingual support and real-time pricing are exactly what we needed."
What We Learned
Four takeaways worth carrying into the next multilingual or high-catalog build.
RTL Isn't a Translation Step
Planning right-to-left layouts at the design stage , not after the English version was already built , meant components didn't need to be rebuilt twice.
Performance is Critical
Image optimization and caching strategies are essential for fast-loading e-commerce apps.
Image Weight Decides Perceived Speed
On a catalog this size, image compression and caching affected load time more than any other single factor, reducing average load times from over 6 seconds to under 2 seconds.
Loyalty Points Change Repeat Behavior
The loyalty program drove a 35% increase in repeat orders within the first three months.
Firebase Held Up at This Scale
Firebase's real-time sync handled pricing and order updates without added infrastructure work as usage grew toward over 10,000 processed orders.
Technologies Used
The stack, and why each piece was chosen for this project specifically.
Ionic Framework
Angular
Firebase
Node.js
Explore Related Case Studies
Discover how we help other businesses achieve success through digital transformation.
Have a Similar App Idea?
Tell us what you're building and we'll tell you honestly what it will take to build it , no generic proposal templates.
