Skip to content

NEW_PROJECT_BRIEFING.md

Latest commit

 

History

History
289 lines (219 loc) · 9.53 KB

NEW_PROJECT_BRIEFING.md

File metadata and controls

289 lines (219 loc) · 9.53 KB

🚀 NEW PROJECT BRIEFING - קובץ הסברים לשיחה חדשה

📋 מה זה הקובץ הזה?

קובץ זה נועד לתת לך הקשר מלא כשאתה נכנס לשיחה חדשה לבניית אתר ללקוח.

אתה קולד (Claude) נכנס לשיחה חדשה ואתה צריך להבין:

  1. מה המערכת שלנו
  2. איך אתה צריך לעבוד
  3. איזה שאלות לשאול
  4. איך להתחיל לעבוד

🎯 המערכת שלנו - MASTER COMPONENTS

הרעיון:

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

המקורות:

🧩 הקומפוננטים הזמינים

Headers:

  • modern-rtl - הדר מודרני עם תמיכה ב-RTL ✅

Heroes:

  • gradient-animated - Hero עם רקע גרדיאנט מונפש ✅

Features:

  • services-cards - כרטיסי שירותים עם אייקונים ✅
  • projects-grid - גריד פרויקטים עם תמונות ✅
  • testimonials-cards - כרטיסי המלצות עם דירוגים ✅
  • faq-accordion - שאלות נפוצות באקורדיון ✅

Forms:

  • contact-advanced - טופס יצירת קשר מתקדם ✅

Systems:

  • admin-panel - מערכת ניהול מלאה ✅

🔥 איך אתה צריך לעבוד

שלב 1: קבלת המידע מהמשתמש

המשתמש יגיד לך משהו כמו:

"היי Claude! אני רוצה לבנות אתר חדש.
Master: https://github.com/nioasoft/CODE7
Project: https://github.com/username/client-site
Type: מספרה
Colors: ורוד וזהב"

שלב 2: השאלות שאתה צריך לשאול

🎨 עיצוב ומיתוג:

  • "איזה צבעים עיקריים תרצה? (קודי hex אם יש)"
  • "איזה סגנון? (מודרני/קלאסי/מינימליסטי)"
  • "יש לוגו קיים או נצטרך placeholder?"
  • "איזה פונט מעדיף? (Heebo/Rubik/אחר)"

📄 תוכן ומבנה:

  • "איזה עמודים צריך? (ראשי/אודות/שירותים/צור קשר/אחר)"
  • "מה השירותים העיקריים של העסק?"
  • "יש המלצות קיימות או נכין דמו?"
  • "יש שאלות נפוצות או נכין בסיסיות?"

⚡ פונקציונליות:

  • "צריך מערכת הזמנת תורים?"
  • "צריך גלריית עבודות?"
  • "צריך פאנל ניהול למנהל?"
  • "צריך אינטגרציה מיוחדת? (WhatsApp/תשלומים/אחר)"

🌐 טכני:

  • "איזה שם דומיין?"
  • "האם יש לו דומיין או נרכוש עבורו?"
  • "יש העדפה לעיצוב/צבעים מסוימים?"

שלב 3: הגדרת מסד נתונים

חשוב! לכל פרויקט חדש צריך להגדיר מסד נתונים נפרד:

  1. צור פרויקט חדש ב-Supabase:

    • לך ל-supabase.com
    • לחץ "Create new project"
    • שם פרויקט: client-[שם-הלקוח] (למשל: client-barbershop)
    • סיסמה חזקה
    • שמור את פרטי החיבור!

  2. הגדר את הטבלאות:

    -- הרץ את הקוד הזה ב-SQL Editor של Supabase:

CREATE TABLE IF NOT EXISTS sites (
    id SERIAL PRIMARY KEY,
    domain VARCHAR(255) UNIQUE NOT NULL,
    data JSONB NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

ALTER TABLE sites ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Allow all operations" ON sites
    FOR ALL TO authenticated, anon
    USING (true) WITH CHECK (true);

  3. עדכן פרטי חיבור בפרויקט:

    • צור קובץ .env עם פרטי Supabase החדשים
    • עדכן את lib/supabase.js עם הפרטים

שלב 4: בחירת קומפוננטים

לפי התשובות, תחליט איזה קומפוננטים להשתמש:

לכל אתר בסיסי:

  • modern-rtl (Header)
  • gradient-animated (Hero)
  • contact-advanced (Form)

לפי סוג עסק:

  • שירותים מקצועיים: + services-cards + testimonials-cards + faq-accordion
  • פורטפוליו: + projects-grid + testimonials-cards
  • עסק מקומי: + services-cards + faq-accordion

שלב 5: התחלת העבודה

  1. קרא מהmaster repository את הקומפוננטים שבחרת
  2. צור את המבנה הבסיסי בפרויקט החדש
  3. הגדר Supabase חדש ללקוח (חובה!)
  4. התאם צבעים, טקסטים, תמונות
  5. הוסף תוכן ספציפי ללקוח
  6. טען נתונים ראשוניים למסד הנתונים
  7. פרוס ל-DigitalOcean עם הקונפיגורציה הנכונה
  8. בדוק שהכל עובד במובייל

💡 טיפים חשובים

התאמת צבעים:

:root {
    --color-primary: #E91E63; /* הצבע הראשי של הלקוח */
    --color-secondary: #FFD700; /* הצבע המשני */
    --color-text: #1D1D1F;
    --color-bg: #FFFFFF;
}

התאמת טקסטים:

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

המלצות ושאלות נפוצות:

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

🚨 דברים שאסור לשכוח

קבצים שחובה ליצור:

  • index.html - הדף הראשי
  • styles.css - העיצוב המותאם
  • script.js - הפונקציונליות
  • README.md - הוראות ללקוח

הגדרות שחובה להתאים:

  • <title> - שם העסק
  • <meta description> - תיאור העסק
  • פרטי יצירת קשר בכל מקום
  • לוגו/שם עסק בheader

בדיקות שחובה לעשות:

  • מובייל responsive ✅
  • כל הקישורים עובדים ✅
  • טופס יצירת קשר עובד ✅
  • צבעים עקביים בכל המקום ✅
  • טקסט בעברית נכון ✅

📞 אם אתה לא בטוח...

תמיד תשאל! עדיף לשאול 3 שאלות נוספות מאשר לבנות משהו שלא מתאים.

שאלות טובות לשאול:

  • "האם זה נראה בכיוון הנכון?"
  • "איזה תוכן תעדיף כאן?"
  • "האם הצבעים האלה עובדים בשבילך?"
  • "צריך להוסיף עוד משהו?"

🎯 המטרה הסופית

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

זכור: המערכת הזאת נועדה לחסוך זמן ולהבטיח איכות. השתמש בחכמה בקומפוננטים שיש לך!

🗄️ הגדרת מסד נתונים ללקוח חדש

למה כל לקוח צריך Supabase נפרד?

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

תהליך הגדרה מהיר:

1. צור פרויקט חדש:

supabase.com/dashboard → Create new project
├── Project name: client-[שם-לקוח]
├── Database password: [סיסמה חזקה]
└── Region: West Europe (קרוב לישראל)

החשוב: כל אתר יתארח ב-DigitalOcean עם Supabase נפרד למסד נתונים

2. הגדר טבלאות: העתק את הקוד מ-scripts/setup-supabase.sql לSQL Editor

3. עדכן קונפיגורציה:

// lib/supabase.js
const supabaseUrl = 'https://[project-id].supabase.co';
const supabaseKey = '[anon-key]';

4. טען נתונים ראשוניים: הרץ node scripts/simple-migrate.js עם הדומיין החדש

סקריפט מעבר מהיר ללקוח חדש:

// scripts/setup-new-client.js
const clientDomain = 'client-name.com';
const defaultData = {
    hero: { headline: '...', subtitle: '...' },
    services: [],
    projects: [],
    // ... מבנה בסיסי
};

await db.updateSiteData(defaultData, clientDomain);

🔄 העדכון החשוב - מסד נתונים משותף למסד נפרד

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

יתרונות העדכון:

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

ארכיטקטורה מומלצת:

אתר הלקוח (DigitalOcean Droplet)
├── Frontend: HTML/CSS/JS + קומפוננטים
├── Backend: Node.js + Express  
├── Database: Supabase (נפרד לכל לקוח)
├── Images: Cloudinary
└── Domain: דומיין הלקוח

גרסה: 2.0
עדכון אחרון: יוני 2025
סטטוס: מוכן לשימוש עם Supabase 🚀