diff --git a/.eslintrc.js b/.eslintrc.js
index 367ce34..6446089 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,7 +6,7 @@ module.exports = {
   extends: [
     'plugin:vue/vue3-essential',
     '@vue/airbnb',
-    '@vue/typescript/recommended',
+    '@vue/eslint-config-typescript',
   ],
   parserOptions: {
     ecmaVersion: 2020,
@@ -15,4 +15,15 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   },
+  // settings: {
+  //   'import/resolver': {
+  //     alias: {
+  //       map: [['@', './src/']],
+  //       extensions: ['.js', '.ts', '.vue'],
+  //     },
+  //     "node": {
+  //       "paths": ["src"]
+  //     }, 
+  //   },
+  // },
 };
diff --git a/.gitignore b/.gitignore
index 403adbc..7256fd9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,10 +2,7 @@
 node_modules
 /dist
 
-
-# local env files
-.env.local
-.env.*.local
+.env
 
 # Log files
 npm-debug.log*
diff --git a/package-lock.json b/package-lock.json
index ccf279a..dd47d2b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,12 +7,15 @@
     "": {
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.24.0",
         "core-js": "^3.6.5",
+        "reset-css": "^5.0.1",
         "vue": "^3.0.0",
         "vue-router": "^4.0.0-0",
         "vuex": "^4.0.0-0"
       },
       "devDependencies": {
+        "@types/koa": "^2.13.4",
         "@typescript-eslint/eslint-plugin": "^4.18.0",
         "@typescript-eslint/parser": "^4.18.0",
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -23,10 +26,10 @@
         "@vue/cli-service": "~4.5.0",
         "@vue/compiler-sfc": "^3.0.0",
         "@vue/eslint-config-airbnb": "^5.0.2",
-        "@vue/eslint-config-typescript": "^7.0.0",
+        "@vue/eslint-config-typescript": "^10.0.0",
         "eslint": "^6.7.2",
         "eslint-plugin-import": "^2.20.2",
-        "eslint-plugin-vue": "^7.0.0",
+        "eslint-plugin-vue": "^7.0.0-beta.4",
         "sass": "^1.26.5",
         "sass-loader": "^8.0.2",
         "typescript": "~4.1.5"
@@ -1870,6 +1873,15 @@
       "integrity": "sha1-pTUV2yXYA4N0OBtzryC7Ty5QjYc=",
       "dev": true
     },
+    "node_modules/@types/accepts": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
+      "integrity": "sha512-jOdnI/3qTpHABjM5cx1Hc0sKsPoYCp+DP/GJRGtDlPd7fiV9oXGGIcjW/ZOxLIvjGz8MA+uMZI9metHlgqbgwQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmmirror.com/@types/body-parser/download/@types/body-parser-1.19.2.tgz?cache=0&sync_timestamp=1637265217498&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fbody-parser%2Fdownload%2F%40types%2Fbody-parser-1.19.2.tgz",
@@ -1899,6 +1911,24 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@types/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-0mPF08jn9zYI0n0Q/Pnz7C4kThdSt+6LD4amsrYDDpgBfrVWa3TcCOxKX1zkGgYniGagRv8heN2cbh+CAn+uuQ==",
+      "dev": true
+    },
+    "node_modules/@types/cookies": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/@types/cookies/-/cookies-0.7.7.tgz",
+      "integrity": "sha512-h7BcvPUogWbKCzBR2lY4oqaZbO3jXZksexYJVFvkrFeLgbZjQkU4x8pRq6eg2MHXQhY0McQdqmmsxRWlVAHooA==",
+      "dev": true,
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/express": "*",
+        "@types/keygrip": "*",
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/express": {
       "version": "4.17.13",
       "resolved": "https://registry.npmmirror.com/@types/express/download/@types/express-4.17.13.tgz?cache=0&sync_timestamp=1637265723757&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fexpress%2Fdownload%2F%40types%2Fexpress-4.17.13.tgz",
@@ -1933,6 +1963,18 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/http-assert": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@types/http-assert/-/http-assert-1.5.3.tgz",
+      "integrity": "sha512-FyAOrDuQmBi8/or3ns4rwPno7/9tJTijVW6aQQjK02+kOQ8zmoNg2XJtAuQhvQcy1ASJq38wirX5//9J1EqoUA==",
+      "dev": true
+    },
+    "node_modules/@types/http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-e+2rjEwK6KDaNOm5Aa9wNGgyS9oSZU/4pfSMMPYNOfjvFI0WVXm29+ITRFr6aKDvvKo7uU1jV68MW4ScsfDi7Q==",
+      "dev": true
+    },
     "node_modules/@types/http-proxy": {
       "version": "1.17.8",
       "resolved": "https://registry.npmmirror.com/@types/http-proxy/download/@types/http-proxy-1.17.8.tgz",
@@ -1954,6 +1996,37 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "node_modules/@types/keygrip": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/keygrip/-/keygrip-1.0.2.tgz",
+      "integrity": "sha512-GJhpTepz2udxGexqos8wgaBx4I/zWIDPh/KOGEwAqtuGDkOUJu5eFvwmdBX4AmB8Odsr+9pHCQqiAqDL/yKMKw==",
+      "dev": true
+    },
+    "node_modules/@types/koa": {
+      "version": "2.13.4",
+      "resolved": "https://registry.npmjs.org/@types/koa/-/koa-2.13.4.tgz",
+      "integrity": "sha512-dfHYMfU+z/vKtQB7NUrthdAEiSvnLebvBjwHtfFmpZmB7em2N3WVQdHgnFq+xvyVgxW5jKDmjWfLD3lw4g4uTw==",
+      "dev": true,
+      "dependencies": {
+        "@types/accepts": "*",
+        "@types/content-disposition": "*",
+        "@types/cookies": "*",
+        "@types/http-assert": "*",
+        "@types/http-errors": "*",
+        "@types/keygrip": "*",
+        "@types/koa-compose": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/koa-compose": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/@types/koa-compose/-/koa-compose-3.2.5.tgz",
+      "integrity": "sha512-B8nG/OoE1ORZqCkBVsup/AKcvjdgoHnfi4pZMn5UwAPCbhk/96xyv284eBYW8JlQbQ7zDmnpFr68I/40mFoIBQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/koa": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmmirror.com/@types/mime/download/@types/mime-1.3.2.tgz",
@@ -3104,23 +3177,440 @@
       }
     },
     "node_modules/@vue/eslint-config-typescript": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmmirror.com/@vue/eslint-config-typescript/download/@vue/eslint-config-typescript-7.0.0.tgz?cache=0&sync_timestamp=1637072303718&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40vue%2Feslint-config-typescript%2Fdownload%2F%40vue%2Feslint-config-typescript-7.0.0.tgz",
-      "integrity": "sha1-Igxwwu33olPnOSmFJfTUAbjvADg=",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-10.0.0.tgz",
+      "integrity": "sha512-F94cL8ug3FaYXlCfU5/wiGjk1qeadmoBpRGAOBq+qre3Smdupa59dd6ZJrsfRODpsMPyTG7330juMDsUvpZ3Rw==",
       "dev": true,
       "dependencies": {
-        "vue-eslint-parser": "^7.0.0"
+        "@typescript-eslint/eslint-plugin": "^5.0.0",
+        "@typescript-eslint/parser": "^5.0.0",
+        "vue-eslint-parser": "^8.0.0"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "peerDependencies": {
-        "@typescript-eslint/eslint-plugin": "^4.4.0",
-        "@typescript-eslint/parser": "^4.4.0",
-        "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0",
-        "eslint-plugin-vue": "^5.2.3 || ^6.0.0 || ^7.0.0"
+        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0",
+        "eslint-plugin-vue": "^8.0.1"
       }
     },
+    "node_modules/@vue/eslint-config-typescript/node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.8.0.tgz",
+      "integrity": "sha512-spu1UW7QuBn0nJ6+psnfCc3iVoQAifjKORgBngKOmC8U/1tbe2YJMzYQqDGYB4JCss7L8+RM2kKLb1B1Aw9BNA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/experimental-utils": "5.8.0",
+        "@typescript-eslint/scope-manager": "5.8.0",
+        "debug": "^4.3.2",
+        "functional-red-black-tree": "^1.0.1",
+        "ignore": "^5.1.8",
+        "regexpp": "^3.2.0",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/experimental-utils": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.8.0.tgz",
+      "integrity": "sha512-KN5FvNH71bhZ8fKtL+lhW7bjm7cxs1nt+hrDZWIqb6ViCffQcWyLunGrgvISgkRojIDcXIsH+xlFfI4RCDA0xA==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.8.0",
+        "@typescript-eslint/types": "5.8.0",
+        "@typescript-eslint/typescript-estree": "5.8.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/parser": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.8.0.tgz",
+      "integrity": "sha512-Gleacp/ZhRtJRYs5/T8KQR3pAQjQI89Dn/k+OzyCKOsLiZH2/Vh60cFBTnFsHNI6WAD+lNUo/xGZ4NeA5u0Ipw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "5.8.0",
+        "@typescript-eslint/types": "5.8.0",
+        "@typescript-eslint/typescript-estree": "5.8.0",
+        "debug": "^4.3.2"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.8.0.tgz",
+      "integrity": "sha512-x82CYJsLOjPCDuFFEbS6e7K1QEWj7u5Wk1alw8A+gnJiYwNnDJk0ib6PCegbaPMjrfBvFKa7SxE3EOnnIQz2Gg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.8.0",
+        "@typescript-eslint/visitor-keys": "5.8.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/types": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.8.0.tgz",
+      "integrity": "sha512-LdCYOqeqZWqCMOmwFnum6YfW9F3nKuxJiR84CdIRN5nfHJ7gyvGpXWqL/AaW0k3Po0+wm93ARAsOdzlZDPCcXg==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.8.0.tgz",
+      "integrity": "sha512-srfeZ3URdEcUsSLbkOFqS7WoxOqn8JNil2NSLO9O+I2/Uyc85+UlfpEvQHIpj5dVts7KKOZnftoJD/Fdv0L7nQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.8.0",
+        "@typescript-eslint/visitor-keys": "5.8.0",
+        "debug": "^4.3.2",
+        "globby": "^11.0.4",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.8.0.tgz",
+      "integrity": "sha512-+HDIGOEMnqbxdAHegxvnOqESUH6RWFRR2b8qxP1W9CZnnYh4Usz6MBL+2KMAgPk/P0o9c1HqnYtwzVH6GTIqug==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.8.0",
+        "eslint-visitor-keys": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/acorn": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz",
+      "integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/eslint-visitor-keys": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz",
+      "integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/espree": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.2.0.tgz",
+      "integrity": "sha512-oP3utRkynpZWF/F2x/HZJ+AGtnIclaR7z1pYPxy7NYM2fSO6LgK/Rkny8anRSPK/VwEA1eqm2squui0T7ZMOBg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.6.0",
+        "acorn-jsx": "^5.3.1",
+        "eslint-visitor-keys": "^3.1.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/fast-glob": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
+      "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/globby": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+      "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.1.1",
+        "ignore": "^5.1.4",
+        "merge2": "^1.3.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/ignore": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/micromatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/semver": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^1.8.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/vue-eslint-parser": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.0.1.tgz",
+      "integrity": "sha512-lhWjDXJhe3UZw2uu3ztX51SJAPGPey1Tff2RK3TyZURwbuI4vximQLzz4nQfCv8CZq4xx7uIiogHMMoSJPr33A==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.2",
+        "eslint-scope": "^6.0.0",
+        "eslint-visitor-keys": "^3.0.0",
+        "espree": "^9.0.0",
+        "esquery": "^1.4.0",
+        "lodash": "^4.17.21",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=6.0.0"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/vue-eslint-parser/node_modules/eslint-scope": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-6.0.0.tgz",
+      "integrity": "sha512-uRDL9MWmQCkaFus8RF5K9/L/2fn+80yoW3jkD53l4shjCh26fCtvJGasxjUqP5OT87SYTxCVA3BwTUzuELx9kA==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/vue-eslint-parser/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
     "node_modules/@vue/preload-webpack-plugin": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/@vue/preload-webpack-plugin/download/@vue/preload-webpack-plugin-1.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fpreload-webpack-plugin%2Fdownload%2F%40vue%2Fpreload-webpack-plugin-1.1.2.tgz",
@@ -3834,6 +4324,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "node_modules/babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
@@ -6858,22 +7356,21 @@
       "dev": true
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "7.20.0",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-vue/download/eslint-plugin-vue-7.20.0.tgz",
-      "integrity": "sha1-mMIYhaa/3wcTw6kpV6Wv6q7tklM=",
+      "version": "7.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.0.0-beta.4.tgz",
+      "integrity": "sha512-yb8Kki8b94a3A1sGum9TyVAkvPfKGPzWfZcXRmA2Tylt7TRi+b6mOtn1o6kM3NWatBs5gcGiCrH033DDPn0Msw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "eslint-utils": "^2.1.0",
         "natural-compare": "^1.4.0",
-        "semver": "^6.3.0",
-        "vue-eslint-parser": "^7.10.0"
+        "semver": "^7.3.2",
+        "vue-eslint-parser": "^7.1.0"
       },
       "engines": {
         "node": ">=8.10"
       },
       "peerDependencies": {
-        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
+        "eslint": "^6.2.0 || ^7.0.0"
       }
     },
     "node_modules/eslint-plugin-vue/node_modules/eslint-utils": {
@@ -6897,6 +7394,39 @@
         "node": ">=4"
       }
     },
+    "node_modules/eslint-plugin-vue/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint-plugin-vue/node_modules/semver": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint-plugin-vue/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
     "node_modules/eslint-scope": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/eslint-scope/download/eslint-scope-4.0.3.tgz?cache=0&sync_timestamp=1637466831846&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-scope%2Fdownload%2Feslint-scope-4.0.3.tgz",
@@ -7773,7 +8303,6 @@
       "version": "1.14.6",
       "resolved": "https://registry.npmmirror.com/follow-redirects/download/follow-redirects-1.14.6.tgz",
       "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -12840,6 +13369,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "node_modules/reset-css": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/reset-css/-/reset-css-5.0.1.tgz",
+      "integrity": "sha512-VyuJdNFfp5x/W6e5wauJM59C02Vs0P22sxzZGhQMPaqu/NGTeFxlBFOOw3eq9vQd19gIDdZp7zi89ylyKOJ33Q=="
+    },
     "node_modules/resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz",
@@ -18140,6 +18674,15 @@
       "integrity": "sha1-pTUV2yXYA4N0OBtzryC7Ty5QjYc=",
       "dev": true
     },
+    "@types/accepts": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
+      "integrity": "sha512-jOdnI/3qTpHABjM5cx1Hc0sKsPoYCp+DP/GJRGtDlPd7fiV9oXGGIcjW/ZOxLIvjGz8MA+uMZI9metHlgqbgwQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmmirror.com/@types/body-parser/download/@types/body-parser-1.19.2.tgz?cache=0&sync_timestamp=1637265217498&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fbody-parser%2Fdownload%2F%40types%2Fbody-parser-1.19.2.tgz",
@@ -18169,6 +18712,24 @@
         "@types/node": "*"
       }
     },
+    "@types/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@types/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-0mPF08jn9zYI0n0Q/Pnz7C4kThdSt+6LD4amsrYDDpgBfrVWa3TcCOxKX1zkGgYniGagRv8heN2cbh+CAn+uuQ==",
+      "dev": true
+    },
+    "@types/cookies": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/@types/cookies/-/cookies-0.7.7.tgz",
+      "integrity": "sha512-h7BcvPUogWbKCzBR2lY4oqaZbO3jXZksexYJVFvkrFeLgbZjQkU4x8pRq6eg2MHXQhY0McQdqmmsxRWlVAHooA==",
+      "dev": true,
+      "requires": {
+        "@types/connect": "*",
+        "@types/express": "*",
+        "@types/keygrip": "*",
+        "@types/node": "*"
+      }
+    },
     "@types/express": {
       "version": "4.17.13",
       "resolved": "https://registry.npmmirror.com/@types/express/download/@types/express-4.17.13.tgz?cache=0&sync_timestamp=1637265723757&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fexpress%2Fdownload%2F%40types%2Fexpress-4.17.13.tgz",
@@ -18202,6 +18763,18 @@
         "@types/node": "*"
       }
     },
+    "@types/http-assert": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@types/http-assert/-/http-assert-1.5.3.tgz",
+      "integrity": "sha512-FyAOrDuQmBi8/or3ns4rwPno7/9tJTijVW6aQQjK02+kOQ8zmoNg2XJtAuQhvQcy1ASJq38wirX5//9J1EqoUA==",
+      "dev": true
+    },
+    "@types/http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-e+2rjEwK6KDaNOm5Aa9wNGgyS9oSZU/4pfSMMPYNOfjvFI0WVXm29+ITRFr6aKDvvKo7uU1jV68MW4ScsfDi7Q==",
+      "dev": true
+    },
     "@types/http-proxy": {
       "version": "1.17.8",
       "resolved": "https://registry.npmmirror.com/@types/http-proxy/download/@types/http-proxy-1.17.8.tgz",
@@ -18223,6 +18796,37 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "@types/keygrip": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/keygrip/-/keygrip-1.0.2.tgz",
+      "integrity": "sha512-GJhpTepz2udxGexqos8wgaBx4I/zWIDPh/KOGEwAqtuGDkOUJu5eFvwmdBX4AmB8Odsr+9pHCQqiAqDL/yKMKw==",
+      "dev": true
+    },
+    "@types/koa": {
+      "version": "2.13.4",
+      "resolved": "https://registry.npmjs.org/@types/koa/-/koa-2.13.4.tgz",
+      "integrity": "sha512-dfHYMfU+z/vKtQB7NUrthdAEiSvnLebvBjwHtfFmpZmB7em2N3WVQdHgnFq+xvyVgxW5jKDmjWfLD3lw4g4uTw==",
+      "dev": true,
+      "requires": {
+        "@types/accepts": "*",
+        "@types/content-disposition": "*",
+        "@types/cookies": "*",
+        "@types/http-assert": "*",
+        "@types/http-errors": "*",
+        "@types/keygrip": "*",
+        "@types/koa-compose": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/koa-compose": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/@types/koa-compose/-/koa-compose-3.2.5.tgz",
+      "integrity": "sha512-B8nG/OoE1ORZqCkBVsup/AKcvjdgoHnfi4pZMn5UwAPCbhk/96xyv284eBYW8JlQbQ7zDmnpFr68I/40mFoIBQ==",
+      "dev": true,
+      "requires": {
+        "@types/koa": "*"
+      }
+    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmmirror.com/@types/mime/download/@types/mime-1.3.2.tgz",
@@ -18874,7 +19478,8 @@
       "version": "4.5.15",
       "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/download/@vue/cli-plugin-vuex-4.5.15.tgz",
       "integrity": "sha1-RmwfAnd9Av71Opu0mjbMOjvP7E4=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.15",
@@ -19100,19 +19705,291 @@
       }
     },
     "@vue/eslint-config-typescript": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmmirror.com/@vue/eslint-config-typescript/download/@vue/eslint-config-typescript-7.0.0.tgz?cache=0&sync_timestamp=1637072303718&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40vue%2Feslint-config-typescript%2Fdownload%2F%40vue%2Feslint-config-typescript-7.0.0.tgz",
-      "integrity": "sha1-Igxwwu33olPnOSmFJfTUAbjvADg=",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-10.0.0.tgz",
+      "integrity": "sha512-F94cL8ug3FaYXlCfU5/wiGjk1qeadmoBpRGAOBq+qre3Smdupa59dd6ZJrsfRODpsMPyTG7330juMDsUvpZ3Rw==",
       "dev": true,
       "requires": {
-        "vue-eslint-parser": "^7.0.0"
+        "@typescript-eslint/eslint-plugin": "^5.0.0",
+        "@typescript-eslint/parser": "^5.0.0",
+        "vue-eslint-parser": "^8.0.0"
+      },
+      "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+          "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+          "dev": true
+        },
+        "@typescript-eslint/eslint-plugin": {
+          "version": "5.8.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.8.0.tgz",
+          "integrity": "sha512-spu1UW7QuBn0nJ6+psnfCc3iVoQAifjKORgBngKOmC8U/1tbe2YJMzYQqDGYB4JCss7L8+RM2kKLb1B1Aw9BNA==",
+          "dev": true,
+          "requires": {
+            "@typescript-eslint/experimental-utils": "5.8.0",
+            "@typescript-eslint/scope-manager": "5.8.0",
+            "debug": "^4.3.2",
+            "functional-red-black-tree": "^1.0.1",
+            "ignore": "^5.1.8",
+            "regexpp": "^3.2.0",
+            "semver": "^7.3.5",
+            "tsutils": "^3.21.0"
+          }
+        },
+        "@typescript-eslint/experimental-utils": {
+          "version": "5.8.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.8.0.tgz",
+          "integrity": "sha512-KN5FvNH71bhZ8fKtL+lhW7bjm7cxs1nt+hrDZWIqb6ViCffQcWyLunGrgvISgkRojIDcXIsH+xlFfI4RCDA0xA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "@typescript-eslint/scope-manager": "5.8.0",
+            "@typescript-eslint/types": "5.8.0",
+            "@typescript-eslint/typescript-estree": "5.8.0",
+            "eslint-scope": "^5.1.1",
+            "eslint-utils": "^3.0.0"
+          }
+        },
+        "@typescript-eslint/parser": {
+          "version": "5.8.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.8.0.tgz",
+          "integrity": "sha512-Gleacp/ZhRtJRYs5/T8KQR3pAQjQI89Dn/k+OzyCKOsLiZH2/Vh60cFBTnFsHNI6WAD+lNUo/xGZ4NeA5u0Ipw==",
+          "dev": true,
+          "requires": {
+            "@typescript-eslint/scope-manager": "5.8.0",
+            "@typescript-eslint/types": "5.8.0",
+            "@typescript-eslint/typescript-estree": "5.8.0",
+            "debug": "^4.3.2"
+          }
+        },
+        "@typescript-eslint/scope-manager": {
+          "version": "5.8.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.8.0.tgz",
+          "integrity": "sha512-x82CYJsLOjPCDuFFEbS6e7K1QEWj7u5Wk1alw8A+gnJiYwNnDJk0ib6PCegbaPMjrfBvFKa7SxE3EOnnIQz2Gg==",
+          "dev": true,
+          "requires": {
+            "@typescript-eslint/types": "5.8.0",
+            "@typescript-eslint/visitor-keys": "5.8.0"
+          }
+        },
+        "@typescript-eslint/types": {
+          "version": "5.8.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.8.0.tgz",
+          "integrity": "sha512-LdCYOqeqZWqCMOmwFnum6YfW9F3nKuxJiR84CdIRN5nfHJ7gyvGpXWqL/AaW0k3Po0+wm93ARAsOdzlZDPCcXg==",
+          "dev": true
+        },
+        "@typescript-eslint/typescript-estree": {
+          "version": "5.8.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.8.0.tgz",
+          "integrity": "sha512-srfeZ3URdEcUsSLbkOFqS7WoxOqn8JNil2NSLO9O+I2/Uyc85+UlfpEvQHIpj5dVts7KKOZnftoJD/Fdv0L7nQ==",
+          "dev": true,
+          "requires": {
+            "@typescript-eslint/types": "5.8.0",
+            "@typescript-eslint/visitor-keys": "5.8.0",
+            "debug": "^4.3.2",
+            "globby": "^11.0.4",
+            "is-glob": "^4.0.3",
+            "semver": "^7.3.5",
+            "tsutils": "^3.21.0"
+          }
+        },
+        "@typescript-eslint/visitor-keys": {
+          "version": "5.8.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.8.0.tgz",
+          "integrity": "sha512-+HDIGOEMnqbxdAHegxvnOqESUH6RWFRR2b8qxP1W9CZnnYh4Usz6MBL+2KMAgPk/P0o9c1HqnYtwzVH6GTIqug==",
+          "dev": true,
+          "requires": {
+            "@typescript-eslint/types": "5.8.0",
+            "eslint-visitor-keys": "^3.0.0"
+          }
+        },
+        "acorn": {
+          "version": "8.6.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz",
+          "integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==",
+          "dev": true
+        },
+        "array-union": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+          "dev": true
+        },
+        "dir-glob": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+          "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+          "dev": true,
+          "requires": {
+            "path-type": "^4.0.0"
+          }
+        },
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz",
+          "integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==",
+          "dev": true
+        },
+        "espree": {
+          "version": "9.2.0",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-9.2.0.tgz",
+          "integrity": "sha512-oP3utRkynpZWF/F2x/HZJ+AGtnIclaR7z1pYPxy7NYM2fSO6LgK/Rkny8anRSPK/VwEA1eqm2squui0T7ZMOBg==",
+          "dev": true,
+          "requires": {
+            "acorn": "^8.6.0",
+            "acorn-jsx": "^5.3.1",
+            "eslint-visitor-keys": "^3.1.0"
+          }
+        },
+        "fast-glob": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
+          "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
+          "dev": true,
+          "requires": {
+            "@nodelib/fs.stat": "^2.0.2",
+            "@nodelib/fs.walk": "^1.2.3",
+            "glob-parent": "^5.1.2",
+            "merge2": "^1.3.0",
+            "micromatch": "^4.0.4"
+          }
+        },
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "globby": {
+          "version": "11.0.4",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+          "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
+          "dev": true,
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.1.1",
+            "ignore": "^5.1.4",
+            "merge2": "^1.3.0",
+            "slash": "^3.0.0"
+          }
+        },
+        "ignore": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+          "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+          "dev": true
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "micromatch": {
+          "version": "4.0.4",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.2.3"
+          }
+        },
+        "path-type": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+          "dev": true
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        },
+        "tsutils": {
+          "version": "3.21.0",
+          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+          "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.8.1"
+          }
+        },
+        "vue-eslint-parser": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.0.1.tgz",
+          "integrity": "sha512-lhWjDXJhe3UZw2uu3ztX51SJAPGPey1Tff2RK3TyZURwbuI4vximQLzz4nQfCv8CZq4xx7uIiogHMMoSJPr33A==",
+          "dev": true,
+          "requires": {
+            "debug": "^4.3.2",
+            "eslint-scope": "^6.0.0",
+            "eslint-visitor-keys": "^3.0.0",
+            "espree": "^9.0.0",
+            "esquery": "^1.4.0",
+            "lodash": "^4.17.21",
+            "semver": "^7.3.5"
+          },
+          "dependencies": {
+            "eslint-scope": {
+              "version": "6.0.0",
+              "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-6.0.0.tgz",
+              "integrity": "sha512-uRDL9MWmQCkaFus8RF5K9/L/2fn+80yoW3jkD53l4shjCh26fCtvJGasxjUqP5OT87SYTxCVA3BwTUzuELx9kA==",
+              "dev": true,
+              "requires": {
+                "esrecurse": "^4.3.0",
+                "estraverse": "^5.2.0"
+              }
+            },
+            "estraverse": {
+              "version": "5.3.0",
+              "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+              "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+              "dev": true
+            }
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
       }
     },
     "@vue/preload-webpack-plugin": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/@vue/preload-webpack-plugin/download/@vue/preload-webpack-plugin-1.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fpreload-webpack-plugin%2Fdownload%2F%40vue%2Fpreload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha1-zrkktOyzucQ4ccekKaAvhCPmIas=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/reactivity": {
       "version": "3.2.26",
@@ -19380,7 +20257,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.nlark.com/acorn-jsx/download/acorn-jsx-5.3.2.tgz",
       "integrity": "sha1-ftW7VZCLOy8bxVxq8WU7rafweTc=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -19410,13 +20288,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/ajv-errors/download/ajv-errors-1.0.1.tgz?cache=0&sync_timestamp=1616886041666&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv-errors%2Fdownload%2Fajv-errors-1.0.1.tgz",
       "integrity": "sha1-81mGrOuRr63sQQL72FAUlQzvpk0=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1637523970307&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
       "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -19713,6 +20593,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
@@ -22322,15 +23210,15 @@
       }
     },
     "eslint-plugin-vue": {
-      "version": "7.20.0",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-vue/download/eslint-plugin-vue-7.20.0.tgz",
-      "integrity": "sha1-mMIYhaa/3wcTw6kpV6Wv6q7tklM=",
+      "version": "7.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.0.0-beta.4.tgz",
+      "integrity": "sha512-yb8Kki8b94a3A1sGum9TyVAkvPfKGPzWfZcXRmA2Tylt7TRi+b6mOtn1o6kM3NWatBs5gcGiCrH033DDPn0Msw==",
       "dev": true,
       "requires": {
         "eslint-utils": "^2.1.0",
         "natural-compare": "^1.4.0",
-        "semver": "^6.3.0",
-        "vue-eslint-parser": "^7.10.0"
+        "semver": "^7.3.2",
+        "vue-eslint-parser": "^7.1.0"
       },
       "dependencies": {
         "eslint-utils": {
@@ -22347,6 +23235,30 @@
           "resolved": "https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-1.3.0.tgz?cache=0&sync_timestamp=1636378452762&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-visitor-keys%2Fdownload%2Feslint-visitor-keys-1.3.0.tgz",
           "integrity": "sha1-MOvR73wv3/AcOk8VEESvJfqwUj4=",
           "dev": true
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
         }
       }
     },
@@ -22970,8 +23882,7 @@
     "follow-redirects": {
       "version": "1.14.6",
       "resolved": "https://registry.npmmirror.com/follow-redirects/download/follow-redirects-1.14.6.tgz",
-      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
-      "dev": true
+      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -27135,6 +28046,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "reset-css": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/reset-css/-/reset-css-5.0.1.tgz",
+      "integrity": "sha512-VyuJdNFfp5x/W6e5wauJM59C02Vs0P22sxzZGhQMPaqu/NGTeFxlBFOOw3eq9vQd19gIDdZp7zi89ylyKOJ33Q=="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz",
diff --git a/package.json b/package.json
index c19921f..fa2b0d3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "watch2gether-front",
   "version": "0.1.0",
+  "author": "Anatoly Kopyl",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -8,12 +9,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "core-js": "^3.6.5",
+    "reset-css": "^5.0.1",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/koa": "^2.13.4",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -24,10 +28,10 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-airbnb": "^5.0.2",
-    "@vue/eslint-config-typescript": "^7.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^7.0.0",
+    "eslint-plugin-vue": "^7.0.0-beta.4",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
     "typescript": "~4.1.5"
diff --git a/src/App.vue b/src/App.vue
index 3fa872e..ab9ac08 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,7 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </div>
   <router-view/>
 </template>
 
 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
+@import '@/scss/style.scss'
 </style>
diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 0000000..e36851c
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: process.env.VUE_APP_API,
+  withCredentials: true,
+});
+
+export default api;
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 2b390d2..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'HelloWorld',
-  props: {
-    msg: String,
-  },
-});
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/interfaces.ts b/src/interfaces.ts
new file mode 100644
index 0000000..877814b
--- /dev/null
+++ b/src/interfaces.ts
@@ -0,0 +1,9 @@
+export interface Room {
+  id: string;
+  magnet: string;
+  createdAt: Date;
+  movie?: string;
+  downloaded?: boolean;
+  downloadedAt?: Date;
+  position: number;
+}
diff --git a/src/main.ts b/src/main.ts
index c673f53..dba246a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,4 +3,8 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 
-createApp(App).use(store).use(router).mount('#app');
+const app = createApp(App);
+app.use(store);
+app.use(router);
+
+app.mount('#app');
diff --git a/src/router/index.ts b/src/router/index.ts
index 193bfa3..3dd34e7 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import Home from '../views/Home.vue';
+import Home from '@/views/Home/Index.vue';
+import Room from '@/views/Room/Index.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -8,12 +9,10 @@ const routes: Array<RouteRecordRaw> = [
     component: Home,
   },
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
+    path: '/room/:id',
+    name: 'Room',
+    props: true,
+    component: Room,
   },
 ];
 
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/style.scss b/src/scss/style.scss
new file mode 100644
index 0000000..94909a0
--- /dev/null
+++ b/src/scss/style.scss
@@ -0,0 +1,5 @@
+@import 'reset-css';
+
+* {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index 50d8a19..0000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
-
-export default defineComponent({
-  name: 'Home',
-  components: {
-    HelloWorld,
-  },
-});
-</script>
diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
new file mode 100644
index 0000000..ccb26b1
--- /dev/null
+++ b/src/views/Home/Index.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="home">
+    <input
+      type="text"
+      v-model="magnet"
+      placeholder="magnet"
+    >
+    <button
+      @click="submit"
+    >
+      Create room
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import createRoom from './createRoom';
+
+import { Room } from '@/interfaces';
+
+export default defineComponent({
+  name: 'Home',
+  data() {
+    return {
+      magnet: '',
+    };
+  },
+  methods: {
+    async submit() {
+      const room: Room = await createRoom(this.magnet);
+      this.$router.push({ name: 'Room', params: { id: room.id } });
+    },
+  },
+});
+</script>
diff --git a/src/views/Home/createRoom.ts b/src/views/Home/createRoom.ts
new file mode 100644
index 0000000..8af1542
--- /dev/null
+++ b/src/views/Home/createRoom.ts
@@ -0,0 +1,5 @@
+import api from '@/api/index';
+
+export default (magnet:String) => api.post('/room', {
+  magnet,
+}).then((response) => response.data);
diff --git a/src/views/Room/Index.vue b/src/views/Room/Index.vue
new file mode 100644
index 0000000..50b0369
--- /dev/null
+++ b/src/views/Room/Index.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="room">
+    <h1>{{ room.movie }}</h1>
+    <div v-if="!room.downloaded">
+      <div>{{ progressPerc }}%</div>
+      <ProgressBar
+        :progress="progress"
+        class="progress-bar"
+      />
+    </div>
+
+    <video
+      v-if="room.downloaded"
+      controls
+      :src="movieUrl"
+      ref="video"
+      @seeked="seeked"
+      @play="playing = true"
+      @pause="playing = false"
+    >
+    </video>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import getRoom from './getRoom';
+import getStatus from './getStatus';
+import setPosition from './setPosition';
+import getPosition from './getPosition';
+
+import ProgressBar from './components/ProgressBar.vue';
+
+import { Room } from '@/interfaces';
+
+export default defineComponent({
+  name: 'Room',
+  components: {
+    ProgressBar,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      room: {} as Room,
+      progress: 0,
+      playing: false,
+      progressInterval: undefined as undefined | number,
+      positionInterval: undefined as undefined | number,
+    };
+  },
+  computed: {
+    movieUrl() {
+      return `${process.env.VUE_APP_MOVIES}?id=${this.room.id}`;
+    },
+    progressPerc() {
+      return Math.floor(this.progress * 100);
+    },
+  },
+  async mounted() {
+    this.room = await getRoom(this.id);
+
+    if (!this.room.downloaded) {
+      this.progressInterval = setInterval(async () => {
+        const result = await getStatus(this.id);
+        this.progress = result.progress;
+        if (result.downloaded) {
+          this.room.downloaded = true;
+          clearInterval(this.progressInterval);
+        }
+      }, 2 * 1000);
+    } else {
+      this.room.downloaded = true;
+      this.$nextTick(() => {
+        const element = this.$refs.video as HTMLVideoElement;
+        this.positionInterval = setInterval(async () => {
+          if (this.playing) {
+            const serverPosition = await getPosition(this.id);
+            // this.room.position = element.currentTime;
+            if (Math.abs(this.room.position - serverPosition) > 2) {
+              this.room.position = serverPosition;
+              element.currentTime = serverPosition;
+              console.log('Synced');
+            }
+          }
+        }, 2 * 1000);
+      });
+    }
+  },
+  beforeUnmount() {
+    clearInterval(this.progressInterval);
+    clearInterval(this.positionInterval);
+  },
+  methods: {
+    seeked() {
+      const element = this.$refs.video as HTMLVideoElement;
+      const position = element.currentTime;
+      setPosition(this.id, position);
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  font-size: 32px;
+}
+.progress-bar {
+  width: 400px;
+  height: 25px;
+  border: 1px solid black;
+  margin: auto;
+}
+
+video {
+  width: 800px;
+  max-width: 100%;
+}
+</style>
diff --git a/src/views/Room/components/ProgressBar.vue b/src/views/Room/components/ProgressBar.vue
new file mode 100644
index 0000000..5f13a68
--- /dev/null
+++ b/src/views/Room/components/ProgressBar.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div
+      class="fill"
+      :style="{
+        width: `${progress * 100}%`
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    progress: {
+      type: Number,
+      default: 0,
+    },
+  },
+});
+</script>
+
+<class lang="scss" scoped>
+.fill {
+  background: lightblue;
+  height: 100%;
+}
+</class>
diff --git a/src/views/Room/getPosition.ts b/src/views/Room/getPosition.ts
new file mode 100644
index 0000000..c49138e
--- /dev/null
+++ b/src/views/Room/getPosition.ts
@@ -0,0 +1,7 @@
+import api from '@/api/index';
+
+export default (id: String) => api.get('/position', {
+  params: {
+    id,
+  },
+}).then((response) => response.data.position);
diff --git a/src/views/Room/getRoom.ts b/src/views/Room/getRoom.ts
new file mode 100644
index 0000000..8862731
--- /dev/null
+++ b/src/views/Room/getRoom.ts
@@ -0,0 +1,7 @@
+import api from '@/api/index';
+
+export default (id:String) => api.get('/room', {
+  params: {
+    id,
+  },
+}).then((response) => response.data);
diff --git a/src/views/Room/getStatus.ts b/src/views/Room/getStatus.ts
new file mode 100644
index 0000000..1213a47
--- /dev/null
+++ b/src/views/Room/getStatus.ts
@@ -0,0 +1,7 @@
+import api from '@/api/index';
+
+export default (id: String) => api.get('/status', {
+  params: {
+    id,
+  },
+}).then((response) => response.data);
diff --git a/src/views/Room/setPosition.ts b/src/views/Room/setPosition.ts
new file mode 100644
index 0000000..693e4cd
--- /dev/null
+++ b/src/views/Room/setPosition.ts
@@ -0,0 +1,6 @@
+import api from '@/api/index';
+
+export default (id: String, position: number) => api.post('/position', {
+  id,
+  position,
+}).then((response) => response.data);
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..8ec100b
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  css: {
+    loaderOptions: {
+      sass: {
+        prependData: `
+          @use 'sass:math';
+          @import '~@/scss/_variables.scss';
+        `,
+      },
+    },
+  },
+};