Offline-First Mobile App for Oilfield Workers
👤 Client: Q2 Artificial Lift Services • 🎭 Role: Full-Stack Engineer • ⏳ Duration: 18 months (2020–2022)
🧑💻 Tech: React Native, Laravel, TensorFlow, Video Streaming, Financial API Integration
⚡ Challenge
Q2 Artificial Lift Services wanted a single mobile app to replace the piles of spreadsheets, manuals, and training binders their field workers carried. The catch was that these workers were often in remote areas with poor internet, and they needed tools that worked offline.
The app had to handle a lot: industrial calculators, financial data visualizations, video training with tracking, and even an experimental AI feature for pump card pattern recognition. And it all had to work smoothly on iOS and Android, even with gloves and harsh outdoor conditions.
🧩 Solution Architecture
I built a cross-platform React Native app with Expo, powered by a Laravel backend for authentication, data management, and video streaming.
The design split features into two categories: offline-capable (calculators, reference charts) and online-only (commodity prices, training progress). That way, workers could keep going even with no signal.
We also built a web admin interface so managers could upload training materials, track worker progress, and manage users, all in one place.
🛠️ Technical Approach
The calculator section was my first major challenge. I had to reverse-engineer formulas from Excel spreadsheets and implement them as mobile-friendly interfaces. The pump calculator plus pump slippage tools required precise calculations with multiple input variables, displayed in a touch-friendly format that worked with work gloves.
For the reference charts, I solved the mobile table problem by implementing horizontal scrolling with sticky headers. Traditional tables don’t work on mobile, so I redesigned the Q2ALS Pump Setting Depth Charts to be finger-scrollable while maintaining data readability.
The commodities section integrated real-time financial data via an external API. It displayed West Texas Intermediate (WTI) plus Brent crude prices with daily performance charts. I implemented Chart.js with touch gestures for mobile interaction plus included an RSS feed for relevant industry news.
The training system was definitely the most complex part. I built comprehensive video progress tracking that monitored whether users watched content completely. I removed fast-forward capabilities for compliance plus generated downloadable certificates upon module completion. The admin web interface allowed managers to create training modules, upload videos, plus track worker progress across the entire organization.
The AI pump card recognition feature used TensorFlow to identify patterns from scanned images. However, the client provided such limited plus poorly categorized training data that the model's accuracy was questionable. I did my best with 16 different pattern types, but this feature highlighted how critical quality training data is for machine learning success.
🎯 Impact
The app replaced paper processes and scattered spreadsheets, putting everything in one mobile tool. Workers could access essential tools like calculators and charts anytime, even offline.
Managers now had verifiable training records and certificate tracking, which was key for compliance. The commodities section gave workers real-time context on market conditions.
💡 Conclusion
This project reminded me how important it is to design for real-world constraints. Big buttons, high-contrast screens, and offline tools made the app usable in the field.
The AI component was a valuable lesson in data quality requirements. No amount of sophisticated modeling can overcome insufficient or poorly categorized training data. Sometimes the most honest thing you can do is set realistic expectations about what is achievable with the available resources.
Building both the mobile app plus web admin interface reinforced my appreciation for full-stack thinking. The worker experience is only as good as the content management tools that support it.