move template to ./template;

setup django middleware; setup angular frontend; wire django and angular together;
2020-11-17 19:34:25 +01:00 · 2020-11-17 19:34:25 +01:00 · ff4b3508d8
commit ff4b3508d8
parent 044a096f54
97 changed files with 13737 additions and 6080 deletions
--- a/.env
+++ b/.env
@ -1,15 +0,0 @@
 # Add anything that might need to be configured here
 COMPOSE_PROJECT_NAME=AIC_GxTx
 # Externally exposed ports (i.e. ports mapped on host system)
 COLOR_SERVICE_PORT=4000
 API_PORT=3000
 DB_PORT=5432
 FRONTEND_PORT=8080
 POSTGRES_USER=aic_user
 POSTGRES_PASSWORD=aic_pw
 POSTGRES_DB=aic_db
 DATA_PATH=./data.json
--- a/15
+++ b/15
@ -1,15 +0,0 @@
 # If you want you can use this Makefile to specify debug commands, test scripts, etc.
 # Some examples below
 start:
 	docker-compose build && docker-compose up -d
 restart:
 	docker-compose restart
 build:
 	docker-compose build
 purge:
 	docker-compose down -v --rmi all --remove-orphans
--- a/README.md
+++ b/README.md
@ -1,32 +0,0 @@
 ![DSG](./docs/dsg_logo.png)
 # Advanced Internet Computing WS 2020 - Group x Topic x
 This template is intended to serve as an *example* on how you might want to structure the README when submitting your project.
 **Important**: The specific subdirectories are *not* meant to be extended but to serve as an example on how to write a `Dockerfile` and a `docker-compose.yml` file. Your first task should be to replace them with your own.
 ## Team
 TODO
 ## Overview
 TODO
 ## Architecture
 TODO
 ## Components
 TODO
 ## How to run
 TODO
 ## How to debug
 TODO
--- a/api/.dockerignore
+++ b/api/.dockerignore
@ -1,28 +0,0 @@
 **/.classpath
 **/.dockerignore
 **/.env
 **/.git
 **/.gitignore
 **/.project
 **/.settings
 **/.toolstarget
 **/.vs
 **/.vscode
 **/*.*proj.user
 **/*.dbmdl
 **/*.jfm
 **/azds.yaml
 **/bin
 **/charts
 **/docker-compose*
 **/Dockerfile*
 **/node_modules
 **/npm-debug.log
 **/obj
 **/secrets.dev.yaml
 **/values.dev.yaml
 LICENSE
 README.md
 ## Add any files that are not relevant for docker to build your image
--- a/api/Dockerfile
+++ b/api/Dockerfile
@ -1,23 +0,0 @@
 #########################
 ###### build stage ######
 #########################
 FROM golang:1.13.1-alpine AS builder
 WORKDIR /app
 RUN apk add --no-cache git
 # Prevent downloads on every build.
 # Only downloads the dependencies if they actually change
 COPY go.mod go.sum ./
 RUN go mod download
 # Build the app
 COPY . .
 RUN go build -v -o api
 #########################
 ###### final stage ######
 #########################
 FROM alpine:latest
 RUN apk --no-cache add ca-certificates
 COPY --from=builder /app/api /app/api
 EXPOSE 3000
 ENTRYPOINT ./app/api
--- a/api/go.mod
+++ b/api/go.mod
@ -1,5 +0,0 @@
 module hyde.infosys.tuwien.ac.at/aic19/template
 go 1.13
 require github.com/gorilla/mux v1.7.3
--- a/api/go.sum
+++ b/api/go.sum
@ -1,2 +0,0 @@
 github.com/gorilla/mux v1.7.3 h1:gnP5JzjVOuiZD07fKKToCAOjS0yOpj/qPETTXCCS6hw=
 github.com/gorilla/mux v1.7.3/go.mod h1:1lud6UwP+6orDFRuTfBEV8e9/aOM/c4fVVCaMa2zaAs=
--- a/api/main.go
+++ b/api/main.go
@ -1,75 +0,0 @@
 package main
 import (
 	"encoding/json"
 	"github.com/gorilla/mux"
 	"io"
 	"io/ioutil"
 	"log"
 	"net/http"
 	"os"
 )
 func main() {
 	// resolve port to use
 	port := os.Getenv("HTTP_PORT")
 	if port == "" {
 		log.Println("No HTTP_PORT environment variable specified. Using default port 3000")
 		port = "3000" // default port
 	}
 	demoDataAccess() // demo accessing the json data from the external file
 	// setup routing
 	r := mux.NewRouter()
 	r.HandleFunc("/health", HealthHandler)
 	r.HandleFunc("/color/random", RandomColorHandler)
 	http.Handle("/", r)
 	// start api server (blocking)
 	if err := http.ListenAndServe(":"+port, nil); err != nil {
 		panic(err)
 	}
 }
 // RandomColorHandler will "proxy" the request and call the color-service for a random color
 func RandomColorHandler(writer http.ResponseWriter, request *http.Request) {
 	resp, err := http.Get("http://color-service:4000/color")
 	if err != nil {
 		writer.WriteHeader(http.StatusInternalServerError)
 		log.Println("Failed to fetch random color")
 		return
 	}
 	writer.Header().Add("Content-Type", resp.Header.Get("Content-Type"))
 	_, _ = io.Copy(writer, resp.Body)
 }
 // ColorData is simply a typing for the sample json data in data.json
 type ColorData struct {
 	Colors []struct {
 		Color string `json:"color"`
 		Value string `json:"value"`
 	} `json:"colors"`
 }
 // demoDataAccess shows that you can mount a data file into the container and access it
 func demoDataAccess() {
 	bytes, err := ioutil.ReadFile("/app/data.json")
 	if err != nil {
 		panic(err)
 	}
 	var colorData ColorData
 	if err = json.Unmarshal(bytes, &colorData); err != nil {
 		panic(err)
 	}
 	log.Println("The first color: ", colorData.Colors[0])
 }
 // HealthHandler responds to all requests with "ok" to signal that this application is ready to receive traffic
 func HealthHandler(writer http.ResponseWriter, request *http.Request) {
 	writer.Header().Add("Access-Control-Allow-Origin", "*") // CORS example ... allow requests from all domains
 	_, err := writer.Write([]byte("ok"))
 	if err != nil {
 		writer.WriteHeader(http.StatusInternalServerError)
 		log.Println("Failed to produce health check")
 	}
 }
--- a/color-service/.dockerignore
+++ b/color-service/.dockerignore
@ -1,30 +0,0 @@
 **/.classpath
 **/.dockerignore
 **/.env
 **/.git
 **/.gitignore
 **/.project
 **/.settings
 **/.toolstarget
 **/.vs
 **/.vscode
 **/*.*proj.user
 **/*.dbmdl
 **/*.jfm
 **/azds.yaml
 **/bin
 **/charts
 **/docker-compose*
 **/Dockerfile*
 **/node_modules
 **/npm-debug.log
 **/obj
 **/secrets.dev.yaml
 **/values.dev.yaml
 LICENSE
 README.md
 ## Add any files that are not relevant for docker to build your image
 **/.venv
--- a/color-service/.gitignore
+++ b/color-service/.gitignore
@ -1 +0,0 @@
 .venv
--- a/color-service/Dockerfile
+++ b/color-service/Dockerfile
@ -1,10 +0,0 @@
 FROM python:3.7.4-slim
 # Alpine isn't used here intentionally because especially with python there are often major issues when compiling dependencies
 WORKDIR /app
 RUN apt-get update && apt-get install -y build-essential
 COPY ./requirements.txt ./
 RUN pip install -r /app/requirements.txt
 COPY . .
 EXPOSE 4000
 # The -u flag is important if you want to observe the logs, otherwise python buffers the output
 ENTRYPOINT [ "python", "-u", "main.py" ]
--- a/color-service/README.md
+++ b/color-service/README.md
@ -1,4 +0,0 @@
 # Color-Service
 **Important**: This is not meant to be extended and only serves as an example to show how to call another service orchestrated by Docker Compose
--- a/color-service/main.py
+++ b/color-service/main.py
@ -1,37 +0,0 @@
 from aiohttp import web
 import json
 import os
 import random
 async def handle(request):
    name = request.match_info.get('name', "Anonymous")
    text = "Hello, " + name
    return web.Response(text=text)
 async def handle_color(request):
    """ returns a random color """
    colors = color_data["colors"]
    color = random.choice(colors)
    return web.json_response(data=color)
 def load_colors(path: str):
    """ loads color data from path """
    with open(path) as f:
        data = f.read()
        return json.loads(data)
 app = web.Application()
 app.add_routes([
    web.get('/color', handle_color),
    web.get('/hello/{name}', handle)])
 color_data = load_colors("/app/data.json")
 if __name__ == '__main__':
    port = os.environ.get("HTTP_PORT", "4000")
    print("Starting server on port ", port)
    web.run_app(app, port=int(port))
--- a/color-service/requirements.txt
+++ b/color-service/requirements.txt
@ -1,16 +0,0 @@
 aiodns==2.0.0
 aiohttp==3.6.1
 async-timeout==3.0.1
 attrs==19.2.0
 brotlipy==0.7.0
 cchardet==2.1.4
 cffi==1.12.3
 chardet==3.0.4
 idna==2.8
 idna-ssl==1.1.0
 multidict==4.5.2
 pycares==3.0.0
 pycparser==2.19
 typing==3.7.4.1
 typing-extensions==3.7.4
 yarl==1.3.0
--- a/data.json
+++ b/data.json
@ -1,32 +0,0 @@
 {
    "colors": [
        {
            "color": "red",
            "value": "#f00"
        },
        {
            "color": "green",
            "value": "#0f0"
        },
        {
            "color": "blue",
            "value": "#00f"
        },
        {
            "color": "cyan",
            "value": "#0ff"
        },
        {
            "color": "magenta",
            "value": "#f0f"
        },
        {
            "color": "yellow",
            "value": "#ff0"
        },
        {
            "color": "black",
            "value": "#000"
        }
    ]
 }
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,50 +0,0 @@
 version: "3"
 services:
  db:
    image: postgres:12.0-alpine  # Image will be pulled directly from docker hub
    ports:
      - ${DB_PORT}:5432
    volumes: 
      - db-data:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_DB: ${POSTGRES_DB}
  color-service:
    build:
      context: ./color-service
      dockerfile: ./Dockerfile
    ports:
      - ${COLOR_SERVICE_PORT}:4000
    environment:
      HTTP_PORT: 4000
    volumes:
      - ./data.json:/app/data.json  # example of how to mount external files into the container (e.g. a data set)
  api:
    build:
      context: ./api
      dockerfile: ./Dockerfile
    depends_on:
      - db  # example of a depency between services, the api service will be started after the db service
    ports:
      - ${API_PORT}:3000
    volumes:
      - ${DATA_PATH}:/app/data.json  # example of how to mount external files into the container (e.g. a data set)
  frontend:
    build:
      context: ./frontend
      dockerfile: ./Dockerfile
    ports:
      - ${FRONTEND_PORT}:8000  # example of how to bind to a different port
 volumes: 
  db-data:  # db-data is a volume that will be generated by docker compose
--- a/docs/dsg_logo.png
+++ b/docs/dsg_logo.png
--- a/frontend/.browserslistrc
+++ b/frontend/.browserslistrc
@ -0,0 +1,18 @@
 # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
 # For the full list of supported browsers by the Angular framework, please see:
 # https://angular.io/guide/browser-support
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 last 1 Chrome version
 last 1 Firefox version
 last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
 not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
 not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
--- a/frontend/.dockerignore
+++ b/frontend/.dockerignore
@ -1,31 +1,2 @@
-**/.classpath
+dist
-**/.dockerignore
+node_modules
 **/.env
 **/.git
 **/.gitignore
 **/.project
 **/.settings
 **/.toolstarget
 **/.vs
 **/.vscode
 **/*.*proj.user
 **/*.dbmdl
 **/*.jfm
 **/azds.yaml
 **/bin
 **/charts
 **/docker-compose*
 **/Dockerfile*
 **/node_modules
 **/npm-debug.log
 **/obj
 **/secrets.dev.yaml
 **/values.dev.yaml
 LICENSE
 README.md
 ## Add any files that are not relevant for docker to build your image
 ## e.g.
 **/node_modules
--- a/frontend/.editorconfig
+++ b/frontend/.editorconfig
@ -0,0 +1,13 @@
 # Editor configuration, see http://editorconfig.org
 root = true
 [*]
 charset = utf-8
 indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@ -1,17 +0,0 @@
 module.exports = {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/typescript"
  ],
  "rules": {
    "indent": ["warn", 2]
  },
  "parserOptions": {
    "parser": "@typescript-eslint/parser"
  }
 };
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -1,21 +1,46 @@
-.DS_Store
+# See http://help.github.com/ignore-files/ for more about ignoring files.
-node_modules
+
 # compiled output
 /dist
 /tmp
 /out-tsc
 # Only exists if Bazel was run
 /bazel-out
-# local env files
+# dependencies
-.env.local
+/node_modules
 .env.*.local
-# Log files
+# profiling files
-npm-debug.log*
+chrome-profiler-events*.json
-yarn-debug.log*
+speed-measure-plugin*.json
 yarn-error.log*
-# Editor directories and files
+# IDEs and editors
-.idea
+/.idea
-.vscode
+.project
-*.suo
+.classpath
-*.ntvs*
+.c9/
-*.njsproj
+*.launch
-*.sln
+.settings/
-*.sw?
+*.sublime-workspace
 # IDE - VSCode
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
 # misc
 /.sass-cache
 /connect.lock
 /coverage
 /libpeerconnection.log
 npm-debug.log
 yarn-error.log
 testem.log
 /typings
 # System Files
 .DS_Store
 Thumbs.db
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@ -1,9 +1,17 @@
-FROM node:12.11.1-alpine AS build
+# Stage 1
-ENV NODE_ENV production
+
-WORKDIR /usr/src/app
+FROM node:alpine AS build-image
-RUN npm config set -g production false
+
-COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
+WORKDIR /app
-RUN npm install
+
 COPY . .
-EXPOSE 8000
+
-CMD ["npm", "run", "serve"]
+RUN npm ci && npm run build
 # Stage 2
 FROM nginx:alpine
 COPY --from=build-image /app/dist/app-fe /usr/share/nginx/html
 EXPOSE 80
--- a/frontend/README.md
+++ b/frontend/README.md
@ -1,27 +1,27 @@
-# frontend
+# AppFe
-Sample UI. This UI is not meant to be extended for your AIC project,
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.7.
 but to serve as an example of how to package your application in a container.
-## Project setup
+## Development server
 ```
 npm install
 ```
-### Compiles and hot-reloads for development
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 ```
 npm run serve
 ```
-### Compiles and minifies for production
+## Code scaffolding
 ```
 npm run build
 ```
-### Lints and fixes files
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 ```
 npm run lint
 ```
-### Customize configuration
+## Build
-See [Configuration Reference](https://cli.vuejs.org/config/).
+
 Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
 ## Running unit tests
 Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 ## Running end-to-end tests
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 ## Further help
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- a/frontend/angular.json
+++ b/frontend/angular.json
@ -0,0 +1,124 @@
 {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app-fe": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app-fe",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app-fe:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app-fe:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app-fe:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app-fe:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app-fe:serve:production"
            }
          }
        }
      }
    }},
  "defaultProject": "app-fe"
 }
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@ -1,5 +0,0 @@
 module.exports = {
  presets: [
    '@vue/app'
  ]
 };
--- a/frontend/e2e/app.e2e-spec.ts
+++ b/frontend/e2e/app.e2e-spec.ts
@ -0,0 +1,14 @@
 import { AppPage } from './app.po';
 describe('frontend-dev App', () => {
  let page: AppPage;
  beforeEach(() => {
    page = new AppPage();
  });
  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('Welcome to app!');
  });
 });
--- a/frontend/e2e/app.po.ts
+++ b/frontend/e2e/app.po.ts
@ -0,0 +1,11 @@
 import { browser, by, element } from 'protractor';
 export class AppPage {
  navigateTo() {
    return browser.get('/');
  }
  getParagraphText() {
    return element(by.css('app-root h1')).getText();
  }
 }
--- a/frontend/e2e/tsconfig.e2e.json
+++ b/frontend/e2e/tsconfig.e2e.json
@ -0,0 +1,14 @@
 {
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
 }
--- a/frontend/karma.conf.js
+++ b/frontend/karma.conf.js
@ -0,0 +1,56 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-htmlfile-reporter'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    htmlReporter: {
      outputFile: 'unit-tests.html',
      // Optional
      pageTitle: 'Unit Tests',
      subPageTitle: 'A sample project description',
      groupSuites: true,
      useCompactStyle: true,
      useLegacyStyle: true
    },
    reporters: ['progress', 'html'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome', 'ChromeHeadless'],
    customLaunchers: {
      ChromeHeadless: {
        base: 'Chrome',
        flags: [
          '--headless',
          '--no-sandbox',
          '--disable-setuid-sandbox',
          '--disable-gpu',
          '--disable-dev-shm-usage',
          '--remote-debugging-port=9222'
        ]
      }
    },
    singleRun: true
  });
 };
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -1,38 +1,58 @@
 {
-  "name": "frontend",
+  "name": "app-fe",
-  "version": "0.1.0",
+  "version": "0.0.0",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve --port=8000",
+    "ng": "ng",
-    "build": "vue-cli-service build",
+    "start": "ng serve",
-    "lint": "vue-cli-service lint"
+    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc"
  },
  "private": true,
  "dependencies": {
-    "axios": "^0.19.0",
+    "@angular-devkit/schematics": "~9.1.7",
-    "core-js": "^2.6.5",
+    "@angular/animations": "~9.1.9",
-    "vue": "^2.6.10",
+    "@angular/cdk": "9.2.4",
-    "vue-class-component": "^7.0.2",
+    "@angular/common": "~9.1.9",
-    "vue-property-decorator": "^8.1.0"
+    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/forms": "~9.1.9",
    "@angular/localize": "~9.1.9",
    "@angular/material": "9.2.4",
    "@angular/platform-browser": "~9.1.9",
    "@angular/platform-browser-dynamic": "~9.1.9",
    "@angular/router": "~9.1.9",
    "@types/uuid": "8.3.0",
    "bootstrap": "~4.3.1",
    "jquery": "3.5.1",
    "ngx-logger": "4.1.9",
    "popper.js": "1.16.0",
    "rxjs": "~6.5.5",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.12.0",
+    "@angular-devkit/build-angular": "~0.901.7",
-    "@vue/cli-plugin-eslint": "^3.12.0",
+    "@angular/cli": "~9.1.7",
-    "@vue/cli-plugin-typescript": "^3.12.0",
+    "@angular/compiler-cli": "~9.1.9",
-    "@vue/cli-service": "^3.12.0",
+    "@angular/language-service": "~9.1.9",
-    "@vue/eslint-config-typescript": "^4.0.0",
+    "@compodoc/compodoc": "~1.1.11",
-    "babel-eslint": "^10.0.1",
+    "@types/jasmine": "~3.4.6",
-    "eslint": "^5.16.0",
+    "@types/jasminewd2": "~2.0.8",
-    "eslint-plugin-vue": "^5.0.0",
+    "@types/node": "^12.12.42",
-    "typescript": "^3.4.3",
+    "codelyzer": "^5.2.2",
-    "vue-template-compiler": "^2.6.10"
+    "jasmine-core": "~3.5.0",
-  },
+    "jasmine-spec-reporter": "~4.2.1",
-  "postcss": {
+    "karma": "~4.4.1",
-    "plugins": {
+    "karma-chrome-launcher": "~3.1.0",
-      "autoprefixer": {}
+    "karma-coverage-istanbul-reporter": "~2.1.1",
-    }
+    "karma-jasmine": "~2.0.1",
-  },
+    "karma-jasmine-html-reporter": "^1.5.4",
-  "browserslist": [
+    "protractor": "~5.4.4",
-    "> 1%",
+    "ts-node": "~8.5.4",
-    "last 2 versions"
+    "tslint": "~5.20.1",
-  ]
+    "typescript": "~3.8.3"
  }
 }
--- a/frontend/protractor.conf.js
+++ b/frontend/protractor.conf.js
@ -0,0 +1,29 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 const {SpecReporter} = require('jasmine-spec-reporter');
 exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function () {
    }
  },
  onPrepare() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
  }
 };
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@ -1,17 +0,0 @@
 <!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>frontend</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but frontend 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>
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -1,35 +0,0 @@
 <template>
    <div id="app">
        <img alt="TU Wien" src="./assets/dsg_logo.png">
        <HelloWorld/>
    </div>
 </template>
 <script lang="ts">
 import {Component, Vue} from 'vue-property-decorator';
 import HelloWorld from './components/HelloWorld.vue';
@Component({
  components: {
    HelloWorld,
  },
 })
 export default class App extends Vue {
 }
 </script>
 <style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
  #app img {
    width: 450px;
    height: 75px;
      margin-bottom: 2em;
  }
 </style>
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@ -0,0 +1,10 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
 })
 export class AppRoutingModule { }
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@ -0,0 +1,49 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {AppRoutingModule} from './app-routing.module';
 import {LandingComponent} from './component/landing/landing.component';
 import {RestService} from './services/rest.service';
 import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
 import {InterceptorService} from './services/interceptor.service';
 import {WebsocketService} from './services/websocket.service';
 import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
 import {environment} from '../environments/environment';
 import {TestSubCompComponent} from './component/testsubcomp/test-sub-comp.component';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatSliderModule} from "@angular/material/slider";
@NgModule({
  declarations: [LandingComponent, TestSubCompComponent],
  imports: [
    ReactiveFormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    LoggerModule.forRoot({level: environment.log_level, serverLogLevel: NgxLoggerLevel.ERROR}),
    HttpClientModule,
    MatFormFieldModule,
    FormsModule,
    MatButtonModule,
    MatInputModule,
    MatSlideToggleModule,
    MatSliderModule
  ],
  // enables injecting
  providers: [
    RestService,
    WebsocketService,
    {
      provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true
    },
  ],
  bootstrap: [LandingComponent]
 })
 export class AppModule {
 }
--- a/frontend/src/app/component/landing/landing.component.css
+++ b/frontend/src/app/component/landing/landing.component.css
--- a/frontend/src/app/component/landing/landing.component.html
+++ b/frontend/src/app/component/landing/landing.component.html
@ -0,0 +1,33 @@
 <h1>landing works!</h1>
 <mat-slider min="1" max="5" step="0.5" [value]="myValue"></mat-slider>
 <h2>Two way data binding, passing data, triggering child event...</h2>
 <mat-form-field *ngIf="true">
  <input
         type="text"
         placeholder="Placeholder"
         matInput
         [(ngModel)]="exampleInputText"
  >
 </mat-form-field>
 <app-test-sub-comp [message]="exampleInputText" (buttonClickedEvent)="alert()"
                   [anotherInput]=""
 ></app-test-sub-comp>
 <h2>Hide display with *ngIf</h2>
 <mat-slide-toggle [(ngModel)]="showPar">Show paragraph</mat-slide-toggle>
 <p *ngIf="showPar">Toggle me</p>
 <app-test-sub-comp *ngIf="showPar"
  [message]="exampleInputText" (buttonClickedEvent)="alert()"
                   [anotherInput]=""
 ></app-test-sub-comp>
 <h2>Display a test list with *ngFor</h2>
 <span *ngFor="let dict of testList">{{dict.value}}; </span>
--- a/frontend/src/app/component/landing/landing.component.ts
+++ b/frontend/src/app/component/landing/landing.component.ts
@ -0,0 +1,89 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {RestService} from '../../services/rest.service';
 import {WebsocketService} from '../../services/websocket.service';
 import {NGXLogger} from 'ngx-logger';
 import {Subscription} from 'rxjs';
 import {TestSubCompComponent} from "../testsubcomp/test-sub-comp.component";
@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.css']
 })
 export class LandingComponent implements OnInit {
  private wsSubscription: Subscription;
  private wsMessageCounter: number;
  exampleInputText: string;
  showPar = false;
  testList = [{'value': 1}, {'value': 2}, {'value': 3}];
  myValue: any = 15;
  constructor(
    private logger: NGXLogger,
    private restService: RestService,
    private wsService: WebsocketService
  ) {
  }
  ngOnInit(): void {
    // perform test rest call as observable
    this.observableCall();
    // perform test rest call as promise (shorter - will only be executed exactly once)
    this.promiseCall();
    // perform test ws send / receive
    setTimeout(() => {
        this.wsCall();
      },
      1000);
  }
  private observableCall(): void {
    const subscription = this.restService.testCall().subscribe(
      // subscribe with lambda function
      response => {
        this.logger.debug('Execute obs test call', response);
        subscription.unsubscribe();
      },
      error => {
        this.logger.error('Error while executing obs test call', error);
        subscription.unsubscribe();
      }
    );
  }
  private promiseCall(): void {
    this.restService.testCall().toPromise()
      // lambda for success
      .then(response => {
        this.logger.debug('Execute obs test call', response);
      })
      // lambda for fail
      .catch(error => {
        this.logger.error('Error while executing obs test call', error);
      });
  }
  private wsCall(): void {
    this.wsMessageCounter = 0;
    this.wsSubscription = this.wsService.wsTestCall('Test message').message.subscribe(
      result => {
        this.logger.debug('ws call result', result);
        if (this.wsMessageCounter >= 2) {
          this.wsSubscription.unsubscribe();
        }
      },
      error => {
        this.logger.error('ws call error', error);
        this.wsSubscription.unsubscribe();
      }
    );
  }
  alert() {
    alert(this.exampleInputText);
  }
 }
--- a/frontend/src/app/component/testsubcomp/test-sub-comp.component.css
+++ b/frontend/src/app/component/testsubcomp/test-sub-comp.component.css
--- a/frontend/src/app/component/testsubcomp/test-sub-comp.component.html
+++ b/frontend/src/app/component/testsubcomp/test-sub-comp.component.html
@ -0,0 +1 @@
 <p>{{message}} <button mat-raised-button (click)="buttonClickedEvent.emit()">Click me</button></p>
--- a/frontend/src/app/component/testsubcomp/test-sub-comp.component.ts
+++ b/frontend/src/app/component/testsubcomp/test-sub-comp.component.ts
@ -0,0 +1,24 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
@Component({
  selector: 'app-test-sub-comp',
  templateUrl: './test-sub-comp.component.html',
  styleUrls: ['./test-sub-comp.component.css']
 })
 export class TestSubCompComponent implements OnInit {
  @Input()
  message: string;
  @Input()
  anotherInput: string;
  @Output()
  buttonClickedEvent: EventEmitter<void> = new EventEmitter<void>();
  constructor() {
  }
  ngOnInit(): void {
    this.message;
  }
 }
--- a/frontend/src/app/interfaces/interface.ts
+++ b/frontend/src/app/interfaces/interface.ts
@ -0,0 +1,7 @@
 import {Observable} from 'rxjs';
 export interface WSEvents {
  message: Observable<Event>;
  error: Observable<Event>;
  close: Observable<Event>;
 }
--- a/frontend/src/app/services/interceptor.service.ts
+++ b/frontend/src/app/services/interceptor.service.ts
@ -0,0 +1,52 @@
 import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
 import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import {tap} from 'rxjs/operators';
 import {NGXLogger} from 'ngx-logger';
@Injectable({
  providedIn: 'root'
 })
 /**
 * The InterceptorService intercepts EVERY http event.
 */
 export class InterceptorService implements HttpInterceptor {
  constructor(private logger: NGXLogger) {
  }
  /**
   * Intercepts every HTTP request and for example adds a token
   * @param req   http request
   * @param next  http response handler
   */
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // TODO get the real token
    const token = 'A_TOKEN';
    // the original request is immutable, so we need to clone it
    req = req.clone({
      setHeaders: {
        // FIXME e.g. if Bearer is used
        Authorization: `Bearer ${token}`
      }
    });
    this.logger.debug('Interceptor works');
    // pipe the response observable
    return next.handle(req).pipe(
      // perform a side effect for every emission on the source Observable
      // return an Observable that is identical to the source
      tap(event => {
        // check if it is the response message
        if (event instanceof HttpResponse) {
          // TODO so something if necessary
        }
      }, error => {
        // TODO handle error here
        this.logger.error('HTTP Response interception error', error);
      })
    );
  }
 }
--- a/frontend/src/app/services/rest.service.ts
+++ b/frontend/src/app/services/rest.service.ts
@ -0,0 +1,22 @@
 import {HttpClient, HttpResponse} from '@angular/common/http';
 import {Injectable} from '@angular/core';
 import {NGXLogger} from 'ngx-logger';
 import {environment} from '../../environments/environment';
 import {Observable} from 'rxjs';
@Injectable()
 export class RestService {
  private currentLocation = 'http://' + environment.location + ':' + environment.port + '/';
  constructor(
    private logger: NGXLogger,
    private http: HttpClient
  ) {
  }
  testCall(): Observable<string> {
    const url = this.currentLocation + 'test/';
    this.logger.debug('Performing test rest call on', url);
    return this.http.get<string>(url);
  }
 }
--- a/frontend/src/app/services/websocket.service.ts
+++ b/frontend/src/app/services/websocket.service.ts
@ -0,0 +1,52 @@
 import {Injectable} from '@angular/core';
 import {NGXLogger} from 'ngx-logger';
 import {fromEvent, interval, Observable} from 'rxjs';
 import {environment} from '../../environments/environment';
 import {WSEvents} from '../interfaces/interface';
@Injectable({
  providedIn: 'root'
 })
 export class WebsocketService {
  private wsEndpoint = environment.ws_location + ':' + environment.ws_port + '/test-ws-endpoint/';
  private readonly ws: WebSocket;
  private wsEvents: WSEvents;
  constructor(private logger: NGXLogger) {
    this.logger.debug('Initiating ws connection on', this.wsEndpoint);
    this.ws = new WebSocket(this.wsEndpoint);
    interval(5000).subscribe(() => {
      // continuously check if the connection is still open
      if (this.ws.readyState !== WebSocket.OPEN) {
        this.logger.error('Lost websocket connection ...', this.ws);
      }
    });
  }
  wsTestCall(msg: string): WSEvents {
    this.logger.debug(
      'Performing ws test call',
      'current ws ready state ==', this.ws.readyState + ',',
      'expected == 1 == open');
    if (this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(msg);
    } else {
      return undefined;
    }
    if (!this.wsEvents) {
      this.wsEvents = {
        message: fromEvent(this.ws, 'message'),
        error: fromEvent(this.ws, 'error'),
        close: fromEvent(this.ws, 'close')
      };
    }
    return this.wsEvents;
  }
 }
--- a/frontend/src/assets/.gitkeep
+++ b/frontend/src/assets/.gitkeep
--- a/frontend/src/assets/dsg_logo.png
+++ b/frontend/src/assets/dsg_logo.png
--- a/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
@ -1,71 +0,0 @@
 <template>
    <div class="hello">
        <h1>Advanced Internet Computing 2019/20</h1>
        <p>Connection to API server: <span class="status" v-bind:class="{success}">{{ serverStatus }}</span></p>
    </div>
 </template>
 <script lang="ts">
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import axios from "axios";
 import config from "../config";
@Component
 export default class HelloWorld extends Vue {
    @Prop() private msg!: string;
    private serverStatus: string = "unknown";
    private success: boolean = false;
    constructor() {
      super();
    }
    async created() {
      try {
        const response = await axios.get(`${config.apiUrl}/health`);
        if (response.status === 200) {
          this.serverStatus = "ok :-)";
          this.success = true;
        } else {
          this.serverStatus = `unknown (?)`;
          this.success = false;
        }
      } catch (e) {
        this.serverStatus = `unknown (${e.name}: ${e.message})`;
        this.success = false;
      }
      // eslint-disable-next-line no-console
      console.log("yay created");
    }
 }
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
    h3 {
        margin: 40px 0 0;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
    span.status {
        font-weight: bold;
        color: red;
    }
    span.status.success {
        color: darkgreen;
    }
 </style>
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@ -1,4 +0,0 @@
 export default {
  apiUrl: "http://localhost:3000"
 }
--- a/frontend/src/environments/environment.prod.ts
+++ b/frontend/src/environments/environment.prod.ts
@ -0,0 +1,9 @@
 import {NgxLoggerLevel} from 'ngx-logger';
 export const environment = {
  production: true,
  location: window.location.hostname,
  port: 8000,
  ws_url_root: 'ws://' + window.location.hostname + ':' + window.location.port + '/',
  log_level: NgxLoggerLevel.WARN,
 };
--- a/frontend/src/environments/environment.ts
+++ b/frontend/src/environments/environment.ts
@ -0,0 +1,23 @@
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 import {NgxLoggerLevel} from 'ngx-logger';
 export const environment = {
  production: false,
  location: 'localhost',
  port: 8000,
  ws_location: 'ws://127.0.0.1',
  ws_port: 8000,
  log_level: NgxLoggerLevel.DEBUG,
 };
 /*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
 // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
--- a/frontend/src/favicon.ico
+++ b/frontend/src/favicon.ico
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@ -0,0 +1,17 @@
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <title>AppFe</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
  <app-landing></app-landing>
 </body>
 </html>
 <!--<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>-->
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>-->
 <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>-->
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@ -1,8 +1,12 @@
-import Vue from 'vue'
+import { enableProdMode } from '@angular/core';
-import App from './App.vue'
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-Vue.config.productionTip = false
+import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
-new Vue({
+if (environment.production) {
-  render: h => h(App),
+  enableProdMode();
-}).$mount('#app')
+}
 platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
--- a/frontend/src/polyfills.ts
+++ b/frontend/src/polyfills.ts
@ -0,0 +1,79 @@
 /**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */
 /***************************************************************************************************
 * BROWSER POLYFILLS
 */
 (window as any).global = window;
 /** IE9, IE10 and IE11 requires all of the following polyfills. **/
 // import 'core-js/es6/symbol';
 // import 'core-js/es6/object';
 // import 'core-js/es6/function';
 // import 'core-js/es6/parse-int';
 // import 'core-js/es6/parse-float';
 // import 'core-js/es6/number';
 // import 'core-js/es6/math';
 // import 'core-js/es6/string';
 // import 'core-js/es6/date';
 // import 'core-js/es6/array';
 // import 'core-js/es6/regexp';
 // import 'core-js/es6/map';
 // import 'core-js/es6/weak-map';
 // import 'core-js/es6/set';
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 /** IE10 and IE11 requires the following for the Reflect API. */
 // import 'core-js/es6/reflect';
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 // import 'core-js/es7/reflect';
 /**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 /**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */
 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 /**
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
 // (window as any).__Zone_enable_cross_context_check = true;
 /***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
 import 'zone.js/dist/zone'; // Included with Angular CLI.
 /***************************************************************************************************
 * APPLICATION IMPORTS
 */
 import '@angular/localize/init';
--- a/frontend/src/shims-tsx.d.ts
+++ b/frontend/src/shims-tsx.d.ts
@ -1,13 +0,0 @@
 import Vue, { VNode } from 'vue'
 declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
 }
--- a/frontend/src/shims-vue.d.ts
+++ b/frontend/src/shims-vue.d.ts
@ -1,4 +0,0 @@
 declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
 }
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@ -0,0 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import '~bootstrap/dist/css/bootstrap.min.css';
 body {
  width: 95%;
  margin: auto;
 }
--- a/frontend/src/test.ts
+++ b/frontend/src/test.ts
@ -0,0 +1,25 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 declare const require: {
  context(path: string, deep?: boolean, filter?: RegExp): {
    keys(): string[];
    <T>(id: string): T;
  };
 };
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.
 context.keys().map(context);
--- a/frontend/src/theme.scss
+++ b/frontend/src/theme.scss
@ -0,0 +1,20 @@
@import '~@angular/material/theming';
@include mat-core();
 $my-app-primary: mat-palette($mat-grey);
 $my-app-accent: mat-palette($mat-amber, 500, 900, A100);
 $my-app-warn: mat-palette($mat-red, 700, 900);
 $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
 .alternate-theme {
  $alternate-primary: mat-palette($mat-light-blue);
  $alternate-accent: mat-palette($mat-yellow, 400);
  $alternate-theme: mat-light-theme($alternate-primary, $alternate-accent);
  @include angular-material-theme($alternate-theme);
 }
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@ -0,0 +1,15 @@
 /* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
 }
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -1,39 +1,23 @@
 /* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
-    "strict": true,
+    "outDir": "./dist/out-tsc",
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
-    "baseUrl": ".",
+    "declaration": false,
-    "types": [
+    "moduleResolution": "node",
-      "webpack-env"
+    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
-      "esnext",
+      "es2017",
-      "dom",
+      "dom"
-      "dom.iterable",
+    ],
-      "scripthost"
+    "allowJs": true
-    ]
+  }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
 }
--- a/frontend/tslint.json
+++ b/frontend/tslint.json
@ -0,0 +1,142 @@
 {
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules": {
    "arrow-return-shorthand": true,
    "callable-types": true,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "deprecation": {
      "severity": "warn"
    },
    "eofline": true,
    "forin": true,
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "import-spacing": true,
    "indent": [
      true,
      "spaces"
    ],
    "interface-over-type-literal": true,
    "label-position": true,
    "max-line-length": [
      true,
      140
    ],
    "member-access": false,
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-super": true,
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [
      true,
      "ignore-params"
    ],
    "no-misused-new": true,
    "no-non-null-assertion": true,
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": true,
    "no-unnecessary-initializer": true,
    "no-unused-expression": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "prefer-const": true,
    "quotemark": [
      true,
      "single"
    ],
    "radix": true,
    "semicolon": [
      true,
      "always"
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "unified-signatures": true,
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],
    "directive-selector": [
      true,
      "attribute",
      "app",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "app",
      "kebab-case"
    ],
    "no-output-on-prefix": true,
    "use-input-property-decorator": true,
    "use-output-property-decorator": true,
    "use-host-property-decorator": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-life-cycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true
  }
 }
--- a/middleware/.gitignore
+++ b/middleware/.gitignore
@ -0,0 +1,6 @@
 venv
 *.pyc
 staticfiles
 .env
 *.sqlite3
 homeschooling_be_app.egg-info
--- a/middleware/.run/createsuperuser.run.xml
+++ b/middleware/.run/createsuperuser.run.xml
@ -0,0 +1,24 @@
 <component name="ProjectRunConfigurationManager">
  <configuration default="false" name="createsuperuser" type="PythonConfigurationType" factoryName="Python">
    <module name="middleware" />
    <option name="INTERPRETER_OPTIONS" value="" />
    <option name="PARENT_ENVS" value="true" />
    <envs>
      <env name="PYTHONUNBUFFERED" value="1" />
    </envs>
    <option name="SDK_HOME" value="" />
    <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
    <option name="IS_MODULE_SDK" value="true" />
    <option name="ADD_CONTENT_ROOTS" value="true" />
    <option name="ADD_SOURCE_ROOTS" value="true" />
    <EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
    <option name="SCRIPT_NAME" value="$PROJECT_DIR$/manage.py" />
    <option name="PARAMETERS" value="createsuperuser" />
    <option name="SHOW_COMMAND_LINE" value="false" />
    <option name="EMULATE_TERMINAL" value="false" />
    <option name="MODULE_MODE" value="false" />
    <option name="REDIRECT_INPUT" value="false" />
    <option name="INPUT_FILE" value="" />
    <method v="2" />
  </configuration>
 </component>
--- a/middleware/.run/makemigrations.run.xml
+++ b/middleware/.run/makemigrations.run.xml
@ -0,0 +1,24 @@
 <component name="ProjectRunConfigurationManager">
  <configuration default="false" name="makemigrations" type="PythonConfigurationType" factoryName="Python">
    <module name="middleware" />
    <option name="INTERPRETER_OPTIONS" value="" />
    <option name="PARENT_ENVS" value="true" />
    <envs>
      <env name="PYTHONUNBUFFERED" value="1" />
    </envs>
    <option name="SDK_HOME" value="" />
    <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
    <option name="IS_MODULE_SDK" value="true" />
    <option name="ADD_CONTENT_ROOTS" value="true" />
    <option name="ADD_SOURCE_ROOTS" value="true" />
    <EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
    <option name="SCRIPT_NAME" value="$PROJECT_DIR$/manage.py" />
    <option name="PARAMETERS" value="makemigrations app_be" />
    <option name="SHOW_COMMAND_LINE" value="false" />
    <option name="EMULATE_TERMINAL" value="false" />
    <option name="MODULE_MODE" value="false" />
    <option name="REDIRECT_INPUT" value="false" />
    <option name="INPUT_FILE" value="" />
    <method v="2" />
  </configuration>
 </component>
--- a/middleware/.run/migrate.run.xml
+++ b/middleware/.run/migrate.run.xml
@ -0,0 +1,24 @@
 <component name="ProjectRunConfigurationManager">
  <configuration default="false" name="migrate" type="PythonConfigurationType" factoryName="Python">
    <module name="middleware" />
    <option name="INTERPRETER_OPTIONS" value="" />
    <option name="PARENT_ENVS" value="true" />
    <envs>
      <env name="PYTHONUNBUFFERED" value="1" />
    </envs>
    <option name="SDK_HOME" value="" />
    <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
    <option name="IS_MODULE_SDK" value="true" />
    <option name="ADD_CONTENT_ROOTS" value="true" />
    <option name="ADD_SOURCE_ROOTS" value="true" />
    <EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
    <option name="SCRIPT_NAME" value="$PROJECT_DIR$/manage.py" />
    <option name="PARAMETERS" value="migrate" />
    <option name="SHOW_COMMAND_LINE" value="false" />
    <option name="EMULATE_TERMINAL" value="false" />
    <option name="MODULE_MODE" value="false" />
    <option name="REDIRECT_INPUT" value="false" />
    <option name="INPUT_FILE" value="" />
    <method v="2" />
  </configuration>
 </component>
--- a/middleware/.run/runserver.run.xml
+++ b/middleware/.run/runserver.run.xml
@ -0,0 +1,24 @@
 <component name="ProjectRunConfigurationManager">
  <configuration default="false" name="runserver" type="PythonConfigurationType" factoryName="Python">
    <module name="middleware" />
    <option name="INTERPRETER_OPTIONS" value="" />
    <option name="PARENT_ENVS" value="true" />
    <envs>
      <env name="PYTHONUNBUFFERED" value="1" />
    </envs>
    <option name="SDK_HOME" value="" />
    <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
    <option name="IS_MODULE_SDK" value="true" />
    <option name="ADD_CONTENT_ROOTS" value="true" />
    <option name="ADD_SOURCE_ROOTS" value="true" />
    <EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
    <option name="SCRIPT_NAME" value="$PROJECT_DIR$/manage.py" />
    <option name="PARAMETERS" value="runserver" />
    <option name="SHOW_COMMAND_LINE" value="false" />
    <option name="EMULATE_TERMINAL" value="false" />
    <option name="MODULE_MODE" value="false" />
    <option name="REDIRECT_INPUT" value="false" />
    <option name="INPUT_FILE" value="" />
    <method v="2" />
  </configuration>
 </component>
--- a/middleware/Dockerfile
+++ b/middleware/Dockerfile
@ -0,0 +1,19 @@
 FROM python:3.8-slim
 ENV PYTHONUNBUFFERED 1
 RUN apt-get update
 RUN apt-get install -y build-essential gcc
 RUN python -m venv /opt/venv
 ENV PATH="/opt/venv/bin:$PATH"
 RUN python -m pip install --upgrade pip
 ENV PATH="/opt/venv/bin:$PATH"
 RUN mkdir /code
 WORKDIR /code
 COPY setup.py /code/
 COPY requirements.txt /code/
 RUN pip install -r requirements.txt
 COPY . /code/
--- a/middleware/Pipfile
+++ b/middleware/Pipfile
@ -0,0 +1,21 @@
 [[source]]
 url = "https://pypi.python.org/simple"
 verify_ssl = true
 name = "pypi"
 [requires]
 python_version = "3.6"
 [packages]
 "psycopg2-binary" = "*"
 django-heroku = "*"
 gunicorn = "*"
 [dev-packages]
--- a/middleware/Procfile
+++ b/middleware/Procfile
@ -0,0 +1 @@
 web: gunicorn app_be.wsgi
--- a/middleware/README.md
+++ b/middleware/README.md
@ -0,0 +1,55 @@
 # Heroku Django Starter Template
 An utterly fantastic project starter template for Django 2.0.
 ## Features
 - Production-ready configuration for Static Files, Database Settings, Gunicorn, etc.
 - Enhancements to Django's static file serving functionality via WhiteNoise.
 - Latest Python 3.6 runtime environment.
 ## How to Use
 To use this project, follow these steps:
 1. Create your working environment.
 2. Install Django (`$ pipenv install django`)
 3. Create a new project using this template
 ## Creating Your Project
 Using this template to create a new Django app is easy::
    $ django-admin.py startproject --template=https://github.com/heroku/heroku-django-template/archive/master.zip --name=Procfile helloworld
 (If this doesn't work on windows, replace `django-admin.py` with `django-admin`)
 You can replace ``helloworld`` with your desired project name.
 ## Deployment to Heroku
    $ git init
    $ git add -A
    $ git commit -m "Initial commit"
    $ heroku create
    $ git push heroku master
    $ heroku run python manage.py migrate
 See also, a [ready-made application](https://github.com/heroku/python-getting-started), ready to deploy.
 ## License: MIT
 ## Further Reading
 - [Gunicorn](https://warehouse.python.org/project/gunicorn/)
 - [WhiteNoise](https://warehouse.python.org/project/whitenoise/)
 - [dj-database-url](https://warehouse.python.org/project/dj-database-url/)
 # ERROR handling
 <em>Microsoft Visual C++ 14.0 or greater is required. Get it with "Microsoft C++ Build Tools"</em>
 <br>Install missing deps https://visualstudio.microsoft.com/visual-cpp-build-tools/
--- a/middleware/init.py
+++ b/middleware/init.py
--- a/middleware/app_be/init.py
+++ b/middleware/app_be/init.py
--- a/middleware/app_be/admin.py
+++ b/middleware/app_be/admin.py
@ -0,0 +1,3 @@
 from django.contrib import admin
 # Register your models here.
--- a/middleware/app_be/apps.py
+++ b/middleware/app_be/apps.py
@ -0,0 +1,5 @@
 from django.apps import AppConfig
 class AppBeConfig(AppConfig):
    name = 'app_be'
--- a/middleware/app_be/models.py
+++ b/middleware/app_be/models.py
@ -0,0 +1,3 @@
 from django.db import models
 # Create your models here.
--- a/middleware/app_be/routing.py
+++ b/middleware/app_be/routing.py
@ -0,0 +1,17 @@
 from django.conf.urls import url
 from channels.routing import ProtocolTypeRouter, URLRouter
 from channels.sessions import SessionMiddlewareStack
 from django.core.asgi import get_asgi_application
 from .views.ws_api import CustomConsumer
 application = ProtocolTypeRouter({
    # Django's ASGI application to handle traditional HTTP requests
    "http": get_asgi_application(),
    # WebSocket send handler
    "websocket": SessionMiddlewareStack(URLRouter([
        url(r"^test-ws-endpoint/$", CustomConsumer.as_asgi()),
    ]))
 })
--- a/middleware/app_be/serializers.py
+++ b/middleware/app_be/serializers.py
@ -0,0 +1,3 @@
 from rest_framework import serializers
 # add serializer here
--- a/middleware/app_be/services/data_factory.py
+++ b/middleware/app_be/services/data_factory.py
--- a/middleware/app_be/services/tests/test_data_factory.py
+++ b/middleware/app_be/services/tests/test_data_factory.py
--- a/middleware/app_be/settings.py
+++ b/middleware/app_be/settings.py
@ -0,0 +1,224 @@
 """
 For more information on this file, see
 https://docs.djangoproject.com/en/2.0/topics/settings/
 For the full list of settings and their values, see
 https://docs.djangoproject.com/en/2.0/ref/settings/
 """
 import datetime
 import os
 # set the websocket routing module location here
 ASGI_APPLICATION = 'app_be.routing.application'
 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/
 # SECURITY WARNING: keep the secret key used in production secret!
 SECRET_KEY = "{{ secret_key }}"
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 # Application definition
 INSTALLED_APPS = [
    'app_be',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'channels',
    'rest_framework'
 ]
 MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
 """
 default permission and authentication classes
 sets the standard privileges needed to access an api
 for now, no classes necessary and therefore disabled!
 """
 REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        # 'rest_framework.permissions.IsAuthenticated',  # last comma is MANDATORY
        []
    ),
    'DEFAULT_AUTHENTICATION_CLASSES': (
        # 'rest_framework_jwt.authentication.JSONWebTokenAuthentication',  # last comma is MANDATORY
        []
    )
 }
 # configuration of jason web token authentication
 JWT_AUTH = {
    'JWT_VERIFY': True,
    'JWT_AUTH_HEADER_PREFIX': 'Bearer',
    'JWT_ALLOW_REFRESH': True,
    # 60 minutes
    'JWT_EXPIRATION_DELTA': datetime.timedelta(seconds=3600),
    # debug 10 seconds
    # 'JWT_EXPIRATION_DELTA': datetime.timedelta(seconds=10),
 }
 if DEBUG:
    # install corsheaders to enable to run
    # the rest (django) an gui (angular) server on two different ports
    INSTALLED_APPS.append("corsheaders")
    MIDDLEWARE.append('corsheaders.middleware.CorsMiddleware')
    MIDDLEWARE.append('django.middleware.common.BrokenLinkEmailsMiddleware')
    MIDDLEWARE.append('django.middleware.common.CommonMiddleware')
    CORS_ORIGIN_ALLOW_ALL = True
    ALLOWED_HOSTS = [
        "*"
    ]
 else:
    ALLOWED_HOSTS = [
        "*",
        "127.0.0.1"
    ]
 print(DEBUG)
 print(MIDDLEWARE)
 ROOT_URLCONF = 'app_be.urls'
 TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
            'debug': DEBUG,
        },
    },
 ]
 WSGI_APPLICATION = 'app_be.wsgi.application'
 # Database
 # https://docs.djangoproject.com/en/2.0/ref/settings/#databases
 DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
 }
 AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
 ]
 # Internationalization
 # https://docs.djangoproject.com/en/2.0/topics/i18n/
 LANGUAGE_CODE = 'en-us'
 TIME_ZONE = 'UTC'
 USE_I18N = True
 USE_L10N = True
 USE_TZ = True
 # Change 'default' database configuration with $DATABASE_URL.
 # DATABASES['default'].update(dj_database_url.config(conn_max_age=500, ssl_require=True))
 # Honor the 'X-Forwarded-Proto' header for request.is_secure()
 SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/2.0/howto/static-files/
 STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')
 STATIC_URL = '/static/'
 # Extra places for collectstatic to find static files.
 STATICFILES_DIRS = [
    os.path.join(PROJECT_ROOT, 'static'),
 ]
 # Simplified static file serving.
 # https://warehouse.python.org/project/whitenoise/
 STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
 LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'formatters': {
        'verbose': {
            'format': '{asctime} - {levelname}: {message} ({pathname}:{lineno})',
            'style': '{',
        }
    },
    'handlers': {
        'console': {
            'level': 'DEBUG',
            'class': 'logging.StreamHandler',
            'formatter': 'verbose'
        },
        'logfile': {
            'level': 'DEBUG',
            'class': 'logging.FileHandler',
            'filename': BASE_DIR + "/../logfile",
            'formatter': 'verbose'
        },
    },
    'loggers': {
        'rdg': {
            'handlers': ['console', 'logfile'],
            'level': 'DEBUG',
        },
        'rdg_rest': {
            'handlers': ['console', 'logfile'],
            'level': 'DEBUG',
        },
        'rdg_angular': {
            'handlers': ['console', 'logfile'],
            'level': 'DEBUG',
        },
    },
    'root': {
        'level': 'DEBUG',
        'handlers': []  # pass a empty list to avoid duplicte log entries
    },
 }
 # increase the maximum upload size of files
 DATA_UPLOAD_MAX_MEMORY_SIZE = 104857600
--- a/middleware/app_be/tests.py
+++ b/middleware/app_be/tests.py
@ -0,0 +1,15 @@
 from django.test import TestCase
 # Create your tests here.
 from rest_framework import status
 from rest_framework.test import APITestCase
 class AccountTests(APITestCase):
    def test_create_account(self):
        """
        Ensure we can create a new account object.
        """
        url = '/test/'
        response = self.client.get(url, format='json')
        self.assertEqual(response.status_code, status.HTTP_200_OK)
--- a/middleware/app_be/urls.py
+++ b/middleware/app_be/urls.py
@ -0,0 +1,30 @@
 """{{ project_name }} URL Configuration
 The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.0/topics/http/urls/
 Examples:
 Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
 Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
 Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.conf.urls import url
 from django.contrib import admin
 from django.urls import path
 from rest_framework.routers import DefaultRouter
 from app_be.views.rest_api import TestApiClass
 urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^test/', TestApiClass.test_api),
 ]
 router = DefaultRouter()
 urlpatterns.extend(router.urls)
--- a/middleware/app_be/views/init.py
+++ b/middleware/app_be/views/init.py
--- a/middleware/app_be/views/rest_api.py
+++ b/middleware/app_be/views/rest_api.py
@ -0,0 +1,15 @@
 import logging
 from django.http import JsonResponse
 from rest_framework.decorators import api_view
 logger = logging.getLogger(__name__)
 class TestApiClass:
    @staticmethod
    @api_view(['GET'])
    def test_api(request):
        logger.debug('Test api call: {}'.format(request))
        return JsonResponse({'Result': 'success'}, safe=False)
--- a/middleware/app_be/views/tests/init.py
+++ b/middleware/app_be/views/tests/init.py
--- a/middleware/app_be/views/tests/test_rest_api.py
+++ b/middleware/app_be/views/tests/test_rest_api.py
--- a/middleware/app_be/views/tests/test_ws_api.py
+++ b/middleware/app_be/views/tests/test_ws_api.py
--- a/middleware/app_be/views/ws_api.py
+++ b/middleware/app_be/views/ws_api.py
@ -0,0 +1,18 @@
 import logging
 from channels.generic.websocket import WebsocketConsumer
 logger = logging.getLogger(__name__)
 class CustomConsumer(WebsocketConsumer):
    def connect(self):
        self.accept()
    def receive(self, text_data=None, bytes_data=None):
        self.send('1. response: {}'.format(text_data))
        self.send('2. response: {}'.format(text_data))
    def disconnect(self, code):
        pass
--- a/middleware/app_be/wsgi.py
+++ b/middleware/app_be/wsgi.py
@ -0,0 +1,16 @@
 """
 WSGI config for {{ project_name }} project.
 It exposes the WSGI callable as a module-level variable named ``application``.
 For more information on this file, see
 https://docs.djangoproject.com/en/2.0/howto/deployment/wsgi/
 """
 import os
 from django.core.wsgi import get_wsgi_application
 os.environ.setdefault("DJANGO_SETTINGS_MODULE", "{{ app_be }}.settings")
 application = get_wsgi_application()
--- a/middleware/manage.py
+++ b/middleware/manage.py
@ -0,0 +1,15 @@
 #!/usr/bin/env python
 import os
 import sys
 if __name__ == "__main__":
    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "app_be.settings")
    try:
        from django.core.management import execute_from_command_line
    except ImportError as exc:
        raise ImportError(
            "Couldn't import Django. Are you sure it's installed and "
            "available on your PYTHONPATH environment variable? Did you "
            "forget to activate a virtual environment?"
        )
    execute_from_command_line(sys.argv)
--- a/middleware/requirements.txt
+++ b/middleware/requirements.txt
@ -0,0 +1,2 @@
 # install setup.py in dev mode
 -e .
--- a/middleware/setup.py
+++ b/middleware/setup.py
@ -0,0 +1,23 @@
 import os
 from setuptools import find_packages, setup
 # allow setup.py to be run from any path
 os.chdir(os.path.normpath(os.path.join(os.path.abspath(__file__), os.pardir)))
 setup(
    name='homeschooling-be-app',
    version='0.0.0',
    packages=find_packages(),
    include_package_data=True,
    install_requires=[
        'Django==3.0.5',
        'djangorestframework==3.12.1',
        'djangorestframework-jwt==1.11.0',
        'django-cors-headers==3.5.0',
        'channels==3.0.1',
        'channels_redis==3.2.0',
        'whitenoise==5.2.0',
    ],
    license='BSD License',  # example license
    description='DESCRIPTION'
 )
		`@ -1,2 +0,0 @@`
			`github.com/gorilla/mux v1.7.3 h1:gnP5JzjVOuiZD07fKKToCAOjS0yOpj/qPETTXCCS6hw=`
			`github.com/gorilla/mux v1.7.3/go.mod h1:1lud6UwP+6orDFRuTfBEV8e9/aOM/c4fVVCaMa2zaAs=`
		`@ -1,4 +0,0 @@`
			`# Color-Service`

			`Important: This is not meant to be extended and only serves as an example to show how to call another service orchestrated by Docker Compose`
		`@ -0,0 +1 @@`
							`<p>{{message}} <button mat-raised-button (click)="buttonClickedEvent.emit()">Click me</button></p>`
		`@ -0,0 +1,3 @@`
							`from django.contrib import admin`

							`# Register your models here.`
		`@ -0,0 +1,3 @@`
							`from django.db import models`

							`# Create your models here.`
		`@ -0,0 +1,3 @@`
							`from rest_framework import serializers`

							`# add serializer here`