Got Paper

The official Got Paper? app

Summary

Got Paper is a Vue / Nuxt application to calculate personal toilet roll usage, in response to the panic-buying situation that characterised the spread of the Coronavirus pandemic in early 2020.

The application was initially developed in 9 hours, then released within 24 hours on social media. It spread rapidly in round the world with 150K users in the first week, was featured in national and international press, and translated into 12 languages.

See the live site for the full back story.

Open Source

Having mainly accomplished its goal of both raising awareness and providing a useful tool, it has now been Open Sourced so others may either use the codebase as a foundation to develop additional applications quickly, or simply as a learning resource.

The application solved a lot of problems in a very short space of time, committing mainly to master and sometimes pushing things live as soon as possible. Not all the code or commits are perfect, but much of it is to a high standard, following best-practices, and should give developers new or learning Vue or Nuxt an idea of how to code an app that can reach 100s of thousands of people.

If you want to show your appreciation, you are very welcome to...

Features

Application:

• Highly granular controls / calculation
• Supports varying usage, people and product
• 3 modes: buying, sharing, hoarding
• Custom UI, design and branding

Technical:

• Runs as a static-rendered, progressive web app
• Mobile-optimised / responsive design
• Translated into 12 languages

Technical

Build

• Vue JS - application framework
• Nuxt - static site generation

Packages

• Vee Validate - validation library
• Vue Agile - carousel component
• Vue i18n - translations library
• Portal Vue - for modals
• Vue Proportion Directive - proportional scaling directive

Resources

• Bootstrap 4 - UI framework
• Adobe Fonts - Brandon Grotesque font
• Unicons - SVG icons
• Flag Icons - by Muharrem Şenyıl
• 50 Bathroom Icons - from Envato Marketplace

Hosting

• Netlify - free static site hosting
• Google Domains - domain management
• Google Analytics - analytics

Technologies

• JavaScript
• WebPack
• Node JS
• SCSS

Release timeline

Got Paper was created and released over a very short time period:

What is missing above is the additional effort to manage design, branding, press and translations, etc but it gives a rough idea of the development timeline between 15th and 26th March 2020.

See all releases (with screenshots) here:

• https://github.com/davestewart/got-paper/releases

Development

v2.x – Nuxt SSR

Nuxt uses the Yarn package manager

# development server
yarn dev

# generate static site
yarn generate

# add new package
yarn add <package name>

v1.x – Vue SPA

Vue uses the NPM package manager

# development server
npm run serve

# build app
npm run build

# add new package
npm install <package name>

Tools and Assets

The i18n/utils folder has two tools to aid with translations:

• a spreadsheet converter
• a Netlify redirects creator

See the README in that folder for more info.

The assets/sketch folder has:

• a Sketch document with all the icons laid out

The Nuxt PWA module did unfortunately not support Android masked icons at the time of publishing, but may do now.

License

This software is MIT licenced, which means you can pretty much do whatever you want with it, but I would request that you don't use:

• the original branding, which includes:

  • font choice of Adobe Brandon Grotesque
  • the Got Paper? design, logo, icon and marques

• any software ids or keys which may be in the source code, including:

  • Amazon
  • Google Analytics
  • Google AdSense

• any emails or URLs that relate or refer to Got Paper or http://got-paper.com

Thanks

This project has benefitted from the help of various people.

A very special thanks to Alex Lichter for the Nuxt translation and initial i18n setup.

Those who took the time to provide translations:

• German - Daniella Somerscales and Alex Lichter
• Swedish - Sanna Porter Öhman
• Czech - Petra Kovarova
• Spanish - Fernanda Sandoval
• French - Aoife Hegarty and Arianna Giguere Crosher
• Chinese - Chiu Wong
• Italian - Paolo Coruzzi and Alessia Musciano
• Russian - Aleksei Zolotykh and Zaneta Priscepionkaite
• Greek - Apostolos Pistolas
• Serbian - Ivana Matosevic

Last words

Finally, this project was a lot of fun to make and promote, even if fairly gruelling at times.

If you feel like you benefited from the sharing of source code and you'd like to say thanks, you can "buy me a coffee" via the donations site Ko-fi:

Otherwise, feel free to follow me on Twitter at:

• @dave_stewart

Thank you, and enjoy!