Initial commit of code

Add README and associated documentation Add client code with views and vue components Add store to fetch lists and shopping lists Add initial styles for global components and vue components
JFusco · Jul 22, 2017 · 2a73466 · 2a73466
1 parent 404f35e
commit 2a73466
Show file tree

Hide file tree

Showing 40 changed files with 12,068 additions and 1 deletion.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,11 @@
+{
+  "presets": [
+  "stage-0",
+  ["env", {
+      "targets": {
+        "browsers": ["> 5%", "ie >= 11"]
+      },
+      "debug": true
+    }]
+  ]
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,16 @@
+# This file is for unifying the coding style for different editors and IDEs.
+
+# No .editorconfig files above the root directory
+root = true
+
+# All files unicode
+[*]
+charset = utf-8
+
+# Main styles for our files
+[*]
+indent_style = space
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_size = 2
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,175 @@
+{
+	"parser": "vue-eslint-parser",
+	"parserOptions": {
+		"parser": "babel-eslint",
+		"sourceType": "module",
+		"allowImportExportEverywhere": false
+	},
+	"rules": {
+		"eqeqeq": [
+			2,
+			"allow-null"
+		],
+		"no-extra-semi": 2,
+		"semi": [
+			0,
+			"never"
+		],
+		"no-cond-assign": 2,
+		"accessor-pairs": 2,
+		"no-with": 2,
+		"no-sparse-arrays": 2,
+		"vars-on-top": 2,
+		"no-void": 2,
+		"no-undef": 2,
+		"no-caller": 2,
+		"no-new": 2,
+		"yoda": 2,
+		"no-whitespace-before-property": 2,
+		"no-inner-declarations": 2,
+		"no-ex-assign": 2,
+		"no-else-return": 2,
+		"no-dupe-keys": 2,
+		"constructor-super": 2,
+		"no-extra-boolean-cast": 2,
+		"no-obj-calls": 2,
+		"no-empty": 2,
+		"semi-spacing": [
+			"error",
+			{
+				"before": false,
+				"after": true
+			}
+		],
+		"keyword-spacing": [
+			"error",
+			{
+				"overrides": {
+					"if": {
+						"after": true
+					},
+					"else": {
+						"before": true,
+						"after": true
+					},
+					"for": {
+						"after": false
+					},
+					"while": {
+						"after": false
+					},
+					"function": {
+						"after": true
+					}
+				}
+			}
+		],
+		"space-before-function-paren": [
+			"error",
+			{
+				"anonymous": "never",
+				"named": "never"
+			}
+		],
+		"comma-dangle": [
+			2,
+			"never"
+		],
+		"comma-style": [
+			2,
+			"last"
+		],
+		"comma-spacing": [
+			"error",
+			{
+				"before": false,
+				"after": true
+			}
+		],
+		"quotes": [
+			2,
+			"single",
+			"avoid-escape"
+		],
+		"no-trailing-spaces": 2,
+		"no-lonely-if": 0,
+		"eol-last": 2,
+		"no-nested-ternary": 2,
+		"space-in-parens": [
+			2,
+			"never"
+		],
+		"brace-style": [
+			2,
+			"1tbs",
+			{
+				"allowSingleLine": true
+			}
+		],
+		"object-curly-spacing": [
+			2,
+			"always",
+			{
+				"objectsInObjects": true,
+				"arraysInObjects": true
+			}
+		],
+		"computed-property-spacing": [
+			"error",
+			"never"
+		],
+		"block-spacing": [
+			"error",
+			"always"
+		],
+		"one-var": [
+			2,
+			{
+				"let": "always",
+				"const": "never"
+			}
+		],
+		"no-spaced-func": 2,
+		"spaced-comment": 0,
+		"quote-props": [
+			2,
+			"as-needed",
+			{
+				"keywords": true
+			}
+		],
+		"linebreak-style": [
+			"error",
+			"unix"
+		],
+		"guard-for-in": 2,
+		"prefer-const": 2,
+		"no-var": 2,
+		"prefer-arrow-callback": 2,
+		"no-const-assign": 2,
+		"arrow-body-style": [
+			2,
+			"always"
+		],
+		"arrow-parens": [
+			2,
+			"as-needed"
+		],
+		"arrow-spacing": [
+			2,
+			{
+				"before": true,
+				"after": true
+			}
+		]
+	},
+	"globals": {
+		"console": true,
+		"alert": true,
+		"document": true,
+		"window": true,
+		"setTimeout": true,
+		"setInterval": true,
+		"clearTimeout": true
+	}
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/.idea
+/node_modules
diff --git a/README.md b/README.md
@@ -1,2 +1,31 @@
 # vue-shopping-list
-A shopping list made with Vue
+
+![npm][npm-version-image]
+
+This repository was created to demonstrate a mobile shopping list application made in Vue, Vuex, Vue Router and some custom Animate.css stuff :) ... The plan is to use Node/Express and Web Sockets using "ws" or "socket.io" to get some real time feedback when adding or crossing off items in a grocery list. Currently the application is hitting Apiary until I get Node up and running with Mongo.
+
+## Requirements
+The following tools are required to get this running.
+
+### Dev tools
+* [Node](https://nodejs.org/en/) `>=7.7.0 <=8.1.x` *~NPM will install automatically*
+* NPM `~5.3.x`
+
+## Installation
+### Install Node
+Visit [here](https://nodejs.org/en/) - download and install the latest, stable version.
+This will install `npm` automatically.
+
+### Install dependencies
+`cd` into the root of the project and run this command
+```sh
+$ npm install
+```
+
+### Run project
+```sh
+$ npm start
+```
+**Your primary browser will automatically open at localhost:8080**
+
+[npm-version-image]: https://img.shields.io/npm/v/npm.svg?maxAge=2592000
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+  <title>Vue shopping list</title>
+
+  <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet">
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+</html>
diff --git a/client/js/App.vue b/client/js/App.vue
@@ -0,0 +1,60 @@
+<template>
+  <div role="main">
+    <transition :name="transitionName" v-on:after-enter="afterEnter">
+      <router-view></router-view>
+    </transition>
+  </div>
+</template>
+
+<script type="text/babel">
+  import Vue from 'vue'
+  import MastHead from './components/global/Header'
+
+  export default {
+    components: {
+      MastHead
+    },
+
+    data() {
+      return {
+        transitionName: 'slideLeft'
+      };
+    },
+
+    watch: {
+      '$route'(to, from) {
+        const toDepth = to.path.split('/').filter(el => { return el.length !== 0 })
+        const fromDepth = from.path.split('/').filter(el => { return el.length !== 0 })
+
+        this.transitionName = toDepth < fromDepth ? 'slideRight' : 'slideLeft'
+      }
+    },
+
+    methods: {
+      afterEnter(el){
+        //console.log('hey', el);
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import
+  "~scss/normalize",
+  "~scss/variables",
+  "~scss/mixins",
+  "~scss/typography",
+  "~scss/animations",
+  "~scss/components/page",
+  "~scss/components/link",
+  "~scss/components/button";
+
+  html,
+  body {
+    font-size: $main-font-size;
+    font-family: $main-font;
+    color: $main-font-color;
+    box-sizing: border-box;
+    background: #F7FAF7;
+  }
+</style>
diff --git a/client/js/components/global/BackButton.vue b/client/js/components/global/BackButton.vue
@@ -0,0 +1,36 @@
+<template>
+  <button v-on:click="onGoBack" class="btn btn--clear">
+    <i class="fa fa-chevron-left" aria-hidden="true"></i> {{title}}
+  </button>
+</template>
+
+<script type="text/babel">
+  import Vue from 'vue'
+
+  export default {
+    name: 'back-button',
+    props: {
+      title: {
+        type: String,
+        'default': 'Back'
+      }
+    },
+
+    methods: {
+      onGoBack() {
+        this.$router.go(-1);
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+	@import '~scss/mixins';
+
+  .fa {
+    @include font-size(18px);
+
+    position: relative;
+    top: 1px;
+  }
+</style>