Real-Time AQI Monitoring Progressive Web App
Real-Time AQI Monitoring Progressive Web App

Real-Time AQI Monitoring Progressive Web App

Real-Time AQI Monitoring Progressive Web App
NAN AIR Logo

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.

Pollution Graphic

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.
Realtime AQI Monitoring Progressive Web App Screenshots

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
  • AxureAxure
  • Photoshop
  • Adobe XD
Frontend
  • HTMLHTML
  • SCSSSCSS
  • Angular JSAngular JS
Backend
  • Node.jsNode.js
Map Toolkit
  • MapBoxMapBox
Mobile Apps
  • PWAPWA
Hosting
  • AWSAWS
CI/CD
  • JenkinsJenkins
Third party API’s
  • AQI SensorAQI Sensor
  • Weather ForecastWeather Forecast
Multi-Lingual Support
  • Thai FlagThai
  • English FlagEnglish

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

Interested In Our
Services? Tell Us About
Your Project!

What Happens Next?

  • null
    Schedule a discovery session with our product expert
  • null
    We gather all your requirements to best estimate your project
  • null
    You get a proposal with cost and timeline we stick to