Claude Code ile uygulama geliştirme: önce sat, sonra uygulamaya çevir

Müşterinin para verdiği bir sistemi Claude Code, Supabase ve Vercel ile çalışan bir web uygulamasına nasıl çevirdiğimizi adım adım öğreneceksin.

Hızlı not: Uygulamayı yazmadan önce mail at ve demo göster. Biz dört müşteri ödeme yaptıktan sonra uygulamaya geçtik.

Bu rehberin videosu: Claude Code ile Sıfırdan Yazılım Geliştirmek (1. Bölüm) (00:32:32).

Uygulamadan önce satışı test et

Elimizde ürünlerin 72 açılı görüntüsünü ve 3D modelini çıkaran bir sistem vardı. Özellikle mobilyacılar kullanıyor.

Uygulama yazmadan önce otomasyon ajansımızdan mail attık. Gelen dönüşlerle kısa toplantılar yaptık, demo ve sonuç gösterdik.

Dört müşteri ödeme yaptı. Bu bize şunu söyledi: sistem çalışıyor, üstüne sadece abonelik kurmak gerekiyor.

• E-ticarette tutan ürün nasıl test edilirse, uygulama fikri de öyle test edilir.
• Toplantı uygulamada gerekmez. Sadece hızlı doğrulama için kullandık.
• Dönüşler ne istediğini gösterir: bir ajans UGC çıktısı sordu, bu da talebin yönünü gösterdi.

1. Kısa bir mail gönder
2. Dönenlerle kısa toplantı yap
3. Demo ve sonuç göster
4. Ödeme geliyor mu bak
5. Geliyorsa uygulamaya çevir

Claude Code'u terminalde aç

Claude Code'u Visual Studio içinde kullanıyoruz. Eklentiden de eklenebilir.

Daha rahat çalışmak istiyorsan terminalden çalıştır. Önce proje klasörünü aç ve klasöre güven.

1. Visual Studio'yu indir ve aç
2. Proje klasörünü aç, güven de
3. Üst menüden yeni terminal aç
4. Terminale claude yaz

claude

Plan modunda tek prompt ile iste

Shift+Tab ile plan moduna geçiyoruz. Claude Code önce detaylı plan çıkarıyor, sonra aksiyona geçiyor.

Böylece isteğini doğru anlamış mı, işe başlamadan görürsün. Bizde Next.js ve Supabase önerdi.

Plan sorularına kısa cevap ver. Biz müşteri sadece son sürümü görsün, ürün URL ile gelsin dedik.

• Kullanıcı girişini en baştan iste.
• Web sitesi için frontend tasarım yeteneği (skill) kullandırdık. Site çok daha profesyonel çıktı.
• Aşama aşama git: önce uygulama, sonra ödeme.

Bu projeyi incele. Proje zaten bitmiş bir proje. Bunu hızlıca bir uygulamaya çevirmek istiyorum. Kullanıcı girişi olsun, onu da kur, Supabase'e bağlayabiliriz. İlk olarak müşteriler basitçe test edebilsin, sonra ödeme yapabilsin ama aşama aşama gideceğiz. Web sitesini de yap; frontend tasarım yeteneğini ve sana verdiğim detay dosyasını kullan. Uygulamanın arayüzü çok basit olsun, müşteri ürünlerini kolayca eklesin ve sonuçlarını alsın. Sistemin en son sürümünü kullan.

Supabase şifresini ver, Vercel'e yükle

Supabase'te yeni bir proje açtık. Proje bilgilerini ve API anahtarlarını Claude Code'a verdik.

Veritabanı şifresini istedi. Supabase'te arama kutusuna database password yazdık, şifreyi sıfırlayıp yeni ürettik.

Sonra Vercel'e deploy et, bana linki ver dedik.

• İki yol var: Supabase'i Claude Code kendisi kursun ya da sana her şeyi versin, sen ekle.
• İkisi de uygun.

1. Supabase'te yeni proje aç
2. Proje bilgilerini ve API anahtarlarını kopyala
3. Database password'u sıfırla ve kopyala
4. Şifreyi Claude Code'a ver
5. Vercel'e deploy ettir, linki al

Vercel'de çalışacak şekilde deploy et ve bana linkini ver.

Kendin test et, hataları geri yapıştır

Kayıt olduk, onay maili geldi, giriş yaptık. Ürün üretimi ise ilk denemede çalışmadı.

Claude Code'a üretim çalışıyor mu diye sorduk. Hayır dedi ve düzeltti.

Sonuç ekranı yoktu. Sonuçları güzel bir arayüzle göster dedik.

• Normalde tek proje için 6 terminal açmak hızlandırır. Her biri ayrı hatayı çözer.
• Antigravity'ye Vercel linkini verirsen sayfaları kullanıcı gibi gezer ve hataları kaydeder.
• O hataları kopyala, Claude Code'a yapıştır.

1. Kayıt ve giriş akışını dene
2. Asıl özelliği bir ürünle tetikle
3. Çıkan hataları topla
4. Claude Code'a yapıştır ve çözdür

Bak hatalar bunlar. Bunları çöz. Her şeyin çalıştığına emin ol.

Ödeme, domain ve kredi sonraki katman

İlk bulut sürümü çalışınca sıradakiler geldi: Stripe, domain ve kredi sistemi.

Abonelik mantığına geçmek istiyoruz. Müşteri tek seferlik ödemek yerine paket alsın.

Krediyi model masraflarına göre kurduk. Claude Code fiyatları ve Stripe kurulumunu çıkardı, sonra Stripe anahtarını istedi.

• Domaini Claude Code'a vermen yeterli. Tek promptla bağlar.
• Sonra döngü: mail gönder, içerik üret, paylaş, reklam aç, geliştir.
• Hepsini aynı anda yapma. Önce maille müşteri topla, yetmezse reklama geç.

1. Stripe'ı entegre et
2. Domain al ve bağla
3. Kredileri masrafa göre kur
4. Maillere devam et
5. İçerik ve reklama geç

Web sitesine bu görseli, bu örneği ekle. Ödeme sistemini ve ödeme kredi mantığını da yaz. Kredileri masraflara göre oluştur. Ürün üzerinden bir fiyatlandırma yapalım.

Adım adım

1. Fikri mail ve kısa demo ile test et, ödeme gelene kadar kod yazma.
2. Visual Studio'da proje klasörünü aç ve terminalde claude yaz.
3. Shift+Tab ile plan moduna geç ve uygulama, giriş ve web sitesini tek promptta iste.
4. Supabase'te proje aç, anahtarları ve veritabanı şifresini Claude Code'a ver.
5. Vercel'e deploy ettir ve linki al.
6. Kayıt, giriş ve asıl özelliği test et, hataları geri yapıştır.
7. Stripe, domain ve kredi sistemini ayrı aşamada ekle.

Örnek: 72 açılı ürün görüntüsü sistemini uygulamaya çevirmek

1. Sistem lokalde çalışıyordu: önce video üretiyor, sonra videodan 72 açı alıyordu.
2. Ajanstan mail attık, demo gösterdik ve dört müşteriye sattık.
3. Claude Code'a plan modunda projeyi inceletip uygulamaya çevirmesini istedik.
4. Supabase ve Vercel ile ilk bulut sürümünü çıkardık.
5. Ürün üretimi ve sonuç ekranındaki hataları test ederek düzelttirdik.
6. Stripe fiyatlarını ve kredi mantığını ekletip maillere devam ettik.

Sık yapılan hatalar

Kontrol listesi

• En az birkaç müşteri bu sistem için ödeme yaptı mı?
• Plan modunda çıkan plan isteğinle örtüşüyor mu?
• Supabase anahtarları ve veritabanı şifresi Claude Code'a verildi mi?
• Kayıt, onay maili ve giriş akışı çalışıyor mu?
• Asıl özellik bir gerçek ürünle sonuç üretiyor mu?
• Sonuçlar kullanıcıya bir arayüzde görünüyor mu?

Bugün şunu yap

1. Çalışan sistemin için kısa bir tanıtım maili yaz ve gönder.
2. Proje klasöründe terminali açıp claude yaz.
3. Shift+Tab ile plan moduna geç ve yukarıdaki promptu yapıştır.
4. Supabase'te yeni bir proje aç.
5. Çıkan ilk hatayı kopyalayıp Claude Code'a çözdür.

Sıkça Sorulan Sorular

Nasıl hazırlandı: Bu yazıyı Burhan Kocabıyık'ın videosundan yapay zeka yardımıyla çıkardık. Her somut bilgiyi videoyla karşılaştırıp denetledik.