GitHub - apicodev/example-react-todo-google-sheets: Sample repository showcasing how to create a Todo app with React and Google Sheets as the backend

Todo Example with Apico Google Sheets

This example showcases how you can build a simple Todo application with Google sheets as a backend.

Running the project

Setup the repository

Clone the repository into your machine

$ git clone https://github.com/apicodev/example-react-todo-google-sheets.git

CD into the reposity and install the dependencies

$ cd example-react-todo-google-sheets
$ npm install

Create a Google Sheet Integration in Apico

Login to your Apico account and create a new Google sheets integration. Note the integration ID in the Readme.md file.

Create an Empty Google sheet in your Google Account

Login to your Google Sheets account and create a new Google Sheet and note down the URL

The URL should look something similar to this

https://docs.google.com/spreadsheets/d/1AzT-z51EMqI_-Fe98434p_AP8Nq343rbheLPUfnw1FGCNo/edit#gid=1196872439

Here the variables you might need are as follows

The name of your sheet/page or SheetName will be displayed at the bottom of the google sheets page. Optionally you can find the name and sheetId (gid) via the Get Spreadsheet API.

Replace the variables in the code

Open the /src/api/sheets.ts file and replace the variables in the following lines

...
const apicoIntegrationId: string = "<Replace with your apico gsheet integration id>";
const spreadSheetId: string = "<Replace with your google sheet id>";
const sheetName: string = "Sheet1"; // replace with your sheet name
const sheetId: number = 1196872439; // replace with your sheet/page gid (not sheet name)
...

Finally run the project!