The official Got Paper? app
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.
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...
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
Build
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
Got Paper was created and released over a very short time period:
Release | Timescale | Description |
---|---|---|
Alpha | 2 hours | Initial Vue PWA, design and calculations |
Beta | 9 hours | Initial Vue SPA / PWA |
1.0 | 24 hours | Additional pages, branding, polish, etc |
1.x | 5 days | Multi-person calculations, buy / share / hoard modes, press page, etc |
2.0 | 1 week | Migration to SSR / Nuxt |
2.2 | 2 weeks | Translation to 12 languages, media, video |
2.3 | +1 day | Marketing release |
2.3.1 | +3 days | Final tweaks and release |
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:
Nuxt uses the Yarn package manager
# development server
yarn dev
# generate static site
yarn generate
# add new package
yarn add <package name>
Vue uses the NPM package manager
# development server
npm run serve
# build app
npm run build
# add new package
npm install <package name>
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.
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
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
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:
Thank you, and enjoy!