Real-Time AQI Monitoring Progressive Web App
About the client
The client is a data analyst with vast experience working with retail chains like Walmart. This App was developed for the Government of Thailand, explicitly serving Nan Province.
Challenge
Air pollution is a global problem and one that the world has been trying to tackle for almost a decade. It is increasing at an alarming rate. Hence, there is a need for a platform that brings air pollution to everyone’s attention.
Solution
- The first step was to research Map toolkits available in the market, for example, Google Maps, Open Street Map, MapBox, etc. Since the entire App is map driven, this step was crucial. We also did a POC and finalized MapBox as our Map toolkit.
- In the second phase, i.e., the design phase, our Business Analysts and User Experience/User Interface (UX/UI) team collaborated with the client to develop Click-Through-Mockups using the Axure prototyping tool.
- The mockups transformed the product’s functional & aesthetic requirements into a working prototype.
- The mockups allowed the client to ‘play’ with the prototype and helped navigate the different workflows. This also enabled the client to freeze requirements in the design phase and understand what the developed product would be like.
In the development phase, the product was developed using Agile methodology with some functional features at the end of the two-week sprints.
Technology Used
Prototyping
- Axure
- Photoshop
- Adobe XD
Frontend
- HTML
- SCSS
- Angular JS
Backend
- Node.js
Map Toolkit
- MapBox
Mobile Apps
- PWA
Hosting
- AWS
CI/CD
- Jenkins
Third party API’s
- AQI Sensor
- Weather Forecast
Multi-Lingual Support
- Thai
- English
There was a requirement for creating a Progressive Web App, so we took care of a few things from the beginning of the development phase. The App has multilingual support in English and Thai language.
Benefits
Mobifilia’s in-house team completed the product’s first version from Product Design to Product Deployment.
Mobifilia’s in-house team completed the product’s first version, from Product Design to Product Deployment.
The client was carefree as the entire cycle from product design to deployment was done by Mobifilia’s team. Also, the client could see & get feedback from the stakeholders at each step of the design & development process.
- Complete custom product development
- Easy to design, develop, test, deploy new features
- Continuous Integration & Continuous Delivery Built-In
- Progressive Web App
- Multilingual support