Projects A water quality kiosk app that also runs on the web
A water quality kiosk app that also runs on the web
Customers check their tap water’s contaminants in store or online, so staff can recommend the right filter.
- How long
- 2019
- My role
- Software architechtureDevelopment, Q&A, Support
- Kind of project
- New systemMedium project
The problem.
HANS Premium Water, a US water filtration retailer, wanted in-store customers to see what’s actually in their local tap water, so sales staff could recommend the right filtration system, and wanted the same tool available as an information page on their website for dealers.
What I built.
One React app, compiled two ways: as a locked-down kiosk app on Android tablets in store, and as a web app for the retailer’s dealer network. A customer enters their zip code, and the app returns two lists: contaminants the retailer’s filters remove, and other contaminants also present in their water, each with a graph comparing the current value, health risk level, and national and state averages. Customers can email themselves the results.
What they got.
One tool that works both as an in-store sales aid and as an online resource, without maintaining two separate builds.
Screens from the build.
For your technical person
Stack. React, compiled into a native Android container (Adobe PhoneGap) for the in-store kiosk tablets, and deployed separately as a web app for dealers on the retailer's website. React was chosen because the app ran many API calls and switched screens based on what the user did; the Context API held the app state. Styled with Bootstrap. Node.js and Express.js back end, with Google Firebase handling the email processing.
Kiosk tablets. The tablets were locked so they could only show the app. Sales staff searched a customer's zip code, and the store manager set which store the kiosk belonged to.
Water data. A third-party water-quality API returned two lists for the customer's area: contaminants the retailer's filters remove, and other contaminants also in the water. A second call fetched detail for each contaminant, with a graph of the current value against the health-risk level and the national and state averages.
Back end and integrations. Custom endpoints received the customer's details and search results from both the kiosk and the web app, stored them, and served store details back to the app. MailGun sent the results email from a custom template, and every customer was passed to HubSpot as a CRM contact.
Timeline. 2 months, 2019.
Related work.
The service behind this project
An app your customers or staff will actually use, and someone to look after itRunning into the same problem? Tell me about yours.
+27 87 150 9305Monday to Friday, 09:00 to 20:00 SAST. Or email info@antondevilliers.com.