restructured project

client/.browserslintrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

client/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ["plugin:vue/essential", "@vue/prettier"],
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+  },
+  parserOptions: {
+    parser: "babel-eslint"
+  }
+};

client/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

client/README.md

@@ -0,0 +1,166 @@
+# 8base + VueJS Todos App
+
+Hey there! Thanks for checking out this project. It's intended to be an epic starting point when building VueJS + 8base apps. Really quickly, lets break down what that means.
+
+#### VueJS
+[Vue](https://vuejs.org/v2/guide/) is a progressive framework for building killer user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
+
+#### 8base
+[8base](https://docs.8base.com/) is a GraphQL API and serverless backend that lets developers quickly build world-class applications. It's fully extensible using Javascript, and handles things like database setup (initialization, migrations, management), roles and permissions, user authentication, and serverless deployment like a pro! The core feature set of 8base allows any developer to set-up fully scalable back-end infrastructure for their applications.
+
+### ToDo App Overview
+There are several awesome things that have been done in this application to help you get started. Let's take a look at them:
+
+1. **User Authentication**
+The app enables sign-in and sign-up functionality using 8base auth (auth0 under the hood). Plus, it gives an example of enforcing authentication at the router level using guards.
+
+The relevant files are:
+* `src/utils/auth.js` - Configure, initialize, and export the 8base auth client.
+* `src/store/modules/session.js` - Vuex manager for auth related state.
+* `src/App.vue` - View providing sign-in / sign-out buttons.
+* `src/router.js` - Example of auth checking router guard.
+
+2. **GraphQL API**
+The app utilizes an 8base workspace for accessing and updating it's data using the GraphQL API. The code for this is neatly wrapped into two modules that get used mainly within the Vuex modules. However, one example also exists in the "Profile" page of querying the API.
+
+The relevant files are:
+* `src/utils/api.js` - Configure apollo client for error handling, auth, and the workspace endpoint
+* `src/utils/graphql.js` - Build a library of GraphQL queries, mutations, and subscriptions.
+* `src/store/modules/[todo|sessoin].js` - Executes queries against Api using module.
+* `src/views/Profile.vue` - Runs query in component (outside state manager)
+
+## Steps taken to initialize the App
+
+1. Install vue CLI.
+```sh
+npm install -g @vue/cli
+```
+
+2. Create a new project
+```sh
+vue create vuejs-todos-app
+```
+
+3. Select manual configuration.
+```sh
+Vue CLI v3.10.0
+? Please pick a preset: (Use arrow keys)
+  default (babel, eslint)
+> Manually select features
+```
+
+4. Select Babel, PWA Support, Router, Vuex, and Linter as project features.
+```sh
+? Check the features needed for your project:
+ ◉ Babel
+ ◯ TypeScript
+❯◉ Progressive Web App (PWA) Support
+ ◉ Router
+ ◉ Vuex
+ ◯ CSS Pre-processors
+ ◉ Linter / Formatter
+ ◯ Unit Testing
+ ◯ E2E Testing
+```
+
+5. Select `history mode` for router.
+```sh
+? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
+```
+
+6. ESLint + Prettier for linter config.
+```sh
+? Pick a linter / formatter config:
+  ESLint with error prevention only
+  ESLint + Airbnb config
+  ESLint + Standard config
+❯ ESLint + Prettier
+```
+
+7. Lint on save for real-time enforcement.
+```sh
+? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
+❯◉ Lint on save
+ ◯ Lint and fix on commit
+```
+
+8. Use dedicated config files.
+```sh
+? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
+❯ In dedicated config files
+  In package.json
+```
+
+9. Save this preset for later!
+```sh
+? Save this as a preset for future projects? Yes
+? Save preset as: VueJs-8base-Preset
+```
+
+## Installing Dependencies
+Feel free to use Yarn or NPM as your prefered package manager.
+
+1. Application dependencies
+```sh
+npm install --save @8base/web-auth0-auth-client graphql-tag apollo-cache-inmemory apollo-client apollo-link-http
+```
+
+## Management Console Setup
+
+1. Create a workspace.
+2. Go to Settings > Authentication
+3. Create a new Authentication Profile using 8base Auth0
+
+## Create Todos Table
+
+1. Go to Data
+2. Create a new table and name it "Todos"
+3. Add a new field "Description" of type "Text"
+4. Save Field
+5. Add a new field "Status" of type "Switch" 
+6. In Appearence > Format select "Custom"
+7. Add the options "PENDING", "IN PROGRESS" "COMPLETED"
+8. Save Field
+
+## Create Boards Table
+
+1. Create a new table and name it "Boards"
+2. Add a new field "Name" of type "Text"
+3. Save Field
+4. Add a new field "Todos" of type "Table"
+5. In Appearence > Table select the previously created table "Todos"
+6. In Table Relationships select "Allow multiple Todos per Board"
+7. Save Field
+
+## Create Doer Role
+
+1. Go to Settings > Roles
+2. 
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

client/SPECIFICATION.md

@@ -0,0 +1,87 @@
+# Project Specification
+
+The contents of this file specify the baseline expectations that must be met for completing this project.
+
+### Project Name: VueJS Todo's App on 8base
+### Due date: September, 6th 2019
+### Specs:
+
+1. Unstyled - no css framework.
+    1. The purpose of this project is not to create a sleek UI/UX experience. It is simply to provide a boilerplate app that demonstrates best practices when developing on 8base.
+    2. No hours should be logged for custom CSS / design work.
+
+2. Auth system w/ 8Base (Auth0) - login / sign up / logout / expire
+	1. A major focus of this application is centered on authentication flows. Essentially, a production level auth module should be developed - relying on 8base's Auth0 setup.
+	2. The final **auth module should be framework agnostic**, meaning that it is a plain JavaScript object with well documented and logically named methods.
+	3. The VueJS Auth component developed will utilize the JS Auth module to handle the full authentication flow.
+	4. Authentication will start at the router level and integrate with the state Vuex manager.
+
+3. Simple add to do item, mark it as complete, show completed tasks under pending.
+	1. Todo's will be managed using Queries, Mutations, and Subscriptions
+	2. Backend resources will all be built using 8base
+	3. Serverless functions for custom logic requirements will be added to scope if needed.
+
+4. Apollo queries w/ auth token / error handling
+	1. The final **auth module should be framework agnostic**, meaning that it is a plain Javascript object with well documented and logically named methods.
+	2. Appolo GraphQL client will be utilized for the handling of API calls with required tokens and credentials.
+	3. Error handling will be built into the Javascript module with default callbacks for error handling
+
+5. Good readme on start up process - eg. setup 8base w/ these tables, change this callback, edit this, etc. 
+	1. **All modules and components must be documented**. This is crucial for successfull completion of the project.
+	2. File, Class, and Method level documentation should be written, using astrix commenting. 
+	3. Example:
+
+```javascript
+// module.js
+/**
+ * This file contains all the functionality for X 
+ * functionality and gets used by X. 
+ */
+ import x from 'y'
+/**
+ * The Module class is the main class that does all
+ * those amazing things we like classes to do. 
+ */
+ModuleClass {
+	/**
+	 * This method is so great I just had to tell you
+	 * all about the great things it does. 
+	 */
+	instanceMethod () {
+		return 'awesome';
+	}
+}
+
+```
+
+## Schema:
+
+* User:
+	!Managed Table!
+	relations:
+		has_many: boards
+
+* Board:
+	attributes:
+		id: uuid
+		name: text
+	relations:
+		has_many: todos
+		belongs_to: user
+
+* Todo:
+	attributes:
+		id: uuid
+		description: text
+		status: switch 'PENDING', 'IN PROGRESS', 'COMPLETED'
+
+## Flow
+
+1. User opens application and is asked to authenticate if they are not signed in.
+2. Once signed in, the client Queries the API for all lists, each with its Tasks.
+3. The client establishes a Subscription with the API for rendering Todos / Tasks.
+4. Any Create, Update or Delete actions are executed using Mutations.
+5. The clients side Api module accesses all credentials from the auth module
+
+## State Manager
+Let's use this post as a guide for implimenting state magement with GraphQL API: https://markus.oberlehner.net/blog/combining-graphql-and-vuex/

client/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/app"]
+};