From 7614dbb589e11e98086b6c6ff879e130a56fef57 Mon Sep 17 00:00:00 2001
From: Roy <roy@roymckenzie.me>
Date: Fri, 29 Sep 2023 14:35:15 -0500
Subject: [PATCH 1/2] - CRDT enabled through SyncedStore and Yjs - HealthRecord
 type now has an ID - Switched storage provider from localstorage to indexedDB
 - WebRTC enabled locally

---
 package-lock.json                             | 444 ++++++++++++++++--
 package.json                                  |   7 +-
 src/App.vue                                   |  16 +
 src/components/Dashboard/Layout.vue           |  10 +-
 src/components/Dashboard/People/Person.vue    |  12 +-
 .../Dashboard/Settings/Settings.vue           |   6 +-
 src/components/Start/New.vue                  |  12 +-
 src/components/Start/Start.vue                |  15 +-
 src/helpers/storage.js                        | 120 +++++
 src/main.js                                   |  12 +-
 src/providers/indexeddb.js                    |  22 +
 src/providers/webrtc.js                       |  23 +
 src/router/index.js                           |   2 +-
 src/store/measurements.js                     |  34 +-
 src/store/people.js                           |  32 +-
 src/store/record.js                           |  70 +--
 src/store/vitals.js                           |  36 +-
 src/typedefs.js                               |   1 +
 18 files changed, 679 insertions(+), 195 deletions(-)
 create mode 100644 src/helpers/storage.js
 create mode 100644 src/providers/indexeddb.js
 create mode 100644 src/providers/webrtc.js

diff --git a/package-lock.json b/package-lock.json
index 5021679..ecd2d8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,16 @@
 {
   "name": "healthrecord",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "healthrecord",
-      "version": "0.1.5",
+      "version": "0.1.8",
       "dependencies": {
         "@headlessui/vue": "^1.7.16",
         "@heroicons/vue": "^2.0.18",
+        "@syncedstore/core": "^0.6.0-alpha.0",
         "@tailwindcss/forms": "^0.5.6",
         "chart.js": "^4.4.0",
         "chartjs-adapter-dayjs-4": "^1.0.4",
@@ -22,7 +23,11 @@
         "vite-plugin-pwa": "^0.16.5",
         "vue": "^3.3.4",
         "vue-chartjs": "^5.2.0",
-        "vue-router": "^4.2.4"
+        "vue-router": "^4.2.4",
+        "y-indexeddb": "^9.0.11",
+        "y-localforage": "^0.1.1",
+        "y-webrtc": "^10.2.5",
+        "yjs": "^13.6.8"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
@@ -2214,6 +2219,11 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@reactivedata/reactive": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@reactivedata/reactive/-/reactive-0.2.2.tgz",
+      "integrity": "sha512-KnINM/Sng25QAv6sHkJO9q/XyslLegCF5jTsTSVu+AouY3uZDVf4Am99xNCqsfqFZFvnTBBDvCsHNdvTVGvPEA=="
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -2291,6 +2301,48 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/@syncedstore/core": {
+      "version": "0.6.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@syncedstore/core/-/core-0.6.0-alpha.0.tgz",
+      "integrity": "sha512-Fo/iGOU/esZd81skwTc1JF8tauHou08QK1O3WEvmG2YPdpU9jmbcBUCLB4IuC9IGR3ATFOSA5Ih6B+/00XzooQ==",
+      "dependencies": {
+        "@reactivedata/reactive": "^0.2.0",
+        "@syncedstore/yjs-reactive-bindings": "^0.5.2",
+        "@types/eslint": "6.8.0"
+      },
+      "peerDependencies": {
+        "yjs": "^13.5.13"
+      }
+    },
+    "node_modules/@syncedstore/core/node_modules/@types/eslint": {
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-6.8.0.tgz",
+      "integrity": "sha512-hqzmggoxkOubpgTdcOltkfc5N8IftRJqU70d1jbOISjjZVPvjcr+CLi2CI70hx1SUIRkLgpglTy9w28nGe2Hsw==",
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@syncedstore/yjs-reactive-bindings": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@syncedstore/yjs-reactive-bindings/-/yjs-reactive-bindings-0.5.2.tgz",
+      "integrity": "sha512-5y4aUtZoDuvpnlCj2RxTR7P0UuQeF9SfL2K3S+JAqihYWECX8YEa0GvGRWgU7CEPpnLcFXkiSxDqgk87wu7fHw==",
+      "dependencies": {
+        "@types/eslint": "6.8.0"
+      },
+      "peerDependencies": {
+        "yjs": "^13.5.13"
+      }
+    },
+    "node_modules/@syncedstore/yjs-reactive-bindings/node_modules/@types/eslint": {
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-6.8.0.tgz",
+      "integrity": "sha512-hqzmggoxkOubpgTdcOltkfc5N8IftRJqU70d1jbOISjjZVPvjcr+CLi2CI70hx1SUIRkLgpglTy9w28nGe2Hsw==",
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
     "node_modules/@tailwindcss/forms": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz",
@@ -2379,9 +2431,7 @@
     "node_modules/@types/estree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
-      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA=="
     },
     "node_modules/@types/express": {
       "version": "4.17.17",
@@ -2436,9 +2486,7 @@
     "node_modules/@types/json-schema": {
       "version": "7.0.13",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz",
-      "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ=="
     },
     "node_modules/@types/mime": {
       "version": "1.3.2",
@@ -3539,7 +3587,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5184,6 +5231,11 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/err-code": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-3.0.1.tgz",
+      "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA=="
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -5833,6 +5885,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-browser-rtc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz",
+      "integrity": "sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ=="
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -6375,7 +6432,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6401,6 +6457,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
     "node_modules/immutable": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
@@ -6825,6 +6886,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/isomorphic.js": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
+      "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/jake": {
       "version": "10.8.7",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
@@ -7051,6 +7121,33 @@
         "node": ">=6"
       }
     },
+    "node_modules/lib0": {
+      "version": "0.2.86",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.86.tgz",
+      "integrity": "sha512-kxigQTM4Q7NwJkEgdqQvU21qiR37twcqqLmh+/SbiGbRLfPlLVbHyY9sWp7PwXh0Xus9ELDSjsUOwcrdt5yZ4w==",
+      "dependencies": {
+        "isomorphic.js": "^0.2.4"
+      },
+      "bin": {
+        "0gentesthtml": "bin/gentesthtml.js",
+        "0serve": "bin/0serve.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
+    "node_modules/lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -7089,6 +7186,14 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "dependencies": {
+        "lie": "3.1.1"
+      }
+    },
     "node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -9280,7 +9385,6 @@
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
       "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dev": true,
       "dependencies": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -9903,6 +10007,57 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-peer": {
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/simple-peer/-/simple-peer-9.11.1.tgz",
+      "integrity": "sha512-D1SaWpOW8afq1CZGWB8xTfrT3FekjQmPValrqncJMX7QFl8YwhrPTZvMCANLtgBwwdS+7zURyqxDDEmY558tTw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "debug": "^4.3.2",
+        "err-code": "^3.0.1",
+        "get-browser-rtc": "^1.1.0",
+        "queue-microtask": "^1.2.3",
+        "randombytes": "^2.1.0",
+        "readable-stream": "^3.6.0"
+      }
+    },
+    "node_modules/simple-peer/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/sirv": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",
@@ -10077,7 +10232,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
       "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "dev": true,
       "dependencies": {
         "safe-buffer": "~5.2.0"
       }
@@ -11969,8 +12123,7 @@
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
       "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "peer": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8.3.0"
       },
@@ -11987,6 +12140,73 @@
         }
       }
     },
+    "node_modules/y-indexeddb": {
+      "version": "9.0.11",
+      "resolved": "https://registry.npmjs.org/y-indexeddb/-/y-indexeddb-9.0.11.tgz",
+      "integrity": "sha512-HOKQ70qW1h2WJGtOKu9rE8fbX86ExVZedecndMuhwax3yM4DQsQzCTGHt/jvTrFZr/9Ahvd8neD6aZ4dMMjtdg==",
+      "dependencies": {
+        "lib0": "^0.2.74"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      },
+      "peerDependencies": {
+        "yjs": "^13.0.0"
+      }
+    },
+    "node_modules/y-localforage": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/y-localforage/-/y-localforage-0.1.1.tgz",
+      "integrity": "sha512-vAhq6RugeDp4pDnN+tR7ODEEHLjAX7JGtleR3qmD5agOJXeYl9us7O4CpiJF3Hvo04iEPbrjN7vy/ak81lGsWA==",
+      "dependencies": {
+        "lib0": "^0.2.74",
+        "localforage": "^1.10.0",
+        "yjs": "^13.6.1"
+      }
+    },
+    "node_modules/y-protocols": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/y-protocols/-/y-protocols-1.0.6.tgz",
+      "integrity": "sha512-vHRF2L6iT3rwj1jub/K5tYcTT/mEYDUppgNPXwp8fmLpui9f7Yeq3OEtTLVF012j39QnV+KEQpNqoN7CWU7Y9Q==",
+      "dependencies": {
+        "lib0": "^0.2.85"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      },
+      "peerDependencies": {
+        "yjs": "^13.0.0"
+      }
+    },
+    "node_modules/y-webrtc": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/y-webrtc/-/y-webrtc-10.2.5.tgz",
+      "integrity": "sha512-ZyBNvTI5L28sQ2PQI0T/JvyWgvuTq05L21vGkIlcvNLNSJqAaLCBJRe3FHEqXoaogqWmRcEAKGfII4ErNXMnNw==",
+      "dependencies": {
+        "lib0": "^0.2.42",
+        "simple-peer": "^9.11.0",
+        "y-protocols": "^1.0.5"
+      },
+      "bin": {
+        "y-webrtc-signaling": "bin/server.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      },
+      "optionalDependencies": {
+        "ws": "^7.2.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -12040,6 +12260,22 @@
       "engines": {
         "node": ">=10"
       }
+    },
+    "node_modules/yjs": {
+      "version": "13.6.8",
+      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.8.tgz",
+      "integrity": "sha512-ZPq0hpJQb6f59B++Ngg4cKexDJTvfOgeiv0sBc4sUm8CaBWH7OQC4kcCgrqbjJ/B2+6vO49exvTmYfdlPtcjbg==",
+      "dependencies": {
+        "lib0": "^0.2.74"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
     }
   },
   "dependencies": {
@@ -13449,6 +13685,11 @@
       "dev": true,
       "peer": true
     },
+    "@reactivedata/reactive": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@reactivedata/reactive/-/reactive-0.2.2.tgz",
+      "integrity": "sha512-KnINM/Sng25QAv6sHkJO9q/XyslLegCF5jTsTSVu+AouY3uZDVf4Am99xNCqsfqFZFvnTBBDvCsHNdvTVGvPEA=="
+    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -13516,6 +13757,46 @@
         }
       }
     },
+    "@syncedstore/core": {
+      "version": "0.6.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@syncedstore/core/-/core-0.6.0-alpha.0.tgz",
+      "integrity": "sha512-Fo/iGOU/esZd81skwTc1JF8tauHou08QK1O3WEvmG2YPdpU9jmbcBUCLB4IuC9IGR3ATFOSA5Ih6B+/00XzooQ==",
+      "requires": {
+        "@reactivedata/reactive": "^0.2.0",
+        "@syncedstore/yjs-reactive-bindings": "^0.5.2",
+        "@types/eslint": "6.8.0"
+      },
+      "dependencies": {
+        "@types/eslint": {
+          "version": "6.8.0",
+          "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-6.8.0.tgz",
+          "integrity": "sha512-hqzmggoxkOubpgTdcOltkfc5N8IftRJqU70d1jbOISjjZVPvjcr+CLi2CI70hx1SUIRkLgpglTy9w28nGe2Hsw==",
+          "requires": {
+            "@types/estree": "*",
+            "@types/json-schema": "*"
+          }
+        }
+      }
+    },
+    "@syncedstore/yjs-reactive-bindings": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@syncedstore/yjs-reactive-bindings/-/yjs-reactive-bindings-0.5.2.tgz",
+      "integrity": "sha512-5y4aUtZoDuvpnlCj2RxTR7P0UuQeF9SfL2K3S+JAqihYWECX8YEa0GvGRWgU7CEPpnLcFXkiSxDqgk87wu7fHw==",
+      "requires": {
+        "@types/eslint": "6.8.0"
+      },
+      "dependencies": {
+        "@types/eslint": {
+          "version": "6.8.0",
+          "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-6.8.0.tgz",
+          "integrity": "sha512-hqzmggoxkOubpgTdcOltkfc5N8IftRJqU70d1jbOISjjZVPvjcr+CLi2CI70hx1SUIRkLgpglTy9w28nGe2Hsw==",
+          "requires": {
+            "@types/estree": "*",
+            "@types/json-schema": "*"
+          }
+        }
+      }
+    },
     "@tailwindcss/forms": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz",
@@ -13598,9 +13879,7 @@
     "@types/estree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
-      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA=="
     },
     "@types/express": {
       "version": "4.17.17",
@@ -13655,9 +13934,7 @@
     "@types/json-schema": {
       "version": "7.0.13",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz",
-      "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ=="
     },
     "@types/mime": {
       "version": "1.3.2",
@@ -14552,8 +14829,7 @@
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
     },
     "batch": {
       "version": "0.6.1",
@@ -15762,6 +16038,11 @@
       "dev": true,
       "peer": true
     },
+    "err-code": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-3.0.1.tgz",
+      "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA=="
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -16290,6 +16571,11 @@
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
+    "get-browser-rtc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz",
+      "integrity": "sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ=="
+    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -16685,8 +16971,7 @@
     "ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
     },
     "ignore": {
       "version": "5.2.4",
@@ -16695,6 +16980,11 @@
       "dev": true,
       "peer": true
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
     "immutable": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
@@ -16981,6 +17271,11 @@
       "dev": true,
       "peer": true
     },
+    "isomorphic.js": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
+      "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw=="
+    },
     "jake": {
       "version": "10.8.7",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
@@ -17161,6 +17456,22 @@
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
       "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A=="
     },
+    "lib0": {
+      "version": "0.2.86",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.86.tgz",
+      "integrity": "sha512-kxigQTM4Q7NwJkEgdqQvU21qiR37twcqqLmh+/SbiGbRLfPlLVbHyY9sWp7PwXh0Xus9ELDSjsUOwcrdt5yZ4w==",
+      "requires": {
+        "isomorphic.js": "^0.2.4"
+      }
+    },
+    "lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -17190,6 +17501,14 @@
         "json5": "^1.0.1"
       }
     },
+    "localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "requires": {
+        "lie": "3.1.1"
+      }
+    },
     "locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -18777,7 +19096,6 @@
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
       "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dev": true,
       "requires": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -19251,6 +19569,31 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "simple-peer": {
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/simple-peer/-/simple-peer-9.11.1.tgz",
+      "integrity": "sha512-D1SaWpOW8afq1CZGWB8xTfrT3FekjQmPValrqncJMX7QFl8YwhrPTZvMCANLtgBwwdS+7zURyqxDDEmY558tTw==",
+      "requires": {
+        "buffer": "^6.0.3",
+        "debug": "^4.3.2",
+        "err-code": "^3.0.1",
+        "get-browser-rtc": "^1.1.0",
+        "queue-microtask": "^1.2.3",
+        "randombytes": "^2.1.0",
+        "readable-stream": "^3.6.0"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+          "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.2.1"
+          }
+        }
+      }
+    },
     "sirv": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",
@@ -19402,7 +19745,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
       "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.2.0"
       }
@@ -20791,10 +21133,46 @@
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
       "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "peer": true,
+      "devOptional": true,
       "requires": {}
     },
+    "y-indexeddb": {
+      "version": "9.0.11",
+      "resolved": "https://registry.npmjs.org/y-indexeddb/-/y-indexeddb-9.0.11.tgz",
+      "integrity": "sha512-HOKQ70qW1h2WJGtOKu9rE8fbX86ExVZedecndMuhwax3yM4DQsQzCTGHt/jvTrFZr/9Ahvd8neD6aZ4dMMjtdg==",
+      "requires": {
+        "lib0": "^0.2.74"
+      }
+    },
+    "y-localforage": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/y-localforage/-/y-localforage-0.1.1.tgz",
+      "integrity": "sha512-vAhq6RugeDp4pDnN+tR7ODEEHLjAX7JGtleR3qmD5agOJXeYl9us7O4CpiJF3Hvo04iEPbrjN7vy/ak81lGsWA==",
+      "requires": {
+        "lib0": "^0.2.74",
+        "localforage": "^1.10.0",
+        "yjs": "^13.6.1"
+      }
+    },
+    "y-protocols": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/y-protocols/-/y-protocols-1.0.6.tgz",
+      "integrity": "sha512-vHRF2L6iT3rwj1jub/K5tYcTT/mEYDUppgNPXwp8fmLpui9f7Yeq3OEtTLVF012j39QnV+KEQpNqoN7CWU7Y9Q==",
+      "requires": {
+        "lib0": "^0.2.85"
+      }
+    },
+    "y-webrtc": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/y-webrtc/-/y-webrtc-10.2.5.tgz",
+      "integrity": "sha512-ZyBNvTI5L28sQ2PQI0T/JvyWgvuTq05L21vGkIlcvNLNSJqAaLCBJRe3FHEqXoaogqWmRcEAKGfII4ErNXMnNw==",
+      "requires": {
+        "lib0": "^0.2.42",
+        "simple-peer": "^9.11.0",
+        "ws": "^7.2.0",
+        "y-protocols": "^1.0.5"
+      }
+    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -20836,6 +21214,14 @@
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "dev": true,
       "peer": true
+    },
+    "yjs": {
+      "version": "13.6.8",
+      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.8.tgz",
+      "integrity": "sha512-ZPq0hpJQb6f59B++Ngg4cKexDJTvfOgeiv0sBc4sUm8CaBWH7OQC4kcCgrqbjJ/B2+6vO49exvTmYfdlPtcjbg==",
+      "requires": {
+        "lib0": "^0.2.74"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index cf07f19..21966d1 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.16",
     "@heroicons/vue": "^2.0.18",
+    "@syncedstore/core": "^0.6.0-alpha.0",
     "@tailwindcss/forms": "^0.5.6",
     "chart.js": "^4.4.0",
     "chartjs-adapter-dayjs-4": "^1.0.4",
@@ -26,7 +27,11 @@
     "vite-plugin-pwa": "^0.16.5",
     "vue": "^3.3.4",
     "vue-chartjs": "^5.2.0",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.4",
+    "y-indexeddb": "^9.0.11",
+    "y-localforage": "^0.1.1",
+    "y-webrtc": "^10.2.5",
+    "yjs": "^13.6.8"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
diff --git a/src/App.vue b/src/App.vue
index 7c2aa3f..71ebe3b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,19 @@
+<script setup>
+import { watch } from 'vue';
+import { record } from './store/record';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+watch(record, (newValue) => {
+  if (newValue) {
+    router.push({ name: 'Dashboard' });
+  } else {
+    router.push({ name: 'Start' });
+  }
+})
+</script>
+
 <template>
   <RouterView />
 </template>
diff --git a/src/components/Dashboard/Layout.vue b/src/components/Dashboard/Layout.vue
index 94eb113..1147bbc 100644
--- a/src/components/Dashboard/Layout.vue
+++ b/src/components/Dashboard/Layout.vue
@@ -1,8 +1,9 @@
 <script setup>
 import { SquaresPlusIcon, UsersIcon, Cog8ToothIcon, Bars3Icon, XMarkIcon, HomeIcon, ChartBarIcon, HeartIcon, ArrowRightOnRectangleIcon } from '@heroicons/vue/20/solid';
 import { ref } from 'vue';
-import { store as recordStore } from '../../store/record';
+import { clear } from '../../helpers/storage'
 import { useRouter } from 'vue-router';
+import { record } from '../../store/record';
 
 const router = useRouter();
 
@@ -12,17 +13,16 @@ const scrollToTop = () => {
   window.scrollTo({ top: 0 });
 }
 
-const logout = () => {
+const logout = async () => {
   if (! confirm('Have you downloaded your health record?') ) {
     return router.push({ name: 'Settings' });
   }
-  router.push({ name: 'Start' });
-  recordStore.delete();
+  clear();
 }
 </script>
 
 <template>
-  <div>
+  <div v-if="record">
     <div class="grid grid-rows-[min-content_auto] grid-cols-1 p-6 py-1 h-screen md:max-h-screen md:min-h-screen md:gap-6 md:p-4 md:pr-0 md:grid-rows-none md:grid-flow-col md:grid-cols-[200px_auto]">
       <div class="z-20 bg-gray-900 text-white p-4 py-3 rounded-3xl order-last fixed grid self-start bottom-6 right-6 left-6 md:h-full md:sticky md:top-0 md:left-auto md:right-auto md:bottom-6 md:order-none md:rounded-xl md:py-6 md:gap-4 md:grid-rows-[min-content_auto_min-content]">
         <h2 class="grid order-last md:order-first grid-flow-col items-center md:block self-start font-bold text-xl md:mb-3">
diff --git a/src/components/Dashboard/People/Person.vue b/src/components/Dashboard/People/Person.vue
index 7a932db..58f87fa 100644
--- a/src/components/Dashboard/People/Person.vue
+++ b/src/components/Dashboard/People/Person.vue
@@ -3,7 +3,7 @@ import { LightBulbIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
 import { PlusIcon } from '@heroicons/vue/20/solid';
 import VitalChart from './VitalChart.vue';
 import { computed } from 'vue';
-import { people } from '../../../store/people';
+import { record } from '../../../store/record';
 import { measurements } from '../../../store/measurements';
 import { vitals, createBodyWeightVital, createHeartRateVital } from '../../../store/vitals';
 import { useRoute } from 'vue-router';
@@ -15,11 +15,7 @@ const route = useRoute();
 const personId = route.params.personId;
 
 const person = computed(() => {
-  const person = people.value.find(person => person.id === personId);
-
-  if (! person) throw Error(`Could not find person with ID: ${route.params.personId}.`);
-
-  return person
+  return record.value.people.find(person => person.id === personId)
 });
 
 const personMeasurements = computed(() => {
@@ -28,7 +24,7 @@ const personMeasurements = computed(() => {
 
 const trackedVitals = computed(() => {
   var vitalIds = personMeasurements.value.map(measurement => measurement.vitalId);
-  vitalIds = Array.from(new Set(vitalIds));
+  vitalIds = [...new Set(vitalIds)];
   return vitals.value.filter(vital => vitalIds.includes(vital.id));
 });
 
@@ -38,7 +34,7 @@ const vitalMeasurements = (vitalId) => {
 </script>
 
 <template>
-  <div>
+  <div v-if="person">
     <div class="z-10 sticky top-0 pt-0 mt-0 pb-5 grid grid-flow-col items-start bg-gradient-to-b from-gray-200 from-90%">
       <header>
         <h2 class="text-2xl font-bold">{{ person.firstName + ' ' + person.lastName }}</h2>
diff --git a/src/components/Dashboard/Settings/Settings.vue b/src/components/Dashboard/Settings/Settings.vue
index 90138de..57fcfe9 100644
--- a/src/components/Dashboard/Settings/Settings.vue
+++ b/src/components/Dashboard/Settings/Settings.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { record } from '../../../store/record';
+import { record, store as recordStore } from '../../../store/record';
 import { saveAs } from 'file-saver';
 import { DocumentArrowDownIcon, LockClosedIcon } from '@heroicons/vue/24/outline';
 import { encrypt } from '../../../helpers/encrypto';
@@ -18,7 +18,7 @@ const downloadHealthRecordFile = (data) => {
 
 const passphraseSubmitted = async (passphrase) => {
   passphraseModalOpen.value = false;
-  const encryptedData = await encrypt(JSON.stringify(record.value), passphrase);
+  const encryptedData = await encrypt(JSON.stringify(recordStore.downloadable()), passphrase);
 
   if (! encryptedData) {
     return alert('Could not encrypt data.');
@@ -50,7 +50,7 @@ const appVersion = APP_VERSION;
       </section>
       <section class="grid grid-flow-col grid-cols-[auto_min-content] items-center p-3">
         <h3 class="font-semibold text-sm">Data file</h3>
-        <button class="btn text-sm" @click="downloadHealthRecordFile(record)">
+        <button class="btn text-sm" @click="downloadHealthRecordFile(recordStore.downloadable())">
           <DocumentArrowDownIcon />
           Download
         </button>
diff --git a/src/components/Start/New.vue b/src/components/Start/New.vue
index 0778851..4f4c3ad 100644
--- a/src/components/Start/New.vue
+++ b/src/components/Start/New.vue
@@ -1,15 +1,7 @@
 <script setup>
 import { SquaresPlusIcon } from '@heroicons/vue/20/solid'
-import { useRouter } from 'vue-router';
-import { store as recordStore } from '../../store/record';
 import PersonForm from '../Dashboard/People/Form.vue';
-
-const router = useRouter();
-
-const createRecord = (person) => {
-  recordStore.create({person});
-  router.push({ name: 'Dashboard' });
-}
+import { create } from '../../helpers/storage';
 </script>
 
 <template>
@@ -20,7 +12,7 @@ const createRecord = (person) => {
         HealthRecord
       </h1>
       <p class="text-center text-sm mb-10 text-gray-500">Setup new record. This record is stored in your browser. You will be reminded to download it periodically.</p>
-      <PersonForm @submit="createRecord" />
+      <PersonForm @submit="create" />
     </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/src/components/Start/Start.vue b/src/components/Start/Start.vue
index 742152a..49cc49c 100644
--- a/src/components/Start/Start.vue
+++ b/src/components/Start/Start.vue
@@ -1,12 +1,11 @@
 <script setup>
 import { SquaresPlusIcon } from '@heroicons/vue/20/solid'
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { store as recordStore } from '../../store/record';
 import { decrypt } from '../../helpers/encrypto';
 import PassphraseModal from '../Dashboard/Settings/PassphraseModal.vue';
+import { load } from '../../helpers/storage';
 
-const filePicker = ref(null);
+const filePicker = ref();
 const passphraseModalOpen = ref(false);
 const passphrase = ref();
 
@@ -16,8 +15,6 @@ const openPicker = () => {
   filePicker.value.click();
 }
 
-const router = useRouter();
-
 const processFile = () => {
 
   if (filePicker.value.files.length === 0) {
@@ -29,8 +26,7 @@ const processFile = () => {
   reader.onload = async () => {
     const result = JSON.parse(reader.result);
     if (result.hasOwnProperty('type') && result.type === 'healthRecord') {
-      recordStore.update(result);
-      router.push({ name: 'Dashboard' });
+      load(JSON.stringify(result));
     } else if (result.hasOwnProperty('encrypted') && result.encrypted && !passphrase.value) {
       passphraseModalOpen.value = true
     } else if (result.hasOwnProperty('encrypted') && result.encrypted && passphrase.value) {
@@ -38,8 +34,9 @@ const processFile = () => {
       if (! data) {
         return alert('Passphrase was incorrect. Please try again.');
       }
-      recordStore.update(JSON.parse(data));
-      router.push({ name: 'Dashboard' });
+      load(data)
+    } else {
+      return alert('File does not appear to valid.');
     }
   }
 
diff --git a/src/helpers/storage.js b/src/helpers/storage.js
new file mode 100644
index 0000000..30b3832
--- /dev/null
+++ b/src/helpers/storage.js
@@ -0,0 +1,120 @@
+import { record } from "../store/record";
+import { computed } from 'vue';
+import * as Vue from 'vue';
+import { enableVueBindings, getYjsDoc, syncedStore } from '@syncedstore/core';
+import { connect as webRTCConnect, disconnect as webRTCDisconnect } from "../providers/webrtc";
+import { connect as iDBConnect, disconnect as iDBDisconnect } from "../providers/indexeddb";
+
+enableVueBindings(Vue);
+
+const recordVersion = "2";
+
+const docShape = {
+  id: 'text',
+  version: 'text',
+  firstName: 'text',
+  lastName: 'text',
+  /** @type {import('../typedefs'.Person[])} */
+  people: [],
+  /** @type {import('../typedefs'.Vital[])} */
+  vitals: [],
+  /** @type {import('../typedefs'.Measurement[])} */
+  measurements: []
+}
+
+const yDoc = computed(() => {
+  return getYjsDoc(record.value);
+});
+
+const connectProviders = () => {
+  const indexedDBConnection = iDBConnect(yDoc.value);
+
+  indexedDBConnection.on('synced', () => {
+    webRTCConnect(record.value.id, yDoc.value)
+  });
+}
+
+const disconnectProviders = () => {
+  iDBDisconnect();
+  webRTCDisconnect();
+}
+
+/**
+ * Imports HealthRecord data into a SyncedStore
+ * 
+ * @param {string} recordData Stringified HealthRecord data
+ * 
+ * @returns {import("@syncedstore/core/types/doc").MappedTypeDescription<import("@syncedstore/core/types/doc").DocTypeDescription>}
+ */
+const importRecord = (recordData) => {
+  const recordSyncedStore = syncedStore(docShape);
+
+  /** @type {import("../typedefs").HealthRecord} */
+  const importedRecord = JSON.parse(recordData);
+
+  recordSyncedStore.version.insert(0, recordVersion);
+  recordSyncedStore.firstName.insert(0, importedRecord.firstName);
+  recordSyncedStore.lastName.insert(0, importedRecord.lastName);
+  recordSyncedStore.people.push(...importedRecord.people);
+  recordSyncedStore.vitals.push(...importedRecord.vitals);
+  recordSyncedStore.measurements.push(...importedRecord.measurements);
+
+  migrate(importedRecord, recordSyncedStore);
+
+  return recordSyncedStore;
+}
+
+/**
+ * 
+ * @param {import("../typedefs").HealthRecord} importedRecord 
+ * @param {import("@syncedstore/core/types/doc").MappedTypeDescription<import("@syncedstore/core/types/doc").DocTypeDescription>} syncedRecordStore 
+ */
+const migrate = (importedRecord, recordSyncedStore) => {
+  if (! importedRecord.version || importedRecord.version <= 1) {
+    recordSyncedStore.id.insert(0, crypto.randomUUID());
+  } else {
+    recordSyncedStore.id.insert(0, importedRecord.id);
+  }
+}
+
+/**
+ * Load HealthRecord data from stringified JSON
+ * 
+ * @param {string} recordData Record JSON stringified
+ */
+export const load = (recordData) => {
+  disconnectProviders();
+  record.value = importRecord(recordData);
+  connectProviders();
+}
+
+export const clear = () => {
+  disconnectProviders()
+  record.value = null;
+}
+
+export const create = (person) => {
+  /** @type {import('../typedefs').HealthRecord} */
+  const record = {
+    id:           crypto.randomUUID(),
+    version:      recordVersion,
+    firstName:    person.firstName,
+    lastName:     person.lastName,
+    people:       [{
+      ...person,
+      id: crypto.randomUUID()
+    }],
+    vitals:       [],
+    measurements: []
+  }
+  load(JSON.stringify(record));
+}
+
+if (localStorage.getItem('healthRecord')) {
+  // Support pulling in original storage
+  load(localStorage.getItem('healthRecord'));
+  localStorage.removeItem('healthRecord');
+} else if (localStorage.getItem('isActive')) {
+  record.value = syncedStore(docShape);
+  connectProviders();
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index e062f74..ae7cb3b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,9 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
-import router from './router'
+import { createApp } from 'vue';
+import './style.css';
+import App from './App.vue';
+import router from './router';
+import './helpers/storage';
 
 createApp(App)
 .use(router)
-.mount('#app')
-
+.mount('#app');
diff --git a/src/providers/indexeddb.js b/src/providers/indexeddb.js
new file mode 100644
index 0000000..7af36ec
--- /dev/null
+++ b/src/providers/indexeddb.js
@@ -0,0 +1,22 @@
+import { IndexeddbPersistence } from 'y-indexeddb';
+import { Doc } from 'yjs';
+
+/** @type {IndexeddbPersistence | undefined} */
+let iDBProvider;
+
+/**
+ * @param {Doc} yDoc Underlying yDoc for active HealthRecord
+ * 
+ * @returns {IndexeddbPersistence}
+ */
+export const connect = (yDoc) => {
+  iDBProvider = new IndexeddbPersistence('health-record', yDoc);
+  return iDBProvider;
+}
+
+export const disconnect = () => {
+  if (iDBProvider) {
+    iDBProvider.clearData();
+  }
+  iDBProvider = null;
+}
\ No newline at end of file
diff --git a/src/providers/webrtc.js b/src/providers/webrtc.js
new file mode 100644
index 0000000..2b48e71
--- /dev/null
+++ b/src/providers/webrtc.js
@@ -0,0 +1,23 @@
+import { WebrtcProvider } from 'y-webrtc';
+import { Doc } from 'yjs';
+
+/** @type {WebrtcProvider | undefined} */
+let webRTCProvider;
+
+/**
+ * @param {string} recordId Active HealthRecord ID
+ * @param {Doc} yDoc Underlying yDoc for active HealthRecord
+ */
+export const connect = (recordId, yDoc) => {
+  // console.log(`Setting up WebRTC provider for Record ID ${recordId}...`);
+  webRTCProvider = new WebrtcProvider(recordId, yDoc, {
+    signaling: []
+  });
+}
+
+export const disconnect = () => {
+  if (webRTCProvider) {
+    webRTCProvider.disconnect();
+  }
+  webRTCProvider = null;
+}
diff --git a/src/router/index.js b/src/router/index.js
index cd180a9..4e21ab2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,7 +15,7 @@ import VitalUpdate from '../components/Dashboard/Vitals/Update.vue'
 import Measurements from '../components/Dashboard/Measurements/Measurements.vue'
 import MeasurementCreate from '../components/Dashboard/Measurements/Create.vue'
 import MeasurementUpdate from '../components/Dashboard/Measurements/Update.vue'
-import { record } from '../store/record'
+import { record } from '../store/record';
 
 const routes = [
   {
diff --git a/src/store/measurements.js b/src/store/measurements.js
index 0e307dc..94fb8e8 100644
--- a/src/store/measurements.js
+++ b/src/store/measurements.js
@@ -1,5 +1,5 @@
 import { computed, reactive } from "vue";
-import { record, store as recordStore } from './record';
+import { record } from './record';
 
 /**
  * All recorded measurements
@@ -7,7 +7,7 @@ import { record, store as recordStore } from './record';
  * @since 0.1.0
  */
 export const measurements = computed(() => {
-  return record.value.measurements.sort((a, b) => b.date - a.date );
+  return [...record.value.measurements].sort((a, b) => b.date - a.date );
 });
 
 /**
@@ -22,10 +22,7 @@ export const store = reactive({
    * @param {import("../typedefs").Measurement} measurement 
    */
   create(measurement) {
-    const recordCopy = record.value;
-    recordCopy.measurements.push(measurement);
-
-    recordStore.update(recordCopy);
+    record.value.measurements.push(measurement);
   },
 
   /**
@@ -35,21 +32,14 @@ export const store = reactive({
    * @param {import("../typedefs").Measurement} measurementObject 
    */
   update(measurementId, measurementObject) {
-    const measurement = measurements.value.find(measurement => measurement.id === measurementId);
-
-    if (! measurement) throw new Error(`Could not find measurement with ID: ${measurementId}.`);
-
-    measurement.value     = measurementObject.value;
-    measurement.date      = measurementObject.date;
-    measurement.personId  = measurementObject.personId;
-    measurement.vitalId   = measurementObject.vitalId;
-
     const index = measurements.value.findIndex(measurement => measurement.id === measurementId);
 
-    const recordCopy = record.value;
-    recordCopy.measurements[index] = measurement
+    if (index === -1) throw new Error(`Could not find measurement with ID: ${measurementId}.`);
 
-    recordStore.update(recordCopy);
+    record.value.measurements[index].value     = measurementObject.value;
+    record.value.measurements[index].date      = measurementObject.date;
+    record.value.measurements[index].personId  = measurementObject.personId;
+    record.value.measurements[index].vitalId   = measurementObject.vitalId;
   },
 
   /**
@@ -62,11 +52,7 @@ export const store = reactive({
       return;
     }
 
-    const measurementsCopy = measurements.value.filter(measurement => measurement.id !== measurementId);
-
-    const recordCopy = record.value;
-    recordCopy.measurements = measurementsCopy;
-
-    recordStore.update(recordCopy);
+    const index = measurements.value.findIndex(measurement => measurement.id !== measurementId);
+    record.value.measurements.splice(index, 1);
   }
 });
diff --git a/src/store/people.js b/src/store/people.js
index df97507..e800309 100644
--- a/src/store/people.js
+++ b/src/store/people.js
@@ -1,5 +1,5 @@
 import { computed, reactive } from "vue";
-import { record, store as recordStore } from "./record";
+import { record } from "./record";
 
 /**
  * All tracked people
@@ -22,10 +22,7 @@ export const store = reactive({
    * @param {import("../typedefs").Person} person 
    */
   create(person) {
-    const recordCopy = record.value;
-    recordCopy.people.push(person);
-
-    recordStore.update(recordCopy);
+    record.value.people.push(person);
   },
 
   /**
@@ -35,21 +32,14 @@ export const store = reactive({
    * @param {import("../typedefs").Person} personObject 
    */
   update(personId, personObject) {
-    const person = people.value.find(person => person.id === personId);
-
-    if (! person) throw new Error(`Could not find person with ID: ${personId}.`);
-
-    person.firstName  = personObject.firstName;
-    person.lastName   = personObject.lastName;
-    person.sex        = personObject.sex;
-    person.dob        = personObject.dob;
-
     const index = people.value.findIndex(person => person.id === personId);
 
-    const recordCopy = record.value;
-    recordCopy.people[index] = person
+    if (index === -1) throw new Error(`Could not find person with ID: ${personId}.`);
 
-    recordStore.update(recordCopy);
+    record.value.people[index].firstName  = personObject.firstName
+    record.value.people[index].lastName   = personObject.lastName
+    record.value.people[index].sex        = personObject.sex
+    record.value.people[index].dob        = personObject.dob
   },
 
   /**
@@ -62,11 +52,7 @@ export const store = reactive({
       return;
     }
 
-    const peopleCopy = people.value.filter(person => person.id !== personId);
-
-    const recordCopy = record.value;
-    recordCopy.people = peopleCopy;
-
-    recordStore.update(recordCopy);
+    const index = people.value.findIndex(person => person.id === personId);
+    record.value.people.splice(index, 1);
   }
 });
diff --git a/src/store/record.js b/src/store/record.js
index 0e7393d..0293528 100644
--- a/src/store/record.js
+++ b/src/store/record.js
@@ -1,18 +1,7 @@
-import { computed, reactive } from 'vue';
-import { store as peopleStore } from './people';
+import { reactive, watch, shallowRef } from 'vue';
 
-const recordVersion = 1;
-
-/**
- * Browser stored health record
- * 
- * @type {import('vue').ComputedRef<import('../typedefs').HealthRecord>}
- * 
- * @since 0.1.0
- */
-export const record = computed(() => {
-  return store.record;
-});
+/** @type {ShallowRef<import("@syncedstore/core/types/doc").MappedTypeDescription<{id: string, firstName: string, lastName: string, people: import('../typedefs').Person[], vitals: import('../typedefs').Vital[], measurements: import('../typedefs').Measurement[]}> | undefined>} store SyncedStore object */
+export const record = shallowRef();
 
 /**
  * Record store
@@ -20,45 +9,24 @@ export const record = computed(() => {
  * @since 0.1.0
  */
 export const store  = reactive({
-  /** @type {import('../typedefs').HealthRecord} */
-  record: JSON.parse(localStorage.getItem('healthRecord')),
 
-  /**
-   * Create Record
-   * 
-   * @param {*} param0 
-   */
-  create({ person }) {
-    /** @type {import('../typedefs').HealthRecord} */
-    const record = {
-      type:         'healthRecord',
-      version:      recordVersion,
-      firstName:    person.firstName,
-      lastName:     person.lastName,
-      people:       [],
-      vitals:       [],
-      measurements: []
-    }
-    this.update(record);
-    peopleStore.create(person);
-  },
+  record,
+
+  isActive: false,
 
-  /**
-   * Update Record
-   * 
-   * @param {import('../typedefs').HealthRecord} record 
-   */
-  update(record) {
-    record.updated = Date.now();
-    localStorage.setItem('healthRecord', JSON.stringify(record));
-    this.record = record
-  },
+  downloadable() {
+    const exportable = this.record.toJSON();
+    exportable.type = 'healthRecord';
+    return exportable;
+  }
+});
 
-  /**
-   * Delete Record
-   */
-  delete() {
-    this.record = null;
-    localStorage.removeItem('healthRecord');
+watch(record, (value) => {
+  if (value) {
+    store.isActive = true;
+    localStorage.setItem('isActive', true);
+  } else {
+    store.isActive = false;
+    localStorage.removeItem('isActive');
   }
 });
diff --git a/src/store/vitals.js b/src/store/vitals.js
index 48919d1..173a016 100644
--- a/src/store/vitals.js
+++ b/src/store/vitals.js
@@ -1,5 +1,5 @@
 import { computed, reactive } from "vue";
-import { record, store as recordStore } from './record';
+import { record } from './record';
 
 /**
  * All vitals
@@ -7,7 +7,7 @@ import { record, store as recordStore } from './record';
  * @since 0.1.0
  */
 export const vitals = computed(() => {
-  return record.value.vitals.sort((a,b) => a.name.localeCompare(b.name));
+  return [...record.value.vitals].sort((a,b) => a.name.localeCompare(b.name));
 });
 
 /**
@@ -54,10 +54,7 @@ export const store = reactive({
    * @param {import("../typedefs").Vital} vital 
    */
   create(vital) {
-    const recordCopy = record.value;
-    recordCopy.vitals.push(vital);
-
-    recordStore.update(recordCopy);
+    record.value.vitals.push(vital);
   },
 
   /**
@@ -67,22 +64,15 @@ export const store = reactive({
    * @param {import("../typedefs").Vital} vitalObject 
    */
   update(vitalId, vitalObject) {
-    const vital = vitals.value.find(vital => vital.id === vitalId);
-
-    if (! vital) throw new Error(`Could not find vital with ID: ${vitalId}.`);
-
-    vital.name        = vitalObject.name;
-    vital.description = vitalObject.description;
-    vital.unit        = vitalObject.unit;
-    vital.low         = vitalObject.low;
-    vital.high        = vitalObject.high;
-
     const index = vitals.value.findIndex(vital => vital.id === vitalId);
 
-    const recordCopy = record.value;
-    recordCopy.vitals[index] = vital
+    if (index === -1) throw new Error(`Could not find vital with ID: ${vitalId}.`);
 
-    recordStore.update(recordCopy);
+    record.value.vitals[index].name        = vitalObject.name;
+    record.value.vitals[index].description = vitalObject.description;
+    record.value.vitals[index].unit        = vitalObject.unit;
+    record.value.vitals[index].low         = vitalObject.low;
+    record.value.vitals[index].high        = vitalObject.high;
   },
 
   /**
@@ -95,11 +85,7 @@ export const store = reactive({
       return;
     }
 
-    const vitalsCopy = vitals.value.filter(vital => vital.id !== vitalId);
-
-    const recordCopy = record.value;
-    recordCopy.vitals = vitalsCopy;
-
-    recordStore.update(recordCopy);
+    const index = vitals.value.findIndex(vital => vital.id !== vitalId);
+    record.value.vitals.splice(index, 1);
   }
 });
diff --git a/src/typedefs.js b/src/typedefs.js
index 6e1ee95..38f4aec 100644
--- a/src/typedefs.js
+++ b/src/typedefs.js
@@ -1,5 +1,6 @@
 /**
  * @typedef {object} HealthRecord
+ * @property {string} id
  * @property {string} type
  * @property {number} version
  * @property {string} firstName

From 328b950628d1ceb8ab4323bd22774bb3d3983edd Mon Sep 17 00:00:00 2001
From: Roy <roy@roymckenzie.me>
Date: Fri, 29 Sep 2023 15:44:25 -0500
Subject: [PATCH 2/2] Updated version, README and CHANGELOG

---
 CHANGELOG.md | 13 +++++++++++++
 README.md    |  4 ++--
 package.json |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 44ac757..8d9bea3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.0] - 2023-09-29
+
+### Added
+- syncedStore, yjs, y-indexeddb, y-webrtc libraries
+
+### Changed
+- CRDT enabled through syncedStore and Yjs
+- Changed storage provider from localstorage to indexedDB
+- HealthRecord type now has an ID
+
+### Fixed
+
+
 ## [0.1.8] - 2023-09-22
 
 ### Added
diff --git a/README.md b/README.md
index 522230c..8a485ac 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 Record, track, and visualize your personal health data.
 
 ## About
-HealthRecord allows individuals to record, track and visualize vital measurements related to their personal health. HealthRecord data is stored in the browser's `localStorage` for basic privacy. HealthRecord also supports tracking multiple people in one HealthRecord. HealthRecord aims to be [local-first software](https://www.inkandswitch.com/local-first/).
+HealthRecord allows individuals to record, track and visualize vital measurements related to their personal health. HealthRecord data is stored in the browser for basic privacy using CRDT ([Conflict-free Replicated Data Type](https://crdt.tech/)) architecture. HealthRecord also supports tracking multiple people in one HealthRecord. HealthRecord aims to be [local-first software](https://www.inkandswitch.com/local-first/).
 
 See a deployment at [healthrecord.pages.dev](https://healthrecord.pages.dev/)
 
@@ -19,6 +19,7 @@ See a deployment at [healthrecord.pages.dev](https://healthrecord.pages.dev/)
 * Identify trends with graph visualizations
 * Download and open passphrase encrypted data
 * Installs as PWA from browser
+* Uses CRDT ([Conflict-free Replicated Data Type](https://crdt.tech/)) architecture.
 
 ## Getting Started
 To get a local copy up and running follow these simple steps.
@@ -46,7 +47,6 @@ Visit [localhost:5173](http://localhost:5173) in your browser.
 ## Roadmap
 - [ ] Track medications
 - [ ] AI insights and vitals suggestions
-- [ ] Implement [Automerge](https://automerge.org/)
 - [ ] Add cloud hosting option
 
 ## Contributing
diff --git a/package.json b/package.json
index 21966d1..b091acb 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "healthrecord",
   "private": true,
-  "version": "0.1.8",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",