עליכם לבנות פרויקט React המאפשר למשתמש לנהל את קטגוריות המוצרים של חברת Northwind Traders העולמית.
ע"י ההתקנה: npm i -g northwind-back-end ניתן להתקין שרת מקומי המחצין את המידע של חברת Northwind Traders.
ע"י פקודת הטרמינל: northwind ניתן להריץ את השרת הזה שמיד מחצין את המידע.
על הפרויקט להכיל את הדברים הבאים:
· על הפרויקט להיות בנוי ב-TypeScript ולא ב-Native JavaScript
· Layout אסתטי לפי בחירתכם
·
דף הרשמה של משתמש חדש (כתובת: http://localhost:3030/api/auth/register
)
·
דף כניסה של משתמש קיים (כתובת: http://localhost:3030/api/auth/login
)
· כל מנגנון ההרשמה צריך להיות ע"י JWT – שזו טכניקת השרת הנ"ל
·
דף צפייה בכל הקטגוריות (כתובת: http://localhost:3030/api/categories
)
יש להציג כל קטגוריה ב-Card. יש להציג בכל Card גם את תמונת הקטגוריה
· דף צפייה בקטגוריה ספציפית ע"י Route-Parameter – בהקלקה על Card – עוברים לדף המציג את כל הפרטים של כל הקטגוריה בצורה גדולה על המסך כולל שם הקטגוריה, תיאור הקטגוריה ותמונת הקטגוריה
· דף הוספת קטגוריה חדשה (כתובת: http://localhost:3030/api/auth/login). יש להציג לינק/לחצן לדף הזה במקום הגיוני לפי בחירתכם
·
דף עדכון קטגוריה קיימת (כתובת: http://localhost:3030/api/auth/login
).
יש להציג לינק/לחצן לדף הזה מתוך כל Card, לחיצה על הלינק/לחצן מתוך ה-Card
תאפשר לעדכן את הקטגוריה של ה-Card הספציפי עליו לחצו
·
דף מחיקת קטגוריה קיימת (כתובת: http://localhost:3030/api/auth/login
).
יש להציג לינק/לחצן לדף הזה מתוך כל Card, לחיצה על הלינק/לחצן מתוך ה-Card
תאפשר למחוק את הקטגוריה של ה-Card הספציפי עליו לחצו. יש להציג
למשתמש תיבת הודעה עבור אישור מחיקה לפני שבאמת מוחקים
· ניהול State של רמת האפליקציה ע"י Redux או MobX – לפי בחירתכם
· אם המשתמש אינו מחובר (לא ביצע הרשמה או כניסה), הוא לא יכול להיכנס לדפים השונים של הקטגוריות (צפייה/הוספה/עדכון/מחיקה וכדומה) מפני שהשרת עצמו מונע זאת
·
דף צור קשר (כתובת: http://localhost:3030/api/contact-us
)
המאפשר לשלוח הודעה הכוללת name,
email,
phone
ו-message.
יש לטעון את הדף הזה ע"י Lazy Loading
· כל הדפים נגישים ע"י תפריט + מנגנון Routing מתאים
· שימוש ב-Services עבור פעולות לוגיות כמו חישובים, גלישה לשרת מרוחק וכדומה
· ולידציה הגיונית על כל שדה ושדה בכל טופס וטופס
· טיפול בשגיאות – הצגה אסתטית של הודעות השגיאה המגיעות מהשרת ע"י ספריית Notification אסתטית כלשהי
· עיצוב כל האתר ע"י MUI או ע"י ספריית עיצוב מקצועית אחרת לפי בחירתכם
· העלאת האתר ל-Cloud כמו Firebase או כל Cloud אחר לפי בחירתכם. יש לשלוח לינק לכתובת השרת באויר יחד עם שליחת הפרויקט
דגשים:
· על הפרויקט לעבור קומפילציה
· על הפרויקט לרוץ ללא שום קריסות
· על הקומפוננטות להיות קצרות ככל שניתן ולא עמוסות
· על הקוד להיות אסתטי, להשתמש ב-Indentations כמו שצריך, ריווח של שורת רווח אחת בין קטעי קוד שונים וכדומה
· Directory-Structure – בדיוק כפי שנלמד ויושם בקורס
· תיעוד – כל רכיב וכן מקומות מורכבים בקוד
· בונוס יינתן על עיצוב מעניין, פיצ'רים מתקדמים יותר וכדומה
· הגשה: מחיקת תיקיית ה-node_modules, ביצוע קובץ zip מכל הפרויקט, שליחת קובץ ה-zip ע"י Google Drive
בהצלחה 😊