Since the opening of our Lausanne office, a person who shall remain anonymous collected the most epic — from weirdest to funniest — statements made in the open space to fulfill a constantly growing database of quotes. From post-its to Google Docs to Google Spreadsheets, it definitely deserved a better interface to read, filter and
 vote!

Setting up the development environment

After having done some projects with it, it was clear React would be a good choice. But unlike the previous occasions, I did not want to waste time setting everything up; experiments are about coding right? There's plenty of React boilerplates out there and whereas some are great, most usually include too many tools and dependencies.

Luckily, Facebook recently released their own React app generator which is probably the best attempt so far. The packaging is handled by WebPack, ES6 features are available thanks to Babel, and your code stays clean and consistent thanks to EsLint. Oh, and Autoprefixer handles any CSS vendor prefixes required here and there. No router, no Redux, no tests, no server-side rendering, no CSS preprocessor, 


After generating an app, you end up with a rather clean tree and two main scripts in your package.json:

  • npm start to run the development server with live reload (≠  hot reload)
  • npm build to package everything in a sub-folder, ready to be deployed to Github pages or anywhere you like

Their WebPack setup supports the import of common files such as images, videos and even JSON. The build task is pretty smart and uses the homepage field of your package.json to correctly generate paths to your assets. And finally — the coolest feature — the ability to escape from the generator lockup by simply running npm run eject. All the dependencies, configuration and scripts will be moved to your project, ready to be customized.

Interacting with the spreadsheet

Let's talk a bit about the app now. As the quotes were already in Google Spreadsheets I thought it would be fun to experiment a bit with its API. The documentation is definitely not the best I've seen so far but the examples guided me enough to finally being able to read and write in the spreadsheet.

I used the official  Google Sheets API version 4, initialized through their JavaScript API Client Library. My first attempt was to connect with a token but this solution didn't allow me to write into the spreadsheet. I decided to move to oAuth which works like a charm for both reading and writing. It's actually even more useful as the spreadsheet sharing policy is respected. People not authorized to interact with the document simply get an error. Better than a Basic Auth isn't it?

The load time might be the biggest issue with this solution. It takes a bit more than 2 seconds for the quotes to show-up. Most of the time is spent for the load & initialization of the API. Nothing unbearable though.

Most of the interactions with the API are done in this file if you're interested by the code.

The voting system

Now that the quotes are fetched and displayed, I thought it would be cool to let people vote. Saving the number into the spreadsheet is easy. Keeping track of who liked what is a bit more complex. It wasn't worth the effort to have a secure way to validate the uniqueness of likes. Therefore I decided to save this information in the browser LocalStorage. Of course this means people can vote again if they want to, but the audience is pretty small and there's no point to rig the results, so


Here we are, a simple React app with authentication using an uncommon back-end to save its data. All hosted for free and built in a couple of hours. Pretty cool I'd say. Hope you enjoyed it !

You can experiment with the demo app even if likes won't save (on purpose 😈) and browse/fork the source code on GitHub.