site-logo

Water Contaminate Report App build for Web-based and Android platform using React & NodeJS

Task Description
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 runs on two platforms.:
 
  • On an Android Tablet, in native Android container, set up with a kiosk box for customers to interact with.
  • The app is also available as a Web-app for the dealers to be used as an information tool on the official website.
 
The front-end: Build with React, Context API and compiled with web pack, babel, and PhoneGap.
The back-end consists of a custom Node.js Express server build on Google’s Firebase platform.

Front-end

Description

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.

React was/is build with JavaScript and it a framework developed, by Facebook, for Single Page Applications. On its own its another JavaScript library, but eventually it becomes a proper framework when you add all the additional components it require for example like Redux & Redux Router.

For the Android version, I decided to compile the React Single Page App via PhoneGap.

PhoneGap is a native wrapper for JavaScript, HTML & CSS. That compiles your code to run in a native container on Android or iOS.

PS this is the cheaper solution for mobile application development, and works great for smaller businesses on a lower budget, but if you want a natively developed Android or iOS app I do that to.

The beauty of using React for this project is that I can develop one app, but one app that can run on multiple platforms, like in this case a Website and Android platform. It just requires some conditions and flags to tell the app, “hey you are running on a Website now so use these methods” or “hey you are running on an Android platform now, so use these methods”. Its like amphibious vehicle, expect it does not lose its functionality or speed due to its multiplatform nature.

Functionality:
  • 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.

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.

Back-end

For the back-end, I chose Google Firebase. Google Firebase is an excellent cloud platform especially if you want to run Single Page Apps or as a back-end server for Mobile Apps. I used Google Firebase Functions to deploy my custom build Node.js + Express server and Google Cloud FireStore as the database.

Google’s Cloud Firestore is a document-based-type database model, instead of the classic Realational Database-type, but much, much faster and more flexible. You can change your database schema’s on the fly, something that was always a pain with Realtional Databases like MySQL or SQL.

The back-end consist of the following.:

  • 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 connection.
  • And some more…
Android web-app remainder filter results

Front-end

Description

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.

React was/is build with JavaScript and it a framework developed, by Facebook, for Single Page Applications. On its own its another JavaScript library, but eventually it becomes a proper framework when you add all the additional components it require for example like Redux & Redux Router.

For the Android version, I decided to compile the React Single Page App via PhoneGap.

PhoneGap is a native wrapper for JavaScript, HTML & CSS. That compiles your code to run in a native container on Android or iOS.

PS this is the cheaper solution for mobile application development, and works great for smaller businesses on a lower budget, but if you want a natively developed Android or iOS app I do that to.

The beauty of using React for this project is that I can develop one app, but one app that can run on multiple platforms, like in this case a Website and Android platform. It just requires some conditions and flags to tell the app, “hey you are running on a Website now so use these methods” or “hey you are running on an Android platform now, so use these methods”. Its like amphibious vehicle, expect it does not lose its functionality or speed due to its multiplatform nature.

Functionality:
  • 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.

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.

Back-end

For the back-end, I chose Google Firebase. Google Firebase is an excellent cloud platform especially if you want to run Single Page Apps or as a back-end server for Mobile Apps. I used Google Firebase Functions to deploy my custom build Node.js + Express server and Google Cloud FireStore as the database.

Google’s Cloud Firestore is a document-based-type database model, instead of the classic Realational Database-type, but much, much faster and more flexible. You can change your database schema’s on the fly, something that was always a pain with Realtional Databases like MySQL or SQL.

The back-end consist of the following.:

  • 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 connection.
  • And some more…
GO BACK : PROJECT-PAGE