HomeCategories

Google sheets as realtime database or CMS

This was just a small POC showcasing the integration of different tools.

  1. Google sheet is used as a source of data.
  2. Google cloud platform is used to access google sheets data.
  3. Netlify is used to deploy front-end.
  4. Zapier is used to automate deployments whenever google sheet is updated.

Here’s the google sheet which has simple table of data Google Sheet's screentshot

And the front-end looks like this Cafe's Menu Card

This removes the need of CMS and admin interfaces for tiny apps.
Admin can simply update data in his google sheet and it will trigger a new deployment of front-end app.
After the deployment the new data will reflect on refreshing the web page.

Here is the step by step procedure:

  1. Create a new project in GCP.
  2. Enable google sheets api.
  3. Add a service account to this project.
  4. Create credentials and get the private keys json.
  5. Share the sheet with the service account created in step 3 and grant edit access.
  6. Use any npm module which converts google-sheets to json format.
  7. I have used gatsby-source-google-sheets.
  8. Set config using private keys from step 4 to allow accessing data from that sheet.
  9. Create UI layout and put the fetched data at required places.

Source code is available here.

Have fun!

- Ayush 🙂