חברי ארגון בריאות ישראלי גדול יכולים לעיין בסדנאות בריאות ואיכות חיים לפי תחום, לסנן לפי מקום, שעה, יום ושפה, לראות את המחיר לחברי התוכנית ולמי שאינו חבר בה, ולנהל לבד את ההרשמות שלהם. לקחנו את זה ממאגר קוד ריק לפרונטאנד מלא מבחינת UX, בעברית ומימין לשמאל, תוך 13 יום. ההתחברות עוברת מפורטל החברים הקיים של הארגון.
הארגון מפעיל סדנאות בריאות ואיכות חיים בהרבה מרפאות: הכנה ללידה והדרכת הנקה, תזונה, כושר, הורות וניהול מתחים. לכל סדנה יש כמה מועדים, מנחים ושפות, ושני מסלולי מחיר לפי התוכנית של החבר. החברים היו צריכים מקום אחד שבו אפשר למצוא סדנה שמתאימה לשבוע שלהם, לראות את המחיר שרלוונטי להם, ואחר כך לשנות מועד או לבטל בלי להתקשר למוקד. כל זה היה צריך לעבוד בטלפון, בעברית, ובלי לבקש מהם להתחבר שוב.
באנר ראשי, קרוסלת ”כדאי להכיר” שמציגה תמיד כרטיסים שלמים, ורשת של תחומי סדנאות.
צ׳יפים של נושאים וסרגל צד עם 6 מסננים: מיקום, פרונטלי או מקוון, שפה, מנחה, שעות וימים מועדפים. כפתור ”ניקוי” אחד מאפס את כולם.
כל המחזורים המתוכננים של הסדנה, עם המפגשים, המיקום, המנחה, המחיר לחברים ולמי שאינם חברים, ומספר המקומות שנותרו.
פרטי המפגשים, התאריכים, השפה ושני מסלולי המחיר, עם פעולת אישור אחת.
לשוניות לסדנאות עתידיות ולסדנאות שהסתיימו. בכל הרשמה מופיע מועד הביטול האחרון, ויש בה ביטול, שינוי מועד (חלון עם המחזורים האחרים) והוספה ליומן.
התרשים רחב מהמסך: החליקו הצידה לצפייה בכולו →
הפרונטאנד נפרס כקבצים סטטיים. ההבדל בין הסביבות הוא רק קובץ JSON קטן שהאפליקציה קוראת לפני הרינדור, כך שאותו בילד בדיוק עובר מ־test ל־production בלי שינוי. ה־API של הסדנאות נבנה בנפרד, והממשק כבר רץ על נתוני דמה שבנויים בדיוק לפי החוזה המוקלד שלו.
Vite, Redux Toolkit, עזר למחזור החיים של קריאות axios, i18n ו־hooks של lint היו מוכנים מהיום הראשון, והקומיט הראשון של פיצ׳ר נכנס יום אחרי הקומיט ההתחלתי. המחיר: ערכת הפתיחה מביאה תלויות שהאפליקציה עוד לא צריכה (מפות, צ׳אט, לוח שנה), והשארנו אותן לניקוי בהמשך.
כתובת ה־API, המצב ושפת ברירת המחדל מגיעים מקובץ JSON שנטען לפני הרינדור הראשון. ארטיפקט אחד משרת את כל הסביבות. המחיר: בקשה נוספת בעלייה ורגע קצר של מסך ריק עד שהיא חוזרת.
Provider אחד של react-hook-form עוטף את ה־layout המסונן, כך שסרגל הצד וכל דף מתחתיו קוראים את אותו state. הסינון עצמו הוא hook עם memoization. המחיר: המסננים עוד לא נשמרים ב־URL, ולכן אי אפשר לשתף תצוגה מסוננת כקישור.
סדנאות, סוגים, נושאים ומפגשים מוגדרים כמודלים מוקלדים, ונתוני הדמה משתמשים בדיוק באותם טיפוסים. כשה־API יהיה מוכן, מחליפים את מקור הנתונים והקומפוננטות לא משתנות. המחיר: 15 סימוני TODO שצריך לעקוב אחריהם עד האינטגרציה.
שורש האפליקציה מוגדר RTL וכל מחרוזת עוברת דרך i18n מהיום הראשון, בלי טקסט קשיח בקומפוננטות. כך גרסה בערבית או באנגלית תהיה רק קובץ תרגום. המחיר: יותר תשומת לב לאייקונים, לחצים ולכיוון הקרוסלה.
גם לבנייה של שבועיים יש מלכודות. אלה הבעיות שעיצבו את הקוד.
החברים מתחברים בפורטל הראשי של הארגון. לבקש מהם להתחבר שוב בשביל הסדנאות לא היה אופציה, ולכל סביבה יש כתובת פורטל אחרת.
הפורטל מפנה לנתיב התחברות ייעודי עם טוקן חתום. האפליקציה מחליפה אותו בטוקן API משלה, מפענחת את ה־claims למשתמש מוקלד (זכאות לתוכנית, מסלול מחיר, אמצעי תשלום) ופותחת את ”הסדנאות שלי”. כתובת ההתחברות נקבעת לפי שם המארח, לכל אחת מ־4 הסביבות.
פרטי המשתמש מגיעים כמחרוזת JSON בתוך ה־payload של ה־JWT, ו־atob מחזיר בתים גולמיים ולא טקסט UTF-8, כך ששמות בעברית יוצאים משובשים.
מנרמלים base64url, מקודדים כל בית ב־percent-encoding ומפענחים כ־UTF-8, ואז מפרסרים פעמיים: פעם ל־payload ופעם ל־claims המקוננים. שאר האפליקציה רואה רק IUser מוקלד.
דף אחד שולח כמה קריאות API בבת אחת. כשטוקן הגישה פג, כל אחת מהן מקבלת 401, וכל אחת הייתה מתחילה רענון משלה.
Promise אחד של רענון משותף לכל הבקשות שנכשלו. כל בקשה מקורית מנסה שוב פעם אחת עם הטוקן החדש. אם הרענון נכשל, הסשן מתנקה.
הטמעת ערכי הסביבה בזמן הבילד הייתה מחייבת בילד נפרד לכל סביבה, ואז הבילד שנבדק הוא לא הבילד שעולה לאוויר.
קומפוננטת שער טוענת את appSettings.json ולא מרנדרת כלום עד שהוא מגיע. כל כתובות ה־API מחושבות ממנו רק בזמן השימוש.
עם שישה מסננים, המימושים המתבקשים סותרים זה את זה: בחירה של שני ימים מצמצמת את הרשימה או מרחיבה אותה? ומה עם סדנה שלא הוגדרה לה שפה?
ערכים בתוך אותו מסנן מחוברים ב־OR, מסננים שונים ב־AND, מסנן ריק לא מגביל, וסדנה בלי ערך מוחרגת רק כשהמסנן הזה פעיל. כל זה הוא hook אחד עם memoization שמונע מהטופס המשותף. אפשר לנסות למטה.
בהרבה רוחבי מסך קרוסלת ”כדאי להכיר” הציגה חצי כרטיס בקצה, וזה נראה שבור בטלפון.
מספר הכרטיסים הגלויים מחושב מרוחב המכל, מרוחב הכרטיס הקבוע ומהרווח, כך שמוצגים רק כרטיסים שלמים, והחישוב מתעדכן בשינוי גודל.
בקוד היה כתוב ”workspace”, ”category” ו־”topic”. אצל הלקוח מדברים על תחום, סוג סדנה ומחזור. הפער הזה התחיל לזלוג לממשק.
עשיתי סבב מינוח אחד על הקומפוננטות, הנתיבים וקובץ התרגום בעברית, ומיזגנו אותו ב־Pull Request אחד שעבר review לפני תחילת האינטגרציה.
זה מימוש קטן מחדש של סמנטיקת הסינון, עם נתונים מומצאים ולא עם קוד של הלקוח. בחרו ערכים: הרשימה מצטמצמת בין מסננים ומתרחבת בתוך מסנן.
הפרונטאנד מלא מבחינת UX ב־5 מסכים ו־7 נתיבים, ומחכה ל־API של הסדנאות. הצעדים הבאים: להחליף את מקורות הדמה בקריאות API, לשמור את מצב הסינון ב־URL, ולהוסיף טסטים סביב hook הסינון והעברת הטוקן.
שיחת אבחון חינם · 30 דקות · ללא התחייבות
כתבו בכמה שורות: איזה תהליך או מערכת, מה כואב היום (זמן, טעויות, עלויות או פיילוט AI שנתקע) ומי עובד עם זה. אחרי שיחה קצרה מקבלים תוך כ־3 ימים תוכנית כתובה והצעת מחיר סגורה.
נפתח מייל מוכן מראש · מענה תוך יום עסקים
ה־AI קורא. הקוד סופר.
כל הפרויקטים