Skip to content


Repository files navigation

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

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 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

Here the variables you might need are as follows

Variable Value
spreadSheetId 1AzT-z51EMqI_-Fe98434p_AP8Nq343rbheLPUfnw1FGCNo
sheetId 1196872439

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!

npm run dev

Screenshot 2024-02-11 at 12 05 30 AM


Sample repository showcasing how to create a Todo app with React and Google Sheets as the backend







No releases published


No packages published