CatchSmart Quality - Factory Quality Tracking System
CatchSmart Quality was a comprehensive React Native factory quality tracking system deployed at PATA Group's timber manufacturing operations across 3 plants. The system tracked the entire pipeline from raw tree input through chemical treatment to finished wood ready for export, supporting 5,000+ factory workers daily. Khaled evolved from mobile team member to dedicated iOS developer, building custom native AVFoundation camera and barcode scanning modules to replace unstable React Native libraries, plus approximately 20 full native iOS screens for factory managers and engineers. The hybrid architecture served different user personas: React Native for workers, native iOS for management.
Problem Solved
Timber manufacturing required comprehensive quality tracking with reliable offline capability in factories with poor connectivity, plus executive-level analytics and approval workflows that cross-platform React Native screens couldn't adequately deliver.
- •Built custom native iOS camera and barcode scanning modules using AVFoundation/AVCaptureSession
- •Developed approximately 20 full native iOS screens in Swift/UIKit for management features
- •Bridged Swift native modules to React Native using RCTViewManager and RCTEventEmitter
- •Implemented offline-first architecture with redux-persist for unreliable factory connectivity
- •Optimized performance for handling hundreds of daily inspection photos
- •Coordinated with backend PHP developers and manual QA team
- ✓Built custom native iOS camera and barcode scanning modules eliminating crashes, memory leaks, and infinite loops from unstable third-party libraries
- ✓Developed approximately 20 full native iOS screens for factory managers including analytics dashboards, report generation, and approval workflows
- ✓Achieved production scale deployment across 3 factory plants with 1,000-2,000 quality inspections logged daily
- ✓Supported 5,000+ factory workers using cross-platform React Native screens plus approximately 25 managers/engineers on native iOS features
- ✓Implemented comprehensive quality tracking from raw material intake through chemical treatment to export-ready products
- ✓Built offline-first architecture with redux-persist handling unreliable factory connectivity
- ✓Received CTO validation during factory visit, overhearing comment that iOS app was 'much better than Android'
Scale
- • 3 factory plants deployed
- • 5,000+ daily active users (factory workers)
- • 25 management users on iOS-only features
- • 1,000-2,000 quality inspections logged daily
- • Hundreds of inspection photos captured and synced daily
Technology Stack
Challenge
React Native camera and barcode scanning libraries (react-native-camera, react-native-qrcode-scanner) were unstable with frequent crashes, memory leaks, infinite loops, and poor performance.
Solution
Khaled built custom native iOS modules using AVFoundation and AVCaptureSession, bridging them to React Native via RCTViewManager for UI components and RCTEventEmitter for scan events, with Objective-C bridging headers.
Impact
Custom modules achieved faster scan speed, better accuracy, and lower memory usage while eliminating all stability issues.
Challenge
Redux state management exploded into hundreds of action types and deeply nested state trees for inspections, batches, workers, and logistics tracking.
Solution
Khaled organized code carefully by feature domains and learned patterns for managing nested state updates, accepting Redux boilerplate as the cost of predictable state management.
Impact
Maintained manageable codebase despite complexity, building deep understanding of state management at scale.
Challenge
Timber factories had poor connectivity (concrete walls, machinery interference) requiring the app to work flawlessly offline with intelligent sync when connectivity returned.
Solution
Khaled implemented offline-first architecture with redux-persist and AsyncStorage, storing photos locally before sync, with robust retry mechanisms and conflict resolution.
Impact
Workers could complete inspections regardless of connectivity, with reliable sync maintaining data integrity for compliance and audit purposes.
Challenge
Testing the hybrid architecture (native iOS + React Native) required ensuring navigation, camera events, and offline sync worked correctly across both contexts.
Solution
QA team meticulously tested every workflow using Excel test plans and JIRA tracking, with careful coordination on transitions between native and React Native screens.
Impact
Production system maintained reliability across complex hybrid architecture with high stakes for quality control operations.
Situation
PATA Group, one of the world's largest timber manufacturers, needed a comprehensive quality tracking system for their factory operations. The system had to work reliably in factories with poor connectivity while serving two very different user groups: 5,000+ factory workers doing inspections and 25 managers/engineers needing advanced analytics and approvals.
Task
Khaled joined the mobile team and evolved into the dedicated iOS developer, responsible for building custom native modules to replace unstable React Native libraries and creating native iOS screens for management features that required capabilities beyond cross-platform limitations.
Action
When React Native camera and barcode libraries proved unstable with crashes and memory leaks, Khaled built custom native modules using AVFoundation and AVCaptureSession, bridging them to React Native through RCTViewManager and RCTEventEmitter. He developed approximately 20 full native iOS screens for management features including analytics dashboards, report generation, approval workflows, and logistics tracking. For reliability, he implemented offline-first architecture with redux-persist handling factory connectivity challenges. He optimized performance for hundreds of daily inspection photos through lazy loading, compression, and aggressive memory cleanup.
Result
The system deployed across 3 factory plants, supporting 5,000+ workers logging 1,000-2,000 inspections daily. Custom native modules eliminated all stability issues from third-party libraries. During a factory visit, Khaled overheard the PATA Group CTO telling CEO Madara that the iOS app was 'much better than Android,' validating the investment in native iOS features. The project transformed Khaled from junior iOS developer to hybrid mobile architect.
Technical
- • Building custom React Native native modules from scratch
- • AVFoundation and AVCaptureSession for camera and barcode detection
- • Bridging Swift to React Native via RCTViewManager and RCTEventEmitter
- • Redux state management at enterprise scale
- • Offline-first architecture with intelligent synchronization
- • Performance optimization for handling hundreds of daily photos
Soft Skills
- • Maintaining fluency in both Swift/UIKit and React Native simultaneously
- • Coordinating with backend developers on API contracts
- • Working with manual QA teams using Excel and JIRA workflows
- • Understanding factory workflows and quality control requirements
Key Insights
- 💡 Hybrid thinking is invaluable - knowing when React Native suffices and when to drop to native
- 💡 Building custom native modules reveals React Native's inner workings at a fundamental level
- 💡 Offline-first is not theoretical - factory connectivity made it mandatory
- 💡 Performance optimization becomes constant process with real-world constraints