Initial commit

2021-02-10 08:19:51 -08:00 · 2021-02-10 08:19:51 -08:00 · 2f230d473e
commit 2f230d473e
49 changed files with 15645 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,6 @@
+/dist
+/src-bex/www
+/src-capacitor
+/src-cordova
+/.quasar
+/node_modules
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,72 @@
+module.exports = {
+  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
+  // This option interrupts the configuration hierarchy at this file
+  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
+  root: true,
+
+  parserOptions: {
+    parser: 'babel-eslint',
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module' // Allows for the use of imports
+  },
+
+  env: {
+    browser: true
+  },
+
+  // Rules order is important, please avoid shuffling them
+  extends: [
+    // Base ESLint recommended rules
+    // 'eslint:recommended',
+
+
+    // Uncomment any of the lines below to choose desired strictness,
+    // but leave only one uncommented!
+    // See https://eslint.vuejs.org/rules/#available-rules
+    'plugin:vue/essential', // Priority A: Essential (Error Prevention)
+    // 'plugin:vue/strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
+    // 'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+
+    'standard'
+
+  ],
+
+  plugins: [
+    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
+    // required to lint *.vue files
+    'vue',
+
+  ],
+
+  globals: {
+    ga: true, // Google Analytics
+    cordova: true,
+    __statics: true,
+    process: true,
+    Capacitor: true,
+    chrome: true
+  },
+
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow paren-less arrow functions
+    'arrow-parens': 'off',
+    'one-var': 'off',
+
+    'import/first': 'off',
+    'import/named': 'error',
+    'import/namespace': 'error',
+    'import/default': 'error',
+    'import/export': 'error',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'prefer-promise-reject-errors': 'off',
+
+
+    // allow debugger during development only
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,40 @@
+.DS_Store
+.thumbs.db
+node_modules
+
+# Quasar core related directories
+.quasar
+/dist
+
+# Cordova related directories and files
+/src-cordova/node_modules
+/src-cordova/platforms
+/src-cordova/plugins
+/src-cordova/www
+
+# Capacitor related directories and files
+/src-capacitor/www
+/src-capacitor/node_modules
+
+# BEX related directories and files
+/src-bex/www
+/src-bex/js/core
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.vscode
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+.*.swp
+
+# local env files
+.env.local
+.env.*.local
+.env
--- a/.postcssrc.js
+++ b/.postcssrc.js
@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  plugins: [
+    // to edit target browsers: use "browserslist" field in package.json
+    require('autoprefixer')
+  ]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,26 @@
+# Demo Test (demo-test)
+
+Quasar Demo Test
+
+## Install the dependencies
+```bash
+npm install
+```
+
+### Start the app in development mode (hot-code reloading, error reporting, etc.)
+```bash
+quasar dev
+```
+
+### Lint the files
+```bash
+npm run lint
+```
+
+### Build the app for production
+```bash
+quasar build
+```
+
+### Customize the configuration
+See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,6 @@
+
+module.exports = {
+  presets: [
+    '@quasar/babel-preset-app'
+  ]
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "src/*": [
+        "src/*"
+      ],
+      "app/*": [
+        "*"
+      ],
+      "components/*": [
+        "src/components/*"
+      ],
+      "layouts/*": [
+        "src/layouts/*"
+      ],
+      "pages/*": [
+        "src/pages/*"
+      ],
+      "assets/*": [
+        "src/assets/*"
+      ],
+      "boot/*": [
+        "src/boot/*"
+      ],
+      "vue$": [
+        "node_modules/vue/dist/vue.esm.js"
+      ]
+    }
+  },
+  "exclude": [
+    "dist",
+    ".quasar",
+    "node_modules"
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,46 @@
+{
+  "name": "demo-test",
+  "version": "0.0.1",
+  "description": "Quasar Demo Test",
+  "productName": "Demo Test",
+  "author": "Fredrick W. Warren <fred.warren@gmail.com>",
+  "private": true,
+  "scripts": {
+    "lint": "eslint --ext .js,.vue ./",
+    "test": "echo \"No test specified\" && exit 0"
+  },
+  "dependencies": {
+    "@quasar/extras": "^1.0.0",
+    "axios": "^0.18.1",
+    "core-js": "^3.6.5",
+    "quasar": "^1.0.0"
+  },
+  "devDependencies": {
+    "@quasar/app": "^2.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^6.8.0",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-loader": "^3.0.3",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.1.2"
+  },
+  "browserslist": [
+    "last 10 Chrome versions",
+    "last 10 Firefox versions",
+    "last 4 Edge versions",
+    "last 7 Safari versions",
+    "last 8 Android versions",
+    "last 8 ChromeAndroid versions",
+    "last 8 FirefoxAndroid versions",
+    "last 10 iOS versions",
+    "last 5 Opera versions"
+  ],
+  "engines": {
+    "node": ">= 10.18.1",
+    "npm": ">= 6.13.4",
+    "yarn": ">= 1.21.1"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icons/favicon-128x128.png
+++ b/public/icons/favicon-128x128.png
--- a/public/icons/favicon-16x16.png
+++ b/public/icons/favicon-16x16.png
--- a/public/icons/favicon-32x32.png
+++ b/public/icons/favicon-32x32.png
--- a/public/icons/favicon-96x96.png
+++ b/public/icons/favicon-96x96.png
--- a/quasar.conf.js
+++ b/quasar.conf.js
@ -0,0 +1,200 @@
+/*
+ * This file runs in a Node context (it's NOT transpiled by Babel), so use only
+ * the ES6 features that are supported by your Node version. https://node.green/
+ */
+
+// Configuration for your app
+// https://quasar.dev/quasar-cli/quasar-conf-js
+/* eslint-env node */
+
+module.exports = function (/* ctx */) {
+  return {
+    // https://quasar.dev/quasar-cli/supporting-ts
+    supportTS: false,
+
+    // https://quasar.dev/quasar-cli/prefetch-feature
+    // preFetch: true,
+
+    // app boot file (/src/boot)
+    // --> boot files are part of "main.js"
+    // https://quasar.dev/quasar-cli/boot-files
+    boot: [
+
+      'axios'
+    ],
+
+    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
+    css: [
+      'app.sass'
+    ],
+
+    // https://github.com/quasarframework/quasar/tree/dev/extras
+    extras: [
+      // 'ionicons-v4',
+      // 'mdi-v5',
+      // 'fontawesome-v5',
+      // 'eva-icons',
+      // 'themify',
+      // 'line-awesome',
+      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+
+      'roboto-font', // optional, you are not bound to it
+      'material-icons' // optional, you are not bound to it
+    ],
+
+    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
+    build: {
+      vueRouterMode: 'hash', // available values: 'hash', 'history'
+
+      // transpile: false,
+
+      // Add dependencies for transpiling with Babel (Array of string/regex)
+      // (from node_modules, which are by default not transpiled).
+      // Applies only if "transpile" is set to true.
+      // transpileDependencies: [],
+
+      // rtl: false, // https://quasar.dev/options/rtl-support
+      // preloadChunks: true,
+      // showProgress: false,
+      // gzip: true,
+      // analyze: true,
+
+      // Options below are automatically set depending on the env, set them if you want to override
+      // extractCSS: false,
+
+      // https://quasar.dev/quasar-cli/handling-webpack
+      extendWebpack (cfg) {
+        cfg.module.rules.push({
+          enforce: 'pre',
+          test: /\.(js|vue)$/,
+          loader: 'eslint-loader',
+          exclude: /node_modules/
+        })
+      }
+    },
+
+    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
+    devServer: {
+      https: false,
+      port: 8089,
+      open: false // opens browser window automatically
+    },
+
+    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
+    framework: {
+      iconSet: 'material-icons', // Quasar icon set
+      lang: 'en-us', // Quasar language pack
+      config: {},
+
+      // Possible values for "importStrategy":
+      // * 'auto' - (DEFAULT) Auto-import needed Quasar components & directives
+      // * 'all'  - Manually specify what to import
+      importStrategy: 'auto',
+
+      // For special cases outside of where "auto" importStrategy can have an impact
+      // (like functional components as one of the examples),
+      // you can manually specify Quasar components/directives to be available everywhere:
+      //
+      // components: [],
+      // directives: [],
+
+      // Quasar plugins
+      plugins: [
+        'Dialog'
+      ]
+    },
+
+    // animations: 'all', // --- includes all animations
+    // https://quasar.dev/options/animations
+    animations: [],
+
+    // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
+    ssr: {
+      pwa: false
+    },
+
+    // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
+    pwa: {
+      workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
+      workboxOptions: {}, // only for GenerateSW
+      manifest: {
+        name: 'Demo Test',
+        short_name: 'Demo Test',
+        description: 'Quasar Demo Test',
+        display: 'standalone',
+        orientation: 'portrait',
+        background_color: '#ffffff',
+        theme_color: '#027be3',
+        icons: [
+          {
+            src: 'icons/icon-128x128.png',
+            sizes: '128x128',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-256x256.png',
+            sizes: '256x256',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-384x384.png',
+            sizes: '384x384',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      }
+    },
+
+    // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
+    cordova: {
+      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
+    },
+
+    // Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
+    capacitor: {
+      hideSplashscreen: true
+    },
+
+    // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
+    electron: {
+      bundler: 'packager', // 'packager' or 'builder'
+
+      packager: {
+        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
+
+        // OS X / Mac App Store
+        // appBundleId: '',
+        // appCategoryType: '',
+        // osxSign: '',
+        // protocol: 'myapp://path',
+
+        // Windows only
+        // win32metadata: { ... }
+      },
+
+      builder: {
+        // https://www.electron.build/configuration/configuration
+
+        appId: 'demo-test'
+      },
+
+      // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
+      nodeIntegration: true,
+
+      extendWebpack (/* cfg */) {
+        // do something with Electron main process Webpack cfg
+        // chainWebpack also available besides this extendWebpack
+      }
+    }
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,16 @@
+<template>
+  <div id="q-app">
+    <router-view />
+  </div>
+</template>
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+  .text-strikethrough {
+    text-decoration: line-through;
+  }
+</style>
--- a/src/assets/quasar-logo-full.svg
+++ b/src/assets/quasar-logo-full.svg
@ -0,0 +1,191 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="67.407623mm"
+   height="62.908276mm"
+   viewBox="0 0 238.84591 222.90334"
+   id="svg3570"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="quasar-logo-full.svg">
+  <defs
+     id="defs3572" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="-39.753589"
+     inkscape:cy="27.706388"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4895-4-4"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3575">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-277.71988,-312.33911)">
+    <g
+       id="g4895-4-4"
+       transform="translate(1419.0442,398.9018)">
+      <g
+         transform="translate(-29.620665,-4)"
+         id="g4579-2-20">
+        <g
+           id="g4445-2-0"
+           transform="translate(12.499948,7.809312)">
+          <g
+             inkscape:export-ydpi="44.860481"
+             inkscape:export-xdpi="44.860481"
+             inkscape:export-filename="/home/emanuele/Desktop/logo1.png"
+             transform="translate(-712.85583,-503.26814)"
+             id="g4561-6-7-0">
+            <g
+               transform="translate(16.233481,0)"
+               style="font-style:normal;font-weight:normal;font-size:50.25774765px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#263238;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+               id="flowRoot4513-6-6-08">
+              <path
+                 d="m -402.73125,631.46823 q -0.6125,0.0438 -1.3125,0.0875 -0.65625,0 -1.4,0 l -9.31875,0 q -12.81875,0 -12.81875,-8.44375 l 0,-13.475 q 0,-8.26875 12.6,-8.26875 l 9.75625,0 q 12.6,0 12.6,8.26875 l 0,13.475 q 0,5.03125 -4.4625,7.04375 l 3.10625,2.14375 q 1.35625,0.83125 1.35625,1.70625 0,0.875 -0.7,1.3125 -0.65625,0.48125 -1.88125,0.48125 -0.30625,0 -0.7875,-0.13125 -0.4375,-0.0875 -1.05,-0.48125 l -5.6875,-3.71875 z m 5.38125,-21.74375 q 0,-4.76875 -7.9625,-4.76875 l -9.58125,0 q -7.9625,0 -7.9625,4.76875 l 0,13.3875 q 0,4.94375 8.3125,4.94375 l 8.88125,0 q 8.3125,0 8.3125,-4.94375 l 0,-13.3875 z"
+                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
+                 id="path3428" />
+              <path
+                 d="m -368.0585,631.64323 q -11.2875,0 -11.2875,-6.9125 l 0,-12.73125 q 0,-1.8375 2.31875,-1.8375 2.31875,0 2.31875,1.8375 l 0,12.775 q 0,3.325 6.475,3.325 l 8.3125,0 q 6.475,0 6.475,-3.325 l 0,-12.775 q 0,-1.8375 2.31875,-1.8375 2.3625,0 2.3625,1.8375 l 0,12.73125 q 0,6.9125 -11.2875,6.9125 l -8.00625,0 z"
+                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
+                 id="path3430" />
+              <path
+                 d="m -327.2833,631.64323 q -9.3625,0 -9.3625,-5.81875 l 0,-2.49375 q 0,-5.775 9.3625,-5.775 l 18.59375,0 0,-0.65625 q 0,-3.0625 -5.38125,-3.0625 l -6.16875,0 q -2.1875,0 -2.1875,-1.70625 0,-1.75 2.1875,-1.75 l 6.16875,0 q 9.93125,0 9.93125,6.51875 l 0,8.575 q 0,6.16875 -9.5375,6.16875 l -13.60625,0 z m 13.34375,-3.4125 q 5.25,0 5.25,-2.8875 l 0,-4.76875 -18.24375,0 q -5.11875,0 -5.11875,2.66875 l 0,2.275 q 0,2.7125 5.11875,2.7125 l 12.99375,0 z"
+                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
+                 id="path3432" />
+              <path
+                 d="m -262.77031,626.74323 q 0,4.9 -9.975,4.9 l -17.0625,0 q -2.1875,0 -2.1875,-1.70625 0,-1.70625 2.1875,-1.70625 l 17.0625,0 q 5.38125,0 5.38125,-1.4875 l 0,-2.45 q 0,-1.4875 -5.38125,-1.4875 l -9.0125,0 q -9.975,0 -9.975,-4.76875 l 0,-2.05625 q 0,-5.6 10.28125,-5.6 l 5.99375,0 q 2.23125,0 2.23125,1.75 0,0.875 -0.6125,1.3125 -0.56875,0.39375 -1.61875,0.39375 l -5.99375,0 q -5.73125,0 -5.73125,2.14375 l 0,1.925 q 0,1.79375 5.6875,1.79375 l 9.0125,0 q 9.7125,0 9.7125,4.4625 l 0,2.58125 z"
+                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
+                 id="path3434" />
+              <path
+                 d="m -241.91709,631.64323 q -9.3625,0 -9.3625,-5.81875 l 0,-2.49375 q 0,-5.775 9.3625,-5.775 l 18.59375,0 0,-0.65625 q 0,-3.0625 -5.38125,-3.0625 l -6.16875,0 q -2.1875,0 -2.1875,-1.70625 0,-1.75 2.1875,-1.75 l 6.16875,0 q 9.93125,0 9.93125,6.51875 l 0,8.575 q 0,6.16875 -9.5375,6.16875 l -13.60625,0 z m 13.34375,-3.4125 q 5.25,0 5.25,-2.8875 l 0,-4.76875 -18.24375,0 q -5.11875,0 -5.11875,2.66875 l 0,2.275 q 0,2.7125 5.11875,2.7125 l 12.99375,0 z"
+                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
+                 id="path3436" />
+              <path
+                 d="m -205.62285,617.33698 q 0,-6.95625 11.2875,-6.95625 l 3.36875,0 q 2.23125,0 2.23125,1.79375 0,1.79375 -2.23125,1.79375 l -3.54375,0 q -6.475,0 -6.475,3.28125 l 0,12.775 q 0,1.8375 -2.31875,1.8375 -2.31875,0 -2.31875,-1.8375 l 0,-12.6875 z"
+                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
+                 id="path3438" />
+            </g>
+          </g>
+        </g>
+      </g>
+      <g
+         id="g5443-0-1-5-1-9"
+         transform="matrix(0.55595317,0,0,0.55595317,-521.93484,-328.66104)"
+         inkscape:export-filename="/home/emanuele/Desktop/logo1.png"
+         inkscape:export-xdpi="44.860481"
+         inkscape:export-ydpi="44.860481">
+        <g
+           inkscape:export-ydpi="3.4165223"
+           inkscape:export-xdpi="3.4165223"
+           transform="matrix(0.09527033,0,0,0.09527033,-1695.2716,706.62921)"
+           id="g8856-6-1-1-9-0-1-9">
+          <circle
+             r="1485"
+             cy="-1361.2571"
+             cx="8317.3574"
+             id="circle8858-1-3-7-6-5-3-0"
+             style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:50;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             inkscape:export-xdpi="10.031387"
+             inkscape:export-ydpi="10.031387" />
+          <path
+             inkscape:export-ydpi="10.031387"
+             inkscape:export-xdpi="10.031387"
+             style="opacity:1;fill:#263238;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 8560.3823,-1361.3029 a 242.947,242.947 0 0 1 -242.947,242.948 242.947,242.947 0 0 1 -242.947,-242.948 242.947,242.947 0 0 1 242.947,-242.946 242.947,242.947 0 0 1 242.947,242.946 z"
+             id="path8860-5-4-8-2-9-0-9"
+             inkscape:connector-curvature="0" />
+          <path
+             id="path8862-5-5-9-1-3-6-3"
+             d="m 9395.8755,-1984.028 a 1245.372,1245.372 0 0 0 -190.8415,-249.4971 l -280.8618,162.1556 c -87.542,-74.7796 -187.0349,-132.0588 -293.2407,-169.9527 -95.8868,97.1766 -172.0602,205.7604 -226.9672,323.8487 312.6411,-21.2772 635.5313,91.8725 935.2898,326.0721 l 176.7612,-102.0532 a 1245.372,1245.372 0 0 0 -120.1398,-290.5734 z"
+             clip-path="none"
+             mask="none"
+             style="fill:#1976d2;fill-opacity:1"
+             inkscape:connector-curvature="0"
+             inkscape:transform-center-x="-514.04855"
+             inkscape:transform-center-y="-444.04649" />
+          <path
+             inkscape:transform-center-y="265.80217"
+             inkscape:transform-center-x="-689.63727"
+             inkscape:connector-curvature="0"
+             style="fill:#42a5f5;fill-opacity:1"
+             mask="none"
+             clip-path="none"
+             d="m 9395.9474,-738.70387 a 1245.372,1245.372 0 0 0 120.6501,-290.02213 l -280.8618,-162.1557 c 20.99,-113.2034 20.8488,-228.0063 0.563,-338.9302 -132.1008,-34.4521 -264.2238,-46.1283 -393.9448,-34.635 174.7471,260.1165 238.2017,596.32248 185.2582,973.02076 l 176.7612,102.05309 a 1245.372,1245.372 0 0 0 191.5741,-249.33082 z"
+             id="path8864-4-8-1-2-4-4-4" />
+          <path
+             id="path8866-7-5-5-0-6-4-7"
+             d="m 8317.501,-115.97954 a 1245.372,1245.372 0 0 0 311.4916,-40.52501 l 0,-324.31131 c 108.5321,-38.42382 207.8837,-95.94755 293.8037,-168.97752 -36.214,-131.6287 -92.1636,-251.88868 -166.9776,-358.48372 -137.894,281.39369 -397.3296,504.44998 -750.0316,646.9487 l 0,204.10623 a 1245.372,1245.372 0 0 0 311.7139,41.24263 z"
+             clip-path="none"
+             mask="none"
+             style="fill:#1976d2;fill-opacity:1"
+             inkscape:connector-curvature="0"
+             inkscape:transform-center-x="-117.49007"
+             inkscape:transform-center-y="639.34029" />
+          <path
+             inkscape:transform-center-y="444.04652"
+             inkscape:transform-center-x="514.04857"
+             inkscape:connector-curvature="0"
+             style="fill:#42a5f5;fill-opacity:1"
+             mask="none"
+             clip-path="none"
+             d="m 7238.9827,-738.57936 a 1245.372,1245.372 0 0 0 190.8415,249.49714 l 280.8618,-162.15566 c 87.5421,74.77965 187.0349,132.05879 293.2407,169.95271 95.8868,-97.17659 172.0602,-205.76036 226.9672,-323.8487 -312.6411,21.27714 -635.5313,-91.87254 -935.2898,-326.07203 l -176.7612,102.0531 a 1245.372,1245.372 0 0 0 120.1398,290.57344 z"
+             id="path8868-6-7-4-7-2-7-3" />
+          <path
+             id="path8870-5-3-9-3-5-5-1"
+             d="m 7238.9108,-1983.9035 a 1245.372,1245.372 0 0 0 -120.6501,290.0221 l 280.8618,162.1557 c -20.99,113.2035 -20.8488,228.0063 -0.563,338.9302 132.1008,34.4521 264.2238,46.1283 393.9448,34.635 -174.7471,-260.1165 -238.2017,-596.3225 -185.2582,-973.0207 l -176.7612,-102.0532 a 1245.372,1245.372 0 0 0 -191.5741,249.3309 z"
+             clip-path="none"
+             mask="none"
+             style="fill:#1976d2;fill-opacity:1"
+             inkscape:connector-curvature="0"
+             inkscape:transform-center-x="689.63729"
+             inkscape:transform-center-y="-265.80221" />
+          <path
+             inkscape:transform-center-y="-639.34032"
+             inkscape:transform-center-x="117.49005"
+             inkscape:connector-curvature="0"
+             style="fill:#42a5f5;fill-opacity:1"
+             mask="none"
+             clip-path="none"
+             d="m 8317.3572,-2606.6279 a 1245.372,1245.372 0 0 0 -311.4915,40.525 l -1e-4,324.3113 c -108.5321,38.4239 -207.8837,95.9476 -293.8037,168.9776 36.214,131.6287 92.1637,251.8886 166.9776,358.4837 137.894,-281.3937 397.3296,-504.45 750.0316,-646.9487 l 1e-4,-204.1063 a 1245.372,1245.372 0 0 0 -311.714,-41.2426 z"
+             id="path8872-6-3-2-1-3-3-7" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/src/boot/.gitkeep
+++ b/src/boot/.gitkeep
--- a/src/boot/axios.js
+++ b/src/boot/axios.js
@ -0,0 +1,4 @@
+import Vue from 'vue'
+import axios from 'axios'
+
+Vue.prototype.$axios = axios
--- a/src/components/EssentialLink.vue
+++ b/src/components/EssentialLink.vue
@ -0,0 +1,49 @@
+<template>
+  <q-item
+    clickable
+    tag="a"
+    target="_blank"
+    :href="link"
+  >
+    <q-item-section
+      v-if="icon"
+      avatar
+    >
+      <q-icon :name="icon" />
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label>{{ title }}</q-item-label>
+      <q-item-label caption>
+        {{ caption }}
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script>
+export default {
+  name: 'EssentialLink',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+
+    caption: {
+      type: String,
+      default: ''
+    },
+
+    link: {
+      type: String,
+      default: '#'
+    },
+
+    icon: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
--- a/src/components/StandardLink.vue
+++ b/src/components/StandardLink.vue
@ -0,0 +1,40 @@
+<template>
+  <q-item
+    clickable
+    exact
+    :to="to"
+  >
+    <q-item-section
+      v-if="icon"
+      avatar
+    >
+      <q-icon :name="icon" />
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label>{{ title }}</q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script>
+export default {
+  name: 'StandardLink',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+
+    to: {
+      type: String,
+      default: '#'
+    },
+
+    icon: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
--- a/src/components/Tasks/Modals/AddTask.vue
+++ b/src/components/Tasks/Modals/AddTask.vue
@ -0,0 +1,79 @@
+<template>
+  <q-card>
+
+    <modal-header>Add Task</modal-header>
+
+    <q-form @submit.prevent="submitForm">
+      <q-card-section class="q-pt-none">
+
+        <modal-task-name
+          :name.sync="taskToSubmit.name"
+          ref="modalTaskName"></modal-task-name>
+
+        <modal-due-date
+          :dueDate.sync="taskToSubmit.dueDate"
+          @clear="clearDueDate" ></modal-due-date>
+
+        <modal-due-time
+          v-if="taskToSubmit.dueDate"
+          :dueTime.sync="taskToSubmit.dueTime"
+          @clear="taskToSubmit.dueTime = ''" ></modal-due-time>
+
+      </q-card-section>
+
+      <modal-buttons></modal-buttons>
+
+    </q-form>
+
+  </q-card>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import ModalHeader from './Shared/ModalHeader.vue'
+import ModalTaskName from './Shared/ModalTaskName.vue'
+import ModalDueDate from './Shared/ModalDueDate.vue'
+import ModalDueTime from './Shared/ModalDueTime.vue'
+import ModalButtons from './Shared/ModalButtons.vue'
+
+export default {
+  name: 'AddTask',
+  components: {
+    ModalHeader,
+    ModalTaskName,
+    ModalDueDate,
+    ModalDueTime,
+    ModalButtons
+  },
+  data () {
+    return {
+      taskToSubmit: {
+        name: '',
+        dueDate: '',
+        dueTime: '',
+        completed: false
+      }
+    }
+  },
+  methods: {
+    ...mapActions('tasks', ['addTask']),
+    submitForm () {
+      this.$refs.modalTaskName.$refs.name.validate()
+      if (!this.$refs.modalTaskName.$refs.name.hasError) {
+        this.submitTask()
+      }
+    },
+    submitTask () {
+      this.addTask(this.taskToSubmit)
+      this.$emit('close')
+    },
+    clearDueDate () {
+      this.taskToSubmit.dueDate = ''
+      this.taskToSubmit.dueTime = ''
+    }
+  }
+}
+</script>
+
+<style>
+</style>
--- a/src/components/Tasks/Modals/EditTask.vue
+++ b/src/components/Tasks/Modals/EditTask.vue
@ -0,0 +1,84 @@
+<template>
+  <q-card>
+
+    <modal-header>Edit Task</modal-header>
+
+    <q-form @submit.prevent="submitForm">
+      <q-card-section class="q-pt-none">
+
+        <modal-task-name
+          :name.sync="taskToSubmit.name"
+          ref="modalTaskName"></modal-task-name>
+
+        <modal-due-date
+          :dueDate.sync="taskToSubmit.dueDate"
+          @clear="clearDueDate" ></modal-due-date>
+
+        <modal-due-time
+          v-if="taskToSubmit.dueDate"
+          :dueTime.sync="taskToSubmit.dueTime"
+          @clear="taskToSubmit.dueTime = ''" ></modal-due-time>
+
+      </q-card-section>
+
+      <modal-buttons></modal-buttons>
+
+    </q-form>
+
+  </q-card>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import ModalHeader from './Shared/ModalHeader.vue'
+import ModalTaskName from './Shared/ModalTaskName.vue'
+import ModalDueDate from './Shared/ModalDueDate.vue'
+import ModalDueTime from './Shared/ModalDueTime.vue'
+import ModalButtons from './Shared/ModalButtons.vue'
+
+export default {
+  name: 'AddTask',
+  components: {
+    ModalHeader,
+    ModalTaskName,
+    ModalDueDate,
+    ModalDueTime,
+    ModalButtons
+  },
+  props: [
+    'task',
+    'id'
+  ],
+  data () {
+    return {
+      taskToSubmit: {}
+    }
+  },
+  methods: {
+    ...mapActions('tasks', ['updateTask']),
+    submitForm () {
+      this.$refs.modalTaskName.$refs.name.validate()
+      if (!this.$refs.modalTaskName.$refs.name.hasError) {
+        this.submitTask()
+      }
+    },
+    submitTask () {
+      this.updateTask({
+        id: this.id,
+        updates: this.taskToSubmit
+      })
+      this.$emit('close')
+    },
+    clearDueDate () {
+      this.taskToSubmit.dueDate = ''
+      this.taskToSubmit.dueTime = ''
+    }
+  },
+  mounted () {
+    this.taskToSubmit = Object.assign({}, this.task)
+  }
+}
+</script>
+
+<style>
+</style>
--- a/src/components/Tasks/Modals/Shared/ModalButtons.vue
+++ b/src/components/Tasks/Modals/Shared/ModalButtons.vue
@ -0,0 +1,18 @@
+<template>
+  <q-card-actions align="right">
+    <q-btn
+      label="SAVE"
+      color="primary"
+      type="submit" />
+  </q-card-actions>
+</template>
+
+<script>
+export default {
+  name: 'ModalButtons'
+}
+</script>
+
+<style>
+
+</style>
--- a/src/components/Tasks/Modals/Shared/ModalDueDate.vue
+++ b/src/components/Tasks/Modals/Shared/ModalDueDate.vue
@ -0,0 +1,43 @@
+<template>
+  <div class="row q-mb-sm">
+    <q-input
+    outlined
+    label="Due Date"
+    :value="dueDate"
+    @input="$emit('update:dueDate', $event)"
+    class="col" >
+    <template v-slot:append>
+        <q-icon
+        v-if="dueDate"
+        name="cancel"
+        @click="$emit('clear')"
+        class="cursor-pointer" />
+
+        <q-icon name="event" class="cursor-pointer">
+        <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
+            <q-date
+              :value="dueDate"
+              @input="$emit('update:dueDate', $event)" >
+            <div class="row items-center justify-end">
+                <q-btn v-close-popup label="Close" color="primary" flat />
+            </div>
+            </q-date>
+        </q-popup-proxy>
+        </q-icon>
+    </template>
+    </q-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ModalDueDate',
+  props: [
+    'dueDate'
+  ]
+}
+</script>
+
+<style>
+
+</style>
--- a/src/components/Tasks/Modals/Shared/ModalDueTime.vue
+++ b/src/components/Tasks/Modals/Shared/ModalDueTime.vue
@ -0,0 +1,44 @@
+<template>
+  <div
+    class="row q-mb-sm">
+    <q-input
+      outlined
+      label="Due Time"
+      :value="dueTime"
+      @input="$emit('update:dueTime', $event)"
+      class="col" >
+      <template v-slot:append>
+        <q-icon
+          v-if="dueTime"
+          name="cancel"
+          @click="$emit('clear')"
+          class="cursor-pointer" />
+
+        <q-icon name="access_time" class="cursor-pointer">
+          <q-popup-proxy transition-show="scale" transition-hide="scale">
+            <q-time
+              value="dueTime"
+              @input="$emit('update:dueTime', $event)" >
+              <div class="row items-center justify-end">
+                <q-btn v-close-popup label="Close" color="primary" flat />
+              </div>
+            </q-time>
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ModalDueTime',
+  props: [
+    'dueTime'
+  ]
+}
+</script>
+
+<style>
+
+</style>
--- a/src/components/Tasks/Modals/Shared/ModalHeader.vue
+++ b/src/components/Tasks/Modals/Shared/ModalHeader.vue
@ -0,0 +1,21 @@
+<template>
+  <q-card-section class="row">
+    <div class="text-h6"><slot></slot></div>
+    <q-space />
+    <q-btn
+      v-close-popup
+      flat
+      round
+      icon="close" />
+  </q-card-section>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/src/components/Tasks/Modals/Shared/ModalTaskName.vue
+++ b/src/components/Tasks/Modals/Shared/ModalTaskName.vue
@ -0,0 +1,28 @@
+<template>
+  <div class="row q-mb-sm">
+    <q-input
+    outlined
+    :value="name"
+    @input="$emit('update:name', $event)"
+    :rules="[val => !!val || 'Field is required']"
+    clearable
+    autofocus
+    ref="name"
+    label="Task name"
+    class="col" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ModalTaskName',
+  props: [
+    'name'
+  ]
+
+}
+</script>
+
+<style>
+
+</style>
--- a/src/components/Tasks/Task.vue
+++ b/src/components/Tasks/Task.vue
@ -0,0 +1,104 @@
+<template>
+  <q-item
+    @click="updateTask({ id: id, updates: { completed: !task.completed}})"
+    :class="!task.completed ? 'bg-orange-1' : 'bg-green-1'"
+    clickable
+    v-ripple>
+    <q-item-section side top>
+      <q-checkbox
+        :value="task.completed"
+        class="no-pointer-events" />
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label
+        :class="{ 'text-strikethrough' : task.completed }">
+          {{ task.name }}
+      </q-item-label>
+    </q-item-section>
+
+    <q-item-section
+      v-if="task.dueDate"
+      side>
+      <div class="row">
+        <div class="column justify-center">
+          <q-icon
+            name="event"
+            size="18px"
+            class="q-mr-xs"
+          />
+        </div>
+        <div class="column">
+          <q-item-label
+            class="row justify-end"
+            caption>
+            {{ task.dueDate }}
+          </q-item-label>
+          <q-item-label
+            class="row justify-end"
+            caption>
+            <small>{{ task.dueTime }}</small>
+          </q-item-label>
+        </div>
+      </div>
+    </q-item-section>
+    <q-item-section side>
+      <div class="row">
+        <q-btn
+          @click.stop="showEditTask = true"
+          flat
+          round
+          dense
+          color="primary"
+          icon="edit" />
+        <q-btn
+          @click.stop="promptToDelete(id)"
+          flat
+          round
+          dense
+          color="red"
+          icon="delete" />
+      </div>
+    </q-item-section>
+    <q-dialog v-model="showEditTask">
+      <edit-task
+        @close="showEditTask = false"
+        :task="task"
+        :id="id" />
+    </q-dialog>
+  </q-item>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import editTask from 'components/Tasks/Modals/EditTask.vue'
+
+export default {
+  name: 'Task',
+  components: {
+    editTask
+  },
+  props: ['task', 'id'],
+  data () {
+    return {
+      showEditTask: false
+    }
+  },
+  methods: {
+    ...mapActions('tasks', ['updateTask', 'deleteTask']),
+    promptToDelete (id) {
+      this.$q.dialog({
+        title: 'Confirm',
+        message: 'Really delete?',
+        cancel: true,
+        persistent: true
+      }).onOk(() => {
+        this.deleteTask(id)
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>
--- a/src/css/app.sass
+++ b/src/css/app.sass
@ -0,0 +1 @@
+// app global css in Sass form
--- a/src/css/quasar.variables.sass
+++ b/src/css/quasar.variables.sass
@ -0,0 +1,24 @@
+// Quasar Sass (& SCSS) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+$primary   : #4682b4
+$secondary : #26A69A
+$accent    : #9C27B0
+
+$dark      : #1D1D1D
+
+$positive  : #21BA45
+$negative  : #C10015
+$info      : #31CCEC
+$warning   : #F2C037
--- a/src/index.template.html
+++ b/src/index.template.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= productName %></title>
+
+    <meta charset="utf-8">
+    <meta name="description" content="<%= productDescription %>">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="icon" type="image/ico" href="favicon.ico">
+  </head>
+  <body>
+    <!-- DO NOT touch the following DIV -->
+    <div id="q-app"></div>
+  </body>
+</html>
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@ -0,0 +1,93 @@
+<template>
+  <q-layout view="hHh lpR fFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-toolbar-title class="absolute-center">
+          Quasar App
+        </q-toolbar-title>
+
+        <div>Quasar v{{ $q.version }}</div>
+      </q-toolbar>
+    </q-header>
+
+    <q-footer>
+      <q-tabs>
+        <q-route-tab
+          v-for="nav in navs"
+          :key="nav.title"
+          :to="nav.to"
+          :icon="nav.icon"
+          :label="nav.title"
+        />
+      </q-tabs>
+    </q-footer>
+
+    <q-drawer
+      :breakpoint="767"
+      :width="250"
+      v-model="leftDrawerOpen"
+      show-if-above
+      bordered
+      content-class="bg-primary"
+    >
+      <q-list dark>
+        <q-item-label
+          header
+        >
+         Navigation
+        </q-item-label>
+        <StandardLink
+          v-for="nav in navs"
+          :key="nav.title"
+          v-bind="nav"
+          class="text-grey-4"
+        />
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script>
+
+export default {
+  name: 'MainLayout',
+  components: {
+    StandardLink: require('components/StandardLink.vue').default
+  },
+  data () {
+    return {
+      leftDrawerOpen: false,
+      navs: [
+        {
+          title: 'ToDo',
+          icon: 'list',
+          to: '/'
+        },
+        {
+          title: 'Settings',
+          icon: 'settings',
+          to: '/settings'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  @media screen and (min-width: 768px) {
+    .q-footer {
+       display:none
+    }
+}
+
+.q-drawer {
+  .q-router-link--exact-active {
+    color: white !important;
+  }
+}
+</style>
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@ -0,0 +1,107 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="leftDrawerOpen = !leftDrawerOpen"
+        />
+
+        <q-toolbar-title>
+          Quasar App
+        </q-toolbar-title>
+
+        <div>Quasar v{{ $q.version }}</div>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer
+      v-model="leftDrawerOpen"
+      show-if-above
+      bordered
+      content-class="bg-grey-1"
+    >
+      <q-list>
+        <q-item-label
+          header
+          class="text-grey-8"
+        >
+          Essential Links
+        </q-item-label>
+        <EssentialLink
+          v-for="link in essentialLinks"
+          :key="link.title"
+          v-bind="link"
+        />
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script>
+import EssentialLink from 'components/EssentialLink.vue'
+
+const linksData = [
+  {
+    title: 'Docs',
+    caption: 'quasar.dev',
+    icon: 'school',
+    link: 'https://quasar.dev'
+  },
+  {
+    title: 'Github',
+    caption: 'github.com/quasarframework',
+    icon: 'code',
+    link: 'https://github.com/quasarframework'
+  },
+  {
+    title: 'Discord Chat Channel',
+    caption: 'chat.quasar.dev',
+    icon: 'chat',
+    link: 'https://chat.quasar.dev'
+  },
+  {
+    title: 'Forum',
+    caption: 'forum.quasar.dev',
+    icon: 'record_voice_over',
+    link: 'https://forum.quasar.dev'
+  },
+  {
+    title: 'Twitter',
+    caption: '@quasarframework',
+    icon: 'rss_feed',
+    link: 'https://twitter.quasar.dev'
+  },
+  {
+    title: 'Facebook',
+    caption: '@QuasarFramework',
+    icon: 'public',
+    link: 'https://facebook.quasar.dev'
+  },
+  {
+    title: 'Quasar Awesome',
+    caption: 'Community Quasar projects',
+    icon: 'favorite',
+    link: 'https://awesome.quasar.dev'
+  }
+]
+
+export default {
+  name: 'MainLayout',
+  components: { EssentialLink },
+  data () {
+    return {
+      leftDrawerOpen: false,
+      essentialLinks: linksData
+    }
+  }
+}
+</script>
--- a/src/pages/Error404.vue
+++ b/src/pages/Error404.vue
@ -0,0 +1,29 @@
+<template>
+  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+    <div>
+      <div style="font-size: 30vh">
+        404
+      </div>
+
+      <div class="text-h2" style="opacity:.4">
+        Oops. Nothing here...
+      </div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Error404'
+}
+</script>
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@ -0,0 +1,14 @@
+<template>
+  <q-page class="flex flex-center">
+    <img
+      alt="Quasar logo"
+      src="~assets/quasar-logo-full.svg"
+    >
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: 'PageIndex'
+}
+</script>
--- a/src/pages/PageSettings.vue
+++ b/src/pages/PageSettings.vue
@ -0,0 +1,11 @@
+<template>
+  <q-page padding>
+    <p>Settings Page</p>
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: 'PageSettings'
+}
+</script>
--- a/src/pages/PageTodo.vue
+++ b/src/pages/PageTodo.vue
@ -0,0 +1,52 @@
+<template>
+  <q-page class="q-pa-md">
+    <q-list
+      v-if="Object.keys(tasks).length"
+      separator
+      bordered>
+
+      <task
+        v-for="(task, key) in tasks"
+        :key="key"
+        :task="task"
+        :id="key"
+      ></task>
+
+    </q-list>
+
+    <div class="absolute-bottom text-center q-mb-lg">
+      <q-btn
+        @click="showAddTask = true"
+        round
+        color="primary"
+        size="24px"
+        icon="add"
+      />
+    </div>
+
+    <q-dialog v-model="showAddTask">
+      <add-task @close="showAddTask = false" />
+    </q-dialog>
+
+  </q-page>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'PageTodo',
+  components: {
+    task: require('components/Tasks/Task.vue').default,
+    addTask: require('components/Tasks/Modals/AddTask.vue').default
+  },
+  data () {
+    return {
+      showAddTask: true
+    }
+  },
+  computed: {
+    ...mapGetters('tasks', ['tasks'])
+  }
+}
+</script>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,30 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import routes from './routes'
+
+Vue.use(VueRouter)
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+export default function (/* { store, ssrContext } */) {
+  const Router = new VueRouter({
+    scrollBehavior: () => ({ x: 0, y: 0 }),
+    routes,
+
+    // Leave these as they are and change in quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    mode: process.env.VUE_ROUTER_MODE,
+    base: process.env.VUE_ROUTER_BASE
+  })
+
+  return Router
+}
--- a/src/router/routes.js
+++ b/src/router/routes.js
@ -0,0 +1,26 @@
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('layouts/Layout.vue'),
+    children: [
+      {
+        path: '',
+        component: () => import('pages/PageTodo.vue')
+      },
+      {
+        path: '/settings',
+        component: () => import('pages/PageSettings.vue')
+      }
+    ]
+  },
+
+  // Always leave this as last one,
+  // but you can also remove it
+  {
+    path: '*',
+    component: () => import('pages/Error404.vue')
+  }
+]
+
+export default routes
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,29 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import tasks from './store-tasks'
+
+Vue.use(Vuex)
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default function (/* { ssrContext } */) {
+  const Store = new Vuex.Store({
+    modules: {
+      tasks
+    },
+
+    // enable strict mode (adds overhead!)
+    // for dev mode only
+    strict: process.env.DEBUGGING
+  })
+
+  return Store
+}
--- a/src/store/module-example/actions.js
+++ b/src/store/module-example/actions.js
@ -0,0 +1,2 @@
+export function someAction (/* context */) {
+}
--- a/src/store/module-example/getters.js
+++ b/src/store/module-example/getters.js
@ -0,0 +1,2 @@
+export function someGetter (/* state */) {
+}
--- a/src/store/module-example/index.js
+++ b/src/store/module-example/index.js
@ -0,0 +1,12 @@
+import state from './state'
+import * as getters from './getters'
+import * as mutations from './mutations'
+import * as actions from './actions'
+
+export default {
+  namespaced: true,
+  getters,
+  mutations,
+  actions,
+  state
+}
--- a/src/store/module-example/mutations.js
+++ b/src/store/module-example/mutations.js
@ -0,0 +1,2 @@
+export function someMutation (/* state */) {
+}
--- a/src/store/module-example/state.js
+++ b/src/store/module-example/state.js
@ -0,0 +1,5 @@
+export default function () {
+  return {
+    //
+  }
+}
--- a/src/store/store-flag.d.ts
+++ b/src/store/store-flag.d.ts
@ -0,0 +1,9 @@
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    store: true;
+  }
+}
--- a/src/store/store-tasks.js
+++ b/src/store/store-tasks.js
@ -0,0 +1,70 @@
+import Vue from 'vue'
+import { uid } from 'quasar'
+
+const state = {
+  tasks: {
+    /*
+    ID1: {
+      name: 'Go to shop',
+      completed: false,
+      dueDate: '2021/03/05',
+      dueTime: '18:30'
+    },
+    ID2: {
+      name: 'Get bananas',
+      completed: true,
+      dueDate: '2021/03/07',
+      dueTime: '14:30'
+    },
+    ID3: {
+      name: 'Get apples',
+      completed: false,
+      dueDate: '2021/03/09',
+      dueTime: '16:30'
+    }
+    */
+  }
+}
+
+const mutations = {
+  updateTask (state, payload) {
+    Object.assign(state.tasks[payload.id], payload.updates)
+  },
+  deleteTask (state, id) {
+    Vue.delete(state.tasks, id)
+  },
+  addTask (state, payload) {
+    Vue.set(state.tasks, payload.id, payload.task)
+  }
+}
+
+const actions = {
+  updateTask ({ commit }, payload) {
+    commit('updateTask', payload)
+  },
+  deleteTask ({ commit }, id) {
+    commit('deleteTask', id)
+  },
+  addTask ({ commit }, task) {
+    const taskId = uid()
+    const payload = {
+      id: taskId,
+      task: task
+    }
+    commit('addTask', payload)
+  }
+}
+
+const getters = {
+  tasks: (state) => {
+    return state.tasks
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}