App use case
TrashBlitz is part of an initiative by 5Gyres. It is used to document trash collected on cleanup operations around the world. This data is rolled up into an annual report used to advocate for responsible environmental policy.
Engineering challenges
1. Adding offline-first to an already-existing app
Trash collection sites are often in remote areas where connectivity is very slow or intermittent. Caching approaches fail in these situations so the TrashBlitz team knew they needed to adapt their existing app to use an offline-first architecture. Their challenge was finding a way to do so without a heavy engineering lift or requiring invasive changes to their existing backend database: they needed the app published on the App Store for the next cleanup operation — less than two weeks away.
2. Working with FlutterFlow, not yet officially supported by PowerSync
The existing app had been built with FlutterFlow, a visual app builder that generates Flutter code. FlutterFlow allows for quick iteration but getting generated code to work with the PowerSync Flutter SDK hadn’t been done before.
3. Understanding the cost of poor offline sync
Before implementing PowerSync they had some struggles: users lost entries during an earlier event due to no way to sync data back to the server. This was all the more painful as users had online connectivity but did not have enough bandwidth to complete sync operations.
Developer experience: Working with FlutterFlow and PowerSync
Praful came across PowerSync through reading about recommended services for Supabase and joined the community on Discord shortly thereafter. He was open to working with the PowerSync team to get his app shipped in time for the cleanup event in Yosemite National Park, only a few weeks away.
Since the app was built using FlutterFlow, the PowerSync team needed to figure out how to support this development process. Thankfully, FlutterFlow, unlike many other no-code app builders, allows access to generated code and supports linking app code to a GitHub repository for deployment.
This allowed for a solution:
- The PowerSync team added a PowerSync branch to the TrashBlitz repository. The app can be deployed from this branch.
- UI/app changes can be made on the FlutterFlow GUI. The generated code can then be pulled into the PowerSync branch.
- The app can be deployed to the App Store from that branch.
Praful highlighted the remarkable speed at which the PowerSync team was able to address and rectify bugs (even coordinating a bugfix with Supabase in their Flutter SDK in this crunch period), and the efficiency of securing App Store approval.
“Yeah, it was incredible. I mean, to work with PowerSync was probably the easiest thing that we had to do, right? Because it was fairly straightforward with what we know of how to do Flutter development.“
We asked Praful about whether he would recommend this solution to other FlutterFlow users and he had some practical advice: PowerSync is a “no-brainer” for developers familiar with Flutter.
Praful intends to open-source the TrashBlitz codebase, enabling others to gain insights from their implementation. This will allow developers to compare the core FlutterFlow branch with the PowerSync branch and gain a comprehensive understanding of the enhancements they introduced.
Real-world use
Despite being relatively new, their app was used by a cleanup crew in Yosemite National Park consisting of a few thousand volunteers.
TrashBlitz is now available to anyone interested in participating in annual trash cleanups. They also organize special events like "trashblitzes", where volunteers collaborate on cleaning efforts.
The case for offline-first as a default app architecture
What is the significance of the app being offline-first? Praful shared that even areas in San Francisco experience frequent connectivity issues. Offline-first has proven to be a game-changer, allowing users to use the app without the risk of losing entries. The app is more resilient – every data mutation is persistently stored on the device's storage, ensuring that even in the event of an app crash, the data remains intact. This eliminates the frustration and expense of losing all data when an app crashes.
It's worth noting that TrashBlitz had explored other alternatives, such as Replicache, but these solutions did not provide them with what they needed.
Use PowerSync with Flutter and Supabase
To get started with PowerSync and Supabase, check out our Supabase Integration Guide. If you’d like to use PowerSync with FlutterFlow, give us a shout on our Discord.
This post was summarized from a live event, video recording below:
