Designing and Shipping a High-Performance Retail Mobile App

Context

At Stadion Ltd, I was tasked with designing and shipping a standalone retail mobile application from the ground up using React Native and Expo. This was a greenfield project running alongside my domain ownership responsibilities, requiring me to make all frontend architecture decisions independently and deliver a production-ready app with complex UI, personalisation, search, and monitoring from day one.

My Role

I was the sole frontend engineer on the standalone retail app. I owned every layer of the frontend: architecture decisions, UI implementation, state management, third-party integrations, and production monitoring setup. There was no existing codebase to build on — all patterns, tooling choices, and infrastructure were established from scratch.

Approach

The core UI challenge was building a high-performance product listing and detail experience with smooth animations and gesture interactions on both iOS and Android. I chose Reanimated v4 and Gesture Handler for animation and interaction, and FlashList over FlatList for list rendering due to its significantly better recycling performance on large product catalogues.

For state management, I used Zustand for global client state and TanStack React Query for server state, data fetching, and caching. React Query's built-in persistence and offline support handled scenarios where users lose connectivity mid-session, keeping the app functional with cached data.

Personalisation was integrated via Dynamic Yield, allowing the app to surface tailored product recommendations based on user behaviour. Algolia powered the search experience, providing fast, typo-tolerant search across the product catalogue.

For production observability, I integrated Firebase Analytics and Crashlytics for usage tracking and crash reporting, alongside Sentry for error monitoring and alerting. This gave the team full visibility into production stability from the first release.

Code quality was enforced through TypeScript, Jest for unit testing, ESLint, and Prettier, with CI-ready workflows to catch issues before they reached production.

Results

The app shipped to production with a complete feature set including complex animated UI, offline-capable data layer, personalised recommendations, and full-text search. The monitoring infrastructure established from launch meant production issues were caught and resolved quickly, maintaining a stable user experience. The architecture and tooling decisions made early on proved scalable as new features were added post-launch.

Learnings

Owning a greenfield app end-to-end reinforced the value of making deliberate architecture decisions early. Choosing FlashList over FlatList and React Query over custom fetch hooks were decisions that paid compound dividends — the performance and caching benefits became more significant as the data volume and feature complexity grew.