HANS Premium Water – Contaminate Report App

Project Overview

Developed for HANS Premium Water (USA), this custom React application allows customers to analyze local water contamination data in real time and receive personalized reports.
The app was designed for use in retail kiosks and as a web-based sales tool, empowering store associates to recommend suitable filtration systems based on regional water quality.

The system integrates multiple APIs — including environmental data services, Mailgun for email delivery, Firebase for storage, and HubSpot for CRM synchronization — to form a connected retail experience.

---

Architecture Overview

Dual-Platform Deployment

• Android Tablets (Kiosk Mode): React app compiled with Adobe PhoneGap, installed in a secure kiosk environment for in-store customer use.
• Web Application: Same codebase deployed online for dealers and sales representatives.
• Backend: Node.js + Express middleware with Firebase Cloud Firestore handling session data, API routing, and CRM synchronization.

Data Flow

1. Customer enters ZIP code into the kiosk or web app.
2. The app retrieves contamination data from third-party APIs.
3. Results display contaminants, their safe levels, and filtration recommendations.
4. The customer can email themselves the report, powered by Mailgun.
5. Lead data is synced to HubSpot for sales tracking and follow-up.

---

Functionality Highlights

Frontend

• Built in React using Context API for shared app state.
• Responsive design built on Bootstrap for web and touchscreen kiosk interfaces.
• Real-time charting of contaminant data, comparing:
  • Local readings
  • National averages
  • State benchmarks
  • Safe health values
• Store managers can configure their store locations dynamically within the app.

Backend & API Integrations

• Node.js + Express middleware for data capture and routing
• Firebase Cloud Firestore for session data and user interactions
• Mailgun API for automated, tracked customer report delivery
• HubSpot API for CRM and analytics
• Secure token-based endpoint authentication
• Data normalization for varied API result formats

---

Security & Infrastructure

• End-to-end HTTPS encryption
• Environment-based API key storage
• Firebase access rules for data isolation
• Offline caching for kiosk reliability
• Sanitized input handling to prevent API misuse

---

Business Impact

“Our in-store kiosks transformed the customer experience. They could see what was in their local water instantly and understand exactly why our filtration systems mattered.”

Key Outcomes

• Customer engagement increased through interactive kiosks
• Lead generation fully automated via HubSpot integration
• Average consultation time reduced by 80%
• Sales team empowered with live local data and visual analytics
• Foundation established for future IoT-connected filtration systems

---

Legacy Context

This project marked an early example of Anton’s cross-platform React development — combining data visualization, API orchestration, and CRM automation — years before these architectures became standard in modern SaaS environments.
It set the foundation for Villiers Vision Works’ approach to data-driven retail technology, uniting UX design, cloud services, and backend automation under one seamless experience.