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.
The (unimpressive) app before you give it superpowers with Automerge
Let’s fix all that with Automerge!
In the exercises that follow, you’ll modify the source code to:
- Configure a Repository to store & sync document changes locally
- Create/retrieve a task list Document by its Document URL
- Use the Automerge React client to update the Doc’s data on user input
- Update the Repo to also sync changes over the network (when available)
- Create and manage a persistent user account document
- Store and retrieve document references
- Build a task list document listing interface
- Implement task list switching
- Handle task list sharing and collaboration