Tabby

When the UAE's number one "Buy Now, Pay Later" platform approached us, you might imagine we were excited. We've been wanting to test out our skills with Internationalisation and RTL/LTR layout switching for a while now, and this was the perfect opportunity. Their vision was clear: create a seamless, user-friendly platform that would work flawlessly across multiple languages and regions. Our mission was to build the technical foundation that would make this vision a reality.

Key pillars of creation

Our solution architecture centered on three key pillars:

1. A comprehensive TypeScript component library with over 50 reusable components
2. Sanity CMS migration from V2 to V3 for improved content management
3. Full internationalization support using next-intl & both document and field level internationalisation Sanity Plugins.

These choices were crucial for supporting Tabby's rapid growth across multiple markets and languages, particularly in Arabic-speaking regions where RTL support was essential.

A stable foundation

The heart of the project was building Tabby's component library. We developed over 50 TypeScript components that powered everything from payment flows to product displays. Each component featured:

• Comprehensive prop interfaces and documentation
• Built-in LTR and RTL support for Arabic/English interfaces
• Interactive Storybook examples with live prop binding
• Thorough testing infrastructure
• Consistent styling, full pixel perfect styling that matched Tabby's financial technology brand

The Storybook implementation was particularly valuable for Tabby's growing development team, allowing them to:

• Explore page builder blocks in isolation
• Test different prop combinations for various content layouts
• View components in both RTL and LTR contexts
• Access documentation and usage examples

Scaling a goliath

With Tabby expanding rapidly across markets, content management was crucial. We guided their migration from Sanity V2 to V3. This meant consulting on the content structure, how to best model the data for flexibility and performance, and how to best use the Sanity Studio to manage the content.

We had a constant balance between granular content modelling, performance and flexibility. The whole editorial experience should be simple to use, not require weeks of onboarding. This is where we went the extra mile to ensure we had descriptions, previews, and conditional fields to make sure the editors could do their job at a rapid pace.

Overdelivering by default

The project delivered significant improvements to Tabby's platform:

• 50+ production-ready TypeScript components powering their payment interface
• Comprehensive Storybook documentation for rapid developer onboarding
• Successful Sanity V3 migration supporting multiple markets
• Robust i18n infrastructure for seamless Arabic/English support
• Improved developer experience and content management workflow

Working with Tabby was an exciting opportunity to push the boundaries of financial technology in the Middle East. The technical foundation we built together supports their mission of making shopping more accessible through flexible payment options. We're proud to have contributed to a platform that helps millions of shoppers pace their payments and shop with confidence. 🛍️💳