fbpx Skip to content

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

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.

Android web-app front-end

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.

Android web-app filteres resultsTheme 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

 

 

Click on the images to enlarge.

Posted in projects

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

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…
Read More
single page donations app

Single Page Application – Donate to a good cause with a Payment Gateway and Email Transactions.

Front-End Description I decided to build this Single Page Application, with vanilla JavaScript ES5 & ES6 syntax, with a custom self-contained STATE. A STATE is like a memory place-holder for when you need to store data that you want to reuse. It also keeps track of login sessions. Most importantly is to keep track of…
Read More
JavaScript App Desktop API

Small JavaScript APP, VIN number lookup for Proficient Auto Transport

There is no GO BIG or GO HOME here. I also enjoy working on small projects and cater to smaller businesses! Not just that, it is because that small client of today can be a BIG client down the road…#facts   Technical Details. Build a small basic JavaScript App that connects to an external API…
Read More
×
Scroll To Top
0 Shares
Share
Share
Tweet