https://github.com/kevinadhiguna/react-antd-googlesheet

A React app styled with Ant Design that sends input data to Google SpreadSheet 📝 📊
https://github.com/kevinadhiguna/react-antd-googlesheet

ant-design google-spreadsheet reactjs sheet-best spreadsheet

Last synced: 2 months ago
JSON representation

A React app styled with Ant Design that sends input data to Google SpreadSheet 📝 📊

• Host: GitHub
• URL: https://github.com/kevinadhiguna/react-antd-googlesheet
• Owner: kevinadhiguna
• Created: 2021-04-22T17:47:39.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-08-17T03:37:05.000Z (over 2 years ago)
• Last Synced: 2025-01-11T13:17:53.423Z (4 months ago)
• Topics: ant-design, google-spreadsheet, reactjs, sheet-best, spreadsheet
• Language: TypeScript
• Homepage:
• Size: 484 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Ant Design Google SpreadSheet

### Mobile Device-friendly :



### on Laptop :



### Demo :



### Result :






## How to Run :

1) Sign In on [Sheet Best](https://sheet.best/).

2) Create a Google SpreadSheet :




![image](https://user-images.githubusercontent.com/43397636/115831620-0c857d00-a43c-11eb-8865-11b0e6bc148e.png)

3) Share link of your Google SpreadSheet :




![image](https://user-images.githubusercontent.com/43397636/115831825-4c4c6480-a43c-11eb-965a-4f084ecbfb16.png)

4) Insert your Google SpreadSheet link to connection details in Sheet Best :




![image](https://user-images.githubusercontent.com/43397636/115832118-b36a1900-a43c-11eb-8178-c8459264f687.png)

5) Create an environment variable named `.env` based on `.env.example` in which you will put a connection url to Sheet Best.

6) Copy the connection URL and paste it to your environment variable named `REACT_APP_SHEET_URL` :

![image](https://user-images.githubusercontent.com/43397636/115832392-0f34a200-a43d-11eb-886d-238693a105cb.png)

Just like this :




![image](https://user-images.githubusercontent.com/43397636/115832814-8833f980-a43d-11eb-8d7c-4eafb1843fc1.png)

7) Open terminal and change directory to the project directory.

8) You can run:

```

yarn start

```

Runs the app in the development mode.\

Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\

You will also see any lint errors in the console.

9) Input values to columns.

10) Submit it and see your input data is automatically inserted to your GoogleSheet 🎉




![Hello !](https://api.visitorbadge.io/api/VisitorHit?user=kevinadhiguna&repo=react-antd-googlesheet&label=thanks%20for%20dropping%20in%20!&labelColor=%23000000&countColor=%23FFFFFF)