Awalim Groupعوالِم قروب
ع Start your project
SYS-APP-08liveE-commerce

Jameel Storea luxury, Arabic-first store template

From browsing to payment in one flow that never breaks — a Flutter interface over a Firebase backend, designed Arabic-first.

The Jameel Store interface: a product page and a cart, rendered Arabic-first
Jameel StoreSYS-APP-08
Next projectStart a project like this
Client
An Awalim product — a ready store template
Sector
E-commerce
Year
2024
Role
Interface design and Flutter development
Platform
iOS · Android
Status
Available as a template
FlutterFirebaseFigmaOffline-first

Resultsالنتائج

What changed

The result first, then how we got there. Numbers you can trace to a source — not adjectives.

1
purchase flow that never breaks
2
platforms from one codebase
RTL
native Arabic rendering from the root
Offline
a cart that works offline and syncs later

The challengeالتحدّي

The problem we came to solve

Arabic stores are usually built on a Latin template and then flipped. The result: reversed prices, strange dates, and a cart that is lost when the network drops — and it does drop.

  • One flow from browsing to payment that does not break at any step
  • Native Arabic rendering: direction, numerals, prices and dates
  • A cart preserved across sessions and devices, syncing when the network returns
  • Smooth scrolling on long lists on mid-range devices

Approachالمقاربة

What we decided — and why

01

Figma to Flutter, pixel-accurate

The interface was designed in Figma on an Arabic-first component system, then carried into Flutter with a matching component library — so there are no surprises between design and build.

Figma to Flutter, pixel-accurate
02

A cart that is never lost

Cart state is stored locally and synced with Firebase when the network returns. The user closes the app in a lift and opens it in the car to find the cart exactly as they left it.

03

Steady performance on long lists

Lazy list building and multi-size images, so scrolling stays smooth on mid-range devices — not only on the newest phone.

Solutionالحل

What was actually delivered

A Flutter app with one codebase, a Firebase backend for the catalogue and orders, and a component library taken from the Figma file itself. Direction, numerals, prices and dates are all tuned for Arabic from the root — not flipped from a Latin template.

01 Browse Arabic-first catalogue 02 Components from Figma The file itself as source 03 Order and status Firebase · Works offline 04 Payment One flow that does not break
1. Browse: Arabic-first catalogue 2. Components from Figma: The file itself as source 3. Order and status: Firebase · Works offline 4. Payment: One flow that does not break
The store interface
Product page and cart — numbers, prices and dates are Arabic by origin

Next step

Have a project of this size?

Tell us about the process, and we come back with a first diagnosis and a scope estimate — no commitment.

Start a conversation WhatsApp us
  • We reply within two working days
  • The code is entirely yours
  • Published numbers, signed and verifiable