Abrila Salesman

The Challenge

Fabrilamp’s sales representatives visit retail stores across Spain, often in areas with limited or no mobile connectivity. They needed a mobile tool that could showcase the full product catalog with high-quality images, manage customer relationships, and process complex B2B orders — all without depending on an internet connection. The existing workflow relied on paper catalogs and phone calls, leading to errors, delays, and a poor customer experience.

Our Approach

We built a fully offline-capable mobile application using Expo and React Native. The entire product database is stored locally in SQLite via Drizzle ORM, and product images are downloaded to the device filesystem for instant loading. The app uses Expo Router for file-based navigation, NativeWind for styling consistency with the web platform, and Zustand for lightweight client state management. tRPC provides type-safe communication with the backend when connectivity is available, while React Query handles caching and background sync. Sentry monitors production errors and performance metrics to ensure reliability in the field.

Technical Highlights

• Offline-first with sync mechanism The full product catalog, customer data, and order history are stored in a local SQLite database, with a background sync process that pushes and pulls changes when connectivity is available
• Filesystem-first image strategy The first product image loads from the local filesystem for instant display, while remaining carousel images load lazily on swipe — CDN URLs serve only as fallbacks
• Parallel query optimization Category and product queries use batched parallel execution with pre-resolved image URIs, eliminating render-time lookups and reducing screen load times
• Provisional customer workflow Sales reps can create provisional clients on the spot and immediately place orders, with the client data syncing to the backend for validation when back online
• Custom number keyboard A purpose-built numeric input component optimized for rapid quantity entry during order taking, designed for one-handed use in the field
• FlashList performance Product lists use FlashList with tuned draw distances and optimized item renderers to handle catalogs with thousands of products without frame drops
• Sentry monitoring Full error tracking and performance monitoring in production, with custom breadcrumbs for sync operations and offline state transitions