feat(recipes): add recipe for local first data using powersync

[trevor-coleman]

Adds a recipe for using PowerSync and Supabase to sync local and backend data.

Topcis include:

• Installing the SDK and Dependencies
• Authenticating with Supabase
• Connecting PowerSync to Supabase
• Fetching and Managing TodoLists
• Sharing the Database With Screens
• Fetching and Managing Todos

[frankcalise]

Overall looks good, nice job as it's a pretty large topic to cover!

Left some comments that can maybe help spruce a few things up.

[morganick]

This is as far as I made it today. I'll wrap the review up in the morning.

[trevor-coleman]

Appreciate the comments -- it's hard to keep everything consistent because I have a working app, and then make changes to make the writing simpler and it's hard to keep them both in sync.

[trevor-coleman]

Here's what the finished app looks like:

[morganick]

Here are the things that I ran into. This was a much better experience than the first run through. For some reason it isn't syncing through to Supabase so I'll have to check my configuration there. I can pull data from Supabase into PowerSync, but the application doesn't push anything.

I'm able to create things inside the application. It just stays locally.

[morganick]

Suggested change

	import {SignedInNavigatorProp} from "app/navigators"
	import {SignedInNavigatorScreenProps} from "app/navigators"

[trevor-coleman]

Thanks for that @morganick -- integrated it all and made a few extra tweaks:

1. moved use-auth into /services/database/use-auth.tsx -- it's the same service (supabase) and it puts all our stuff in one place
2. went through and added comments with the filename to all codeblocks where it makes sense (// app/path/to/file.tsx)
3. Made all text references PowerSync and all variables powersync (this matches their code)
4. replaced uuid with expo-crypto -- single install instead of two, and it's better and more react-nativey

[trevor-coleman]

I think we're pretty close -- at least I feel good enough to share it with PowerSync now.

[morganick]

In my version, I'm still getting:

LOG  PowerSync status changed {"connected": true, "dataFlow": {"downloading": false, "uploading": false}, "lastSyncedAt": 2024-04-02T14:53:18.701Z}
 LOG  PowerSync status changed {"connected": true, "dataFlow": {"downloading": false, "uploading": false}, "lastSyncedAt": 2024-04-02T14:53:18.701Z}
 LOG  PowerSync status changed {"connected": true, "dataFlow": {"downloading": false, "uploading": true}, "lastSyncedAt": 2024-04-02T14:53:18.701Z}
 LOG  PowerSync status changed {"connected": true, "dataFlow": {"downloading": false, "uploading": true}, "lastSyncedAt": 2024-04-02T14:53:18.701Z}
 LOG  PowerSync status changed {"connected": true, "dataFlow": {"downloading": false, "uploading": false}, "lastSyncedAt": 2024-04-02T14:53:18.701Z}
 LOG  PowerSync status changed {"connected": true, "dataFlow": {"downloading": false, "uploading": false}, "lastSyncedAt": 2024-04-02T14:53:18.701Z}
 LOG  PowerSync status changed {"connected": false, "dataFlow": {"downloading": false, "uploading": false}, "lastSyncedAt": 2024-04-02T14:53:18.701Z}
 LOG  PowerSync status changed {"connected": false, "dataFlow": {"downloading": false, "uploading": false}, "lastSyncedAt": 2024-04-02T14:53:18.701Z}
 DEBUG  [PowerSyncStream] Stream input empty

After about 5 seconds from successfully signing in. Not sure why this happens.

[morganick]

missing dev dep.