created a new frontend application using Typescript Nuxt3 Vue3 and pi…

new-frontend/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

new-frontend/.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store

new-frontend/.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

new-frontend/.prettierignore

@@ -0,0 +1,96 @@
+###
+# Place your Prettier ignore content here
+
+###
+# .gitignore content is duplicated here due to https://github.com/prettier/prettier/issues/8506
+
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

new-frontend/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

new-frontend/README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

new-frontend/app.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+	import { INav } from "./types/common";
+
+	const logo: Ref<string> = ref('/logo.png');
+	const plusIcon: Ref<string> = ref('/plus_dark.png');
+	const setID: Ref<string> = ref('home');
+	const navs: Ref<INav[]> = ref([
+		{
+			id: 'home',
+			link: '/',
+			name: 'HOME',
+		},
+		{
+			id: '#jobs',
+			link: '/jobs',
+			name: 'JOBS',
+		},
+		{
+			id: '#salaries',
+			link: '/salaries',
+			name: 'SALARIES',
+		},
+	]);
+</script>
+
+<template>
+	<div>
+		<header class="bg-white flex justify-center items-center lg:justify-start py-3 lg:py-2 z-50 sticky top-0 left-0">
+			<div class="lg:container lg:mx-auto lg:w-10/12">
+				<div class="flex flex-col lg:flex-row lg:justify-between items-center">
+					<a href="/" class="cursor-pointer">
+						<img :src="logo" alt="logo" class="site__logo-pic w-32 h-12 lg:w-32 lg:h-auto" />
+					</a>
+					<nav>
+						<ul class="flex flex-col lg:flex-row items-center py-4 lg:py-0 justify-center">
+							<NuxtLink v-for="(item, index) in navs" :key="index" :to="`${item.link}`" @click.native="setID = item.id"
+								:class="`h-7 lg:w-20 lg:h-16 py-2 flex justify-center items-center text-sm lg:text-base font-bold ${setID === item.id ? 'nav-select' : 'nav-noselect'
+									}`">
+								{{ item.name }}
+							</NuxtLink>
+						</ul>
+					</nav>
+					<div class="flex flex-col lg:flex-row">
+						<div class="lg:pt-0 w-full lg:w-36 lg:mr-4">
+							<NuxtLink to="/add_job"
+								class="cursor-pointer p-4 text-white font-bold flex items-center justify-center text-sm lg:text-base bg-blueDark h-12 rounded-lg">
+								Post a job
+							</NuxtLink>
+						</div>
+						<div class="pt-4 lg:pt-0 w-full lg:w-36 lg:ml-4">
+							<NuxtLink to="/add_salary"
+								class="cursor-pointer p-4 text-blueDark font-bold flex items-center justify-center text-sm lg:text-base border-2 h-12 rounded-lg border-blue">
+								<img :src="plusIcon" class="w-5 h-5 mr-1" />
+								Contribute
+							</NuxtLink>
+						</div>
+					</div>
+				</div>
+			</div>
+		</header>
+		<NuxtPage />
+		<footer class="site__footer pb-16">
+			<div class="container mx-auto w-10/12 text-center">
+				<Footer />
+			</div>
+		</footer>
+	</div>
+</template>  

new-frontend/assets/css/main.css

@@ -0,0 +1,40 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
+}
+body {
+  font-family: 'Inter', sans-serif;
+  background-color: #f1f5f9;
+}
+
+.site__title__content {
+  color: #235365;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 0px 0px 0px;
+  gap: 10px;
+}
+.select-input {
+  box-sizing: border-box;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.nav-select {
+  text-decoration:  #235365 solid 80px;
+  border-color: #235365;
+  border-bottom-width: 3px;
+  width: 80px;
+}
+.nav-noselect {
+  text-decoration: none;
+  color: #454545;
+}

new-frontend/components/Average.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+  import { useRatingsStore } from "../store/ratings";
+  import { useJobtitlesStore } from "../store/jobtitles";
+  import { useCompaniesStore } from "../store/companies";
+
+  const { title } = defineProps({
+		title: {type: String, required: true}
+	});
+
+  const ratingStore = useRatingsStore();
+  const jobtitleStore = useJobtitlesStore();
+  const companyStore = useCompaniesStore();
+  const filterjob = computed(() => jobtitleStore.filter);
+  const filtercompany = computed(() => companyStore.filtercompany);
+  const average = computed(() => ratingStore.average);
+  const stars = computed(() => ratingStore.averageStars);
+
+  const starsPicture: Ref<string> = ref('/star.png');
+  const salaryRating: Ref<string> = ref('');
+  const errored: Ref<boolean> = ref(false);
+
+  onMounted(async () => {
+    await fetchAverage();
+  })
+
+  const fetchAverage = async () => {
+    await ratingStore.getAverage({
+      company: filtercompany.value,
+      jobtitle: filterjob.value,
+    })
+  }
+</script>
+
+<template>
+  <div>
+    <div v-if="errored" class="text-center py-4 md:py-10 font-bold text-sm" />
+    <div
+      v-else
+      style="background: #235365; font-family: 'Inter', sans-serif"
+      class="site__average py-2 md:py-4 opacity-60 rounded-md my-3"
+    >
+      <div class="flex flex-row justify-between items-center">
+        <div class="site__average__title w-full md:w-1/6 ml-10">
+          <p
+            class="text-white text-xs lg:text-sm font-medium"
+            style="font-family: 'Inter', sans-serif"
+          >
+            {{ title }}
+          </p>
+        </div>
+        <div
+          class="
+            site__average__content
+            w-full
+            flex flex-col
+            md:flex-row
+            items-center
+            md:w-1/2
+            ml-10
+            mr-2
+            md:ml-0 md:mr-0
+          "
+        >
+          <p
+            v-if="average !== 0"
+            class="
+              text-white text-xs
+              lg:text-sm
+              font-medium
+              md:ml-20
+              xl:pl-6
+              text-center
+            "
+            style="font-family: 'Inter', sans-serif"
+          >
+            {{ average }}
+          </p>
+          <p v-else class="text-white text-xs lg:text-sm text-center">loading..</p>
+          <div class="flex pt-1 md:pt-0 ml-0 md:ml-8 xl:ml-20 md:mr-10">
+            <div v-for="(item, index) in stars" :key="index" class="flex">
+              <img class="w-4 h-4 mr-1" :src="starsPicture" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

new-frontend/components/Button.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  const { name, myStyle, showPicture } = defineProps({
+		name: {type: String, required: true},
+    myStyle: {type: String, required: true},
+    showPicture: {type: String, default: ""}
+	});
+
+  const plusIcon: Ref<string> = ref('/plus.png');
+</script>
+
+<template>
+  <div
+    :style="myStyle"
+    class="site__btn cursor-pointer p-4 text-white font-bold flex items-center justify-center text-xs md:text-sm h-12"
+    style="border-radius: 6px"
+  >
+    <div v-if="showPicture === 'nothing'" />
+    <img v-else :src="plusIcon" class="w-5 h-5 mr-1" />
+    {{ name }}
+  </div>
+</template>