DEV Community

Tiago Rangel
Tiago Rangel

Posted on • Originally published at blog.tiagorangel.com on

Connecting my website with Google Sheets

When I used my old website, there was something I remember I didn't like about it:

Why do I have to edit the HTML code every time I add a project?

Why do I have to copy and paste a lot of code every time I want to add a social media link to my website?

When making my new website, I was going to make the same error, but then I thought that it would be cool to connect it with Google Sheets.

Looks easy, right? Well, the difficult part was getting a service that actually worked. Some were paid, others had a limit.

So I decided to go with opensheet. It's quite easy to use, only some fetch requests.

fetch(
  "https://opensheet.elk.sh/[Sheet ID]/Projects"
)
  .then((res) => res.json())
  .then((data) => {
    data.forEach((row) => {
      addProject(
        row.project,
        row.url,
        row.tags,
        row.description
      );
    });
  });

function addProject(name, url, tags, description, json) {
  // add project to DOM here
}

Enter fullscreen mode Exit fullscreen mode

Looked great! Then I did the same thing for my social media links:

fetch(
  "https://opensheet.elk.sh/[Sheet ID]/Social"
)
  .then((res) => res.json())
  .then((data) => {
    // add social to the dom
  });

Enter fullscreen mode Exit fullscreen mode

Add a very simple loader effect, and it's done! It is quite useful and a huge time-saver, but we always have problems with loading speed.

Top comments (0)