feat: project setup for week 2

Week-1/Task-1/r3f/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "r3f",
+  "name": "week1-task1-r3f",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -16,6 +16,7 @@
     "react-dom": "^19.2.4",
     "three": "^0.183.2"
   },
+  "packageManager": "yarn@1.22.22",
   "devDependencies": {
     "@eslint/js": "^9.39.4",
     "@types/react": "^19.2.14",

Week-1/Task-1/vanilla/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vanilla",
+  "name": "week1-task1-vanilla",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -8,6 +8,7 @@
     "build": "vite build",
     "preview": "vite preview"
   },
+  "packageManager": "yarn@1.22.22",
   "devDependencies": {
     "vite": "^8.0.1"
   },

Week-1/Task-2/r3f/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "task-2-r3f",
+  "name": "week1-task2-r3f",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -14,6 +14,7 @@
     "react-dom": "^18.3.1",
     "three": "^0.163.0"
   },
+  "packageManager": "yarn@1.22.22",
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.0.0"

Week-1/Task-2/vanilla/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "task-2-vanilla",
+  "name": "week1-task2-vanilla",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -8,6 +8,7 @@
     "build": "vite build",
     "preview": "vite preview"
   },
+  "packageManager": "yarn@1.22.22",
   "devDependencies": {
     "vite": "^5.0.0"
   },

Week-1/Task-3/r3f/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "task-3-r3f",
+  "name": "week1-task3-r3f",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -13,6 +13,7 @@
     "react-dom": "^18.3.1",
     "three": "^0.163.0"
   },
+  "packageManager": "yarn@1.22.22",
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.0.0"

Week-1/Task-3/vanilla/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "task-3-vanilla",
+  "name": "week1-task3-vanilla",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "vite build"
   },
+  "packageManager": "yarn@1.22.22",
   "devDependencies": {
     "vite": "^5.0.0"
   },

Week-1/Task-4/r3f/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "task-4-r3f",
+  "name": "week1-task4-r3f",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -13,6 +13,7 @@
     "react-dom": "^18.3.1",
     "three": "^0.163.0"
   },
+  "packageManager": "yarn@1.22.22",
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.0.0"

Week-1/Task-4/vanilla/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "task-4-vanilla",
+  "name": "week1-task4-vanilla",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "vite build"
   },
+  "packageManager": "yarn@1.22.22",
   "devDependencies": {
     "vite": "^5.0.0"
   },

Week-2/Task-1/r3f/.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?

Week-2/Task-1/r3f/README.md

@@ -0,0 +1,10 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) 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

Week-2/Task-1/r3f/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

Week-2/Task-1/r3f/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>r3f</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

Week-2/Task-1/r3f/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "week2-task1-r3f",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@react-three/drei": "9.105.6",
+    "@react-three/fiber": "^9.5.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "three": "^0.183.2"
+  },
+  "packageManager": "yarn@1.22.22",
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "vite": "^8.0.1"
+  }
+}

Week-2/Task-1/r3f/src/App.jsx

@@ -0,0 +1,5 @@
+export default function App() {
+    return (
+        <></>
+    )
+}

Week-2/Task-1/r3f/src/index.css

@@ -0,0 +1,12 @@
+* {
+  box-sizing: border-box;
+}
+
+body, html, #root {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #111;
+}

Week-2/Task-1/r3f/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>,
+)

Week-2/Task-1/r3f/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()],
+})

Week-2/Task-1/report.md

@@ -0,0 +1,67 @@
+# Task: Material Variant Switcher
+
+## Objective
+Create one 3D object with 2–3 material variants and allow switching between them.
+
+
+## Vanilla three.js
+-Possible: Yes / Partial / No
+-Notes:
+-Key concepts:
+-Complexity: Easy / Medium / Hard
+
+## R3F
+-Possible: Yes / Partial / No
+-Notes:
+-What R3F abstracted:
+-Complexity: Easy / Medium / Hard
+
+## Thob Page Builder
+-Possible: Yes / Partial / No
+-Notes:
+-Builder steps:
+-Complexity: Easy / Medium / Hard
+
+## Comparison Summary
+-Possible in all 3? Yes / Partial / No
+-Main differences:
+-Where Thob is better:
+-Where Thob is weaker:
+-What feels awkward or unclear:
+
+## Limitation Type (if any)
+-[ ] Editor UX limitation
+-[ ] Runtime limitation
+-[ ] Schema / data model limitation
+-[ ] Component limitation
+-[ ] Event system limitation
+-[ ] Asset pipeline limitation
+-[ ] Unknown / needs investigation
+
+## Workaround
+-Is there a workaround?
+-If yes, what is it?
+
+## Suggested Improvement
+-What should improve in Thob?
+-Is it:
+  -editor
+  -runtime
+  -component
+  -UX
+  -schema/data
+
+## Difficulty Estimate
+-Easy / Medium / Hard
+
+## Business Value
+-Low / Medium / High
+
+## Product Lens
+- Is this pattern useful for real customers? Yes / Partial / No
+- What kind of customer use case does this support?
+- Does Thob feel strong enough for this use case?
+- What would improve the experience?
+
+## Recommendation
+Should Thob support this better? Why?

Week-2/Task-1/vanilla/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Task 1 — Material Variant Switcher</title>
+</head>
+<body>
+    <script type="module" src="main.js"></script>
+</body>
+</html>

Week-2/Task-1/vanilla/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "week2-task1-vanilla",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "packageManager": "yarn@1.22.22",
+  "devDependencies": {
+    "vite": "^8.0.1"
+  },
+  "dependencies": {
+    "three": "^0.183.2"
+  }
+}

Week-2/Task-2/r3f/.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?

Week-2/Task-2/r3f/README.md

@@ -0,0 +1,10 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) 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

Week-2/Task-2/r3f/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

Week-2/Task-2/r3f/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>r3f</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

Week-2/Task-2/r3f/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "week2-task2-r3f",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@react-three/drei": "9.105.6",
+    "@react-three/fiber": "^9.5.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "three": "^0.183.2"
+  },
+  "packageManager": "yarn@1.22.22",
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "vite": "^8.0.1"
+  }
+}

Week-2/Task-2/r3f/src/App.css

@@ -0,0 +1,10 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  overflow: hidden;
+  background-color: #111;
+  font-family: sans-serif;

Week-2/Task-2/r3f/src/App.jsx

@@ -0,0 +1,5 @@
+export default function App() {
+    return (
+        <></>
+    )
+}

Week-2/Task-2/r3f/src/index.css

@@ -0,0 +1,12 @@
+* {
+  box-sizing: border-box;
+}
+
+body, html, #root {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #111;
+}

Week-2/Task-2/r3f/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>,
+)

Week-2/Task-2/r3f/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()],
+})

Week-2/Task-2/report.md

@@ -0,0 +1,66 @@
+# Task: Texture / Surface Variant Switcher
+
+## Objective
+Create one object with 2–3 surface variations (e.g., leather, wood, fabric).
+
+## Vanilla three.js
+-Possible: Yes / Partial / No
+-Notes:
+-Key concepts:
+-Complexity: Easy / Medium / Hard
+
+## R3F
+-Possible: Yes / Partial / No
+-Notes:
+-What R3F abstracted:
+-Complexity: Easy / Medium / Hard
+
+## Thob Page Builder
+-Possible: Yes / Partial / No
+-Notes:
+-Builder steps:
+-Complexity: Easy / Medium / Hard
+
+## Comparison Summary
+-Possible in all 3? Yes / Partial / No
+-Main differences:
+-Where Thob is better:
+-Where Thob is weaker:
+-What feels awkward or unclear:
+
+## Limitation Type (if any)
+-[ ] Editor UX limitation
+-[ ] Runtime limitation
+-[ ] Schema / data model limitation
+-[ ] Component limitation
+-[ ] Event system limitation
+-[ ] Asset pipeline limitation
+-[ ] Unknown / needs investigation
+
+## Workaround
+-Is there a workaround?
+-If yes, what is it?
+
+## Suggested Improvement
+-What should improve in Thob?
+-Is it:
+  -editor
+  -runtime
+  -component
+  -UX
+  -schema/data
+
+## Difficulty Estimate
+-Easy / Medium / Hard
+
+## Business Value
+-Low / Medium / High
+
+## Product Lens
+- Is this pattern useful for real customers? Yes / Partial / No
+- What kind of customer use case does this support?
+- Does Thob feel strong enough for this use case?
+- What would improve the experience?
+
+## Recommendation
+Should Thob support this better? Why?.

Week-2/Task-2/vanilla/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Task 2 - Texture / Surface Variant Switcher</title>
+</head>
+<body>
+    <script type="module" src="main.js"></script>
+</body>
+</html>

Week-2/Task-2/vanilla/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "week2-task2-vanilla",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "packageManager": "yarn@1.22.22",
+  "devDependencies": {
+    "vite": "^8.0.1"
+  },
+  "dependencies": {
+    "three": "^0.183.2"
+  }
+}

Week-2/Task-3/r3f/.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?

Week-2/Task-3/r3f/README.md

@@ -0,0 +1,10 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) 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

Week-2/Task-3/r3f/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

Week-2/Task-3/r3f/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>r3f</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

Week-2/Task-3/r3f/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "week2-task3-r3f",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@react-three/drei": "9.105.6",
+    "@react-three/fiber": "^9.5.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "three": "^0.183.2"
+  },
+  "packageManager": "yarn@1.22.22",
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "vite": "^8.0.1"
+  }
+}

Week-2/Task-3/r3f/src/App.css

@@ -0,0 +1,10 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  overflow: hidden;
+  background-color: #111;
+  font-family: sans-serif;

Week-2/Task-3/r3f/src/App.jsx

@@ -0,0 +1,5 @@
+export default function App() {
+    return (
+        <></>
+    )
+}

Week-2/Task-3/r3f/src/index.css

@@ -0,0 +1,12 @@
+* {
+  box-sizing: border-box;
+}
+
+body, html, #root {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #111;
+}

Week-2/Task-3/r3f/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>,
+)

Week-2/Task-3/r3f/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()],
+})

Week-2/Task-3/report.md

@@ -0,0 +1,66 @@
+# Task: UI-Controlled Product Option (Configurator Pattern)
+
+## Objective
+Create a simple product option UI that changes the 3D model’s appearance (Black, Silver, Gold buttons).
+
+## Vanilla three.js
+-Possible: Yes / Partial / No
+-Notes:
+-Key concepts:
+-Complexity: Easy / Medium / Hard
+
+## R3F
+-Possible: Yes / Partial / No
+-Notes:
+-What R3F abstracted:
+-Complexity: Easy / Medium / Hard
+
+## Thob Page Builder
+-Possible: Yes / Partial / No
+-Notes:
+-Builder steps:
+-Complexity: Easy / Medium / Hard
+
+## Comparison Summary
+-Possible in all 3? Yes / Partial / No
+-Main differences:
+-Where Thob is better:
+-Where Thob is weaker:
+-What feels awkward or unclear:
+
+## Limitation Type (if any)
+-[ ] Editor UX limitation
+-[ ] Runtime limitation
+-[ ] Schema / data model limitation
+-[ ] Component limitation
+-[ ] Event system limitation
+-[ ] Asset pipeline limitation
+-[ ] Unknown / needs investigation
+
+## Workaround
+-Is there a workaround?
+-If yes, what is it?
+
+## Suggested Improvement
+-What should improve in Thob?
+-Is it:
+  -editor
+  -runtime
+  -component
+  -UX
+  -schema/data
+
+## Difficulty Estimate
+-Easy / Medium / Hard
+
+## Business Value
+-Low / Medium / High
+
+## Product Lens
+- Is this pattern useful for real customers? Yes / Partial / No
+- What kind of customer use case does this support?
+- Does Thob feel strong enough for this use case?
+- What would improve the experience?
+
+## Recommendation
+Should Thob support this better? Why?.

Week-2/Task-3/vanilla/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Task 3 - UI-Controlled Product Option (Configurator Pattern)</title>
+</head>
+<body>
+    <script type="module" src="main.js"></script>
+</body>
+</html>

Week-2/Task-3/vanilla/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "week2-task3-vanilla",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "packageManager": "yarn@1.22.22",
+  "devDependencies": {
+    "vite": "^8.0.1"
+  },
+  "dependencies": {
+    "three": "^0.183.2"
+  }
+}

Week-2/Task-4/r3f/.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?

Week-2/Task-4/r3f/README.md

@@ -0,0 +1,10 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) 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

Week-2/Task-4/r3f/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

Week-2/Task-4/r3f/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>r3f</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

Week-2/Task-4/r3f/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "week2-task4-r3f",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@react-three/drei": "9.105.6",
+    "@react-three/fiber": "^9.5.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "three": "^0.183.2"
+  },
+  "packageManager": "yarn@1.22.22",
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "vite": "^8.0.1"
+  }
+}

Week-2/Task-4/r3f/src/App.css

@@ -0,0 +1,10 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  overflow: hidden;
+  background-color: #111;
+  font-family: sans-serif;

Week-2/Task-4/r3f/src/App.jsx

@@ -0,0 +1,5 @@
+export default function App() {
+    return (
+        <></>
+    )
+}

Week-2/Task-4/r3f/src/index.css

@@ -0,0 +1,12 @@
+* {
+  box-sizing: border-box;
+}
+
+body, html, #root {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #111;
+}

Week-2/Task-4/r3f/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>,
+)

Week-2/Task-4/r3f/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()],
+})

Week-2/Task-4/report.md

@@ -0,0 +1,66 @@
+# Task: Click To Highlight / Select Visual State
+
+## Objective
+Clicking an object changes it to a “selected” visual state (brighter color, scale increase, opacity shift, etc.).
+
+## Vanilla three.js
+-Possible: Yes / Partial / No
+-Notes:
+-Key concepts:
+-Complexity: Easy / Medium / Hard
+
+## R3F
+-Possible: Yes / Partial / No
+-Notes:
+-What R3F abstracted:
+-Complexity: Easy / Medium / Hard
+
+## Thob Page Builder
+-Possible: Yes / Partial / No
+-Notes:
+-Builder steps:
+-Complexity: Easy / Medium / Hard
+
+## Comparison Summary
+-Possible in all 3? Yes / Partial / No
+-Main differences:
+-Where Thob is better:
+-Where Thob is weaker:
+-What feels awkward or unclear:
+
+## Limitation Type (if any)
+-[ ] Editor UX limitation
+-[ ] Runtime limitation
+-[ ] Schema / data model limitation
+-[ ] Component limitation
+-[ ] Event system limitation
+-[ ] Asset pipeline limitation
+-[ ] Unknown / needs investigation
+
+## Workaround
+-Is there a workaround?
+-If yes, what is it?
+
+## Suggested Improvement
+-What should improve in Thob?
+-Is it:
+  -editor
+  -runtime
+  -component
+  -UX
+  -schema/data
+
+## Difficulty Estimate
+-Easy / Medium / Hard
+
+## Business Value
+-Low / Medium / High
+
+## Product Lens
+- Is this pattern useful for real customers? Yes / Partial / No
+- What kind of customer use case does this support?
+- Does Thob feel strong enough for this use case?
+- What would improve the experience?
+
+## Recommendation
+Should Thob support this better? Why?.

Week-2/Task-4/vanilla/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Task 4 - Click To Highlight / Select Visual State</title>
+</head>
+<body>
+    <script type="module" src="main.js"></script>
+</body>
+</html>

Week-2/Task-4/vanilla/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "week2-task4-vanilla",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "packageManager": "yarn@1.22.22",
+  "devDependencies": {
+    "vite": "^8.0.1"
+  },
+  "dependencies": {
+    "three": "^0.183.2"
+  }
+}

Week-2/Week-2-PersonalSummary.md

@@ -0,0 +1,27 @@
+# Divya — Week 2 Summary
+
+## Tasks Completed
+- Task 1: 
+- Task 2:
+- Task 3:
+- Task 4:
+
+## Strongest Product Flow In Thob
+- 
+
+## Weakest / Most Awkward Product Flow In Thob
+- 
+
+## Top 2 High-Value Discoveries
+- 1.
+- 2.
+
+## Top 1 Quick Win Recommendation
+- 
+
+## Top 1 Deeper Architecture Concern
+- 
+
+## If A Customer Wanted A Simple 3D Configurator, Could Thob Support It Well?
+- Yes / Partial / No
+- Why:

package.json

@@ -18,6 +18,11 @@
   },
   "packageManager": "yarn@1.22.22",
   "workspaces": [
-    "Week-1/**"
-  ]
+    "Week-1/**",
+    "Week-2/**"
+  ],
+  "dependencies": {
+    "@react-three/fiber": "^9.5.0",
+    "three": "^0.183.2"
+  }
 }