Water Contaminate Report Mobile App_

Intro

Developed a Water Quality Contaminated Report Application for a retail chain in the USA where a customer can view, instore at a kiosk, the contaminants that are present in their drinking water. Based on this data returned the in-store salespeople can recommend the filtration system that the customer can purchase.

The app serves two diffirent platforms.:

• On an Android Tablet, in native Android container, set up with a kiosk box for customers to interact with.
• As a Web-app for the dealers to be used as an information tool on the official website.

Some of the Mobile App and Server functionality.

Kiosk Tablets

• React App was compiled into Android App.
• Tablets where locked to only display the app.
• Sales staff could search the contaminate water levels for a customer's area.
• Customer could be email on the results.

Mobile APP (tablet)

• Communicated with external 3rd party API to retreave the contaminated levels found in water.
• Additional API request for more detailed information and graphs.
• Send Customer details to the Google Firebase Server for email processing.

Server

• Capture Customer's details and search results.
• Managing Emails and connected to the MailGun API for sending.
• Connected to the Hubspot API.

Front-end

Customers can search via their zip code.

API Integration.: 2x list of contaminates are returned, for the customer’s location, displaying which ones can be filtered out by the filtration system and another list of contaminants that are also present in their drinking water.

Each contaminates can be inspected for more information and showing a graph of the current value, health risk value, national average & state value.

API Integration.: Customers have the option to email the results to themselves.

API Integration.: The current store location can be selected by the store manager.

Back-end

Custom API incoming endpoint(s). For the server to receive the customers and contaminated details from the Web-app or Android-app and store it in the database to be passed back on to the customer. For the App to retrieve current store details and other data.

MailGun API connection for sending the transactional emails to a custom email template.

HubSpot API integration (Customer Relationship Management).

Theme Framework

Bootstrap was selected for the layout and styling of the app. I wanted to use a proven theme framework that can handle all the heavy lifting so that I did not have to worry about responsiveness issues.

Technical Information

I decided that React(my ultimate new platform of choice) would be a perfect fit for this project as a lot of API calls would need to be processed and we are going to render different screens based on user interaction. A more refined app-state was also required to keep track of the current app’s functionality and data so I opted to use the Context API from React.