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 without sidebar
(dashboard)/
dashboard/page.tsx # Main dashboard
projects/
page.tsx # Project list
[id]/
page.tsx # Project Kanban board
tasks/
[id]/page.tsx # Task page
settings/
page.tsx
team/page.tsx
layout.tsx # Layout with sidebar
api/
auth/[...nextauth]/route.ts
projects/route.ts
tasks/route.ts
ws/route.ts
layout.tsx # Root layout
page.tsx # Main page (redirect)
components/
ui/ # Basic components
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"
}
# Set up Husky
npm install -D husky lint-staged @commitlint/cli @commitlint/config-conventional
npx husky init
// lint-staged inside 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: הmodel Prisma לפרויקטים (2h)
- P0: API Routes - CRUD פרויקטים (4h)
- P0: דף רשימת פרויקטים (4h)
- P0: מודל יצירת פרויקט (3h)
- P1: הזמנת חברי צוות (4h)
אבן דרך 4: משימות ו-Kanban (שבוע 4-5)
- P0: הmodel 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 - Team Task Management
A modern task management system for small and medium teams.
Kanban board, real-time collaboration, statistics dashboard.
[Screenshot of the application]
## Prerequisites
- Node.js 20 or higher
- PostgreSQL 15 or higher
- npm 10 or higher
## Installation
1. Clone the repository:
git clone https://github.com/user/taskflow.git
cd taskflow
2. Install dependencies:
npm install
3. Create an environment file:
cp .env.example .env
# Edit .env with your details
4. Run migrations:
npx prisma migrate dev
5. Start the dev server:
npm run dev
The application will be available at http://localhost:3000
## Scripts
| Script | Description |
|---------|--------|
| npm run dev | Dev server |
| npm run build | Production build |
| npm run start | Run production |
| npm run lint | ESLint check |
| npm run type-check | TypeScript check |
| npm test | Unit tests |
| npm run test:e2e | E2E tests |
| npm run db:studio | Open Prisma Studio |
## Technologies
- 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
## Project Structure
- src/app/ - Pages and API routes (Next.js App Router)
- src/components/ - Components (ui, features, layout)
- src/hooks/ - Custom React hooks
- src/lib/ - Libraries and services
- src/stores/ - Zustand stores
- src/types/ - TypeScript types
- prisma/ - Database schema and migrations
## Contributing
1. Fork the repository
2. Create a new branch: git checkout -b feature/my-feature
3. Commit: git commit -m "feat: add my feature"
4. Push the branch: git push origin feature/my-feature
5. Open a Pull Request
Please follow Conventional Commits in your commit messages.
## License
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.