Lecture Notes: Building an App with Zero Sync Engine

Introduction

• Zero Sync Engine: A product from RepliCache.
  • Functionality: Syncs browser-stored app data to an external database.
  • Advantages:
    • Adds a client-side cache.
    • Syncs data across all connected clients.
    • Includes its own query language, eliminating the need for a custom backend.
  • Challenge: Requires substantial setup.

Setting Up the Database

1. Postgres Database: Created using Neon.
2. Logical Replication: Enabled for efficient change tracking and syncing.
3. Connection Setup:
   • Pooling turned off for persistent connection.
4. Test Data: Add to the database for testing purposes.

Zero Cache Setup

• Package: Comes with the Zero package.
• Configuration: Done through environment variables.
• Schema File:
  • Ensures type safety.
  • Defines relationships and permissions (default access is denied).
  • Tools:
    • Drizzle or Prisma for automatic schema generation.

Setting Up Zero Client in React

1. Integration: Simple to implement in React.
2. Steps:
   • Instantiate Zero client with three required options.
   • Wrap project with Zero provider, passing Zero client to the Zero prop.
3. Hooks:
   • Use Zero hook for queries and mutations.
   • Use Query hook for reactive data updates.

Benefits of Zero

• All data read and update across clients and browsers.
• Quick reflection of changes made in one tab to all clients.

Challenges & Further Customization

• Consider adding:
  • Custom mutators.
  • Authentication setup.
  • Deployment without using SST.

Conclusion

• Zero's Status: Currently in alpha but promising.
• Encouragement: More people should explore its potential.