Dessert Recipes Project – Technigo Bootcamp Project 2025 #59

KausarShangareeva · 2025-10-10T10:27:59Z

Hi there! 👋
I built Recipe Library as part of my Technigo JavaScript Bootcamp 2025 journey. This project lets users explore and save dessert recipes from different cuisines in a fun and interactive way.

Check out the live website here: Recipe Library

Key Features:

Filter desserts by cuisine (Italy / Asia / Middle East)
Random dessert generator for fun inspiration
Favorites saved locally using LocalStorage
Handles API limits and caches data for offline use
Fully responsive design for mobile, tablet, and desktop

This project helped me practice working with APIs, dynamic content, local storage, and creating interactive, responsive UI components. 🌟

irisdgz · 2025-10-13T15:14:01Z

index.html

I think your HTML structure is nice and clean! It’s easy to see where each part of the app goes. Super nice you used main and section for the recipes whitch that makes it very readable. Maybe you could add an alt attribute (like a short description) to your images so it helps people using screen readers know what the picture shows :)

irisdgz

Really nice work Kausyar! The code is well structured and realtivly easy for me to follow. I like how you’ve added clear sections for rendering, filters and favorites. Cool to see how you’re using async/await and localStorage together. The filtering and sorting part is especially nice and works smoothly. Overall, super solid project eventhou it has its own style and not the one in the Figma demo!

irisdgz · 2025-10-13T15:25:04Z

js/script.js

+const LS_COFFEE = "coffeeData";
+const LS_JUICE = "juiceData";
+const LS_FAVORITES = "favorites";
+


Good use of localStorage keys!

irisdgz · 2025-10-13T15:26:25Z

js/script.js

+  buttons.filter(Boolean).forEach((btn) => btn.classList.remove("active"));
+  if (activeBtn) activeBtn.classList.add("active");
+}
+


I recognize this pattern from I dont remeber where, youtube or our session! Removing and adding classes to show active buttons. Nice and clean implementation!

irisdgz · 2025-10-13T15:27:37Z

js/script.js

+  if (coffeeRendered) return;
+  coffeeRendered = true;
+  if (containerCoffee) containerCoffee.innerHTML = "";
+


Nice use of async/await to fetch the recipe data!

irisdgz · 2025-10-13T15:29:36Z

js/script.js

+
+  ensureNoMatchBanner(containerCoffee);
+}
+


Nice how you check localStorage first before fetching new data , here learned something myself as well :)

irisdgz · 2025-10-13T15:31:06Z

js/script.js

+  const isCoffee = category === "coffee";
+  const container = isCoffee ? containerCoffee : containerJuice;
+  if (!container) return;
+


well used async here again!

irisdgz · 2025-10-13T15:31:41Z

js/script.js

+  if (!cards || !cards.length) return null;
+  return cards[Math.floor(Math.random() * cards.length)];
+}
+


Good job here with random recpies.

irisdgz · 2025-10-13T15:34:20Z

js/script.js

+    item.parentElement
+      ?.querySelectorAll(".filter__item")
+      .forEach((li) => li.classList.remove("active"));
+    item.classList.add("active");


This looks great! I like how you combine event listeners with sorting and filtering.

irisdgz · 2025-10-13T15:36:08Z

js/script.js

+    console.warn("No data-id on card");
+    return;
+  }
+


Cool how you added a favorites feature! Great way to use localStorage and JSON to save user interactions

JennieDalgren

Good job with this project!

Take a look at the API calls and make sure yoou have data to be able to try your filters. I get empty states on almost all of them.

Really good implementation of favorite recipes and that is persists in local storage.

You project is not entirely responsive, see the screenshot:

Clean up your code a bit and work on the naming of your functions. If you change your "theme" of the recipes, change the names in your code too. Also, stick to english comments. And remember to use commit messages in a better way, the message should reflect the change that you have done in the code, do not just copy paste the same message every time, that really beats the purpose of commits.

What you need to fix:

Responsiveness
Make sure the filters you have chosen to work with is actually working
Clean up the code. Remove unused code, proper naming of variables and functions, english in comments if you need them.

Almost there! 💪

JennieDalgren · 2025-10-26T20:58:17Z

css/style.css

+:root {
+  --color-primary-first-light: #fafbff;
+  --color-primary-first: #0018a4;
+  --color-primary-second-light: #ffecea;
+  --color-primary-second: #ff6589;
+  --color-white: #ffffff;
+  --color-white-base: #ffffff;
+  --color-grey-light-1: #f8f9fa;
+  --color-grey-light-2: #e9ecef;
+  --color-grey-light-3: #dee2e6;
+  --color-grey-light-4: #ced4da;
+  --color-grey-dark: #868e96;
+  --color-grey-dark-base: #868e96;
+  --color-font: #212529;
+  --color-font-base: #212529;
+  --color-button: #8d9271;
+  --color-black: #000000;
+  --color-blue: #176d8c;
+  --border-radius-xxs: 0.5rem;
+  --border-radius-xs: 1rem;
+  --border-radius-sm: 1.5rem;
+  --border-radius-md: 2rem;
+  --border-radius-lg: 2.5rem;
+  --border-radius-xl: 3rem;
+  --box-shadow: 0 0.5rem 1rem #0019a453;


nice that you use variables

JennieDalgren · 2025-10-26T20:58:39Z

css/style.css

+  ------------------------------------ */
+/* 
+
+ПЕРЕКЛЮЧЕНИЯ МЕЖДУ КАРТОЧКАМИ


stick to english comments

Im done ✅✅✅

JennieDalgren · 2025-10-26T21:00:55Z

css/style.css

+  border: 1px solid #e9ecef;
+  background-color: #e9ecef;


use the variable that you have for this color?

Im done ✅✅✅

JennieDalgren · 2025-10-26T21:01:02Z

css/style.css

+}
+.header__input-mobile:focus {
+  outline: none;
+  border-color: #e9ecef;


Im done ✅✅✅

JennieDalgren · 2025-10-26T21:07:38Z

js/script.js

+const mainCoffee = document.querySelector(".main-coffee");
+const mainJuice = document.querySelector(".main-juice");
+const mainTea = document.querySelector(".main-tea");
+const mainFavorites = document.querySelector(".main-favorites");


I'm very confused about all these drink references? That is not reflected in your deployed website, which looks like it is focused on desserts?

Im done ✅✅✅ I wrote desserts instead of juice

JennieDalgren · 2025-10-26T21:08:41Z

js/script.js

+  if (
+    /(baklava|kunafa|kanafeh|maamoul|halva|tahini|rose\s*water|orange\s*blossom|middle\s*east|arab|leban|turk|persian|iran)/.test(
+      t
+    )
+  )
+    return "middle eastern";
+
+  const ing = ingredients.map((i) => String(i || "").toLowerCase()).join(" ");
+  if (/(mascarpone|savoiardi|amaretto)/.test(ing)) return "italian";
+  if (/(matcha|azuki|black\s*sesame|rice\s*flour)/.test(ing)) return "asian";
+  if (/(tahini|date|rose\s*water|orange\s*blossom|cardamom)/.test(ing))


This looks very hard coded, why don't you use the cuisine data from the API instead?

I simplified the cuisine detection function (detectCuisine). Now it only uses the cuisines field from the api data, and if the cuisine is not specified, it returns 'international'

JennieDalgren · 2025-10-26T21:09:06Z

js/script.js

+function toNum(v) {
+  const n = Number(v);
+  return Number.isFinite(n) ? n : 0;
+}


what do you need this for?

The toNum function is used for safely converting values to numbers when sorting the cards 😀

JennieDalgren · 2025-10-26T21:10:21Z

js/script.js

+  seedIfEmpty(LS_COFFEE, DEMO_CAKES);
+  seedIfEmpty(LS_JUICE, DEMO_DESSERTS);
+


should this actually be happening? You are supposed to fetch from the API?

You're totally right to ask! Here’s the idea behind seedIfEmpty:

1- Fallback for API limits:
The Spoonacular API has strict limits (150 requests/day on the free plan). When the limit is reached, it returns a 402/429 error. Demo data makes sure the filters always work so you can test them.

2- Immediate UI feedback:
Without demo data, the user would see a blank screen while waiting for the API. With demo data, the interface shows content right away and updates it if the API responds.

JennieDalgren · 2025-10-26T21:11:20Z

js/script.js

+buttonCoffee?.addEventListener("click", () => {
+  mainCoffee?.classList.remove("hidden");
+  mainJuice?.classList.add("hidden");
+  mainTea?.classList.add("hidden");
+  mainFavorites?.classList.add("hidden");
+  setActiveButton(buttonCoffee);
+});
+
+//Turn on JUICE container and turn off the others
+buttonJuice?.addEventListener("click", () => {
+  mainCoffee?.classList.add("hidden");
+  mainJuice?.classList.remove("hidden");
+  mainTea?.classList.add("hidden");
+  mainFavorites?.classList.add("hidden");
+  setActiveButton(buttonJuice);


I get the logic here, and it is nice. However I don't see any use of a coffee or juice button? Use names that makes sense for your project.

Updated project description and added features, demo, technologies, and file structure.

Removed line breaks for a more concise introduction.

KausarShangareeva · 2025-11-16T14:55:14Z

Good job with this project!

Take a look at the API calls and make sure yoou have data to be able to try your filters. I get empty states on almost all of them.

Really good implementation of favorite recipes and that is persists in local storage.

You project is not entirely responsive, see the screenshot:

Clean up your code a bit and work on the naming of your functions. If you change your "theme" of the recipes, change the names in your code too. Also, stick to english comments. And remember to use commit messages in a better way, the message should reflect the change that you have done in the code, do not just copy paste the same message every time, that really beats the purpose of commits.

What you need to fix:

Responsiveness

Make sure the filters you have chosen to work with is actually working

Clean up the code. Remove unused code, proper naming of variables and functions, english in comments if you need them.

Almost there! 💪

Im done ✅✅✅

JennieDalgren

✅

KausarShangareeva added 18 commits September 25, 2025 12:48

Push latest changes

98d5512

Push latest changes

127b346

Push latest changes

5489944

Push latest changes

1de6ca8

Push latest changes

ae9d5aa

Push latest changes

9a7a894

Push latest changes

e9e46bb

Push latest changes

784c5e8

Push latest changes

8dbd8b0

Push latest changes

b05a547

Push latest changes

4eb8b44

Push latest changes

3d98665

Push latest changes

08a61e3

Push latest changes

72c0918

chore: push latest changes

a7fca00

chore: push latest changes

1d070a1

chore: push latest changes

7405025

chore: push latest changes

36be877

irisdgz reviewed Oct 13, 2025

View reviewed changes

JennieDalgren self-assigned this Oct 23, 2025

JennieDalgren requested changes Oct 26, 2025

View reviewed changes

KausarShangareeva added 5 commits November 14, 2025 10:49

Revise README for Favorite Dessert project

dd969f1

Updated project description and added features, demo, technologies, and file structure.

Simplify README introduction text

c6d878e

Removed line breaks for a more concise introduction.

Add

f337b9a

Update README with screenshot and features section

f870dac

Add screenshot to README

4ae8edd

KausarShangareeva added 2 commits November 16, 2025 16:39

Update project files and README

bee3ff5

Deleted not used img

bd8e466

Deleted not needed js

12f0a9d

KausarShangareeva requested a review from JennieDalgren November 16, 2025 19:07

JennieDalgren approved these changes Nov 20, 2025

View reviewed changes

KausarShangareeva changed the title ~~Project Recipe Library – Kausyar~~ Dessert Recipes Project – Technigo Bootcamp Project 2025 Dec 1, 2025

		seedIfEmpty(LS_COFFEE, DEMO_CAKES);
		seedIfEmpty(LS_JUICE, DEMO_DESSERTS);

Dessert Recipes Project – Technigo Bootcamp Project 2025 #59

Are you sure you want to change the base?

Dessert Recipes Project – Technigo Bootcamp Project 2025 #59

Uh oh!

Conversation

KausarShangareeva commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

irisdgz Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

irisdgz left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JennieDalgren left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KausarShangareeva Nov 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KausarShangareeva commented Nov 16, 2025

Uh oh!

JennieDalgren left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

KausarShangareeva commented Oct 10, 2025 •

edited

Loading

irisdgz Oct 13, 2025 •

edited

Loading

KausarShangareeva Nov 16, 2025 •

edited

Loading