11.8 גישה לפרויקט פרונטאנד פתרון
פתרון - גישה לפרויקט פרונטאנד¶
הפתרונות מבוססים על אפליקציית ניהול משימות לצוותים כפרויקט לדוגמה.
פתרון תרגיל 1 - תכנון פרויקט¶
תיאור:
אפליקציית ניהול משימות לצוותים קטנים-בינוניים. מאפשרת ליצור פרויקטים, לנהל משימות בלוח Kanban, לשתף פעולה עם חברי צוות, ולעקוב אחרי התקדמות. תומכת בעברית ובאנגלית.
דרישות פונקציונליות:
1. רישום והתחברות (אימייל/סיסמה + Google)
2. יצירת פרויקטים והזמנת חברי צוות
3. יצירת וניהול משימות (כותרת, תיאור, עדיפות, תאריך יעד, אחראי)
4. לוח Kanban עם גרירת משימות בין עמודות
5. תגובות על משימות
6. התראות בזמן אמת (הקצאת משימה, תגובה חדשה)
7. חיפוש וסינון משימות
8. דשבורד עם סטטיסטיקות (משימות פתוחות, באיחור, מגמות)
9. תוויות (labels) צבעוניות למשימות
10. ייצוא משימות ל-CSV
דרישות לא-פונקציונליות:
1. זמן טעינה ראשוני מתחת ל-2 שניות
2. נגישות ברמת WCAG AA
3. רספונסיביות מלאה (מובייל, טאבלט, מחשב)
4. תמיכה ב-RTL (עברית) ו-LTR (אנגלית)
5. אבטחה - HTTPS, CSP, HttpOnly cookies
6. עדכונים בזמן אמת (WebSocket)
MVP:
- רישום/התחברות
- יצירת פרויקט
- לוח Kanban בסיסי (3 עמודות)
- יצירת/עריכת/מחיקת משימות
- הקצאת משימות לחברי צוות
דפים ראשיים:
- דף כניסה/הרשמה
- דשבורד ראשי
- דף פרויקט (לוח Kanban)
- דף משימה בודדת
- דף הגדרות (פרופיל, צוות, התראות)
פתרון תרגיל 2 - בחירת Tech Stack¶
| כלי | בחירה | סיבה |
|---|---|---|
| פריימוורק | Next.js 14 (App Router) | SSR ל-SEO, API Routes, Server Components, הכי נפוץ |
| שפה | TypeScript | בטיחות טיפוסים, IDE טוב יותר, פחות באגים |
| UI | Mantine v7 | קומפוננטות עשירות, RTL מובנה, dark mode, נגישות |
| סטייט (client) | Zustand | פשוט, קל, ללא boilerplate |
| סטייט (server) | TanStack React Query | caching, refetching, optimistic updates |
| טפסים | React Hook Form + Zod | ביצועים, אימות type-safe |
| אימות | Auth.js v5 | תמיכה ב-providers, sessions, middleware |
| מסד נתונים | Prisma + PostgreSQL | type-safe ORM, migrations, studio |
| זמן אמת | Socket.io | חדרים, reconnection, fallback |
| פריסה | Vercel | אינטגרציה עם Next.js, preview deployments |
| בדיקות | Vitest + Playwright | מהיר, תואם ESM, E2E מלא |
| CI/CD | GitHub Actions | אינטגרציה עם GitHub, חינמי |
פתרון תרגיל 3 - מבנה פרויקט¶
task-manager/
src/
app/
(auth)/
login/page.tsx
register/page.tsx
layout.tsx # Layout ללא sidebar
(dashboard)/
dashboard/page.tsx # דשבורד ראשי
projects/
page.tsx # רשימת פרויקטים
[id]/
page.tsx # לוח Kanban של פרויקט
tasks/
[id]/page.tsx # דף משימה
settings/
page.tsx
team/page.tsx
layout.tsx # Layout עם sidebar
api/
auth/[...nextauth]/route.ts
projects/route.ts
tasks/route.ts
ws/route.ts
layout.tsx # Root layout
page.tsx # דף ראשי (redirect)
components/
ui/ # קומפוננטות בסיסיות
Button.tsx
Input.tsx
Modal.tsx
Badge.tsx
index.ts
features/
auth/
LoginForm.tsx
RegisterForm.tsx
projects/
ProjectCard.tsx
CreateProjectModal.tsx
tasks/
TaskCard.tsx
TaskForm.tsx
KanbanBoard.tsx
KanbanColumn.tsx
notifications/
NotificationBell.tsx
layout/
Header.tsx
Sidebar.tsx
MobileNav.tsx
hooks/
useAuth.ts
useDebounce.ts
useSocket.ts
useOnlineStatus.ts
lib/
api.ts # API client (fetch wrapper)
auth.ts # Auth.js config
prisma.ts # Prisma client
socket.ts # Socket.io client
utils.ts
stores/
useNotificationStore.ts
useThemeStore.ts
types/
project.ts
task.ts
user.ts
styles/
globals.css
constants/
routes.ts
priorities.ts
prisma/
schema.prisma
migrations/
public/
icons/
images/
tests/
e2e/
unit/
.env.example
.eslintrc.json
.prettierrc
next.config.js
tsconfig.json
package.json
פתרון תרגיל 4 - הגדרת כלי פיתוח¶
// .eslintrc.json
{
"extends": [
"next/core-web-vitals",
"plugin:@typescript-eslint/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
"plugins": ["@typescript-eslint", "jsx-a11y"],
"rules": {
"no-console": "warn",
"@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
"@typescript-eslint/no-explicit-any": "error",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"jsx-a11y/anchor-is-valid": "error"
}
}
// .prettierrc
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 100,
"arrowParens": "always",
"endOfLine": "lf"
}
# הגדרת Husky
npm install -D husky lint-staged @commitlint/cli @commitlint/config-conventional
npx husky init
// lint-staged בתוך package.json
{
"lint-staged": {
"*.{ts,tsx}": ["eslint --fix --max-warnings 0", "prettier --write"],
"*.{json,css,md,yml}": ["prettier --write"]
}
}
// commitlint.config.js
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'ci', 'revert'],
],
'subject-max-length': [2, 'always', 72],
'body-max-line-length': [1, 'always', 100],
},
};
// .editorconfig
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
// .env.example
# Database
DATABASE_URL=postgresql://user:password@localhost:5432/taskmanager
# Auth
NEXTAUTH_SECRET=your-secret-here
NEXTAUTH_URL=http://localhost:3000
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
# Socket
NEXT_PUBLIC_SOCKET_URL=http://localhost:3001
פתרון תרגיל 5 - פירוק משימות¶
אבן דרך 1: תשתית (שבוע 1)
- P0: הגדרת Next.js + TS + Mantine (4h)
- P0: הגדרת Prisma + סכמת DB (4h)
- P0: הגדרת ESLint + Prettier + Husky (2h)
- P0: הגדרת CI/CD בסיסי (3h)
- P1: הגדרת Auth.js (4h)
- P1: Layout בסיסי (Header, Sidebar) (4h)
אבן דרך 2: אימות (שבוע 2)
- P0: דף הרשמה + אימות Zod (6h)
- P0: דף התחברות (4h)
- P0: Middleware להגנת נתיבים (3h)
- P1: התחברות עם Google (3h)
- P2: שכחתי סיסמה (4h)
אבן דרך 3: פרויקטים (שבוע 3)
- P0: מודל Prisma לפרויקטים (2h)
- P0: API Routes - CRUD פרויקטים (4h)
- P0: דף רשימת פרויקטים (4h)
- P0: מודל יצירת פרויקט (3h)
- P1: הזמנת חברי צוות (4h)
אבן דרך 4: משימות ו-Kanban (שבוע 4-5)
- P0: מודל Prisma למשימות (2h)
- P0: API Routes - CRUD משימות (6h)
- P0: לוח Kanban - 3 עמודות (8h)
- P0: גרירת משימות (drag & drop) (6h)
- P0: טופס יצירת/עריכת משימה (4h)
- P1: דף משימה מפורט (4h)
- P1: תגובות על משימות (4h)
- P2: תוויות צבעוניות (3h)
אבן דרך 5: זמן אמת ודשבורד (שבוע 6)
- P1: הגדרת Socket.io (3h)
- P1: התראות בזמן אמת (4h)
- P1: עדכון Kanban בזמן אמת (4h)
- P1: דשבורד סטטיסטיקות (6h)
- P2: חיפוש וסינון (4h)
אבן דרך 6: שיפורים ופריסה (שבוע 7)
- P0: בדיקות Unit (6h)
- P0: בדיקות E2E (6h)
- P1: אופטימיזציה וביצועים (4h)
- P1: נגישות (4h)
- P1: i18n - עברית/אנגלית (4h)
- P0: פריסה ל-Vercel (3h)
סיכום: ~150 שעות = ~19 ימי עבודה = ~4 שבועות (או 7 שבועות בחצי משרה)
פתרון תרגיל 6 - כתיבת README¶
# TaskFlow - ניהול משימות לצוותים
מערכת ניהול משימות מודרנית לצוותים קטנים ובינוניים.
לוח Kanban, שיתוף פעולה בזמן אמת, דשבורד סטטיסטיקות.
[צילום מסך של האפליקציה]
## דרישות מקדימות
- Node.js 20 ומעלה
- PostgreSQL 15 ומעלה
- npm 10 ומעלה
## התקנה
1. שכפלו את ה-repository:
git clone https://github.com/user/taskflow.git
cd taskflow
2. התקינו תלויות:
npm install
3. צרו קובץ סביבה:
cp .env.example .env
# ערכו את .env עם הפרטים שלכם
4. הריצו migrations:
npx prisma migrate dev
5. הפעילו את שרת הפיתוח:
npm run dev
האפליקציה תהיה זמינה בכתובת http://localhost:3000
## סקריפטים
| סקריפט | תיאור |
|---------|--------|
| npm run dev | שרת פיתוח |
| npm run build | בניית production |
| npm run start | הפעלת production |
| npm run lint | בדיקת ESLint |
| npm run type-check | בדיקת TypeScript |
| npm test | בדיקות unit |
| npm run test:e2e | בדיקות E2E |
| npm run db:studio | פתיחת Prisma Studio |
## טכנולוגיות
- Next.js 14 (App Router)
- TypeScript
- Mantine v7
- Prisma + PostgreSQL
- Auth.js v5
- TanStack React Query
- Zustand
- Socket.io
- React Hook Form + Zod
- Vitest + Playwright
## מבנה הפרויקט
- src/app/ - דפים ו-API routes (Next.js App Router)
- src/components/ - קומפוננטות (ui, features, layout)
- src/hooks/ - React hooks מותאמים
- src/lib/ - ספריות ושירותים
- src/stores/ - Zustand stores
- src/types/ - טיפוסי TypeScript
- prisma/ - סכמת מסד נתונים ו-migrations
## תרומה
1. צרו fork של ה-repository
2. צרו branch חדש: git checkout -b feature/my-feature
3. בצעו commit: git commit -m "feat: add my feature"
4. דחפו ל-branch: git push origin feature/my-feature
5. פתחו Pull Request
אנא עקבו אחרי Conventional Commits בהודעות הקומיט.
## רישיון
MIT License
תשובות לשאלות¶
1. דרישות פונקציונליות מול לא-פונקציונליות:
דרישות פונקציונליות מתארות מה המערכת עושה - פעולות ופיצ'רים. דוגמאות: (1) המשתמש יכול ליצור משימה חדשה, (2) המערכת שולחת אימייל אישור בהרשמה, (3) מנהל יכול למחוק משתמשים. דרישות לא-פונקציונליות מתארות איך המערכת מתנהגת - איכות ומאפיינים. דוגמאות: (1) זמן תגובה מתחת ל-200ms, (2) המערכת תומכת ב-10,000 משתמשים מקבילים, (3) נגישות ברמת WCAG AA.
2. חשיבות MVP:
MVP מגדיר את הגרסה המינימלית שמספקת ערך למשתמשים. בלי MVP, הסיכון הוא scope creep - הפרויקט גדל בלי סוף, לעולם לא מסתיים, וכשהוא מסתיים הוא מאחר חודשים. MVP מאפשר: לקבל פידבק מוקדם, לאמת השערות, לשחרר מהר ולשפר בהדרגה.
3. Git Flow מול Trunk-Based:
Git Flow משתמש בענפים רבים (main, develop, feature, release, hotfix) ומתאים לפרויקטים עם מחזורי שחרור ארוכים. Trunk-Based Development עובד ישירות על main עם feature flags ופריסה תכופה. לצוותים קטנים (2-5 מפתחים), Trunk-Based פשוט יותר ומהיר יותר. Git Flow מתאים יותר לצוותים גדולים עם מוצר שיש לו גרסאות מרובות בתחזוקה.
4. Conventional Commits:
Conventional Commits (feat:, fix:, docs:) מספקים: (1) היסטוריית קומיטים קריאה וברורה, (2) אפשרות ליצור CHANGELOG אוטומטי, (3) קביעת semantic versioning אוטומטית (feat = minor, fix = patch), (4) סינון קומיטים לפי סוג. commitlint אוכף את הפורמט ומונע הודעות קומיט לא ברורות כמו "fix" או "update".
5. הערכת זמנים:
טכניקות: פירוק למשימות קטנות (מקסימום 4-8 שעות), הערכה לפי ניסיון קודם, שאילת עמית מנוסה. טעויות נפוצות: (1) שכחת זמן debug ותיקון באגים, (2) אי-הכללת code review ותיקון הערות, (3) אופטימיות יתר - תמיד לוקח יותר ממה שחושבים, (4) התעלמות מזמן לימוד טכנולוגיה חדשה, (5) אי-הכללת בדיקות ותיעוד. כלל אצבע: הכפילו את ההערכה הראשונית ב-1.5 עד 2.