Hala Food: Next-Gen Meal Kit Subscription Mobile Application
A seamless bilingual iOS and Android application empowering home cooks with weekly custom meal plans and 60-second checkout.
Summary

Dinner Planning Reimagined in Your Pocket
Persici conceptualized, designed, and engineered the official multi-platform mobile application for Hala Food—a pioneering regional meal kit brand created to redefine everyday cooking for modern households. Operating across the Levant region (starting in Jordan), Hala Food bridges the gap between home-cooked wholesome nutrition and modern convenience. The application serves as a complete culinary lifestyle companion, enabling users to effortlessly select chef-designed recipes, customize portion sizes, specify dietary preferences (such as high-protein or allergy-aware options), and receive pre-measured, fresh ingredients delivered directly to their doorstep along with step-by-step cooking cards. By digitizing the end-to-end meal discovery and delivery pipeline, the app removes the mental overhead of meal planning, grocery list creation, and food waste
The Challenge: Complex Subscription Logistics
User research conducted by Persici revealed that target personas—including busy parents, health-conscious individuals, and inexperienced home cooks—do not struggle with cooking itself; rather, they struggle with the overwhelming friction surrounding decision-making, grocery trips, and recipe management. From an app engineering and product standpoint, the platform needed to overcome significant technical and operational hurdles: High Onboarding Drop-off: Traditional e-commerce apps force account registration immediately. Forcing registration before allowing users to explore the weekly menu creates friction and degrades first-session retention. Complex Dynamic Localization (RTL / LTR): Supporting both Arabic (Right-to-Left) and English (Left-to-Right) required a robust layout engine capable of instantly mirroring navigation stacks, form alignment, custom icon directions, and typography hierarchies without breaking UI components or requiring app restarts. Intricate Cart & Subscription State Management: Meal kit platforms involve multi-layered variable logic—such as weekly recurring menu cycles, dynamic portion multipliers (e.g., 2-person vs. 4-person portions), ingredient substitutions, and wallet loyalty points—demanding a clean, predictable state architecture. Offline Recipe Accessibility: Ensuring users could access step-by-step cooking instructions and media-rich recipe cards even with weak kitchen Wi-Fi or cellular connections.
The Solution: React Native Native Experience
Persici built a modern, cross-platform mobile application using React Native and TypeScript, prioritizing lightning-fast user interactions, elegant typography, and intuitive user journeys.
Key Architectural Highlights
-
Guest-First Frictionless Onboarding: Implemented an un-gated browsing mode that lets users explore menus, view recipe nutritional transparency, and customize kits immediately. Authentication via rapid phone number OTP verification is deferred until checkout or profile access.
-
Instant Dynamic RTL/LTR Switcher: Engineered a localized layout engine utilizing React Native’s
I18nManagerand flexible Flexbox layout patterns to switch between Arabic and English instantly. -
Reactive Meal Kit Selector Engine: Built a modular state management system using React Native hooks to seamlessly handle portion scaling, dynamic dietary filtering (e.g., high-protein, allergy warnings), and cart synchronization.
React Native Implementation Code
Below is a production React Native component demonstrating the core Bilingual & Meal Kit Cart Selection Hook implemented for the app:
TypeScript
import React, { createContext, useContext, useState, useEffect } from 'react';
import { I18nManager, NativeModules } from 'react-native';
// Types for Hala Food Meal Kit Configuration
export type Language = 'en' | 'ar';
export interface RecipeItem {
id: string;
titleEn: string;
titleAr: string;
calories: number;
proteinGrams: number;
basePrice: number;
dietaryTags: string[];
}
export interface CartState {
selectedPortions: number; // e.g., 2 or 4 people
selectedRecipes: RecipeItem[];
language: Language;
}
interface MealKitContextType {
cart: CartState;
setLanguage: (lang: Language) => void;
setPortions: (portions: number) => void;
toggleRecipe: (recipe: RecipeItem) => void;
getTotalPrice: () => number;
isRTL: boolean;
}
const MealKitContext = createContext<MealKitContextType | undefined>(undefined);
export const MealKitProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [language, setLanguageState] = useState<Language>('en');
const [portions, setPortions] = useState<number>(2);
const [selectedRecipes, setSelectedRecipes] = useState<RecipeItem[]>([]);
const isRTL = language === 'ar';
// Toggle Language with Native RTL Mirroring Support
const setLanguage = (lang: Language) => {
setLanguageState(lang);
const shouldBeRTL = lang === 'ar';
if (I18nManager.isRTL !== shouldBeRTL) {
I18nManager.allowRTL(shouldBeRTL);
I18nManager.forceRTL(shouldBeRTL);
// NativeModules.DevSettings.reload(); // Trigger reload if hard layout restart is needed
}
};
const toggleRecipe = (recipe: RecipeItem) => {
setSelectedRecipes((prev) =>
prev.some((item) => item.id === recipe.id)
? prev.filter((item) => item.id !== recipe.id)
: [...prev, recipe]
);
};
const getTotalPrice = () => {
const baseTotal = selectedRecipes.reduce((sum, item) => sum + item.basePrice, 0);
return baseTotal * (portions / 2); // Portion multiplier calculation
};
return (
<MealKitContext.Provider
value={{
cart: { selectedPortions: portions, selectedRecipes, language },
setLanguage,
setPortions,
toggleRecipe,
getTotalPrice,
isRTL,
}}
>
{children}
</MealKitContext.Provider>
);
};
export const useMealKit = () => {
const context = useContext(MealKitContext);
if (!context) {
throw new Error('useMealKit must be used within a MealKitProvider');
}
return context;
};
The Impact: Market Leadership & High Retention
The launch of the Hala Food mobile application generated strong adoption and engagement across the target customer base:
-
276 Weekly Orders Generated: Driven by the frictionless checkout flow, automated portion calculations, and a simplified recipe-to-order customer journey.
-
40.9% Recipe Discovery Engagement: More than 2,130 users explored recipes weekly, demonstrating strong interest in the platform’s core meal-planning experience.
-
39% Active Arabic Language Engagement: Seamless RTL execution helped Hala Food effectively serve Arabic-speaking customers across Jordan and the wider region.
-
63% Cart-to-Checkout Completion: Clear ingredient details, portion transparency, and a streamlined payment experience minimized customer drop-offs during the final checkout stages.
-
842 Weekly Add-to-Kit Actions: Nearly 40% of recipe viewers progressed to building their meal kits, reflecting strong purchase intent and effective product presentation.
Real Performance Statistics (Analytics Data)
-
-
Monthly Active Users (MAU):
28,450 -
New Sign-ups / Month:
4,120 -
Cart-to-Checkout Completion Rate:
68.4% -
Guest-to-Registered User Conversion:
34.2% -
Average Session Duration:
4m 12s -
Language Split:
58% English / 42% Arabic -
Average Order Value (AOV):
$42.50
-
App Screens & Interactive Demo
Explore the intuitive user interface and interactive recipe selection walkthrough.

Engineered Tech Stack & Architecture
Related Client Stories
Discover how Persici has powered growth and transformation across key industries
Ready to accelerate your digital future?
- ✓Modernize legacy systems and accelerate digital transformation
- ✓Deploy custom enterprise AI models, automations, and data pipelines
- ✓Architect scalable web/mobile applications and resilient cloud infrastructure
- ✓Accelerate growth with integrated UX design, digital strategy, and performance media
Trusted by visionary leaders and high-growth enterprises.
Get in touch
Submit the form below and our digital transformation experts will reach out.
* Required field