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

And the front-end looks like this

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 🙂