Sponsored by the US Department of State, and guided by a team of experienced medical professionals, Vietnam Health Literacy is a non-profit project with a crucial mission: to provide accessible, trustworthy, and science-backed health information to the community.
An overview of the Vietnam Health Literacy website
At the age of 20, I joined the project with a mission to turn their vision into a digital reality as a sole developer.
My mission was clear: to build a website that was not only informative but also engaging and visually appealing.
Bringing the Designs to Life
Our designer crafted beautiful prototypes with intricate animations. Turning these designs into a smooth web experience was a challenge I enjoyed tackling.
Using React and Framer Motion, I carefully implemented each animation, ensuring a smooth and engaging user experience.
Prototypes to Action
Accessible, on any device
It's crucial to ensure that a website looks good and works well on all these different screen sizes.
Vietnam Health Literacy was designed with this in mind. We made sure that the website is responsive, meaning it adapts to different screen sizes to provide a consistent and enjoyable experience for everyone.
Ensuring seamless accessibility
A Foundation for Flexibility & Performance
While WordPress served as the project's content management system, a traditional WordPress theme wouldn't provide the flexibility and performance needed for our website.
Instead, I opted for a JAMStack approach, utilizing Gatsby as the frontend framework and connecting to WordPress via GraphQL. This allowed for seamless content management while maintaining the high level of customization.
This approach offers several benefits:
- Performance: Gatsby generates static HTML files (at build time). These cached files can be served quickly by a CDN. It significantly improves page load times.
- Flexibility: Decoupling the frontend from the backend allows for greater customization and control over the user experience.
- Scalability: The static nature of the website makes it highly scalable and resilient to traffic spikes.
Slow loading times can frustrate users and negatively impact search engine rankings. To ensure a blazing-fast experience, I have utilized these optimization techniques:
- Lazy loading: Only loading components and images when needed.
- Code splitting: Breaking down the code into smaller chunks to reduce initial load time (using @loadable/component package).
The toggle sidebar component is only loaded when needed.
Gatsby also provides built-in support for several optimization techniques, which I leveraged:
- Image optimization: Compressing and resizing images for optimal web delivery.
- Blurhash: Displaying blurred placeholders while images load, creating a smoother visual experience.
A blurred placeholder is displayed while waiting for an image to load, with a smooth transition.
These efforts resulted in a Lighthouse performance score of over 90, ensuring a smooth and enjoyable user experience.
Not too bad, isn't it?
Optimizing for Impatience
While static site generation offers numerous advantages, it also presents a challenge: how to efficiently update the website when content changes occur in WordPress. Rebuilding the entire site for every small change (like a small typo fix) would be slow, and inefficient. Frankly quite frustrating for everyone involved.
To address this, I harnessed the power of Turborepo and Cloudflare Pages, creating a streamlined deployment process that minimizes wait times (and maximizes our happiness - oh yeah!).
Here's how it works:
- The "Deploy" Button: I added a "Deploy" button within a custom WordPress plugin I developed for the CMS team. This button empowers them to initiate a re-deployment of the Gatsby site whenever content changes are made and ready to be published. This process offers several advantages: - Batched Updates: Changes can be accumulated and deployed in batches, reducing deployment frequency. - Version Control: The static nature of the site allows for easy rollback to previous versions if needed.
-
Turborepo:: This tool intelligently optimizing builds and caching dependencies. It has a cache system that stores all the build stuff, so everything runs quickly on our local and even in the cloud.
-
Pre-push Hook: Before any code makes its way into the remote Git repository, a pre-push hook triggers a full
turbo run build. This serves two crucial purposes: _ Final Sanity Check: A final double-check that making sure everything builds smoothly before we send it off to be deployed. _ Populate the Turborepo Cache: More importantly, it fills up the Turborepo cache, uploading all the built artifacts to the remote cache server. Everyone’s got everything they need. -
Cloudflare Pages: Now, when the code finally reaches Cloudflare Pages, Cloudflare uses Turborepo’s remote cache, so instead of rebuilding everything from scratch, it just grabs the pre-built stuff lightning fast. This is the thing that makes we happy.
The result? Deployments that are drastically faster, with a reduced risk of build errors.
Moreover, this optimized process also contributes to a smaller carbon footprint, as we're minimizing unnecessary rebuilds and resource consumption.
Keep things tidy
...and efficient, that's why I've chosen a monorepo as the best way to go. All the code for the website, the WordPress plugin, and shared components live together in a single repository.
This approach promotes several benefits:
-
Code Reusability: Shared components, like UI elements or utility functions, can be easily accessed and reused across the website and the WordPress plugin, ensuring consistency and reducing redundancy.
-
Consistent Styling: A unified configuration for code style and linting (using tools like ESLint and Prettier) is applied across the entire codebase, maintaining a cohesive and maintainable code style.
-
Simplified Development: As I mentioned earlier, dependency management and updates are centralized in a single place.
Under the Hood
Talked enough about the fancy stuff, here's a closer look as the stack I assembled:
Frontend:
- React: Yes, of course - it's React! Why not React? It's a joy to work with.
- Gatsby: A React meta-framework for building great content-driven websites. It takes care of all the heavy lifting, so I can focus on building user interfaces.
- Tailwind CSS: A utility-first CSS framework that makes styling a breeze.
- Framer Motion: A powerful, flexible, and easy to use animation library, especially for React (of course it's React).
Backend & Infrastructure:
- WordPress: A reliable and flexible one. It's always the trusty old WordPress.
- GraphQL: A query language for APIs, making data fetching efficient and predictable.
- Cloudflare Pages: It’s the same with Vercel, Netlify, etc. It takes care about the deployment and hosting.
- Turborepo: I talked about it enough.
Programming Languages:
- TypeScript: A version of Javascript but with a fancy dress code that makes it harder to shoot yourself in the foot.
- PHP: A language that always handy and full of surprises.
Empowering Communities
From architecting the website's infrastructure to optimizing its performance and crafting engaging animations, I strived to create a platform that is not only visually appealing but also informative, accessible, and easy to use.
It's incredibly rewarding to know that my work is playing a part in empowering the Vietnamese community with access to vital health information, allowing me to contribute to a meaningful cause while pushing the boundaries of my technical expertise.