11.9 פרויקט סיום פרויקט

פרויקט סיום - Capstone Project¶

פרויקט הסיום הוא הזדמנות ליישם את כל מה שלמדתם לאורך הקורס בפרויקט אחד מקיף. תבנו אפליקציית Full-Stack מלאה מאפס עד פריסה.

הפרויקט: פלטפורמת מסחר אלקטרוני¶

בנו פלטפורמת מסחר אלקטרוני (e-commerce) מלאה שכוללת חנות מקוונת ופאנל ניהול.

דרישות טכנולוגיות¶

חבילת טכנולוגיות נדרשת¶

Next.js (App Router) + TypeScript
Prisma + PostgreSQL (או SQLite לפיתוח)
Auth.js (NextAuth v5) לאימות
Mantine UI עם תמיכה ב-dark mode
TanStack React Query לניהול נתוני שרת
Zustand לסטייט צד לקוח
React Hook Form + Zod לטפסים ואימות
רספונסיביות מלאה - מובייל, טאבלט, מחשב
SEO - metadata, Open Graph, sitemap
בדיקות - unit tests (Vitest) + E2E (Playwright)
פריסה ל-Vercel

דרישות פונקציונליות¶

חלק א - חנות (צד לקוח)¶

דף הבית:
- באנר ראשי (hero section)
- מוצרים מומלצים
- קטגוריות מובילות
- מוצרים חדשים

קטלוג מוצרים:
- תצוגת מוצרים בגריד
- סינון לפי קטגוריה, מחיר, דירוג
- מיון (מחיר, פופולריות, חדשים)
- חיפוש עם autocomplete
- עימוד (pagination) או infinite scroll
- תצוגת רשימה/כרטיסים

דף מוצר:
- תמונות מוצר (גלריה)
- שם, תיאור, מחיר
- בחירת וריאנט (גודל, צבע)
- כמות במלאי
- כפתור "הוסף לעגלה"
- מוצרים קשורים
- ביקורות ודירוגים

עגלת קניות:
- הוספה/הסרה של מוצרים
- עדכון כמויות
- סיכום מחירים (סכום ביניים, משלוח, סה"כ)
- שמירת עגלה (localStorage או מסד נתונים)
- קוד קופון (אופציונלי)

תהליך רכישה (Checkout):
- טופס פרטי משלוח
- בחירת שיטת משלוח
- סיכום הזמנה
- דף אישור הזמנה

אימות משתמשים:
- הרשמה (אימייל + סיסמה)
- התחברות
- התחברות עם Google
- שכחתי סיסמה (אופציונלי)
- פרופיל משתמש
- היסטוריית הזמנות

חלק ב - פאנל ניהול¶

דשבורד:
- סטטיסטיקות: הזמנות היום, הכנסות, מוצרים במלאי
- גרף הזמנות (7 ימים אחרונים)
- הזמנות אחרונות

ניהול מוצרים:
- רשימת מוצרים (טבלה עם חיפוש וסינון)
- הוספת מוצר חדש
- עריכת מוצר
- מחיקת מוצר
- העלאת תמונות
- ניהול קטגוריות

ניהול הזמנות:
- רשימת הזמנות
- עדכון סטטוס הזמנה (ממתין, בטיפול, נשלח, הושלם)
- צפייה בפרטי הזמנה

ניהול משתמשים:
- רשימת משתמשים
- חסימת/שחרור משתמש

דרישות לא-פונקציונליות¶

ביצועים¶

LCP מתחת ל-2.5 שניות
CLS מתחת ל-0.1
ציון Lighthouse Performance מעל 80

נגישות¶

ציון Lighthouse Accessibility מעל 90
ניווט מלא במקלדת
תמיכה בקוראי מסך

SEO¶

Meta tags מלאים בכל דף
Open Graph tags לשיתוף ברשתות חברתיות
Sitemap אוטומטי
Structured data (JSON-LD) למוצרים

אבטחה¶

HttpOnly cookies לאימות
אימות קלט בצד לקוח ושרת
CSRF protection
Rate limiting (אופציונלי)

עיצוב¶

תמיכה ב-Dark Mode
רספונסיביות מלאה
אנימציות חלקות (כיבוד prefers-reduced-motion)

מבנה מסד הנתונים¶

// prisma/schema.prisma

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String    @unique
  emailVerified DateTime?
  image         String?
  password      String?
  role          Role      @default(USER)
  orders        Order[]
  reviews       Review[]
  accounts      Account[]
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
}

enum Role {
  USER
  ADMIN
}

model Product {
  id          String      @id @default(cuid())
  name        String
  slug        String      @unique
  description String
  price       Float
  comparePrice Float?
  images      String[]
  category    Category    @relation(fields: [categoryId], references: [id])
  categoryId  String
  stock       Int         @default(0)
  featured    Boolean     @default(false)
  published   Boolean     @default(true)
  variants    Variant[]
  reviews     Review[]
  orderItems  OrderItem[]
  createdAt   DateTime    @default(now())
  updatedAt   DateTime    @updatedAt
}

model Category {
  id       String    @id @default(cuid())
  name     String
  slug     String    @unique
  image    String?
  products Product[]
}

model Variant {
  id        String  @id @default(cuid())
  name      String  // "גודל", "צבע"
  value     String  // "XL", "כחול"
  product   Product @relation(fields: [productId], references: [id])
  productId String
  stock     Int     @default(0)
  price     Float?  // אם שונה מהמוצר הבסיסי
}

model Order {
  id          String      @id @default(cuid())
  user        User        @relation(fields: [userId], references: [id])
  userId      String
  items       OrderItem[]
  status      OrderStatus @default(PENDING)
  total       Float
  shipping    Float
  address     Json
  createdAt   DateTime    @default(now())
  updatedAt   DateTime    @updatedAt
}

enum OrderStatus {
  PENDING
  PROCESSING
  SHIPPED
  DELIVERED
  CANCELLED
}

model OrderItem {
  id        String  @id @default(cuid())
  order     Order   @relation(fields: [orderId], references: [id])
  orderId   String
  product   Product @relation(fields: [productId], references: [id])
  productId String
  quantity  Int
  price     Float
  variant   String?
}

model Review {
  id        String   @id @default(cuid())
  rating    Int      // 1-5
  comment   String
  user      User     @relation(fields: [userId], references: [id])
  userId    String
  product   Product  @relation(fields: [productId], references: [id])
  productId String
  createdAt DateTime @default(now())
}

model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String?
  access_token      String?
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String?
  session_state     String?
  user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

אבני דרך - Milestones¶

שבוע 1-2: תשתית ואימות¶

הגדרת הפרויקט (Next.js, TS, Mantine, Prisma)
הגדרת כלי פיתוח (ESLint, Prettier, Husky)
מודל מסד נתונים + migrations
Auth.js - הרשמה, התחברות, Google OAuth
Layout בסיסי (Header, Footer, navigation)
Dark mode

שבוע 3-4: קטלוג ומוצרים¶

Seed data - מוצרים וקטגוריות לדוגמה
דף הבית עם מוצרים מומלצים
רשימת מוצרים עם סינון ומיון
דף מוצר בודד
חיפוש עם autocomplete
SEO - metadata, Open Graph

שבוע 5-6: עגלה ורכישה¶

עגלת קניות (Zustand + localStorage)
תהליך רכישה (checkout)
ניהול הזמנות (צד משתמש)
אימייל אישור (אופציונלי)
ביקורות ודירוגים

שבוע 7-8: פאנל ניהול¶

Layout של פאנל ניהול
דשבורד עם סטטיסטיקות
ניהול מוצרים (CRUD)
ניהול הזמנות
ניהול משתמשים

שבוע 9-10: שיפורים ופריסה¶

בדיקות Unit (לפחות 15 בדיקות)
בדיקות E2E (לפחות 5 תרחישים)
אופטימיזציית ביצועים
נגישות
CI/CD pipeline
פריסה ל-Vercel
README מלא

קריטריונים להערכה¶

ציון עובר (60-69)¶

אפליקציה עובדת עם לפחות 70% מהפיצ'רים
אימות משתמשים פועל
קטלוג מוצרים ודף מוצר
עגלת קניות בסיסית
רספונסיביות בסיסית
פריסה ל-Vercel

ציון טוב (70-84)¶

כל מה שבעובר, ועוד:
פאנל ניהול מלא
חיפוש וסינון
Dark mode
SEO בסיסי
בדיקות unit (לפחות 10)
קוד נקי ומאורגן

ציון מעולה (85-100)¶

כל מה שבטוב, ועוד:
ביצועים - Lighthouse מעל 80
נגישות - Lighthouse מעל 90
בדיקות E2E
CI/CD pipeline מלא
אנימציות ו-UX מעולה
תיעוד מלא (README, JSDoc)
טיפול מקיף בשגיאות ומצבי קצה

נקודות בונוס¶

תמיכה רב-לשונית (עברית/אנגלית)
התראות בזמן אמת (WebSocket/SSE)
PWA עם תמיכה אופליין
מערכת קופונים
Wishlist (רשימת מועדפים)
השוואת מוצרים
גרפים ודוחות בפאנל ניהול
ייצוא נתונים ל-CSV/PDF
בדיקות Lighthouse אוטומטיות ב-CI

הנחיות הגשה¶

העלו את הקוד ל-GitHub repository ציבורי
הוסיפו README מפורט עם הוראות התקנה
פרסו את האפליקציה ל-Vercel
הכינו מצגת קצרה (5-10 דקות) שמציגה:
סקירת הפרויקט
הדגמה חיה
אתגרים טכניים ופתרונות
מה הייתם עושים אחרת

בהצלחה!