Sprouting into the Future: How we rebuilt Trees That Count

Hasura is a product we’ve had our eye on for a while here at Abletech. We’ve used it for hobby projects, given tech talks on it and even written blog articles on our experience using it. When Project Crimson approached us about rebuilding their Trees That Count application in mid-2022, we thought it was the perfect opportunity to use Hasura and develop a solution that built upon their existing database but utilised a modern, extensible, scalable and maintainable tech stack - all with an organisation that aligned perfectly with Abletech’s core values.

What is Trees That Count?

Chances are you may have seen their colourful billboards or even been gifted a tree through Trees That Count before. Launched in November 2016 by environmental charity Project Crimson, Trees That Count is an online platform allowing Kiwis to gift and donate native trees. Planters can apply for, plant and care for these native trees helping to mitigate climate change and boost native biodiversity. As of March 2023, Trees That Count has funded over 1.5 million native trees and supported close to 1,300 planting projects across Aotearoa.

How we rebuilt Trees That Count

Project Crimson wanted a cost-effective solution that would be easy to maintain, handle load during their peak periods and could be extended to include new functionality. We worked alongside Project Crimson’s development team to implement a platform built upon modern frameworks and processes, simplifying their tech stack, improving existing user experience and ensuring delivery was efficient keeping running costs as low as possible.

Hasura

Project Crimson had a stable and known database schema built in Microsoft SQL Server. We wanted to take advantage of this, migrating the tables and data using AWS Database Migration Service over to a Postgres AWS RDS instance. Having a bunch of talented Hasura and infrastructure developers, we then spun up an AWS ECS Container running Hasura’s GraphQL engine and voila - our “backend” was born. Within a matter of hours, we had a GraphQL API connected to a mature database schema, we could almost gift and donate trees! We also configured robust role-based permissions across our tables ensuring that data security was at the forefront of our implementation.

Serverless edge functions

To enhance our GraphQL API, we set up Hasura actions and triggers backed by Serverless edge functions adding business logic and additional functionality to our application. Using both Vercel’s edge functions and AWS Lambda we developed a series of REST APIs that could be invoked when data was modified in our database - adding the ability to send emails, generate PDFs and perform scheduled tasks. Being a function as a service (FaaS) architecture, these APIs facilitated our reliable, maintainable and scalable solution.

NextJS

For our frontend, search-engine optimisation (SEO), a dynamic user-experience and responsiveness were key. With React being Abletech’s frontend framework of choice, we chose to build our application in NextJS with Tailwind CSS as our CSS framework. NextJS allowed us to rapidly stand up both APIs and a frontend application - and with server-side rendering out of the box, our SEO requirements could be satisfied. Tailwind allowed us to create styles for mobile responsiveness and styles that fit Trees That Count’s brand while maintaining the similarity from the previous solution.

With our solution being written in Typescript combined with our Hasura GraphQL API, we were easily able to define code-generated types and have a fully-type safe environment for development - this resulted in a high-level of developer productivity and allowed us to ship the application at pace.

The application is hosted in Vercel, allowing for quick and easy deployments directly from Github and integrating with third party tools such as Sentry for error-tracking and Sanity for our Content Management System (CMS).

Sanity CMS

For the CMS, we integrated with an open-source solution, Sanity. Sanity gave us great flexibility to define schemas that were fit for Trees That Count’s purpose and a pleasing, easy-to-use experience for their marketing team to publish and edit content. It also came with a generous free tier and a simple query language (known as GROQ) to fetch and manipulate content.

The transition

Working closely with the Trees That Count team, we implemented a comprehensive deployment plan to ensure the production rollout went as smoothly as possible, with minimal impact to end-users. Running the new solution alongside the old solution and with a seamless data transfer via AWS, we were able to migrate existing data and assets over to the new application with minimal downtime - a win for Project Crimson with no loss of revenue or impact to customers, and a win for developers with an easy migration and little-to-no manual handling of data.

Bespoke rebuilds

Whether you’re looking for a bespoke rebuild from a legacy tech stack, or a hybrid rebuild re-using existing components, we would love to chat! Get in touch today and let Abletech help set you up for success with a modern, scalable, extensible solution built to last.

While you are here, we encourage you to sign up and grow a carbon reducing tree for just $10.