A contentful app that allows you to travel back in time and see how the world has changed.

This app uses App Events (similar to webhooks) to listen for changes of entries in the contentful space. When a change is detected, the app will create a patch for each change and store it in the data store. This lets you scroll through the history of your content and see how it has evolved over time.

In context of contentful content, a patch describes the change of a value for a field and a locale. This can be represented with a JSON patch operation like this:

{
  "op": "replace",
  "path": "/fields/title/en-US",
  "value": "hello world"
}

We can also combine a set of operations into a more meaningful change:

[
  {
    "op": "replace",
    "path": "/fields/title/en-US",
    "value": "hello world"
  },
  {
    "op": "replace",
    "path": "/fields/amount/en-US",
    "value": 1
  }
]

We can store metadata such as space, environment, entry, version along the patch, to later receive a stream of changes of a particular entry on a specific space environment.

{
  "space": "<space-id>",
  "environment": "<environment-id>",
  "entry": "<entry-id>",
  "patch": [
    {
      "op": "replace",
      "path": "/fields/title/en-US",
      "value": "hello world"
    }
  ]
}

If we create a new patch entry for every event (save, auto_save, delete, archive, unarchive, publish, unpublish) in our system, we get the highest possible resolution (keep in mind that some of these events are not changing content, but its availability).

Provide the public url of the app with /api/webhook appended to it.

Run the dev server:

npm run dev

View the database:

npm run db-view

You can either run the app with a remote database, or you can spin up a local database.

This repo includes a docker compose file with a postgres database. spin up the database with the following command:

docker compose up -d

Provide the local database url in the .env file or via VITE_POSTGRES_URL env var.:

postgres://default:pg-password@localhost:5432/time-machine

Use ngrok to tunnel the local server to the internet and make it reachable for App Events.

Install ngrok locally and authenticate with your account.

Then run the following command:

ngrok http http://localhost:5173

This will provide you with the public forwarding url that you can use in the Contentful app configuration. Don't forget to append /api/webhook to the url to reach the the right endpoint on your local server.

This app is build with a "bring your own database" setup. You can provide a postgres database connection string in the .env file (or via VITE_POSTGRES_URL env var).

After setting the connection string, you must push your schema via npx drizzle-kit push. Alternatively, you can also run npx drizzle-kit migrate to apply the schema via migrations.

This app is bootstrapped with the Contentful Remix App Template (well, actually the template is grown out of this app).