Implement actually adding notes to the db.

db.json

@@ -0,0 +1,8 @@
+{
+  "notes": [
+    {
+      "id": 1,
+      "text": "This note is from the db.json file!"
+    }
+  ]
+}

package-lock.json

@@ -1900,13 +1900,14 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.10.tgz",
-      "integrity": "sha512-bzk7uGKPEAKC4XHnHvmMUui9MASOVK7e4xgDz6oOBWqo1mnvqk1YnNZzY+0XMaCr4PFOFqHw739JmzJb6SBqUg==",
+      "integrity": "sha512-kQzHzRsM0NPAWHeqSTb2J4VsHhjRkGeLTsGzeMnW+sojgTnS3T94KacwvYgVS4qeZAKiDq0bMNZoJWrHVQ3T8g==",
+      "dev": true,
       "requires": {
         "@babel/parser": "^7.10.4",
         "@babel/types": "^7.10.4",
-        "@vue/shared": "3.0.0-rc.7",
+        "@vue/shared": "3.0.0-rc.10",
         "estree-walker": "^2.0.1",
         "source-map": "^0.6.1"
       },
@@ -1914,31 +1915,33 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
         }
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.10.tgz",
-      "integrity": "sha512-wE8YmkN3ISodjijzG44YiRgbcb7skqdRbhoYgABGz8uHvNSMGPLrM80cRosgLoGlcgxDPxj0xaEAczBunJYV2g==",
+      "integrity": "sha512-pqIUf5leZm0P9379utrRSVBMxhV8XaqJTEFFp5etCtbEa/H5ALs29EjFMtMcm9sQaVkZlKLu86mgIacbYB9Q3w==",
+      "dev": true,
       "requires": {
-        "@vue/compiler-core": "3.0.0-rc.7",
+        "@vue/compiler-core": "3.0.0-rc.10",
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/shared": "3.0.0-rc.10"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.0-rc.10.tgz",
-      "integrity": "sha512-4DSOw7yczVf5E+Dbs9/OmyEmG2zWsDx7dmOYWcv75LOj2/dqOys3fVtcJfsfeIXzKBTy51hX80+P1lB0nWq32g==",
+      "integrity": "sha512-VIJ+VXqeM7WoRNgD9uYSARVb6CYq+JS2NNHfeerfNc7Uk3pjYHRv1MwEicAvN6zWFm5GLC1ZYTVD+WFg3xGAkQ==",
       "dev": true,
       "requires": {
         "@babel/parser": "^7.10.4",
         "@babel/types": "^7.10.4",
-        "@vue/compiler-core": "3.0.0-rc.7",
+        "@vue/compiler-core": "3.0.0-rc.10",
-        "@vue/compiler-dom": "3.0.0-rc.7",
+        "@vue/compiler-dom": "3.0.0-rc.10",
-        "@vue/compiler-ssr": "3.0.0-rc.7",
+        "@vue/compiler-ssr": "3.0.0-rc.10",
-        "@vue/shared": "3.0.0-rc.7",
+        "@vue/shared": "3.0.0-rc.10",
         "consolidate": "^0.15.1",
         "estree-walker": "^2.0.1",
         "hash-sum": "^2.0.0",
@@ -1960,13 +1963,13 @@
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.0-rc.10.tgz",
-      "integrity": "sha512-jXNEgnhjm/SStdwxrHaGwYgSvwQV8ZV7xInCsdZsEcNXNSV4cveuEQG0x/mFO/xuD+RudcdMTbQr75V5oi2RyQ==",
+      "integrity": "sha512-JBPil8sO5j7puB8acX2CQMRXEYB/EP8PoEur7RcF/+aqATI7C4yqWcSLC5TRJpigj6xE6ku6sx8om+j7ZHvgBw==",
       "dev": true,
       "requires": {
-        "@vue/compiler-dom": "3.0.0-rc.7",
+        "@vue/compiler-dom": "3.0.0-rc.10",
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/shared": "3.0.0-rc.10"
       }
     },
     "@vue/component-compiler-utils": {
@@ -2032,36 +2035,58 @@
       "dev": true
     },
     "@vue/reactivity": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.0-rc.10.tgz",
-      "integrity": "sha512-j8wUuc131JrHvQzEWjlRMYHadRLhGaubIZHR+4QO/xwvNIdJWK8zQd9iqxizjBW0E1MhrZkDbsiClNN8lq/ILQ==",
+      "integrity": "sha512-mkUZfOJlbqGZx2cARmhCs5r2+xLJPL7VFNagmlA3Fd66ZXBc3ZvTQdYsY4VUbYJFe5ByIzqu9TZiAkzXY+JVaA==",
       "requires": {
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/shared": "3.0.0-rc.10"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
+          "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
+        }
       }
     },
     "@vue/runtime-core": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.0-rc.10.tgz",
-      "integrity": "sha512-xY+3Mw+3Nb8BxfYftQug3UAUHPJPvbhNkyVuCMVgBRBsZIFbiL6F+gy22Wd7Q6zgWagUQCtH1FDrPZARj6tySg==",
+      "integrity": "sha512-VK/kq4gDDoqZ45CVwdbLLpikXLYLCt6YLhdgXX3fhf20gvPqrbEZv1ZNLruNnhhTpf9cLyU4tZ18DHeaUYPziw==",
       "requires": {
-        "@vue/reactivity": "3.0.0-rc.7",
+        "@vue/reactivity": "3.0.0-rc.10",
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/shared": "3.0.0-rc.10"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
+          "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
+        }
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.10.tgz",
-      "integrity": "sha512-tgLl/tSIdovP/6uEzKrhwG5MwFu0yJ3l0bPUCyyFJM4tnnHiRtr9Zsn6GVDZYwImtBgBwByqBMML8ZYlVEqH9w==",
+      "integrity": "sha512-bH4GuneHt3FQ+/21jba5orM/CO9N1cnT7J3wtrxopFJ4/4H5cvHXyG6v+ZVTu1d733Ij/6yMRA7xbtfi9a4zJw==",
       "requires": {
-        "@vue/runtime-core": "3.0.0-rc.7",
+        "@vue/runtime-core": "3.0.0-rc.10",
-        "@vue/shared": "3.0.0-rc.7",
+        "@vue/shared": "3.0.0-rc.10",
         "csstype": "^2.6.8"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
+          "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
+        }
       }
     },
     "@vue/shared": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
-      "integrity": "sha512-wRqe6DvR9UIH4Il4bxMIbuGupWFtJW+PZKqgclYjuO+zWNQEC7hC5OxONgXeGcv1h4KtfJsc8wSU31hxok9XAQ=="
+      "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ==",
+      "dev": true
     },
     "@vue/web-component-wrapper": {
       "version": "1.2.0",
@@ -2591,6 +2616,14 @@
       "integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
+      "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -4971,9 +5004,9 @@
       }
     },
     "eslint-plugin-vue": {
-      "version": "7.0.0-beta.2",
+      "version": "7.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.0.0-beta.2.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.0.0-beta.3.tgz",
-      "integrity": "sha512-EpAVWT62JTM7Yo6IUJIaIvNMSuayDaMVMXv1SC96d1/7nyx18U0FrLRKpN2GdTY8Efi4UepgR75XW7ucSRiI7A==",
+      "integrity": "sha512-/p23IRPN9gFNN7dzesrctt06Kvs9E3VRB8BGIAPSEaQNk5yhlKUzntPARjUpsTWW+DQg0mqglZptfkUJK4+4EQ==",
       "dev": true,
       "requires": {
         "eslint-utils": "^2.1.0",
@@ -5596,8 +5629,7 @@
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
-      "dev": true
     },
     "for-in": {
       "version": "1.0.2",
@@ -11039,13 +11071,46 @@
       "dev": true
     },
     "vue": {
-      "version": "3.0.0-rc.7",
+      "version": "3.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.0.0-rc.10.tgz",
-      "integrity": "sha512-WX7i6yI0VGzI2mwlGqfISDbi/fNAuc0QEOcF4NH4IEdWFUWCbMMUJ6frYCgRd3FzqzPJwuV8niXKhFL28FnQ7g==",
+      "integrity": "sha512-nRsyIQtOWLDMBb5dsPwg/WdIqznCMVWN6O6wJSzhseKC768wHlZKcJ7SPHhWPid9wi3Ykhtl9vtgvxTK/qICkw==",
       "requires": {
-        "@vue/compiler-dom": "3.0.0-rc.7",
+        "@vue/compiler-dom": "3.0.0-rc.10",
-        "@vue/runtime-dom": "3.0.0-rc.7",
+        "@vue/runtime-dom": "3.0.0-rc.10",
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/shared": "3.0.0-rc.10"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.10.tgz",
+          "integrity": "sha512-kQzHzRsM0NPAWHeqSTb2J4VsHhjRkGeLTsGzeMnW+sojgTnS3T94KacwvYgVS4qeZAKiDq0bMNZoJWrHVQ3T8g==",
+          "requires": {
+            "@babel/parser": "^7.10.4",
+            "@babel/types": "^7.10.4",
+            "@vue/shared": "3.0.0-rc.10",
+            "estree-walker": "^2.0.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.10.tgz",
+          "integrity": "sha512-pqIUf5leZm0P9379utrRSVBMxhV8XaqJTEFFp5etCtbEa/H5ALs29EjFMtMcm9sQaVkZlKLu86mgIacbYB9Q3w==",
+          "requires": {
+            "@vue/compiler-core": "3.0.0-rc.10",
+            "@vue/shared": "3.0.0-rc.10"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
+          "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
       }
     },
     "vue-eslint-parser": {
@@ -11205,6 +11270,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "4.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.0-beta.4.tgz",
+      "integrity": "sha512-/+4E1dokq5cwbl4mohOqOj8h0vOLOWmLSqlqTf++bfmN9/JKWtwYfsBrzlK0sYrNfuYcpQeX0BVxQHoHXDfYZQ=="
+    },
     "watchpack": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz",

package.json

@@ -8,19 +8,41 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.20.0",
     "core-js": "^3.6.5",
-    "vue": "^3.0.0-0"
+    "vue": "^3.0.0-rc.10",
+    "vuex": "^4.0.0-0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-vuex": "^4.5.4",
     "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0-0",
+    "@vue/compiler-sfc": "^3.0.0-rc.10",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^7.0.0-0",
+    "eslint-plugin-vue": "^7.0.0-beta.3",
     "prettier": "^1.19.1"
-  }
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

src/App.vue

@@ -1,6 +1,73 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
+    <NoteList />
-    <h1>Welcome to Your Vue.js App</h1>
+    <div class="shortcuthelp">
+      <ul>
+        <li><kbd>c</kbd>focus</li>
+        <li><kbd>Enter</kbd>save</li>
+        <li><kbd>j</kbd><kbd>k</kbd>move up/down</li>
+        <li><kbd>Delete</kbd>delete</li>
+      </ul>
+    </div>
   </div>
 </template>
+
+<script>
+import NoteList from '@/components/NoteList.vue'
+export default {
+  components: {
+    NoteList
+  }
+}
+</script>
+
+<style>
+:root {
+  --text-color: #003049;
+  --secondary-text-color: #eae2b7;
+  --theme-color: #003049;
+  --background-color: #eae2b7;
+  --secondary-background: #d62828;
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+* {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.shortcuthelp {
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: var(--background-color);
+  background-color: var(--theme-color);
+  padding: 0.5rem;
+  margin: 1rem 1rem 0 0;
+}
+
+@media (max-width: 450px) {
+  .shortcuthelp {
+    display: none;
+  }
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  list-style-type: none;
+  color: var(--background-color);
+}
+
+kbd {
+  background-color: var(--secondary-background);
+  color: var(--secondary-text-color);
+  display: inline-block;
+  padding: 0.1rem;
+  margin: 0.1rem 0.5rem;
+}
+</style>

src/components/NoteList.vue

@@ -2,30 +2,121 @@
   <textarea
     @keyup.enter="addNote"
     v-model="content"
-    cols="30"
+    ref="content"
     rows="10"
+    placeholder="Start typing something…"
+    autofocus
   ></textarea>
-  <button type="submit" @click="addNote">
+  <div
-    Submit
+    class="note"
-  </button>
+    v-for="note in notes"
-  <div v-for="note in notes" :key="note.id">{{ note.text }}</div>
+    :key="note.id"
+    :class="{ selected: note.id === current }"
+  >
+    <span class="noteid">#{{ note.id }}</span
+    >{{ note.text }}
+  </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   data() {
     return {
-      notes: [{ id: 1, text: 'This is a note' }],
+      current: null,
-      content: 'Start typing something…'
+      content: null
     }
   },
   methods: {
     addNote() {
-      this.notes.push({ id: 2, text: this.content })
+      this.$store.commit('ADD_NOTE', this.content)
       this.content = ''
     }
+  },
+  computed: mapState(['notes']),
+  mounted() {
+    document.addEventListener('keyup', e => {
+      switch (e.code) {
+        case 'KeyJ':
+          // only if not in textarea
+          if (e.target.type === 'textarea') {
+            return
+          }
+          // go down in the list, unless it's the last item
+          this.current =
+            this.current === null
+              ? 0
+              : this.notes[this.current + 1] === undefined
+              ? this.current
+              : this.current + 1
+          break
+        case 'KeyK':
+          // only if not in textarea
+          if (e.target.type === 'textarea') {
+            return
+          }
+          // go up in the list, unless it's the first item
+          this.current =
+            this.current === null
+              ? 0
+              : this.notes[this.current - 1] === undefined
+              ? this.current
+              : this.current - 1
+          break
+        case 'KeyC':
+          this.$refs.content.focus()
+          break
+        case 'Delete':
+          // only if not in textarea
+          if (e.target.type === 'textarea') {
+            return
+          }
+          alert(`Delete note #${this.current}?`)
+          break
+
+        default:
+          break
+      }
+    })
+    this.$store.commit('FETCH_NOTES')
   }
 }
 </script>
 
-<style></style>
+<style scoped>
+@media (min-width: 575px) {
+  .note {
+    width: 550px;
+  }
+}
+
+textarea {
+  width: 100%;
+  border-width: 0 0 0.1rem 0;
+  border-color: var(--theme-color);
+  resize: none;
+  background-color: var(--background-color);
+  margin-bottom: 1rem;
+}
+
+.note {
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+  border: 0.1rem solid transparent;
+  max-width: 550px;
+}
+
+.selected {
+  border: 0.1rem dashed var(--theme-color);
+}
+
+.noteid {
+  background-color: var(--theme-color);
+  color: var(--secondary-text-color);
+  padding: 0 0.5rem;
+  display: inline-block;
+  width: 5rem;
+  margin-right: 0.5rem;
+}
+</style>

src/main.js

@@ -1,4 +1,7 @@
-import { createApp } from "vue";
+import { createApp } from 'vue'
-import App from "./App.vue";
+import App from './App.vue'
+import store from './store/index.js'
 
-createApp(App).mount("#app");
+window.app = createApp(App)
+  .use(store)
+  .mount('#app')

src/services/NoteService.js

@@ -0,0 +1,19 @@
+import axios from 'axios'
+
+const apiClient = axios.create({
+  baseURL: 'http://localhost:3000',
+  withCredentials: false,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+})
+
+export default {
+  getNotes() {
+    return apiClient.get('/notes')
+  },
+  addNote(text) {
+    return apiClient.post('/notes', JSON.stringify({ text }))
+  }
+}

src/store/index.js

@@ -0,0 +1,31 @@
+import { createStore } from 'vuex'
+import NoteService from '@/services/NoteService.js'
+
+export default createStore({
+  state() {
+    return {
+      notes: [{ id: 1, text: 'A note from the Vuex store!' }]
+    }
+  },
+  mutations: {
+    FETCH_NOTES(state) {
+      NoteService.getNotes()
+        .then(response => {
+          state.notes = response.data
+        })
+        .catch(error => {
+          console.log('There was an error:', error.response)
+        })
+    },
+    ADD_NOTE(state, note) {
+      NoteService.addNote(note)
+        .then(() => {
+          this.commit('FETCH_NOTES')
+        })
+        .catch(error => {
+          console.error(error)
+        })
+    }
+  },
+  actions: {}
+})