On the call, Tyler shared his experience using PowerSync with Supabase, Kobie from PowerSync demonstrated how to build an offline-first chat app and Herman showcased an offline-first Trello clone app that he built using Flutter and PowerSync.
Full video of the call available here:
Using PowerSync with Supabase
Tyler (Flutter DevRel at Supabase) maintains the Supabase Flutter/Dart SDK. Superbase is an open-source Firebase alternative, but does not currently have turnkey offline caching capabilities. Offline support is actually the top requested feature on their GitHub discussion page, but this is a hard problem to solve.
They have previously recommended third-party integrations for offline capabilities, but these were mostly focused on JavaScript projects and were not ideal for Flutter. PowerSync has the potential to provide a reliable offline experience for Flutter developers using Superbase:
Personally I am super excited that with PowerSync, we [Supabase] will be able to fully, truly, provide the offline experience for our Flutter developers. – Tyler Shukert
Setting up a Flutter App with Supabase and PowerSync
Kobie from the PowerSync team demonstrated how it would be possible to use PowerSync to enable offline mode for a chat app built using Flutter with Supabase.
His starting point was Supabase’s simple chat app tutorial, which has a straightforward schema consisting of two tables. The app isn’t designed to support offline but that’s easy enough to add with PowerSync.
Implementing PowerSync consists of two steps:
1. Implement a PowerSync service instance
- Connect to Supabase
- Define and deploy sync rules
2. Set up the Flutter app
- Install the SDK
- Implement local schema
- Extend models (optional but recommended)
- Implement/import SupabaseConnector
- Call db.connect()
- Wire up UI to use PowerSync SDK.
Full tutorial available below:
Kobie went on to explain how sync rules and role level security (RLS) work together in PowerSync, and that he created a template of the chat app for all to use.
Support for real-time data changes
Tyler and Kobie discussed that PowerSync has automatic support for real-time data. Not just REST API calls but real-time database changes and subscriptions.
No schema migrations necessary
Tyler asked about database structure changes and Kobie showed that additive changes are not a problem and that even more destructive schema changes are supported. Kobie recommended using demo apps to learn how to use the PowerSync SDK.
Transactions supported
Tyler asked about whether the execute method in PowerSync supports transactions, for example when inserting two related data into the database. Kobie explained that it is supported.
I can see that PowerSync is really bulletproof — every single kind of interaction that you might have with the data, it's got covered. And real-time is baked in which is really, really amazing. – Tyler Shukert
Demo: Offline-first Trello (Kanban) Clone
Herman joined us to showcase his offline-first Trello clone. He made the point that Flutter is used by developers who prioritize productivity and that PowerSync seems to be aligned with that. He previously used Firebase and Firestore at his startup but found that to be deficient in offline support — its offline capabilities are based on caching, not a full offline-first approach.
Herman built a Trello clone with workspaces which have boards, which have lists. These can all be moved around using drag-and-drop. Boards and lists can be added, as well as members. Information is then shared between these.
Herman’s app approach was based on a Trello clone open-source project and includes a separate library for data sync and authentication using PowerSync and Supabase. He also mentioned his use of repository classes for data access patterns and transactions for archiving cards.
Herman then connected his phone to his screen share to be able to demo the offline functionality of the app. While offline he showed a shared workspace where different users have access based on the sync rules. He then completed a number of actions (creating a board, moving cards) and showed how these actions synced in real-time to the view of the other user.
The Trello clone app is available as an example app.
