diff --git a/2021-09-04_composition-13-demo-starting-project/.browserslistrc b/2021-09-04_composition-13-demo-starting-project/.browserslistrc
new file mode 100644
index 0000000..214388f
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/2021-09-04_composition-13-demo-starting-project/.eslintrc.js b/2021-09-04_composition-13-demo-starting-project/.eslintrc.js
new file mode 100644
index 0000000..3391da1
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/.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-09-04_composition-13-demo-starting-project/.gitignore b/2021-09-04_composition-13-demo-starting-project/.gitignore
new file mode 100644
index 0000000..11f5d71
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/.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-09-04_composition-13-demo-starting-project/.prettierrc b/2021-09-04_composition-13-demo-starting-project/.prettierrc
new file mode 100644
index 0000000..92cde39
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/.prettierrc
@@ -0,0 +1,3 @@
+{
+ "singleQuote": true
+}
\ No newline at end of file
diff --git a/2021-09-04_composition-13-demo-starting-project/HOW-TO-USE.pdf b/2021-09-04_composition-13-demo-starting-project/HOW-TO-USE.pdf
new file mode 100644
index 0000000..00d28ea
Binary files /dev/null and b/2021-09-04_composition-13-demo-starting-project/HOW-TO-USE.pdf differ
diff --git a/2021-09-04_composition-13-demo-starting-project/babel.config.js b/2021-09-04_composition-13-demo-starting-project/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/2021-09-04_composition-13-demo-starting-project/package.json b/2021-09-04_composition-13-demo-starting-project/package.json
new file mode 100644
index 0000000..52d25ec
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/package.json
@@ -0,0 +1,23 @@
+{
+ "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"
+ }
+}
diff --git a/2021-09-04_composition-13-demo-starting-project/public/favicon.ico b/2021-09-04_composition-13-demo-starting-project/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
Binary files /dev/null and b/2021-09-04_composition-13-demo-starting-project/public/favicon.ico differ
diff --git a/2021-09-04_composition-13-demo-starting-project/public/index.html b/2021-09-04_composition-13-demo-starting-project/public/index.html
new file mode 100644
index 0000000..4123528
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/public/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+ <%= htmlWebpackPlugin.options.title %>
+
+
+
+
+
+
+
diff --git a/2021-09-04_composition-13-demo-starting-project/src/App.vue b/2021-09-04_composition-13-demo-starting-project/src/App.vue
new file mode 100644
index 0000000..571f451
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/src/App.vue
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/2021-09-04_composition-13-demo-starting-project/src/components/UI/BaseContainer.vue b/2021-09-04_composition-13-demo-starting-project/src/components/UI/BaseContainer.vue
new file mode 100644
index 0000000..e45bb98
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/src/components/UI/BaseContainer.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/2021-09-04_composition-13-demo-starting-project/src/components/UI/BaseSearch.vue b/2021-09-04_composition-13-demo-starting-project/src/components/UI/BaseSearch.vue
new file mode 100644
index 0000000..00e939d
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/src/components/UI/BaseSearch.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/2021-09-04_composition-13-demo-starting-project/src/components/projects/ProjectItem.vue b/2021-09-04_composition-13-demo-starting-project/src/components/projects/ProjectItem.vue
new file mode 100644
index 0000000..05484dc
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/src/components/projects/ProjectItem.vue
@@ -0,0 +1,24 @@
+
+
+ {{ title }}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/2021-09-04_composition-13-demo-starting-project/src/components/projects/ProjectsList.vue b/2021-09-04_composition-13-demo-starting-project/src/components/projects/ProjectsList.vue
new file mode 100644
index 0000000..ff3fa04
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/src/components/projects/ProjectsList.vue
@@ -0,0 +1,68 @@
+
+
+ {{ user.fullName }}: Projects
+
+
+ No projects found.
+
+
+ No user selected.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/2021-09-04_composition-13-demo-starting-project/src/components/users/UserItem.vue b/2021-09-04_composition-13-demo-starting-project/src/components/users/UserItem.vue
new file mode 100644
index 0000000..bc49503
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/src/components/users/UserItem.vue
@@ -0,0 +1,31 @@
+
+
+ {{ userName }}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/2021-09-04_composition-13-demo-starting-project/src/components/users/UserList.vue b/2021-09-04_composition-13-demo-starting-project/src/components/users/UserList.vue
new file mode 100644
index 0000000..f8d3546
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/src/components/users/UserList.vue
@@ -0,0 +1,91 @@
+
+
+ Active Users
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/2021-09-04_composition-13-demo-starting-project/src/dummy-data.js b/2021-09-04_composition-13-demo-starting-project/src/dummy-data.js
new file mode 100644
index 0000000..cdac38b
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/src/dummy-data.js
@@ -0,0 +1,33 @@
+export default [
+ {
+ id: 'max',
+ fullName: 'Maximilian Schwarzmüller',
+ projects: [
+ { id: 'max_p1', title: 'Record the Vue course' },
+ { id: 'max_p2', title: 'Create more courses' },
+ { id: 'max_p3', title: 'Keep content updated' }
+ ]
+ },
+ {
+ id: 'manu',
+ fullName: 'Manuel Lorenz',
+ projects: [
+ { id: 'manu_p1', title: 'Create more courses' },
+ { id: 'manu_p2', title: 'Dive into data science topics' },
+ { id: 'manu_p3', title: 'Various things' }
+ ]
+ },
+ {
+ id: 'julie',
+ fullName: 'Julie Jones',
+ projects: [
+ { id: 'julie_p1', title: 'Create agenda for next months' },
+ { id: 'julie_p2', title: 'Explore new topics' }
+ ]
+ },
+ {
+ id: 'michael',
+ fullName: 'Michael Miller',
+ projects: []
+ }
+];
diff --git a/2021-09-04_composition-13-demo-starting-project/src/main.js b/2021-09-04_composition-13-demo-starting-project/src/main.js
new file mode 100644
index 0000000..c288871
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/src/main.js
@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+
+import BaseSearch from './components/UI/BaseSearch.vue';
+import BaseContainer from './components/UI/BaseContainer.vue';
+import App from './App.vue';
+
+const app = createApp(App);
+
+app.component('base-search', BaseSearch);
+app.component('base-container', BaseContainer);
+
+app.mount('#app');
diff --git a/docker-compose.yml b/docker-compose.yml
index fc1c156..2a8e4eb 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -8,4 +8,4 @@ services:
ports:
- 8080:8080
volumes:
- - ./2021-09-04_composition-assignment-2-problem/:/app
+ - ./2021-09-04_composition-13-demo-starting-project/:/app