Aeta Ako, Pilipino Ako Foundation, Inc.
This is a Gatsby.js website for the Aeta Ako, Pilipino Ako Foundation, Inc. The foundation needed an online presence where they could reach donors locally and internationally. Our collaboration resulted in a website that features localization using i18n and updates from their Twitter account using Twitter API to supply content for their News and Updates page.
Tech Stack
- Gatsby
- Sanity
- GraphQL
- Twitter API
- i18n
- Netlify
- Adobe XD
Purpose and Goals
It was important for me to do this project because it was a chance for me to help the marginalized Aeta communities. The expected outcome of the project was an informational website in both English and Filipino so that global and local users could get to know the foundation, the Aeta community, and how they could help.
Spotlight
There were two main technical hurdles I encountered when creating this website: localization and integrating it with the Twitter API. To solve the problem of localization, I used the i18n plugin together with URL parameters to determine which language should be rendered. Because Gatsby is a static site generator, I also had to solve the hurdle of getting the Twitter posts to update every so often. So, I used Cronhub to schedule and trigger automatic deployment to tackle this problem.
Lessons Learned
This project taught me the importance of managing the project through its different phases from design, development, and production. I learned how to take feedback and the importance of collaboration with the client in building the website. Aside from management, I also learned how to integrate the Twitter API, how to use cron jobs, and the importance of making everything reusable.
In the end, I think that using Gatsby.js + Sanity was a very good choice considering that the project needed to be completed as soon as possible. Although there were some bumps, it was generally easy to plug into the APIs needed for the website to work. This experience has allowed me to be confident enough to build multiple page websites, add localization to websites, and to explore other backend services.