+
+
+
+
+ + Accessories +
+ +
+
+
+
+ {products &&
+
+
+ + Explore by Category +
+ +
+
+ ![{categories[0].imgAlt}]({categories[0].imgSrc})
+
+
+
+
+
+
+
+
+ {categories.slice(1).map((category, index) => (
+
+
+ + + {categories[0].linkText} +
+ +
+ 
+
+
+ ))}
+
+
+
+
+ + + + {category.linkText} + +
+ +
+
+
+ {/* Desktop Header */}
+
+
+
+
+ Vogue Junction
+
+
+
+ Women
+
+
+ Men
+
+
+ Accessories
+
+
+
+
+
+
+
+
+
+ Vogue Junction
+
+
+
+
+ Women
+
+
+ Men
+
+
+ Accessories
+
+
+
+
+ );
+};
+
+export default Hero;
diff --git a/07_js-debug/unterricht/tag43/04_vite-shop/src/components/ImageGallery.tsx b/07_js-debug/unterricht/tag43/04_vite-shop/src/components/ImageGallery.tsx
new file mode 100644
index 0000000..10a9671
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vite-shop/src/components/ImageGallery.tsx
@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from 'react';
+import type { Product } from '../lib/datatypes';
+
+type ImageGalleryProps = {
+ product: Product;
+};
+
+const ImageGallery: React.FC
+
+ Welcome to the world of {companyName}!
++ 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! +
+
+ {/* Image selector */}
+
+ );
+};
+
+export default ImageGallery;
diff --git a/07_js-debug/unterricht/tag43/04_vite-shop/src/components/ProductList.tsx b/07_js-debug/unterricht/tag43/04_vite-shop/src/components/ProductList.tsx
new file mode 100644
index 0000000..3859b46
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vite-shop/src/components/ProductList.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import type { Product } from '../lib/datatypes';
+
+import ProductListCard from './ProductListCard';
+
+type ProductListProps = {
+ data: Product[];
+};
+
+const ProductList: React.FC
+
+
+ {/* Main Image Display */}
+
+ {product.images.map((image, index) => (
+
+ ))}
+
+
+ 
+
+
+
+ );
+};
+
+export default ProductList;
diff --git a/07_js-debug/unterricht/tag43/04_vite-shop/src/components/ProductListCard.tsx b/07_js-debug/unterricht/tag43/04_vite-shop/src/components/ProductListCard.tsx
new file mode 100644
index 0000000..7c22ad4
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vite-shop/src/components/ProductListCard.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import type { Product } from '../lib/datatypes';
+
+const ProductListCard = ({ product }: { product: Product }) => {
+ const { id, title, price, rating, stock, thumbnail } = product;
+
+ return (
+ Products
+ +
+ {data.map((product) => (
+
+
+
+ );
+};
+
+export default ProductListCard;
+
+function StarIcon(props: React.SVGProps
+ 
+
+
+
+
+ + + + {title} + +
+ +
+
+
+ {Math.round(rating)} out of 5 stars
+ +
+ {[0, 1, 2, 3, 4].map((ratingNumber) => (
+ ratingNumber ? '#1e293b' : '#e5e7eb',
+ }}
+ aria-hidden="true"
+ />
+ ))}
+
+
+ {stock} in stock
++ {Number(price).toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + })} +
+
+
+
+
+
+
+ );
+}
diff --git a/07_js-debug/unterricht/tag43/04_vite-shop/src/pages/men.tsx b/07_js-debug/unterricht/tag43/04_vite-shop/src/pages/men.tsx
new file mode 100644
index 0000000..5f73e73
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vite-shop/src/pages/men.tsx
@@ -0,0 +1,76 @@
+import { useState, useEffect } from 'react';
+
+import Header from '../components/Header';
+import ProductList from '../components/ProductList';
+import Footer from '../components/Footer';
+
+import type { Product } from '../lib/datatypes';
+import { fetchProductsByCategory } from '../lib/helpers';
+
+export default function MenProducts() {
+ const [products, setProducts] = useState
+
+
+
+
+
+ );
+}
diff --git a/07_js-debug/unterricht/tag43/04_vite-shop/src/pages/product.tsx b/07_js-debug/unterricht/tag43/04_vite-shop/src/pages/product.tsx
new file mode 100644
index 0000000..5538385
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vite-shop/src/pages/product.tsx
@@ -0,0 +1,188 @@
+import { useState, useEffect } from 'react';
+import type { 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
+
+
+
+
+ + Men Products +
+ +
+
+
+
+ {products &&
+
+
+
+
+
+
+ );
+};
+
+export default ProductPage;
+
+function BackButton() {
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
+
+
+
+ {product.title}
+ +
+
+ Product information
+ ++ {Number(product.price).toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + })} +
+ + {/* Rating */} +
+
+
+ {/* Availability */}
+ Rating
+ +
+
+
+ {[0, 1, 2, 3, 4].map((rating) => (
+ rating ? '#1e293b' : '#e5e7eb',
+ }}
+ aria-hidden="true"
+ />
+ ))}
+
+ {product.rating} out of 5 stars
+
+
+
+ {/* Description */}
+ {product.stock} in stock
+
+
+
+ {/* Tags */}
+ Description
+ +{product.description}
+
+
+ Tags
+
+ {product.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+ );
+}
+
+function Reviews({ reviews }: { reviews: Review[] }) {
+ return (
+
+
+ );
+}
+
+function ChevronRightIcon(props: React.SVGPropsReviews
+ +
+ {reviews.map((review, index) => (
+
+
+
+ ))}
+
+ {[0, 1, 2, 3, 4].map((rating) => (
+ rating ? '#1e293b' : '#e5e7eb',
+ }}
+ aria-hidden="true"
+ />
+ ))}
+
+
+
+
+
+ {review.reviewerName}
+ +{new Date(review.date).toLocaleDateString()}
+{review.comment}
+
+
+
+
+
+
+ );
+}
diff --git a/07_js-debug/unterricht/tag43/04_vite-shop/tsconfig.app.json b/07_js-debug/unterricht/tag43/04_vite-shop/tsconfig.app.json
new file mode 100644
index 0000000..6830b6f
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vite-shop/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023", "DOM"],
+ "module": "esnext",
+ "types": ["vite/client"],
+ "allowArbitraryExtensions": true,
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/07_js-debug/unterricht/tag43/04_vite-shop/tsconfig.json b/07_js-debug/unterricht/tag43/04_vite-shop/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vite-shop/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/07_js-debug/unterricht/tag43/04_vite-shop/tsconfig.node.json b/07_js-debug/unterricht/tag43/04_vite-shop/tsconfig.node.json
new file mode 100644
index 0000000..8455dcb
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vite-shop/tsconfig.node.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023"],
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "module": "nodenext",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/07_js-debug/unterricht/tag43/04_vite-shop/vite.config.ts b/07_js-debug/unterricht/tag43/04_vite-shop/vite.config.ts
new file mode 100644
index 0000000..d789a7c
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vite-shop/vite.config.ts
@@ -0,0 +1,11 @@
+import react, { reactCompilerPreset } from '@vitejs/plugin-react'
+import babel from '@rolldown/plugin-babel'
+import { defineConfig } from 'vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [
+ react(),
+ babel({ presets: [reactCompilerPreset()] })
+ ],
+})
diff --git a/07_js-debug/unterricht/tag43/04_vitest-starter/.eslintrc.cjs b/07_js-debug/unterricht/tag43/04_vitest-starter/.eslintrc.cjs
new file mode 100644
index 0000000..d6c9537
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vitest-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 },
+ ],
+ },
+}
diff --git a/07_js-debug/unterricht/tag43/04_vitest-starter/README.md b/07_js-debug/unterricht/tag43/04_vitest-starter/README.md
new file mode 100644
index 0000000..7d128c6
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vitest-starter/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
diff --git a/07_js-debug/unterricht/tag43/04_vitest-starter/index.html b/07_js-debug/unterricht/tag43/04_vitest-starter/index.html
new file mode 100644
index 0000000..6574d3c
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vitest-starter/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+ + Women Products +
+ +
+
+
+
+ {products &&
+
+
+ + Explore by Category +
+ +
+
+
+
+
+
+
+
+
+
+
+ {categories.slice(1).map((category, index) => (
+
+
+ + + {categories[0].linkText} +
+ +
+
+
+
+ ))}
+
+
+
+
+ + + + {category.linkText} + +
+ +
+
+
+ {/* Desktop Header */}
+
+
+
+
+ Vogue Junction
+
+
+
+ Women
+
+
+ Men
+
+
+ Accessories
+
+
+
+
+
+
+
+
+
+ Vogue Junction
+
+
+
+
+ Women
+
+
+ Men
+
+
+ Accessories
+
+
+
+
+ );
+};
+
+export default Hero;
diff --git a/07_js-debug/unterricht/tag43/04_vitest-starter/src/components/ImageGallery.tsx b/07_js-debug/unterricht/tag43/04_vitest-starter/src/components/ImageGallery.tsx
new file mode 100644
index 0000000..7fc4dac
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vitest-starter/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
+
+ Welcome to the world of {companyName}!
++ 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! +
+
+ {/* Image selector */}
+
+ );
+};
+
+export default ImageGallery;
diff --git a/07_js-debug/unterricht/tag43/04_vitest-starter/src/components/ProductList.tsx b/07_js-debug/unterricht/tag43/04_vitest-starter/src/components/ProductList.tsx
new file mode 100644
index 0000000..17f7234
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vitest-starter/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
+
+
+ {/* Main Image Display */}
+
+ {product.images.map((image, index) => (
+
+ ))}
+
+
+
+
+
+
+ );
+};
+
+export default ProductList;
diff --git a/07_js-debug/unterricht/tag43/04_vitest-starter/src/components/ProductListCard.tsx b/07_js-debug/unterricht/tag43/04_vitest-starter/src/components/ProductListCard.tsx
new file mode 100644
index 0000000..396b8ba
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vitest-starter/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 (
+ Products
+ +
+ {data.map((product) => (
+
+
+
+ );
+};
+
+export default ProductListCard;
+
+function StarIcon(props: React.SVGProps
+
+
+
+
+
+ + + + {title} + +
+ +
+
+
+ + {Math.round(rating)} out of 5 stars +
+ +
+ {[0, 1, 2, 3, 4].map((ratingNumber) => (
+ ratingNumber ? '#1e293b' : '#e5e7eb',
+ }}
+ aria-hidden="true"
+ />
+ ))}
+
+
+ {stock} in stock
++ {Number(price).toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + })} +
+
+
+
+
+
+
+ );
+}
diff --git a/07_js-debug/unterricht/tag43/04_vitest-starter/src/pages/men.tsx b/07_js-debug/unterricht/tag43/04_vitest-starter/src/pages/men.tsx
new file mode 100644
index 0000000..710cc0b
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vitest-starter/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
+
+
+
+
+ + Accessories +
+ +
+
+
+
+
+ {products &&
+
+
+
+
+
+
+ );
+}
diff --git a/07_js-debug/unterricht/tag43/04_vitest-starter/src/pages/product.tsx b/07_js-debug/unterricht/tag43/04_vitest-starter/src/pages/product.tsx
new file mode 100644
index 0000000..8a64599
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vitest-starter/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
+
+
+
+
+ + Men Products +
+ +
+
+
+
+
+ {products &&
+
+
+
+
+
+
+ );
+};
+
+export default ProductPage;
+
+function BackButton() {
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
+
+
+
+ {product.title}
+ +
+
+ Product information
+ ++ {Number(product.price).toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + })} +
+ + {/* Rating */} +
+
+
+ {/* Availability */}
+ Rating
+ +
+
+
+ {[0, 1, 2, 3, 4].map((rating) => (
+ rating ? '#1e293b' : '#e5e7eb',
+ }}
+ aria-hidden="true"
+ />
+ ))}
+
+ + {product.rating} out of 5 stars +
+
+
+
+ {/* Description */}
+ {product.stock} in stock
+
+
+
+ {/* Tags */}
+ Description
+ ++ {product.description} +
+
+
+ Tags
+
+ {product.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+ );
+}
+
+function Reviews({ reviews }: { reviews: Review[] }) {
+ return (
+
+
+ );
+}
+
+function ChevronRightIcon(props: React.SVGPropsReviews
+ +
+ {reviews.map((review, index) => (
+
+
+
+ ))}
+
+ {[0, 1, 2, 3, 4].map((rating) => (
+ rating ? '#1e293b' : '#e5e7eb',
+ }}
+ aria-hidden="true"
+ />
+ ))}
+
+
+
+
+
+ {review.reviewerName}
+ ++ {new Date(review.date).toLocaleDateString()} +
+{review.comment}
+
+
+
+
+
+
+ );
+}
diff --git a/07_js-debug/unterricht/tag43/04_vitest-starter/src/vite-env.d.ts b/07_js-debug/unterricht/tag43/04_vitest-starter/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/07_js-debug/unterricht/tag43/04_vitest-starter/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+
+
+
+
+ + Women Products +
+ +
+
+
+
+
+ {products &&
+