ככה קלוד בנה לי וואטסאפ

# אפיון: וואטסאפ משלי עם קלוד

## מטרה וכללי הניסוי

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

- הערכה מראש: לפני שהוא כותב שורה, קלוד אומר כמה זמן זה ייקח לדעתו.
- זמן: מהפקודה הראשונה ועד שכל בדיקות הקבלה עוברות, כולל סבבי תיקונים.
- עלות: לפי /cost בסוף הסשן.
- סבבי תיקונים: כל פעם שמחזירים לו באג או משהו שלא עובד.
- מודל: Opus 5.5 לאורך כל הסשן, בלי להחליף באמצע.
- בלי שאלות ובלי תוספות: קלוד לא שואל ולא מוסיף פיצ'רים שלא כתובים כאן. מה שלא כתוב לא נבנה.

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

הכול קבוע מראש, וקלוד לא בוחר טכנולוגיות בעצמו.

| שכבה | טכנולוגיה |
| --- | --- |
| צד לקוח | React 18 + Vite + TypeScript, React Router, Tailwind CSS |
| צד שרת | Node.js + TypeScript + Express |
| זמן אמת | Socket.IO (צד שרת וצד לקוח) |
| מסד נתונים | MySQL 8 עם Prisma ORM, דרך docker-compose |
| התחברות | JWT בעוגיית httpOnly, סיסמאות ב-bcrypt |
| קבצים | שמירה מקומית בתיקיית uploads בשרת, בלי שירות ענן |
| בדיקות | Vitest לשרת, Playwright לבדיקות קצה לקצה עם שני דפדפנים במקביל |
| מבנה | תיקיית client ותיקיית server באותו ריפו, פקודה אחת שמרימה הכול |

הממשק בעברית מימין לשמאל (RTL), ומותאם למובייל ולדסקטופ. עיצוב מקורי שלא מעתיק את הלוגו, השם או הצבע הירוק של וואטסאפ.

## פיצ'רים בפנים

כל מה שמשתמש רואה ועושה בצ'אט יומיומי בוואטסאפ, חוץ משיחות וסטטוסים.

### וי כחול

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

### אונליין ונראה לאחרונה

- בראש הצ'אט מופיע "מחובר/ת" כשלמשתמש יש לפחות לשונית פתוחה אחת.
- כשהוא מתנתק, מופיע "נראה/תה לאחרונה היום ב-14:32".
- המצב מתעדכן בזמן אמת אצל מי שמסתכל.

### מקליד...

- "מקליד/ה..." בראש הצ'אט ובשורה של הצ'אט ברשימה.
- בקבוצה: "דנה מקלידה...", או "2 מקלידים..." כשיותר מאחד.
- נעלם אחרי 3 שניות בלי הקלדה, או כשההודעה נשלחת.
- "מקליט/ה הודעה קולית..." בזמן הקלטה.

### פרטיות

- אפשר להסתיר את ה"נראה לאחרונה" ואת הווי הכחול. כמו בוואטסאפ, מי שמסתיר גם לא רואה אותם אצל אחרים.

### חשבון ואנשי קשר

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

### רשימת הצ'אטים

- ממוינת לפי ההודעה האחרונה, עם תצוגה מקדימה, שעה ווי על ההודעה שלי.
- מונה הודעות שלא נקראו, בעיגול ירוק.
- נעיצה של עד 3 צ'אטים למעלה, והשתקת צ'אט.
- חיפוש בצ'אטים לפי שם או תוכן הודעה.

### מסך הצ'אט

- בועות שלי מצד אחד ושל הצד השני מצד שני, עם שעה ווי.
- מפרידי תאריך ("היום", "אתמול", תאריך).
- טעינת היסטוריה בגלילה למעלה, 50 הודעות בכל פעם.
- כפתור "למטה" עם מספר ההודעות החדשות כשלא נמצאים בתחתית.
- בורר אימוג'ים, שליחה ב-Enter, שורה חדשה ב-Shift+Enter.

### פעולות על הודעה

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

### קבוצות

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

### תמונות והודעות קוליות

- תמונה עם כיתוב אופציונלי: תמונה מקטנת בצ'אט, ולחיצה פותחת מסך מלא. עד 10MB.
- הודעה קולית: הקלטה בדפדפן בלחיצה על המיקרופון, ביטול לפני שליחה, נגן עם פס התקדמות, משך ומהירות x1/x1.5/x2.
- הווי על הודעה קולית נהיה כחול רק אחרי שהנמען שמע אותה, כמו בוואטסאפ.

### התראות וחיבור

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

## מה נשאר בחוץ ולמה

| פיצ'ר | למה בחוץ |
| --- | --- |
| שיחות קול ווידאו | WebRTC ושרת TURN, הכי מורכב והכי שביר בדמו |
| הצפנה מקצה לקצה | פרוטוקול שלם (כמו Signal), לא משהו שמוסיפים בסשן אחד |
| אימות טלפון ב-SMS | צריך ספק SMS בתשלום |
| אפליקציה נייטיבית לנייד | מספיקה אפליקציית ווב שמותאמת למובייל |
| התראות כשהאתר סגור (Web Push) | דורש Service Worker ומפתחות VAPID |
| סטטוסים וערוצים | מוצר נפרד בתוך המוצר |
| חיבור מכשיר נוסף ב-QR | כאן פשוט מתחברים עם סיסמה מכל מכשיר |
| קבצים, וידאו ומיקום | עוד סוגי מדיה |
| העברה, כוכבית, ארכיון | נחמד, לא הכרחי |
| קהילות, ערוצי שידור, סקרים, מדבקות והודעות נעלמות | עוד שכבה של פיצ'רים, אפשר להוסיף אחר כך |
| גיבויים ועומס של מיליוני משתמשים | תשתית, לא פיצ'ר |

## נתוני דמו, בדיקות וקבלה

המערכת נחשבת גמורה רק כשכל בדיקות הקבלה עוברות בשני דפדפנים זה ליד זה.

נתוני דמו (seed): 4 משתמשים עם שמות ותמונות, קבוצה אחת של כולם, וכמה שיחות עם היסטוריה, כדי שהמסך לא יהיה ריק. פרטי ההתחברות ב-README.

בדיקות קבלה (Playwright, שני משתמשים בשני דפדפנים):

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

סיום: פקודה אחת מרימה את מסד הנתונים, השרת והלקוח, ו-README קצר עם הוראות הרצה.

תקרא את SPEC.md. אתה בונה את המערכת הזו מאפס.

1. לפני שאתה כותב קוד, תגיד לי במספר אחד כמה דקות לדעתך זה ייקח עד שכל בדיקות הקבלה יעברו.
2. אחר כך תכתוב תוכנית עבודה קצרה ותחכה לאישור שלי.
3. אחרי האישור, תבנה את כל מה שכתוב ב"פיצ'רים בפנים", בטכנולוגיות שכתובות בלבד.
4. תכתוב ותריץ את כל בדיקות הקבלה, ותתקן עד שהן עוברות.

אל תשאל שאלות ואל תוסיף שום דבר שלא כתוב באפיון. בסוף תכתוב לי איך מריצים את המערכת ומה נשאר פתוח, אם יש.

שלושה תיקונים, בלי להוסיף פיצ'רים ובלי לשנות לוגיקה:

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

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

3. אבטחה: אם JWT_SECRET לא מוגדר והשרת לא רץ במצב פיתוח, השרת לא עולה ומדפיס שגיאה ברורה. תוסיף הגבלה של 5 ניסיונות התחברות שגויים בדקה לכל מספר טלפון ולכל IP, והודעה בעברית כשחוסמים.

אחרי זה תריץ את כל הבדיקות, Vitest ו-Playwright, ותוודא שהכול ירוק.