Setup

All the code here can be found at the automerge-repo-quickstart repo.

To get started:

• clone the tutorial project from automerge-repo-quickstart
• switch to the without-automerge branch
• in the automerge-repo-quickstart directory, install the project dependencies
• start the local Vite development server

$ git clone https://github.com/automerge/automerge-repo-quickstart
# Cloning into 'automerge-repo-quickstart'...
$ cd automerge-repo-quickstart
$ git checkout without-automerge
$ npm install
# ...installing dependencies...
$ npm run dev

Visit localhost:5173/ to see the app in its “starter” state, as a basic React app not yet using Automerge: the task list can be edited, but changes are not synced between users, and all local changes are lost when the page is closed or reloaded.

Let’s fix all that with Automerge!

In the exercises that follow, you’ll modify the source code to:

1. Configure a Repository to store & sync document changes locally
2. Create/retrieve a task list Document by its Document URL
3. Use the Automerge React client to update the Doc’s data on user input
4. Update the Repo to also sync changes over the network (when available)
5. Create and manage a persistent user account document
6. Store and retrieve document references
7. Build a task list document listing interface
8. Implement task list switching
9. Handle task list sharing and collaboration