diff --git a/src/main/java/de/kebidge/middleware/frontend/MyRestController.java b/src/main/java/de/kebidge/middleware/frontend/MyRestController.java
new file mode 100644
index 0000000000000000000000000000000000000000..ba7f951a13ac0d23411121e05001c55c6c9af243
--- /dev/null
+++ b/src/main/java/de/kebidge/middleware/frontend/MyRestController.java
@@ -0,0 +1,26 @@
+package de.kebidge.middleware.frontend;
+
+import com.fasterxml.jackson.databind.JsonNode;
+
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.reactive.function.client.WebClient;
+
+@RestController
+@RequestMapping("rest")
+public class MyRestController {
+
+ @GetMapping("/getItemAsJSON")
+ public String simpleCallJSON(){
+
+ return WebClient
+ .create("http://localhost:8181/shoppingItem/")
+ .get()
+ .retrieve()
+ .bodyToMono(JsonNode.class)
+ .block()
+ .toString();
+ }
+
+}
\ No newline at end of file
diff --git a/src/main/java/de/kebidge/middleware/frontend/ShoppingItem.java b/src/main/java/de/kebidge/middleware/frontend/ShoppingItem.java
new file mode 100644
index 0000000000000000000000000000000000000000..885657b07a2ac633ebaa246e3e222ab3261d3fb0
--- /dev/null
+++ b/src/main/java/de/kebidge/middleware/frontend/ShoppingItem.java
@@ -0,0 +1,11 @@
+package de.kebidge.middleware.frontend;
+
+import java.io.Serializable;
+
+public class ShoppingItem implements Serializable {
+
+ public long id;
+ public String item;
+ public int amount;
+
+}
\ No newline at end of file
diff --git a/src/main/java/de/kebidge/middleware/frontend/ThymeleafController.java b/src/main/java/de/kebidge/middleware/frontend/ThymeleafController.java
new file mode 100644
index 0000000000000000000000000000000000000000..17216ae980ab0ee40acc3ef88793af1296048550
--- /dev/null
+++ b/src/main/java/de/kebidge/middleware/frontend/ThymeleafController.java
@@ -0,0 +1,94 @@
+package de.kebidge.middleware.frontend;
+
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.reactive.function.client.WebClient;
+
+import reactor.core.publisher.Mono;
+
+@Controller
+public class ThymeleafController {
+
+ @Value("${welcome.user}")
+ private String user;
+
+ @Value("${shoppingitem.endpoint}")
+ private String shoppingItemEndpoint;
+
+ @GetMapping("/")
+ public String displayPage(Model model) {
+
+ ShoppingItem[] items = WebClient
+ .create(shoppingItemEndpoint)
+ .get()
+ .retrieve()
+ .bodyToMono(ShoppingItem[].class)
+ .block();
+
+ model.addAttribute("user", user);
+ model.addAttribute("items", items);
+ return "page";
+ }
+
+ @PostMapping("/")
+ public String addItem(@RequestParam String newitem, @RequestParam int amount, Model model) {
+
+ ShoppingItem item = new ShoppingItem();
+ item.item = newitem;
+ item.amount = amount;
+
+ WebClient
+ .create(shoppingItemEndpoint + "add")
+ .post()
+ .body(Mono.just(item), ShoppingItem.class)
+ .retrieve()
+ .bodyToMono(ShoppingItem.class)
+ .block();
+
+ return "redirect:/";
+ }
+
+ @PostMapping("/delete")
+ public String deleteItem(@RequestParam String item, Model model) {
+
+ WebClient
+ .create(shoppingItemEndpoint + "del-item/" + item)
+ .delete()
+ .retrieve()
+ .bodyToMono(Void.class) // dont expect a response
+ .block();
+
+ return "redirect:/";
+ }
+
+ @PostMapping("/delete-all")
+ public String deleteItemById(@RequestParam Long id, Model model) {
+
+ WebClient
+ .create(shoppingItemEndpoint + "del-id/" + id)
+ .delete()
+ .retrieve()
+ .bodyToMono(Void.class) // dont expect a response
+ .block();
+
+ return "redirect:/";
+ }
+
+ @PostMapping("/delete-list")
+ public String deleteItemList(Model model) {
+
+ WebClient
+ .create(shoppingItemEndpoint + "del-all")
+ .delete()
+ .retrieve()
+ .bodyToMono(Void.class) // dont expect a response
+ .block();
+
+ return "redirect:/";
+ }
+
+}
\ No newline at end of file
diff --git a/src/main/resources/META-INF/additional-spring-configuration-metadata.json b/src/main/resources/META-INF/additional-spring-configuration-metadata.json
new file mode 100644
index 0000000000000000000000000000000000000000..403fa08aeb1576bfd474357a387a80c86b442ccc
--- /dev/null
+++ b/src/main/resources/META-INF/additional-spring-configuration-metadata.json
@@ -0,0 +1,12 @@
+{"properties": [
+ {
+ "name": "welcome.user",
+ "type": "java.lang.String",
+ "description": "ShoppingApp User"
+ },
+ {
+ "name": "shoppingitem.endpoint",
+ "type": "java.lang.String",
+ "description": "Shopping Item REST Endpoint"
+ }
+]}
\ No newline at end of file
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
index 8b137891791fe96927ad78e64b0aad7bded08bdc..7600fd0ec7ff55c40f89f8cd58dc3f4b157d56ab 100644
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -1 +1,4 @@
+server.port=8282
+welcome.user=Kebidge
+shoppingitem.endpoint=http://localhost:8181/shoppingItem/
\ No newline at end of file
diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..af7d4ac6bee99a5a2fa4697329dc32c1d4aa2b62
--- /dev/null
+++ b/src/main/resources/static/style.css
@@ -0,0 +1,67 @@
+body {
+ margin: 0;
+ padding: 0;
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ background-color: #27292d;
+ color: #fff;
+ }
+ body {
+ max-width: 600px;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 50px;
+ }
+ table {
+ text-align: center;
+ }
+ th {
+ width: 200px;
+ }
+ body h1 {
+ font-weight: 700;
+ font-size: 28px;
+ text-align: center;
+ }
+ body form {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+ body form label {
+ font-size: 14px;
+ font-weight: 700;
+ }
+ body form button,
+ body form input {
+ height: 36px;
+ box-shadow:hsla(0, 0%, 100%, 0.35);
+ outline: none;
+ padding-left: 12px;
+ padding-right: 12px;
+ border-radius: 6px;
+ font-size: 18px;
+ margin-top: 6px;
+ margin-bottom: 12px;
+ }
+ body form input {
+ background-color: transparent;
+ border: 2px solid hsla(0, 0%, 100%, 0.35);
+ color: inherit;
+ }
+ body button {
+ cursor: pointer;
+ background-color: #a0a4d9;
+ border: 1px solid #a0a4d9;
+ color: #1f2023;
+ font-weight: 700;
+ outline: none;
+ border-radius: 6px;
+ width: 100px;
+ }
+ body h2 {
+ font-size: 22px;
+ border-bottom: 2px solid hsla(0, 0%, 100%, 0.35);
+ padding-bottom: 6px;
+ }
\ No newline at end of file
diff --git a/src/main/resources/templates/page.html b/src/main/resources/templates/page.html
new file mode 100644
index 0000000000000000000000000000000000000000..3a93413af715130cd332611e8a7d6f9bd5677241
--- /dev/null
+++ b/src/main/resources/templates/page.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+
+<html xmlns:th="http://www.thymeleaf.org">
+ <head>
+ <title>ShoppingApp</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ </head>
+
+ <link rel="stylesheet" href="style.css"/>
+
+ <body>
+
+ <div>
+ <h1>Shopping List</h1>
+ <h3>
+ <span th:text="'Welcome ' + ${user} + '!'"></span>
+ </h3>
+ <form method="POST" th:action="@{/}">
+ <label for="newitem">New Shopping Item</label>
+ <input type="text" name="newitem" th:value="${newitem}" />
+ <label for="amount">Amount</label>
+ <input type="text" name="amount" th:value="${amount}" />
+ <input type="submit" value="Add">
+ </form>
+ </div>
+
+ <div th:unless="${#lists.isEmpty(items)}">
+ <table>
+ <tr>
+ <th>ID</th>
+ <th>Name</th>
+ <th>Amount</th>
+ <th>Delete</th>
+ <th>Delete All</th>
+ </tr>
+ <tr th:each="item : ${items}">
+ <td th:text="${item.id}"/>
+ <td th:text="${item.item}"/>
+ <td th:text="${item.amount}"/>
+ <td>
+ <form method="POST" th:action="@{/delete/}">
+ <input type="hidden" name="item" th:value="${item.item}" />
+ <input type="submit" value="Delete"/>
+ </form>
+ </td>
+ <td>
+ <form method="POST" th:action="@{/delete-all/}">
+ <input type="hidden" name="id" th:value="${item.id}" />
+ <input type="submit" value="Delete All"/>
+ </form>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div th:if="${#lists.isEmpty(items)}">
+ <p>Your list is empty! Add items to your shopping list...</p>
+ </div>
+
+ <div>
+ <form method="POST" th:action="@{/delete-list}">
+ <input type="submit" value="Delete List">
+ </form>
+ </div>
+
+ </body>
+</html>
\ No newline at end of file