Claude Code ile Demo Nasıl Oluşturulur: Supabase ve Vercel ile Vibecoding

Vibecoding, programcının doğal dil talimatları aracılığıyla bir AI ajanını yönlendirdiği ve yapay zekanın gerçek kodu yazmasına izin verdiği yeni bir yazılım geliştirme paradigmasıdır. Terim, Andrej Karpathy (OpenAI kurucu ortağı ve Tesla'nın eski AI Direktörü) tarafından Şubat 2025'teki ünlü bir tweette türetildi: "Vibecoding dediğim yeni bir tür kodlama var, burada tamamen vibelara teslim oluyorsunuz, üstelleri kucaklıyorsunuz ve kodun var olduğunu bile unutuyorsunuz."

Bu yazıda, Claude Code'u AI ajanı olarak, Supabase'i backend (veritabanı, kimlik doğrulama, API) olarak ve Vercel'i dağıtım için kullanarak nasıl eksiksiz, çalışan bir demo oluşturulacağını göreceğiz — tamamı bu hizmetlerin ücretsiz katmanlarından yararlanarak.

1. Vibecoding Nedir ve Neden Devrimsel

Vibecoding, yazılım geliştirmede temel bir paradigma değişimini temsil eder. Satır satır kod yazmak yerine geliştirici:

1. Ne istediğini doğal dilde tanımlar.
2. AI ajanı tam kodu üretir.
3. Geliştirici inceler, test eder ve iterasyon yapar.

Neden İşe Yarıyor

• Hız: günler sürecek bir proje saatler içinde oluşturulabilir.
• Erişilebilirlik: uzman olmayan geliştiriciler bile çalışan ürünler oluşturabilir.
• Hızlı iterasyon: fikirleri test edip çok daha hızlı pivot yapabilirsiniz.
• Ürün odağı: nasıl yerine ne üzerinde yoğunlaşırsınız.

Vibecoding Ne Zaman Kullanılır

Vibecoding şunlar için mükemmeldir:

• Demolar ve MVP'ler: bir fikri doğrulamak için hızlıca prototip oluşturmak.
• Hackathonlar: sadece birkaç saat içinde çalışan bir ürün yaratmak.
• Yan projeler: haftalarca yatırım yapmadan yeni teknolojileri keşfetmek.
• Kavram Kanıtı: paydaşlara veya yatırımcılara teknik fizibiliteyi göstermek.

Uyarı: Vibecoding demolar ve prototipler için mükemmeldir. Yüksek güvenlik ve ölçeklenebilirlik gereksinimleri olan üretim düzeyindeki uygulamalar için üretilen kodun kapsamlı incelenmesi hâlâ gereklidir.

2. Teknoloji Yığını: Claude Code + Supabase + Vercel

Claude Code

Claude Code, Anthropic'in AI kodlama ajanıdır. Doğrudan terminalinizde çalışır ve şunları yapabilir:

• Tüm kod tabanını okuyup anlamak.
• Dosya oluşturmak, değiştirmek ve silmek.
• Terminal komutları çalıştırmak.
• API'ler ve harici hizmetlerle etkileşmek.
• Git ile versiyon yönetimi yapmak.
• Hata ve buglar üzerinde otonom olarak iterasyon yapmak.

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Start in a project directory
cd my-project
claude

Supabase (Ücretsiz Katman)

Supabase, şunları sunan açık kaynaklı bir Firebase alternatifidir:

• PostgreSQL Veritabanı: eksiksiz bir ilişkisel veritabanı.
• Kimlik Doğrulama: e-posta, Google, GitHub vb. ile giriş.
• REST ve Realtime API'ler: şemanızdan otomatik oluşturulur.
• Depolama: dosyalar ve görseller için.
• Edge Functions: sunucusuz fonksiyonlar.

Ücretsiz katman şunları içerir:

| Kaynak | Ücretsiz Limit | |----------|-----------| | Veritabanı | 500 MB | | Depolama | 1 GB | | Bant genişliği | 5 GB | | Edge Function çağrıları | 500K/ay | | Kimliği doğrulanmış kullanıcılar | Sınırsız | | Projeler | 2 aktif proje |

Vercel (Ücretsiz Katman)

Vercel, Next.js uygulamaları için mükemmel dağıtım platformudur:

• GitHub'dan otomatik dağıtım.
• Her dal ve PR için önizleme dağıtımları.
• Optimum performans için küresel CDN.
• Serverless Functions dahil.
• Ücretsiz temel analitik.

Ücretsiz katman şunları içerir:

| Kaynak | Ücretsiz Limit | |----------|-----------| | Bant genişliği | 100 GB/ay | | Serverless Function çalıştırma | 100 GB-saat/ay | | Derlemeler | 6.000 dakika/ay | | Projeler | Sınırsız | | Dağıtımlar | Sınırsız |

3. İlk Kurulum: Ortamı Hazırlamak

Ön Koşullar

Başlamadan önce şunlara sahip olduğunuzdan emin olun:

• Node.js 18+ kurulu.
• Git yapılandırılmış.
• Bir GitHub hesabı.
• Bir Supabase hesabı (supabase.com'da ücretsiz).
• Bir Vercel hesabı (vercel.com'da ücretsiz).
• Claude Code kurulu (npm install -g @anthropic-ai/claude-code).

Adım 1: Projeyi Oluşturun

Terminali açın ve Claude Code'u başlatın:

mkdir my-demo-app && cd my-demo-app
claude

Artık Claude Code'a doğal dilde talimatlar vermeye başlayabilirsiniz:

You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
and shadcn/ui. Also initialize a Git repository.

Claude Code otomatik olarak şunları çalıştıracaktır:

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
npx shadcn@latest init
git init && git add . && git commit -m "Initial commit"

Adım 2: Supabase'i Yapılandırın

1. supabase.com'a gidin ve yeni bir proje oluşturun.
2. Settings > API'den Project URL ve anon key'i not edin.
3. Claude Code'un olduğu terminale dönün:

You: Add Supabase to the project. Create a .env.local file with the variables
NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
Supabase client with SSR support for Next.js App Router.

Claude Code tam yapılandırmayı oluşturacaktır:

// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          );
        },
      },
    }
  );
}

4. Demoyu Oluşturmak: Görev Yönetimi Uygulaması

Somut bir demo oluşturalım: kimlik doğrulama, tam CRUD ve modern arayüze sahip bir görev yönetimi uygulaması.

Veritabanı Şemasını Tanımlamak

Şemayı oluşturmak için Claude Code'a talimatlar verin:

You: Create a SQL migration for Supabase with the following tables:

1. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
   created_at
2. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
   to profiles), created_at
3. tasks: id (uuid), title (text), description (text), status (enum:
   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
   created_at, updated_at

Enable Row Level Security on all tables and create appropriate policies.

Claude Code eksiksiz bir migrasyon oluşturacaktır:

-- Create enum types
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

-- Profiles table
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Projects table
CREATE TABLE projects (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tasks table
CREATE TABLE tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  status task_status DEFAULT 'todo',
  priority task_priority DEFAULT 'medium',
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
  assigned_to UUID REFERENCES profiles(id),
  due_date TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Profiles policies
CREATE POLICY "Users can view own profile"
  ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);

-- Projects policies
CREATE POLICY "Users can view own projects"
  ON projects FOR SELECT USING (auth.uid() = owner_id);
CREATE POLICY "Users can create projects"
  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
CREATE POLICY "Users can update own projects"
  ON projects FOR UPDATE USING (auth.uid() = owner_id);
CREATE POLICY "Users can delete own projects"
  ON projects FOR DELETE USING (auth.uid() = owner_id);

-- Tasks policies
CREATE POLICY "Users can view tasks in their projects"
  ON tasks FOR SELECT USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can create tasks in their projects"
  ON tasks FOR INSERT WITH CHECK (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can update tasks in their projects"
  ON tasks FOR UPDATE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can delete tasks in their projects"
  ON tasks FOR DELETE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );

Bu migrasyonu doğrudan Supabase panelinden (SQL Editor) veya CLI üzerinden çalıştırabilirsiniz.

TypeScript Tipleri Oluşturma

You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts

Kullanıcı Arayüzünü Oluşturmak

Şimdi vibecoding'in en güçlü kısmı gelir. Claude Code'a üst düzey talimatlar verin:

You: Create a dashboard page for the task management app with:

1. Sidebar with navigation between projects
2. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3. Modal to create/edit tasks
4. Header with user avatar and logout
5. Modern design with shadcn/ui and Tailwind

Use data from Supabase with React Server Components where possible
and Client Components only where interactivity is needed.

Claude Code tüm arayüzü bileşen bileşen oluşturacaktır.

Kimlik Doğrulama Ekleme

You: Add a complete authentication system with:

1. Login page with email/password and GitHub login
2. Registration page
3. Middleware to protect authenticated routes
4. Automatic redirect for unauthenticated users
5. Automatic profile creation after registration

Claude Code, Next.js middleware ve auth sayfalarını yapılandıracaktır:

// src/middleware.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();

  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
    const url = request.nextUrl.clone();
    url.pathname = '/auth/login';
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
};

5. İleri Düzey Vibecoding Kalıpları

İteratif Prompting

Etkili vibecoding'in sırrı iterasyondur. Tek bir promptta her şeyi tanımlamaya çalışmayın. Adım adım ilerleyin:

Step 1: "Create the base layout with header and sidebar"
Step 2: "Add the project list in the sidebar with a button to create new ones"
Step 3: "Create the Kanban view in the main area"
Step 4: "Add drag & drop between columns"
Step 5: "Implement the modal to create new tasks"
Step 6: "Add toast notifications for user feedback"

İpucu: Prompt ne kadar spesifik ve bağlamsallaştırılmışsa, sonuç o kadar iyi olur. Claude Code tüm kod tabanına erişim sağlar, böylece yeni özellikleri tutarlı bir şekilde entegre edebilir.

Hata İşleme

Bir şey çalışmadığında (ve çalışmayacaktır), basitçe şöyle diyebilirsiniz:

You: I'm getting this error in the console: "TypeError: Cannot read property
'map' of undefined" in the TaskList component. Fix it.

Claude Code kodu analiz edecek, sorunu belirleyecek ve düzeltecektir.

AI ile Yeniden Yapılandırma

You: The Dashboard component has become too large. Split it into smaller,
reusable components while maintaining the same functionality.

Test

You: Add tests with Vitest for utility functions and Playwright tests for
the authentication and task creation flow.

6. Vercel'e Dağıtım: Koddan Dünyaya

Adım 1: GitHub'a Push

You: Create an appropriate .gitignore, commit everything, and push to a new
GitHub repository called "my-demo-app".

git add .
git commit -m "feat: complete task management demo"
gh repo create my-demo-app --public --push --source=.

Adım 2: Vercel'i Bağlayın

1. vercel.com'a gidin ve "Add New Project"a tıklayın.
2. Az önce oluşturduğunuz GitHub deposunu içe aktarın.
3. Ortam değişkenlerini ekleyin:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. "Deploy"a tıklayın.

Adım 3: Özel Alan Adı Yapılandırın (İsteğe Bağlı)

Vercel my-demo-app.vercel.app gibi ücretsiz bir URL sağlar. Özel alan adı için:

You: Add the configuration for a custom domain in vercel.json

Önizleme Dağıtımları

GitHub'da her Pull Request açtığınızda, Vercel benzersiz bir URL ile otomatik olarak bir önizleme dağıtımı oluşturacaktır. Birleştirmeden önce değişiklikleri göstermek için mükemmel.

7. Demonuz İçin Optimizasyonlar

Performans

You: Optimize the app's performance:
1. Add loading states with Suspense and skeletons
2. Implement caching with Next.js unstable_cache
3. Optimize images with next/image
4. Add SEO metadata for each page

Supabase ile Gerçek Zamanlı

Demolarda her zaman etkileyen bir özellik gerçek zamanlıdır:

You: Add realtime synchronization for tasks using Supabase Realtime.
When a user updates a task, all other users should see the change
in real time without refreshing.

'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@/lib/supabase/client';
import type { Task } from '@/types/database';

export function useRealtimeTasks(projectId: string) {
  const [tasks, setTasks] = useState<Task[]>([]);
  const supabase = createClient();

  useEffect(() => {
    const channel = supabase
      .channel('tasks-changes')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'tasks',
          filter: `project_id=eq.${projectId}`,
        },
        (payload) => {
          if (payload.eventType === 'INSERT') {
            setTasks((prev) => [...prev, payload.new as Task]);
          } else if (payload.eventType === 'UPDATE') {
            setTasks((prev) =>
              prev.map((t) =>
                t.id === payload.new.id ? (payload.new as Task) : t
              )
            );
          } else if (payload.eventType === 'DELETE') {
            setTasks((prev) =>
              prev.filter((t) => t.id !== payload.old.id)
            );
          }
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [projectId, supabase]);

  return tasks;
}

Karanlık Mod

You: Add dark mode support with a toggle in the header.
Use Tailwind dark classes and save the preference in localStorage.

8. Etkili Vibecoding İçin En İyi Uygulamalar

1. Promptlarınızda Spesifik Olun

❌ "Make a nice page"
✅ "Create a landing page with a hero section with a purple-blue gradient,
   a features section with 3 cards with icons, and an orange CTA button"

2. Bağlam Sağlayın

❌ "Add authentication"
✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App
   Router with TypeScript. I want email/password login and OAuth with GitHub.
   Use the SSR pattern with @supabase/ssr"

3. Küçük Adımlarla İterasyon Yapın

Tek bir promptta her şeyi oluşturmaya çalışmayın. Kademeli olarak ilerleyin:

1. Temel düzen
2. Bir seferde bir özellik
3. Stil ve cilalama
4. Hata işleme
5. Test

4. Üretilen Kodu İnceleyin

Vibecoding, kodu okumamak anlamına gelmez. Her zaman inceleyin:

• Güvenlik: RLS politikaları, girdi doğrulama, veri temizleme.
• Performans: N+1 sorgular, gereksiz istemci tarafı bileşenler.
• En iyi uygulamalar: proje yapısı, isimlendirme kuralları.

5. Git'i Stratejik Kullanın

You: Commit the changes with a descriptive message after each completed feature.

Bu, bir şeyler ters gittiğinde geri almanıza olanak tanır.

9. Maliyetler: Gerçekten Hepsi Ücretsiz mi?

Her hizmet için maliyet analizi:

| Hizmet | Ücretsiz Plan | Ne Zaman Ödeme Yaparsınız | |---------|-----------|-------------| | Claude Code | Anthropic planı (aylık $20'dan başlayan) veya API anahtarı gerektirir | Hemen, ama değeri muazzam | | Supabase | Cömert ücretsiz katman (2 proje, 500MB DB) | Ücretsiz katman limitlerini aşınca | | Vercel | Kişisel projeler için ücretsiz katman | Takımlar veya ticari kullanım için | | GitHub | Genel ve özel depolar için ücretsiz | Kurumsal özellikler |

Not: Claude Code bir abonelik veya API kredisi gerektirir, ancak geliştirme hızı açısından yatırım getirisi olağanüstüdür. Bir demo veya MVP için toplam maliyet $20 civarındadır.

Ücretsiz AI Alternatifleri

Maliyetleri mutlak sıfırda tutmak istiyorsanız:

• Cursor (sınırlamalı ücretsiz katman).
• GitHub Copilot (öğrenciler ve açık kaynak için ücretsiz).
• Codeium/Windsurf (cömert ücretsiz katman).

10. Demodan Ürüne: Sonraki Adımlar

Demonuz canlı olduktan sonra nasıl ilerleyeceğiniz:

1. Geri bildirim toplayın: demoyu potansiyel kullanıcılarla paylaşın ve görüşleri toplayın.
2. Hızlı iterasyon yapın: talep edilen değişiklikleri uygulamak için vibecoding kullanın.
3. Metrikleri izleyin: Vercel Analytics ve Supabase Dashboard size gerekli verileri sağlar.
4. Gerektiğinde ölçeklendirin: talebi doğruladıktan sonra ücretli planlara geçin.

Sonuç

Claude Code, Supabase ve Vercel ile vibecoding, rekor sürede demo ve MVP oluşturmak için güçlü bir kombinasyonu temsil eder. Eskiden haftalarca geliştirme gerektiren şeyler artık şaşırtıcı derecede yüksek kalitede sadece birkaç saatte başarılabilir.

Anahtar, vibecoding'e doğru zihniyetle yaklaşmaktır: bu "kod yazmayı bilmemek" değil, AI araçlarıyla yeteneklerinizi güçlendirmektir. Temel teknolojiler (React, SQL, kimlik doğrulama, dağıtım) hakkında ne kadar çok bilirseniz, AI ajanını istenen sonuca yönlendirmede o kadar etkili olursunuz.

Yazılım geliştirmenin geleceği burada ve başlama maliyeti hiç bu kadar düşük olmamıştı. Demonuzu oluşturun, gerçek kullanıcılarla doğrulayın ve bir sonraki büyük ürünü inşa edin.

İlk demonuz için kontrol listesi:

• [x] Claude Code kuruldu ve yapılandırıldı
• [x] Veritabanı şemasıyla Supabase projesi oluşturuldu
• [x] shadcn/ui ile Next.js projesi başlatıldı
• [x] Kimlik doğrulama yapılandırıldı
• [x] Tam CRUD uygulandı
• [x] Modern ve duyarlı UI
• [x] Vercel'e dağıtıldı
• [x] Geri bildirim için paylaşılabilir URL hazır