דניאלה לוי
פרויקט 03 · הדגמה
אתר מתכונים משפחתי
המתכונים של המשפחה שלי חיו בפתקים, בצילומי מסך ובשיחות וואטסאפ — וכל פעם שמישהו רצה להכין את עוגת השוקולד של סבתא, התחיל מסע חיפושים. בניתי אתר אחד שמרכז הכל: חיפוש חופשי, סינון לפי קטגוריה, ומסך מתכון שנוח לקרוא ממנו גם כשהידיים מלאות בקמח.
React
JavaScript
UI/UX
RTL מלא
פרויקט גמר
💡
זו הדגמה חיה — אפשר להתנסות. חפשו מתכון או רכיב, סננו לפי קטגוריה, סמנו מועדפים ולחצו על כרטיס כדי לפתוח את המתכון המלא. המקור נכתב ב-React; הגרסה הזו כתובה ב-JavaScript נקי כדי שתרוץ כאן בלי שרת ובלי שלב build.
מה יש מתחת למכסה המנוע
הפרויקט המקורי נבנה ב-React כפרויקט גמר בקורס. אלה ההחלטות המרכזיות שקיבלתי בדרך.
חיפוש שמכסה גם רכיבים
לא מספיק לחפש לפי שם. אם נשאר לי חציל בפריזר, אני רוצה לדעת מה אפשר להכין ממנו — אז החיפוש סורק גם את רשימת הרכיבים של כל מתכון.
מצב אחד, שני מסננים
החיפוש והקטגוריה פועלים יחד ולא דורסים זה את זה. הרשימה המסוננת נגזרת מהמצב בכל רינדור, כך שאין סנכרון ידני שאפשר לשכוח לעדכן.
נגישות ו-RTL מהיסוד
ניווט מלא במקלדת, Escape סוגר את חלון המתכון והפוקוס חוזר לכרטיס שנפתח. הפריסה בנויה על מאפיינים לוגיים, כך שעברית עובדת בלי תיקונים נקודתיים.