feat: add router and other stuff to the frontend

fr-ser · Jun 23, 2024 · c79180f · c79180f
1 parent b578968
commit c79180f
Show file tree

Hide file tree

Showing 33 changed files with 8,014 additions and 1,062 deletions.
diff --git a/.tool-versions b/.tool-versions
@@ -0,0 +1 @@
+nodejs 18.20.3
diff --git a/Makefile b/Makefile
@@ -10,6 +10,11 @@ help:
 		| sed -n 's/^#: \(.*\)###\(.*\):.*/\2:###\1/p' \
 		| column -t -s '###'
 
+#: installs dependencies (backend and frontend)
+install:
+	cd backend && npm install
+	cd frontend && npm install
+
 #: start the backend
 start-backend:
 	cd backend && npm run dev

diff --git a/README.md b/README.md
@@ -18,3 +18,10 @@ The following tools are required to use the development setup
 - make
 - nodejs (use a version manager like [asdf](https://asdf-vm.com/) or manually conform to the version in `.tool-versions`)
 - npm
+
+### Setup
+
+After the tools above are installed you can run `make install` to install all dependencies.
+
+Then run `make start-backend` and `make start-frontend` in different terminals.
+Now you can visit the URL shown in the frontend command to visit the page.
diff --git a/backend/package-lock.json b/backend/package-lock.json
diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
@@ -0,0 +1,20 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting',
+    'plugin:prettier/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+  plugins: ['prettier'],
+  rules: {
+    'prettier/prettier': 'error',
+  },
+}
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -8,17 +8,23 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.DS_Store
 dist
 dist-ssr
+coverage
 *.local
 
+/cypress/videos/
+/cypress/screenshots/
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
-.DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo
diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": ["^@/(.*)$"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}
diff --git a/frontend/README.md b/frontend/README.md
@@ -1,5 +1,11 @@
-# Vue 3 + TypeScript + Vite
+# Frontend
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+The frontend uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
 Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+
+## Development
+
+Run `npm run dev` to start the development environment.
+
+Run `npm run test` to run all tests.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>Gerüstbau</title>
   </head>
   <body>
     <div id="app"></div>