diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/.browserslistrc b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/.browserslistrc
new file mode 100644
index 0000000..214388f
--- /dev/null
+++ b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/.browserslistrc	
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/.eslintrc.js b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/.eslintrc.js
new file mode 100644
index 0000000..3391da1
--- /dev/null
+++ b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/.eslintrc.js	
@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended'
+  ],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}
diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/.gitignore b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/.gitignore
new file mode 100644
index 0000000..11f5d71
--- /dev/null
+++ b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/.gitignore	
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/HOW-TO-USE.pdf b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/HOW-TO-USE.pdf
new file mode 100644
index 0000000..00d28ea
Binary files /dev/null and b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/HOW-TO-USE.pdf differ
diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/babel.config.js b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/babel.config.js	
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/package.json b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/package.json
new file mode 100644
index 0000000..c518480
--- /dev/null
+++ b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/package.json	
@@ -0,0 +1,26 @@
+{
+  "name": "vue-first-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0-0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0-0"
+  },
+  "prettier": {
+    "singleQuote": true
+  }
+}
diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/public/favicon.ico b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
Binary files /dev/null and b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/public/favicon.ico differ
diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/public/index.html b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/public/index.html
new file mode 100644
index 0000000..79c4efc
--- /dev/null
+++ b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/public/index.html	
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/App.vue b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/App.vue
new file mode 100644
index 0000000..3ed01f7
--- /dev/null
+++ b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/App.vue	
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <active-element
+      :topic-title="activeTopic && activeTopic.title"
+      :text="activeTopic && activeTopic.fullText"
+    ></active-element>
+    <knowledge-base :topics="topics" @select-topic="activateTopic"></knowledge-base>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      topics: [
+        {
+          id: 'basics',
+          title: 'The Basics',
+          description: 'Core Vue basics you have to know',
+          fullText:
+            'Vue is a great framework and it has a couple of key concepts: Data binding, events, components and reactivity - that should tell you something!',
+        },
+        {
+          id: 'components',
+          title: 'Components',
+          description:
+            'Components are a core concept for building Vue UIs and apps',
+          fullText:
+            'With components, you can split logic (and markup) into separate building blocks and then combine those building blocks (and re-use them) to build powerful user interfaces.',
+        },
+      ],
+      activeTopic: null,
+    };
+  },
+  methods: {
+    activateTopic(topicId) {
+      this.activeTopic = this.topics.find((topic) => topic.id === topicId);
+    },
+  },
+};
+</script>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+html {
+  font-family: sans-serif;
+}
+body {
+  margin: 0;
+}
+section {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  margin: 2rem auto;
+  max-width: 40rem;
+  padding: 1rem;
+  border-radius: 12px;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+}
+
+li {
+  border-radius: 12px;
+  border: 1px solid #ccc;
+  padding: 1rem;
+  width: 15rem;
+  margin: 0 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+h2 {
+  margin: 0.75rem 0;
+  text-align: center;
+}
+
+button {
+  font: inherit;
+  border: 1px solid #c70053;
+  background-color: #c70053;
+  color: white;
+  padding: 0.75rem 2rem;
+  border-radius: 30px;
+  cursor: pointer;
+}
+
+button:hover,
+button:active {
+  background-color: #e24d8b;
+  border-color: #e24d8b;
+}
+</style>
\ No newline at end of file
diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/ActiveElement.vue b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/ActiveElement.vue
new file mode 100644
index 0000000..d3c3ccb
--- /dev/null
+++ b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/ActiveElement.vue	
@@ -0,0 +1,12 @@
+<template>
+  <section>
+    <h2>{{ topicTitle }}</h2>
+    <p>{{ text }}</p>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ['topicTitle', 'text'],
+};
+</script>
\ No newline at end of file
diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeBase.vue b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeBase.vue
new file mode 100644
index 0000000..30d2c0f
--- /dev/null
+++ b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeBase.vue	
@@ -0,0 +1,13 @@
+<template>
+  <section>
+    <h2>Select a Topic</h2>
+    <knowledge-grid :topics="topics" @select-topic="$emit('select-topic', $event)"></knowledge-grid>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ['topics'],
+  emits: ['select-topic'],
+};
+</script>
\ No newline at end of file
diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeElement.vue b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeElement.vue
new file mode 100644
index 0000000..143b1b0
--- /dev/null
+++ b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeElement.vue	
@@ -0,0 +1,14 @@
+<template>
+  <li>
+    <h3>{{ topicName }}</h3>
+    <p>{{ description }}</p>
+    <button @click="$emit('select-topic', id)">Learn More</button>
+  </li>
+</template>
+
+<script>
+export default {
+  props: ['id', 'topicName', 'description'],
+  emits: ['select-topic'],
+};
+</script>
\ No newline at end of file
diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeGrid.vue b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeGrid.vue
new file mode 100644
index 0000000..7b622c4
--- /dev/null
+++ b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeGrid.vue	
@@ -0,0 +1,19 @@
+<template>
+  <ul>
+    <knowledge-element
+      v-for="topic in topics"
+      :key="topic.id"
+      :id="topic.id"
+      :topic-name="topic.title"
+      :description="topic.description"
+      @select-topic="$emit('select-topic', $event)"
+    ></knowledge-element>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: ['topics'],
+  emits: ['select-topic']
+};
+</script>
\ No newline at end of file
diff --git a/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/main.js b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/main.js
new file mode 100644
index 0000000..55eef5d
--- /dev/null
+++ b/2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/main.js	
@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import ActiveElement from './components/ActiveElement.vue';
+import KnowledgeBase from './components/KnowledgeBase.vue';
+import KnowledgeElement from './components/KnowledgeElement.vue';
+import KnowledgeGrid from './components/KnowledgeGrid.vue';
+
+const app = createApp(App);
+
+app.component('active-element', ActiveElement);
+app.component('knowledge-base', KnowledgeBase);
+app.component('knowledge-element', KnowledgeElement);
+app.component('knowledge-grid', KnowledgeGrid);
+
+app.mount('#app');