Transcript for:
Building Apps with Zero Sync Engine

This is how I used Zero to build an app that updates the database as you type and 30 other browser tabs in 4 different browsers. Zero is a sync engine from the RepliCache team, meaning you store app data in the browser and it gets synced to an external database. Although there are many other sync engines out there, Zero takes it to another level by adding a client-side cache that syncs to other connected clients and adding its own query language, eliminating the need for a custom backend. But it takes a lot of work to set up, so buckle up, hit subscribe and grab yourself a warm beverage. First, we'll need a Postgres database, which we can create with Neon, turn on logical replication to efficiently track and sync changes, and connect with pooling turned off to keep the connection persistent. Then we can add some test data to our database. Next is Zero Cache, which comes with the Zero package and is configured with environment variables. We then need to create a schema file for type safety to define relationships and to define permissions, because with Zero, access is denied by default, so you have to explicitly give access to database operations. If you're a Drizzle or Prisma user, you can generate schemas automatically with these two projects. Then we can add this script to our package.json, and if you've followed those steps correctly, you should have a working cache. The final step is to set up the Zero client, which is easy to do in React because of this integration. All you have to do is instantiate this class with these three required options, then wrap your project in this Zero provider, passing in the Zero client to the Zero prop. Then we can use the Zero hook to make queries and mutations to our data, and the Use Query hook for reactive updates. And that's it, we're done with the basic setup, meaning if we run our app, it should be able to read and update all of our data, and changes we make in one tab can quickly be reflected in all the clients, no matter the browser, which is almost worth all of the effort it took to set up. But if you want more of a challenge, you could look into adding custom mutators, setting up authentication, or figure out how to deploy Zero without using SST. All joking aside, Zero is already amazing for something that's just in alpha, and I hope more people get excited for using it other than these two guys.