spinny:~/writing $ vim create-demo-claude-code-vibecoding.md
1~2**וייבקודינג** היא פרדיגמת פיתוח תוכנה חדשה שבה המתכנת מנחה סוכן AI באמצעות הוראות בשפה טבעית, ומאפשר לבינה המלאכותית לכתוב את הקוד בפועל. המונח נטבע על ידי Andrej Karpathy (מייסד שותף של OpenAI ולשעבר מנהל ה-AI בטסלה) בציוץ מפורסם מפברואר 2025: _"יש סוג חדש של תכנות שאני קורא לו וייבקודינג, שבו אתה נכנע לחלוטין לוויברציות, מאמץ את האקספוננציאלים, ושוכח שהקוד בכלל קיים."_3~4במאמר זה, נראה כיצד לבנות דמו מלא ועובד באמצעות **Claude Code** כסוכן AI, **Supabase** כבקאנד (מסד נתונים, אימות, API) ו-**Vercel** לפריסה - הכל תוך שימוש בלעדי ב**שכבות החינמיות** של שירותים אלו.5~6## 1. מה זה וייבקודינג ולמה זה מהפכני7~8וייבקודינג מייצג שינוי פרדיגמה מהותי בפיתוח תוכנה. במקום לכתוב קוד שורה אחר שורה, המפתח:9~101. **מתאר** מה הוא רוצה בשפה טבעית.112. **סוכן ה-AI** מייצר את הקוד המלא.123. **המפתח** בודק, מאמת ומבצע איטרציות.13~14### למה זה עובד15~16- **מהירות**: פרויקט שהיה לוקח ימים ניתן לבנות בשעות.17- **נגישות**: אפילו מפתחים פחות מנוסים יכולים לבנות מוצרים עובדים.18- **איטרציה מהירה**: אפשר לבדוק רעיונות ולשנות כיוון הרבה יותר מהר.19- **מיקוד במוצר**: אתה מתמקד ב-_מה_ במקום ב-_איך_.20~21```mermaid22flowchart LR23 A[Idea] --> B[Natural language prompt]24 B --> C[Claude Code generates code]25 C --> D[Review and test]26 D --> E[Iteration]27 E --> B28 D --> F[Deploy to Vercel]29```30~31### מתי להשתמש בוייבקודינג32~33וייבקודינג מושלם עבור:34~35- **דמואים ו-MVP**: בניית אב טיפוס מהירה לאימות רעיון.36- **האקתונים**: יצירת מוצר עובד תוך שעות בודדות.37- **פרויקטים צדדיים**: חקירת טכנולוגיות חדשות ללא השקעת שבועות.38- **הוכחת היתכנות**: הדגמת אפשרות טכנית לבעלי עניין או משקיעים.39~40> **אזהרה:** וייבקודינג מצוין לדמואים ואבי טיפוס. ליישומים ברמת ייצור עם דרישות אבטחה וסקלביליות גבוהות, בדיקה יסודית של הקוד שנוצר עדיין חיונית.41~42## 2. המחסנית הטכנולוגית: Claude Code + Supabase + Vercel43~44### Claude Code45~46Claude Code הוא סוכן הקידוד ה-AI של Anthropic. הוא עובד ישירות בטרמינל שלך ויכול:47~48- לקרוא ולהבין את כל בסיס הקוד.49- ליצור, לשנות ולמחוק קבצים.50- להריץ פקודות טרמינל.51- לתקשר עם API-ים ושירותים חיצוניים.52- לנהל ניהול גרסאות עם Git.53- לבצע איטרציות אוטונומיות על שגיאות ובאגים.54~55```bash56# Install Claude Code57npm install -g @anthropic-ai/claude-code58~59# Start in a project directory60cd my-project61claude62```63~64### Supabase (שכבה חינמית)65~66Supabase היא אלטרנטיבה בקוד פתוח ל-Firebase שמציעה:67~68- **מסד נתונים PostgreSQL**: מסד נתונים רלציוני מלא.69- **אימות**: התחברות עם אימייל, Google, GitHub וכו'.70- **ממשקי REST ו-Realtime**: נוצרים אוטומטית מהסכמה שלך.71- **אחסון**: לקבצים ותמונות.72- **Edge Functions**: פונקציות serverless.73~74השכבה החינמית כוללת:75~76| משאב | מגבלה חינמית |77|----------|-----------|78| מסד נתונים | 500 MB |79| אחסון | 1 GB |80| רוחב פס | 5 GB |81| הפעלות Edge Function | 500K/חודש |82| משתמשים מאומתים | ללא הגבלה |83| פרויקטים | 2 פרויקטים פעילים |84~85### Vercel (שכבה חינמית)86~87Vercel היא פלטפורמת הפריסה המושלמת ליישומי Next.js:88~89- **פריסה אוטומטית** מ-GitHub.90- **פריסות תצוגה מקדימה** לכל branch ו-PR.91- **CDN גלובלי** לביצועים אופטימליים.92- **Serverless Functions** כלולות.93- **אנליטיקה בסיסית** בחינם.94~95השכבה החינמית כוללת:96~97| משאב | מגבלה חינמית |98|----------|-----------|99| רוחב פס | 100 GB/חודש |100| הרצת Serverless Function | 100 GB-שעות/חודש |101| בילדים | 6,000 דקות/חודש |102| פרויקטים | ללא הגבלה |103| פריסות | ללא הגבלה |104~105## 3. הגדרה ראשונית: הכנת הסביבה106~107### דרישות מוקדמות108~109לפני שמתחילים, ודאו שיש לכם:110~111- **Node.js 18+** מותקן.112- **Git** מוגדר.113- חשבון **GitHub**.114- חשבון **Supabase** (חינם ב-[supabase.com](https://supabase.com)).115- חשבון **Vercel** (חינם ב-[vercel.com](https://vercel.com)).116- **Claude Code** מותקן (`npm install -g @anthropic-ai/claude-code`).117~118### שלב 1: צור את הפרויקט119~120פתח את הטרמינל והפעל את Claude Code:121~122```bash123mkdir my-demo-app && cd my-demo-app124claude125```126~127כעת תוכל להתחיל לתת ל-Claude Code הוראות בשפה טבעית:128~129```130You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,131and shadcn/ui. Also initialize a Git repository.132```133~134Claude Code יבצע אוטומטית:135~136```bash137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir138npx shadcn@latest init139git init && git add . && git commit -m "Initial commit"140```141~142### שלב 2: הגדר את Supabase143~1441. עבור ל-[supabase.com](https://supabase.com) וצור פרויקט חדש.1452. רשום את **כתובת הפרויקט** ו**מפתח ה-anon** מ-Settings > API.1463. חזור לטרמינל עם Claude Code:147~148```149You: Add Supabase to the project. Create a .env.local file with the variables150NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the151Supabase client with SSR support for Next.js App Router.152```153~154Claude Code ייצור את ההגדרה המלאה:155~156```typescript157// src/lib/supabase/client.ts158import { createBrowserClient } from '@supabase/ssr';159~160export function createClient() {161 return createBrowserClient(162 process.env.NEXT_PUBLIC_SUPABASE_URL!,163 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!164 );165}166```167~168```typescript169// src/lib/supabase/server.ts170import { createServerClient } from '@supabase/ssr';171import { cookies } from 'next/headers';172~173export async function createClient() {174 const cookieStore = await cookies();175~176 return createServerClient(177 process.env.NEXT_PUBLIC_SUPABASE_URL!,178 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,179 {180 cookies: {181 getAll() {182 return cookieStore.getAll();183 },184 setAll(cookiesToSet) {185 cookiesToSet.forEach(({ name, value, options }) =>186 cookieStore.set(name, value, options)187 );188 },189 },190 }191 );192}193```194~195## 4. בניית הדמו: אפליקציית ניהול משימות196~197בואו נבנה דמו קונקרטי: **אפליקציית ניהול משימות** עם אימות, CRUD מלא וממשק מודרני.198~199### הגדרת סכמת מסד הנתונים200~201תנו ל-Claude Code הוראות ליצור את הסכמה:202~203```204You: Create a SQL migration for Supabase with the following tables:205~2061. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),207 created_at2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK209 to profiles), created_at2103. tasks: id (uuid), title (text), description (text), status (enum:211 todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,212 FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),213 created_at, updated_at214~215Enable Row Level Security on all tables and create appropriate policies.216```217~218Claude Code ייצר מיגרציה מלאה:219~220```sql221-- Create enum types222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');224~225-- Profiles table226CREATE TABLE profiles (227 id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,228 username TEXT UNIQUE,229 avatar_url TEXT,230 created_at TIMESTAMPTZ DEFAULT NOW()231);232~233-- Projects table234CREATE TABLE projects (235 id UUID DEFAULT gen_random_uuid() PRIMARY KEY,236 name TEXT NOT NULL,237 description TEXT,238 owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,239 created_at TIMESTAMPTZ DEFAULT NOW()240);241~242-- Tasks table243CREATE TABLE tasks (244 id UUID DEFAULT gen_random_uuid() PRIMARY KEY,245 title TEXT NOT NULL,246 description TEXT,247 status task_status DEFAULT 'todo',248 priority task_priority DEFAULT 'medium',249 project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,250 assigned_to UUID REFERENCES profiles(id),251 due_date TIMESTAMPTZ,252 created_at TIMESTAMPTZ DEFAULT NOW(),253 updated_at TIMESTAMPTZ DEFAULT NOW()254);255~256-- Enable RLS257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;260~261-- Profiles policies262CREATE POLICY "Users can view own profile"263 ON profiles FOR SELECT USING (auth.uid() = id);264CREATE POLICY "Users can update own profile"265 ON profiles FOR UPDATE USING (auth.uid() = id);266~267-- Projects policies268CREATE POLICY "Users can view own projects"269 ON projects FOR SELECT USING (auth.uid() = owner_id);270CREATE POLICY "Users can create projects"271 ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);272CREATE POLICY "Users can update own projects"273 ON projects FOR UPDATE USING (auth.uid() = owner_id);274CREATE POLICY "Users can delete own projects"275 ON projects FOR DELETE USING (auth.uid() = owner_id);276~277-- Tasks policies278CREATE POLICY "Users can view tasks in their projects"279 ON tasks FOR SELECT USING (280 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())281 );282CREATE POLICY "Users can create tasks in their projects"283 ON tasks FOR INSERT WITH CHECK (284 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())285 );286CREATE POLICY "Users can update tasks in their projects"287 ON tasks FOR UPDATE USING (288 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())289 );290CREATE POLICY "Users can delete tasks in their projects"291 ON tasks FOR DELETE USING (292 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())293 );294```295~296ניתן להריץ מיגרציה זו ישירות מלוח הבקרה של Supabase (SQL Editor) או דרך ה-CLI.297~298### יצירת טיפוסי TypeScript299~300```301You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts302```303~304```bash305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts306```307~308### בניית ממשק המשתמש309~310עכשיו מגיע החלק החזק ביותר של וייבקודינג. תנו ל-Claude Code הוראות ברמה גבוהה:311~312```313You: Create a dashboard page for the task management app with:314~3151. Sidebar with navigation between projects3162. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop3173. Modal to create/edit tasks3184. Header with user avatar and logout3195. Modern design with shadcn/ui and Tailwind320~321Use data from Supabase with React Server Components where possible322and Client Components only where interactivity is needed.323```324~325Claude Code יבנה את כל הממשק, רכיב אחר רכיב.326~327### הוספת אימות328~329```330You: Add a complete authentication system with:331~3321. Login page with email/password and GitHub login3332. Registration page3343. Middleware to protect authenticated routes3354. Automatic redirect for unauthenticated users3365. Automatic profile creation after registration337```338~339Claude Code יגדיר את ה-middleware של Next.js ואת דפי האימות:340~341```typescript342// src/middleware.ts343import { createServerClient } from '@supabase/ssr';344import { NextResponse, type NextRequest } from 'next/server';345~346export async function middleware(request: NextRequest) {347 let supabaseResponse = NextResponse.next({ request });348~349 const supabase = createServerClient(350 process.env.NEXT_PUBLIC_SUPABASE_URL!,351 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,352 {353 cookies: {354 getAll() {355 return request.cookies.getAll();356 },357 setAll(cookiesToSet) {358 cookiesToSet.forEach(({ name, value }) =>359 request.cookies.set(name, value)360 );361 supabaseResponse = NextResponse.next({ request });362 cookiesToSet.forEach(({ name, value, options }) =>363 supabaseResponse.cookies.set(name, value, options)364 );365 },366 },367 }368 );369~370 const { data: { user } } = await supabase.auth.getUser();371~372 if (!user && !request.nextUrl.pathname.startsWith('/auth')) {373 const url = request.nextUrl.clone();374 url.pathname = '/auth/login';375 return NextResponse.redirect(url);376 }377~378 return supabaseResponse;379}380~381export const config = {382 matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],383};384```385~386## 5. דפוסי וייבקודינג מתקדמים387~388### פרומפטינג איטרטיבי389~390הסוד לוייבקודינג אפקטיבי הוא **איטרציה**. אל תנסו לתאר הכל בפרומפט אחד. התקדמו בשלבים:391~392```393שלב 1: "Create the base layout with header and sidebar"394שלב 2: "Add the project list in the sidebar with a button to create new ones"395שלב 3: "Create the Kanban view in the main area"396שלב 4: "Add drag & drop between columns"397שלב 5: "Implement the modal to create new tasks"398שלב 6: "Add toast notifications for user feedback"399```400~401> **טיפ:** ככל שהפרומפט ספציפי וקונטקסטואלי יותר, כך התוצאה טובה יותר. ל-Claude Code יש גישה לכל בסיס הקוד, כך שהוא יכול לשלב פיצ'רים חדשים בצורה קוהרנטית.402~403### טיפול בשגיאות404~405כשמשהו לא עובד (וזה יקרה), אפשר פשוט לומר:406~407```408You: I'm getting this error in the console: "TypeError: Cannot read property409'map' of undefined" in the TaskList component. Fix it.410```411~412Claude Code ינתח את הקוד, יזהה את הבעיה ויתקן אותה.413~414### ריפקטורינג עם AI415~416```417You: The Dashboard component has become too large. Split it into smaller,418reusable components while maintaining the same functionality.419```420~421### בדיקות422~423```424You: Add tests with Vitest for utility functions and Playwright tests for425the authentication and task creation flow.426```427~428## 6. פריסה ב-Vercel: מקוד לעולם429~430### שלב 1: Push ל-GitHub431~432```433You: Create an appropriate .gitignore, commit everything, and push to a new434GitHub repository called "my-demo-app".435```436~437```bash438git add .439git commit -m "feat: complete task management demo"440gh repo create my-demo-app --public --push --source=.441```442~443### שלב 2: חבר את Vercel444~4451. עבור ל-[vercel.com](https://vercel.com) ולחץ על "Add New Project."4462. ייבא את מאגר ה-GitHub שיצרת זה עתה.4473. הוסף משתני סביבה:448 - `NEXT_PUBLIC_SUPABASE_URL`449 - `NEXT_PUBLIC_SUPABASE_ANON_KEY`4504. לחץ על "Deploy."451~452```mermaid453flowchart LR454 A[GitHub Push] --> B[Vercel Build]455 B --> C[Automatic Deploy]456 C --> D[Public URL]457 D --> E[Global CDN]458```459~460### שלב 3: הגדר דומיין מותאם אישית (אופציונלי)461~462Vercel מספקת URL חינמי כמו `my-demo-app.vercel.app`. לדומיין מותאם אישית:463~464```465You: Add the configuration for a custom domain in vercel.json466```467~468### פריסות תצוגה מקדימה469~470בכל פעם שפותחים Pull Request ב-GitHub, Vercel יוצרת אוטומטית **פריסת תצוגה מקדימה** עם URL ייחודי. מושלם להצגת שינויים לפני merge.471~472## 7. אופטימיזציות לדמו שלך473~474### ביצועים475~476```477You: Optimize the app's performance:4781. Add loading states with Suspense and skeletons4792. Implement caching with Next.js unstable_cache4803. Optimize images with next/image4814. Add SEO metadata for each page482```483~484### Realtime עם Supabase485~486פיצ'ר שתמיד מרשים בדמואים הוא **realtime**:487~488```489You: Add realtime synchronization for tasks using Supabase Realtime.490When a user updates a task, all other users should see the change491in real time without refreshing.492```493~494```typescript495'use client';496~497import { useEffect, useState } from 'react';498import { createClient } from '@/lib/supabase/client';499import type { Task } from '@/types/database';500~501export function useRealtimeTasks(projectId: string) {502 const [tasks, setTasks] = useState<Task[]>([]);503 const supabase = createClient();504~505 useEffect(() => {506 const channel = supabase507 .channel('tasks-changes')508 .on(509 'postgres_changes',510 {511 event: '*',512 schema: 'public',513 table: 'tasks',514 filter: `project_id=eq.${projectId}`,515 },516 (payload) => {517 if (payload.eventType === 'INSERT') {518 setTasks((prev) => [...prev, payload.new as Task]);519 } else if (payload.eventType === 'UPDATE') {520 setTasks((prev) =>521 prev.map((t) =>522 t.id === payload.new.id ? (payload.new as Task) : t523 )524 );525 } else if (payload.eventType === 'DELETE') {526 setTasks((prev) =>527 prev.filter((t) => t.id !== payload.old.id)528 );529 }530 }531 )532 .subscribe();533~534 return () => {535 supabase.removeChannel(channel);536 };537 }, [projectId, supabase]);538~539 return tasks;540}541```542~543### מצב כהה544~545```546You: Add dark mode support with a toggle in the header.547Use Tailwind dark classes and save the preference in localStorage.548```549~550## 8. שיטות עבודה מומלצות לוייבקודינג אפקטיבי551~552### 1. היו ספציפיים בפרומפטים553~554```555❌ "Make a nice page"556✅ "Create a landing page with a hero section with a purple-blue gradient,557 a features section with 3 cards with icons, and an orange CTA button"558```559~560### 2. ספקו הקשר561~562```563❌ "Add authentication"564✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App565 Router with TypeScript. I want email/password login and OAuth with GitHub.566 Use the SSR pattern with @supabase/ssr"567```568~569### 3. בצעו איטרציות בצעדים קטנים570~571אל תנסו לבנות הכל בפרומפט אחד. התקדמו בהדרגה:572~5731. פריסה בסיסית5742. פיצ'ר אחד בכל פעם5753. עיצוב וליטוש5764. טיפול בשגיאות5775. בדיקות578~579### 4. בדקו את הקוד שנוצר580~581וייבקודינג לא אומר לא לקרוא את הקוד. תמיד בדקו:582~583- **אבטחה**: מדיניות RLS, אימות קלט, סניטיזציית נתונים.584- **ביצועים**: שאילתות N+1, רכיבי צד לקוח מיותרים.585- **שיטות עבודה מומלצות**: מבנה פרויקט, מוסכמות שמות.586~587### 5. השתמשו ב-Git באסטרטגיה588~589```590You: Commit the changes with a descriptive message after each completed feature.591```592~593זה מאפשר לחזור לגרסה קודמת אם משהו משתבש.594~595## 9. עלויות: האם זה באמת הכל בחינם?596~597הנה פירוט עלויות לכל שירות:598~599| שירות | תוכנית חינמית | מתי משלמים |600|---------|-----------|-------------|601| **Claude Code** | דורש מנוי Anthropic (מ-$20/חודש) או מפתח API | מיד, אבל הערך עצום |602| **Supabase** | שכבה חינמית נדיבה (2 פרויקטים, 500MB DB) | מעבר למגבלות השכבה החינמית |603| **Vercel** | שכבה חינמית לפרויקטים אישיים | לצוותים או שימוש מסחרי |604| **GitHub** | חינם למאגרים ציבוריים ופרטיים | תכונות Enterprise |605~606> **הערה:** Claude Code דורש מנוי או קרדיטי API, אבל ההחזר על ההשקעה מבחינת מהירות הפיתוח יוצא דופן. עבור דמו או MVP, העלות הכוללת היא בסביבות $20.607~608### אלטרנטיבות AI חינמיות609~610אם רוצים לשמור על עלויות אפסיות, אפשר להשתמש ב:611~612- **Cursor** (שכבה חינמית עם מגבלות).613- **GitHub Copilot** (חינם לסטודנטים ולקוד פתוח).614- **Codeium/Windsurf** (שכבה חינמית נדיבה).615~616## 10. מדמו למוצר: השלבים הבאים617~618ברגע שהדמו שלך חי, כך להמשיך:619~620```mermaid621flowchart TD622 A[Live Demo] --> B{User Feedback}623 B --> C[Product Iteration]624 C --> D[Product-Market Fit]625 D --> E[Scaling]626 E --> F[Supabase Pro Plan]627 E --> G[Vercel Pro Plan]628 E --> H[Custom Domain]629```630~6311. **אספו משוב**: שתפו את הדמו עם משתמשים פוטנציאליים ואספו דעות.6322. **בצעו איטרציות מהירות**: השתמשו בוייבקודינג ליישום השינויים המבוקשים.6333. **עקבו אחר מדדים**: Vercel Analytics ו-Supabase Dashboard נותנים לכם נתונים חיוניים.6344. **הרחיבו כשצריך**: שדרגו לתוכניות בתשלום רק כשאימתתם את הביקוש.635~636~637## סיכום638~639וייבקודינג עם Claude Code, Supabase ו-Vercel מייצג שילוב חזק לבניית דמואים ו-MVP בזמן שיא. מה שנהג לקחת שבועות פיתוח ניתן כעת להשיג תוך שעות בודדות, עם רמת איכות גבוהה להפתיע.640~641המפתח הוא לגשת לוייבקודינג עם חשיבה נכונה: זה לא על "לא לדעת לתכנת" אלא על **הגברת היכולות שלך** עם כלי AI. ככל שאתה יודע יותר על הטכנולוגיות הבסיסיות (React, SQL, אימות, פריסה), כך תהיה יעיל יותר בהנחיית סוכן ה-AI לתוצאה הרצויה.642~643עתיד פיתוח התוכנה כאן, ועלות ההתחלה מעולם לא הייתה נמוכה יותר. צרו את הדמו שלכם, אמתו אותו עם משתמשים אמיתיים, ובנו את המוצר הגדול הבא.644~645> **רשימת בדיקה לדמו הראשון שלך:**646>647> - [x] Claude Code מותקן ומוגדר648> - [x] פרויקט Supabase נוצר עם סכמת מסד נתונים649> - [x] פרויקט Next.js מאותחל עם shadcn/ui650> - [x] אימות מוגדר651> - [x] CRUD מלא מיושם652> - [x] UI מודרני ורספונסיבי653> - [x] נפרס ב-Vercel654> - [x] URL לשיתוף מוכן למשוב655~
NORMAL · create-demo-claude-code-vibecoding.md [readonly]655 lines · :q to close