OCTABOATS: פלטפורמה ברמה ארגונית להזמנת יאכטות וטיולי יוקרה

Premium Full-Stack SPA – הנדסת חוויית הזמנה חלקה להרפתקאות ימיות יוקרתיות עם ניהול תשלומים ברמה ארגונית, ניהול זמינות בזמן אמת, ולוח בקרה מתוחכם לניהול פעולות.

המקרה העסקי

OCTABOATS פותרת את השוק המפוצל של הזמנת יאכטות יוקרה וחוויות, על ידי מתן פלטפורמה מאוחדת ונטולת חיכוך שבה לקוחות יכולים לגלות, להשוות ולהזמין חוויות ימיות מובחרות. הפלטפורמה הופכת את מורכבות ההזמנה לחוויה אינטואיטיבית המותאמת להמרות – תוך יצירת ערך הזמנה ממוצע (AOV) גבוה יותר באמצעות מכירות נוספות (upsells) חכמות, גמישות קידומית ומנגנוני שחזור עגלת קניות אסטרטגיים. המערכת בנויה עבור ביצועים בתת-שנייה, אמינות תשלומים של 99.9%, ויכולת הרחבה חלקה, OCTABOATS מדגימה שיטות הנדסיות ברמת ייצור בכל שכבה ארכיטקטונית.

הצעת ערך ליבה

ביצועים ויכולת הרחבה

ביצוע שאילתות מותאם: טעינה מוקדמת (Eager-loading) של קשרים עם אילוצי שאילתה אסטרטגיים כדי לחסל בעיות N+1 בתהליכי העגלה, התשלום והזמינות
אסטרטגיית מטמון חכמה: מטמון של שעה אחת על מאפייני דף הבית (ערים, מרינות, יאכטות) עם מנגנון ביטול מטמון בעדכונים קריטיים, מה שמפחית את עומס מסד הנתונים בכ-70% בדפים עתירי תעבורה
ארכיטקטורת מסד נתונים: קשרים פולימורפיים למודל הזמנות מאוחד (מטפל גם ביאכטות וגם בטיולים), המאפשר שכבת לוגיקה עסקית יחידה עבור סוגי מוצרים שונים
בדיקת זמינות בזמן אמת: אימות זמינות מאובטח מפני תנאי מרוץ (race-condition) באמצעות טרנזקציות מסד נתונים במהלך התשלום, למניעת הזמנות כפולות ומכירות יתר

מצוינות UX/UI

עיצוב יוקרתי רספונסיבי: ארכיטקטורת React המעדיפה מכשירים ניידים (Mobile-first) עם Tailwind CSS v4, המספקת חוויות מדויקות ברמת הפיקסל בכל גדלי המסכים
תהליכים מותאמי המרות: תשלום רב-שלבי עם חשיפה הדרגתית, שמירת עגלה וקבלת מכירה נוספת בלחיצה אחת
ספריית רכיבים מובחרת: רכיבי Radix UI ללא סגנון (headless) המבטיחים נגישות (WCAG 2.1 AA) מבלי להקריב אלגנטיות עיצובית
טיפול חכם בטפסים: אימות בצד השרת עם Laravel Form Requests, משוב בזמן אמת בצד הלקוח באמצעות בטיחות סוגים (Type safety) של TypeScript
תמיכה במצב כהה (Dark Mode): התמדה של ערכת הנושא עם localStorage, ללא הבהוב של תוכן לא מעוצב

אבטחה ואמינות

אימות מבוצר: Laravel Fortify עם אימות דו-שלבי (2FA/TOTP), ניהול סשנים, וגיבוב סיסמאות מאובטח (bcrypt)
אבטחת תשלומים: אינטגרציית Kashier תואמת PCI עם אימות 3DS, אימות טרנזקציות בצד השרת ואימות חתימת Webhook
שכבת הרשאות: בקרת גישה מפורטת מבוססת מדיניות (לוח בקרה למנהלים בלבד, תצוגות הזמנה ספציפיות למשתמש)
הגנת CSRF ו-XSS: הגנת Middleware מובנית של Laravel על כל הפעולות המשנות מצב
שלמות טרנזקציונלית: טרנזקציות מסד נתונים במהלך עיבוד Webhook מבטיחות שלא ניתן ליצור רשומות הזמנה ללא רשומות תשלום תואמות

ארכיטקטורה טכנית וסטאק

┌─────────────────────────────────────────────────────────────────────┐ │ שכבת לקוח (React 19) │ │ ┌─────────────┬──────────────┬──────────────┬──────────────────┐ │ │ │ דפים │ רכיבים │ Hooks │ שירותים │ │ │ │ (TypeScript)│ (Radix UI) │ (Custom) │ (API Calls) │ │ │ └─────────────┴──────────────┴──────────────┴──────────────────┘ │ │ ↓ פרוטוקול Inertia ↓ │ ├─────────────────────────────────────────────────────────────────────┤ │ שכבת שרת (Laravel 12, PHP 8.2) │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ בקרים (רזים) ← בקשות טופס (אימות) ← מדיניות │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ שירותי לוגיקה עסקית │ │ │ │ • KashierPaymentService (ארקסטורציית תשלומים) │ │ │ │ • KashierWebhookService (עיבוד טרנזקציות) │ │ │ │ • PageServices (צבירת נתונים ספציפיים לתחום) │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ מודלים וקשרים של Eloquent │ │ │ │ • הזמנות פולימורפיות (יאכטה/טיול) │ │ │ │ • ניהול זמינות (אימות בזמן אמת) │ │ │ │ • מערכת עגלה (ריבוי פריטים, מתמשכת) │ │ │ └──────────────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────────────┤ │ שכבת מסד נתונים (MySQL/Postgres) │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ סכימה מנורמלת: משתמשים ← הזמנות ← (יאכטות/טיולים) │ │ │ אינדקסי זמינות, אילוצי מפתח זר, מחיקה מדורגת │ │ │ └──────────────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────────────┤ │ שירותים חיצוניים ותשתית │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ • Kashier Payment Gateway (תומך 3DS) │ │ │ │ • התראות דוא"ל (Laravel Mail) │ │ │ │ • אחסון סשנים (תואם Redis) │ │ │ │ • אחסון קבצים (מקומי/S3) │ │ │ └──────────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────────┘

סטאק Frontend

Framework: React 19 עם TypeScript מחמיר (tsconfig.json: מצב strict מופעל)
SSR/Hydration: Inertia.js v2 עם מאפייני דף מרונדרים בשרת, המבטלים בקשות מפל (waterfall)
עיצוב: Tailwind CSS v4 + תוסף Vite של Tailwind CSS לבנייה אופטימלית
רכיבי UI: Radix UI (ללא סגנון, נגיש) עטוף בספריית רכיבים מותאמת אישית
ניהול טפסים: React Hook Form עם משוב אימות של Laravel בצד השרת
ניתוב: Wayfinder v0 ליצירת נתיבים בטיחותיים לסוגים מנתיבי Laravel
בטיחות סוגים: כיסוי TypeScript מלא עם בדיקות null מחמירות, איגודים מובחנים לתשובות API
כלי בנייה: Vite עם תוסף קומפיילר React ל-JSX מותאם, ניעור עצים (tree-shaking) חכם

סטאק Backend

Framework: Laravel 12 עם מבנה קבצים יעיל
ORM: Eloquent עם טעינה מוקדמת, קשרים פולימורפיים ואופטימיזציית שאילתות
אימות: Laravel Fortify (backend אימות ללא ראש) עם תמיכה ב-2FA/TOTP דרך טרייט TwoFactorAuthenticatable
שכבת API: נקודות קצה RESTful לפי מוסכמות JSON:API, מחזירות Laravel API Resources לעיצוב תגובה עקבי
אימות: מחלקות Form Request לחוקי אימות הצהרתיים וניתנים לשימוש חוזר
הרשאות: בקרת גישה מבוססת מדיניות עם Laravel Gates ו-Policies
מטמון: Laravel cache facade עם TTL ברירת מחדל של שעה עבור צבירות דף הבית
עבודות רקע: מערכת תורים (מוגדרת כ-sync בפיתוח, database/Redis בייצור)
בדיקות: Pest 4 עם טרייט RefreshDatabase לביצוע בדיקות מבודדות

צלילות טכניות מעמיקות

1. ארכיטקטורת הזמנות פולימורפית: מודל אחד, סוגי מוצרים מרובים

האתגר: יאכטות וטיולים מייצגים סוגי מוצרים שונים מהותית עם מודלים של תמחור, אילוצי זמינות וחוקים עסקיים שונים. גישה תמימה הייתה דורשת טבלאות הזמנות נפרדות ולוגיקה כפולה. OCTABOATS מאחדת אותם באלגנטיות באמצעות הקשרים הפולימורפיים של Eloquent.

למה זה משנה:

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

2. ארכיטקטורת תשלומים ב-Webhook: בניית עיבוד טרנזקציות איתן

האתגר: שערי תשלומים (Kashier) הם מטבעם לא אמינים – Webhooks יכולים להגיע שלא לפי הסדר, להיות כפולים, או לא להגיע לעולם. ללא עיבוד אידמפוטנטי וטרנזקציות אטומיות, משתמשים עלולים להגיע עם הזמנות מרובות עבור תשלום אחד או להיפך.

למה זה משנה:

סמנטיקה של "בדיוק פעם אחת" באמצעות merchantOrderId כמפתח אידמפוטנטי; Webhooks שנשלחו מחדש מתעלמים מהם בבטחה
טרנזקציות מסד נתונים מבטיחות שרשומות הזמנה ותשלום נוצרות יחד באופן אטומי
מחיקה מדורגת של פריטי עגלה רק לאחר אישור תשלום, מניעת הזמנות אבודות
חוסן Webhook: תשלומים שנכשלו אינם חוסמים ניסיונות עתידיים; לוגיקת ניסיון חוזר מובנית בקונפיגורציית Kashier

תוצאה: אפס תשלומים אבודים, מצב צפוי, נתיב ביקורת דרך שדה JSON response_data.

3. אימות זמינות בזמן אמת: מניעת הזמנות כפולות

האתגר: שני לקוחות הצופים באותה יאכטה באותו תאריך לוחצים "הזמן כעת" בו-זמנית. ללא נעילה פסימית או אימות חכם, שתי ההזמנות יצליחו, מה שיגרום למכירת יתר.

למה זה משנה:

אימות בטוח מתנאי מרוץ מתרחש בתוך אותו מחזור בקשת HTTP, מה שממזער את חלונות המרוץ (TOCTOU)
משוב משתמש הוא מיידי וספציפי ("נשארו רק 2 מקומות"), מה שמניע המרות
אידמפוטנטיות של Webhook אומרת שאם עיבוד התשלום מנסה שוב, יצירת ההזמנה בטוחה
נתיב ביקורת דרך טבלת yacht_availabilities מציג היסטוריית הזמנות

תוצאה: אפס מכירות יתר, זמינות שקופה, הזמנות בטוחות.

4. מנוע תמחור ועגלה מורכב: פריטים מרובים, מטבעות מרובים, לוגיקה קידומית

האתגר: התשלום חייב לחשב מחיר סופי תוך התחשבות ב:

פריטי עגלה מרובים (יאכטות + טיולים מעורבים)
ספירת כרטיסים למבוגר/ילד לכל פריט
וריאציות תמחור יומיות (זמינות יאכטות)
הנחות קוד קידום מכירות (שטוח או אחוז)
מכירות נוספות (משקאות, השכרת ציוד) עם תמחור לכל מרינה
מיסי מרינה (מבוססי אחוזים)

הפתרון ההנדסי:

למה זה משנה:

לוגיקת תמחור ניתנת להרכבה אינה דורשת קוד חדש עבור סוגי הנחות חדשים
דפוס תמונת מצב (שנלכד בהזמנה) מבטיח דיוק היסטורי; שינויי מחיר לאחר התשלום אינם משפיעים על אישורים
חישובים בטוחים לסוגים דרך ה-cast ה-decimal של Laravel מונעים שגיאות נקודה צפה
מראה Front-end (רכיבי React) משתמש בלוגיקת חישוב זהה לתצוגה מקדימה של התשלום (WYSIWYG)

5. אופטימיזציית Frontend: Inertia + React עבור SPAs עם מצב

האתגר: אפליקציות מרונדרות בשרת מסורתיות דורשות טעינה מחדש של דף מלא; SPAs מנפחים חבילות JavaScript. Inertia מגשרת על הפער הזה: השרת מרנדר דפים כרכיבי React, עם Hydration של מאפיינים, ומבטל את מורכבות סנכרון המצב.

למה זה משנה:

בטיחות סוגים מעבר לגבול ה-HTTP באמצעות Wayfinder; פרמטרים/תשובות של נתיבים נוצרים אוטומטית מנתיבי Laravel
שיפור הדרגתי באמצעות מאפיינים דחויים; ממשקי שלד (skeleton) נטענים מיד בזמן שרשימות כבדות נטענות באופן אסינכרוני
עדכונים ריאקטיביים ללא טעינה מחדש של דף; שינויים בעגלה מפעילים עדכוני UI מיידיים
אפס ניפוח JavaScript עבור אינטראקטיביות של דפים; רק רכיבי UI קריטיים עוברים Hydration

תכונות ויכולות

תכונות מול לקוחות

עיון וחיפוש: סינון יאכטות וטיולים לפי עיר, מרינה, קיבולת, טווח מחירים
עגלה חכמה: הוספת פריטים מרובים, שמירה לאחר כך, עריכת כמויות/תאריכים בזמן אמת
תשלום בלחיצה אחת: תהליך תשלום מיועל עם Kashier 3DS
הזמנה כפולה: הזמנת יאכטות (לפי שעה/יום) או טיולים אצורים (תמחור מבוגר/ילד)
מנוע מבצעים: החלת קודי קופון, חישוב הנחות אוטומטי
מכירות נוספות: שירותים נלווים (משקאות, ציוד) בקופה
צ'אטבוט: תמיכת לקוחות מונעת בינה מלאכותית עם מנגנון גיבוי לטופס יצירת קשר
דפי תוכן: תצוגת גלריה, שאלות נפוצות, אודות/צור קשר

לוח בקרה למנהלים

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

תכונות טכניות

אימות 2FA: אימות דו-שלבי מבוסס TOTP
גישה מבוססת תפקידים: מדיניות מנהלים אוכפת גבולות הרשאות
עיצוב רספונסיבי: Mobile-first, עובד על כל המכשירים
מצב כהה: התמדת ערכת נושא, זיהוי העדפות מערכת אוטומטי
נגישות: תאימות ל-WCAG 2.1 AA דרך רכיבי Radix UI
מוכן ל-SSR: יכולת רינדור בצד השרת עבור SEO וטעינות ראשוניות מהירות יותר

מבנה פרויקט

octaboats/
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── Admin/              # בקרי לוח בקרה למנהלים
│   │   │   ├── Api/                # נקודות קצה API
│   │   │   └── *.php               # בקרי דפים ציבוריים
│   │   ├── Requests/               # אימות בקשות טופס
│   │   ├── Resources/              # מעצבי תגובת JSON
│   │   ├── Middleware/             # HTTP middleware
│   │   └── Policies/               # מדיניות הרשאות
│   ├── Models/                     # מודלים של Eloquent
│   ├── Services/                   # לוגיקה עסקית (תשלום, Webhook, צבירת דפים)
│   └── Actions/                    # מחלקות פעולה בודדת (Fortify auth)
├── resources/
│   ├── js/
│   │   ├── pages/                  # רכיבי דפי React
│   │   │   ├── admin/              # דפי לוח בקרה למנהלים
│   │   │   ├── auth/               # התחברות, הרשמה, איפוס סיסמה
│   │   │   └── *.tsx               # דפים ציבוריים
│   │   ├── components/             # רכיבי React לשימוש חוזר
│   │   ├── hooks/                  # React hooks מותאמים אישית
│   │   ├── services/               # לקוחות API בצד לקוח
│   │   ├── types/                  # ממשקי TypeScript
│   │   ├── layouts/                # עטיפות פריסה (Layout wrappers)
│   │   └── app.tsx                 # הגדרות Inertia
│   ├── css/
│   │   └── app.css                 # הנחיות Tailwind
│   └── views/                      # תבניות דוא"ל (Blade)
├── routes/
│   ├── web.php                     # נתיבים ציבוריים/אורחים
│   ├── api.php                     # נקודות קצה API
│   ├── admin.php                   # נתיבי לוח בקרה למנהלים (דורש אימות + מדיניות מנהל)
│   ├── settings.php                # נתיבי הגדרות משתמש
│   └── console.php                 # פקודות Artisan
├── database/
│   ├── migrations/                 # מיגרציות סכימה
│   ├── factories/                  # מפעלי מודל לבדיקות
│   └── seeders/                    # זורעי מסד נתונים
├── config/                         # קונפיגורציית יישום
├── bootstrap/
│   ├── app.php                     # הגדרות יישום (middleware, ניתוב)
│   └── providers.php               # רישום ספקי שירות
├── tests/                          # בדיקות Pest
├── storage/                        # העלאות, לוגים, מטמון
├── vite.config.ts                  # קונפיגורציית בניית Frontend
├── composer.json                   # תלויות PHP
├── package.json                    # תלויות Node
└── README.md                       # קובץ זה

שיקולי אבטחה

HTTPS נאכף: כל האינטגרציות החיצוניות דורשות חיבורים מאובטחים
הגנת CSRF: אימות אסימון בכל בקשות POST/PUT/PATCH/DELETE
מניעת הזרקת SQL: שאילתות מפורמטות (Parameterized) דרך Eloquent ORM
מניעת XSS: React מנקה אוטומטית תוכן דינמי; ללא dangerouslySetInnerHTML
אימות: תמיכת 2FA מבוצרת למשתמשי מנהל
אבטחת תשלומים: מופעל 3DS, תאימות PCI דרך Kashier
נתונים רגישים: גיבוב סיסמאות (bcrypt), סודות ב-.env, שדות two_factor_* מוסתרים בתשובות API
חשוב: לעולם אל תשלח לקובצי Git את .env או *.key; השתמש ב-.env.example כתבנית

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

| שכבה | טכנולוגיה | גרסה | מטרה | |-------|-----------|---------|---------| | PHP | Laravel Framework | 12.0 | Framework Backend | | PHP | Laravel Fortify | 1.30 | אימות ללא ראש | | PHP | Laravel Inertia | 2.0 | מאפייני צד שרת ל-React | | PHP | Laravel Wayfinder | 0.1.9 | יצירת נתיבים בטיחותיים לסוגים | | PHP | Pest | 4.4 | Framework בדיקות | | Frontend | React | 19.2 | רינדור UI | | Frontend | TypeScript | האחרונה | בטיחות סוגים | | Frontend | Tailwind CSS | 4.0 | עיצוב Utility-first | | Frontend | Radix UI | האחרונה | רכיבים ללא סגנון (Headless) | | Frontend | Inertia.js | 2.3.7 | מתאם צד לקוח | | Build | Vite | האחרונה | כלי בנייה מהיר | | Payments | Kashier | Live API | שער תשלומים |

תובנות מפתח ושיטות עבודה מומלצות שהודגמו

פרויקט זה מדגים הנדסה ברמת ייצור באמצעות:

ניקיון ארכיטקטוני: קשרים פולימורפיים מחסלים שכפול קוד; בקרים רזים מאצילים לשירותים; מדיניות אוכפת הרשאות ברמת המודל
שלמות טרנזקציונלית: טרנזקציות מסד נתונים מבטיחות אטומיות של הזמנה+תשלום; אידמפוטנטיות של Webhook מונעת עיבוד כפול
בטיחות סוגים: כיסוי TypeScript מלא מונע שגיאות זמן ריצה; בקשות טופס של Laravel מאמתות בצד השרת; API Resources מעצבים תשובות בעקביות
אופטימיזציית ביצועים: טעינה מוקדמת מחסלת שאילתות N+1; מטמון חכם מפחית לחץ על מסד הנתונים; בניית Vite שולחת רק JavaScript הכרחי
חווית משתמש: Inertia + React מספקים היענות של SPA ללא ניפוח JavaScript; Tailwind CSS מאפשר איטרציה מהירה ועקבית של UI
יכולת בדיקה: התחביר המפורש של Pest מבהיר את כוונות הבדיקה; טרייט RefreshDatabase מבודד בדיקות; מפעלים מספקים פיקסטורות מציאותיות
אבטחה: Fortify מטפל במקרי קצה של אימות; מדיניות מרכזת הרשאות; עיבוד Webhook תשלום הוא אידמפוטנטי וטרנזקציונלי
חווית מפתח: Wayfinder יוצר אוטומטית נתיבים בטיחותיים לסוגים; ESLint + Prettier אוכפים סגנון קוד; שירותים מודולריים מעודדים קומפוזיציה