🎓 CampusWeb React - מערכת ניהול קמפוס

מערכת ניהול קמפוס מודרנית וחכמה לאונו - המרכז האקדמי לניהול

🚀 התחלה מהירה • 📖 תיעוד • 🔐 התחברות • 📁 מבנה

---

📋 תוכן עניינים

• 🎯 אודות הפרויקט
• ✨ תכונות עיקריות
• 🛠️ טכנולוגיות
• 🚀 התקנה והפעלה
• 🔐 חשבונות דמו
• 📁 מבנה הפרויקט
• 🎨 עיצוב
• 📱 תמיכה במכשירים
• 🔧 פיתוח
• 📊 סטטיסטיקות
• 🤝 תרומה
• 📄 רישיון

---

🎯 אודות הפרויקט

CampusWeb React היא מערכת ניהול קמפוס מתקדמת ומודרנית שפותחה עבור אונו - המרכז האקדמי לניהול. המערכת מספקת פתרון מקיף לניהול פעילויות הקמפוס, סטודנטים, קורסים, אירועים ומתקנים.

🎓 מטרת הפרויקט

הפרויקט נועד לספק פלטפורמה דיגיטלית מתקדמת לניהול הקמפוס, הכוללת:

• ניהול סטודנטים וקורסים
• מערכת אירועים דינמית
• ניהול מתקנים בזמן אמת
• פורום קורסים אינטראקטיבי
• מערכת דיווחי אבידות ומציאות
• פניות קהילה וניהול תלונות

---

✨ תכונות עיקריות

🏠 לוח בקרה חכם

• תצוגה מותאמת אישית לכל משתמש
• תזכורות יומיות למטלות
• סטטיסטיקות בזמן אמת
• גישה מהירה לכל השירותים

👥 ניהול סטודנטים מתקדם

• רשימת סטודנטים מפורטת עם סטטיסטיקות
• הוספת סטודנטים חדשים
• ניהול קורסים ומטלות
• מעקב אחר ביצועים

📅 מערכת אירועים דינמית

• יצירת אירועים חדשים
• ניהול אירועים קיימים
• תצוגה לפי תאריכים
• ניהול משתתפים

🏢 ניהול מתקנים בזמן אמת

• מעקב אחר מצב מתקנים
• עדכון סטטוסים מיידי
• דירוג מתקנים
• היסטוריית שינויים

💬 פורום קורסים אינטראקטיבי

• הודעות בזמן אמת
• בחירת קורסים
• תצוגה מותאמת לסטודנט
• ניהול שיחות

🔍 מערכת אבידות ומציאות

• דיווח אבידות ומציאות
• חיפוש מתקדם
• ניהול דיווחים
• מעקב אחר סטטוס

📝 פניות קהילה

• שליחת פניות חדשות
• ניהול תלונות והצעות
• מעקב אחר סטטוס
• תגובות מהירות

👤 פרופיל אישי

• עריכת פרטים אישיים
• עדכון מידע
• היסטוריית פעילות
• הגדרות אישיות

---

🛠️ טכנולוגיות

Frontend

• React 19.1.1 - ספריית UI מודרנית
• TypeScript 5.9.2 - טיפוסים בטוחים
• Material UI 7.3.0 - קומפוננטות UI מתקדמות
• Emotion - CSS-in-JS לביצועים מיטביים

State Management

• React Hooks - ניהול state מודרני
• localStorage - אחסון נתונים מקומי
• Custom Events - תקשורת בין קומפוננטות

Styling & Design

• Material Design - עיצוב מודרני ונגיש
• RTL Support - תמיכה מלאה בעברית
• Responsive Design - התאמה לכל המכשירים
• Custom Theme - ערכת צבעים מותאמת לאונו

Development Tools

• React Scripts - כלי פיתוח מתקדמים
• ESLint - בדיקת איכות קוד
• TypeScript Compiler - בדיקת טיפוסים
• Hot Reload - עדכון מיידי בפיתוח

---

🚀 התקנה והפעלה

דרישות מקדימות

• Node.js (גרסה 16 ומעלה)
• npm או yarn
• דפדפן מודרני (Chrome, Firefox, Safari, Edge)

שלב 1: הורדת הפרויקט

# שכפול הפרויקט
git clone https://github.com/your-username/campus-web-react.git

# מעבר לתיקיית הפרויקט
cd campus-web-react

שלב 2: התקנת תלויות

# התקנת כל התלויות
npm install

# או עם yarn
yarn install

שלב 3: הפעלת הפרויקט

# הפעלת שרת פיתוח
npm start

# או עם yarn
yarn start

שלב 4: פתיחת הדפדפן

הפרויקט ייפתח אוטומטית בדפדפן בכתובת: http://localhost:3000

בנייה לייצור

# בניית הפרויקט לייצור
npm run build

# או עם yarn
yarn build

---

🔐 חשבונות דמו

המערכת כוללת חשבונות דמו לבדיקה מיידית:

👨‍🎓 סטודנט

• אימייל: student@campus.ac.il
• סיסמה: 123456
• תפקיד: סטודנט
• גישה: לוח בקרה, קורסים, מטלות, פורום

👩‍🎓 סטודנטית

• אימייל: shira.goldberg@student.ono.ac.il
• סיסמה: 123456
• תפקיד: סטודנטית
• גישה: לוח בקרה, קורסים, מטלות, פורום

👨‍🏫 מרצה

• אימייל: lecturer@campus.ac.il
• סיסמה: 123456
• תפקיד: מרצה
• גישה: כל התכונות + ניהול סטודנטים וקורסים

---

📁 מבנה הפרויקט

campus-web-react/
├── 📁 public/                 # קבצים סטטיים
│   ├── index.html            # קובץ HTML ראשי
│   ├── favicon.ico           # אייקון האתר
│   └── manifest.json         # הגדרות PWA
├── 📁 src/                   # קוד מקור
│   ├── 📁 components/        # קומפוננטות React
│   │   ├── 📁 dashboard/     # קומפוננטות לוח בקרה
│   │   ├── 📁 tables/        # קומפוננטות טבלאות
│   │   ├── Header.tsx        # כותרת האתר
│   │   ├── Footer.tsx        # כותרת תחתונה
│   │   └── ...               # קומפוננטות נוספות
│   ├── 📁 pages/             # דפי האתר
│   │   ├── FormsPage.tsx     # דף טפסים
│   │   └── StudentsPage.tsx  # דף סטודנטים
│   ├── 📁 hooks/             # React Hooks מותאמים
│   │   ├── useAuth.ts        # ניהול התחברות
│   │   └── useNotifications.ts # ניהול התראות
│   ├── 📁 data/              # נתוני דמו
│   │   ├── demoData.ts       # נתונים לדוגמה
│   │   └── studentsData.ts   # נתוני סטודנטים
│   ├── 📁 types/             # הגדרות TypeScript
│   │   ├── index.ts          # טיפוסים כלליים
│   │   └── Student.ts        # טיפוס סטודנט
│   ├── 📁 constants/         # קבועים
│   │   └── theme.ts          # ערכת עיצוב
│   ├── 📁 assets/            # קבצי מדיה
│   │   ├── onologo.png       # לוגו אונו
│   │   └── ...               # תמונות נוספות
│   ├── App.tsx               # קומפוננטה ראשית
│   ├── index.tsx             # נקודת כניסה
│   └── index.css             # סגנונות גלובליים
├── package.json              # הגדרות הפרויקט
├── tsconfig.json             # הגדרות TypeScript
└── README.md                 # קובץ זה

---

🎨 עיצוב

ערכת צבעים

המערכת משתמשת בערכת צבעים ירוקה המזוהה עם אונו:

/* צבעים ראשיים */
--primary: #2e7d32;        /* ירוק כהה */
--primary-light: #4caf50;  /* ירוק בהיר */
--primary-dark: #1b5e20;   /* ירוק כהה מאוד */

/* צבעים משניים */
--secondary: #1976d2;      /* כחול */
--accent: #ff9800;         /* כתום */

/* צבעי רקע */
--background: #f5f5f5;     /* אפור בהיר */
--surface: #ffffff;        /* לבן */
--paper: #fafafa;          /* אפור בהיר מאוד */

טיפוגרפיה

• כותרות: Roboto, משקל 500-700
• טקסט רגיל: Roboto, משקל 400
• טקסט משני: Roboto, משקל 300
• תמיכה מלאה בעברית עם RTL

קומפוננטות

• Cards: עיצוב מודרני עם צללים עדינים
• Buttons: עיצוב Material Design עם אנימציות
• Forms: ולידציה בזמן אמת עם הודעות שגיאה
• Tables: עיצוב נקי עם hover effects

---

📱 תמיכה במכשירים

🖥️ דסקטופ

• ממשק מלא עם תפריט צד
• טבלאות מפורטות
• חלונות דיאלוג גדולים
• ניווט מקלדת מלא

📱 טאבלט

• התאמה אוטומטית לרוחב המסך
• תפריט המבורגר
• קומפוננטות מותאמות למגע
• גריד רספונסיבי

📱 מובייל

• תפריט המבורגר
• קומפוננטות מותאמות למגע
• טקסטים מותאמים
• ניווט פשוט ואינטואיטיבי

---

🔧 פיתוח

הוספת קומפוננטות חדשות

1. צור קובץ .tsx בתיקיית src/components/
2. הגדר טיפוסים ב-src/types/index.ts
3. ייבא והשתמש בקומפוננטה ב-App.tsx

הוספת נתונים חדשים

1. עדכן את הטיפוסים ב-src/types/index.ts
2. הוסף נתוני דמו ב-src/data/demoData.ts
3. צור קומפוננטות להצגת הנתונים

הוספת דפים חדשים

1. צור קובץ .tsx בתיקיית src/pages/
2. הוסף route ב-App.tsx
3. עדכן את התפריט ב-Header.tsx

בדיקות

# הפעלת בדיקות
npm test

# בדיקות עם כיסוי
npm run test:coverage

---

📊 סטטיסטיקות

קוד

• 📁 קבצים: 50+ קבצי TypeScript/React
• 📝 שורות קוד: 15,000+ שורות
• 🎨 קומפוננטות: 25+ קומפוננטות React
• 📱 דפים: 8 דפים עיקריים

תכונות

• 👥 משתמשים: 3 סוגי משתמשים
• 📊 טבלאות: 5 טבלאות ניהול
• 📝 טפסים: 6 טפסים שונים
• 🔔 התראות: מערכת התראות מלאה

ביצועים

• ⚡ זמן טעינה: < 3 שניות
• 📱 רספונסיבי: 100% תמיכה
• 🌐 דפדפנים: Chrome, Firefox, Safari, Edge
• ♿ נגישות: WCAG 2.1 AA

---

🤝 תרומה

אנו מעודדים תרומות לקהילה! הנה איך תוכל לתרום:

1. דיווח על באגים

• פתח issue חדש
• תאר את הבעיה בפירוט
• צרף צילומי מסך אם רלוונטי

2. הצעות שיפור

• פתח issue עם תווית "enhancement"
• תאר את הרעיון שלך
• הסבר את היתרונות

3. תרומת קוד

1. Fork את הפרויקט
2. צור branch חדש (git checkout -b feature/amazing-feature)
3. Commit את השינויים (git commit -m 'Add amazing feature')
4. Push ל-branch (git push origin feature/amazing-feature)
5. פתח Pull Request

4. תיעוד

• שיפור README
• הוספת הערות לקוד
• יצירת מדריכים

---

📄 רישיון

פרויקט זה פותח עבור אונו - המרכז האקדמי לניהול ומשמש כפרויקט מסכם בקורס פיתוח Frontend.

זכויות יוצרים

• מפתח: צוות פיתוח אונו
• שנה: 2025
• מוסד: אונו - המרכז האקדמי לניהול

שימוש

הפרויקט מיועד לשימוש אקדמי ולימודי. כל השימוש בפרויקט חייב להיות בהתאם לחוקי זכויות היוצרים.

---

📞 תמיכה וקשר

צוות הפיתוח

• מנהל פרויקט: צוות אונו
• אימייל: support@ono.ac.il
• אתר: www.ono.ac.il

משאבים נוספים

• תיעוד React: reactjs.org
• תיעוד Material UI: mui.com
• תיעוד TypeScript: typescriptlang.org

---

🎓 פותח עם ❤️ עבור אונו - המרכז האקדמי לניהול

⬆️ חזרה למעלה