SiteSheet - Convert Google Sheet into API or  Website in a Snap.

SiteSheet - Convert Google Sheet into API or Website in a Snap.

Featured on Hashnode

SiteSheet is a simple web app that allows you to convert google sheets instantly into API or you can make websites out of Site Sheet.

Inspiration 🦾

Well, a few days back I shared a trick to easily use google sheet as an API, but there was a lot of hard work involved in that, I just want that trick available to every developer just two clicks away...

But later I got more deeply devoted to this and thought why not make I could make an instant website builder out of this, there are many people who don't know how to code, even editing JSON or HTML files is quite difficult for them(one year back I was the same). so, I thought let's build a tool that allows you to make a website out of google sheet and for developers the possibilities are unlimited.

Demo 🧐

Converting a google sheet into API (4).gif

Converting a google sheet into a website (6).gif

just make sure your google sheet is published on the web before converting it into a website or API.

well, I will recommend you to try it ones yourself...

How does it work?? 🤔

well ... every google sheet has a unique id/name ( a long random string after this app is extracting that from the URL the user is inputting and using that it is generating the API endpoint. once we have the API endpoint everything is done. (you can API as the waiter in a cafe or restaurant it basically helps to get data from the server. just like a waiter helps you to place an order and get your food from the chef ) Untitled.png

also here every time the website is rendered on the client site, and if any change is done in the google sheet, it would be reflected immediately.

How I create it 🤓

warning this part might be boring

Well, firstly I am a beginner with web dev so I decided to go with React, I am taking URLs in input from the user and have made few functions to extract the unique id of google sheet. In all the web templates the unique id is passed through the URL Parameters and to handle API's I am using Axios, also Funnies is also included so that users have a great mood while the website is loading. All errors are handled using React - Toasty. There are great packages, maybe you can use these in your own project.

I am using React for this project, and some awesome npm packages such as Axios to handle API requests, funnies to make users laugh when the data is being fetched. React Router to handle routing and react-toasty to handle all errors.

Features 🍨

Future Roadmap🔮

So, building this project was fun but it's not the end.

  • I will be adding more templates.
  • Support for google from (in google from the response can be extracted into a google sheet, so it can work )
  • Support for custom domains
  • Much Much more...... (please give me more ideas in the comment section )

The whole project is open source, Please contribute to it. (if you find any bug free to report it.)

Github Repo Link:-

Project Link:-

Also, thanks to Hashnode and Vercel for organizing such an awesome event. 🤞Wish me luck.

Did you find this article valuable?

Support Gaurav Tewari by becoming a sponsor. Any amount is appreciated!