From 689cdf2480823c8adc03b82ff984040586cf09e0 Mon Sep 17 00:00:00 2001
From: Kristofer Koishigawa
<2051070+scissorsneedfoodtoo@users.noreply.github.com>
Date: Sat, 31 May 2025 01:30:19 +0900
Subject: [PATCH] feat: add usememo usecallback shopping list app workshop
(#60101)
Co-authored-by: Kolade Chris <65571316+Ksound22@users.noreply.github.com>
Co-authored-by: yoko <25644062+sidemt@users.noreply.github.com>
---
client/i18n/locales/english/intro.json | 7 +-
.../workshop-search-app/index.md | 9 +
.../workshop-shopping-list-app/meta.json | 133 +++++
.../67f63e58ce657ae05908d6c8.md | 166 ++++++
.../67f647f3ce657ae05908d6c9.md | 187 +++++++
.../67fcd561ae787aba05a9d917.md | 226 ++++++++
.../67fcd83e40fa32ca2c6af073.md | 193 +++++++
.../67fcdbea6714f8df73b83c86.md | 201 +++++++
.../67fcde1677d474ebe61b4f2e.md | 206 ++++++++
.../67fcdef983296ff197e9a1cf.md | 206 ++++++++
.../67fe3fe8910ff7e2106ff340.md | 228 ++++++++
.../67fe42e8e6bbaaf3f128004c.md | 203 ++++++++
.../67fe45cc404a5604ea3a1eb9.md | 206 ++++++++
.../67fe49ea92b9fc1c09b6e314.md | 224 ++++++++
.../67fe4adca39a9b224b72d642.md | 214 ++++++++
.../67fe4fa5e660453e884d6710.md | 219 ++++++++
.../67fe512b066c4a479f82d6bd.md | 240 +++++++++
.../67fe53c21e2f8956dcaef1c5.md | 231 ++++++++
.../67fe5810b61de16e891dd02f.md | 216 ++++++++
.../67fe5f1eaea66710b08c03f1.md | 247 +++++++++
.../67fe626cc464f1238514cd8b.md | 259 +++++++++
.../67fe66d2490f143c510038bf.md | 235 +++++++++
.../67fe694ebcafe94ab7451a8f.md | 230 ++++++++
.../67ff7500255008598207a70c.md | 225 ++++++++
.../67ff7e6d04d17507e8923f46.md | 227 ++++++++
.../67ff7f5515db250dc015f128.md | 242 +++++++++
.../67ff8059bac7f0146857c2b1.md | 234 +++++++++
.../67ff838da1cb2927ae18a3f5.md | 268 ++++++++++
.../67ff89b745907449e0e5bae4.md | 226 ++++++++
.../67ff8defd6747d621c4b838c.md | 242 +++++++++
.../67ff8eacd3d965670c9121f9.md | 493 ++++++++++++++++++
.../6808baa8f8dcaf4f50a7acaa.md | 229 ++++++++
.../6808bcac6bd35f568a19f21a.md | 211 ++++++++
.../superblock-structure/full-stack.json | 3 +
34 files changed, 7085 insertions(+), 1 deletion(-)
create mode 100644 client/src/pages/learn/full-stack-developer/workshop-search-app/index.md
create mode 100644 curriculum/challenges/_meta/workshop-shopping-list-app/meta.json
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67f63e58ce657ae05908d6c8.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67f647f3ce657ae05908d6c9.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fcd561ae787aba05a9d917.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fcd83e40fa32ca2c6af073.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fcdbea6714f8df73b83c86.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fcde1677d474ebe61b4f2e.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fcdef983296ff197e9a1cf.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fe3fe8910ff7e2106ff340.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fe42e8e6bbaaf3f128004c.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fe45cc404a5604ea3a1eb9.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fe49ea92b9fc1c09b6e314.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fe4adca39a9b224b72d642.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fe4fa5e660453e884d6710.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fe512b066c4a479f82d6bd.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fe53c21e2f8956dcaef1c5.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fe5810b61de16e891dd02f.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fe5f1eaea66710b08c03f1.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fe626cc464f1238514cd8b.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fe66d2490f143c510038bf.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fe694ebcafe94ab7451a8f.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67ff7500255008598207a70c.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67ff7e6d04d17507e8923f46.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67ff7f5515db250dc015f128.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67ff8059bac7f0146857c2b1.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67ff838da1cb2927ae18a3f5.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67ff89b745907449e0e5bae4.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67ff8defd6747d621c4b838c.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67ff8eacd3d965670c9121f9.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/6808baa8f8dcaf4f50a7acaa.md
create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/6808bcac6bd35f568a19f21a.md
diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 1be019935e7..cfb61106491 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -3616,7 +3616,12 @@
"In these lecture videos, you will learn about data fetching and memoization in React."
]
},
- "ffpt": { "title": "279", "intro": [] },
+ "workshop-shopping-list-app": {
+ "title": "Build a Shopping List App",
+ "intro": [
+ "In this workshop, you'll use the useMemo() and useCallback() hooks in React to build a simple shopping list app. You'll learn more about state and the lifecycle of React components, and how to use memoization to reduce re-renders and make your apps more efficient."
+ ]
+ },
"lab-currency-converter": {
"title": "Build a Currency Converter",
"intro": [
diff --git a/client/src/pages/learn/full-stack-developer/workshop-search-app/index.md b/client/src/pages/learn/full-stack-developer/workshop-search-app/index.md
new file mode 100644
index 00000000000..ea92214199c
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/workshop-search-app/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Build a Shopping List App Workshop
+block: workshop-shopping-list-app
+superBlock: full-stack-developer
+---
+
+## Introduction to the Build a Shopping List App Workshop
+
+In this workshop, you'll use the `useMemo()` and `useCallback()` hooks in React to build a simple shopping list app. You'll learn more about state and the lifecycle of React components, and how to use memoization to reduce re-renders and make your apps more efficient.
diff --git a/curriculum/challenges/_meta/workshop-shopping-list-app/meta.json b/curriculum/challenges/_meta/workshop-shopping-list-app/meta.json
new file mode 100644
index 00000000000..13a97b7040e
--- /dev/null
+++ b/curriculum/challenges/_meta/workshop-shopping-list-app/meta.json
@@ -0,0 +1,133 @@
+{
+ "name": "Build a Shopping List App",
+ "blockType": "workshop",
+ "blockLayout": "challenge-grid",
+ "isUpcomingChange": false,
+ "usesMultifileEditor": true,
+ "hasEditableBoundaries": true,
+ "dashedName": "workshop-shopping-list-app",
+ "superBlock": "full-stack-developer",
+ "challengeOrder": [
+ {
+ "id": "67f63e58ce657ae05908d6c8",
+ "title": "Step 1"
+ },
+ {
+ "id": "67f647f3ce657ae05908d6c9",
+ "title": "Step 2"
+ },
+ {
+ "id": "67fcd561ae787aba05a9d917",
+ "title": "Step 3"
+ },
+ {
+ "id": "67fcd83e40fa32ca2c6af073",
+ "title": "Step 4"
+ },
+ {
+ "id": "67fcdbea6714f8df73b83c86",
+ "title": "Step 5"
+ },
+ {
+ "id": "67fcde1677d474ebe61b4f2e",
+ "title": "Step 6"
+ },
+ {
+ "id": "67fcdef983296ff197e9a1cf",
+ "title": "Step 7"
+ },
+ {
+ "id": "67fe3fe8910ff7e2106ff340",
+ "title": "Step 8"
+ },
+ {
+ "id": "67fe42e8e6bbaaf3f128004c",
+ "title": "Step 9"
+ },
+ {
+ "id": "67fe45cc404a5604ea3a1eb9",
+ "title": "Step 10"
+ },
+ {
+ "id": "67fe49ea92b9fc1c09b6e314",
+ "title": "Step 11"
+ },
+ {
+ "id": "67fe4adca39a9b224b72d642",
+ "title": "Step 12"
+ },
+ {
+ "id": "67fe4fa5e660453e884d6710",
+ "title": "Step 13"
+ },
+ {
+ "id": "67fe512b066c4a479f82d6bd",
+ "title": "Step 14"
+ },
+ {
+ "id": "67fe53c21e2f8956dcaef1c5",
+ "title": "Step 15"
+ },
+ {
+ "id": "67fe5810b61de16e891dd02f",
+ "title": "Step 16"
+ },
+ {
+ "id": "6808baa8f8dcaf4f50a7acaa",
+ "title": "Step 17"
+ },
+ {
+ "id": "6808bcac6bd35f568a19f21a",
+ "title": "Step 18"
+ },
+ {
+ "id": "67fe5f1eaea66710b08c03f1",
+ "title": "Step 19"
+ },
+ {
+ "id": "67fe626cc464f1238514cd8b",
+ "title": "Step 20"
+ },
+ {
+ "id": "67fe66d2490f143c510038bf",
+ "title": "Step 21"
+ },
+ {
+ "id": "67fe694ebcafe94ab7451a8f",
+ "title": "Step 22"
+ },
+ {
+ "id": "67ff7500255008598207a70c",
+ "title": "Step 23"
+ },
+ {
+ "id": "67ff838da1cb2927ae18a3f5",
+ "title": "Step 24"
+ },
+ {
+ "id": "67ff89b745907449e0e5bae4",
+ "title": "Step 25"
+ },
+ {
+ "id": "67ff7e6d04d17507e8923f46",
+ "title": "Step 26"
+ },
+ {
+ "id": "67ff8defd6747d621c4b838c",
+ "title": "Step 27"
+ },
+ {
+ "id": "67ff7f5515db250dc015f128",
+ "title": "Step 28"
+ },
+ {
+ "id": "67ff8059bac7f0146857c2b1",
+ "title": "Step 29"
+ },
+ {
+ "id": "67ff8eacd3d965670c9121f9",
+ "title": "Step 30"
+ }
+ ],
+ "helpCategory": "JavaScript"
+}
\ No newline at end of file
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67f63e58ce657ae05908d6c8.md b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67f63e58ce657ae05908d6c8.md
new file mode 100644
index 00000000000..2f9a186c3ee
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67f63e58ce657ae05908d6c8.md
@@ -0,0 +1,166 @@
+---
+id: 67f63e58ce657ae05908d6c8
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+In this workshop, you'll build a simple shopping list app to practice using the `useMemo()` and `useCallback()` hooks in React. You'll learn how to use these hooks to optimize the performance of your app by memoizing potentially expensive calculations and functions.
+
+All the basic HTML and CSS you'll need has been provided for you, along with the basic structure of a React component named `ShoppingList`.
+
+Within the `ShoppingList` component, return an empty pair of parentheses for now.
+
+# --hints--
+
+You should use the `export` keyword to export the `ShoppingList` component.
+
+```js
+assert.match(code, /export\s+(const|let|var|function)\s+ShoppingList\s*(=\s*)?\(\)\s*(=>\s*)?\{\s*/);
+```
+
+You should return an empty pair of round parentheses inside the `ShoppingList` function.
+
+```js
+assert.match(code, /export\s+(const|let|var|function)\s+ShoppingList\s*(=\s*)?\(\)\s*(=>\s*)?\{\s*return\s*\(\s*\)\s*;?\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+
+
Shopping List
+
+
+ );
+};
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fcd83e40fa32ca2c6af073.md b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fcd83e40fa32ca2c6af073.md
new file mode 100644
index 00000000000..13351bf0691
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list-app/67fcd83e40fa32ca2c6af073.md
@@ -0,0 +1,193 @@
+---
+id: 67fcd83e40fa32ca2c6af073
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Now that you have the basic structure of the app, it's time to add some items and get the search functionality working.
+
+Create an array and assign it to a variable named `items`. Within the array, add the strings `Apples`, `Bananas`, `Strawberries`, `Blueberries`, `Mangoes`, `Pineapple`, `Lettuce`, `Broccoli`, `Paper Towels`, and `Dish Soap`. This will be the list of items that will be displayed in the app.
+
+# --hints--
+
+`items` is an array.
+
+```js
+assert.match(code, /(const|let|var)\s+items\s*=\s*\[/i);
+```
+
+Your `items` array should contain the strings `Apples`, `Bananas`, `Strawberries`, `Blueberries`, `Mangoes`, `Pineapple`, `Lettuce`, `Broccoli`, `Paper Towels`, and `Dish Soap`.
+
+```js
+const expected = [
+ "Apples", "Bananas", "Strawberries", "Blueberries", "Mangoes",
+ "Pineapple", "Lettuce", "Broccoli", "Paper Towels", "Dish Soap"
+];
+const itemArrContentsString = code.match(/(?:const|let|var)\s+items\s*=\s*\[\s*([\s\S]*?)\s*\]/)?.[1] ?? null;
+const itemArr = itemArrContentsString ? itemArrContentsString.split(",").map(item => item.replace(/['"]/g, "")) : [];
+const normalizeArray = (arr) => arr.map((str) => str.toLowerCase().replace(/\W/g, "")).filter(Boolean);
+const normalizedItemArr = normalizeArray(itemArr);
+const normalizedExpected = normalizeArray(expected);
+
+assert.isTrue(
+ normalizedItemArr.length === normalizedExpected.length &&
+ normalizedItemArr.every((item) => normalizedExpected.includes(item))
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ ]*value={\s*query\s*}[^>]*\/?>/);
+```
+
+Your `onChange` event handler should be a function that takes `e` as an argument.
+
+```js
+const input = document.querySelector('input');
+const key = Object.keys(input).find(key => key.startsWith("__reactProps"));
+const reactInput = input[key];
+assert.match(reactInput.onChange.toString(), /onChange\s*\(\s*e\s*\)/);
+```
+
+Your `onChange` event handler should call `setQuery()` with `e.target.value`.
+
+```js
+const input = document.querySelector('input');
+const key = Object.keys(input).find(key => key.startsWith("__reactProps"));
+const reactInput = input[key];
+assert.match(reactInput.onChange.toString(), /setQuery\s*\(\s*e\.target\.value\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+
+ {names.map((name) => {
+ return (
+ {name}
+ );
+ })}
+
+ );
+};
+```
+
+# --hints--
+
+You should wrap the code within the `filteredItems.map()` call in curly braces.
+
+```js
+const script = [...document.querySelectorAll("script")].find((s) => s.dataset.src === "index.jsx").innerText;
+const exports = {};
+const a = eval(script);
+const shoppingListString = exports.ShoppingList.toString();
+
+assert.match(code, /{\s*filteredItems\.map\(\s*(function)?\s*\(?\s*item\s*\)?\s*\)\s*(=>)?\s*{(.|\n)*}\s*\);?\s*}/);
+```
+
+You should return the `li` element explicitly.
+
+```js
+const script = [...document.querySelectorAll("script")].find((s) => s.dataset.src === "index.jsx").innerText;
+const exports = {};
+const a = eval(script);
+const shoppingListString = exports.ShoppingList.toString();
+
+assert.match(code, /{\s*filteredItems\.map\(\s*(function)?\s*\(?\s*item\s*\)?\s*\)\s*(=>)?\s*{\s*return\s*\(\s*(.|\n)*}\s*\);?\s*}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Shopping List
+
+
+
+
+ This text is conditionally styled.
+ );
+};
+```
+
+# --hints--
+
+You should create a variable called `isChecked` which uses the `includes()` method on the `selectedItems` array to check if the current `item` is in the array.
+
+```js
+const script = [...document.querySelectorAll("script")].find((s) => s.dataset.src === "index.jsx").innerText;
+const exports = {};
+const a = eval(script);
+const shoppingListString = exports.ShoppingList.toString();
+
+assert.match(shoppingListString, /var\s*isChecked\s*=\s*selectedItems\.includes\s*\(\s*item\s*\)/);
+```
+
+You should add a `style` prop to the `li` element.
+
+```js
+async () => {
+ const testElem = await __helpers.prepTestComponent(window.index.ShoppingList);
+ const li = testElem.querySelector('li');
+ const key = li && Object.keys(li)?.find(key => key.startsWith("__reactProps"));
+ const reactLi = li && li[key];
+
+ assert.exists(reactLi.style);
+}
+```
+
+Your `style` prop should include a ternary operator that sets the `textDecoration` property to `line-through` if `isChecked` is true, or `none` if it is false.
+
+```js
+const script = [...document.querySelectorAll("script")].find((s) => s.dataset.src === "index.jsx").innerText;
+const exports = {};
+const a = eval(script);
+const shoppingListString = exports.ShoppingList.toString();
+
+assert.match(shoppingListString, /"li"\s*,\s*{(.|\n)*style:\s*{\s*textDecoration\s*:\s*isChecked\s*\?\s*("|')line-through("|')\s*:\s*("|')none("|')/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+ Shopping List
+
+
+
+
+