2026-08-21 11:02:52 +02:00
parent a08de03d4d
commit e2da42e181
140 changed files with 16542 additions and 8 deletions
--- a/06_js-debug/unterricht/tag48/01_counter/webseite-html-js/assets/js/modules/Counter.js
+++ b/06_js-debug/unterricht/tag48/01_counter/webseite-html-js/assets/js/modules/Counter.js
@@ -5,8 +5,8 @@ const Counter = (elOrSelector = null) => {

  // TODO: forEach for string selector
  const module = elOrSelector || document.querySelector(elOrSelector);
-  const countEl = module.querySelector('input[id^="count"]');
-  const btnEl = module.querySelector('button[id^="incrementButton"]');
+  const countEl = module.querySelector('.input-count');
+  const btnEl = module.querySelector('.button-increment'); // 'button[id^="incrementButton"]'

  const id = v4();

--- a/06_js-debug/unterricht/tag48/01_counter/webseite-html-js/index.html
+++ b/06_js-debug/unterricht/tag48/01_counter/webseite-html-js/index.html
@@ -41,7 +41,7 @@
                    readonly
                    aria-label="Counter" />
                </div>
-                <button id="incrementButton" class="btn btn-primary w-100">Increment</button>
+                <button id="incrementButton" class="btn btn-primary w-100 button-increment">Increment</button>
              </div>
            </div>
          </div>
--- a/06_js-debug/unterricht/tag48/01_counter/website-app-react/src/components/heros/Hero.scss
+++ b/06_js-debug/unterricht/tag48/01_counter/website-app-react/src/components/heros/Hero.scss
@@ -2,6 +2,7 @@
  width: 100%;
  height: 40vh;

+  // Mobile First
  background: tomato url('https://dummyimage.com/900x450/f90/000.jpg') center no-repeat;
  background-size: cover;

--- a/06_js-debug/unterricht/tag49/01_demo-form-bug/assets/js/main.js
+++ b/06_js-debug/unterricht/tag49/01_demo-form-bug/assets/js/main.js
@@ -0,0 +1,57 @@
+'use strict';
+
+(() => {
+  // ===== DOM =====
+  const DOM = {
+    calculateForm: document.querySelector('#calculateForm'),
+    firstNumberInput: document.querySelector('#firstNumber'),
+    secondNumberInput: document.querySelector('#secondNumber'),
+    result: document.querySelector('#result'),
+  };
+
+  // console.log(DOM);
+
+  // ===== INIT =====
+  const init = () => {
+    DOM.calculateForm.noValidate = true; // DOM.calculateForm.setAttribute('novalidate','');
+    DOM.calculateForm.addEventListener('submit', handleFormSubmit);
+  };
+
+  // ===== EVENT HANDLERS =====
+  function handleFormSubmit(e) {
+    e.preventDefault();
+
+    if (hasInputsEmptyValues(DOM.firstNumberInput, DOM.secondNumberInput)) {
+      alert('Please enter a number in both fields');
+      return;
+    }
+
+    const num1 = getNumberValue(DOM.firstNumberInput);
+    const num2 = getNumberValue(DOM.secondNumberInput);
+
+    const sum = add(num1, num2);
+
+    displayResult(sum);
+    DOM.calculateForm.reset();
+  }
+
+  // ===== FUNCTIONS =====
+  const hasInputsEmptyValues = (inputOne, inputTwo) => {
+    // if (inputOne.value === '' || inputTwo.value === '') {
+    //   return true;
+    // } else {
+    //   return false;
+    // }
+    return inputOne.value === '' || inputTwo.value === '';
+  };
+
+  const getNumberValue = (input) => Number(input.value);
+  const add = (a, b) => Number(a) + Number(b);
+
+  const displayResult = (result) => {
+    DOM.result.textContent = result;
+  };
+
+  // ===== CALL INIT =====
+  init();
+})();
--- a/06_js-debug/unterricht/tag49/01_demo-form-bug/index.html
+++ b/06_js-debug/unterricht/tag49/01_demo-form-bug/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Debugging Demo</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <div class="container py-5">
+      <h1>Debugging Demo</h1>
+
+      <form id="calculateForm" class="mt-4">
+        <div class="col col-12 col-sm-10 col-lg-6">
+          <div class="row mb-3 align-items-center">
+            <label for="firstNumber" class="col-md-3 col-form-label">Number #1:</label>
+            <div class="col-sm-8">
+              <input type="number" id="firstNumber" name="firstNumber" class="form-control" required />
+            </div>
+          </div>
+        </div>
+
+        <div class="col col-12 col-sm-10 col-lg-6">
+          <div class="row mb-3 align-items-center">
+            <label for="secondNumber" class="col-md-3 col-form-label">Number #2:</label>
+            <div class="col-sm-8">
+              <input type="number" id="secondNumber" name="secondNumber" class="form-control" required />
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-4 w-100">
+          <button type="submit" id="calculateBtn" class="btn btn-primary">Add Numbers</button>
+        </div>
+      </form>
+
+      <div class="alert alert-light mt-4"><strong>Result</strong>: <span id="result"></span></div>
+    </div>
+  </body>
+</html>
--- a/06_js-debug/unterricht/tag49/01_demo-form-bug/package-lock.json
+++ b/06_js-debug/unterricht/tag49/01_demo-form-bug/package-lock.json
@@ -0,0 +1,644 @@
+{
+  "name": "01_demo-form-bug",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "01_demo-form-bug",
+      "version": "1.0.0",
+      "devDependencies": {
+        "http-server": "^14.1.1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/basic-auth": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/corser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+      "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-server": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
+      "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "basic-auth": "^2.0.1",
+        "chalk": "^4.1.2",
+        "corser": "^2.0.1",
+        "he": "^1.2.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy": "^1.18.1",
+        "mime": "^1.6.0",
+        "minimist": "^1.2.6",
+        "opener": "^1.5.1",
+        "portfinder": "^1.0.28",
+        "secure-compare": "3.0.1",
+        "union": "~0.5.0",
+        "url-join": "^4.0.1"
+      },
+      "bin": {
+        "http-server": "bin/http-server"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "license": "(WTFPL OR MIT)",
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
+    "node_modules/portfinder": {
+      "version": "1.0.38",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz",
+      "integrity": "sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async": "^3.2.6",
+        "debug": "^4.3.6"
+      },
+      "engines": {
+        "node": ">= 10.12"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.15.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz",
+      "integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "es-define-property": "^1.0.1",
+        "side-channel": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/secure-compare": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+      "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/union": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+      "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+      "dev": true,
+      "dependencies": {
+        "qs": "^6.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/url-join": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    }
+  }
+}
--- a/06_js-debug/unterricht/tag49/01_demo-form-bug/package.json
+++ b/06_js-debug/unterricht/tag49/01_demo-form-bug/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "01_demo-form-bug",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "npx http-server -c-1 -p 3000"
+  },
+  "keywords": [],
+  "type": "module",
+  "devDependencies": {
+    "http-server": "^14.1.1"
+  }
+}
--- a/06_js-debug/unterricht/tag49/02_debug-sources.zip
+++ b/06_js-debug/unterricht/tag49/02_debug-sources.zip
--- a/06_js-debug/unterricht/tag49/02_debug-sources/assets/css/main.css
+++ b/06_js-debug/unterricht/tag49/02_debug-sources/assets/css/main.css
@@ -0,0 +1,15 @@
+.lotto-numbers {
+  display: flex;
+}
+span.lotto-ball {
+  padding: 1rem;
+  border-radius: 50%;
+  border: 1px solid #ccc;
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
--- a/06_js-debug/unterricht/tag49/02_debug-sources/assets/js/main.js
+++ b/06_js-debug/unterricht/tag49/02_debug-sources/assets/js/main.js
@@ -0,0 +1,191 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const DOM = {
+    btnLottoDraw: document.querySelector('.button-lotto-draw'),
+    btnWordCounter: document.querySelector('.button-word-counter'),
+    btnGetStudents: document.querySelector('.button-get-students'),
+    lottoNumbers: document.querySelector('.lotto-numbers'),
+    content: document.querySelector('.content'),
+    calculateForm: document.querySelector('#calculateForm'),
+    firstNumberInput: document.querySelector('#firstNumber'),
+    secondNumberInput: document.querySelector('#secondNumber'),
+    result: document.querySelector('#result'),
+    sectionStudents: document.querySelector('.section-students'),
+  };
+
+  const names = ['Adel (Admin)', 'Ersin', 'Kahleel (Admin)', 'Andreas', 'Philippe (Admin)'];
+
+  // if (text === true) {
+  //   console.log('Error');
+  // }
+
+  // console.log(DOM);
+
+  // === INIT =============
+  const init = () => {
+    // EventListener
+    DOM.btnLottoDraw.addEventListener('click', onClickLottoNumbers);
+    DOM.btnWordCounter.addEventListener('click', onClickWordCounter);
+    DOM.calculateForm.addEventListener('submit', handleFormSubmit);
+    DOM.btnGetStudents.addEventListener('click', onClickGetStudents);
+  };
+
+  // === EVENTHANDLER =====
+  const onClickLottoNumbers = (e) => {
+    const lottoNumbers = getLottoNumbers();
+    console.log(lottoNumbers);
+    createLottoNumbers(lottoNumbers);
+  };
+
+  const onClickGetStudents = (e) => {
+    const students = getAdmins();
+    createStudents(students);
+  };
+
+  const onClickWordCounter = (e) => {
+    const text = DOM.content.innerText;
+    const words = getWordOccurance(text);
+    console.log(words);
+  };
+
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+
+    if (checkIfInputsAreEmpty(DOM.firstNumberInput, DOM.secondNumberInput)) {
+      alert('Please enter a number in both fields');
+      return;
+    }
+
+    const num1 = getNumberValue(DOM.firstNumberInput);
+    const num2 = getNumberValue(DOM.secondNumberInput);
+
+    // console.log(num1, typeof num1);
+    // console.log(num2, typeof num2);
+
+    const sum = add(num1, num2);
+
+    displayResult(sum);
+
+    DOM.calculateForm.reset();
+  };
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+  function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  const getLottoNumbers = (sorted = true) => {
+    const lottoNumbers = [];
+    const MAX_DRAW = 6;
+
+    while (lottoNumbers.length < MAX_DRAW) {
+      const lottoNumber = getRandomInt(1, 49);
+      console.log(lottoNumber);
+      if (!lottoNumbers.includes(lottoNumber)) {
+        lottoNumbers.push(lottoNumber);
+      } else {
+        console.log(`Found duplicate: ${lottoNumber}.`);
+      }
+    }
+
+    if (sorted) {
+      lottoNumbers.sort((a, b) => a - b);
+    }
+
+    return lottoNumbers;
+  };
+
+  const createLottoNumbers = (numbers = []) => {
+    DOM.lottoNumbers.innerHTML = '';
+    numbers.forEach((n) => {
+      const ballEl = document.createElement('span');
+      ballEl.classList.add('lotto-ball');
+      ballEl.textContent = String(n);
+      DOM.lottoNumbers.appendChild(ballEl);
+    });
+  };
+
+  const getWordOccurance = (text = '') => {
+    const wordObj = text
+      .toLowerCase()
+      .replace(/[^\w\s]/g, '')
+      .split(/\s+/)
+      .filter((word) => word !== '')
+      .reduce((obj, word) => {
+        obj[word] = (obj[word] || 0) + 1;
+        return obj;
+      }, {});
+
+    return wordObj;
+    // create Regexp: Alles was keine Wort-zeichen oder Leerzeichen ist
+
+    // Expected Output
+    // {
+    //   "do": 1,
+    //   "you": 9,
+    // }
+  };
+
+  function checkIfInputsAreEmpty(inputOne, inputTwo) {
+    if (inputOne.value && inputTwo.value) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  function getNumberValue(input) {
+    return Number(input.value);
+  }
+
+  function add(a, b) {
+    return Number(a) + Number(b);
+  }
+
+  function displayResult(result) {
+    DOM.result.textContent = result;
+  }
+
+  const isAdmin = (name) => {
+    return name.trim().endsWith('(Admin)');
+  };
+
+  // [x]: Bug finden
+  const getAdmins = () => {
+    const adminNames = [...names].sort((a, b) => {
+      if (isAdmin(a) && isAdmin(b)) return a > b ? 1 : -1;
+      if (isAdmin(a)) {
+        return -1;
+      }
+      if (isAdmin(b)) {
+        return 1;
+      }
+
+      return a > b ? 1 : -1;
+    });
+    return adminNames;
+  };
+
+  const createStudents = (items = []) => {
+    DOM.sectionStudents.innerHTML = '';
+    const ulEl = document.createElement('ul');
+    ulEl.classList.add('list-group', 'list-students');
+
+    items.forEach((str) => {
+      const liEl = document.createElement('li');
+      liEl.classList.add('list-group-item', 'list-item-student');
+      liEl.textContent = str;
+      ulEl.appendChild(liEl);
+    });
+
+    DOM.sectionStudents.appendChild(ulEl);
+  };
+
+  init();
+})();
--- a/06_js-debug/unterricht/tag49/02_debug-sources/index.html
+++ b/06_js-debug/unterricht/tag49/02_debug-sources/index.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lotto Ziehung und Wörter zählen</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="assets/css/main.css" />
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Lotto Ziehung und Wörter zählen</h1>
+        <hr />
+
+        <h2>Lotto Ziehung</h2>
+        <div class="lotto-numbers"></div>
+        <button class="btn btn-dark button-lotto-draw">Zahlen Ziehen</button>
+        <hr />
+        <h2>Wörter zählen</h2>
+        <div class="content">
+          <p>
+            Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name
+            printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a
+            mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store.
+            And you must think you're in a toy store, because you're here shopping for an infant named Jeb. Now that
+            there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in
+            American crime. Do you believe that shit? It actually says that in the little book that comes with it: the
+            most popular gun in American crime. Like they're actually proud of that shit.
+          </p>
+        </div>
+        <button class="btn btn-dark button-word-counter">Wörter zählen</button>
+        <hr />
+        <h2>Teilnehmer auslesen</h2>
+        <section class="section-students py-3 mb-3"></section>
+
+        <button class="btn btn-dark button-get-students">Teilnehmer sortiert ausgeben</button>
+      </div>
+      <div class="container py-5">
+        <h1>Debugging Demo</h1>
+        <form id="calculateForm" class="mt-4">
+          <div class="col col-12 col-sm-10 col-lg-6">
+            <div class="row mb-3 align-items-center">
+              <label for="firstNumber" class="col-md-3 col-form-label">Number #1:</label>
+              <div class="col-sm-8">
+                <input type="number" id="firstNumber" name="firstNumber" class="form-control" required />
+              </div>
+            </div>
+          </div>
+
+          <div class="col col-12 col-sm-10 col-lg-6">
+            <div class="row mb-3 align-items-center">
+              <label for="secondNumber" class="col-md-3 col-form-label">Number #2:</label>
+              <div class="col-sm-8">
+                <input type="number" id="secondNumber" name="secondNumber" class="form-control" required />
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-4 w-100">
+            <button type="submit" id="calculateBtn" class="btn btn-primary">Add Numbers</button>
+          </div>
+        </form>
+
+        <div class="alert alert-light mt-4"><strong>Result</strong>: <span id="result"></span></div>
+      </div>
+    </main>
+  </body>
+</html>
--- a/06_js-debug/unterricht/tag49/02_debug-sources/package-lock.json
+++ b/06_js-debug/unterricht/tag49/02_debug-sources/package-lock.json
@@ -0,0 +1,644 @@
+{
+  "name": "02_debug-sources",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "02_debug-sources",
+      "version": "1.0.0",
+      "devDependencies": {
+        "http-server": "^14.1.1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/basic-auth": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/corser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+      "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-server": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
+      "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "basic-auth": "^2.0.1",
+        "chalk": "^4.1.2",
+        "corser": "^2.0.1",
+        "he": "^1.2.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy": "^1.18.1",
+        "mime": "^1.6.0",
+        "minimist": "^1.2.6",
+        "opener": "^1.5.1",
+        "portfinder": "^1.0.28",
+        "secure-compare": "3.0.1",
+        "union": "~0.5.0",
+        "url-join": "^4.0.1"
+      },
+      "bin": {
+        "http-server": "bin/http-server"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "license": "(WTFPL OR MIT)",
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
+    "node_modules/portfinder": {
+      "version": "1.0.38",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz",
+      "integrity": "sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async": "^3.2.6",
+        "debug": "^4.3.6"
+      },
+      "engines": {
+        "node": ">= 10.12"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.15.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz",
+      "integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "es-define-property": "^1.0.1",
+        "side-channel": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/secure-compare": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+      "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/union": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+      "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+      "dev": true,
+      "dependencies": {
+        "qs": "^6.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/url-join": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    }
+  }
+}
--- a/06_js-debug/unterricht/tag49/02_debug-sources/package.json
+++ b/06_js-debug/unterricht/tag49/02_debug-sources/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "02_debug-sources",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "npx http-server -c-1 -p 3000"
+  },
+  "keywords": [],
+  "type": "commonjs",
+  "devDependencies": {
+    "http-server": "^14.1.1"
+  }
+}
--- a/06_js-debug/unterricht/tag49/03_debug-vscode/.vscode/launch.json
+++ b/06_js-debug/unterricht/tag49/03_debug-vscode/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Program",
+      "skipFiles": ["<node_internals>/**"],
+      "program": "${file}"
+    }
+  ]
+}
--- a/06_js-debug/unterricht/tag49/03_debug-vscode/index.html
+++ b/06_js-debug/unterricht/tag49/03_debug-vscode/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS Debug</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="sum-array.js"></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>JS Debug</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>
--- a/06_js-debug/unterricht/tag49/03_debug-vscode/package-lock.json
+++ b/06_js-debug/unterricht/tag49/03_debug-vscode/package-lock.json
@@ -0,0 +1,27 @@
+{
+  "name": "03_debug-vscode",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "03_debug-vscode",
+      "version": "1.0.0",
+      "dependencies": {
+        "chalk": "^6.0.0"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-6.0.0.tgz",
+      "integrity": "sha512-2uNTXIuTTxk7ciZgAU1BQcgnchcG0xXnrs6jzkQfj9SsRa9M2s5zE8WT96hS6KmG4MzWHSrvH43DF1m4XRkrFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=22"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    }
+  }
+}
--- a/06_js-debug/unterricht/tag49/03_debug-vscode/package.json
+++ b/06_js-debug/unterricht/tag49/03_debug-vscode/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "03_debug-vscode",
+  "version": "1.0.0",
+  "description": "",
+  "main": "sum-array.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "type": "module",
+  "dependencies": {
+    "chalk": "^6.0.0"
+  }
+}
--- a/06_js-debug/unterricht/tag49/03_debug-vscode/sum-array.js
+++ b/06_js-debug/unterricht/tag49/03_debug-vscode/sum-array.js
@@ -0,0 +1,13 @@
+import color from 'chalk'; // node spezific module
+
+function sumArray(arr) {
+  let sum = 0;
+
+  for (let i = 0; i < arr.length; i++) {
+    sum += arr[i];
+  }
+
+  return sum;
+}
+
+console.log(color.magenta(sumArray([1, 2, 3, 4, 5])));
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter.zip
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter.zip
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/.eslintrc.cjs
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/.vscode/launch.json
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:5173",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/README.md
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/README.md
@@ -0,0 +1,10 @@
+# Frontend Class: LexiFind Starter Template
+
+Install the dependencies and devDependencies and start the server.
+
+```bash
+npm install
+npm run dev
+```
+
+This will start the server on http://localhost:5173
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/index.html
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/LexiFind.webp" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LexiFind - Your Personal Dictionary</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/package-lock.json
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/package-lock.json
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/package.json
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "lexifind-webmaster",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@typescript-eslint/eslint-plugin": "^8.67.0",
+    "@typescript-eslint/parser": "^8.67.0",
+    "@vitejs/plugin-react": "^6.1.0",
+    "eslint": "^10.8.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.4",
+    "typescript": "~6.0.3",
+    "vite": "^8.2.2"
+  }
+}
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/public/LexiFind.webp
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/public/LexiFind.webp
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/src/App.tsx
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/src/App.tsx
@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react';
+import { WordData } from './lib/datatypes';
+
+import Header from './components/Header';
+import Searchbar from './components/Searchbar';
+import WordHero from './components/WordHero';
+import WordDefinitions from './components/WordDefinitions';
+import SourceFooter from './components/SourceFooter';
+
+import { SERIF_FONTS } from './lib/constants';
+
+function App() {
+  const [font, setFont] = useState<string>(SERIF_FONTS);
+  const [word, setWord] = useState<string>('course');
+  const [wordData, setWordData] = useState<WordData | null>(null);
+
+  const fetchData = async () => {
+    try {
+      const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
+      const response = await fetch(url);
+      const data = await response.json();
+
+      setWordData(data[0]);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleSubmit = async (e: React.SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    fetchData();
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []); // kein did update, sonst wird fetch bei jeder Buchstabeeingabe erneut ausgeführt
+
+  return (
+    <div
+      className="app-wrapper"
+      style={{
+        fontFamily: font,
+      }}>
+      <Header font={font} setFont={setFont} />
+
+      <Searchbar word={word} setWord={setWord} handleSubmit={handleSubmit} />
+
+      {wordData && (
+        <div>
+          <WordHero data={wordData} />
+          <WordDefinitions wordData={wordData} />
+          <SourceFooter source={wordData.sourceUrls[0]} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default App;
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/src/components/Header.tsx
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/src/components/Header.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { SERIF_FONTS, SANS_SERIF_FONTS } from '../lib/constants';
+
+interface HeaderProps {
+  font: string;
+  setFont: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const Header: React.FC<HeaderProps> = ({ font, setFont }) => {
+  return (
+    <header className="header-container">
+      <div className="header-logo-wrapper">
+        <img
+          src="/LexiFind.webp"
+          alt="LexiFind Logo"
+          className="header-logo-img"
+        />
+        <span className="header-logo-text">LexiFind</span>
+      </div>
+
+      <select
+        value={font}
+        onChange={(e) => setFont(e.target.vaule)}
+        className="header-select"
+        style={{ fontFamily: font }}
+      >
+        <option value={SERIF_FONTS}>Serif</option>
+        <option value={SANS_SERIF_FONTS}>Sans Serif</option>
+      </select>
+    </header>
+  );
+};
+
+export default Header;
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/src/components/Searchbar.tsx
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/src/components/Searchbar.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface SearchbarProps {
+  word: string;
+  setWord: React.Dispatch<React.SetStateAction<string>>;
+  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+}
+
+const Searchbar: React.FC<SearchbarProps> = ({ word, setWord, handleSubmit }) => {
+  return (
+    <div className="searchbar-wrapper">
+      <form onSubmit={handleSubmit}>
+        <label htmlFor="searchWord" className="screen-reader-text">
+          Search word
+        </label>
+
+        <div className="searchbar-container">
+          <input
+            type="text"
+            name="searchWord"
+            id="searchWord"
+            className="searchbar-input"
+            placeholder="Type a word to search"
+            value={word}
+            onChange={(e) => setWord(e.target.value)}
+          />
+          <button type="submit" className="searchbar-magnifying-glass" aria-label="Search">
+            <SearchIcon className="searchbar-icon" aria-hidden="true" />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+function SearchIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" {...props}>
+      <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
+    </svg>
+  );
+}
+
+export default Searchbar;
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/src/components/SourceFooter.tsx
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/src/components/SourceFooter.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+interface SourceFooterProps {
+  source: string;
+}
+
+const SourceFooter: React.FC<SourceFooterProps> = ({ source }) => {
+  return (
+    <>
+      <div className="footer-divider"></div>
+
+      <div className="footer-wrapper">
+        <h4 className="footer-title">Source</h4>
+
+        <div>
+          <a href={source} className="footer-link-wrapper">
+            {source}
+            <BoxArrowUpRightIcon
+              className="footer-link-icon"
+              aria-hidden="true"
+            />
+          </a>
+        </div>
+      </div>
+    </>
+  );
+};
+
+function BoxArrowUpRightIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      viewBox="0 0 16 16"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"
+      />
+      <path
+        fillRule="evenodd"
+        d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"
+      />
+    </svg>
+  );
+}
+
+export default SourceFooter;
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/src/components/WordDefinitions.tsx
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/src/components/WordDefinitions.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Meaning, WordData } from '../lib/datatypes';
+
+interface WordDefinitionsProps {
+  wordData: WordData;
+}
+
+const WordDefinitions: React.FC<WordDefinitionsProps> = ({ wordData }) => {
+  return (
+    <div className="word-definitions-wrapper">
+      {wordData.meanings.map((meaning: any, index: number) => (
+        <WordDefinitionBlock key={index} data={meaning} />
+      ))}
+    </div>
+  );
+};
+
+interface WordDefinitionBlockProps {
+  data: Meaning;
+}
+
+const WordDefinitionBlock: React.FC<WordDefinitionBlockProps> = ({ data }) => {
+  const { partOfSpeech, definitions, synonyms } = data;
+
+  return (
+    <div className="word-block-wrapper">
+      <div className="word-block-category-container">
+        <h2 className="word-block-category-name">{partOfSpeech}</h2>
+        <div className="word-block-category-divider"></div>
+      </div>
+
+      <div className="word-block-meaning-container">
+        <h3 className="word-block-meaning-title">Meaning</h3>
+
+        <ul className="word-block-meaning-list">
+          {definitions.map((definition: any, index: number) => (
+            <li key={index} className="word-block-meaning-list-item">
+              {definition.definition}{' '}
+              {definition.example && (
+                <span className="word-block-meaning-list-item-example">
+                  "{definition.example}"
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {synonyms.length > 0 && (
+        <div className="word-block-synonyms-container">
+          <h3 className="word-block-synonyms-title">Synonyms</h3>
+
+          <ul className="word-block-synonyms-list">
+            {synonyms.map((synonym: string, index: number) => (
+              <li key={index} className="word-block-synonyms-list-item">
+                {synonym}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default WordDefinitions;
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/src/components/WordHero.tsx
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/src/components/WordHero.tsx
@@ -0,0 +1,63 @@
+import React, { useRef } from 'react';
+import { Phonetic } from '../lib/datatypes';
+
+interface WordHeroProps {
+  data: {
+    word: string;
+    phonetics: Phonetic[];
+  };
+}
+
+const WordHero: React.FC<WordHeroProps> = ({ data }) => {
+  const { word, phonetics } = data;
+
+  const americanEnglishPhonetic = phonetics.find((phonetic) =>
+    phonetic.audio?.includes('-us')
+  );
+  const finalPhonetic = americanEnglishPhonetic || phonetics[0];
+
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  const playAudio = () => {
+    if (audioRef.current) {
+      audioRef.current.play();
+    }
+  };
+
+  return (
+    <div className="wordhero-wrapper">
+      <div className="wordhero-word-container">
+        <h1 className="wordhero-word">{word}</h1>
+        {finalPhonetic?.text && (
+          <p className="wordhero-word-phonetic">{finalPhonetic.text}</p>
+        )}
+      </div>
+
+      {finalPhonetic?.audio && (
+        <div>
+          <button onClick={playAudio} className="wordhero-play-btn">
+            <PlayIcon className="wordhero-play-icon" aria-hidden="true" />
+          </button>
+          <audio ref={audioRef} src={finalPhonetic.audio}></audio>
+        </div>
+      )}
+    </div>
+  );
+};
+
+function PlayIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      viewBox="0 0 16 16"
+      {...props}
+    >
+      <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393" />
+    </svg>
+  );
+}
+
+export default WordHero;
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/src/index.css
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/src/index.css
@@ -0,0 +1,337 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+*,
+html,
+body {
+  margin: 0;
+  padding: 0;
+  color: #171717;
+}
+
+button {
+  border: none;
+}
+
+.screen-reader-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ===== App Component ===== */
+.app-wrapper {
+  margin: 0 auto;
+  max-width: 42rem; /* 672px */
+  padding: 3.5rem 1.5rem; /* 56px 24px */
+}
+
+/* ===== Header Component ===== */
+.header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header-logo-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.header-logo-img {
+  height: 2.5rem; /* 40px */
+}
+
+.header-logo-text {
+  font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  font-size: 1.875rem; /* 30px */
+  line-height: 2.25rem; /* 36px */
+  font-weight: 600;
+  margin-left: 1rem; /* 16px */
+  color: #262626;
+}
+
+.header-select {
+  border-radius: 0.375rem; /* 6px */
+  border-width: 0px;
+  padding: 0.625rem 0.5rem; /* 10px 8px */
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.75rem; /* 28px */
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  color: #262626;
+}
+
+.header-select:focus {
+  outline-color: #9333ea;
+}
+
+/* ===== Searchbar Component ===== */
+.searchbar-wrapper {
+  margin-top: 4rem; /* 64px */
+}
+
+.searchbar-container {
+  position: relative;
+  margin-top: 0.5rem; /* 8px */
+  border-radius: 0.75rem; /* 12px */
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.searchbar-input {
+  display: block;
+  width: 100%;
+  border-radius: 0.75rem; /* 12px */
+  border-width: 0px;
+  padding: 1.25rem 0 1.25rem 1.5rem; /* 20px 0 20px 24px */
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.75rem; /* 28px */
+  font-weight: 600;
+  outline-style: solid;
+  outline: 2px solid transparent;
+  outline-color: #f5f5f5;
+  color: #171717;
+  background-color: #f5f5f5;
+}
+
+.searchbar-input:focus {
+  outline-color: #9333ea;
+}
+
+.searchbar-input::placeholder {
+  color: #737373;
+}
+
+.searchbar-magnifying-glass {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0px;
+  display: flex;
+  align-items: center;
+  border-top-right-radius: 0.75rem; /* 12px */
+  border-bottom-right-radius: 0.75rem; /* 12px */
+  padding-left: 1rem; /* 16px */
+  padding-right: 1rem; /* 16px */
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  background-color: transparent;
+}
+
+.searchbar-icon {
+  width: 1.5rem; /* 24px */
+  height: 1.5rem; /* 24px */
+  fill: #6b21a8;
+}
+
+/* ===== WordHero Component ===== */
+.wordhero-wrapper {
+  display: flex;
+  align-items: top;
+  justify-content: space-between;
+  margin-top: 4rem; /* 64px */
+}
+
+.wordhero-word-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.wordhero-word {
+  font-size: 3.75rem; /* 60px */
+  line-height: 1;
+  font-weight: 600;
+  color: #262626;
+}
+
+.wordhero-word-phonetic {
+  font-size: 1.5rem; /* 24px */
+  line-height: 2rem; /* 32px */
+  margin-top: 0.75rem; /* 12px */
+  margin-bottom: 0.75rem; /* 12px */
+  color: #9333ea;
+}
+
+.wordhero-play-btn {
+  display: flex;
+  align-items: center;
+  border-radius: 9999px;
+  padding: 1.25rem; /* 20px */
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  color: white;
+  background-color: #e9d5ff;
+}
+
+.wordhero-play-btn:hover {
+  background-color: #d8b4fe;
+}
+
+.wordhero-play-btn:focus {
+  outline: 2px solid transparent;
+  outline-color: #9333ea;
+}
+
+.wordhero-play-icon {
+  height: 2.5rem; /* 40px */
+  width: 2.5rem; /* 40px */
+  fill: #9333ea;
+}
+
+/* ===== WordDefinitions Component ===== */
+.word-definitions-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem; /* 32px */
+  margin-top: 4rem; /* 64px */
+}
+
+.word-block-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 3.5rem; /* 56px */
+}
+
+.word-block-category-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem; /* 8px */
+}
+
+.word-block-category-name {
+  padding-right: 0.75rem; /* 12px */
+  font-size: 1.5rem; /* 24px */
+  line-height: 2rem; /* 32px */
+  font-weight: 600;
+  color: #262626;
+}
+
+.word-block-category-divider {
+  height: 1px;
+  width: 100%;
+  background-color: #d4d4d4;
+}
+
+.word-block-meaning-container {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem; /* 16px */
+}
+
+.word-block-meaning-title {
+  font-size: 1.25rem; /* 20px */
+  line-height: 1.75rem; /* 28px */
+  font-weight: 400;
+  color: #737373;
+}
+
+.word-block-meaning-list {
+  display: flex;
+  flex-direction: column;
+  padding-left: 1rem; /* 16px */
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.75rem; /* 28px */
+  row-gap: 2rem; /* 32px */
+  color: #262626;
+}
+
+.word-block-meaning-list-item::marker {
+  padding-left: 2.5rem; /* 40px */
+  color: #9333ea;
+}
+
+.word-block-meaning-list-item-example {
+  display: block;
+  margin-top: 0.5rem; /* 8px */
+  color: #9333ea;
+}
+
+.word-block-synonyms-container {
+  display: flex;
+  align-items: baseline;
+  column-gap: 2rem; /* 32px */
+}
+
+.word-block-synonyms-title {
+  font-size: 1.25rem; /* 20px */
+  line-height: 1.75rem; /* 28px */
+  font-weight: 400;
+  color: #737373;
+}
+
+.word-block-synonyms-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem; /* 8px */
+}
+
+.word-block-synonyms-list-item {
+  list-style: none;
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.75rem; /* 28px */
+  font-weight: 600;
+  color: #9333ea;
+}
+
+/* ===== SourceFooter Component ===== */
+.footer-divider {
+  margin-top: 2.5rem; /* 40px */
+  margin-bottom: 2.5rem; /* 40px */
+  height: 1px;
+  background-color: #e5e5e5;
+}
+
+.footer-wrapper {
+  display: flex;
+  align-items: baseline;
+  gap: 1rem; /* 16px */
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.25rem; /* 20px */
+}
+
+.footer-title {
+  font-weight: 400;
+  color: #737373;
+}
+
+.footer-link-wrapper {
+  display: flex;
+  text-decoration: underline;
+  color: #262626;
+}
+
+.footer-link-icon {
+  margin-left: 0.5rem; /* 8px */
+  height: 1rem; /* 16px */
+  width: 1rem; /* 16px */
+  fill: #262626;
+}
+
+/* ===== Breakpoints ===== */
+
+@media (min-width: 640px) {
+  .searchbar-input {
+    line-height: 1.5rem; /* 24px */
+  }
+}
+
+@media (min-width: 768px) {
+  .word-block-meaning-list {
+    padding-left: 2.5rem; /* 40px */
+  }
+}
+
+@media (min-width: 1024px) {
+  .app-wrapper {
+    padding: 3.5rem 0.5rem; /* 56px 8px */
+  }
+}
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/src/lib/constants.ts
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/src/lib/constants.ts
@@ -0,0 +1,5 @@
+export const SERIF_FONTS =
+  'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif';
+
+export const SANS_SERIF_FONTS =
+  'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/src/lib/datatypes.ts
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/src/lib/datatypes.ts
@@ -0,0 +1,22 @@
+export interface Phonetic {
+  text?: string;
+  audio?: string;
+}
+
+export interface Definition {
+  definition: string;
+  example?: string;
+}
+
+export interface Meaning {
+  partOfSpeech: string;
+  definitions: Definition[];
+  synonyms: string[];
+}
+
+export interface WordData {
+  word: string;
+  phonetics: Phonetic[];
+  meanings: Meaning[];
+  sourceUrls: string[];
+}
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/src/main.tsx
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/src/vite-env.d.ts
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/tsconfig.app.json
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/tsconfig.json
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/tsconfig.node.json
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/06_js-debug/unterricht/tag49/04_lexifind-starter/vite.config.ts
+++ b/06_js-debug/unterricht/tag49/04_lexifind-starter/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/.gitignore
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/.oxlintrc.json
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/.oxlintrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/README.md
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/README.md
@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the Oxlint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and Oxlint's TypeScript related rules in your project.
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/index.html
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>05_state-up-lifting</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/package-lock.json
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/package-lock.json
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/package.json
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "05_state-up-lifting",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.4",
+    "oxlint": "^1.75.0",
+    "vite": "^8.2.0"
+  }
+}
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/public/favicon.svg
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/public/favicon.svg
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/public/icons.svg
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/src/App.css
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/src/App.css
@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/src/App.jsx
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/src/App.jsx
@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import reactLogo from './assets/react.svg';
+import viteLogo from './assets/vite.svg';
+import heroImg from './assets/hero.png';
+import './App.css';
+import Counter from './components/Counter';
+
+function App() {
+  // let count = 10;
+
+  const [count, setCount] = useState(10);
+
+  return (
+    <>
+      <section id="center">
+        <div className="hero">
+          <img src={heroImg} className="base" width="170" height="179" alt="" />
+          <img src={reactLogo} className="framework" alt="React logo" />
+          <img src={viteLogo} className="vite" alt="Vite logo" />
+        </div>
+        <div>
+          <h1>Get started - Count: {count}</h1>
+
+          <Counter
+            count={count}
+            handleCount={(value) => {
+              setCount(value);
+            }}
+          />
+        </div>
+      </section>
+
+      <div className="ticks"></div>
+
+      <section id="next-steps">
+        <div id="docs">
+          <svg className="icon" role="presentation" aria-hidden="true">
+            <use href="/icons.svg#documentation-icon"></use>
+          </svg>
+          <h2>Documentation</h2>
+          <p>Your questions, answered</p>
+          <ul>
+            <li>
+              <a href="https://vite.dev/" target="_blank">
+                <img className="logo" src={viteLogo} alt="" />
+                Explore Vite
+              </a>
+            </li>
+            <li>
+              <a href="https://react.dev/" target="_blank">
+                <img className="button-icon" src={reactLogo} alt="" />
+                Learn more
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div id="social">
+          <svg className="icon" role="presentation" aria-hidden="true">
+            <use href="/icons.svg#social-icon"></use>
+          </svg>
+          <h2>Connect with us</h2>
+          <p>Join the Vite community</p>
+          <ul>
+            <li>
+              <a href="https://github.com/vitejs/vite" target="_blank">
+                <svg className="button-icon" role="presentation" aria-hidden="true">
+                  <use href="/icons.svg#github-icon"></use>
+                </svg>
+                GitHub
+              </a>
+            </li>
+            <li>
+              <a href="https://chat.vite.dev/" target="_blank">
+                <svg className="button-icon" role="presentation" aria-hidden="true">
+                  <use href="/icons.svg#discord-icon"></use>
+                </svg>
+                Discord
+              </a>
+            </li>
+            <li>
+              <a href="https://x.com/vite_js" target="_blank">
+                <svg className="button-icon" role="presentation" aria-hidden="true">
+                  <use href="/icons.svg#x-icon"></use>
+                </svg>
+                X.com
+              </a>
+            </li>
+            <li>
+              <a href="https://bsky.app/profile/vite.dev" target="_blank">
+                <svg className="button-icon" role="presentation" aria-hidden="true">
+                  <use href="/icons.svg#bluesky-icon"></use>
+                </svg>
+                Bluesky
+              </a>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <div className="ticks"></div>
+      <section id="spacer"></section>
+    </>
+  );
+}
+
+export default App;
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/src/assets/hero.png
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/src/assets/hero.png
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/src/assets/react.svg
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/src/assets/vite.svg
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/src/assets/vite.svg
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/src/components/Counter.jsx
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/src/components/Counter.jsx
@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+const Counter = (props) => {
+  const { count } = props;
+  // const [count, setCount] = useState(0);
+
+  const handleClick = () => {
+    props.handleCount(count + 1); // state up lifting
+
+    // setCount((prevState) => prevState + 1);
+  };
+
+  return (
+    <div className="counter">
+      <p>Count: {count}</p>
+      <button className="btn btn-dark button-increase" onClick={handleClick}>
+        +
+      </button>
+    </div>
+  );
+};
+export default Counter;
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/src/index.css
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/src/index.css
@@ -0,0 +1,111 @@
+:root {
+  --text: #6b6375;
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #aa3bff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow:
+    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, Consolas, monospace;
+
+  font: 18px/145% var(--sans);
+  letter-spacing: 0.18px;
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media (max-width: 1024px) {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow:
+      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+  }
+
+  #social .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+body {
+  margin: 0;
+}
+
+#root {
+  width: 1126px;
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  border-inline: 1px solid var(--border);
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+h1,
+h2 {
+  font-family: var(--heading);
+  font-weight: 500;
+  color: var(--text-h);
+}
+
+h1 {
+  font-size: 56px;
+  letter-spacing: -1.68px;
+  margin: 32px 0;
+  @media (max-width: 1024px) {
+    font-size: 36px;
+    margin: 20px 0;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: 118%;
+  letter-spacing: -0.24px;
+  margin: 0 0 8px;
+  @media (max-width: 1024px) {
+    font-size: 20px;
+  }
+}
+p {
+  margin: 0;
+}
+
+code,
+.counter {
+  font-family: var(--mono);
+  display: inline-flex;
+  border-radius: 4px;
+  color: var(--text-h);
+}
+
+code {
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  background: var(--code-bg);
+}
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/src/main.jsx
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/06_js-debug/unterricht/tag49/05_state-up-lifting/vite.config.js
+++ b/06_js-debug/unterricht/tag49/05_state-up-lifting/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/.eslintrc.cjs
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/README.md
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/README.md
@@ -0,0 +1,10 @@
+# Frontend Class: VogueJunction Starter Template
+
+Install the dependencies and devDependencies and start the server.
+
+```bash
+npm install
+npm run dev
+```
+
+This will start the server on http://localhost:5173
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/index.html
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vogue Junction</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/package.json
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "01_shop-vitest",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@typescript-eslint/eslint-plugin": "^8.67.0",
+    "@typescript-eslint/parser": "^8.67.0",
+    "@vitejs/plugin-react": "^6.1.0",
+    "eslint": "^10.8.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.2.2"
+  }
+}
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/public/vite.svg
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/CategorySection.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/CategorySection.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+
+type CategorySectionProps = {
+  categories: {
+    imgSrc: string;
+    imgAlt: string;
+    href: string;
+    linkText: string;
+  }[];
+};
+
+import { Link } from 'react-router-dom';
+
+const CategorySection: React.FC<CategorySectionProps> = ({ categories }) => {
+  return (
+    <section aria-labelledby="category-heading">
+      <div className="category-section-wrapper">
+        <h2 id="category-heading" className="category-section-title">
+          Explore by Category
+        </h2>
+
+        <div className="category-section-grid-wrapper">
+          <Link to={categories[0].href} className="category-section-grid-main">
+            <img
+              src={categories[0].imgSrc}
+              alt={categories[0].imgAlt}
+              className="category-section-grid-main-img"
+            />
+
+            <div aria-hidden="true" className="category-section-gradient-bg" />
+
+            <div className="category-section-cta-container">
+              <div>
+                <h3 className="category-section-cta-title">
+                  <span className="category-section-cta-span" />
+                  {categories[0].linkText}
+                </h3>
+                <p aria-hidden="true" className="category-section-cta">
+                  Shop now
+                </p>
+              </div>
+            </div>
+          </Link>
+
+          {categories.slice(1).map((category, index) => (
+            <div key={index} className="category-section-categories-container">
+              <img
+                src={category.imgSrc}
+                alt={category.imgAlt}
+                className="category-section-categories-img"
+              />
+              <div
+                aria-hidden="true"
+                className="category-section-gradient-bg"
+              />
+              <div className="category-section-categories-cta-container">
+                <div>
+                  <h3 className="category-section-cta-title">
+                    <Link to={category.href}>
+                      <span className="category-section-cta-span" />
+                      {category.linkText}
+                    </Link>
+                  </h3>
+                  <p aria-hidden="true" className="category-section-cta">
+                    Shop now
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CategorySection;
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/Footer.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/Footer.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+type NavigationItem = {
+  name: string;
+  href: string;
+};
+
+const navigationItems: NavigationItem[] = [
+  {
+    name: 'Home',
+    href: '/',
+  },
+  {
+    name: 'Women',
+    href: '/women',
+  },
+  {
+    name: 'Men',
+    href: '/men',
+  },
+  {
+    name: 'Accessories',
+    href: '/accessories',
+  },
+];
+
+type FooterProps = {
+  navigation?: NavigationItem[];
+};
+
+const Footer: React.FC<FooterProps> = ({ navigation = navigationItems }) => {
+  return (
+    <footer>
+      <div className="footer-wrapper">
+        <div className="footer-links-container">
+          {navigation.map((item) => (
+            <Link key={item.name} to={item.href}>
+              <span className="footer-links-text">{item.name}</span>
+            </Link>
+          ))}
+        </div>
+
+        <div className="footer-copyright">
+          <p className="footer-copyright-text">
+            &copy; {new Date().getFullYear()} Vogue Junction, Inc. All rights
+            reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/Header.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/Header.tsx
@@ -0,0 +1,53 @@
+import { Link } from 'react-router-dom';
+
+const Header = () => {
+  return (
+    <header>
+      {/* Mobile Header */}
+      <div className="mobile-header-wrapper">
+        <div className="header-container">
+          <Link to="/" className="mobile-header-logo-link">
+            <div className="logo-text">Vogue Junction</div>
+          </Link>
+        </div>
+
+        <div className="mobile-header-links-container">
+          <Link to="/women" className="header-link-text">
+            Women
+          </Link>
+          <Link to="/men" className="header-link-text">
+            Men
+          </Link>
+          <Link to="/accessories" className="header-link-text">
+            Accessories
+          </Link>
+        </div>
+      </div>
+
+      {/* Desktop Header */}
+      <div className="desktop-header-wrapper">
+        <div className="header-container">
+          <Link to="/" className="desktop-header-logo-link">
+            <div className="logo-text">Vogue Junction</div>
+          </Link>
+
+          <div className="desktop-header-links-container">
+            <Link to="/women" className="header-link-text">
+              Women
+            </Link>
+            <Link to="/men" className="header-link-text">
+              Men
+            </Link>
+            <Link to="/accessories" className="header-link-text">
+              Accessories
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div className="header-border"></div>
+    </header>
+  );
+};
+
+export default Header;
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/Hero.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/Hero.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+type HeroProps = {
+  companyName?: string;
+};
+
+const Hero: React.FC<HeroProps> = ({ companyName = 'Vogue Junction' }) => {
+  return (
+    <div className="hero-wrapper">
+      <div className="hero-text-container">
+        <h1 className="hero-title">Welcome to the world of {companyName}!</h1>
+        <p className="hero-subtitle">
+          Discover a diverse collection of stylish products for everyone. From
+          trendy apparel and accessories to timeless classics, we offer
+          something for every taste and occasion. Shop now and elevate your
+          style!
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/ImageGallery.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/ImageGallery.tsx
@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react';
+import { Product } from '../lib/datatypes';
+
+type ImageGalleryProps = {
+  product: Product;
+};
+
+const ImageGallery: React.FC<ImageGalleryProps> = ({
+  product,
+}: {
+  product: Product;
+}) => {
+  const [selectedImage, setSelectedImage] = useState(product.images[0]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'ArrowRight') {
+      setSelectedIndex((prevIndex) => {
+        const nextIndex = (prevIndex + 1) % product.images.length;
+        setSelectedImage(product.images[nextIndex]);
+        return nextIndex;
+      });
+    }
+
+    if (event.key === 'ArrowLeft') {
+      setSelectedIndex((prevIndex) => {
+        const nextIndex =
+          (prevIndex - 1 + product.images.length) % product.images.length;
+        setSelectedImage(product.images[nextIndex]);
+        return nextIndex;
+      });
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [product.images]);
+
+  return (
+    <div className="image-gallery-wrapper">
+      {/* Image selector */}
+      <div className="image-selector-wrapper">
+        <div className="image-selector-container">
+          {product.images.map((image, index) => (
+            <button
+              key={index}
+              className="image-selector-btn"
+              style={{
+                border: selectedIndex === index ? '2px solid #1e293b' : 'none',
+              }}
+              onClick={() => {
+                setSelectedImage(image);
+                setSelectedIndex(index);
+              }}
+            >
+              <span className="screen-reader-text">{image}</span>
+              <span className="image-selector-img-wrapper">
+                <img
+                  src={image}
+                  alt={product.title}
+                  className="image-selector-img"
+                />
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Main Image Display */}
+      <div className="image-selector-main-img-wrapper">
+        <img
+          src={selectedImage}
+          alt={product.title}
+          className="image-selector-main-img"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ImageGallery;
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/ProductList.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/ProductList.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Product } from '../lib/datatypes';
+
+import ProductListCard from './ProductListCard';
+
+type ProductListProps = {
+  data: Product[];
+};
+
+const ProductList: React.FC<ProductListProps> = ({ data }) => {
+  return (
+    <div>
+      <h2 className="screen-reader-text">Products</h2>
+
+      <div className="products-list">
+        {data.map((product) => (
+          <ProductListCard key={product.id} product={product} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ProductList;
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/ProductListCard.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/ProductListCard.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { Product } from '../lib/datatypes';
+
+import { Link } from 'react-router-dom';
+
+const ProductListCard = ({ product }: { product: Product }) => {
+  const { id, title, price, rating, stock, thumbnail } = product;
+
+  return (
+    <div className="product-card-container">
+      <div className="product-card-img-wrapper">
+        <img src={thumbnail} alt={title} className="product-card-img" />
+      </div>
+
+      <div className="product-card-info-box">
+        <h3 className="product-card-name">
+          <Link to={`/products/${id}`}>
+            <span aria-hidden="true" className="product-card-name-span" />
+            {title}
+          </Link>
+        </h3>
+
+        <div className="product-card-desc-box">
+          <p className="screen-reader-text">
+            {Math.round(rating)} out of 5 stars
+          </p>
+
+          <div className="product-card-ratings-wrapper">
+            {[0, 1, 2, 3, 4].map((ratingNumber) => (
+              <StarIcon
+                key={ratingNumber}
+                className="star-icons"
+                style={{
+                  fill: rating > ratingNumber ? '#1e293b' : '#e5e7eb',
+                }}
+                aria-hidden="true"
+              />
+            ))}
+          </div>
+
+          <p className="product-card-stock">{stock} in stock</p>
+        </div>
+
+        <p className="product-card-price">
+          {Number(price).toLocaleString('en-US', {
+            style: 'currency',
+            currency: 'USD',
+          })}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ProductListCard;
+
+function StarIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/index.css
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/index.css
@@ -0,0 +1,798 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+*,
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  color: #0f172a;
+}
+
+button {
+  background-color: transparent;
+  border: none;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+header {
+  position: relative;
+  width: 100%;
+}
+
+footer {
+  border: 1px solid #e5e7eb;
+  border-top-width: 1px;
+  margin-top: 3.5rem /* 56px */;
+}
+
+.screen-reader-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.star-icons {
+  height: 1.25rem /* 20px */;
+  width: 1.25rem /* 20px */;
+  flex-shrink: 0;
+}
+
+/* ===== Header Component ===== */
+.logo-text {
+  font-size: 1.25rem /* 20px */;
+  line-height: 1.75rem /* 28px */;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.header-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem 1rem; /* 24px 16px */
+  max-width: 80rem; /* 1280px */
+  margin: 0 auto;
+}
+
+.mobile-header-wrapper {
+  display: block;
+}
+
+.mobile-header-links-container {
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem; /* 24px */
+  padding-bottom: 1rem /* 16px */;
+}
+
+.mobile-header-logo-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem; /* 16px */
+  width: 100%;
+}
+
+.desktop-header-wrapper {
+  display: none;
+}
+
+.desktop-header-logo-link {
+  display: flex;
+  align-items: center;
+  gap: 1rem; /* 16px */
+}
+
+.desktop-header-links-container {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 1.5rem; /* 24px */
+}
+
+.header-link-text {
+  padding: 0.5rem /* 8px */;
+  color: #1f2937;
+}
+
+.header-link-text:hover {
+  color: #4b5563;
+}
+
+.header-border {
+  border-bottom-width: 2px;
+  width: 100%;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  border-color: #f3f4f6;
+}
+
+/* ===== Hero Component ===== */
+.hero-wrapper {
+  max-width: 42rem /* 672px */;
+  margin: 0 auto;
+  padding: 6rem 1rem; /* 96px 16px */
+}
+
+.hero-text-container {
+  text-align: center;
+}
+
+.hero-title {
+  font-size: 2.25rem /* 36px */;
+  line-height: 2.5rem /* 40px */;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: #111827;
+}
+
+.hero-subtitle {
+  margin-top: 2.5rem /* 40px */;
+  font-size: 1.125rem /* 18px */;
+  line-height: 2rem /* 32px */;
+  color: #4b5563;
+}
+
+/* ===== CategorySection Component ===== */
+.category-section-wrapper {
+  margin: 0 auto;
+  max-width: 80rem /* 1280px */;
+  padding: 2.5rem 1rem; /* 40px 16px */
+}
+
+.category-section-title {
+  font-size: 1.5rem /* 24px */;
+  line-height: 2rem /* 32px */;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: #111827;
+}
+
+.category-section-grid-wrapper {
+  margin-top: 1.5rem /* 24px */;
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  row-gap: 1.5rem /* 24px */;
+}
+
+.category-section-grid-main {
+  position: relative;
+  overflow: hidden;
+  border-radius: 0.5rem /* 8px */;
+  aspect-ratio: 1 / 2;
+  width: 100%;
+  height: 100%;
+  max-height: 250px;
+}
+
+.category-section-grid-main:hover {
+  opacity: 0.85;
+}
+
+.category-section-grid-main-img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: top;
+  filter: grayscale(100%);
+}
+
+.category-section-gradient-bg {
+  position: absolute;
+  bottom: 0;
+  z-index: 100;
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(to bottom, transparent, black);
+  opacity: 0.5;
+}
+
+.category-section-cta-container {
+  position: absolute;
+  z-index: 100;
+  bottom: 0;
+  display: flex;
+  align-items: flex-end;
+  padding: 1.5rem /* 24px */;
+}
+
+.category-section-cta-title {
+  font-weight: 600;
+  color: white;
+}
+
+.category-section-cta-span {
+  position: absolute;
+  inset: 0px;
+  z-index: 100;
+}
+
+.category-section-cta {
+  margin-top: 0.25rem /* 4px */;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  color: white;
+}
+
+.category-section-categories-container {
+  position: relative;
+  aspect-ratio: 1 / 2;
+  overflow: hidden;
+  border-radius: 0.5rem /* 8px */;
+  height: 100%;
+  width: 100%;
+  max-height: 250px;
+}
+
+.category-section-categories-container:hover {
+  opacity: 0.85;
+}
+
+.category-section-categories-img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+  filter: grayscale(100%);
+}
+
+.category-section-categories-cta-container {
+  position: absolute;
+  z-index: 100;
+  bottom: 0;
+  display: flex;
+  align-items: flex-end;
+  padding: 1.5rem; /* 24px */
+}
+
+/* ===== Footer Component ===== */
+.footer-wrapper {
+  margin: 0 auto;
+  max-width: 80rem /* 1280px */;
+  padding: 3rem 1.5rem; /* 48px 24px */
+}
+
+.footer-links-container {
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem; /* 24px */
+}
+
+.footer-links-text {
+  color: #9ca3af;
+}
+
+.footer-links-text:hover {
+  color: #4b5563;
+}
+
+.footer-copyright {
+  margin-top: 2rem /* 32px */;
+}
+
+.footer-copyright-text {
+  text-align: center;
+  font-size: 0.75rem /* 12px */;
+  line-height: 1rem /* 16px */;
+  line-height: 1.25rem /* 20px */;
+  color: #6b7280;
+}
+
+/* ===== ProductList Component ===== */
+.products-list {
+  margin: 0 -1px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+/* ===== ProductListCard Component ===== */
+.product-card-container {
+  position: relative;
+  padding: 1rem;
+}
+
+.product-card-img-wrapper {
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  border-radius: 0.5rem /* 8px */;
+  background-color: white;
+}
+
+.product-card-container:hover .product-card-img-wrapper {
+  opacity: 0.75;
+}
+
+.product-card-img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.product-card-info-box {
+  padding-bottom: 1rem /* 16px */;
+  padding-top: 2.5rem /* 40px */;
+  text-align: center;
+}
+
+.product-card-name {
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  font-weight: 500;
+  color: #111827;
+}
+
+.product-card-name-span {
+  position: absolute;
+  inset: 0px;
+}
+
+.product-card-desc-box {
+  margin-top: 0.75rem /* 12px */;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.product-card-ratings-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.product-card-stock {
+  margin-top: 0.25rem /* 4px */;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  color: #6b7280;
+}
+
+.product-card-price {
+  margin-top: 1rem /* 16px */;
+  font-size: 1rem /* 16px */;
+  line-height: 1.5rem /* 24px */;
+  font-weight: 500;
+  color: #111827;
+}
+
+/* ===== ImageGallery Component ===== */
+.image-gallery-wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.image-selector-wrapper {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 1.5rem /* 24px */;
+  display: none;
+  width: 100%;
+  max-width: 42rem /* 672px */;
+}
+
+.image-selector-container {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1.5rem /* 24px */;
+}
+
+.image-selector-btn {
+  position: relative;
+  display: flex;
+  height: 6rem /* 96px */;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem /* 6px */;
+  background-color: white;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: #111827;
+}
+
+.image-selector-btn:hover {
+  background-color: #f9fafb;
+}
+
+.image-selector-img-wrapper {
+  position: absolute;
+  inset: 0px;
+  display: flex;
+  overflow: hidden;
+  border-radius: 0.375rem /* 6px */;
+}
+
+.image-selector-img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.image-selector-main-img-wrapper {
+  aspect-ratio: 1 / 1;
+  width: 100%;
+}
+
+.image-selector-main-img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+/* ===== Category Page ===== */
+.category-page-wrapper {
+  padding: 3.5rem 0; /* 56px 0 */
+}
+
+.category-page-container {
+  margin: 0 auto;
+  max-width: 80rem /* 1280px */;
+  overflow: hidden;
+  padding: 0 1rem; /* 0 16px */
+}
+
+.category-page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: top;
+}
+
+.category-page-header-title {
+  font-size: 1.5rem /* 24px */;
+  line-height: 2rem /* 32px */;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: #111827;
+  margin-bottom: 2rem /* 32px */;
+}
+
+.category-page-select {
+  margin: 0.5rem 0; /* 8px 0 */
+  display: block;
+  width: 11rem /* 176px */;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem /* 6px */;
+  padding-top: 0.5rem /* 8px */;
+  padding-bottom: 0.5rem /* 8px */;
+  color: #0f172a;
+}
+
+.category-page-select:focus {
+  border: 1px solid #1e293b;
+}
+
+.category-page-products-wrapper {
+  margin-top: 2.5rem /* 40px */;
+}
+
+/* ===== Single Product Page ===== */
+.back-button-wrapper {
+  margin: 0 auto;
+  max-width: 42rem /* 672px */;
+  padding-left: 1rem /* 16px */;
+  padding-right: 1rem /* 16px */;
+  padding-top: 2rem /* 32px */;
+}
+
+.back-button {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem /* 16px */;
+  font-weight: 500;
+  margin-top: 1.5rem /* 24px */;
+}
+
+.back-button-icon {
+  height: 1.5rem /* 24px */;
+  width: 1.5rem /* 24px */;
+  stroke: #1e293b;
+}
+
+.back-button-icon-span {
+  margin-left: 0.75rem /* 12px */;
+  font-size: 1rem /* 16px */;
+  line-height: 1.5rem /* 24px */;
+}
+
+.product-page-wrapper {
+  margin: 0 auto;
+  max-width: 42rem /* 672px */;
+  padding: 2.5rem 1rem; /* 40px 16px */
+}
+
+.product-page-container {
+  display: block;
+}
+
+.product-page-info-container {
+  margin-top: 2.5rem /* 40px */;
+  padding-left: 1rem /* 16px */;
+  padding-right: 1rem /* 16px */;
+}
+
+.product-page-info-title {
+  font-size: 1.875rem /* 30px */;
+  line-height: 2.25rem /* 36px */;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: #111827;
+}
+
+.product-page-mt-3 {
+  margin-top: 0.75rem /* 12px */;
+}
+
+.product-page-mt-6 {
+  margin-top: 1.5rem /* 24px */;
+}
+
+.product-page-text {
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  color: #6b7280;
+}
+
+.product-page-info-price {
+  font-size: 1.875rem /* 30px */;
+  line-height: 2.25rem /* 36px */;
+  letter-spacing: -0.025em;
+  color: #111827;
+}
+
+.product-page-info-rating-container {
+  display: flex;
+  align-items: center;
+}
+
+.product-page-description {
+  font-size: 1rem /* 16px */;
+  line-height: 1.5rem /* 24px */;
+  line-height: 2;
+  color: #374151;
+}
+
+.product-page-tags-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem; /* 8px */
+}
+
+.product-page-tag {
+  font-size: 0.75rem /* 12px */;
+  line-height: 1rem /* 16px */;
+  font-weight: 500;
+  text-transform: uppercase;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  background-color: #1e293b;
+  color: white;
+}
+
+.product-page-reviews-wrapper {
+  margin-top: 3.5rem /* 56px */;
+}
+
+.product-page-reviews-title {
+  font-size: 1.5rem /* 24px */;
+  line-height: 2rem /* 32px */;
+  font-weight: 500;
+  color: #111827;
+}
+
+.product-page-reviews-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem /* 20px */;
+  margin-top: 0.5rem /* 8px */;
+}
+
+.product-page-ratings-box {
+  display: flex;
+  align-items: center;
+}
+
+.product-page-reviews-text-box {
+  display: flex;
+  align-items: center;
+  gap: 1rem; /* 16px */
+  margin-top: 0.5rem /* 8px */;
+}
+
+.product-page-reviews-comment {
+  margin-top: 0.5rem /* 8px */;
+  font-size: 1.125rem /* 18px */;
+  line-height: 1.75rem /* 28px */;
+  color: #374151;
+}
+
+/* ===== Breakpoints ===== */
+@media (min-width: 640px) {
+  .desktop-header-container {
+    padding: 1.5rem 2rem; /* 24px 32px */
+  }
+
+  .hero-wrapper {
+    padding: 6rem 2rem; /* 96px 32px */
+  }
+
+  .hero-title {
+    font-size: 3.75rem /* 60px */;
+    line-height: 1;
+  }
+
+  .category-section-wrapper {
+    padding: 2.5rem 1.5rem; /* 40px 24px */
+  }
+
+  .category-section-grid-wrapper {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+    column-gap: 1.5rem /* 24px */;
+    grid-row: span 2 / span 2;
+  }
+
+  .category-section-grid-main {
+    aspect-ratio: 1 / 1;
+    grid-row: span 2 / span 2;
+    max-height: 100%;
+  }
+
+  .category-section-grid-main-img {
+    object-position: center;
+  }
+
+  .category-section-categories-container {
+    position: relative;
+    max-height: 300px;
+  }
+
+  .category-section-categories-img {
+    position: absolute;
+    inset: 0px;
+    height: 100%;
+    width: 100%;
+  }
+
+  .category-section-categories-cta-container {
+    position: absolute;
+    inset: 0px;
+  }
+
+  .category-page-container {
+    padding: 0 1.5rem; /* 0 24px */
+  }
+
+  .products-list {
+    margin: 0;
+  }
+
+  .product-card-container {
+    padding: 1.5rem;
+  }
+
+  .back-button-wrapper {
+    padding-left: 1.5rem /* 24px */;
+    padding-right: 1.5rem /* 24px */;
+  }
+
+  .product-page-wrapper {
+    padding: 2.5rem 1.5rem; /* 40px 24px */
+  }
+
+  .image-selector-wrapper {
+    display: block;
+  }
+
+  .image-selector-main-img {
+    border-radius: 0.5rem /* 8px */;
+  }
+
+  .product-page-info-container {
+    margin-top: 4rem /* 64px */;
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}
+
+@media (min-width: 768px) {
+  footer {
+    margin-top: 5rem; /* 80px */
+  }
+
+  .mobile-header-wrapper {
+    display: none;
+  }
+
+  .desktop-header-wrapper {
+    display: block;
+  }
+
+  .logo-text {
+    font-size: 1.5rem /* 24px */;
+    line-height: 2rem /* 32px */;
+  }
+
+  .footer-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 3rem 2rem; /* 48px 32px */
+  }
+
+  .footer-links-container {
+    order: 2;
+  }
+
+  .footer-copyright {
+    order: 1;
+    margin-top: 0;
+  }
+
+  .products-list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  footer {
+    margin-top: 6rem; /* 96px */
+  }
+
+  .category-section-wrapper {
+    padding: 2.5rem 2rem /* 40px 32px */;
+  }
+
+  .category-page-container {
+    padding: 0 2rem; /* 0 32px */
+  }
+
+  .products-list {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .back-button-wrapper {
+    max-width: 80rem /* 1280px */;
+    padding-left: 2rem /* 32px */;
+    padding-right: 2rem /* 32px */;
+  }
+
+  .product-page-wrapper {
+    padding: 2.5rem 2rem; /* 40px 32px */
+    max-width: 80rem /* 1280px */;
+  }
+
+  .product-page-container {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: center;
+    column-gap: 2rem /* 32px */;
+  }
+
+  .image-selector-wrapper {
+    max-width: none;
+  }
+
+  .product-page-info-container {
+    margin-top: 0px;
+  }
+}
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/lib/datatypes.ts
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/lib/datatypes.ts
@@ -0,0 +1,45 @@
+export interface Product {
+  id: number;
+  title: string;
+  description: string;
+  category: string;
+  price: number;
+  discountPercentage: number;
+  rating: number;
+  stock: number;
+  tags: string[];
+  brand: string;
+  sku: string;
+  weight: number;
+  dimensions: Dimensions;
+  warrantyInformation: string;
+  shippingInformation: string;
+  availabilityStatus: string;
+  reviews: Review[];
+  returnPolicy: string;
+  minimumOrderQuantity: number;
+  meta: Meta;
+  images: string[];
+  thumbnail: string;
+}
+
+export interface Dimensions {
+  width: number;
+  height: number;
+  depth: number;
+}
+
+export interface Review {
+  rating: number;
+  comment: string;
+  date: Date;
+  reviewerName: string;
+  reviewerEmail: string;
+}
+
+export interface Meta {
+  createdAt: Date;
+  updatedAt: Date;
+  barcode: string;
+  qrCode: string;
+}
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/lib/helpers.ts
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/lib/helpers.ts
@@ -0,0 +1,16 @@
+import { Product } from './datatypes';
+
+export const fetchProductsByCategory = async (
+  category: string
+): Promise<Product[]> => {
+  try {
+    const response = await fetch(
+      `https://dummyjson.com/products/category/${category}`
+    );
+    const data = await response.json();
+    return data.products;
+  } catch (error) {
+    console.error(`Failed to fetch products for category ${category}:`, error);
+    return [];
+  }
+};
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/main.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/main.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import Homepage from './pages/root';
+import WomenProducts from './pages/women';
+import MenProducts from './pages/men';
+import AccessoryProducts from './pages/accessories';
+import ProductPage from './pages/product';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Homepage />,
+  },
+  {
+    path: '/women',
+    element: <WomenProducts />,
+  },
+  {
+    path: '/men',
+    element: <MenProducts />,
+  },
+  {
+    path: '/accessories',
+    element: <AccessoryProducts />,
+  },
+  {
+    path: '/products/:productId',
+    element: <ProductPage />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>
+);
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/pages/accessories.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/pages/accessories.tsx
@@ -0,0 +1,88 @@
+import { useState, useEffect } from 'react';
+
+import Header from '../components/Header';
+import ProductList from '../components/ProductList';
+import Footer from '../components/Footer';
+
+import { Product } from '../lib/datatypes';
+import { fetchProductsByCategory } from '../lib/helpers';
+
+export default function AccessoryProducts() {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+
+  const categories = [
+    'all',
+    'mobile-accessories',
+    'sports-accessories',
+    'kitchen-accessories',
+  ];
+
+  const fetchProducts = async () => {
+    try {
+      const fetchedProducts =
+        selectedCategory === 'all'
+          ? await Promise.all(categories.slice(1).map(fetchProductsByCategory))
+          : await fetchProductsByCategory(selectedCategory);
+
+      const allProducts = Array.isArray(fetchedProducts)
+        ? fetchedProducts.flat()
+        : fetchedProducts;
+
+      setProducts(allProducts);
+    } catch (error) {
+      console.error('Failed to fetch products:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchProducts();
+  }, [selectedCategory]);
+
+  return (
+    <div>
+      <Header />
+
+      <main className="category-page-wrapper">
+        <div className="category-page-container">
+          <div className="category-page-header">
+            <h2 id="favorites-heading" className="category-page-header-title">
+              Accessories
+            </h2>
+
+            <div>
+              <label htmlFor="category" className="screen-reader-text">
+                Category
+              </label>
+              <select
+                id="category"
+                name="category"
+                className="category-page-select"
+                value={selectedCategory}
+                onChange={(e) => setSelectedCategory(e.target.value)}
+              >
+                {categories.map((category) => (
+                  <option key={category} value={category}>
+                    {category
+                      .split('-')
+                      .filter((word) => word !== 'accessories')
+                      .map(
+                        (word) => word.charAt(0).toUpperCase() + word.slice(1)
+                      )
+                      .join(' ')}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          <div className="category-page-products-wrapper">
+            {products && <ProductList data={products} />}
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/pages/men.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/pages/men.tsx
@@ -0,0 +1,83 @@
+import { useState, useEffect } from 'react';
+
+import Header from '../components/Header';
+import ProductList from '../components/ProductList';
+import Footer from '../components/Footer';
+
+import { Product } from '../lib/datatypes';
+import { fetchProductsByCategory } from '../lib/helpers';
+
+export default function MenProducts() {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+
+  const categories = ['all', 'mens-shirts', 'mens-shoes', 'mens-watches'];
+
+  const fetchProducts = async () => {
+    try {
+      const fetchedProducts =
+        selectedCategory === 'all'
+          ? await Promise.all(categories.slice(1).map(fetchProductsByCategory))
+          : await fetchProductsByCategory(selectedCategory);
+
+      const allProducts = Array.isArray(fetchedProducts)
+        ? fetchedProducts.flat()
+        : fetchedProducts;
+
+      setProducts(allProducts);
+    } catch (error) {
+      console.error('Failed to fetch products:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchProducts();
+  }, [selectedCategory]);
+
+  return (
+    <div>
+      <Header />
+
+      <main className="category-page-wrapper">
+        <div className="category-page-container">
+          <div className="category-page-header">
+            <h2 id="favorites-heading" className="category-page-header-title">
+              Men Products
+            </h2>
+
+            <div>
+              <label htmlFor="category" className="screen-reader-text">
+                Category
+              </label>
+              <select
+                id="category"
+                name="category"
+                className="category-page-select"
+                value={selectedCategory}
+                onChange={(e) => setSelectedCategory(e.target.value)}
+              >
+                {categories.map((category) => (
+                  <option key={category} value={category}>
+                    {category
+                      .split('-')
+                      .filter((word) => word !== 'mens')
+                      .map(
+                        (word) => word.charAt(0).toUpperCase() + word.slice(1)
+                      )
+                      .join(' ')}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          <div className="category-page-products-wrapper">
+            {products && <ProductList data={products} />}
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/pages/product.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/pages/product.tsx
@@ -0,0 +1,207 @@
+import { useState, useEffect } from 'react';
+import { Product, Review } from '../lib/datatypes';
+
+import { useParams, useNavigate } from 'react-router-dom';
+
+import Header from '../components/Header';
+import ImageGallery from '../components/ImageGallery';
+import Footer from '../components/Footer';
+
+const ProductPage = () => {
+  const { productId } = useParams<{ productId: string }>();
+  const [product, setProduct] = useState<Product | null>(null);
+
+  const fetchProduct = async () => {
+    try {
+      const productRes = await fetch(
+        `https://dummyjson.com/products/${productId}`
+      );
+      const productData = await productRes.json();
+      setProduct(productData);
+    } catch (error) {
+      console.error('Failed to fetch products:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchProduct();
+  }, [productId]);
+
+  if (!product) {
+    return null;
+  }
+
+  return (
+    <div>
+      <Header />
+
+      <main>
+        <BackButton />
+
+        <div className="product-page-wrapper">
+          <div className="product-page-container">
+            <ImageGallery product={product} />
+
+            {/* Product info */}
+            <div className="product-page-info-container">
+              <h1 className="product-page-info-title">{product.title}</h1>
+
+              <div className="product-page-mt-3">
+                <h2 className="screen-reader-text">Product information</h2>
+
+                <p className="product-page-info-price">
+                  {Number(product.price).toLocaleString('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                  })}
+                </p>
+
+                {/* Rating */}
+                <div className="product-page-mt-3">
+                  <h3 className="screen-reader-text">Rating</h3>
+
+                  <div className="product-page-info-rating-container">
+                    <div className="product-page-info-rating-container">
+                      {[0, 1, 2, 3, 4].map((rating) => (
+                        <StarIcon
+                          key={rating}
+                          className="star-icons"
+                          style={{
+                            fill:
+                              product.rating > rating ? '#1e293b' : '#e5e7eb',
+                          }}
+                          aria-hidden="true"
+                        />
+                      ))}
+                    </div>
+                    <p className="screen-reader-text">
+                      {product.rating} out of 5 stars
+                    </p>
+                  </div>
+                </div>
+
+                {/* Availability */}
+                <div className="product-page-mt-3">
+                  <p className="product-page-text">{product.stock} in stock</p>
+                </div>
+
+                {/* Description */}
+                <div className="product-page-mt-6">
+                  <h3 className="screen-reader-text">Description</h3>
+
+                  <p className="product-page-description">
+                    {product.description}
+                  </p>
+                </div>
+
+                {/* Tags */}
+                <div className="product-page-mt-6">
+                  <h3 className="screen-reader-text">Tags</h3>
+                  <div className="product-page-tags-container">
+                    {product.tags.map((tag) => (
+                      <span key={tag} className="product-page-tag">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <Reviews reviews={product.reviews} />
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default ProductPage;
+
+function BackButton() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="back-button-wrapper ">
+      <button onClick={() => navigate(-1)} className="back-button">
+        <ChevronRightIcon className="back-button-icon" />
+        <span className="back-button-icon-span">Back</span>
+      </button>
+    </div>
+  );
+}
+
+function Reviews({ reviews }: { reviews: Review[] }) {
+  return (
+    <div className="product-page-reviews-wrapper">
+      <h3 className="product-page-reviews-title">Reviews</h3>
+
+      <div className="product-page-reviews-container">
+        {reviews.map((review, index) => (
+          <div key={index} className="product-page-mt-6">
+            <div className="product-page-ratings-box">
+              {[0, 1, 2, 3, 4].map((rating) => (
+                <StarIcon
+                  key={rating}
+                  className="star-icons"
+                  style={{
+                    fill: review.rating > rating ? '#1e293b' : '#e5e7eb',
+                  }}
+                  aria-hidden="true"
+                />
+              ))}
+            </div>
+
+            <div className="product-page-reviews-text-box">
+              <p className="product-page-text">{review.reviewerName}</p>
+
+              <p className="product-page-text">
+                {new Date(review.date).toLocaleDateString()}
+              </p>
+            </div>
+
+            <p className="product-page-reviews-comment">{review.comment}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ChevronRightIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.75 19.5 8.25 12l7.5-7.5"
+      />
+    </svg>
+  );
+}
+
+function StarIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/pages/root.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/pages/root.tsx
@@ -0,0 +1,43 @@
+import Header from '../components/Header';
+import Hero from '../components/Hero';
+import CategorySection from '../components/CategorySection';
+import Footer from '../components/Footer';
+
+const categories = [
+  {
+    imgSrc:
+      'https://images.unsplash.com/photo-1530011940847-04cba36df39f?q=80&w=1920',
+    imgAlt:
+      'Two female models sitting on a bed. Photo by Billie (@billiebodybrand) on Unsplash.',
+    href: '/women',
+    linkText: 'Women Clothing',
+  },
+  {
+    imgSrc:
+      'https://images.unsplash.com/photo-1595909315417-2edd382a56dc?q=80&w=1920',
+    imgAlt:
+      'Jumping rope, smartphone, sports bra, a pair of sneakers, and a water bottle. Photo by erica steeves on Unsplash.',
+    href: '/accessories',
+    linkText: 'Accessories',
+  },
+  {
+    imgSrc:
+      'https://images.unsplash.com/photo-1467779009031-53938b78ca38?q=80&w=1920',
+    imgAlt: 'Group of men sitting in a van. Photo by Luke Porter on Unsplash.',
+    href: '/men',
+    linkText: 'Men Clothing',
+  },
+];
+
+export default function Root() {
+  return (
+    <>
+      <Header />
+      <main>
+        <Hero companyName="Vogue Junction" />
+        <CategorySection categories={categories} />
+      </main>
+      <Footer />
+    </>
+  );
+}
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/pages/women.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/pages/women.tsx
@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react';
+
+import Header from '../components/Header';
+import ProductList from '../components/ProductList';
+import Footer from '../components/Footer';
+
+import { Product } from '../lib/datatypes';
+import { fetchProductsByCategory } from '../lib/helpers';
+
+export default function WomenProducts() {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+
+  const categories = [
+    'all',
+    'womens-bags',
+    'womens-dresses',
+    'womens-shoes',
+    'womens-jewellery',
+  ];
+
+  const fetchProducts = async () => {
+    try {
+      const fetchedProducts =
+        selectedCategory === 'all'
+          ? await Promise.all(categories.slice(1).map(fetchProductsByCategory))
+          : await fetchProductsByCategory(selectedCategory);
+
+      const allProducts = Array.isArray(fetchedProducts)
+        ? fetchedProducts.flat()
+        : fetchedProducts;
+
+      setProducts(allProducts);
+    } catch (error) {
+      console.error('Failed to fetch products:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchProducts();
+  }, [selectedCategory]);
+
+  return (
+    <div>
+      <Header />
+
+      <main className="category-page-wrapper">
+        <div className="category-page-container">
+          <div className="category-page-header">
+            <h2 id="favorites-heading" className="category-page-header-title">
+              Women Products
+            </h2>
+
+            <div>
+              <label htmlFor="category" className="screen-reader-text">
+                Category
+              </label>
+              <select
+                id="category"
+                name="category"
+                className="category-page-select"
+                value={selectedCategory}
+                onChange={(e) => setSelectedCategory(e.target.value)}
+              >
+                {categories.map((category) => (
+                  <option key={category} value={category}>
+                    {category
+                      .split('-')
+                      .filter((word) => word !== 'womens')
+                      .map(
+                        (word) => word.charAt(0).toUpperCase() + word.slice(1)
+                      )
+                      .join(' ')}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          <div className="category-page-products-wrapper">
+            {products && <ProductList data={products} />}
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/vite-env.d.ts
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/tsconfig.app.json
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/tsconfig.json
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/tsconfig.node.json
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/vite.config.ts
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>