İlk Vibecoding Projen: 1 Saatte Çalışan Bir Web Uygulaması Yap

Vibecoding'i öğrenmenin en iyi yolu, okumak değil yapmak. Teorik bilgi elbette önemli ama gerçek öğrenme, ilk projeni hayata geçirdiğin anda başlıyor. Bu rehberde seni adım adım yönlendireceğiz: 1 saat içinde, sıfırdan çalışan bir görev yönetim uygulaması yapacaksın.

Kod bilmene gerek yok. Tek ihtiyacın olan şey, bilgisayarında Claude Code'un kurulu olması ve bu rehberi takip etmen. Hazırsan başlayalım.

Ne Yapacağız?

Bu rehberde basit ama tam işlevsel bir görev yönetim uygulaması (to-do app) yapacağız. Uygulamamız şu özelliklere sahip olacak:

• Görev ekleme: Bir metin kutusu ve "Ekle" butonu ile yeni görevler oluşturabileceksin
• Görev listeleme: Eklediğin görevler bir liste halinde ekranda görünecek
• Görev tamamlama: Bir göreve tıklayarak "tamamlandı" olarak işaretleyebileceksin (üstü çizili olacak)
• Görev silme: İstemediğin görevleri listeden kaldırabileceksin
• Güzel tasarım: Modern, temiz ve mobil uyumlu bir arayüz

"Bu çok basit bir uygulama" diye düşünebilirsin. Haklısın — ama mesele uygulamanın karmaşıklığı değil. Mesele vibecoding sürecini öğrenmek. Bu projede öğrendiğin iş akışını daha sonra çok daha büyük projelerde kullanacaksın. İlk projen her zaman basit olmalı ki sürece odaklanabilesin.

Hazırlık

Başlamadan önce bilgisayarında şunların kurulu olması gerekiyor:

1. Node.js: Claude Code'un çalışması için gerekli. Kurulu değilse Claude Code kurulum rehberimizi takip et.
2. Claude Code: Terminal'e claude --version yazarak kurulu olup olmadığını kontrol edebilirsin. Kurulu değilse npm install -g @anthropic-ai/claude-code komutu ile yükle.
3. Claude hesabı: Claude Code'u ilk kez çalıştırdığında Anthropic hesabınla giriş yapman gerekecek. Hesabın yoksa claude.ai üzerinden oluşturabilirsin.

Her şey hazırsa, harika. Terminal'ini aç ve başlayalım.

Adım 1 — Projeyi Başlat

İlk adım olarak proje için bir klasör oluşturacağız ve Claude Code'u başlatacağız. Terminal'ine şu komutları yaz:

mkdir gorev-uygulamasi

cd gorev-uygulamasi

claude

Son komutla Claude Code açılacak. Karşına bir sohbet ekranı gelecek — tıpkı ChatGPT veya Claude ile sohbet eder gibi. Ama bu sefer AI sadece konuşmuyor, aynı zamanda bilgisayarında dosyalar oluşturuyor ve kod yazıyor.

Claude Code açıldıktan sonra, projeyi tanımla. Şu şekilde bir talimat yaz:

"Bir görev yönetim uygulaması yapmak istiyorum. Kullanıcılar görev ekleyebilsin, tamamladıklarını işaretleyebilsin ve silebilsin. Basit, temiz ve modern bir tasarım olsun. Türkçe arayüz istiyorum."

Bu talimat Claude Code'a projenin genel amacını anlatıyor. İlk adımda genel resmi çizmek önemli — detayları sonra vereceğiz. Claude Code sana birkaç soru sorabilir veya doğrudan önerisini sunabilir. Genellikle hangi teknolojiyi kullanmak istediğini sorar.

Adım 2 — Temel Yapıyı Kur

Claude Code muhtemelen sana bir teknoloji önerecek. Biz bu projede Next.js kullanacağız çünkü hem öğrenmesi kolay hem de ilerideki projelerin için sağlam bir temel oluşturuyor. Claude Code'a şöyle de:

"Next.js kullanarak projeyi oluştur. TypeScript ve Tailwind CSS kullanalım. Projenin temel yapısını kur ve çalıştığından emin ol."

Claude Code şimdi birkaç şey yapacak:

• Next.js projesini oluşturacak (create-next-app komutu ile)
• Gerekli bağımlılıkları yükleyecek
• TypeScript ve Tailwind CSS yapılandırmasını ayarlayacak
• Basit bir ana sayfa oluşturacak

Bu işlem 1-2 dakika sürebilir. Claude Code her adımda ne yaptığını sana gösterecek. İşlem bittiğinde sana "projeyi görmek için npm run dev komutunu çalıştır" gibi bir yönlendirme yapacak.

Tarayıcında http://localhost:3000 adresine git. Boş bir sayfa veya Next.js'in varsayılan sayfasını göreceksin. Tebrikler — projenin temeli hazır!

Adım 3 — Görev Ekleme Özelliği

Şimdi uygulamanın ilk ve en temel özelliğini ekleyelim: görev ekleme. Claude Code'a şu talimatı ver:

"Ana sayfada bir görev ekleme formu oluştur. Üstte bir metin kutusu (input) olsun, yanında 'Ekle' butonu olsun. Kullanıcı bir görev yazıp butona tıkladığında veya Enter'a bastığında, görev altta bir listede görünsün. Görevler state'te tutulsun. Sayfa başlığı 'Görev Yöneticisi' olsun."

Bu talimatın ne kadar spesifik olduğuna dikkat et. Vibecoding'de net talimat vermek çok önemli. "Görev ekleme özelliği yap" demek yerine, neyin nerede olacağını ve nasıl davranacağını tarif etmek çok daha iyi sonuç verir.

Claude Code şimdi ana sayfa dosyasını güncelleyecek. Bir React bileşeni oluşturacak, state yönetimini kuracak, formu ve listeyi kodlayacak. İşlem bittiğinde tarayıcını yenile — metin kutusu, buton ve görev listesini göreceksin.

Bir görev yazıp "Ekle" butonuna tıkla. Görevin listede belirmesi gerekiyor. Birkaç görev daha ekle ve listenin düzgün çalıştığını doğrula.

Eğer bir şey beklendiği gibi çalışmıyorsa — mesela buton tıklanınca hiçbir şey olmuyorsa — endişelenme. Claude Code'a hatayı anlat:

"Ekle butonuna tıklıyorum ama görev listeye eklenmiyor. Bunu düzelt."

Claude Code hatanın sebebini bulacak ve düzeltecek. Bu vibecoding'in güzelliği — hata ayıklama (debugging) bile doğal dille yapılıyor.

Adım 4 — Tamamlama ve Silme

Görev ekleme çalışıyorsa, şimdi tamamlama ve silme özelliklerini ekleyelim. Claude Code'a şöyle de:

"Her görevin solunda bir checkbox olsun. Checkbox'a tıklayınca görev 'tamamlandı' olarak işaretlensin ve görev metninin üstü çizilsin, rengi biraz soluk olsun. Her görevin sağında kırmızı bir silme butonu olsun. Silme butonuna tıklayınca görev listeden kaldırılsın. Silmeden önce onay sormasına gerek yok."

Yine çok spesifik bir talimat verdik. Checkbox'ın nerede olacağını (solda), silme butonunun nerede olacağını (sağda), tamamlanan görevin nasıl görüneceğini (üstü çizili, soluk) ve silme davranışını (onay sormadan) belirttik.

Claude Code bu değişiklikleri yapacak. Muhtemelen mevcut bileşeni güncelleyecek, her görev için bir checkbox ve silme ikonu ekleyecek, state yönetimini genişletecek.

Tarayıcını yenile ve test et:

• Yeni bir görev ekle
• Checkbox'a tıkla — üstü çizilmeli
• Tekrar tıkla — çizgi kalkmalı
• Silme butonuna tıkla — görev kaybolmalı

Her şey çalışıyorsa, tebrikler! Uygulamanın temel işlevleri hazır. Şu ana kadar muhtemelen 20-25 dakika harcadın ve tek satır kod yazmadın.

Adım 5 — Tasarımı Güzelleştir

Uygulamanın işlevleri tamam ama muhtemelen görsel olarak biraz sade duruyor. Şimdi tasarımı profesyonel bir seviyeye çıkaralım. Claude Code'a detaylı bir tasarım talimatı ver:

"Tasarımı güzelleştir. Koyu tema olsun, arka plan koyu gri (#1a1a2e gibi). Kartlar biraz daha açık renk arka plana sahip olsun. Input ve buton yuvarlak köşeli olsun. 'Ekle' butonu mavi tonlarında olsun ve hover'da biraz parlasın. Görev listesindeki öğeler arasında border olsun. Silme butonu hover'da kırmızıya dönsün. Genel olarak modern ve minimal bir tasarım olsun. Sayfanın ortasında, max-width 600px ile sınırlı olsun. Üstte büyük bir 'Görev Yöneticisi' başlığı olsun."

Bu talimatla Claude Code, Tailwind CSS sınıflarını kullanarak tüm bileşenlerin stilini güncelleyecek. Renk paleti, köşe yuvarlaklıkları, boşluklar, hover efektleri — hepsini tek seferde ayarlayacak.

Sonucu gördüğünde beğenmediğin küçük şeyler olabilir. Bu çok normal. Vibecoding'de iterasyon çok önemli. Mesela:

"Başlığın altına 'Bugün ne yapacaksın?' diye küçük bir alt başlık ekle. Gri renkte ve italik olsun."

Ya da:

"Görev eklendiğinde yumuşak bir animasyon olsun, görev yukarıdan aşağı kayarak gelsin."

Her küçük değişiklik için Claude Code'a bir talimat veriyorsun ve o anında uyguluyor. Bu süreç, bir tasarımcıyla çalışmak gibi — sen yönlendiriyorsun, o hayata geçiriyor.

Adım 6 — Yayına Al

Uygulaman hazır ve güzel görünüyor. Şimdi onu internete koyalım ki herkes görebilsin. Bunun için Vercel kullanacağız — Next.js projelerini yayınlamak için en kolay platform.

Claude Code'a şöyle de:

"Bu projeyi Vercel'e deploy etmek istiyorum. Bana adımları anlat."

Claude Code sana şu adımları yönlendirecek:

1. GitHub'a yükle: Projenin bir Git repository olarak GitHub'a yüklenmesi gerekiyor. Claude Code bunu senin için yapabilir — "Bu projeyi Git ile başlat ve GitHub'a yükle" de.
2. Vercel hesabı oluştur: vercel.com adresine gidip GitHub hesabınla giriş yap.
3. Projeyi bağla: Vercel'de "New Project" diyerek GitHub'daki repository'ni seç.
4. Deploy et: Vercel otomatik olarak projeyi derleyip yayına alacak.

Birkaç dakika içinde sana bir URL verecek — mesela gorev-uygulamasi.vercel.app. Bu URL'yi arkadaşlarınla, ailenle paylaşabilirsin. Telefondan da açılacak çünkü responsive tasarım Tailwind CSS ile otomatik geliyor.

İşte bu kadar. 1 saatte, sıfırdan çalışan ve internette yayınlanan bir web uygulaması yaptın. Tek satır kod yazmadın — tüm işi Claude Code yaptı, sen yönlendirdin.

İlk Projenin Ardından

Bu projede aslında çok şey öğrendin, farkında olmasan bile:

• Vibecoding iş akışı: Talimat ver → sonucu gör → düzelt → tekrarla. Bu döngüyü her projede kullanacaksın.
• Net talimat verme: AI'a ne kadar spesifik talimat verirsen o kadar iyi sonuç alırsın. Bu beceri zamanla gelişecek.
• İteratif geliştirme: Her şeyi tek seferde mükemmel yapmaya çalışma. Adım adım ilerle, her adımda test et.
• Hata yönetimi: Bir şey çalışmıyorsa panik yapma. Hatayı Claude Code'a anlat, o düzeltsin.
• Deployment: Bir uygulamayı internete koymanın ne kadar kolay olduğunu gördün.

Sıradaki adım olarak şunları deneyebilirsin:

• Görevlere kategori ekle: "İş", "Kişisel", "Alışveriş" gibi kategoriler ve filtreleme
• Veritabanı bağla: Görevlerin sayfa yenilendiğinde kaybolmaması için Supabase veya Firebase ekle
• Kullanıcı girişi ekle: Herkesin kendi görev listesini görmesi için kimlik doğrulama
• Bildirimler ekle: Görev hatırlatmaları için zamanlayıcı özelliği

Bu özelliklerin her biri, aynı vibecoding iş akışıyla eklenebilir. Tek fark, talimatların biraz daha detaylı olacak. Ama artık süreci biliyorsun.

Daha büyük bir projeye hazır hissediyorsan, vibecoding ile MVP geliştirme rehberimize göz at. Orada bir fikri gerçek bir ürüne dönüştürme sürecini anlattık.

Sonuç

İlk vibecoding projen, büyük projelerin kapısını açan anahtar. Bu rehberde gördün ki kod bilmeden, sadece doğal dille talimat vererek çalışan bir web uygulaması yapmak mümkün. Üstelik saatler veya günler değil, 1 saat sürüyor.

Vibecoding'de en önemli adım, ilk adımı atmak. Şu ana kadar bu yazıyı okudun — şimdi sıra uygulamada. Terminal'ini aç, Claude Code'u başlat ve ilk projenle tanış. Emin ol, ilk "tamamlandı" görevine checkbox koyduğunda gülümseyeceksin.

Claude Code'u henüz kurmadıysan, Claude Code kurulum rehberimiz ile 10 dakikada hazır olabilirsin. Vibecoding'in no-code araçlarından farkını merak ediyorsan, o yazımız da seni bekliyor.