Executive Summary

Countries like Mongolia and Kyrgyzstan are known to actively exercise nomadic herding lifestyle where a community of herders spends weeks in steppes herding livestock while living in portable tents called yurts with limited access to water and internet. Information websites and applications require modern devices and a stable internet connection to operate. As a result, remote communities are forced to create offline archives of information or stay in the dark until they are back to towns and cities. Our client, the University of Oxford proposed a project idea to tackle this problem and help make information more accessible. 

Mongolia is mostly covered in deserts and steppes making it futile to grow crops. Instead, people rely on livestock like sheep, horses, yaks and such for their survival. Nomadic herders live in small communities across the country herding the livestock together and migrating several times a year to find new sources of water and animal feed. They have been practising such a way of living for around 3000 years. In that time, the modernising country has discovered its wealth in minerals such as gold, iron and uranium. Excavation companies began establishing and acquiring licenses to dig out the minerals. While it helped the country’s GDP to grow (in 2016, it accounted for 21% of the country’s GDP according to the Government's Export department), herding communities have been somewhat affected. In some instances, mining companies would privatise and essentially block access to the limited water source in the area forcing communities to migrate in search of another source. Since people lack education and access to information they are unable to exercise their rights and make official complaints to their government.

Our Approach

Researchers at the University of Oxford proposed a project idea: a mobile application that would present collections of curated articles about the latest news, relevant government laws & regulations, guides on how to exercise their rights, information about mining companies in the area and more. To make it more accessible, the viewed information should remain available to the users once the internet connection is lost. In response to this idea, we proposed to build a progressive web application using web and cloud technologies such as React, Contentful, GraphQL, AWS S3 and CloudFront.

Progressive Web Application (PWA) is a type of software that works using an internet browser just like an average web application. Furthermore, it can be installed on a device and leverage its native features as well as work cross-platform and more. In the context of this project, PWA offers mobile support, offline availability and installability on the device. However, there are certain prerequisites to ensure the web application is PWA-compatible:

• Responsive design,

• Configured secure socket layer (SSL) for HTTPS connection, and

• A modern internet browser supporting service workers (like Chrome).

In addition to these benefits, progressive web apps work cross-platform. In other words, if the device supports modern browsers - it will support the PWA whether it is on the phone, tablet, or PC. Considering the requirements and available features, building a progressive web application was a cost-effective choice for the front-end part of the project.

Another core part of this project is the content management system (CMS). Some of the popular examples of it are WordPress, Ibexa Content and Drupal. These are not the only CMS solutions as there is a vast range of options available with different licensing plans, features and other perks. For the purpose of this project we searched for a solution that would require 

• Minimal effort for initial setup, 

• Little to no effort for maintainability, 

• Highly customisable,

• Support for content internationalisation, and 

• A way to expose data through API (or similar).

Contentful, a cloud-based CMS, ticked all these requirements for us and more. The platform is hosted, managed and maintained by themselves which did not require us to provision and configure any resources for hosting. Instead, when setting up a project, it provides an admin dashboard where users can create content models with required fields. Each field can be customised to have a different appearance, relevant validation rules (for example only files of particular format and size can be uploaded) and localisation as well as set it optional or required. Localisation is not difficult to configure, but there must be a default translation set which was a downside (though we understand why this is required). Lastly, Contentful provides a GraphQL endpoint for querying data by external applications. While initial content model configuration required thorough planning, Contentful was an ideal candidate for the job. 

Lastly, what remained was putting it all together. Contentful is self-hosted and GraphQL endpoint is exposed by default (just need to create API keys) leaving us only with building the content models and inviting users that would help add content. In contrast, the frontend application will require most of the engineering effort to build a progressive web app that would meet all functional and non-functional requirements. While functional requirements are relatively simple, non-functional requirements are the ones that had to be thoroughly considered. After several internal discussions with colleagues, it was decided to build a single page application (SPA) using React, host it in AWS Simple Storage Service and serve the website through CloudFront service. Since SPA would be built with React, the compiled project would mainly consist of JS and CSS files that would be cached in CloudFront. Meantime Apollo GraphQL would be leveraged to pull through data from Contentful using the exposed endpoint and cache it in a browser on a per-query basis. The finished project will qualify as a PWA making it secure, always available and installable on the device.

As shown in the diagram below, an initial visit to the website user would have to first fetch the react app from AWS and then make a second request to Contentful to get data for the homepage. Subsequent interactions would only initiate requests to get data from CMS without affecting the app itself. This becomes even more straightforward when a user installs PWA on their phones. Since it is installed, opening the app will only initiate requests to fetch data. 

Outcomes

After a few months of programming and meetings with the client the University of Oxford, we had a complete progressive web application with Contentful as its data source. The application was built to run on computers, tablets and phones when online and offline. It has a few basic pages to display lists of articles and companies available for users to view as well as filter through using basic criteria. After several training sessions with native research teams, they started adding content which in turn attracted wider attention from companies, local government and media. Right now they are collaborating to bring together important and relevant resources to help its citizens in unfavourable circumstances. Several focus group studies have shown that a couple of design tweaks were needed to improve ease of use and compile a list of basic guidelines to help new users navigate the site. The project is still in its infantry stage waiting for more content to be added prior to an official launch, but involved teams and users are excited and eager to make full use of it.