# Wamia

> A motorbike delivery app for Kélibia. Customers order meals or groceries from multiple shops in a single order, and couriers handle each ride step by step.

- By: Yassine Charcheri, full-stack developer (https://yassinecharcheri.dev/)
- Status: Prototype
- Year: 2026
- Role: Solo: design system, mobile app and architecture.
- Type: Mobile · Flutter
- Stack: Flutter, Dart, Riverpod, go_router, flutter_map, i18n / RTL
- Case study page: https://yassinecharcheri.dev/projects/wamia

## Highlights

- Courier state machine (offer → pickup → delivery → proof) with slide-to-confirm UX built for riding
- Bilingual FR / Tunisian Arabic design system with full RTL, light/dark themes and 48 tested widgets
- Two-cart multi-shop commerce, cursor pagination and simulated live tracking — all data behind swappable repositories (mock backend)

## Case study

- Summary: A motorbike delivery app for Kélibia. Customers order meals or groceries from multiple shops in a single order, and couriers handle each ride step by step.
- For: Local customers, small shops (restaurants, groceries, bakeries) and freelance couriers.
- Pain points:
  - There is no single place to order from several local shops.
  - Customers can't see where their order is.
  - Couriers juggle calls, addresses and order details from memory or on paper.
  - Orders from several shops at once are hard to coordinate.
- What I built:
  - Multi-shop cart: Combine restaurants, groceries, fruit and bakery in one order (up to 3 shops).
  - Courier mode: An online/offline switch and a daily dashboard (rides, earnings, distance).
  - Step-by-step rides: Restaurant → pickup → customer, with an item checklist and swipe-to-confirm at each step.
  - Live map & route: OpenStreetMap with the courier position and route.
  - Made for local users: Tunisian Arabic interface (right-to-left), light and dark themes.
- Stack and why:
  - Flutter / Dart: One codebase for Android and iOS, with full control over every pixel. That was essential for building a custom design system rather than default Material screens.
  - Riverpod: The app shares state across many screens (cart across shops, current ride step, courier online status). Riverpod keeps that state predictable and testable, without tying it to the widget tree.
  - go_router: Two roles mean two navigation flows. Declarative routes with redirects keep customers and couriers in the right place.
  - flutter_map + OpenStreetMap: Free maps with no API key or billing, accurate enough for a city-scale delivery app, and easy to restyle for dark mode.
- Challenges:
  - One app, two roles: Keeping the customer and courier experiences fully separated while sharing one codebase and design system.
  - The ride as a state machine: Each ride moves through strict steps; the app must never allow an invalid jump (e.g. delivering before pickup).
  - Right-to-left Arabic UI: Layouts, icons and the step tracker all had to mirror correctly.
- Learnings:
  - A small design system (colors, type, components) at the start saves hours on every new screen.
  - Explicit states beat boolean flags for any multi-step flow.
- Screens:
  - Customer home, light theme: delivery address, “Faim ? On arrive.” and shop categories (restaurants, grocery, fruit and vegetables, bakery)
  - Customer home, dark theme: the same screen with the bottom navigation (home, search, orders, profile)
  - Courier ride offer, light theme: 6,000 DT for two pickups and one drop-off, with a countdown and Refuser / Accepter buttons
  - Courier ride offer, dark theme: 4,500 DT, pickup at Le Pêcheur and delivery in Mansourah, over the map
  - Splash screen, light theme: the Wamia logo
  - Splash screen, dark theme: the Wamia logo
- Demo video: https://yassinecharcheri.dev/projects/wamia/wamia-safari.mp4 (Wamia app walkthrough: customer ordering and courier delivery screens)

## Contact

- Email: yassine.charcheri@gmail.com
- Contact form: https://yassinecharcheri.dev/#contact