- 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.
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.
For the Android version, I decided to compile the React Single Page App via PhoneGap.
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.
- 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.
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.
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…