Added frontend project with some basic api fetching implemented.

frontend/pages/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const route = useRoute()
+</script>
+
+<template>
+  <div>
+    <h1>Nuxt Routing set up successfully!</h1>
+    <p>Current route: {{ route.path }}</p>
+    <a href="https://nuxt.com/docs/getting-started/routing" target="_blank">Learn more about Nuxt Routing</a>
+  </div>
+</template>

frontend/pages/progress.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import getProgress from "~/plugins/getProgress";
+
+const progress = getProgress();
+</script>
+
+<template>
+  <div class="m-auto">
+    <div v-if="progress">
+      <table class="table-auto text-left">
+        <thead>
+        <tr>
+          <th>Metric</th>
+          <th>Value</th>
+        </tr>
+        </thead>
+
+        <tbody>
+        <tr>
+          <td>Percentage of Ipv4 scanned</td>
+          <td>{{progress.percentageOfIpv4Scanned}}</td>
+        </tr>
+        <tr>
+          <td>Total filtered</td>
+          <td>{{progress.totalFiltered}}</td>
+        </tr>
+        <tr>
+          <td>Total Discarded</td>
+          <td>{{progress.totalDiscarded}}</td>
+        </tr>
+        <tr>
+          <td>Amount of Ipv4 left</td>
+          <td>{{progress.amountOfIpv4Left}}</td>
+        </tr>
+        <tr>
+          <td>Discarded db size</td>
+          <td>{{progress.discardedDbSize}}</td>
+        </tr>
+        <tr>
+          <td>Filtered db size</td>
+          <td>{{progress.filteredDbSize}}</td>
+        </tr>
+        <tr>
+          <td>Unfiltered db size</td>
+          <td>{{progress.myDbSize}}</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>