Building an offline-first PWA in 48 hours with Vue.js + TailwindCSS 2

Building an offline-first PWA in 48 hours with Vue.js + TailwindCSS

Another year, another Zoohackathon; 48 hours in the same building with a bunch of nerds, all working together to address wildlife conservation. This year was a blast.

Our problem statement:

Empower thoughtful idea exchange for protecting livelihoods activities, while being mindful of wildlife.

Challenge Overview:

Local communities around the world have a number of approaches for sustainable use of natural resources, including the use of wildlife. These activities have also contributed to the learning on how to co-exist with wildlife. Help local communities exchange tips and tricks to protect their crops and livestock without harming wildlife.

  • Build an App that enables people to exchange ideas and best practices for protecting crops and livestock.
  • Find a way for local authorities to share best practices on human-wildlife conflict with communities that need the information.
  • Create a path for communities to share longer-term feedback on actions taken to protect both crops, livestock and wildlife (what worked, what didn’t).
  • Create a path for communities to share long-term feedback on actions taken to prevent poaching activities (what worked, what didn’t)

Our solution:

Inspiration

The inspiration for getmmôgô is to establish connections and build closer communities, regardless of distance. “Mmôgô” is the Setswana word for “together”, to emphasize that we want our users to come together to form one large community with themselves and nature. To promote the general well being of the whole community, we thought that the best way was to share information on conservation and sustainability, easily. With relatively low internet access and rising cellphone use, offline information sharing seemed to be the best route.

What it does

getmmôgô allows users to write their own articles and share them even if they are offline. When a user has an internet connection they are able to browse any article currently on the website and download any of them for future browsing and sharing. getmmôgô also allows authorities and verified organizations to create and share best practices on human-wildlife conflict, ways to prevent poaching, and methods for sustainable income.

How we built it

getmmôgô was built as a progressive web app to have functionality offline and was written with Vue.js. We used the REST API to request information from our database to display different articles for our users. LocalStorage was a key feature to store any information the user wanted to keep without an internet connection. We also allow users to share their downloaded data with other users via QR code and camera access with the getUserMedia API.

Challenges we ran into

One of the challenges we ran into was finding the optimal way to share data offline. Our initial idea of using QR codes became a challenge after difficulty reading them and not being able to generate enough data for sufficient information sharing.

Accomplishments that we’re proud of

One accomplishment we had as a group was to build a web app that can run offline.

What we learned

Two of us came from little-to-no javascript experience and were able to pick it up along the way, as well as Vue.js. We were also able to learn how to build a progressive web app with offline functionality.

What’s next for getmmôgô

Finding an optimal way to send data offline or compressing our data to be more efficient in sending QR codes. We also want to be able to translate the website into other languages to be more inclusive of the diverse culture in Africa. We will also need more users to add more articles over time.

Built With

REST API, JavaScript, JSON, localStorage, progressive web app, qrcode, Vue.js, TailwindCSS

Check it out

Prototype: https://www.figma.com/proto/7lIaTXxoHqCwP5JZHTwXEt/getmmogo?scaling=scale-down&node-id=40%3A1163
Repository: https://github.com/stegosource/mmogo
Project URL: https://getmmogo.netlify.com/
Presentation: https://docs.google.com/presentation/d/1u9bD-YouJRYSBHIbwKaMWqW_L9SpJ0Cl9ItBmrF468g/present
Devpost: https://devpost.com/software/getmmogo