diff --git a/package-lock.json b/package-lock.json
index f392b65..39a35ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -68,6 +68,15 @@
         "resolve": "^1.17.0"
       }
     },
+    "@rollup/plugin-json": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
+      "integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.8"
+      }
+    },
     "@rollup/plugin-node-resolve": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-10.0.0.tgz",
@@ -568,9 +577,9 @@
       "dev": true
     },
     "estree-walker": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz",
-      "integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
     "esutils": {
diff --git a/package.json b/package.json
index 10e99de..e11b50d 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "eslint": "^7.15.0",
     "rollup": "^2.3.4",
diff --git a/rollup.config.js b/rollup.config.js
index e8965ec..ead8362 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -4,6 +4,9 @@ import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import css from 'rollup-plugin-css-only';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+// import commonjs from '@rollup/plugin-commonjs';
+// import json from '@rollup/plugin-json';
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -57,7 +60,7 @@ export default {
 			dedupe: ['svelte']
 		}),
 		commonjs(),
-
+		nodeResolve({preferBuiltins: true, dedupe: ['twilio-sync']}),
 		// In dev mode, call `npm run start` once
 		// the bundle has been generated
 		!production && serve(),
diff --git a/src/App.svelte b/src/App.svelte
index 9d81e96..7300c45 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,152 +1,165 @@
 <script>
-    import { onMount } from 'svelte'
-    import { writable } from 'svelte/store'
-    import { fade } from 'svelte/transition'
+    import { onMount } from "svelte";
+    import { writable } from "svelte/store";
+    import { fade } from "svelte/transition";
+    import { chores } from "./stores/test";
 
-    let twilioReady = false
-    let mounted = false
-    let syncClient, getList, getItems, pushItem, removeItem, updateItem, chores
+    // let twilioReady = false;
+    // let mounted = false;
+    // let syncClient, getList, getItems, pushItem, removeItem, updateItem, chores;
 
-    onMount(() => {
-        mounted = true
-        if (twilioReady) {
-            setupTwilioClient()
-        }
-    })
+    // onMount(() => {
+    //     mounted = true;
+    //     if (twilioReady) {
+    //         setupTwilioClient();
+    //     }
+    // });
 
-    const twilioLoaded = () => {
-        twilioReady = true
-        if (mounted) {
-            setupTwilioClient()
-        }
-    }
+    // const twilioLoaded = () => {
+    //     twilioReady = true;
+    //     if (mounted) {
+    //         setupTwilioClient();
+    //     }
+    // };
 
-    const setupTwilioClient = async () => {
-        try {
-            const response = await fetch('http://localhost:5001/token')
-            const responseJson = await response.json()
-            const token = responseJson.token
-            syncClient = new Twilio.Sync.Client(token, { logLevel: 'info' })
-        } catch (e) {
-          console.log(e)
-        }
-      
-        syncClient.on('connectionStateChanged', state => {
-            if (state != 'connected') {
-                console.log(`Sync is not live (websocket connection ${state})`)
-            } else {
-                console.log('Sync is live!')
-            }
-        })
+    // const setupTwilioClient = async () => {
+    //     try {
+    //         const response = await fetch("http://localhost:5001/token");
+    //         const responseJson = await response.json();
+    //         const token = responseJson.token;
+    //         syncClient = new Twilio.Sync.Client(token, { logLevel: "info" });
+    //     } catch (e) {
+    //         console.log(e);
+    //     }
 
-        getList = async name => syncClient.list(name)
+    //     syncClient.on("connectionStateChanged", (state) => {
+    //         if (state != "connected") {
+    //             console.log(`Sync is not live (websocket connection ${state})`);
+    //         } else {
+    //             console.log("Sync is live!");
+    //         }
+    //     });
 
-        getItems = async (listName, from, pageSize, order) => {
-            const list = await getList(listName)
-            const items = await list.getItems({from, pageSize, order})
-            return items.items.map(item => item.data)
-        }
+    //     getList = async (name) => syncClient.list(name);
 
-        pushItem = async (listName, item) => {
-            const list = await getList(listName)
-            try { 
-                const result = await list.push(item)
-                return result.data
-            } catch (e) {
-                console.log(e)
-            }
-        }
+    //     getItems = async (listName, from, pageSize, order) => {
+    //         const list = await getList(listName);
+    //         const items = await list.getItems({ from, pageSize, order });
+    //         return items.items.map((item) => item.data);
+    //     };
 
-        removeItem = async (listName, index) => {
-            const list = await getList(listName)
-            try { 
-                await list.remove(index)
-            } catch (e) {
-                console.log(e)
-            }
-        }
+    //     pushItem = async (listName, item) => {
+    //         const list = await getList(listName);
+    //         try {
+    //             const result = await list.push(item);
+    //             return result.data;
+    //         } catch (e) {
+    //             console.log(e);
+    //         }
+    //     };
 
-        updateItem = async (listName, index, value) => {
-            const list = await getList(listName)
-            try { 
-                await list.set(index, value)
-            } catch (e) {
-                console.log(e)
-            }
-        }
+    //     removeItem = async (listName, index) => {
+    //         const list = await getList(listName);
+    //         try {
+    //             await list.remove(index);
+    //         } catch (e) {
+    //             console.log(e);
+    //         }
+    //     };
 
-        const createSyncStore = listName => {
-            const { set, subscribe, update } = writable([])
+    //     updateItem = async (listName, index, value) => {
+    //         const list = await getList(listName);
+    //         try {
+    //             await list.set(index, value);
+    //         } catch (e) {
+    //             console.log(e);
+    //         }
+    //     };
 
-            getItems(listName).then(items => set(items))
+    //     const createSyncStore = (listName) => {
+    //         const { set, subscribe, update } = writable([]);
 
-            getList(listName).then(choreList => {
-                choreList.on('itemAdded', item => {
-                    update(existing => existing.concat(item.item))
-                })
-                choreList.on('itemRemoved', args => {
-                    update(existing => existing.filter(item => item.index !== args.index))
-                })
-                choreList.on('itemUpdated', args => {
-                    update(existing => existing.map(item => {
-                        if (item.index === args.item.index) {
-                            item.value = args.item.value
-                        }
-                    }))
-                })
-            })
+    //         getItems(listName).then((items) => set(items));
 
-            return {
-                subscribe,
-                add: chore => pushItem(listName, { chore }),
-                delete: index => removeItem(listName, index),
-                update: (index, value) => updateItem(listName, index, value)
-            }
-        }
+    //         getList(listName).then((choreList) => {
+    //             choreList.on("itemAdded", (item) => {
+    //                 update((existing) => existing.concat(item.item));
+    //             });
+    //             choreList.on("itemRemoved", (args) => {
+    //                 update((existing) =>
+    //                     existing.filter((item) => item.index !== args.index)
+    //                 );
+    //             });
+    //             choreList.on("itemUpdated", (args) => {
+    //                 update((existing) =>
+    //                     existing.map((item) => {
+    //                         if (item.index === args.item.index) {
+    //                             item.value = args.item.value;
+    //                         }
+    //                     })
+    //                 );
+    //             });
+    //         });
 
-        chores = createSyncStore('chores')
-    }
+    //         return {
+    //             subscribe,
+    //             add: (chore) => pushItem(listName, { chore }),
+    //             delete: (index) => removeItem(listName, index),
+    //             update: (index, value) => updateItem(listName, index, value),
+    //         };
+    //     };
 
-    $: console.log($chores)
+    //     chores = createSyncStore("chores");
+    // };
 
-    let newChore = ''
+    $: console.log("from app", $chores);
+
+    let newChore = "";
     const createChore = () => {
-        chores.add(newChore)
-        newChore = ''
-    }
+        chores.add(newChore);
+        newChore = "";
+    };
 
-    const deleteChore = index => chores.delete(index)
+    const deleteChore = (index) => chores.delete(index);
 
     const updateChore = (index, newValue) => {
-        chores.update(index, newValue)
-    }
-
-
+        chores.update(index, newValue);
+    };
 </script>
 
 <svelte:head>
-    <script src="//media.twiliocdn.com/sdk/js/sync/v0.8/twilio-sync.min.js" on:load={twilioLoaded}></script>
-    <script src="http://api.ipify.org?format=jsonp&callback=getIP"></script>
-    <script>function getIP(json) { console.log(json.ip) }</script>
+    <!--<script
+        src="//media.twiliocdn.com/sdk/js/sync/v0.8/twilio-sync.min.js"
+        on:load={twilioLoaded} ✂prettier:content✂="CiAgICA=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=">{}</script>-->
+    <script src="http://api.ipify.org?format=jsonp&callback=getIP">
+    </script>
+    <script>
+        function getIP(json) {
+            console.log(json.ip);
+        }
+    </script>
 </svelte:head>
 
-<nav>
-</nav>
+<nav />
 
 <main path="/">
     <form on:submit|preventDefault={createChore}>
-        <input bind:value={newChore} type=text>
-        <input style="cursor:pointer" type=submit disabled={newChore === ""}>
+        <input bind:value={newChore} type="text" />
+        <input
+            style="cursor:pointer"
+            type="submit"
+            disabled={newChore === ''} />
     </form>
     <div>
         {#if $chores && $chores.length > 0}
             {#each $chores as chore}
                 <div in:fade>
                     {chore.value.chore}
-                    <button style="cursor: pointer" on:click={() => deleteChore(chore.index)}>delete</button>
+                    <button
+                        style="cursor: pointer"
+                        on:click={() => deleteChore(chore.index)}>delete</button>
                 </div>
             {/each}
         {/if}
     </div>
 </main>
-
diff --git a/src/main.js b/src/main.js
index eeeafcc..0992fba 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 import App from './App.svelte';
+import './twilioInit';
 
 const app = new App({
 	target: document.body,
diff --git a/src/stores/store.js b/src/stores/store.js
new file mode 100644
index 0000000..eb3183f
--- /dev/null
+++ b/src/stores/store.js
@@ -0,0 +1,80 @@
+import { writable } from 'svelte/store';
+const SyncClient = window.Twilio.Sync.Client
+
+
+let syncClient, getList, getItems, pushItem, removeItem, updateItem;
+
+const setupTwilioClient = async () => {
+  try {
+      const response = await fetch("http://localhost:5001/token");
+      const responseJson = await response.json();
+      const token = responseJson.token;
+      syncClient = new SyncClient(token, { logLevel: "info" });
+  } catch (e) {
+      console.log(e);
+  }
+
+  syncClient.on("connectionStateChanged", (state) => {
+      if (state != "connected") {
+          console.log(`Sync is not live (websocket connection ${state})`);
+      } else {
+          console.log("Sync is live!");
+      }
+  });
+
+  getList = async (name) => syncClient.list(name);
+
+  getItems = async (listName, from, pageSize, order) => {
+    const list = await getList(listName);
+    const items = await list.getItems({ from, pageSize, order });
+    return items.items.map((item) => item.data);
+  };
+
+
+
+  // chores = createSyncStore('chores');
+}
+
+function createSyncStore() {
+  const { subscribe, update, set } = writable([]);
+
+  // getItems(listName).then((items) => set(items));
+
+
+
+
+  return {
+      subscribe,
+  };
+}
+
+
+
+setupTwilioClient().then(() => {
+  const { subscribe, update, set } = writable([]);
+
+  getItems('chores').then((items) => set(items));
+
+  console.log('getList', getList)
+  console.log('createSyncStore', createSyncStore())
+  createSyncStore().add = (chore) => pushItem(listName, { chore })
+
+})
+
+
+
+
+export const chores = createSyncStore('chores');
+
+// function createSyncStore(listName) {
+//     const { subscribe, update, set } = writable([]);
+
+//     getItems(listName).then((items) => set(items));
+
+
+
+
+//     return {
+//         subscribe,
+//     };
+// }
diff --git a/src/stores/test.js b/src/stores/test.js
new file mode 100644
index 0000000..093662c
--- /dev/null
+++ b/src/stores/test.js
@@ -0,0 +1,15 @@
+import { writable } from 'svelte/store';
+
+function createTwilioStore() {
+    const { subscribe, update, set } = writable([]);
+
+    return {
+        subscribe,
+        getItems: (items) => set(items),
+        add: (chore) => pushItem(listName, { chore }),
+        delete: (index) => removeItem(listName, index),
+        update: (index, value) => updateItem(listName, index, value),
+    };
+}
+
+export const chores = createTwilioStore();
diff --git a/src/stores/twiliostore.js b/src/stores/twiliostore.js
new file mode 100644
index 0000000..4004b6a
--- /dev/null
+++ b/src/stores/twiliostore.js
@@ -0,0 +1,163 @@
+// var SyncClient = require('twilio-sync');
+// import SyncClient from 'twilio-sync';
+
+import { writable } from "svelte/store";
+// console.log('store', store);
+
+let syncClient, getList, getItems, pushItem, removeItem, updateItem;
+
+// const setupTwilioClient = async () => {
+  // try {
+  //     const response = await fetch("http://localhost:5001/token");
+  //     const responseJson = await response.json();
+  //     const token = responseJson.token;
+  //     syncClient = new SyncClient(token, { logLevel: "info" });
+  // } catch (e) {
+  //     console.log(e);
+  // }
+
+  // syncClient.on("connectionStateChanged", (state) => {
+  //     if (state != "connected") {
+  //         console.log(`Sync is not live (websocket connection ${state})`);
+  //     } else {
+  //         console.log("Sync is live!");
+  //     }
+  // });
+
+  // getList = async (name) => syncClient.list(name);
+
+  // getItems = async (listName, from, pageSize, order) => {
+  //     const list = await getList(listName);
+  //     const items = await list.getItems({ from, pageSize, order });
+  //     return items.items.map((item) => item.data);
+  // };
+
+  // pushItem = async (listName, item) => {
+  //     const list = await getList(listName);
+  //     try {
+  //         const result = await list.push(item);
+  //         return result.data;
+  //     } catch (e) {
+  //         console.log(e);
+  //     }
+  // };
+
+  // removeItem = async (listName, index) => {
+  //     const list = await getList(listName);
+  //     try {
+  //         await list.remove(index);
+  //     } catch (e) {
+  //         console.log(e);
+  //     }
+  // };
+
+  // updateItem = async (listName, index, value) => {
+  //     const list = await getList(listName);
+  //     try {
+  //         await list.set(index, value);
+  //     } catch (e) {
+  //         console.log(e);
+  //     }
+  // };
+
+const createSyncStore = async (listName) => {
+
+  //   try {
+  //     const response = await fetch("http://localhost:5001/token");
+  //     const responseJson = await response.json();
+  //     const token = responseJson.token;
+  //     syncClient = new SyncClient(token, { logLevel: "info" });
+  // } catch (e) {
+  //     console.log(e);
+  // }
+
+  // syncClient.on("connectionStateChanged", (state) => {
+  //     if (state != "connected") {
+  //         console.log(`Sync is not live (websocket connection ${state})`);
+  //     } else {
+  //         console.log("Sync is live!");
+  //     }
+  // });
+
+  // getList = async (name) => syncClient.list(name);
+
+  // getItems = async (listName, from, pageSize, order) => {
+  //     const list = await getList(listName);
+  //     const items = await list.getItems({ from, pageSize, order });
+  //     return items.items.map((item) => item.data);
+  // };
+
+  // pushItem = async (listName, item) => {
+  //     const list = await getList(listName);
+  //     try {
+  //         const result = await list.push(item);
+  //         return result.data;
+  //     } catch (e) {
+  //         console.log(e);
+  //     }
+  // };
+
+  // removeItem = async (listName, index) => {
+  //     const list = await getList(listName);
+  //     try {
+  //         await list.remove(index);
+  //     } catch (e) {
+  //         console.log(e);
+  //     }
+  // };
+
+  // updateItem = async (listName, index, value) => {
+  //     const list = await getList(listName);
+  //     try {
+  //         await list.set(index, value);
+  //     } catch (e) {
+  //         console.log(e);
+  //     }
+  // };
+
+
+
+
+       const { set, subscribe, update } = writable([]);
+
+  //     getItems(listName).then((items) => set(items));
+
+  //     getList(listName).then((choreList) => {
+  //         choreList.on("itemAdded", (item) => {
+  //             update((existing) => existing.concat(item.item));
+  //         });
+  //         choreList.on("itemRemoved", (args) => {
+  //             update((existing) =>
+  //                 existing.filter((item) => item.index !== args.index)
+  //             );
+  //         });
+  //         choreList.on("itemUpdated", (args) => {
+  //             update((existing) =>
+  //                 existing.map((item) => {
+  //                     if (item.index === args.item.index) {
+  //                         item.value = args.item.value;
+  //                     }
+  //                 })
+  //             );
+  //         });
+  //     });
+
+  //     return {
+  //         subscribe,
+  //         add: (chore) => pushItem(listName, { chore }),
+  //         delete: (index) => removeItem(listName, index),
+  //         update: (index, value) => updateItem(listName, index, value),
+  //     };
+
+  return {
+    subscribe,
+    add: () => set({})
+  }
+
+  };
+
+export const chores = createSyncStore("chores");
+// };
+
+// setupTwilioClient();
+
diff --git a/src/twilioInit.js b/src/twilioInit.js
new file mode 100644
index 0000000..41b6507
--- /dev/null
+++ b/src/twilioInit.js
@@ -0,0 +1,73 @@
+import { chores } from "./stores/test";
+
+let syncClient, getList, getItems, pushItem, removeItem, updateItem;
+
+(async () => {
+    try {
+      const response = await fetch("http://localhost:5001/token");
+      const responseJson = await response.json();
+      const token = responseJson.token;
+      syncClient = new Twilio.Sync.Client(token, { logLevel: "info" });
+  } catch (e) {
+      console.log(e);
+  }
+
+  syncClient.on("connectionStateChanged", (state) => {
+      if (state != "connected") {
+          console.log(`Sync is not live (websocket connection ${state})`);
+      } else {
+          console.log("Sync is live!");
+      }
+  });
+
+  getList = async (name) => syncClient.list(name);
+
+  getItems = async (listName, from, pageSize, order) => {
+      const list = await getList(listName);
+      const items = await list.getItems({ from, pageSize, order });
+      return items.items.map((item) => item.data);
+  };
+
+  pushItem = async (listName, item) => {
+      const list = await getList(listName);
+      try {
+          const result = await list.push(item);
+          return result.data;
+      } catch (e) {
+          console.log(e);
+      }
+  };
+
+  removeItem = async (listName, index) => {
+      const list = await getList(listName);
+      try {
+          await list.remove(index);
+      } catch (e) {
+          console.log(e);
+      }
+  };
+
+  updateItem = async (listName, index, value) => {
+      const list = await getList(listName);
+      try {
+          await list.set(index, value);
+      } catch (e) {
+          console.log(e);
+      }
+  };
+
+  // as soon as Twilio is working, we write on the store
+  getItems('chores').then((items) => chores.getItems(items));
+
+
+})();
+
+
+// const twilioClientInit = async () => {
+
+// }
+
+// twilioClientInit()
+
+
+console.log('getList', getList)