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)!!! 🤪

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

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

System Design

Here is the sketch design of my solution

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!