DEV Community

Cover image for Google Sheet + Google Drive = ๐Ÿคฏ - Part 1
Luke
Luke

Posted on

Google Sheet + Google Drive = ๐Ÿคฏ - Part 1

This is the 3rd post in my portfolio series. In a previous article, I wrote the way I implement dev.to API. I will tell you about my journey to find the way to show my repository on portfolio

This is the hardest part (with me) in this series, I repeat, the hardest part (with me)!!! ๐Ÿคช

Begin

Problem

As I said, I am a back-end guy so I want to try to make everything automatic, less manual as I can. Like articles section, I want projects section work as the same. The first solution I think is GitHub RestAPI, its usage is quite simple BUT ... when I implemented it into 80%, I realized it does not get a thumbnail of project, I be like image below when I know it
suprise
Although I can use default image for all projects, but I don't want ๐Ÿ™„. I started to research with the support of Mr.KnowEverything - a.k.a Google, and no hope ๐Ÿ˜‘.

Solution

After many and many searches, when I prepared to give up, I saw FreeCodeCamp's post about using Google Sheets to build CMS. An idea appeared in my head ๐Ÿ’ก what if I build the CMS to store repository info - sounds possible huh?

When I found the way and connected with some research, I decided to combine Google Sheets and Google Drive to solve it ๐Ÿ˜Ž.

idea

System Design

Here is the sketch design of my solution

sysdesign

System Design

In this design, it will have 3 main components:

  • API Gateway: Access to get repository info (git_url, thumbnail_id, etc)
  • Google Sheets: Act like SQL data table, store repository info
  • Google Drive: Store the thumbnail of the repository and return a unique ID to save into the sheet (We will use this to load the thumbnail on the website ๐Ÿ˜‰)

Conclusion

Sound like my solution is a little bit messy, so if you have any suggestions, please tell me ๐Ÿค—

In the next article, I will show how to implement this in code.

Happy coding and learning!

Top comments (0)