Project Photos
Overview
Brmgina developed the official mobile app for TheOutlet.sa to deliver a native shopping experience on iOS and Android, with full synchronization with the online store built on WordPress and WooCommerce. The app is built with Flutter using a hybrid approach that combines native interfaces with an optimized WebView for store pages, along with custom APIs (theoutlet/v1) and the WooCommerce REST API.
The app was published on the Apple App Store and Google Play under the store’s official identity (theoutlet.sa), giving customers direct mobile access to the same catalog, offers, and account.
Challenge
The goal was to turn the website experience into a professional mobile app that keeps the store’s content and bilingual support (Arabic and English), while adding a native layer for navigation, performance, notifications, and location — with the ability to update and release continuously on the app stores.
Solution
We designed and built a hybrid app based on:
- Native screens for navigation, the home page, and quick-access sections.
- A smart WebView for store pages that hides site-only header and menu elements inside the app.
- Backend integration with WooCommerce and ACF options via REST API.
- WPML support for language switching and page URLs based on the default language and localized paths.
Key Features
Native user experience
- Native top navigation bar (Home, Shop, Categories, Offers, Account).
- Native bottom navigation bar (Favorites, Cart, Checkout, Account).
- Side drawer for quick access.
- Contextual navigation that shows or hides icons based on the current page (for example, hiding Favorites on Cart and Checkout).
- Pull-to-refresh and clear loading indicators.
Full WooCommerce shopping
- Browse products, categories, brands, and offers.
- Shopping cart, checkout, favorites, and customer account.
- WooCommerce REST API integration for products, categories, orders, and customers.
- Native home screens powered by store data (slider, featured sections, store highlights, products of the week).
- Saudi Riyal symbol display and optimized product cards with image caching.
Multilingual support and RTL
- Arabic and English support via WPML.
- Fully localized Arabic interface with RTL layout.
- In-app language switching that reloads the correct URLs for each language.
Notifications and Engagement
- Push notifications via Firebase Cloud Messaging.
- Supporting local notifications.
- Native sharing for products and links (Share).
Location and offline mode
- Location services to show nearby stores.
- Offline mode with advanced local storage (SQLite) and page caching.
- Internet connectivity checks and clear messaging when the network is unavailable.
Security and performance
- HTTPS-only connections.
- Secure storage for sensitive data and sessions.
- User login and session management.
- Page and product caching to improve speed.
Publishing and app stores
- Build and release for iOS and Android.
- App published on the App Store and Google Play.
- Package Name / Bundle identity configured to match the published version.
- Ready for ongoing updates through the build and release pipeline.
Technologies Used
Flutter · Dart · WebView · WooCommerce REST API · WordPress/ACF · WPML · Firebase Messaging · SQLite · Geolocator · Secure Storage · Shared Preferences · Android & iOS Native Shells
Result
TheOutlet.sa now has an official mobile channel published on the two largest app stores, with an experience closer to a native app while using the same e-commerce content, full Arabic support, notifications, location, and offline mode — making it easier to grow sales and improve the customer experience on mobile.