פרויקט מעשי ראשון: בונים אתר מאפס

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

באתר יהיו:

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

הכלים שנשתמש בהם

לא צריך להכיר אותם לעומק. Claude מכיר אותם מצוין, ואתם צריכים רק לדעת מה כל אחד עושה:

שלב 0: מתקינים Node.js

בדקו קודם אם הוא כבר מותקן:

node -v
npm -v

אם מופיעים שני מספרי גרסה, למשל v22.11.0 ו-10.9.0, אפשר לדלג לשלב 1. אם מופיעה שגיאה כמו "not recognized" או "command not found", התקינו:

winget install OpenJS.NodeJS.LTS

winget install OpenJS.NodeJS.LTS

brew install node

אחרי ההתקנה סגרו ופתחו את הטרמינל מחדש, והריצו שוב node -v כדי לוודא.

שלב 1: מקימים את הפרויקט

1.1 יוצרים תיקייה ופותחים אותה ב-Cursor

את כל הפרויקט נבנה בתוך Cursor, בדיוק כמו בפרק 5: Claude עובד בטרמינל, ואתם רואים כל קובץ נוצר ומשתנה.

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

cd ~\Desktop
mkdir grandma-recipes

cd %USERPROFILE%\Desktop
mkdir grandma-recipes

cd ~/Desktop
mkdir grandma-recipes

פותחים אותה ב-Cursor ומסדרים את סביבת העבודה:

1. ב-Cursor: File → Open Folder... ובחרו את grandma-recipes.
2. הפעילו שמירה אוטומטית: File → Auto Save. בפרויקט שבו גם אתם וגם Claude עורכים קבצים, זה חוסך התנגשויות (פרק 5).
3. פתחו טרמינל בצד: לוח הפקודות (Ctrl + Shift + P, ב-Mac: Cmd + Shift + P) ← Terminal in Editor Area.
4. בטרמינל שבצד הפעילו את Claude:

claude

1.2 מבקשים מ-Claude להקים את Next.js

Claude יבקש לאשר פקודה שמתחילה ב-npx create-next-app. זו התוכנה הרשמית של Next.js להקמת פרויקטים, אז אפשר לאשר. ההתקנה לוקחת דקה או שתיים, ותראו בטרמינל משהו כזה:

● Bash(npx create-next-app@latest . --typescript --tailwind --app --use-npm --yes)
  ⎿  Creating a new Next.js app in C:\Users\you\Desktop\grandma-recipes.
     Installing dependencies:
     - next
     - react
     - react-dom
     ...
     Success! Created grandma-recipes

הסתכלו על עץ הקבצים של Cursor בזמן ההתקנה: התיקייה הריקה מתמלאת בקבצים ובתיקיות כמו app, public ו-package.json. כשClaude מסביר מה כל תיקייה עושה, לחצו עליה בעץ ותראו בעצמכם מה יש בה.

1.3 מריצים בפעם הראשונה

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

שרת הפיתוח רץ ברציפות עד שעוצרים אותו, ולכן הוא צריך טרמינל משלו, נפרד מזה של Claude. ב-Cursor, פתחו את הטרמינל התחתון עם Ctrl + ` (או View → Terminal). הוא כבר נמצא בתיקיית הפרויקט, אז אין צורך ב-cd. הריצו:

npm run dev

   ▲ Next.js 15.5.4 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://192.168.1.12:3000
 
 ✓ Starting...
 ✓ Ready in 1820ms

פתחו בדפדפן את הכתובת http://localhost:3000. אפשר גם להחזיק Ctrl (ב-Mac: Cmd) וללחוץ על הכתובת בטרמינל. תראו את דף ברירת המחדל של Next.js. זה עדיין לא האתר שלנו, אבל זה סימן שהכול עובד.

מעכשיו, ככה נראית סביבת העבודה לאורך כל הפרויקט:

1.4 יוצרים CLAUDE.md

עכשיו, כשיש פרויקט, ניצור לו קובץ כללים. בטרמינל של Claude הריצו:

/init

Claude יסרוק את הפרויקט וייצור CLAUDE.md עם הפקודות והמבנה שהוא מצא. עכשיו נוסיף את הכללים שלנו:

עכשיו הידיים שלכם: לחצו על CLAUDE.md בעץ הקבצים של Cursor ותקראו אותו. הוא צריך להיות קצר וברור. חסר משהו שחשוב לכם? הוסיפו שורה בעצמכם, ישירות בעורך. למשל:

- שמות המתכונים כתובים כמו שסבתא קוראת להם, גם אם זה לא השם הרשמי.

עם Auto Save השינוי נשמר מיד, ו-Claude יקרא אותו בתחילת כל שיחה חדשה.

שלב 2: בונים מבנה, עיצוב ורכיבים, צעד אחר צעד

זוכרים את כלל הפירוק מפרק 4? לא מבקשים את כל האתר בבת אחת. בונים שכבה אחרי שכבה, ובודקים כל אחת בדפדפן.

2.1 מתכננים לפני שבונים

נעבור למצב תכנון, כדי ש-Claude יציע מבנה לפני שהוא כותב קוד:

Claude יציג תוכנית שנראית בערך כך:

lib/recipes.ts                  נתוני המתכונים (6 מתכונים לדוגמה)
app/layout.tsx                  מסגרת האתר: עברית, RTL, גופן, כותרת ותחתית
app/page.tsx                    דף הבית: רשת של כרטיסי מתכונים
app/recipes/[slug]/page.tsx     דף מתכון בודד
components/RecipeCard.tsx       כרטיס מתכון: אימוג'י, שם, זמן הכנה, קטגוריה
components/SiteHeader.tsx       כותרת האתר וניווט

קראו את התוכנית. משהו חסר או מיותר? אמרו לו. כשהיא נראית טובה, אשרו, ו-Claude יעבור לביצוע. תוך כדי, הסתכלו על עץ הקבצים: הקבצים מהתוכנית יופיעו בו אחד אחרי השני.

2.2 קובץ הנתונים

אם Claude לא התחיל מהנתונים בעצמו, בקשו:

הידיים שלכם: פתחו את lib/recipes.ts בעורך. גם בלי לדעת TypeScript, תזהו מהר את המבנה: שם, קטגוריה, מצרכים. בחרו מתכון אחד ושנו בעצמכם את השם שלו לשם של מתכון אמיתי מהמשפחה, למשל:

title: "עוגת הגבינה של סבתא רחל",

שמרו (או תנו ל-Auto Save לעשות את זה), ובבקשה הבאה ל-Claude ספרו לו על השינוי:

2.3 המסגרת: עברית, RTL וגופן

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

2.4 דף הבית וכרטיסי המתכונים

2.5 דף המתכון

שגרת הבדיקה אחרי כל שכבה

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

1. Source Control (Ctrl + Shift + G, ב-Mac: Cmd + Shift + G): אילו קבצים השתנו? רק אלה שציפיתם? לחצו על קובץ כדי לראות השוואה צד-לצד של מה שהשתנה.
2. הדפדפן: רעננו, לחצו על כרטיסים, והקטינו את חלון הדפדפן כדי לראות איך זה ייראה בטלפון.
3. שמירה: אם הכול טוב, "תשמור את המצב הנוכחי ב-git". רשימת הקבצים ב-Source Control תתרוקן, ותתחיל להתמלא שוב רק מהשינוי הבא.

שלב 3: משפרים לפי משוב ומוסיפים אינטראקציה

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

3.1 אוספים משוב

הראו את האתר למישהו מהמשפחה. אפשר פשוט על המחשב שלכם, או על הטלפון שלהם אם הם מחוברים לאותה רשת Wi-Fi: מקלידים בטלפון את כתובת ה-Network שמופיעה בחלון של npm run dev. רשמו כל הערה, גם הקטנות.

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

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

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

3.2 חיפוש וסינון לפי קטגוריה

3.3 מחשבון מנות

3.4 סימון שלבים תוך כדי בישול

3.5 תיקונים קטנים: ביד או בסימון

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

"עדיף משהו יותר חם": זה שינוי של טקסט אחד, ואתם יודעים בדיוק מה לכתוב. לחצו Ctrl + Shift + F (ב-Mac: Cmd + Shift + F) כדי לחפש בכל הפרויקט, הקלידו ברוכים הבאים, ולחצו על התוצאה. Cursor יפתח את הקובץ בדיוק בשורה הנכונה. שנו את הטקסט בעצמכם, למשל ל"מה מבשלים היום?", ורעננו את הדפדפן.

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

3.6 כשמשהו נשבר

זה יקרה, וזה בסדר גמור. נניח שאחרי אחד השינויים הופיעה שגיאה אדומה בדפדפן, בטרמינל התחתון (npm run dev), או בקובץ שפתוח ב-Cursor, עם קו גלי אדום מתחת לקוד.

אם השגיאה מופיעה ב-Cursor, Claude יכול לראות אותה בעצמו דרך חלון Problems (Ctrl + Shift + M, ב-Mac: Cmd + Shift + M):

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

3.7 בונוס: הוספת מתכון מהאתר

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

שלב 4: בדיקת איכות אחרונה לפני העלאה

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

4.1 בנייה לייצור (Production Build)

npm run dev סלחני: הוא מריץ את האתר גם כשיש בו בעיות קטנות. בנייה לייצור היא הגרסה שתעלה לאינטרנט, והיא קפדנית הרבה יותר. אם יש שגיאה, עדיף לגלות אותה עכשיו.

בטרמינל התחתון, עצרו את שרת הפיתוח (Ctrl + C) והריצו:

npm run build

כשהכול תקין, הפלט נגמר בטבלה של כל הדפים באתר:

 ✓ Compiled successfully in 4.2s
 ✓ Linting and checking validity of types
 ✓ Generating static pages (11/11)
 
Route (app)                          Size  First Load JS
┌ ○ /                               3.1 kB         128 kB
├ ○ /add                            2.4 kB         127 kB
└ ● /recipes/[slug]                 1.8 kB         126 kB
    ├ /recipes/grandma-cheesecake
    ├ /recipes/chicken-soup
    └ [+4 more paths]

ואם יש בעיה, תראו משהו כזה:

Failed to compile.
 
./components/ServingsCalculator.tsx:14:7
Type error: Type 'string' is not assignable to type 'number'.

אחרי שהבנייה עוברת, אפשר להריץ את הגרסה הסופית על המחשב ולבדוק אותה כמו שגולשים יראו אותה:

npm run start

ופותחים שוב את http://localhost:3000.

4.2 Claude כבודק איכות

עכשיו נבקש מ-Claude להחליף כובע: מבונה לבודק. כדאי לעשות את זה בשיחה חדשה (/clear), כדי שיסתכל על הקוד בעיניים רעננות, בלי להיות "מאוהב" בקוד שהוא עצמו כתב:

עברו על הרשימה שהוא מציג, החליטו מה חשוב, ובקשו לתקן:

4.3 הבדיקה הידנית שלכם

Claude בודק קוד, אבל רק אתם יכולים לבדוק איך זה מרגיש. עברו על הרשימה בעצמכם:

4.4 סקירה אחרונה ושמירה

לפני השמירה האחרונה, פתחו Source Control בפעם האחרונה ועברו על כל הקבצים שהשתנו מאז השמירה הקודמת: תיקוני בדיקת האיכות וה-README. פתחו את README.md בעורך וקראו אותו כמו שמישהו חדש יקרא. ברור? רק אז:

רשימת הקבצים ב-Source Control התרוקנה? הכול שמור, והאתר מוכן לעלות לאוויר.

מה עשינו כאן, בעצם?

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

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

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

סיכום

1. הקמה: פרויקט פתוח ב-Cursor עם Auto Save, Claude בטרמינל שבצד, create-next-app, שרת פיתוח בטרמינל התחתון, ו-CLAUDE.md עם כללי הפרויקט.
2. בנייה בשכבות: תוכנית במצב תכנון, ואז נתונים, מסגרת, דף בית ודף מתכון. אחרי כל שכבה: Source Control, דפדפן, שמירה ב-git.
3. שיפור: משוב אמיתי הופך למשימות. גדולות הולכות ל-Claude (חיפוש, מחשבון מנות, סימון שלבים, שמירה בצד השרת), קטנות נעשות ביד או בעזרת סימון בעורך.
4. בדיקה: npm run build, חלון Problems ריק, Claude כבודק איכות בשיחה חדשה, רשימת בדיקה ידנית וסקירה אחרונה ב-Source Control.

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

בדקו את עצמכם