From a46337f181eb4fd5f9d579f82294e4e23fd4e623 Mon Sep 17 00:00:00 2001
From: gerwoud <gerwoud@hotmail.be>
Date: Thu, 14 Mar 2024 21:36:07 +0100
Subject: [PATCH] frontend developper instructions

---
 frontend/README.md | 80 +++++++++++++++++++++++++++++-----------------
 1 file changed, 50 insertions(+), 30 deletions(-)

diff --git a/frontend/README.md b/frontend/README.md
index be6865ac..30b9ae01 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,34 +1,54 @@
 # Project pigeonhole backend
 ![tests](https://github.com/SELab-2/UGent-3/actions/workflows/ci-test-frontend.yaml/badge.svg)
 ![linter](https://github.com/SELab-2/UGent-3/actions/workflows/ci-linter-frontend.yaml/badge.svg)
+## Prerequisites
+**1. Clone the repo**
+   ```sh
+   git clone git@github.com:SELab-2/UGent-3.git
+   ```
+
+**2. Installing required packages**
+Run the command below to install the needed dependencies.
+   ```sh
+   cd frontend
+  npm install
+   ```
+After this you can run the development or the production build with one of the following command
+  - Deployment
+  ```sh
+   npm run build
+   ```
+After running this command the build can be found in the ```dist``` directory.
+You can choose your own preferred webserver like for example ```nginx```, ```serve``` or something else.
+  
+  - Development
+   ```sh
+   npm run dev
+   ```
+
+## Maintaining the codebase
+### Writing tests
+When writing new code it is important to maintain the right functionality so 
+writing tests is mandatory for this, the test library used in this codebase is [cypres e2e](https://www.cypress.io/).
+
+If you want to write tests we highly advise to read the cypres e2e documentation on how
+to write tests, so they are kept conventional.
+
+For executing the tests and testing your newly added functionality
+you can run:
+```sh
+npm run dev
+``` 
+After the development build is running, you can run the following command on another terminal:
+```sh
+npm run test
+``` 
+### Running the linter
+This codebase is kept clean by the [eslint](https://eslint.org) linter.
+
+If you want to execute the linter on all files in the project it can simply be done
+with the command:
+```sh
+npm run lint
+``` 
 
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list