diff --git a/angular.json b/angular.json
index 4de689e..a04f750 100644
--- a/angular.json
+++ b/angular.json
@@ -84,10 +84,7 @@
               "apps/sample-platform/tsconfig.app.json",
               "apps/sample-platform/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**",
-              "!apps/sample-platform/**"
-            ]
+            "exclude": ["**/node_modules/**", "!apps/sample-platform/**"]
           }
         },
         "test": {
@@ -122,13 +119,8 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "apps/sample-platform-e2e/tsconfig.e2e.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!apps/sample-platform-e2e/**"
-            ]
+            "tsConfig": ["apps/sample-platform-e2e/tsconfig.e2e.json"],
+            "exclude": ["**/node_modules/**", "!apps/sample-platform-e2e/**"]
           }
         }
       }
@@ -146,9 +138,7 @@
             "outputPath": "dist/apps/api",
             "main": "apps/api/src/main.ts",
             "tsConfig": "apps/api/tsconfig.app.json",
-            "assets": [
-              "apps/api/src/assets"
-            ]
+            "assets": ["apps/api/src/assets"]
           },
           "configurations": {
             "production": {
@@ -177,10 +167,7 @@
               "apps/api/tsconfig.app.json",
               "apps/api/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**",
-              "!apps/api/**"
-            ]
+            "exclude": ["**/node_modules/**", "!apps/api/**"]
           }
         },
         "test": {
@@ -320,10 +307,7 @@
               "libs/testing/tsconfig.lib.json",
               "libs/testing/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/testing/**"
-            ]
+            "exclude": ["**/node_modules/**", "!libs/testing/**"]
           }
         },
         "test": {
@@ -380,10 +364,7 @@
               "libs/api-implementation/xml/tsconfig.lib.json",
               "libs/api-implementation/xml/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/api-implementation/xml/**"
-            ]
+            "exclude": ["**/node_modules/**", "!libs/api-implementation/xml/**"]
           }
         },
         "test": {
@@ -488,6 +469,67 @@
           "style": "scss"
         }
       }
+    },
+    "api-implementation-samples": {
+      "root": "libs/api-implementation/samples",
+      "sourceRoot": "libs/api-implementation/samples/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/api-implementation/samples/tsconfig.lib.json",
+              "libs/api-implementation/samples/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/api-implementation/samples/**"
+            ]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/api-implementation/samples/jest.config.js",
+            "tsConfig": "libs/api-implementation/samples/tsconfig.spec.json",
+            "passWithNoTests": true
+          }
+        }
+      }
+    },
+    "frontend-samples": {
+      "projectType": "library",
+      "root": "libs/frontend/samples",
+      "sourceRoot": "libs/frontend/samples/src",
+      "prefix": "new-sample-platform",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/frontend/samples/tsconfig.lib.json",
+              "libs/frontend/samples/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!libs/frontend/samples/**"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/frontend/samples/jest.config.js",
+            "tsConfig": "libs/frontend/samples/tsconfig.spec.json",
+            "passWithNoTests": true,
+            "setupFile": "libs/frontend/samples/src/test-setup.ts"
+          }
+        }
+      },
+      "schematics": {
+        "@nrwl/angular:component": {
+          "style": "scss"
+        }
+      }
     }
   },
   "cli": {
@@ -504,4 +546,4 @@
     }
   },
   "defaultProject": "sample-platform"
-}
\ No newline at end of file
+}
diff --git a/apps/api/src/app/app.module.ts b/apps/api/src/app/app.module.ts
index ed57d36..06638e6 100644
--- a/apps/api/src/app/app.module.ts
+++ b/apps/api/src/app/app.module.ts
@@ -2,11 +2,17 @@ import { Module } from '@nestjs/common';
 
 import { AppController } from './app.controller';
 import { VMOrchestrationModule } from '../../../../libs/api-implementation/orchestration/src';
-import { ApiImplementationRegressionTestsModule } from '../../../../libs/api-implementation/regression-tests/src'
-import { ApiImplementationDatabaseModule } from '../../../../libs/api-implementation/database/src'
+import { ApiImplementationRegressionTestsModule } from '@new-sample-platform/api-implementation/regression-tests';
+import { ApiImplementationDatabaseModule } from '@new-sample-platform/api-implementation/database';
+import { ApiImplementationSamplesModule } from '@new-sample-platform/api-implementation/samples'
 
 @Module({
-  imports: [VMOrchestrationModule, ApiImplementationRegressionTestsModule, ApiImplementationDatabaseModule],
+  imports: [
+    VMOrchestrationModule,
+    ApiImplementationRegressionTestsModule,
+    ApiImplementationDatabaseModule,
+    ApiImplementationSamplesModule
+  ],
   controllers: [AppController],
   providers: [],
 })
diff --git a/apps/sample-platform/proxy.conf.json b/apps/sample-platform/proxy.conf.json
index 62a1e7b..37da373 100644
--- a/apps/sample-platform/proxy.conf.json
+++ b/apps/sample-platform/proxy.conf.json
@@ -1,6 +1,8 @@
 {
-  "/api": {
-    "target": "http://localhost:3333",
-    "secure": false
+  "/api/*": {
+      "target": "http://localhost:3333",
+      "secure": false,
+      "changeOrigin": true,
+      "logLevel": "debug"
   }
-}
+}
\ No newline at end of file
diff --git a/apps/sample-platform/src/app/app.module.ts b/apps/sample-platform/src/app/app.module.ts
index cf184b2..34e18d4 100644
--- a/apps/sample-platform/src/app/app.module.ts
+++ b/apps/sample-platform/src/app/app.module.ts
@@ -1,6 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
 import { RoutingModule } from './routing.module';
@@ -15,6 +16,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 @NgModule({
   declarations: [AppComponent],
   imports: [
+    FlexLayoutModule,
     BrowserModule,
     HttpClientModule,
     RoutingModule,
diff --git a/apps/sample-platform/src/app/routing.module.ts b/apps/sample-platform/src/app/routing.module.ts
index 31965d8..40e1a61 100644
--- a/apps/sample-platform/src/app/routing.module.ts
+++ b/apps/sample-platform/src/app/routing.module.ts
@@ -13,6 +13,13 @@ const routes: Routes = [
         (mod) => mod.FrontendRegressionTestModule
       )
   },
+  {
+    path: 'samples',
+    loadChildren: () =>
+      import('@new-sample-platform/frontend/samples').then(
+        (mod) => mod.FrontendSamplesModule
+      )
+  }
 ];
 
 @NgModule({
diff --git a/config.ts b/config.ts
index 80b35b1..f349d03 100644
--- a/config.ts
+++ b/config.ts
@@ -4,5 +4,6 @@ export enum AppConfig {
   GITHUB_API_LINK = "https://api.github.com/",
   CCEXTRACTOR_REPO_NAME = "ccextractor",
   CCEXTRACTOR_REPO_OWNER = "zelzhan",
-  MONGO_CONNECTION_STRING = "mongodb://mongo:27017/test"
+  MONGO_CONNECTION_STRING = "mongodb://mongo:27017/test",
+  PATH_TO_MOUNTED_BUCKET = "/path/to/bucket/"
 }
diff --git a/libs/api-implementation/samples/README.md b/libs/api-implementation/samples/README.md
new file mode 100644
index 0000000..05bbd81
--- /dev/null
+++ b/libs/api-implementation/samples/README.md
@@ -0,0 +1,7 @@
+# api-implementation-samples
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `ng test api-implementation-samples` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/api-implementation/samples/jest.config.js b/libs/api-implementation/samples/jest.config.js
new file mode 100644
index 0000000..1e4a4d0
--- /dev/null
+++ b/libs/api-implementation/samples/jest.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  name: 'api-implementation-samples',
+  preset: '../../../jest.config.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  coverageDirectory: '../../../coverage/libs/api-implementation/samples',
+};
diff --git a/libs/api-implementation/samples/src/index.ts b/libs/api-implementation/samples/src/index.ts
new file mode 100644
index 0000000..b0fd743
--- /dev/null
+++ b/libs/api-implementation/samples/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/api-implementation-samples.module';
diff --git a/libs/api-implementation/samples/src/lib/api-implementation-samples.module.ts b/libs/api-implementation/samples/src/lib/api-implementation-samples.module.ts
new file mode 100644
index 0000000..6d1cc39
--- /dev/null
+++ b/libs/api-implementation/samples/src/lib/api-implementation-samples.module.ts
@@ -0,0 +1,11 @@
+import { Module } from '@nestjs/common';
+
+import { SamplesController } from './samples.controller'
+import { SamplesService } from './services/samples.service';
+
+@Module({
+  controllers: [SamplesController],
+  providers: [SamplesService],
+  exports: [],
+})
+export class ApiImplementationSamplesModule {}
diff --git a/libs/api-implementation/samples/src/lib/samples.controller.ts b/libs/api-implementation/samples/src/lib/samples.controller.ts
new file mode 100644
index 0000000..8f9c207
--- /dev/null
+++ b/libs/api-implementation/samples/src/lib/samples.controller.ts
@@ -0,0 +1,24 @@
+import {
+  Controller,
+  Post,
+  UseInterceptors,
+  UploadedFile,
+} from '@nestjs/common';
+import { FileInterceptor } from '@nestjs/platform-express';
+import { SamplesService } from './services/samples.service';
+
+@Controller('samples')
+export class SamplesController {
+  constructor(private service: SamplesService) {}
+
+  @Post('upload')
+  @UseInterceptors(FileInterceptor('file'))
+  uploadFile(@UploadedFile() file) {
+    try {
+      this.service.writeToBucket(file);
+    } catch (error) {
+      return 'Error while writing the file to the bucket'
+    }
+    return 200
+  }
+}
diff --git a/libs/api-implementation/samples/src/lib/services/samples.service.ts b/libs/api-implementation/samples/src/lib/services/samples.service.ts
new file mode 100644
index 0000000..1007e69
--- /dev/null
+++ b/libs/api-implementation/samples/src/lib/services/samples.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@nestjs/common';
+import { writeFileSync } from 'fs';
+import { AppConfig } from '../../../../../../config';
+@Injectable()
+export class SamplesService {
+  async writeToBucket(file) {
+    try {
+      writeFileSync(
+        AppConfig.PATH_TO_MOUNTED_BUCKET + file.originalname,
+        file.buffer
+      );
+    } catch (error) {
+      console.error(`Error occured while writing the file to the bucket`);
+      console.debug(error.stack);
+      throw error;
+    }
+  }
+}
diff --git a/libs/api-implementation/samples/tsconfig.json b/libs/api-implementation/samples/tsconfig.json
new file mode 100644
index 0000000..e65708f
--- /dev/null
+++ b/libs/api-implementation/samples/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "jest"],
+    "target": "es6"
+  },
+  "include": ["**/*.ts"]
+}
diff --git a/libs/api-implementation/samples/tsconfig.lib.json b/libs/api-implementation/samples/tsconfig.lib.json
new file mode 100644
index 0000000..9c463b5
--- /dev/null
+++ b/libs/api-implementation/samples/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "rootDir": "./src",
+    "types": ["node"]
+  },
+  "exclude": ["**/*.spec.ts"],
+  "include": ["**/*.ts"]
+}
diff --git a/libs/api-implementation/samples/tsconfig.spec.json b/libs/api-implementation/samples/tsconfig.spec.json
new file mode 100644
index 0000000..1798b37
--- /dev/null
+++ b/libs/api-implementation/samples/tsconfig.spec.json
@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}
diff --git a/libs/api-implementation/samples/tslint.json b/libs/api-implementation/samples/tslint.json
new file mode 100644
index 0000000..2cdd298
--- /dev/null
+++ b/libs/api-implementation/samples/tslint.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../../tslint.json",
+  "linterOptions": { "exclude": ["!**/*"] },
+  "rules": {}
+}
diff --git a/libs/frontend/regression-test/src/lib/containers/list-regression-tests/list-regression-tests.component.ts b/libs/frontend/regression-test/src/lib/containers/list-regression-tests/list-regression-tests.component.ts
index b4582d2..3991369 100644
--- a/libs/frontend/regression-test/src/lib/containers/list-regression-tests/list-regression-tests.component.ts
+++ b/libs/frontend/regression-test/src/lib/containers/list-regression-tests/list-regression-tests.component.ts
@@ -16,7 +16,6 @@ export class ListRegressionTestsComponent implements OnInit {
     this.getData().subscribe((data: any) => {
       this.dataSource = data
     })
-    console.log(this.dataSource)
   }
 
   ngOnInit(): void { }
diff --git a/libs/frontend/samples/README.md b/libs/frontend/samples/README.md
new file mode 100644
index 0000000..d427e2f
--- /dev/null
+++ b/libs/frontend/samples/README.md
@@ -0,0 +1,7 @@
+# frontend-samples
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test frontend-samples` to execute the unit tests.
diff --git a/libs/frontend/samples/jest.config.js b/libs/frontend/samples/jest.config.js
new file mode 100644
index 0000000..02f5566
--- /dev/null
+++ b/libs/frontend/samples/jest.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  name: 'frontend-samples',
+  preset: '../../../jest.config.js',
+  coverageDirectory: '../../../coverage/libs/frontend/samples',
+  snapshotSerializers: [
+    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
+    'jest-preset-angular/build/AngularSnapshotSerializer.js',
+    'jest-preset-angular/build/HTMLCommentSerializer.js',
+  ],
+};
diff --git a/libs/frontend/samples/src/index.ts b/libs/frontend/samples/src/index.ts
new file mode 100644
index 0000000..2228487
--- /dev/null
+++ b/libs/frontend/samples/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/frontend-samples.module';
diff --git a/libs/frontend/samples/src/lib/components/dialog/dialog.component.html b/libs/frontend/samples/src/lib/components/dialog/dialog.component.html
new file mode 100644
index 0000000..7f7804e
--- /dev/null
+++ b/libs/frontend/samples/src/lib/components/dialog/dialog.component.html
@@ -0,0 +1,28 @@
+<input type="file" #file style="display: none" (change)="onFilesAdded()" multiple />
+<div class="container" fxLayout="column" fxLayoutAlign="space-evenly stretch">
+  <h1 mat-dialog-title>Upload Files</h1>
+  <div>
+    <button [disabled]="uploading || uploadSuccessful" mat-raised-button color="primary" class="add-files-btn" (click)="addFiles()">
+      Add Files
+    </button>
+  </div>
+
+  <!-- This is the content of the dialog, containing a list of the files to upload -->
+  <mat-dialog-content fxFlex>
+    <mat-list>
+      <mat-list-item *ngFor="let file of files">
+
+        <h4 mat-line>{{file.name}}</h4>
+
+        <mat-progress-bar *ngIf="progress" mode="determinate" [value]="progress[file.name].progress | async"></mat-progress-bar>
+
+      </mat-list-item>
+    </mat-list>
+  </mat-dialog-content>
+
+  <!-- This are the actions of the dialog, containing the primary and the cancel button-->
+  <mat-dialog-actions class="actions">
+    <button *ngIf="showCancelButton" mat-button mat-dialog-close>Cancel</button>
+    <button mat-raised-button color="primary" [disabled]="!canBeClosed" (click)="closeDialog()">{{primaryButtonText}}</button>
+  </mat-dialog-actions>
+</div>
\ No newline at end of file
diff --git a/libs/frontend/samples/src/lib/components/dialog/dialog.component.scss b/libs/frontend/samples/src/lib/components/dialog/dialog.component.scss
new file mode 100644
index 0000000..5a6d0f6
--- /dev/null
+++ b/libs/frontend/samples/src/lib/components/dialog/dialog.component.scss
@@ -0,0 +1,19 @@
+ 
+.add-files-btn {
+    float: right;
+  }
+  
+  :host {
+    height: 100%;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+  
+  .actions {
+    justify-content: flex-end;
+  }
+  
+  .container {
+    height: 100%;
+  }
\ No newline at end of file
diff --git a/libs/frontend/samples/src/lib/components/dialog/dialog.component.ts b/libs/frontend/samples/src/lib/components/dialog/dialog.component.ts
new file mode 100644
index 0000000..95dd2fa
--- /dev/null
+++ b/libs/frontend/samples/src/lib/components/dialog/dialog.component.ts
@@ -0,0 +1,90 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { UploadService } from '../../services/upload.service';
+import { forkJoin } from 'rxjs';
+
+@Component({
+  selector: 'new-sample-platform-dialog',
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.scss'],
+})
+export class DialogComponent implements OnInit {
+  progress;
+  canBeClosed = true;
+  primaryButtonText = 'Upload';
+  showCancelButton = true;
+  uploading = false;
+  uploadSuccessful = false;
+
+  @ViewChild('file', { static: false }) file;
+
+  public files: Set<File> = new Set();
+
+  constructor(
+    public dialogRef: MatDialogRef<DialogComponent>,
+    public uploadService: UploadService
+  ) {}
+
+  ngOnInit() {}
+
+  onFilesAdded() {
+    const files: { [key: string]: File } = this.file.nativeElement.files;
+    for (let key in files) {
+      if (!isNaN(parseInt(key))) {
+        this.files.add(files[key]);
+      }
+    }
+  }
+
+  addFiles() {
+    this.file.nativeElement.click();
+  }
+
+  closeDialog() {
+    // if everything was uploaded already, just close the dialog
+    if (this.uploadSuccessful) {
+      return this.dialogRef.close();
+    }
+
+    // set the component state to "uploading"
+    this.uploading = true;
+
+    // start the upload and save the progress map
+    this.progress = this.uploadService.upload(this.files);
+    console.log(this.progress);
+    for (const key in this.progress) {
+      this.progress[key].progress.subscribe((val) => console.log(val));
+    }
+
+    // convert the progress map into an array
+    const allProgressObservables = [];
+    for (let key in this.progress) {
+      allProgressObservables.push(this.progress[key].progress);
+    }
+
+    // Adjust the state variables
+
+    // The OK-button should have the text "Finish" now
+    this.primaryButtonText = 'Finish';
+
+    // The dialog should not be closed while uploading
+    this.canBeClosed = false;
+    this.dialogRef.disableClose = true;
+
+    // Hide the cancel-button
+    this.showCancelButton = false;
+
+    // When all progress-observables are completed...
+    forkJoin(allProgressObservables).subscribe((end) => {
+      // ... the dialog can be closed again...
+      this.canBeClosed = true;
+      this.dialogRef.disableClose = false;
+
+      // ... the upload was successful...
+      this.uploadSuccessful = true;
+
+      // ... and the component is no longer uploading
+      this.uploading = false;
+    });
+  }
+}
diff --git a/libs/frontend/samples/src/lib/containers/upload/upload.component.html b/libs/frontend/samples/src/lib/containers/upload/upload.component.html
new file mode 100644
index 0000000..07898ba
--- /dev/null
+++ b/libs/frontend/samples/src/lib/containers/upload/upload.component.html
@@ -0,0 +1 @@
+<button mat-raised-button (click)="openUploadDialog()">Upload</button>
\ No newline at end of file
diff --git a/libs/frontend/samples/src/lib/containers/upload/upload.component.scss b/libs/frontend/samples/src/lib/containers/upload/upload.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/libs/frontend/samples/src/lib/containers/upload/upload.component.ts b/libs/frontend/samples/src/lib/containers/upload/upload.component.ts
new file mode 100644
index 0000000..f181e14
--- /dev/null
+++ b/libs/frontend/samples/src/lib/containers/upload/upload.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { UploadService } from '../../services/upload.service';
+import { MatDialog } from '@angular/material/dialog';
+import { DialogComponent } from '../../components/dialog/dialog.component';
+
+@Component({
+  selector: 'new-sample-platform-upload',
+  templateUrl: './upload.component.html',
+  styleUrls: ['./upload.component.scss'],
+})
+export class UploadComponent {
+  constructor(public dialog: MatDialog, public uploadService: UploadService) {}
+
+  public openUploadDialog() {
+    this.dialog.open(DialogComponent, {
+      width: '50%',
+      height: '50%',
+    });
+  }
+}
diff --git a/libs/frontend/samples/src/lib/frontend-samples.module.ts b/libs/frontend/samples/src/lib/frontend-samples.module.ts
new file mode 100644
index 0000000..f7931b1
--- /dev/null
+++ b/libs/frontend/samples/src/lib/frontend-samples.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UploadComponent } from './containers/upload/upload.component';
+import { RoutingModule } from './routing.module';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatListModule } from '@angular/material/list';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { DialogComponent } from './components/dialog/dialog.component';
+import { UploadService } from './services/upload.service';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RoutingModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatListModule,
+    FlexLayoutModule,
+    MatProgressBarModule,
+  ],
+  declarations: [UploadComponent, DialogComponent],
+  providers: [UploadService]
+})
+export class FrontendSamplesModule {}
diff --git a/libs/frontend/samples/src/lib/routing.module.ts b/libs/frontend/samples/src/lib/routing.module.ts
new file mode 100644
index 0000000..c71045f
--- /dev/null
+++ b/libs/frontend/samples/src/lib/routing.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { UploadComponent } from './containers/upload/upload.component';
+
+const routes: Routes = [{ path: 'upload', component: UploadComponent }];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class RoutingModule {}
\ No newline at end of file
diff --git a/libs/frontend/samples/src/lib/services/upload.service.ts b/libs/frontend/samples/src/lib/services/upload.service.ts
new file mode 100644
index 0000000..3f9ebdd
--- /dev/null
+++ b/libs/frontend/samples/src/lib/services/upload.service.ts
@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpClient,
+  HttpEventType,
+  HttpResponse,
+} from '@angular/common/http';
+import { Subject } from 'rxjs';
+import { Observable } from 'rxjs';
+
+@Injectable({providedIn: 'root',})
+export class UploadService {
+  constructor(private http: HttpClient) {}
+
+  public upload(
+    files: Set<File>
+  ): { [key: string]: { progress: Observable<number> } } {
+    const status: { [key: string]: { progress: Observable<number> } } = {};
+
+    files.forEach((file) => {
+      // create a new multipart-form for every file
+      const formData: FormData = new FormData();
+      formData.append('file', file, file.name);
+
+      // create a new progress-subject for every file
+      const progress = new Subject<number>();
+
+      // send the http-request and subscribe for progress-updates
+      this.http.post('api/samples/upload', formData, { reportProgress: true }).subscribe((event : any) => {
+        if (event.type === HttpEventType.UploadProgress) {
+          // calculate the progress percentage
+          const percentDone = Math.round((100 * event.loaded) / event.total);
+
+          // pass the percentage into the progress-stream
+          progress.next(percentDone);
+        } else if (event instanceof HttpResponse) {
+          // Close the progress-stream if we get an answer form the API
+          // The upload is complete
+          progress.complete();
+        }
+      });
+
+      // Save every progress-observable in a map of all observables
+      status[file.name] = {
+        progress: progress.asObservable(),
+      };
+    });
+
+    // return the map of progress.observables
+    return status;
+  }
+}
diff --git a/libs/frontend/samples/src/test-setup.ts b/libs/frontend/samples/src/test-setup.ts
new file mode 100644
index 0000000..8d88704
--- /dev/null
+++ b/libs/frontend/samples/src/test-setup.ts
@@ -0,0 +1 @@
+import 'jest-preset-angular';
diff --git a/libs/frontend/samples/tsconfig.json b/libs/frontend/samples/tsconfig.json
new file mode 100644
index 0000000..08c7db8
--- /dev/null
+++ b/libs/frontend/samples/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "jest"]
+  },
+  "include": ["**/*.ts"]
+}
diff --git a/libs/frontend/samples/tsconfig.lib.json b/libs/frontend/samples/tsconfig.lib.json
new file mode 100644
index 0000000..f0e13d4
--- /dev/null
+++ b/libs/frontend/samples/tsconfig.lib.json
@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts"]
+}
diff --git a/libs/frontend/samples/tsconfig.spec.json b/libs/frontend/samples/tsconfig.spec.json
new file mode 100644
index 0000000..fd405a6
--- /dev/null
+++ b/libs/frontend/samples/tsconfig.spec.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}
diff --git a/libs/frontend/samples/tslint.json b/libs/frontend/samples/tslint.json
new file mode 100644
index 0000000..27c73f5
--- /dev/null
+++ b/libs/frontend/samples/tslint.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tslint.json",
+  "rules": {
+    "directive-selector": [true, "attribute", "newSamplePlatform", "camelCase"],
+    "component-selector": [true, "element", "new-sample-platform", "kebab-case"]
+  },
+  "linterOptions": {
+    "exclude": ["!**/*"]
+  }
+}
diff --git a/nx.json b/nx.json
index 7c89a27..63a5b94 100644
--- a/nx.json
+++ b/nx.json
@@ -61,6 +61,12 @@
     },
     "frontend-regression-test": {
       "tags": []
+    },
+    "api-implementation-samples": {
+      "tags": []
+    },
+    "frontend-samples": {
+      "tags": []
     }
   }
 }
diff --git a/package-lock.json b/package-lock.json
index bcad922..44780d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1184,6 +1184,11 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.1.9.tgz",
       "integrity": "sha512-q/DERgVU6vK2LtTcdVCGGBcoO424WsEfImh3Vcuy+P/ZVmthlDUC/+q+tSKt8MMf4hLpxFDQJE8vUSkktj7QEw=="
     },
+    "@angular/flex-layout": {
+      "version": "9.0.0-beta.31",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-9.0.0-beta.31.tgz",
+      "integrity": "sha512-g94u2mecDl87ORvFRuOBshV/S/ETE4bybClU2e1xXKWNG+rhRHchChneHSonc29ZLyROTjHhmAtKOYojL92uLA=="
+    },
     "@angular/forms": {
       "version": "9.1.9",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.9.tgz",
@@ -8797,6 +8802,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formidable": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.2.tgz",
+      "integrity": "sha512-V8gLm+41I/8kguQ4/o1D3RIHRmhYFG4pnNyonvua+40rqcEmT4+V71yaZ3B457xbbgCsCfjSPi65u/W6vK1U5Q=="
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
diff --git a/package.json b/package.json
index d8b6500..a2b2332 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@angular/common": "^9.1.0",
     "@angular/compiler": "^9.1.0",
     "@angular/core": "^9.1.0",
+    "@angular/flex-layout": "^9.0.0-beta.31",
     "@angular/forms": "^9.1.0",
     "@angular/localize": "^9.1.0",
     "@angular/material": "^9.2.4",
@@ -44,13 +45,14 @@
     "@google-cloud/compute": "^1.2.0",
     "@nestjs/common": "^6.8.3",
     "@nestjs/core": "^6.8.3",
-    "@nestjs/platform-express": "^6.8.3",
+    "@nestjs/platform-express": "^6.11.11",
     "@ng-bootstrap/ng-bootstrap": "^6.2.0",
     "@nrwl/angular": "9.3.0",
     "@octokit/auth-app": "^2.4.7",
     "bootstrap": "^4.4.0",
     "core-js": "^2.5.4",
     "doasync": "^2.0.1",
+    "formidable": "^1.2.2",
     "mongodb": "^3.5.8",
     "mongoose": "^5.9.26",
     "reflect-metadata": "^0.1.13",
diff --git a/tsconfig.json b/tsconfig.json
index b48a29d..36428ce 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -37,6 +37,12 @@
       ],
       "@new-sample-platform/frontend/regression-test": [
         "libs/frontend/regression-test/src/index.ts"
+      ],
+      "@new-sample-platform/api-implementation/samples": [
+        "libs/api-implementation/samples/src/index.ts"
+      ],
+      "@new-sample-platform/frontend/samples": [
+        "libs/frontend/samples/src/index.ts"
       ]
     }
   },