4 Saatte MVP, 24 Saatte Profesyonel Ürün: React 19 ve AI ile Portföy Geliştirme Macerası

Bir yazılım geliştirici olarak en büyük düşmanım teknik zorluklar değil, "kararsızlık". Özellikle kendi projem söz konusu olduğunda, "Hangi renk olsun?", "Buton nerede dursun?" soruları arasında boğulup (Analysis Paralysis), projeyi genelde yarım bırakırım.

Ancak bu hafta sonu, bu döngüyü kırmak için "AI-First" (Önce Yapay Zeka) dediğim bir yaklaşım denedim.

Hedefim basitti: Mükemmeliyetçiliği bir kenara bırakıp, en güncel teknolojilerle (React 19, Tailwind 4) olabilecek en kısa sürede canlıya çıkmak. İşte bu sürecin hikayesi.

Bölüm 1: Yapay Zeka ile 4 Saatlik Sprint (0'dan %80'e)

Süreci bir fabrika bandı gibi kurguladım. Her AI modeline belirli bir rol atadım:

1. Proje Yöneticisi (Gemini 3 Pro): Kafamdaki dağınık fikirleri ("Modern olsun, yeteneklerimi göstersin") Gemini'ye anlattım. O da bunları derleyip toparladı ve bana Google Stitch için optimize edilmiş bir "prompt" (istem) hazırladı.
2. Tasarımcı (Google Stitch): Gemini'nin hazırladığı prompt'u Stitch'e verdim. "Bento Grid" yapısında, karanlık modda bir tasarım istediğimi belirttim.

Ve işte o an... Stitch bana saniyeler içinde şu çıktıyı verdi:

Stitch tarafından üretilen ve projeye ilham veren ilk ham tasarım.

Bu görseli gördüğüm an, "Tamam, bunu yapıyoruz" dedim. Kararsızlık saniyeler içinde bitmişti. HTML/CSS çıktısını alıp bir sonraki aşamaya geçtim.

1. Geliştirici (Claude 4.5 Sonnet): Tasarım kodu hazırdı ama bunu React 19, TypeScript 5.7 ve Tailwind CSS 4.0 gibi "bleeding edge" (en yeni) teknolojilere entegre etmek gerekiyordu. Claude burada inanılmaz bir iş çıkardı ve sabaha karşı sitenin ilk versiyonunu (MVP) yayına aldım.

Bölüm 2: İterasyon ve Profesyonelleşme (%80'den %100'e)

İlk versiyonu 4 saatte yayına aldım. Ancak bir Frontend Geliştirici olarak hedefim sadece "hızlı" olmak değil, aynı zamanda yaşayan, ölçeklenebilir ve profesyonel bir ürün ortaya koymaktı.

Bu yüzden ikinci bir sprint başlatarak projeyi "AI demosundan" çıkarıp "Profesyonel Ürün"e dönüştürdüm.

1. Tasarımın "Terbiye Edilmesi"

İlk çıktıdaki yoğun neon yeşili temasını revize ettim. Yerine Vercel veya Linear gibi modern teknoloji şirketlerinin kullandığı, güven veren "Indigo & Violet" (Çivit Mavisi ve Menekşe) tonlarına sahip sofistike bir karanlık moda geçiş yaptım. Kartların kenarlıklarını incelttim, parlamaları (glow) yumuşattım.

2. "Code Playground" Yerine "Deneyim"

Ana sayfada kocaman yer kaplayan ama sadece görsel bir öğe olan kod editörünü kaldırdım. İşe alımcılar ve ziyaretçiler için daha değerli olacağını düşündüğüm; geçmiş tecrübelerimi ve kariyer yolculuğumu anlatan bir zaman çizelgesi ekledim.

3. Backend Gücü: Firebase

Statik bir siteyle yetinmedim. Sitenin gerçekten yaşayan bir platform olması için Firebase entegrasyonu yaptım.

• İletişim Formu: Ziyaretçilerin bana ulaşabileceği, mesajların Firestore'a kaydedildiği çalışan bir form ekledim.
• Blog Altyapısı: Şu an okuduğunuz bu yazı, yine Firebase üzerinden dinamik olarak çekiliyor.

Sonuç: Araç mı, Amaç mı?

Bu süreç bana şunu öğretti: Yapay zeka (Gemini, Claude, Stitch) inanılmaz bir hızlandırıcı. Beni 0'dan 80'e sadece 4 saatte taşıdı.

Ancak o son %20'lik dilim... Yani ürünü "kullanılabilir" halden "profesyonel" hale getiren şey; insan gözü, estetik algısı ve mühendislik vizyonuydu.

Siteyi incelemek ve yeni tasarımı görmek isterseniz ana sayfaya beklerim!