The app speaks 19 languages: tiered i18n and the AI translation pipeline

The app, a voice-first shopping application named CannyCart, initially had no infrastructure for internationalization (i18n) and featured 660 user-facing text nodes scattered across 53 files. English was the dominant language, present in alert dialogs, toast messages, and screen titles. The team decided to address this issue before launch, as the closed-test window in Google Play required real users to interact with translated builds after a 14-day testing period.

They implemented the i18next library along with react-i18next and a plural-rules polyfill, which proved crucial for languages with complex plural categories like Arabic.

The app adopted a per-user language preference, rather than a device-based one, to prevent issues like users switching languages without understanding how to change it. Language was cached for the first frame and persisted across account switches using Cognito's locale attribute. Arabic text was made right-to-left (RTL) by registering the Arabic font under the Latin font name, allowing existing styles to automatically reface without any changes.

The development team implemented a two-tier approach for translations, with six human-reviewable languages for the launch and thirteen machine-translated languages for the extended version. The pipeline forced structured output to avoid issues with free-form JSON and ensured consistent output. The app had eight feature namespaces and bundled static resources so that the first frame loaded copy, eliminating any "flash of keys." The dayjs library was used to switch locales and translate dates alongside text.

Overall, the app's i18n implementation was built upon existing patterns, such as per-user preferences, device detection, and searchable pickers, rather than creating a new discipline. This approach allowed the app to support both human-reviewed and machine-translated languages efficiently.