Recipe Collection
{recipes.length} recipes from Tom Walsh's Stealth Health Slow Cooker & Meal Prep cookbooks
setSearch(e.target.value)}
/>
{/* Multi-tier sort chips */}
Sort:
{SORT_FIELDS.map((sf) => {
const tier = sortTiers.find((t) => t.field === sf.key);
const idx = sortTiers.findIndex((t) => t.field === sf.key);
return (
toggleSort(sf.key)}
>
{tier && (
{idx + 1}
)}
{sf.label}
{tier && (
{tier.dir === "desc" ? "▼" : "▲"}
)}
);
})}
{sortTiers.length > 1 && (
setSortTiers([{ field: "name", dir: "asc" }])}
>
✕ Reset
)}
{sortedRecipes.length === 0 ? (
🔍
No recipes match your filters.
{sortedRecipes.map((r) => (
)}
setDetailId(r.id)}
>
{r.book === "sc" ? "Slow Cooker" : "Meal Prep"}
{/* TIER 1 — Title */}
))}
{r.title}
{/* TIER 2 — Macros + Calories (prominent) */}
🔥 {r.calories} cal
P {r.protein}g
C {r.carbs}g
F {r.fat}g
Fb {r.fiber}g
{/* TIER 3 — Servings, time, tags */}
🍽 {r.servings} servings
📑 {r.section}
🔥 {(r.calories * r.servings).toLocaleString()} total
{r.servings < 10 && (
⚠ scale
)}
{r.tags.slice(0, 4).map((t) => (
{t}
))}
{ratings[r.id] > 0 && (
{"★".repeat(ratings[r.id])}
{"☆".repeat(5 - ratings[r.id])}
)}
{r.title}
🍽 {r.servings} servings
📑{" "}
{r.section === "meals"
? "Full Meal"
: r.section === "500cal"
? "500 Cal Meal"
: r.section === "burritos"
? "Burrito/Handheld"
: r.section === "proteins"
? "Protein Only"
: r.section === "counter"
? "Counter Recipe"
: r.section}
🔥 {r.calories} cal/serving
📕 {r.book === "sc" ? "Slow Cooker" : "Meal Prep"} p.{r.page}
{needsScale && (
⚠ Makes only {r.servings} servings — minimum 10 required
Nutrition per Serving
Rate this recipe
{r.tags.map((t) => (
{t}
))}
Ingredients
openSourceViewer(r.id)}
>
📄
View Full Recipe & Ingredients
Open the source page from{" "}
{r.book === "sc" ? "Slow Cooker" : "Meal Prep"} Cookbook — page{" "}
{r.page}
Add to Meal Plan
{(() => {
let empty = 0;
planDays.forEach((d) => {
const ds = getDateStr(d);
const dayMeals = mealPlan[ds] || [];
if (!dayMeals.find((m) => m.meal === "A")) empty++;
if (!dayMeals.find((m) => m.meal === "B")) empty++;
});
return `${empty} empty slot${empty !== 1 ? "s" : ""} remaining`;
})()}
Meal Plan
2 meals per day · Plan your week · Track your next purchase day
PURCHASE DAY
setPurchaseDay(e.target.value)}
/>
PLAN DURATION
MEALS PLANNED
= totalMealsNeeded
? "var(--green)"
: "var(--orange)",
}}
>
{mealsPlanned} / {totalMealsNeeded}
= totalMealsNeeded
? "var(--green)"
: "var(--accent)",
width: `${Math.min(100, (mealsPlanned / totalMealsNeeded) * 100)}%`,
transition: "width 0.3s",
}}
/>
NEXT PURCHASE DAY
{nextPurchaseDate.toLocaleDateString("en-US", {
weekday: "long",
month: "short",
day: "numeric",
})}
{daysOfFood(mealsPlanned)} days of food planned
Plan Nutrition Summary
Avg/day: {weeklyNutrition.avgCal} cal · {weeklyNutrition.avgP}g
protein
{weeklyNutrition.cal.toLocaleString()}
Total Calories
{weeklyNutrition.p}g
Total Protein
{weeklyNutrition.c}g
Total Carbs
{weeklyNutrition.f}g
Total Fat
Quick Add to Plan
{planDays.map((d) => {
const ds = getDateStr(d);
const dayMeals = mealPlan[ds] || [];
const mealA = dayMeals.find((m) => m.meal === "A");
const mealB = dayMeals.find((m) => m.meal === "B");
const isToday = getDateStr(new Date()) === ds;
return (
);
})}
{dayName(d)} {d.getDate()}
{mealA ? (
)}
{mealB ? (
)}
{(mealA || mealB) &&
(() => {
const rA = mealA ? getRecipe(mealA.recipeId) : null;
const rB = mealB ? getRecipe(mealB.recipeId) : null;
const dayCal = (rA?.calories || 0) + (rB?.calories || 0);
const dayP = (rA?.protein || 0) + (rB?.protein || 0);
const dayC = (rA?.carbs || 0) + (rB?.carbs || 0);
const dayF = (rA?.fat || 0) + (rB?.fat || 0);
return (
openSourceViewer(mealA.recipeId)}
>
) : (
Meal 1
{getRecipe(mealA.recipeId)?.title || "?"}
{
e.stopPropagation();
removeFromPlan(ds, "A");
}}
>
✕
Meal 1 — empty
openSourceViewer(mealB.recipeId)}
>
) : (
Meal 2
{getRecipe(mealB.recipeId)?.title || "?"}
{
e.stopPropagation();
removeFromPlan(ds, "B");
}}
>
✕
Meal 2 — empty
{dayCal}cal
P{dayP}
C{dayC}
F{dayF}
);
})()}
Shopping List
Purchase Day:{" "} {new Date(purchaseDay + "T12:00:00").toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", })} {" · "}Next:{" "} {nextPurchaseDate.toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric", })}
{shoppingList.length === 0 ? (🛒
Add recipes to your meal plan to
generate a shopping list.
RECIPES TO COOK
{shoppingList.length}
TOTAL SERVINGS
{totalServings}
TOTAL NUTRITION
{totalCal.toLocaleString()} cal
{totalProtein.toLocaleString()}g protein
SHOPPING PROGRESS
{checkedCount} / {shoppingList.length}
{totalIngredientItems > 0 && (
Ingredients: {checkedIngredientCount} / {totalIngredientItems}
)}
0 ? (checkedCount / shoppingList.length) * 100 : 0}%`,
transition: "width 0.3s",
}}
/>
{totalIngredientItems > 0 && (
0 ? (checkedIngredientCount / totalIngredientItems) * 100 : 0}%`,
transition: "width 0.3s",
}}
/>
)}
{checkedCount === shoppingList.length &&
shoppingList.length > 0 && (
✓ All recipes shopped!
)}
Estimated Cost by Store (recipes with ingredient data)
{STORE_LOCATIONS.map((store) => (
setSelectedStore(store.id)}
>
))}
{store.name}
${storeTotals[store.id].toFixed(2)}
Show prices for:
▶ Use the arrow to expand ingredient breakdown and check off items
(Buy or Addressed)
| ✓ | Recipe | Book | Batches | Servings | Cal/Srv | Macros/Srv | Est. Cost | Source |
|---|---|---|---|---|---|---|---|---|
| toggleRecipeCheck(item, ingredients) } /> | {hasIng && ( )} {item.name} {hasIng && ( ({ingredients.length} items) )} | {item.book === "sc" ? "Slow Cooker" : "Meal Prep"} | {item.batchesNeeded}× ({item.servingsPerBatch}/batch) | {item.totalServings} | {item.calories} | P{item.protein} {" "} C {recipes.find((r) => r.id === item.recipeId) ?.carbs || 0} {" "} F {recipes.find((r) => r.id === item.recipeId)?.fat || 0} | s.id === selectedStore, )?.chain === "kroger" ? "var(--kroger)" : "var(--sams)" : "var(--text2)", }} > {recipeCost !== null ? `$${recipeCost.toFixed(2)}` : "—"} | |
|
|
{ing.name}
{ing.cat}
|
{fmtAmt(scaledQty)}{" "}
{ing.unit}
{item.batchesNeeded > 1 && (
{" "}
({fmtAmt(ing.qty)} × {item.batchesNeeded})
)}
{alts.length > 0 && (
{alts.map((a, k) => (
{k > 0 ? " · " : ""}
{fmtAmt(a.qty)} {a.unit}
))}
)}
|
{STORE_LOCATIONS.map((s, si) => {
const c = ingredientCost(
{ ...ing, qty: scaledQty },
s.id,
);
return c !== null ? (
{s.area}: ${c.toFixed(2)}
) : null;
})}
|
s.id === selectedStore, )?.chain === "kroger" ? "var(--kroger)" : "var(--sams)", }} > {cost !== null ? `$${cost.toFixed(2)}` : "—"} |
Pantry Manager
Track what you have at home — items here are deducted from your shopping list.
Add Pantry Item
setNewName(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && handleAdd()}
/>
setNewAmt(e.target.value)}
/>
🏠
Your pantry is empty. Add items you
have at home.
{pantry.map((item, i) => (
))}
)}
{item.name}
{item.amt} {item.unit}
💡 Common pantry staples to consider: salt, black pepper, olive oil,
garlic powder, onion powder, cumin, chili powder, oregano, soy sauce,
flour, sugar, butter, eggs, cooking spray.
Ratings & Recommendations
Rate your meals to get personalized recommendations weighted by your taste profile.
{ratedRecipes.length > 0 && (Your Rated Recipes ({ratedRecipes.length})
{ratedRecipes.map((r) => (
setRating(r.id, v)}
/>
))}
{r.title}
🔥 {r.calories} cal
P {r.protein}g
C {r.carbs}g
F {r.fat}g
{r.tags.slice(0, 3).map((t) => (
{t}
))}
Recommendations
{ratedRecipes.length === 0 ? "Rate some recipes above to get personalized recommendations!" : "Based on your ratings, here are recipes you might enjoy:"}
{recommendations.slice(0, 12).map((r) => (
setRating(r.id, v)}
/>
))}
{unratedRecipes.length > 0 && (
<>
{r.title}
{r.score}% match
🔥 {r.calories} cal
P {r.protein}g
C {r.carbs}g
F {r.fat}g
{r.tags.slice(0, 3).map((t) => (
{t}
))}
Unrated Recipes ({unratedRecipes.length})
{unratedRecipes.slice(0, 8).map((r) => (
setRating(r.id, v)} />
))}
)}
{r.title}
{
if (e.target === e.currentTarget) onClose();
}}
>
{!recipe ? (
) : imgError ? (
) : (
setImgError(true)}
/>
)}
);
}
// ═════════════════════════════════════════════════════════════════════════
// SCALE MODAL — Shown for recipes with servings < 10
// ═════════════════════════════════════════════════════════════════════════
// User sets target servings (min 10); displays the scale factor and total
// batch nutrition (calories × target, protein × target, etc). Per-serving
// macros remain unchanged — scaling only affects the batch totals.
// ═════════════════════════════════════════════════════════════════════════
function ScaleModal({ recipe, onClose }) {
const [target, setTarget] = useState(10);
if (!recipe) return null;
const scale = target / recipe.servings;
return (
📄 Source Recipe Viewer
{recipe && (
<>
{Math.round(zoom * 100)}%
)}
📄
Select a recipe above to view the original source page
Images load from ./recipe_pages/ folder
⚠️
{recipe.title}
Source image not found at:
{imgPath}
Make sure the recipe_pages/ folder is in the same directory as
this HTML file. Images should be named: recipe_sc_12.jpg or
recipe_mp_8.jpg
{
if (e.target === e.currentTarget) onClose();
}}
>
);
}
// ═════════════════════════════════════════════════════════════════════════
// MACRO COMPONENTS — Reusable nutrition display primitives
// ═════════════════════════════════════════════════════════════════════════
// MacroStrip: compact horizontal chips (P/C/F/Fb + optional total calories)
// MacroDetail: 5-card grid with big numbers + percentage-of-calories breakdown
// Color convention (consistent across app):
// yellow = calories, green = protein, orange = carbs, red = fat, cyan = fiber
// ═════════════════════════════════════════════════════════════════════════
function MacroStrip({ r, showTotal = false }) {
return (
Scale: {recipe.title}
Original: {recipe.servings} servings · Scale factor:{" "}
{scale.toFixed(2)}x
Target servings:
setTarget(Math.max(10, +e.target.value || 10))}
/>
📄
View source recipe page for full ingredient list
{recipe.book === "sc" ? "Slow Cooker" : "Meal Prep"} Cookbook —
page {recipe.page}
Multiply all ingredient amounts by{" "}
{scale.toFixed(2)}×
{" "}
to get {target} servings
Makes {target} servings ({Math.ceil(target / 2)} days at 2 meals/day)
Nutrition per Serving (unchanged by scaling)
P {recipe.protein}g
C {recipe.carbs}g
F {recipe.fat}g
Fb {recipe.fiber}g
🔥 {recipe.calories} cal/srv
Total batch: {(recipe.calories * target).toLocaleString()} cal ·{" "}
{recipe.protein * target}g protein · {recipe.carbs * target}g carbs
· {recipe.fat * target}g fat
P {r.protein}g
C {r.carbs}g
F {r.fat}g
Fb {r.fiber}g
{showTotal && (
🔥 {r.calories * r.servings} total cal
)}
);
}
function MacroDetail({ r }) {
const totalCal = r.calories * r.servings;
const pPct = Math.round(((r.protein * 4) / r.calories) * 100);
const cPct = Math.round(((r.carbs * 4) / r.calories) * 100);
const fPct = Math.round(((r.fat * 9) / r.calories) * 100);
return (
{r.calories}
cal/serving
{totalCal.toLocaleString()} total
{r.protein}g
Protein
{pPct}% of cal
{r.carbs}g
Carbs
{cPct}% of cal
{r.fat}g
Fat
{fPct}% of cal
{r.fiber}g
Fiber
per serving
{[1, 2, 3, 4, 5].map((n) => (
onChange(n === value ? 0 : n)}
>
{n <= value ? "★" : "☆"}
))}
);
}
ReactDOM.createRoot(document.getElementById("root")).render(
React.createElement(App),
);