פרויקטים מלאים מא׳ עד ת׳ — Complete Projects A-Z

1. למה פרויקטים שלמים משנים את הכל

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

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

ההבדל הזה הוא גם מה שלקוחות רואים. אם מישהו שואל אותך "מה אתה יודע לעשות?" ואתה עונה "אני יודע Git, Next.js, ו-Supabase" — זה לא עושה רושם. אבל אם אתה שולח 4 לינקים לפרויקטים חיים? זה סיפור אחר לגמרי. פרויקט חי = הוכחה שאי אפשר להתווכח איתה.

יש עוד סיבה חשובה לבנות פרויקטים שלמים: אתה לומד דברים שלא מלמדים ב-Tutorials. כשבונים פרויקט מא׳ ועד ת׳, מגלים את כל הפרטים הקטנים — איך לטפל בשגיאות, איך לגרום לטופס באמת לשלוח, איך לוודא שהדף נראה טוב ב-iPhone 13 וגם ב-Samsung Galaxy. הפרטים הקטנים האלה הם מה שמפריד בין דמו לבין מוצר.

כל פרויקט בפרק הזה עובר את מחזור החיים המלא. זה לא Tutorial שבו אתה מעתיק קוד. אתה מקבל את ה-Brief (תיאור הפרויקט), את הכיוון, ואת ההנחיות — אבל אתה מנהל את Claude Code ובונה את הפרויקט. אתה הבעלים. אתה מקבל החלטות. אתה מוביל.

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

איך כל מה שלמדת מתחבר בפרויקטים

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

4 פרויקטים, רמת קושי עולה:

7 טעויות נפוצות בבניית פרויקטים — ואיך להימנע מהן

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

2. פרויקט 1: Landing Page עסקי — תכנון

הבריף: דף נחיתה מקצועי לעסק — אמיתי או דמיוני. דף יחיד שנראה כמו אלף דולר, עם כל הסקשנים שעסק צריך, Responsive למובייל, ו-90+ ב-Lighthouse. זה הפרויקט הראשון כי הוא הכי פשוט טכנית, אבל הכי מרשים ויזואלית. תוך 2-3 שעות יהיה לך אתר חי שנראה מקצועי לחלוטין.

מה כולל ה-Landing Page

• Hero Section — כותרת מרשימה, תיאור קצר, כפתור CTA, ורקע אנימטיבי (Gradient או Particles)
• שירותים/פיצ׳רים — 4 כרטיסיות עם אייקונים שמציגות את מה שהעסק מציע
• המלצות (Testimonials) — 3 לקוחות מרוצים עם תמונה, שם, ותפקיד
• טבלת מחירים (Pricing) — 3 מסלולים: בסיסי, מקצועי, פרימיום
• טופס יצירת קשר (Contact Form) — שם, אימייל, הודעה, ולחצן שליחה
• Footer — לוגו, ניווט, קישורים חברתיים, זכויות יוצרים

הטכנולוגיה

HTML + Tailwind CSS + Vanilla JavaScript. אין צורך ב-framework. הפריסה תהיה ל-Cloudflare Pages (חינם). זה הסטאק הכי פשוט שאפשר — ומושלם לדף נחיתה.

כתיבת הבריף ל-Claude

הבריף הוא ה-Prompt. ככל שהוא מפורט יותר, התוצאה הראשונה תהיה קרובה יותר למה שאתה רוצה. הנה דוגמה לבריף מצוין:

I want to build a landing page for "TechPulse" — an IT consulting
firm based in Tel Aviv. Here's what I need:

DESIGN:
- Modern dark theme, gradient from #1a1a2e to #16213e
- Hebrew RTL layout
- Clean, professional look with subtle animations
- Font: Heebo (Google Fonts)

SECTIONS:
1. Hero: animated gradient background, company name, tagline
   "פתרונות IT מתקדמים לעסקים שרוצים לצמוח", CTA button
2. 4 service cards with icons (Cloud, Security, DevOps, Support)
3. 3 testimonials with photos (use placeholder images from UI Faces)
4. Pricing table: 3 tiers (Basic ₪1,499/mo, Pro ₪2,999/mo,
   Enterprise — Contact Us)
5. Contact form: name, email, phone, message, submit button
6. Footer: logo, quick links, social icons

TECH: HTML + Tailwind CSS (CDN) + vanilla JS
RESPONSIVE: must look perfect on mobile
DEPLOY: Cloudflare Pages

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

3. פרויקט 1: Landing Page עסקי — בנייה

הגיע הרגע. פתח Terminal, הפעל Claude Code, והדבק את הבריף שלך. הנה 8 הצעדים — עקוב אחריהם בזה אחר זה:

שלב 1: Scaffold ראשוני (15 דקות)

הדבק את הבריף המלא ל-Claude Code. הוא ייצור את מבנה הפרויקט — תיקיות, index.html, קובצי CSS ו-JS. פתח את הקובץ בדפדפן ובדוק את הגרסה הראשונה.

# בטרמינל — בתוך Claude Code:

[מדביקים את הבריף המלא]

Create this project in a new folder called "techpulse-landing".
Use Tailwind CSS via CDN. Make it a single index.html file with
embedded styles and scripts for simplicity.

Claude ייצור את הקובץ. פתח אותו בדפדפן: open index.html (Mac) או xdg-open index.html (Linux). תראה גרסה ראשונה עובדת.

שלב 2: איטרציות עיצוב (20 דקות)

עכשיו מגיע השלב שהכי מהנה ב-Vibe Coding — ה-refinement. פתוח את הדף בדפדפן ליד ה-Terminal, ונותנים הוראות ממוקדות:

"Make the hero section taller — at least 100vh. Add a subtle
particle animation in the background."

"The service cards need more spacing between them. Add a hover
effect where the card lifts up with a shadow."

"The testimonial section needs a darker background. Use a subtle
gradient overlay."

"Make the pricing table pop more — the 'Pro' plan should have
a highlighted border and a 'Most Popular' badge."

כל פרומפט = שיפור אחד. בדוק בדפדפן אחרי כל שינוי. לא מרוצה? תגיד מה לא טוב. Claude ישפר. זה הכוח של Vibe Coding: במקום לחפש ב-Stack Overflow איך לשנות גודל font או צבע רקע — אתה פשוט אומר מה אתה רוצה ורואה את התוצאה תוך שניות.

טיפ חשוב לאיטרציות עיצוב: תהיה ספציפי. "תשפר את העיצוב" זה פרומפט גרוע. "תגדיל את ה-Hero ל-100vh, תוסיף צל על הכרטיסים, ותשנה את הצבע של כפתור ה-CTA ל-#e94560" — זה פרומפט מצוין. ככל שהבקשה שלך מדויקת יותר, התוצאה תהיה קרובה יותר למה שאתה רוצה.

שלב 3: תוכן (15 דקות)

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

"Replace placeholder testimonials with these:
1. 'TechPulse העבירו אותנו לענן תוך שבועיים. מדהים.' —
   דנה כהן, CTO, DataFlow
2. 'התמיכה הטכנית שלהם זמינה 24/7 ותמיד פותרת.' —
   יובל לוי, מנכ"ל, GreenTech
3. 'מאז שעברנו ל-DevOps שלהם, ה-uptime שלנו 99.9%.' —
   מיכל ברק, VP R&D, CloudBase"

שלב 4: Responsiveness — מובייל (15 דקות)

בדוק את הדף במובייל. פתח DevTools (F12), עבור ל-Device Mode, ובדוק ב-iPhone ו-Android. תקן בעיות:

"The service cards should stack vertically on mobile — one per
row, full width. The pricing table should scroll horizontally
on small screens. The navigation should become a hamburger menu
on mobile."

שלב 5: אינטראקטיביות (10 דקות)

הוסף Smooth Scrolling, תפריט מובייל, Form Validation, ואנימציות בגלילה (Scroll Animations). פרומפט אחד עושה את הכל:

"Add: (1) smooth scrolling for all anchor links, (2) mobile
hamburger menu with slide animation, (3) form validation with
Hebrew error messages, (4) fade-in animations when sections
enter the viewport using IntersectionObserver."

שלב 6: SEO (10 דקות)

מטא תגים, Open Graph, כותרות סמנטיות, ו-Sitemap. Claude מוסיף הכל:

"Add complete SEO: meta title and description in Hebrew,
Open Graph tags for Facebook/LinkedIn sharing, semantic HTML
(use header, nav, main, section, footer), and generate a
sitemap.xml file."

שלב 7: Deploy — פריסה ל-Cloudflare Pages (10 דקות)

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

# 1. אתחול Git
git init
git add .
git commit -m "Initial landing page"

# 2. Push ל-GitHub
gh repo create techpulse-landing --public --push

# 3. חיבור ל-Cloudflare Pages — דרך Dashboard:
# pages.cloudflare.com → Create project → Connect GitHub
# → Select repo → Deploy

שלב 8: בדיקת Lighthouse (5 דקות)

פתח את ה-URL החי, לחץ F12 → Lighthouse → Generate Report. המטרה: 90+ בכל הקטגוריות. אם יש ציון נמוך — תגיד ל-Claude ותתקן.

4. פרויקט 1: Landing Page עסקי — ליטוש ופריסה

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

אופטימיזציית ביצועים

• דחיסת תמונות: "Compress all images to WebP format with quality 85. Add lazy loading to all images below the fold."
• Minification: "Minify inline CSS and JS. Add preload for critical resources (font, hero image)."
• Cache headers: Cloudflare Pages מגדיר את זה אוטומטית — אין מה לעשות ידנית.

נגישות (Accessibility)

• Alt text על כל תמונה — "Add descriptive Hebrew alt text to every image"
• ARIA labels על כל אלמנט אינטראקטיבי — תפריט, טופס, כפתורים
• ניווט מקלדת — Tab עובר בין כל האלמנטים בסדר הגיוני
• ניגודיות צבעים — יחס של 4.5:1 לפחות בין טקסט לרקע

Backend לטופס יצירת קשר

הטופס נראה יפה, אבל לאן ההודעות הולכות? יש כמה אפשרויות חינמיות:

"Connect the contact form to Formspree. My form ID is
'xvgzabcd'. When submitted, show a success message in Hebrew:
'תודה! נחזור אליך תוך 24 שעות.' Style the success message
with a green checkmark animation."

Open Graph — איך הדף נראה כששומרים לינק

כשמישהו משתף את הלינק בוואטסאפ, לינקדאין, או פייסבוק — ה-OG Tags שולטים במה שמופיע. Claude כבר הוסיף את זה ב-SEO, אבל כדאי לבדוק:

# העתק את ה-URL שלך לכלי הזה:
# https://www.opengraph.xyz/
# ובדוק שהתמונה, הכותרת, והתיאור נראים טוב.

צ׳קליסט סופית לפני "גמרנו"

• כל הלינקים עובדים (אין 404)
• הטופס שולח ומציג הודעת הצלחה
• מובייל מושלם (בדקת ב-3 גדלי מסך)
• תמונות נטענות מהר (WebP + Lazy Loading)
• אין שגיאות ב-Console (F12 → Console)
• Lighthouse 90+ בכל הקטגוריות

5. פרויקט 2: Dashboard ללקוחות — תכנון

קפיצה ברמה. מדף סטטי לאפליקציה דינמית עם אימות משתמשים, בסיס נתונים, ו-Role-Based Access. אם ה-Landing Page הוא "שלט חוצות" — ה-Dashboard הוא "משרד שלם עם חדרים לכל עובד".

הבריף

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

מה כולל ה-Dashboard

• הרשמה/לוגין — אימות דרך Supabase Auth (Email + Password)
• דף ראשי עם KPI Cards — סה"כ לקוחות, פרויקטים פעילים, פרויקטים באיחור, הכנסות חודשיות
• טבלת לקוחות — חיפוש, סינון, מיון, הוספה, עריכה, מחיקה
• טבלת פרויקטים — סטטוס (בתכנון / בעבודה / הושלם / באיחור), תקציב, Deadline
• דף הגדרות — עריכת פרופיל, שינוי סיסמה
• Responsive — עובד על מובייל

מודל הנתונים

זה השלב הכי חשוב. תכנן את הטבלאות לפני שמתחילים לבנות UI:

בריף ל-Claude

Build a client management dashboard with these requirements:

TECH STACK: Next.js (App Router) + Supabase + Tailwind CSS + shadcn/ui
AUTH: Supabase Auth (email + password). Two roles: admin, client.

DATABASE TABLES:
- profiles: id (uuid, FK to auth.users), name, role (admin/client)
- clients: id, name, company, email, phone, created_by (FK profiles)
- projects: id, title, status (planning/active/completed/overdue),
  budget (integer), deadline (date), client_id (FK clients)

PAGES:
1. /login — email + password login
2. /signup — registration (default role: client)
3. /dashboard — KPI cards (total clients, active projects,
   overdue projects, monthly revenue)
4. /clients — data table with search, filter, sort, add, edit, delete
5. /projects — data table with status badges, filter by status
6. /settings — edit profile, change password

ACCESS CONTROL:
- Admin: sees all clients and projects, can CRUD everything
- Client: sees only their own projects (read-only)

DEPLOY: Vercel

6. פרויקט 2: Dashboard ללקוחות — בנייה

הפרויקט הכי מאתגר מבחינה טכנית. אל תדאג — Claude Code מנהל את כל המורכבות. אתה מתאר מה צריך לקרות, הוא כותב את הקוד. 8 שלבים:

שלב 1: הקמת פרויקט (20 דקות)

Claude ייצור את כל ה-Scaffold: Next.js App Router, Supabase Client, טבלאות, ו-shadcn/ui Components.

[מדביקים את הבריף המלא]

Start with Step 1: project setup. Create the Next.js project,
install dependencies (Supabase, shadcn/ui), create the Supabase
tables with RLS policies, and set up the auth configuration.
Give me the .env.local file template I need to fill in.

Claude ייצור את הפרויקט, יתקין חבילות, ייצור את ה-SQL לטבלאות. חשוב: תצטרך להיכנס ל-Supabase Dashboard ידנית כדי ליצור את הטבלאות (או להריץ את ה-SQL שלו ב-SQL Editor). ותצטרך למלא את הקובץ .env.local עם ה-URL וה-Anon Key מ-Supabase.

איך מוצאים את ה-Keys ב-Supabase? נכנסים ל-supabase.com → הפרויקט שלכם → Settings → API. שם יש Project URL (זה ה-NEXT_PUBLIC_SUPABASE_URL) ו-Anon Key (זה ה-NEXT_PUBLIC_SUPABASE_ANON_KEY). מעתיקים אותם ל-.env.local.

שלב 2: Authentication (30 דקות)

הרשמה, לוגין, אימות אימייל, Protected Routes, והפרדת תפקידים.

"Now build the auth system. I need:
1. /login page with email + password form
2. /signup page with name, email, password fields
3. After signup, create a profile row with role='client'
4. Middleware that redirects unauthenticated users to /login
5. A useUser hook that gives me the current user and their role"

שלב 3: דף ראשי עם KPI Cards (30 דקות)

4 כרטיסי KPI גדולים בראש הדף, ו-Activity Feed מתחתיהם.

"Build the dashboard home page at /dashboard. Show 4 KPI cards:
(1) Total Clients with people icon, (2) Active Projects with
green badge, (3) Overdue Projects with red badge, (4) Monthly
Revenue in ILS. Below the cards, show a recent activity feed
showing the last 10 actions (client added, project updated, etc).
For admin: show all data. For client: show only their projects."

שלב 4: טבלאות נתונים (30 דקות)

רשימת לקוחות ורשימת פרויקטים עם חיפוש, סינון, ומיון.

"Build the /clients page with a data table. Include: search by
name or company, sort by name or created_at, pagination (10 per
page). Each row has: name, company, email, phone, number of
projects, and action buttons (edit, delete). Add a 'New Client'
button at the top."

שלב 5: פעולות CRUD (20 דקות)

הוספה, עריכה, ומחיקה של לקוחות ופרויקטים. טפסים עם Validation.

"Add CRUD operations: (1) 'Add Client' opens a modal form with
name, company, email, phone — with validation. (2) 'Edit' opens
the same modal pre-filled. (3) 'Delete' shows a confirmation
dialog. (4) Same for projects. Use optimistic updates and show
toast notifications for success/error."

שלב 6: תצוגת לקוח (15 דקות)

כשלקוח מתחבר, הוא רואה רק את הפרויקטים שלו — בלי אפשרות עריכה, רק צפייה. הפילטר מתבצע ברמת ה-Database דרך RLS (Row Level Security) של Supabase — לא רק ב-UI. זה חשוב: אם הסינון היה רק בצד הלקוח, מישהו טכני יכול לעקוף אותו. RLS מגן ברמת הנתונים.

"Create the client view: when a user with role='client' logs in,
they should only see projects linked to their client_id. Hide all
admin-only UI (add/edit/delete buttons, clients page). Show a
clean, read-only dashboard with their project statuses, budgets,
and deadlines. Add a friendly welcome message with their name."

שלב 7: ליטוש (15 דקות)

הליטוש הוא מה שהופך "אפליקציה שעובדת" ל-"אפליקציה שכיף להשתמש בה". 4 דברים חשובים:

• Loading States: כשהנתונים נטענים, המשתמש רואה Skeleton או Spinner — לא מסך ריק
• Error Handling: אם משהו נכשל, המשתמש רואה הודעה ברורה — "לא הצלחנו לטעון את הנתונים. נסה שוב." — לא מסך לבן
• Empty States: "אין עדיין לקוחות — הוסף את הראשון!" עם כפתור — לא טבלה ריקה
• Toast Notifications: "הלקוח נוסף בהצלחה!" או "שגיאה — נסה שוב" — פידבק מיידי על כל פעולה

שלב 8: פריסה ב-Vercel (10 דקות)

# Push ל-GitHub
git add .
git commit -m "Complete client dashboard"
gh repo create client-dashboard --private --push

# ב-Vercel Dashboard:
# vercel.com → New Project → Import from GitHub
# → Add Environment Variables (SUPABASE_URL, SUPABASE_ANON_KEY)
# → Deploy

7. פרויקט 2: Dashboard ללקוחות — פיצ׳רים מתקדמים

ה-Dashboard הבסיסי עובד. עכשיו מוסיפים פיצ׳רים שהופכים "דמו" ל-"מוצר". הפיצ׳רים המתקדמים הם מה שמפריד בין פרויקט קורס לבין אפליקציה שאנשים באמת ישתמשו בה.

Real-Time Updates — עדכונים בזמן אמת

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

"Add Supabase Realtime subscriptions to the projects table.
When an admin updates a project status, all connected clients
should see the change immediately without page refresh. Show
a subtle animation when data updates."

התראות באימייל

"כשסטטוס הפרויקט משתנה, שלח מייל ללקוח." — אפשר לחבר Resend (3,000 מיילים/חודש חינם, עד 100 ביום).

"Add email notifications using Resend. When a project status
changes, send an email to the client with the project name,
old status, and new status. Use a clean HTML email template."

ייצוא ל-CSV

כפתור "Export to CSV" על כל טבלה — Claude מוסיף את זה בפרומפט אחד:

"Add an 'Export to CSV' button on both the clients and projects
tables. Generate the CSV client-side. Include all visible columns.
The filename should include today's date (e.g. clients-2026-03-23.csv)."

Dark Mode

Toggle שמתחלף בין בהיר לכהה ושומר את ההעדפה:

"Add a dark/light mode toggle in the top navigation bar. Use
Tailwind's dark mode with class strategy. Save the preference
to localStorage so it persists between sessions. Default to
the user's system preference."

מובייל — טבלאות הופכות לכרטיסים

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

8. פרויקט 3: בוט אוטומציה — תכנון ובנייה

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

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

ב-Vibe Coding, בוטים הם מהפרויקטים הכי "מוחזרי-השקעה" שאפשר לבנות. שעתיים בנייה → דו"ח יומי → 365 דו"חות בשנה. אם כל דו"ח חוסך לך 20 דקות עבודה ידנית — חסכת 120 שעות בשנה. מ-2 שעות בנייה. זה ROI של פי 60.

הבריף

בוט שמנטר מחירי מתחרים (או כל מקור נתונים אחר), משווה לנתונים שלך, ושולח דו"ח יומי במייל או ב-Slack. דוגמה קונקרטית: "מנטר מחירים של 5 מתחרים באתרי E-Commerce, משווה למחירים שלנו, ושולח דו"ח יומי ב-8:00 בבוקר."

הטכנולוגיה

Python + GitHub Actions (לתזמון). אין צורך בשרת. GitHub Actions מריץ את הסקריפט בזמנים שאתה מגדיר — חינם (2,000 דקות/חודש).

בנייה: 6 שלבים

שלב 1: תכנון (15 דקות)

הגדר מה הבוט עושה — ב-3 משפטים:

"I need a Python bot that:
1. COLLECTS: Fetches product prices from 5 competitor websites
   using their public APIs or web scraping
2. PROCESSES: Compares each price to my price list (stored in
   a JSON file), calculates the difference (% cheaper/more expensive)
3. ACTS: Sends a daily HTML email report at 8 AM showing:
   products where competitors are cheaper (red), products where
   we're cheaper (green), and biggest price changes"

שלב 2: איסוף נתונים (20 דקות)

"Create the data collection module. For this demo, use a
public API (like fakestoreapi.com for product prices, or
coinapi.io for crypto prices). Fetch prices for 10 products.
Save raw data to a JSON file with timestamps. Handle API
errors gracefully — if one API fails, continue with the rest."

שלב 3: עיבוד נתונים (20 דקות)

"Create the data processing module. Compare fetched prices
to my baseline prices (in baseline_prices.json). Calculate:
(1) price difference in ILS, (2) percentage change, (3) flag
any product where competitor is 10%+ cheaper. Sort results
by biggest price gap."

שלב 4: יצירת דו"ח (15 דקות)

"Create an HTML email report. Include: (1) summary line:
'3 products are cheaper at competitors, 7 products we're
competitive on'. (2) Table with columns: Product, Our Price,
Competitor Price, Difference, Status (green/red emoji).
(3) Footer with run timestamp. Use inline CSS for email
compatibility. Send via Resend API."

שלב 5: תזמון (15 דקות)

"Create a GitHub Actions workflow file (.github/workflows/
daily-report.yml) that runs the Python script every day at
8:00 AM Israel time (5:00 UTC). Install dependencies from
requirements.txt. Use GitHub Secrets for API keys (RESEND_API_KEY,
COMPETITOR_API_KEY). Add error notifications — if the script
fails, send me an email."

שלב 6: Error Handling ו-Deploy (15 דקות)

הוסף לוגים, Retry Logic, והתראות כשלון. אחר כך Push ל-GitHub, הגדר Secrets, ובדוק שה-Workflow רץ. Error Handling חזק הוא ההבדל בין בוט שעובד יום ובוט שעובד שנה. APIs משתנים, אתרים מוסיפים הגנות, ושרתים נופלים. הבוט צריך לדעת להתמודד עם הכל.

"Add comprehensive error handling: (1) try/except around every
API call with specific error messages, (2) logging to both console
and a log file, (3) retry logic — if an API call fails, retry
3 times with 5-second delay, (4) if the entire script fails,
send a failure notification email with the error message."

9. פרויקט 4: פורטפוליו אישי עם בלוג — בנייה

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

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

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

הבריף

אתר אישי מקצועי עם 4 עמודים: דף ראשי (Hero + About), גלריית פרויקטים (עם צילומי מסך ותיאורים), בלוג (מבוסס MDX), ודף צור קשר. פריסה ב-Vercel עם דומיין מותאם אישית.

מה כולל הפורטפוליו

• דף ראשי — שם, תמונה, Tagline, קצת על עצמך, וקריאה לפעולה
• גלריית פרויקטים — כל מה שבנית בקורס (ועוד). צילום מסך, תיאור, לינק חי, טכנולוגיות שנעשה בהן שימוש
• בלוג — פוסטים ב-MDX (Markdown + React). הפוסט הראשון: "איך בניתי 4 פרויקטים בחודש בלי לכתוב קוד"
• צור קשר — טופס, קישורים לרשתות חברתיות, ומחוון זמינות

בנייה: 7 שלבים

שלב 1: הקמת פרויקט ודף ראשי (20 דקות)

Build a personal portfolio website with these specs:

TECH: Next.js (App Router) + Tailwind CSS + MDX for blog
DESIGN: Clean, minimal, professional. Light theme with
accent color. Hebrew RTL support.

HOME PAGE:
- Hero: my name (big), tagline "Vibe Coder | בונה מוצרים
  דיגיטליים בלי לכתוב קוד", professional photo placeholder
- About section: 3-4 paragraphs about who I am
- Skills: badges for technologies I've used (Next.js, Supabase,
  Python, Tailwind CSS, Claude Code)
- CTA: "See My Projects" button linking to /projects

שלב 2: גלריית פרויקטים (20 דקות)

"Build the /projects page. Show a grid of project cards.
Each card has: screenshot (placeholder image for now), title,
short description, tech stack badges, and two buttons: 'View Live'
and 'Source Code'. Include at least 4 projects:
1. TechPulse Landing Page
2. Client Management Dashboard
3. Price Monitor Bot
4. This Portfolio (meta!)"

שלב 3: הגדרת בלוג עם MDX (25 דקות)

MDX מאפשר לכתוב פוסטים ב-Markdown (פשוט וקריא) ולהוסיף בתוכם React Components (אינטראקטיבי). Claude מגדיר את כל התשתית:

"Set up MDX blog: (1) Configure next-mdx-remote or @next/mdx.
(2) Create /blog page with a list of posts (title, date, excerpt).
(3) Create /blog/[slug] page for individual posts with code
syntax highlighting (use rehype-pretty-code). (4) Add reading
time estimate. (5) Create a sample blog post file to test."

שלב 4: כתיבת פוסט ראשון (15 דקות)

הפוסט הראשון הוא על המסע שלך בקורס הזה. זה פוסט שמראה שאתה לא רק יודע לבנות — אתה יודע לספר על זה.

"Write a blog post in Hebrew (with English tech terms) titled:
'איך בניתי 4 פרויקטים בחודש — בלי לכתוב שורת קוד אחת'

Structure:
1. Opening: I had zero coding experience. Then I discovered
   Claude Code and vibe coding.
2. Project 1: Landing Page — what I learned, what surprised me
3. Project 2: Dashboard — the hardest part, the breakthrough moment
4. Project 3: Automation Bot — when I realized code can work for me
5. Project 4: This Portfolio — putting it all together
6. Tips for beginners: 5 things I wish I knew before starting
7. Closing: link to my projects, invitation to connect

Tone: personal, honest, practical. Include code snippets
where relevant (the prompts I used, not the generated code).
Length: ~1,500 words."

שלב 5: דף צור קשר (15 דקות)

"Build the /contact page. Include: (1) contact form (name,
email, message) connected to Formspree, (2) social links
(GitHub, LinkedIn, Twitter) with icons, (3) an availability
indicator ('Available for freelance work' in green, or
'Currently busy' in yellow), (4) an email address with copy
button. Design it warm and inviting."

שלב 6: SEO ו-Open Graph (10 דקות)

מטא תגים לכל עמוד, Open Graph לשיתוף יפה, Sitemap, ו-robots.txt.

שלב 7: פריסה ב-Vercel (10 דקות)

Push ל-GitHub, חיבור ל-Vercel, ודומיין מותאם אישית (אופציונלי אבל מומלץ מאוד).

10. פרויקט 4: פורטפוליו — ליטוש ומיתוג אישי

הפורטפוליו עובד. עכשיו הופכים אותו מ"אתר" ל-"חוויה". הליטוש הוא מה שגורם למישהו לזכור אותך.

עיצוב מתקדם

• אנימציות: "Add subtle page transition animations. When navigating between pages, content fades in smoothly."
• Scroll Effects: "Add parallax scrolling on the hero section and staggered fade-in for project cards."
• Micro-interactions: Hover effects על כפתורים, אנימציה כשמעתיקים אימייל, Confetti כש-Form נשלח
• Custom cursor: "Add a custom cursor that changes to a pointer on interactive elements" (אופציונלי — רק אם מתאים לסגנון שלך)

איכות התוכן

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

אסטרטגיית בלוג

תכנן 4-6 פוסטים קדימה. הנה רעיונות:

שיתוף ונראות

• Open Graph: בדוק ב-opengraph.xyz שהלינק נראה מושלם כששומרים. כשמישהו משתף את האתר שלך בוואטסאפ או בלינקדאין — התמונה והכותרת צריכות להיות מושלמות
• Google Search Console: שלח את ה-Sitemap; תראה איך Google רואה את האתר שלך. זה גם עוזר לעקוב אחרי מילות מפתח שמביאות אנשים לאתר
• Analytics: Plausible (פרטיות-ראשונה, מ-$9/חודש ל-10K צפיות) או Vercel Analytics (חינם) — תדע כמה אנשים מבקרים, מאיפה הם הגיעו, ומה הם קוראים
• LinkedIn: עדכן את הפרופיל שלך עם לינק לפורטפוליו. בסקשן "Featured" — שים את הפורטפוליו ראשון
• GitHub Profile: הוסף README.md לפרופיל ה-GitHub שלך עם לינק לפורטפוליו ולפרויקטים הבולטים

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

"הפורטפוליו שלך הוא הוכחה שאתה יכול לבנות. כשמישהו שואל 'מה אתה יודע לעשות?' — תשלח לו את הלינק."

11. תחזוקה וצמיחה של הפרויקטים

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

הרבה אנשים בונים פרויקטים, שמים אותם באוויר, ושוכחים. אחרי חודש — SSL Certificate פג, API Key התבטל, או Dependency חדש שובר משהו. פתאום הפורטפוליו מראה שגיאה, ה-Dashboard לא נטען, והבוט הפסיק לשלוח דו"חות. תחזוקה זה לא Boring — זה מה שמבדיל בין חובבן למקצוען.

החדשות הטובות: עם Claude Code, תחזוקה היא קלה. "Check all my projects for outdated dependencies and update them" — פרומפט אחד שחוסך שעות של עבודה ידנית. "Review the error logs from my automation bot and fix any issues" — Claude מנתח את הלוגים ומתקן בעיות. תחזוקה עם Vibe Coding לוקחת דקות, לא שעות.

שגרת תחזוקה שבועית

כלי ניטור (Monitoring) — חינם

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

פידבק ושיפור

• הוסף מנגנון פידבק: טופס, אימייל, או צ'אט widget בכל פרויקט
• הקשב למשתמשים אמיתיים: אם מישהו אומר "לא ברור" — זו הזדמנות לשפר
• Feature Backlog: שמור רשימה של רעיונות לכל פרויקט. כשיש לך שעה פנויה — בנה את הבא ברשימה

גיבויים ואבטחה

• קוד: נמצא ב-GitHub — מגובה אוטומטית. כל Commit הוא גיבוי. אם משהו נשבר — git revert מחזיר למצב הקודם
• נתונים: Supabase כולל גיבויים אוטומטיים (בתוכנית Pro). בתוכנית חינם — שקול לייצא את הנתונים ל-CSV פעם בשבוע
• Environment Variables: תעד אותם! צור קובץ .env.example בכל פרויקט עם שמות המשתנים (בלי הערכים). ככה אם תצטרך להגדיר את הפרויקט מחדש — תדע מה צריך
• API Keys: בדוק שלא דחפת מפתחות ל-GitHub. הוסף .env* ל-.gitignore. אם בטעות כבר דחפת — שנה את המפתח מיד (revoke וצור חדש)

12. מה הלאה: המסע שלך כ-Vibe Coder

סיימת.

יש לך 4 פרויקטים חיים שבנית בעצמך. דף נחיתה מקצועי, Dashboard עם Authentication, בוט אוטומציה, ופורטפוליו עם בלוג. אתה כבר לא מישהו שרוצה לבנות — אתה מישהו שבונה.

תעצור רגע ותחשוב על מה עשית. לפני 10 פרקים, לא ידעת מה זה Git. עכשיו יש לך 4 Repositories ב-GitHub, שירותים שרצים על Cloudflare ו-Vercel, בוט שעובד בשבילך כל יום, ואתר אישי שמייצג אותך. כל זה בלי לכתוב שורת קוד אחת ידנית. זה הכוח של Vibe Coding.

לאן ממשיכים?

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

צמיחה כ-Vibe Coder

• הפרויקט ה-10 ייקח שליש מהזמן של הראשון. כל פרויקט מלמד אותך משהו. כל איטרציה מהירה יותר. אתה מפתח "שרירי Prompting" — יודע בדיוק מה לבקש ואיך לבקש.
• אתה כבר קורא קוד. בלי לשים לב, אחרי כל כך הרבה בנייה, אתה מתחיל להבין מה Claude כותב. זה נורמלי ומצוין. תמשיך עם זה — ככל שאתה מבין יותר, הפרומפטים שלך הופכים טובים יותר.
• הקהילה: שתף את העבודות שלך. למד מאחרים. שתף פעולה. Vibe Coding הוא תנועה, לא פעולה בודדת. יש קבוצות פייסבוק, ערוצי Discord, ו-Subreddits שלמים של אנשים שבונים עם AI.
• בניית עסק: פרילנסרים יכולים להציע פתרונות "vibe-coded" ללקוחות — משלוח מהיר, עלות נמוכה, ערך אמיתי. Landing Page בשעתיים? Dashboard ב-4 שעות? לקוחות ישלמו על זה בשמחה.
• למידת קוד: אם אתה רוצה להתעמק — ה-Vibe Coding שעשית הוא הבסיס הכי טוב ללמידת תכנות "רגילה". אתה כבר מכיר את המושגים, ראית קוד עובד, ויודע איך פרויקט נראה מא׳ עד ת׳. המעבר לכתיבת קוד עצמאית יהיה הרבה יותר קל.

רעיונות לפרויקטים הבאים

עכשיו שסיימת 4 פרויקטים, הנה רעיונות לפרויקטים שאפשר לבנות בעצמך — כל אחד לוקח 2-6 שעות עם Claude Code:

"סיימת. יש לך 4 פרויקטים חיים שבנית בעצמך. אתה כבר לא מישהו שרוצה לבנות — אתה מישהו שבונה."

תרגילים — פרק 10

צ'קליסט — סיכום פרק 10

• מבין/ה את 8 שלבי מחזור החיים של פרויקט: Brief → Plan → Scaffold → Build → Test → Deploy → Monitor → Iterate
• כתבת בריף מפורט ל-Landing Page עם עיצוב, תוכן, מבנה, וטכנולוגיה
• בנית Landing Page מלא עם Hero, שירותים, המלצות, מחירים, וטופס יצירת קשר
• פרסת את ה-Landing Page ב-Cloudflare Pages עם URL חי
• תכננת מודל נתונים ל-Dashboard עם טבלאות ויחסים
• בנית Dashboard עם Authentication, KPI Cards, טבלאות נתונים, ו-CRUD
• הוספת לפחות 2 פיצ׳רים מתקדמים ל-Dashboard (Real-Time, CSV Export, Dark Mode, וכד׳)
• פרסת את ה-Dashboard ב-Vercel עם Environment Variables
• בנית בוט אוטומציה שאוסף נתונים, מעבד, ושולח דו"ח
• הגדרת GitHub Actions Workflow שמריץ את הבוט אוטומטית כל יום
• בנית פורטפוליו אישי עם גלריית פרויקטים, בלוג, ודף צור קשר
• כתבת את פוסט הבלוג הראשון שלך
• פרסת את הפורטפוליו ב-Vercel (עם דומיין מותאם — אופציונלי)
• יש לך 4 כתובות URL חיות שאתה יכול לשלוח לכל אחד
• הגדרת שגרת תחזוקה חודשית (תזכורת ביומן)