Initial commit

2020-05-25 14:55:37 +05:30
commit d4f93a106a
115 changed files with 24977 additions and 0 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -0,0 +1,17 @@
+version: 2.1
+orbs:
+  node: circleci/node@1.1.6
+jobs:
+  build-and-test:
+    executor:
+      name: node/default
+    steps:
+      - checkout
+      - node/with-cache:
+          steps:
+            - run: npm install
+            - run: npm test
+workflows:
+    build-and-test:
+      jobs:
+        - build-and-test
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -0,0 +1,31 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ development ]
+  pull_request:
+    branches: [ development ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test
+      env:
+        CI: true
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
--- a/201
+++ b/201
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,3 @@
+# subset_trello
+
+Application demonstrating a subset of TODO manager features.
--- a/build/favicon.ico
+++ b/build/favicon.ico
--- a/build/logo192.png
+++ b/build/logo192.png
--- a/build/logo512.png
+++ b/build/logo512.png
--- a/build/manifest.json
+++ b/build/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/build/robots.txt
+++ b/build/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/craco.config.js
+++ b/craco.config.js
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,75 @@
+{
+  "name": "subset_trello",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": "http://mohiit1502.github.io/subset_trello",
+  "dependencies": {
+    "@material-ui/core": "4.9.9",
+    "@material-ui/icons": "4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.48",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "bootstrap": "^4.4.1",
+    "craco": "0.0.3",
+    "jquery": "^3.5.0",
+    "lodash": "^4.17.15",
+    "node-sass": "^4.13.1",
+    "npm-run-all": "^4.1.5",
+    "react": "^16.13.1",
+    "react-dnd": "^10.0.2",
+    "react-dnd-html5-backend": "^10.0.2",
+    "react-dom": "^16.13.1",
+    "react-loadable": "^5.5.0",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.4.1",
+    "redux": "^4.0.5",
+    "redux-actions": "^2.6.5",
+    "redux-analytics": "^0.3.1",
+    "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0",
+    "reselect-immutable-helpers": "^1.2.2",
+    "resolve": "^1.16.0",
+    "resolve-url-loader": "^3.1.1",
+    "sass-loader": "8.0.2",
+    "styled-components": "^5.1.0"
+  },
+  "scripts": {
+    "install": "cd server && npm install",
+    "clientstart": "react-scripts start",
+    "serverstart": "cd server && npm start",
+    "start": "npm run clientstart",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "generate": "plop",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-transform-react-jsx": "^7.9.4",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "gh-pages": "^2.2.0",
+    "plop": "^2.6.0",
+    "typescript": "3.3.3"
+  }
+}
--- a/plop-templates/Component/Component.component.scss.hbs
+++ b/plop-templates/Component/Component.component.scss.hbs
@@ -0,0 +1,3 @@
+.c-{{pascalCase name}} {
+  
+}
--- a/plop-templates/Component/Component.jsx.hbs
+++ b/plop-templates/Component/Component.jsx.hbs
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './{{pascalCase name}}.component.scss';
+
+const {{pascalCase name}} = props => {
+  return (
+    <div className='c-{{pascalCase name}}'>
+      In Component {{pascalCase name}}
+    </div>
+  );
+};
+
+{{pascalCase name}}.propTypes = {
+
+};
+
+export default {{pascalCase name}};
--- a/plop-templates/Component/Component.test.js.hbs
+++ b/plop-templates/Component/Component.test.js.hbs
@@ -0,0 +1,8 @@
+import React from 'react';
+import {{pascalCase name}} from './{{pascalCase name}}';
+
+describe('{{pascalCase name}}', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/plop-templates/Component/index.js.hbs
+++ b/plop-templates/Component/index.js.hbs
@@ -0,0 +1,3 @@
+import {{pascalCase name}} from './{{pascalCase name}}.jsx';
+
+export default {{pascalCase name}};
--- a/plop-templates/Page/Page.jsx.hbs
+++ b/plop-templates/Page/Page.jsx.hbs
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './{{pascalCase name}}.module.scss';
+
+const {{pascalCase name}} = props => {
+  return (
+    <div className="c-{{pascalCase name}}">
+      In Page {{pascalCase name}}
+    </div>
+  );
+};
+
+{{pascalCase name}}.propTypes = {
+
+};
+
+export default {{pascalCase name}};
--- a/plop-templates/Page/Page.module.scss.hbs
+++ b/plop-templates/Page/Page.module.scss.hbs
@@ -0,0 +1,3 @@
+.c-{{pascalCase name}} {
+  
+}
--- a/plop-templates/Page/Page.test.js.hbs
+++ b/plop-templates/Page/Page.test.js.hbs
@@ -0,0 +1,8 @@
+import React from 'react';
+import {{pascalCase name}} from './{{pascalCase name}}';
+
+describe('{{pascalCase name}}', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/plop-templates/Page/actions.js.hbs
+++ b/plop-templates/Page/actions.js.hbs
@@ -0,0 +1,16 @@
+export const UPDATE_FORM_VALUES = 'UPDATE_{{constantCase name}}_FORM_VALUES'
+export const UPDATE_FORM_ERRORS = 'UPDATE_{{constantCase name}}_FORM_ERRORS'
+
+export const updateFormValues = (formValues) => {
+    return {
+        type: UPDATE_FORM_VALUES,
+        payload: formValues
+    }
+}
+
+export const updateFormErrors = (formErrors) => {
+    return {
+        type: UPDATE_FORM_ERRORS,
+        payload: formErrors
+    }
+}
--- a/plop-templates/Page/index.js.hbs
+++ b/plop-templates/Page/index.js.hbs
@@ -0,0 +1,3 @@
+import {{pascalCase name}} from './{{pascalCase name}}.jsx';
+
+export default {{pascalCase name}};
--- a/plop-templates/Page/reducer.js.hbs
+++ b/plop-templates/Page/reducer.js.hbs
@@ -0,0 +1,16 @@
+import Immutable from 'immutable'
+import {UPDATE_FORM_ERRORS, UPDATE_FORM_VALUES} from './actions'
+
+const initialState = Immutable.Map()
+
+const reducer = (state = initialState, action) => {
+    switch (action.type) {
+        case UPDATE_FORM_ERRORS:
+        case UPDATE_FORM_VALUES:
+            return state.mergeDeep(action.payload)
+        default:
+            return state
+    }
+}
+
+export default reducer
--- a/plop-templates/Page/selectors.js.hbs
+++ b/plop-templates/Page/selectors.js.hbs
@@ -0,0 +1,14 @@
+import {createSelector} from 'reselect'
+import {createGetSelector} from 'reselect-immutable-helpers'
+
+const getData = ({data}) => data
+
+export const get{{pascalCase name}} = createSelector(
+    getData,
+    (dataState) => {
+        return dataState.pages.{{camelCase name}}
+    }
+)
+
+export const getFormErrors = createGetSelector(get{{pascalCase name}}, 'formErrors')
+export const getFormValues = createGetSelector(get{{pascalCase name}}, 'formValues')
--- a/plop-templates/hook.js.hbs
+++ b/plop-templates/hook.js.hbs
@@ -0,0 +1,5 @@
+const {{camelCase name}} = () => {
+
+};
+
+export default {{camelCase name}};
--- a/plop-templates/injectable-index.js.hbs
+++ b/plop-templates/injectable-index.js.hbs
@@ -0,0 +1,5 @@
+/* PLOP_INJECT_IMPORT */
+
+export {
+  /* PLOP_INJECT_EXPORT */
+}
--- a/plop-templates/service.js.hbs
+++ b/plop-templates/service.js.hbs
@@ -0,0 +1,17 @@
+const create{{pascalCase name}} = () => {
+  let examplePrivateVariable = 0
+
+  return {
+    getExamplePrivateVariable: () => {
+      return examplePrivateVariable
+    },
+    setExamplePrivateVariable: (n) => {
+      examplePrivateVariable = n
+    }
+  }
+};
+
+const singleton = create{{pascalCase name}}();
+Object.freeze(singleton);
+
+export default singleton;
--- a/plopfile.js
+++ b/plopfile.js
@@ -0,0 +1,210 @@
+module.exports = plop => {
+    plop.setGenerator('component', {
+      description: 'Create a component',
+      // User input prompts provided as arguments to the template
+      prompts: [
+        {
+          // Raw text input
+          type: 'input',
+          // Variable name for this input
+          name: 'name',
+          // Prompt to display on command line
+          message: 'What is your component name?'
+        },
+      ],
+      actions: [
+        {
+          type: 'add',
+          // Plop will create directories for us if they do not exist
+          // so it's okay to add files in nested locations.
+          path: 'src/app/components/{{pascalCase name}}/{{pascalCase name}}.jsx',
+          templateFile:
+            'plop-templates/Component/Component.jsx.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/app/components/{{pascalCase name}}/{{pascalCase name}}.test.js',
+          templateFile:
+            'plop-templates/Component/Component.test.js.hbs',
+        },
+        {
+          type: 'add',
+          path:
+            'src/app/components/{{pascalCase name}}/{{pascalCase name}}.component.scss',
+          templateFile:
+            'plop-templates/Component/Component.component.scss.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/app/components/{{pascalCase name}}/index.js',
+          templateFile: 'plop-templates/Component/index.js.hbs',
+        },
+        {
+          // Adds an index.js file if it does not already exist
+          type: 'add',
+          path: 'src/app/components/index.js',
+          templateFile: 'plop-templates/injectable-index.js.hbs',
+          // If index.js already exists in this location, skip this action
+          skipIfExists: true,
+        },
+        {
+          // Action type 'append' injects a template into an existing file
+          type: 'append',
+          path: 'src/app/components/index.js',
+          // Pattern tells plop where in the file to inject the template
+          pattern: `/* PLOP_INJECT_IMPORT */`,
+          template: `import {{pascalCase name}} from './{{pascalCase name}}';`,
+        },
+        {
+          type: 'append',
+          path: 'src/app/components/index.js',
+          pattern: `/* PLOP_INJECT_EXPORT */`,
+          template: `\t{{pascalCase name}},`,
+        },
+      ],
+    });
+    plop.setGenerator('page', {
+      description: 'Create a page',
+      prompts: [
+        {
+          type: 'input',
+          name: 'name',
+          message: 'What is your page name?',
+        },
+      ],
+      actions: [
+        {
+          type: 'add',
+          path: 'src/app/pages/{{pascalCase name}}/{{pascalCase name}}.jsx',
+          templateFile:
+            'plop-templates/Page/Page.jsx.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/app/pages/{{pascalCase name}}/{{pascalCase name}}.test.js',
+          templateFile:
+            'plop-templates/Page/Page.test.js.hbs',
+        },
+        {
+          type: 'add',
+          path:
+            'src/app/pages/{{pascalCase name}}/{{pascalCase name}}.module.scss',
+          templateFile:
+            'plop-templates/Page/Page.module.scss.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/app/pages/{{pascalCase name}}/reducer.js',
+          templateFile: 'plop-templates/Page/reducer.js.hbs',
+          skipIfExists: true,
+        },
+        {
+          type: 'add',
+          path: 'src/app/pages/{{pascalCase name}}/selectors.js',
+          templateFile: 'plop-templates/Page/selectors.js.hbs',
+          skipIfExists: true,
+        },
+        {
+          type: 'add',
+          path: 'src/app/pages/{{pascalCase name}}/actions.js',
+          templateFile: 'plop-templates/Page/actions.js.hbs',
+          skipIfExists: true,
+        },
+        {
+          type: 'add',
+          path: 'src/app/pages/{{pascalCase name}}/index.js',
+          templateFile: 'plop-templates/Page/index.js.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/app/pages/index.js',
+          templateFile: 'plop-templates/injectable-index.js.hbs',
+          skipIfExists: true,
+        },
+        {
+          type: 'append',
+          path: 'src/app/pages/index.js',
+          pattern: `/* PLOP_INJECT_IMPORT */`,
+          template: `import {{pascalCase name}} from './{{pascalCase name}}';`,
+        },
+        {
+          type: 'append',
+          path: 'src/app/pages/index.js',
+          pattern: `/* PLOP_INJECT_EXPORT */`,
+          template: `\t{{pascalCase name}},`,
+        },
+      ],
+    })
+  
+    plop.setGenerator('service', {
+      description: 'Create service',
+      prompts: [
+        {
+          type: 'input',
+          name: 'name',
+          message: 'What is your service name?',
+        },
+      ],
+      actions: [
+        {
+          type: 'add',
+          path: 'src/services/{{camelCase name}}.js',
+          templateFile: 'plop-templates/service.js.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/services/index.js',
+          templateFile: 'plop-templates/injectable-index.js.hbs',
+          skipIfExists: true,
+        },
+        {
+          type: 'append',
+          path: 'src/services/index.js',
+          pattern: `/* PLOP_INJECT_IMPORT */`,
+          template: `import {{camelCase name}} from './{{camelCase name}}';`,
+        },
+        {
+          type: 'append',
+          path: 'src/services/index.js',
+          pattern: `/* PLOP_INJECT_EXPORT */`,
+          template: `\t{{camelCase name}},`,
+        }
+      ],
+    })
+  
+    plop.setGenerator('hook', {
+      description: 'Create a custom react hook',
+      prompts: [
+        {
+          type: 'input',
+          name: 'name',
+          message: 'What is your hook name?',
+        },
+      ],
+      actions: [
+        {
+          type: 'add',
+          path: 'src/hooks/{{camelCase name}}.js',
+          templateFile: 'plop-templates/hook.js.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/hooks/index.js',
+          templateFile: 'plop-templates/injectable-index.js.hbs',
+          skipIfExists: true,
+        },
+        {
+          type: 'append',
+          path: 'src/hooks/index.js',
+          pattern: `/* PLOP_INJECT_IMPORT */`,
+          template: `import {{camelCase name}} from './{{camelCase name}}';`,
+        },
+        {
+          type: 'append',
+          path: 'src/hooks/index.js',
+          pattern: `/* PLOP_INJECT_EXPORT */`,
+          template: `\t{{camelCase name}},`,
+        }
+      ],
+    })
+  };
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/server/Procfile
+++ b/server/Procfile
@@ -0,0 +1 @@
+web: node .
--- a/server/data/todos.json
+++ b/server/data/todos.json
@@ -0,0 +1,84 @@
+{
+    "todos": {
+        "lists": {
+            "pending": {
+                "displayName": "Pending",
+                "id": "list_pending",
+                "cards": [
+                    {
+                        "title": "TODO 4",
+                        "description": "Description 4",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 7",
+                        "description": "Description 7",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 8",
+                        "description": "Description 8",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 10",
+                        "description": "Description 10",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 11",
+                        "description": "Description 11",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 13",
+                        "description": "Description 13",
+                        "activity": []
+                    }
+                ]
+            },
+            "inprogress": {
+                "displayName": "In Progress",
+                "id": "list_inprogress",
+                "cards": [
+                    {
+                        "title": "TODO 1",
+                        "description": "Description 1",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 2",
+                        "description": "Description 2",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 3",
+                        "description": "Description 3",
+                        "activity": []
+                    }
+                ]
+            },
+            "completed": {
+                "displayName": "Completed",
+                "id": "list_completed",
+                "cards": [
+                    {
+                        "title": "TODO 6",
+                        "description": "Description 1",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 9",
+                        "description": "Description 2",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 5",
+                        "description": "Description 3",
+                        "activity": []
+                    }
+                ]
+            }
+        }
+    }
+}
--- a/server/data/todos_old.json
+++ b/server/data/todos_old.json
@@ -0,0 +1,145 @@
+[
+	{
+		"img_url": "https://guesseu.scene7.com/is/image/GuessEU/M63H24W7JF0-L302-ALTGHOST?wid=1500&fmt=jpeg&qlt=80&op_sharpen=0&op_usm=1.0,1.0,5,0&iccEmbed=0",
+        "name": "CHECK PRINT SHIRT - 2",
+        "id": "product-111",
+        "category": "Clothing",
+		"price": {
+            "display": 900,
+            "actual": 324
+        },
+        "discount": 30
+    },
+    {
+		"img_url": "https://guesseu.scene7.com/is/image/GuessEU/AW6308VIS03-SAP?wid=700&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;op_usm=1.0,1.0,5,0&amp;iccEmbed=0",
+        "name": "'70s RETRO GLAM KEFIAH - 3",
+        "id": "product-112",
+        "category": "Clothing",
+		"price": {
+            "display": 2084,
+            "actual": 324
+        },
+        "discount": 24
+	},
+	{
+		"img_url": "https://guesseu.scene7.com/is/image/GuessEU/FLGLO4FAL12-BEIBR?wid=700&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;op_usm=1.0,1.0,5,0&amp;iccEmbed=0",
+        "name": "GLORIA HIGH LOGO SNEAKER - 1",
+        "id": "product-113",
+        "category": "Footwear",
+		"price": {
+            "display": 650,
+            "actual": 324
+        },
+        "discount": 64
+    },
+    {
+		"img_url": "https://guesseu.scene7.com/is/image/GuessEU/AW6308VIS03-SAP?wid=700&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;op_usm=1.0,1.0,5,0&amp;iccEmbed=0",
+        "name": "'70s RETRO GLAM KEFIAH - 4",
+        "id": "product-114",
+        "category": "Clothing",
+		"price": {
+            "display": 3284,
+            "actual": 324
+        },
+        "discount": 80
+	},
+	{
+		"img_url": "https://guesseu.scene7.com/is/image/GuessEU/HWVG6216060-TAN?wid=700&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;op_usm=1.0,1.0,5,0&amp;iccEmbed=0",
+        "name": "CATE RIGID BAG - 1",
+        "id": "product-115",
+        "category": "Accessories",
+		"price": {
+            "display": 1838,
+            "actual": 324
+        },
+        "discount": 45
+    },
+    {
+		"img_url": "https://guesseu.scene7.com/is/image/GuessEU/AW6308VIS03-SAP?wid=700&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;op_usm=1.0,1.0,5,0&amp;iccEmbed=0",
+        "name": "'70s RETRO GLAM KEFIAH - 6",
+        "id": "product-116",
+        "category": "Clothing",
+		"price": {
+            "display": 8884,
+            "actual": 324
+        },
+        "discount": 38
+	},
+	{
+		"img_url": "http://guesseu.scene7.com/is/image/GuessEU/WC0001FMSWC-G5?wid=520&fmt=jpeg&qlt=80&op_sharpen=0&op_usm=1.0,1.0,5,0&iccEmbed=0",
+        "name": "GUESS CONNECT WATCH - 1",
+        "id": "product-117",
+        "category": "Electronics",
+		"price": {
+            "display": 290,
+            "actual": 324
+        },
+        "discount": 22
+	},
+	{
+		"img_url": "https://guesseu.scene7.com/is/image/GuessEU/AW6308VIS03-SAP?wid=700&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;op_usm=1.0,1.0,5,0&amp;iccEmbed=0",
+        "name": "'70s RETRO GLAM KEFIAH - 1",
+        "id": "product-118",
+        "category": "Clothing",
+		"price": {
+            "display": 1284,
+            "actual": 324
+        },
+        "discount": 52
+	},
+    {
+		"img_url": "https://guesseu.scene7.com/is/image/GuessEU/M63H24W7JF0-L302-ALTGHOST?wid=1500&fmt=jpeg&qlt=80&op_sharpen=0&op_usm=1.0,1.0,5,0&iccEmbed=0",
+        "name": "CHECK PRINT SHIRT - 1",
+        "id": "product-119",
+        "category": "Clothing",
+		"price": {
+            "display": 900,
+            "actual": 324
+        },
+        "discount": 19
+    },
+	{
+		"img_url": "https://guesseu.scene7.com/is/image/GuessEU/AW6308VIS03-SAP?wid=700&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;op_usm=1.0,1.0,5,0&amp;iccEmbed=0",
+        "name": "'70s RETRO GLAM KEFIAH - 2",
+        "id": "product-120",
+        "category": "Clothing",
+		"price": {
+            "display": 584,
+            "actual": 324
+        },
+        "discount": 32
+	},
+	{
+		"img_url": "https://guesseu.scene7.com/is/image/GuessEU/AW6308VIS03-SAP?wid=700&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;op_usm=1.0,1.0,5,0&amp;iccEmbed=0",
+        "name": "'70s RETRO GLAM KEFIAH - 5",
+        "id": "product-121",
+        "category": "Clothing",
+		"price": {
+            "display": 984,
+            "actual": 324
+        },
+        "discount": 60
+	},
+    {
+		"img_url": "https://guesseu.scene7.com/is/image/GuessEU/FLGLO4FAL12-BEIBR?wid=700&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;op_usm=1.0,1.0,5,0&amp;iccEmbed=0",
+        "name": "GLORIA HIGH LOGO SNEAKER - 1",
+        "id": "product-122",
+        "category": "Footwear",
+		"price": {
+            "display": 6650,
+            "actual": 324
+        },
+        "discount": 5
+    },
+    {
+		"img_url": "https://guesseu.scene7.com/is/image/GuessEU/HWVG6216060-TAN?wid=700&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;op_usm=1.0,1.0,5,0&amp;iccEmbed=0",
+        "name": "CATE RIGID BAG - 2",
+        "id": "product-123",
+        "category": "Accessories",
+		"price": {
+            "display": 838,
+            "actual": 324
+        },
+        "discount": 20
+	}
+]
--- a/server/data/todos_save.json
+++ b/server/data/todos_save.json
@@ -0,0 +1,116 @@
+{
+    "todos": {
+        "lists": {
+            "pending": {
+                "displayName": "Pending",
+                "id": "list_pending",
+                "cards": [
+                    {
+                        "title": "TODO 4",
+                        "description": "Description 4",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 7",
+                        "description": "Description 7",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 8",
+                        "description": "Description 8",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 10",
+                        "description": "Description 10",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 11",
+                        "description": "Description 11",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 13",
+                        "description": "Description 13",
+                        "activity": []
+                    }
+                ]
+            },
+            "inprogress": {
+                "displayName": "In Progress",
+                "id": "list_inprogress",
+                "cards": [
+                    {
+                        "title": "TODO 1",
+                        "description": "Description 1",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 2",
+                        "description": "Description 2",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 3",
+                        "description": "Description 3",
+                        "activity": []
+                    }
+                ]
+            },
+            "completed": {
+                "displayName": "Completed",
+                "id": "list_completed",
+                "cards": [
+                    {
+                        "title": "TODO 6",
+                        "description": "Description 1",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 9",
+                        "description": "Description 2",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 5",
+                        "description": "Description 3",
+                        "activity": []
+                    }
+                ]
+            },
+            "list_inprogress": [
+                {
+                    "title": "TODO 13",
+                    "description": "Description 13",
+                    "activity": [],
+                    "id": "c-Card-list_inprogress-0"
+                },
+                {
+                    "title": "TODO 11",
+                    "description": "Description 11",
+                    "activity": [],
+                    "id": "c-Card-list_inprogress-1"
+                },
+                {
+                    "title": "TODO 8",
+                    "description": "Description 8",
+                    "activity": [],
+                    "id": "c-Card-list_inprogress-2"
+                },
+                {
+                    "title": "TODO 1",
+                    "description": "Description 1",
+                    "activity": [],
+                    "id": "c-Card-list_inprogress-3"
+                },
+                {
+                    "title": "TODO 5",
+                    "description": "Description 3",
+                    "activity": [],
+                    "id": "c-Card-list_inprogress-4"
+                }
+            ]
+        }
+    }
+}
--- a/server/index.js
+++ b/server/index.js
@@ -0,0 +1,45 @@
+const fs = require('fs');
+const express = require('express');
+const bodyParser = require('body-parser');
+const cors = require('cors')
+
+var corsOptions = {origin: '*', optionsSuccessStatus: 200,}
+const app = express();
+app.use(cors(corsOptions))
+app.use(bodyParser.json());
+
+app.get('/todos', (req, res) => {
+    fs.readFile("data/todos.json", "utf8", function(err, data) {
+        if (err) {
+            // console.log(err)
+            return res.json(err);
+        }
+        // console.log(data)
+        return res.json(data)
+    });
+})
+
+app.post('/todos', (req, res) => {
+    fs.readFile("data/todos.json", "utf8", function(err, data) {
+        if (err) {
+            return res.json(err);
+        } else {
+            let mainDataAsJson = JSON.parse(data)
+            const jsonData = req.body
+            const key = Object.keys(jsonData)[0]
+            const dataCards = mainDataAsJson.todos.lists
+            dataCards[key] = jsonData[key]
+            fs.writeFile("data/todos_save.json", JSON.stringify(mainDataAsJson, null, 4), function(err, data) {
+                if (err) {
+                    return res.json(err);
+                }
+                return res.json(jsonData)
+            });
+        }
+    });
+})
+
+
+app.listen(3001, () => {
+    console.log("App running on the port 3001");
+})
--- a/server/package-lock.json
+++ b/server/package-lock.json
--- a/server/package.json
+++ b/server/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "subset_trello_backend",
+  "version": "1.0.0",
+  "description": "Server to save and retrieve TODO lists",
+  "main": "index.js",
+  "scripts": {
+    "start": "node-env-run --exec nodemon | pino-colada",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "mohiit1502",
+  "license": "ISC",
+  "babel": {
+    "presets": [
+      "@babel/env",
+      "@babel/react"
+    ]
+  },
+  "dependencies": {
+    "body-parser": "^1.19.0",
+    "cors": "^2.8.5",
+    "express": "^4.17.1",
+    "dotenv": "^8.2.0",
+    "formidable": "^1.2.1",
+    "mongoose": "^5.7.8",
+    "multer": "^1.4.2",
+    "pino-colada": "^1.4.5",
+    "node-env-run": "^3.0.2",
+    "nodemon": "^1.19.4"
+  }
+}
--- a/src/app/components/AddCardButton/AddCardButton.component.scss
+++ b/src/app/components/AddCardButton/AddCardButton.component.scss
@@ -0,0 +1,9 @@
+.c-AddCardButton {
+  padding: 0.6rem;
+  color: #ccc;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  &:hover {
+      font-size: 1rem;
+  }
+}
--- a/src/app/components/AddCardButton/AddCardButton.jsx
+++ b/src/app/components/AddCardButton/AddCardButton.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Add } from '@material-ui/icons';
+import './AddCardButton.component.scss';
+
+const AddCardButton = props => {
+  const {addhandler} = props;
+  return (
+    <div className='c-AddCardButton' onClick={() => addhandler(true)}>
+      <span className="c-AddListButton__empty-list__add-button"><Add fontSize="small" />Add another list</span>
+    </div>
+  );
+};
+
+AddCardButton.propTypes = {
+
+};
+
+export default AddCardButton;
--- a/src/app/components/AddCardButton/AddCardButton.test.js
+++ b/src/app/components/AddCardButton/AddCardButton.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import AddCardButton from './AddCardButton';
+
+describe('AddCardButton', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/src/app/components/AddCardButton/index.js
+++ b/src/app/components/AddCardButton/index.js
@@ -0,0 +1,3 @@
+import AddCardButton from './AddCardButton.jsx';
+
+export default AddCardButton;
--- a/src/app/components/AddListButton/AddListButton.component.scss
+++ b/src/app/components/AddListButton/AddListButton.component.scss
@@ -0,0 +1,3 @@
+.c-AddListButton {
+  padding: 0.6rem;
+}
--- a/src/app/components/AddListButton/AddListButton.jsx
+++ b/src/app/components/AddListButton/AddListButton.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Add} from '@material-ui/icons';
+import './AddListButton.component.scss';
+
+const AddListButton = props => {
+  const {addhandler} = props
+  return (
+    <div className='c-AddListButton' onClick={() => addhandler(true)}>
+      <span className="c-AddListButton__empty-list__add-button"><Add fontSize="small" />Add another list</span>
+    </div>
+  );
+};
+
+AddListButton.propTypes = {
+  addhandler: PropTypes.func
+};
+
+export default AddListButton;
--- a/src/app/components/AddListButton/AddListButton.test.js
+++ b/src/app/components/AddListButton/AddListButton.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import AddListButton from './AddListButton';
+
+describe('AddListButton', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/src/app/components/AddListButton/index.js
+++ b/src/app/components/AddListButton/index.js
@@ -0,0 +1,3 @@
+import AddListButton from './AddListButton.jsx';
+
+export default AddListButton;
--- a/src/app/components/Aside/Aside.component.scss
+++ b/src/app/components/Aside/Aside.component.scss
@@ -0,0 +1,3 @@
+.c-Aside {
+  
+}
--- a/src/app/components/Aside/Aside.jsx
+++ b/src/app/components/Aside/Aside.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import './Aside.component.scss';
+
+const Aside = props => {
+  return (
+    <div className='c-Aside'>
+      In Component Aside
+    </div>
+  );
+};
+
+Aside.propTypes = {
+
+};
+
+export default Aside;
--- a/src/app/components/Aside/Aside.test.js
+++ b/src/app/components/Aside/Aside.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import Aside from './Aside';
+
+describe('Aside', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/src/app/components/Aside/index.js
+++ b/src/app/components/Aside/index.js
@@ -0,0 +1,3 @@
+import Aside from './Aside.jsx';
+
+export default Aside;
--- a/src/app/components/BoardHeader/BoardHeader.component.scss
+++ b/src/app/components/BoardHeader/BoardHeader.component.scss
@@ -0,0 +1,5 @@
+.c-BoardHeader {
+    header {
+        background-color: rgba(0,0,0,0.3);
+    }
+}
--- a/src/app/components/BoardHeader/BoardHeader.jsx
+++ b/src/app/components/BoardHeader/BoardHeader.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import './BoardHeader.component.scss';
+import BoardTitle from '../BoardTitle';
+
+const BoardHeader = props => {
+  return (
+    <div className='c-BoardHeader'>
+      <BoardTitle title="Test Board" />
+    </div>
+  );
+};
+
+BoardHeader.propTypes = {
+
+};
+
+export default BoardHeader;
--- a/src/app/components/BoardHeader/BoardHeader.test.js
+++ b/src/app/components/BoardHeader/BoardHeader.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import BoardHeader from './BoardHeader';
+
+describe('BoardHeader', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/src/app/components/BoardHeader/index.js
+++ b/src/app/components/BoardHeader/index.js
@@ -0,0 +1,3 @@
+import BoardHeader from './BoardHeader.jsx';
+
+export default BoardHeader;
--- a/src/app/components/BoardTitle/BoardTitle.component.scss
+++ b/src/app/components/BoardTitle/BoardTitle.component.scss
@@ -0,0 +1,10 @@
+.c-BoardTitle {
+  border-radius: 4px;
+//   background-color: rgba(255, 255, 255, 0.3);
+  font-weight: bold;
+  font-size: 1.5rem;
+  // padding: 0.5rem 1rem;
+  line-height: 100%;
+  display: flex;
+  align-items: center;
+}
--- a/src/app/components/BoardTitle/BoardTitle.jsx
+++ b/src/app/components/BoardTitle/BoardTitle.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './BoardTitle.component.scss';
+
+const BoardTitle = props => {
+  return (
+    <div className='c-BoardTitle'>
+      <p>{props.title}</p>
+    </div>
+  );
+};
+
+BoardTitle.propTypes = {
+
+};
+
+export default BoardTitle;
--- a/src/app/components/BoardTitle/BoardTitle.test.js
+++ b/src/app/components/BoardTitle/BoardTitle.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import BoardTitle from './BoardTitle';
+
+describe('BoardTitle', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/src/app/components/BoardTitle/index.js
+++ b/src/app/components/BoardTitle/index.js
@@ -0,0 +1,3 @@
+import BoardTitle from './BoardTitle.jsx';
+
+export default BoardTitle;
--- a/src/app/components/Card/Card.component.scss
+++ b/src/app/components/Card/Card.component.scss
@@ -0,0 +1,50 @@
+.c-Card {
+
+    &.c-Card--modifier {
+        padding: 0.3rem;
+        margin: 1rem 0;
+        background: #eee;
+        color: #333;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: all 0.3s ease-in-out;
+        height: 70px;
+        flex-wrap: wrap;
+        display: flex;
+        align-items: center;
+
+        &.c-AttributeCreator--shadow {
+            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+            transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+            &:hover {
+                box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+            }
+        }
+
+        .c-Card__close-button {
+            margin-left: 0.5rem;
+            color: #666;
+            cursor: pointer;
+            position: absolute;
+            top: 7px;
+            right: 7px;
+
+            &:hover {
+                color: #333;
+            }
+        }
+
+        div {
+            flex-basis: 100%;
+        }
+
+        // p {
+        //     margin-bottom: 0;
+        // }
+
+        // h6, p {
+        //     display: flex;
+        //     align-items: center;
+        // }
+    }
+}
--- a/src/app/components/Card/Card.jsx
+++ b/src/app/components/Card/Card.jsx
@@ -0,0 +1,78 @@
+import React, {useRef} from 'react';
+import PropTypes from 'prop-types';
+import ItemTypes from './../../pages/Home/ItemTypes'
+import {useDrag, useDrop} from 'react-dnd'
+import './Card.component.scss';
+import {Clear} from '@material-ui/icons';
+
+const Card = props => {
+  const ref = useRef(null)
+  const {card, index, listId, moveCard, removeCard} = props
+  const cardId = `c-Card-${listId + "-" + index}`
+  card && (card.id = cardId)
+  const [{isDragging}, drag] = useDrag({
+    item: {type: ItemTypes.CARD, index, card, listId},
+    end(item, monitor) {
+      const dr = monitor.getDropResult();
+      let dropListId;
+      dr && (dropListId = dr.listId)
+      // console.log(item.listId + " " + dropListId);
+      if (monitor.didDrop() && item.listId !== dropListId) {
+        removeCard(index, listId)
+      }
+    },
+		collect: monitor => ({
+      isDragging: !!monitor.isDragging()
+		}),
+  })
+
+  const [, drop] = useDrop({
+    accept: ItemTypes.CARD,
+    hover: (item, monitor) => {
+      if (!ref.current) {
+        return
+      }
+      const dragIndex = item.index
+      const hoverIndex = index
+      // console.log("drag " + dragIndex)
+      // console.log("hover " + hoverIndex)
+      if (dragIndex === hoverIndex) {
+        return
+      }
+      const hoverBoundingRect = ref.current.getBoundingClientRect()
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
+      const clientOffset = monitor.getClientOffset()
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return
+      }
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return
+      }
+      moveCard(dragIndex, hoverIndex)
+      item.index = hoverIndex
+    },
+  })
+  drag(drop(ref))
+  return <div
+    id={cardId}
+    className='c-Card c-Card--modifier c-AttributeCreator--shadow'
+    ref={ref}
+    style={{
+      opacity: isDragging ? 0.5 : 1,
+      cursor: 'move',
+      position: 'relative'
+    }}>
+      <Clear className="c-Card__close-button" fontSize="small" onClick={() => removeCard(index, listId)} />
+      <div style={{marginTop: '10px'}}>{card && card.title}</div>
+      <div>{card && card.description}</div>
+    </div>
+};
+
+Card.propTypes = {
+  card: PropTypes.object,
+  index: PropTypes.number,
+  listId: PropTypes.string
+};
+
+export default Card;
--- a/src/app/components/Card/Card.test.js
+++ b/src/app/components/Card/Card.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import Card from './Card';
+
+describe('Card', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/src/app/components/Card/index.js
+++ b/src/app/components/Card/index.js
@@ -0,0 +1,3 @@
+import Card from './Card.jsx';
+
+export default Card;
--- a/src/app/components/CardContextMenu/CardContextMenu.component.scss
+++ b/src/app/components/CardContextMenu/CardContextMenu.component.scss
@@ -0,0 +1,3 @@
+.c-CardContextMenu {
+  
+}
--- a/src/app/components/CardContextMenu/CardContextMenu.jsx
+++ b/src/app/components/CardContextMenu/CardContextMenu.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './CardContextMenu.component.scss';
+
+const CardContextMenu = props => {
+  return (
+    <div className='c-CardContextMenu'>
+      In Component CardContextMenu
+    </div>
+  );
+};
+
+CardContextMenu.propTypes = {
+
+};
+
+export default CardContextMenu;
--- a/src/app/components/CardContextMenu/CardContextMenu.test.js
+++ b/src/app/components/CardContextMenu/CardContextMenu.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import CardContextMenu from './CardContextMenu';
+
+describe('CardContextMenu', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/src/app/components/CardContextMenu/index.js
+++ b/src/app/components/CardContextMenu/index.js
@@ -0,0 +1,3 @@
+import CardContextMenu from './CardContextMenu.jsx';
+
+export default CardContextMenu;
--- a/src/app/components/CardEditButton/CardEditButton.component.scss
+++ b/src/app/components/CardEditButton/CardEditButton.component.scss
@@ -0,0 +1,3 @@
+.c-CardEditButton {
+  
+}
--- a/src/app/components/CardEditButton/CardEditButton.jsx
+++ b/src/app/components/CardEditButton/CardEditButton.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './CardEditButton.component.scss';
+
+const CardEditButton = props => {
+  return (
+    <div className='c-CardEditButton'>
+      In Component CardEditButton
+    </div>
+  );
+};
+
+CardEditButton.propTypes = {
+
+};
+
+export default CardEditButton;
--- a/src/app/components/CardEditButton/CardEditButton.test.js
+++ b/src/app/components/CardEditButton/CardEditButton.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import CardEditButton from './CardEditButton';
+
+describe('CardEditButton', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/src/app/components/CardEditButton/index.js
+++ b/src/app/components/CardEditButton/index.js
@@ -0,0 +1,3 @@
+import CardEditButton from './CardEditButton.jsx';
+
+export default CardEditButton;
--- a/src/app/components/Header/Header.component.scss
+++ b/src/app/components/Header/Header.component.scss
@@ -0,0 +1,6 @@
+.c-Header {
+  header {
+    background-color: rgba(0,0,0, 0.4);
+    backdrop-filter: blur(3px);
+  }
+}
--- a/src/app/components/Header/Header.jsx
+++ b/src/app/components/Header/Header.jsx
@@ -0,0 +1,267 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {fade, makeStyles} from '@material-ui/core/styles';
+import {AppBar, IconButton, InputBase, Badge, MenuItem, Menu, Toolbar, Typography, useScrollTrigger} from '@material-ui/core'
+import MenuIcon from '@material-ui/icons/Menu';
+import SearchIcon from '@material-ui/icons/Search';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import MailIcon from '@material-ui/icons/Mail';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import MoreIcon from '@material-ui/icons/MoreVert';
+import './Header.component.scss';
+
+const useStyles = makeStyles((theme) => ({
+  grow: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  title: {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
+  },
+  search: {
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: fade(theme.palette.common.white, 0.15),
+    '&:hover': {
+      backgroundColor: fade(theme.palette.common.white, 0.25),
+    },
+    marginRight: theme.spacing(2),
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing(3),
+      width: 'auto',
+    },
+  },
+  searchIcon: {
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inputRoot: {
+    color: 'inherit',
+  },
+  inputInput: {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+      width: '20ch',
+    },
+  },
+  sectionDesktop: {
+    display: 'none',
+    [theme.breakpoints.up('md')]: {
+      display: 'flex',
+    },
+  },
+  sectionMobile: {
+    display: 'flex',
+    [theme.breakpoints.up('md')]: {
+      display: 'none',
+    },
+  },
+}));
+
+const Header = props => {
+  // return (
+  //   <React.Fragment>
+  //     <ElevationScroll {...props}>
+  //       <AppBar>
+  //         <Toolbar>
+  //           <Typography variant="h6">Scroll to Elevate App Bar</Typography>
+  //         </Toolbar>
+  //       </AppBar>
+  //     </ElevationScroll>
+  //     <Toolbar />
+  //   </React.Fragment>
+  // );
+
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
+
+  const isMenuOpen = Boolean(anchorEl);
+  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
+
+  const handleProfileMenuOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMobileMenuClose = () => {
+    setMobileMoreAnchorEl(null);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+    handleMobileMenuClose();
+  };
+
+  const handleMobileMenuOpen = (event) => {
+    setMobileMoreAnchorEl(event.currentTarget);
+  };
+
+  const menuId = 'primary-search-account-menu';
+  const renderMenu = (
+    <Menu
+      anchorEl={anchorEl}
+      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      id={menuId}
+      keepMounted
+      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      open={isMenuOpen}
+      onClose={handleMenuClose}
+    >
+      <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
+      <MenuItem onClick={handleMenuClose}>My account</MenuItem>
+    </Menu>
+  );
+
+  const mobileMenuId = 'primary-search-account-menu-mobile';
+  const renderMobileMenu = (
+    <Menu
+      anchorEl={mobileMoreAnchorEl}
+      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      id={mobileMenuId}
+      keepMounted
+      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      open={isMobileMenuOpen}
+      onClose={handleMobileMenuClose}
+    >
+      <MenuItem>
+        <IconButton aria-label="show 4 new mails" color="inherit">
+          <Badge badgeContent={4} color="secondary">
+            <MailIcon />
+          </Badge>
+        </IconButton>
+        <p>Messages</p>
+      </MenuItem>
+      <MenuItem>
+        <IconButton aria-label="show 11 new notifications" color="inherit">
+          <Badge badgeContent={11} color="secondary">
+            <NotificationsIcon />
+          </Badge>
+        </IconButton>
+        <p>Notifications</p>
+      </MenuItem>
+      <MenuItem onClick={handleProfileMenuOpen}>
+        <IconButton
+          aria-label="account of current user"
+          aria-controls="primary-search-account-menu"
+          aria-haspopup="true"
+          color="inherit"
+        >
+          <AccountCircle />
+        </IconButton>
+        <p>Profile</p>
+      </MenuItem>
+    </Menu>
+  );
+
+  return (
+    <div className={`${classes.grow} c-Header`}>
+      <ElevationScroll>
+        <AppBar>
+          <Toolbar>
+            <IconButton
+              edge="start"
+              className={classes.menuButton}
+              color="inherit"
+              aria-label="open drawer"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography className={classes.title} variant="h6" noWrap>
+              TODO Manager
+            </Typography>
+            <div className={classes.search}>
+              <div className={classes.searchIcon}>
+                <SearchIcon />
+              </div>
+              <InputBase
+                placeholder="Search…"
+                classes={{
+                  root: classes.inputRoot,
+                  input: classes.inputInput,
+                }}
+                inputProps={{ 'aria-label': 'search' }}
+              />
+            </div>
+            <div className={classes.grow} />
+            <div className={classes.sectionDesktop}>
+              <IconButton aria-label="show 4 new mails" color="inherit">
+                <Badge badgeContent={4} color="secondary">
+                  <MailIcon />
+                </Badge>
+              </IconButton>
+              <IconButton aria-label="show 17 new notifications" color="inherit">
+                <Badge badgeContent={17} color="secondary">
+                  <NotificationsIcon />
+                </Badge>
+              </IconButton>
+              <IconButton
+                edge="end"
+                aria-label="account of current user"
+                aria-controls={menuId}
+                aria-haspopup="true"
+                onClick={handleProfileMenuOpen}
+                color="inherit"
+              >
+                <AccountCircle />
+              </IconButton>
+            </div>
+            <div className={classes.sectionMobile}>
+              <IconButton
+                aria-label="show more"
+                aria-controls={mobileMenuId}
+                aria-haspopup="true"
+                onClick={handleMobileMenuOpen}
+                color="inherit"
+              >
+                <MoreIcon />
+              </IconButton>
+            </div>
+          </Toolbar>
+        </AppBar>
+      </ElevationScroll>
+      <Toolbar />
+      {renderMobileMenu}
+      {renderMenu}
+    </div>
+  );
+};
+
+Header.propTypes = {
+
+};
+
+export default Header;
+
+
+function ElevationScroll(props) {
+  const { children, window } = props;
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 0,
+    target: window ? window() : undefined,
+  });
+
+  return React.cloneElement(children, {
+    elevation: trigger ? 4 : 0,
+  });
+}
+
+ElevationScroll.propTypes = {
+  children: PropTypes.element.isRequired,
+};
--- a/src/app/components/Header/Header.test.js
+++ b/src/app/components/Header/Header.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import Header from './Header';
+
+describe('Header', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/src/app/components/Header/index.js
+++ b/src/app/components/Header/index.js
@@ -0,0 +1,3 @@
+import Header from './Header.jsx';
+
+export default Header;
--- a/src/app/components/List/List.component.scss
+++ b/src/app/components/List/List.component.scss
@@ -0,0 +1,99 @@
+.c-List {
+  
+    width: 20%;
+    transition: all 0.3s ease-in-out;
+
+    ::-webkit-scrollbar {
+        width: 10px;          
+    }
+    
+    ::-webkit-scrollbar-thumb {   
+        border-radius: 30px;
+        box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
+    }
+    
+    // ::-webkit-scrollbar-track {     
+    //     // background-color: #fff;
+    //     // background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17);
+    // }
+
+    &:not(:first-child) {
+        margin-left: 1rem;
+    }
+
+    &:not(:last-child) {
+        margin-right: 1rem;
+    }
+
+    .c-List__container--modifier {
+        transition: all 0.3s ease-in-out;
+        border-radius: 3px;
+        // background: #ccc;
+        border: 1px solid #ccc;
+        backdrop-filter: blur(10px);
+        padding: 0.4rem;
+        color: #333;
+
+        .c-List__title {
+            cursor: pointer;
+            font-weight: bold;
+            font-size: 1rem;
+            padding: 0.2rem 0.2rem 0;
+            color: #ccc;
+        }
+
+        .c-List__body {
+            // max-height: 400px;
+            margin-right: -10px;
+            overflow-y: scroll;
+            padding: 0 0.2rem;
+        }
+
+        .c-List__empty-list {
+            background: rgba(255, 255, 255, 0.3);
+            cursor: pointer;
+            border-radius: 5px;
+            transition: all 0.3s ease-in-out;
+            padding: 6px;
+            &:hover {
+                background: rgba(255, 255, 255, 0.5);
+            }
+
+            .c-List__empty-list__new-list-textbox, .c-List__empty-list__new-list-button {
+                width: 100%;
+            }
+
+            .c-List__empty-list__new-list-textbox {
+                margin-bottom: 5px;
+                border-radius: 5px;
+                padding: 7px;
+            }
+
+            &.adding {
+                background: #ccc;
+            }
+        }
+
+        .c-List__new-card-form {
+            // background: #ccc;
+            padding: 0.2rem;
+            .c-List__new-card-textbox {
+                border-radius: 5px;
+                width: 100%;
+                background: #eee;
+                min-height: 4.5rem;
+                padding: 0.5rem;
+                font-size: 0.9rem;
+
+                &:focus {
+                    border: none;
+                    outline: none;
+                }
+            }
+            .c-List__new-card-button {
+
+            }
+        }
+    }
+
+}
--- a/src/app/components/List/List.jsx
+++ b/src/app/components/List/List.jsx
@@ -0,0 +1,142 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {useDrop} from 'react-dnd';
+import {Clear} from '@material-ui/icons';
+import {dispatchCardPosition} from './../../pages/Home/actions'
+import {Card, AddCardButton, AddListButton} from '../'
+import ItemTypes from './../../pages/Home/ItemTypes'
+import './List.component.scss';
+
+// document.body.addEventListener('click', (event) => {
+//   if (!(event.target.classList.contains('c-List__empty-list') || event.target.classList.contains('c-List__empty-list__new-list-form'))) {
+//     setAdding(false);
+//   }
+// }, true); 
+/* eslint no-unused-vars: 0 */
+const List = props => {
+  const {index} = props;
+  const {cards, displayName, id} = props.list;
+  const [addingList, setAddingList] = useState(false);
+  const [addingCard, setAddingCard] = useState(false);
+  const [cardsInState, setCardsInState] = useState(cards);
+  const [{isOver}, drop] = useDrop({
+    accept: ItemTypes.CARD,
+    drop: (item, monitor) => {
+      // console.log(id + ' ' + item.listId)
+      if (id !== item.listId) {
+        pushCard(item.card);
+      }
+      return {listId: id}
+    },
+    collect: (monitor) => ({
+      isOver: !!monitor.isOver()
+    }),
+  })
+
+  const pushCard = (card) => {
+    // cardsInState.forEach(card => console.log(card.id))
+    // console.log(card.id)
+    // console.log("in push " + id)
+    const newState = [...cardsInState, card]
+    // console.log(newState)
+    setCardsInState(newState)
+    // console.log(cardsInState)
+    const postBody = {[id]: newState}
+    fetch('http://localhost:3001/todos',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(postBody, null, "  ")
+      })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log('Success:', data);
+        // history.push('/display/forms')
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+      });
+	}
+
+	const removeCard = (index, listId) => {
+    console.log("in remove " + listId)
+    const clone = []
+    Object.assign(clone, cardsInState)
+    clone.splice(index, 1)
+    console.log(clone)
+    setCardsInState(clone)
+	}
+
+	const moveCard = (dragIndex, hoverIndex) => {		
+		const dragCard = cardsInState[dragIndex];
+    const clone = []
+    Object.assign(clone, cardsInState)
+    clone.splice(dragIndex, 1)
+    clone.splice(hoverIndex, 0, dragCard)
+    setCardsInState(clone)
+  }
+
+  const addCardToList = (event) => {
+    const data = {}
+    const form = document.forms['c-List__new-card-form']
+    const inputField = [...form.getElementsByTagName('textarea')][0]
+    // inputFields && inputFields.forEach((inputField) => {
+    //   data[inputField.id] = inputField.value && inputField.value.trim()
+    // })
+
+    const newState = [...cardsInState, {title: "test title", description: inputField.value, activity: []}]
+    setCardsInState(newState)
+    setAddingCard(false)
+    inputField.value = ""
+  }
+  const EmptyList = () => {
+    return <div className="col-3 c-Main__list-col">
+      <div className={`c-List__empty-list${addingList ? " adding" : ""}`}>
+        {addingList ?
+          <form id="c-List__emptyList__add-list" className="c-List__empty-list__new-list-form" style={{height: "100%", width: "100%"}}>
+            <input type="text" className="c-List__empty-list__new-list-textbox" placeholder="Enter list title" />
+            <span className="c-List__empty-list__new-list-button"><button type="button" value="Add">Add List</button></span>
+          </form> :  <AddListButton addhandler={() => setAddingList(true)} />
+        }
+      </div>
+    </div>
+  }
+
+  const cardRenders = cardsInState && cardsInState.map((card, key) => <Card
+        key={key} index={key} listId={id} card={card}
+        removeCard={removeCard} moveCard={moveCard} />)
+    
+  return <div className='c-List' ref={drop}>
+        {
+          cardRenders ? <div className="c-List__container--modifier">
+            <div className="c-List__title">{displayName}</div>
+            <div id={`c-List__body-${index}`} className="c-List__body">{cardRenders}</div>
+            {addingCard ?
+              <form id="c-List__new-card-form" className="c-List__new-card-form" style={{height: "100%", width: "100%"}}>
+                <textarea type="text" className="c-List__new-card-textbox" placeholder="Enter a title for this card" />
+                <span className="c-List__new-card-button"><button type="button" className="btn btn-success" value="Add Card" onClick={addCardToList}>Add Card</button></span>
+                <Clear fontSize="medium" style={{marginLeft: '0.5rem', color: '#ccc', cursor: 'pointer'}} onClick={() => setAddingCard(false)} />
+              </form> : <div className="c-List__add-card-button"><AddCardButton addhandler={setAddingCard} /></div>
+            }
+          </div> :  <EmptyList />
+        }
+      </div>
+};
+
+List.propTypes = {
+  list: PropTypes.object,
+  index: PropTypes.number
+};
+
+const mapDispatchToProps = {
+  dispatchCardPosition
+}
+
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(List);
--- a/src/app/components/List/List.test.js
+++ b/src/app/components/List/List.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import List from './List';
+
+describe('List', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/src/app/components/List/index.js
+++ b/src/app/components/List/index.js
@@ -0,0 +1,3 @@
+import List from './List.jsx';
+
+export default List;
--- a/src/app/components/ListControlButton/ListControlButton.component.scss
+++ b/src/app/components/ListControlButton/ListControlButton.component.scss
@@ -0,0 +1,3 @@
+.c-ListControlButton {
+  
+}
--- a/src/app/components/ListControlButton/ListControlButton.jsx
+++ b/src/app/components/ListControlButton/ListControlButton.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ListControlButton.component.scss';
+
+const ListControlButton = props => {
+  return (
+    <div className='c-ListControlButton'>
+      In Component ListControlButton
+    </div>
+  );
+};
+
+ListControlButton.propTypes = {
+
+};
+
+export default ListControlButton;
--- a/src/app/components/ListControlButton/ListControlButton.test.js
+++ b/src/app/components/ListControlButton/ListControlButton.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ListControlButton from './ListControlButton';
+
+describe('ListControlButton', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/src/app/components/ListControlButton/index.js
+++ b/src/app/components/ListControlButton/index.js
@@ -0,0 +1,3 @@
+import ListControlButton from './ListControlButton.jsx';
+
+export default ListControlButton;
--- a/src/app/components/Main/Main.component.scss
+++ b/src/app/components/Main/Main.component.scss
@@ -0,0 +1,19 @@
+.c-Main {
+    height: 100%;
+    font-size: 0.8rem;
+    &.container {
+        max-width: unset;
+        color: #eee;
+        .c-Main__list-row {
+            height: 100%;
+            .c-Main__list-col {
+                &:first-child {
+                    padding-left: 0;
+                }
+                &:last-child {
+                    padding-right: 0;
+                }
+            }
+        }
+    }
+}
--- a/src/app/components/Main/Main.jsx
+++ b/src/app/components/Main/Main.jsx
@@ -0,0 +1,40 @@
+import React, {useEffect, useState} from 'react';
+// import {DndProvider} from 'react-dnd';
+// import HTML5Backend from 'react-dnd-html5-backend';
+import {BoardHeader, List} from './../';
+import {todos} from './../../config/todos.json';
+import './Main.component.scss';
+
+const Main = props => {
+  const [todoList, setTodoList] = useState({})
+
+  useEffect(() => {
+    fetch('http://localhost:3001/todos')
+      .then(res => res.json())
+      .then(data => {
+        console.log(JSON.parse(data))
+        setTodoList(JSON.parse(data).todoList.lists)
+      })
+      .catch((err) => {
+        console.log("Error: " + err)
+        setTodoList(todos.lists)
+      })
+  }, [])
+  const todoRenders = todoList && Object.keys(todoList).map((todo, key) => <List list={todoList[todo]} index={key + 1} key={key} />)
+  return (
+    <div className="container c-Main">
+      <div className="row">
+        <BoardHeader />
+      </div>
+      <div className="row c-Main__list-row">
+        {todoRenders}
+      </div>
+    </div>
+  );
+};
+
+Main.propTypes = {
+
+};
+
+export default Main;
--- a/src/app/components/Main/Main.test.js
+++ b/src/app/components/Main/Main.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import Main from './Main';
+
+describe('Main', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/src/app/components/Main/index.js
+++ b/src/app/components/Main/index.js
@@ -0,0 +1,3 @@
+import Main from './Main.jsx';
+
+export default Main;
--- a/src/app/components/PageLoader/PageLoader.component.scss
+++ b/src/app/components/PageLoader/PageLoader.component.scss
@@ -0,0 +1,125 @@
+@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
+
+.c-PageLoader {
+	// margin-top: 50%;	
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(0,0,0,0.3);  
+    width: 100%;  
+    height: 100%;  
+    position: fixed;  
+    top:0px;  
+    left:0px;  
+    z-index: 20;
+
+	// .is-animate {
+	// 		background: #ffb200;
+	// 		box-sizing: border-box;
+	// 		font-size: 66px;
+	// 		display: -webkit-inline-box;
+	// 		padding: 14px;
+	// 		border-radius: 7px;
+	// }
+	// .is-animate > div {
+	// 		animation-name: style;
+	// 		display: -webkit-inline-box;
+	// 		color: #fff;
+	// 		padding: 9px;
+	// 		background: #ffb200;
+	// 		font-family: 'Indie Flower', cursive;
+	// 		box-shadow: 2px 2px 9px 2px;
+	// }
+	// .l{
+	// 	animation: letterspacing 1s infinite alternate cubic-bezier(.2, 0, 0, 1);
+	// }
+	
+	// .is-animate > div {
+	// 	animation-duration: 1s;
+	// 	animation-fill-mode: both;
+	// 	animation-iteration-count: infinite;
+	// }
+	
+	// .is-animate > div:nth-child(1) { animation-delay: 0.0s }
+	// .is-animate > div:nth-child(2) { animation-delay: 0.1s }
+	// .is-animate > div:nth-child(3) { animation-delay: 0.2s }
+	// .is-animate > div:nth-child(4) { animation-delay: 0.3s }
+	// .is-animate > div:nth-child(5) { animation-delay: 0.4s }
+	// .is-animate > div:nth-child(6) { animation-delay: 0.5s }
+	// .is-animate > div:nth-child(7) { animation-delay: 0.6s }
+	
+	
+	// @keyframes style {
+	// 	from {
+	// 		transform: scale3d(1, 1, 1);
+	// 	}
+	// 	30% {
+	// 		box-shadow: 0px 0px 0px 0px;
+	// 		transform: scale3d(1.25, 0.75, 1);
+	// 	}
+	// 	40% {
+	// 		transform: scale3d(0.75, 1.25, 1);
+	// 	}
+	// 	50% {
+	// 		transform: scale3d(1.15, 0.85, 1);
+	// 	}
+	// 	65% {
+	// 		transform: scale3d(.95, 1.05, 1);
+	// 	}
+	// 	75% {
+	// 		transform: scale3d(1.05, .95, 1);
+	// 	}
+	// 	to {
+	// 		transform: scale3d(1, 1, 1);
+	// 	}
+	// }
+	
+	
+	// @keyframes letterspacing {
+	// 	0% {
+	// 		filter: blur(0.1rem);
+	// 	}      
+	// 	100% {
+	// 		filter: blur(0.5rem);
+	// 	}
+	// 	to {
+	// 		letter-spacing: none;
+	// 		filter: blur(0rem);
+	// 	}
+	// }
+
+
+	.c-PageLoader__lds-ripple {
+		display: inline-block;
+		position: relative;
+		width: 80px;
+		height: 80px;
+		div {
+			position: absolute;
+			border: 4px solid #fff;
+			opacity: 1;
+			border-radius: 50%;
+			animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+			&:nth-child(2) {
+				animation-delay: -0.5s;
+			}
+		}
+	}
+	
+	@keyframes lds-ripple {
+		0% {
+			top: 36px;
+			left: 36px;
+			width: 0;
+			height: 0;
+			opacity: 1;
+		}
+		100% {
+			top: 0px;
+			left: 0px;
+			width: 72px;
+			height: 72px;
+			opacity: 0;
+		}
+	}
+}
--- a/src/app/components/PageLoader/PageLoader.jsx
+++ b/src/app/components/PageLoader/PageLoader.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+const PageLoader = props => {
+  return (
+    <div className='c-PageLoader'>
+      <div className="c-PageLoader__lds-ripple">
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  )
+      // <div className='c-PageLoader'>
+      //   <div className='is-animate'>
+      //     <div className='l'>l</div>
+      //     <div className='l'>o</div>
+      //     <div className='l'>a</div>
+      //     <div className='l'>d</div>
+      //     <div className='l'>i</div>
+      //     <div className='l'>n</div>
+      //     <div className='l'>g</div>
+      //   </div>
+      // </div>
+};
+
+PageLoader.defaultProps = {
+
+};
+
+PageLoader.propTypes = {
+
+};
+
+export default PageLoader;
--- a/src/app/components/PageLoader/PageLoader.test.js
+++ b/src/app/components/PageLoader/PageLoader.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import PageLoader from './PageLoader';
+
+describe('PageLoader', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/src/app/components/PageLoader/index.js
+++ b/src/app/components/PageLoader/index.js
@@ -0,0 +1,3 @@
+import PageLoader from './PageLoader.jsx';
+
+export default PageLoader;
--- a/src/app/components/index.js
+++ b/src/app/components/index.js
@@ -0,0 +1,29 @@
+/* PLOP_INJECT_IMPORT */
+import BoardHeader from './BoardHeader';
+import CardEditButton from './CardEditButton';
+import ListControlButton from './ListControlButton';
+import CardContextMenu from './CardContextMenu';
+import AddListButton from './AddListButton';
+import AddCardButton from './AddCardButton';
+import Card from './Card';
+import List from './List';
+import BoardTitle from './BoardTitle';
+import Main from './Main';
+import Aside from './Aside';
+import Header from './Header';
+
+export {
+  /* PLOP_INJECT_EXPORT */
+	BoardHeader,
+	CardEditButton,
+	ListControlButton,
+	CardContextMenu,
+	AddListButton,
+	AddCardButton,
+	Card,
+	List,
+	BoardTitle,
+	Main,
+	Aside,
+	Header,
+}
--- a/src/app/config/todos.json
+++ b/src/app/config/todos.json
@@ -0,0 +1,84 @@
+{
+    "todos": {
+        "lists": {
+            "pending": {
+                "displayName": "Pending",
+                "id": "list_pending",
+                "cards": [
+                    {
+                        "title": "TODO 4",
+                        "description": "Description 4",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 7",
+                        "description": "Description 7",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 8",
+                        "description": "Description 8",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 10",
+                        "description": "Description 10",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 11",
+                        "description": "Description 11",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 13",
+                        "description": "Description 13",
+                        "activity": []
+                    }
+                ]
+            },
+            "inprogress": {
+                "displayName": "In Progress",
+                "id": "list_inprogress",
+                "cards": [
+                    {
+                        "title": "TODO 1",
+                        "description": "Description 1",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 2",
+                        "description": "Description 2",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 3",
+                        "description": "Description 3",
+                        "activity": []
+                    }
+                ]
+            },
+            "completed": {
+                "displayName": "Completed",
+                "id": "list_completed",
+                "cards": [
+                    {
+                        "title": "TODO 6",
+                        "description": "Description 1",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 9",
+                        "description": "Description 2",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 5",
+                        "description": "Description 3",
+                        "activity": []
+                    }
+                ]
+            }
+        }
+    }
+}
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import thunk from 'redux-thunk'
+import Immutable from 'immutable'
+import {createStore, applyMiddleware, compose} from 'redux'
+import reducer from './reducer';
+import Router from "./router";
+import 'bootstrap/dist/css/bootstrap.min.css'
+import './main.scss'
+import * as serviceWorker from './serviceWorker';
+
+const composeEnhancers =
+typeof window === 'object' &&
+window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
+window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+  serialize: { // prettier-ignore
+    immutable: Immutable
+  }
+}) : compose;
+const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)))
+
+ReactDOM.render(<Router store={store} />, document.getElementById("root"));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+// serviceWorker.unregister();
+serviceWorker.register();
--- a/src/app/main.scss
+++ b/src/app/main.scss
@@ -0,0 +1,4 @@
+@import "./styles/variables";
+@import "./styles/general";
+@import "./styles/components";
+@import "./styles/pages";
--- a/src/app/pages/Home/Home.jsx
+++ b/src/app/pages/Home/Home.jsx
@@ -0,0 +1,60 @@
+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {createPropsSelector} from 'reselect-immutable-helpers';
+import {CssBaseline} from '@material-ui/core';
+import {DndProvider} from 'react-dnd'
+import Backend from 'react-dnd-html5-backend'
+import {isMobile} from './selectors';
+import {dispatchDeviceType} from './actions';
+import {Header, Main, Aside} from './../../components';
+
+const Home = props => {
+  const {dispatchDeviceType} = props
+  useEffect(() => {
+    dispatchDeviceType({isMobile: isMobile()})
+    document.body.classList.add('body-board-view')
+  }, [dispatchDeviceType])
+
+  /* eslint no-useless-escape: 0 */
+  const isMobile = (() => {
+    var check = false;
+    (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+    return check;
+  });
+
+  return <DndProvider backend={Backend}>
+      <div className="c-Home">
+        <CssBaseline />
+        <Header />
+        <div className="c-Home__content container">
+          <div className="row c-Home__content-row">
+            <div className="col-10 c-Home__main-container body-board-view">
+              <Main />
+            </div>
+            <div className="col-2 c-Home__aside-container">
+              <Aside />
+            </div>
+          </div>
+        </div>
+      </div>
+    </DndProvider>
+};
+
+Home.propTypes = {
+  isMobile: PropTypes.bool,
+  dispatchDeviceType: PropTypes.func
+}
+
+const mapStateToProps = createPropsSelector({
+  isMobile: isMobile
+})
+
+const mapDispatchToProps = {
+  dispatchDeviceType
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Home);
--- a/src/app/pages/Home/Home.module.scss
+++ b/src/app/pages/Home/Home.module.scss
@@ -0,0 +1,22 @@
+.c-Home {
+    height: 100%;
+    .c-Home__content.container {
+        max-width: unset;
+        margin-bottom: 4rem;
+        height: 100%;
+
+        .c-Home__content-row {
+            height: 100%;
+
+            .c-Home__main-container {
+                height: 100%;
+                padding: 1rem;
+            }
+            .c-Home__aside-container {
+                height: 100%;
+                background: #eee;
+            }
+        }
+    }
+
+}
--- a/src/app/pages/Home/Home.test.js
+++ b/src/app/pages/Home/Home.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import Home from './Home';
+
+describe('Home', () => {
+   it('renders without error', () => {
+
+   });
+});
--- a/Show More
+++ b/Show More