full-stack / case.study
yayındaBu Portfolyo: Full-Stack Mühendislik Kanıtı
Next.js 16 App Router, Auth.js, Drizzle/Neon, Redis ve MDX ile uçtan uca üretim-dostu kişisel portfolyo.
17 Temmuz 2026
product.screens
Uygulama içi görünümler
Canlı demo yerine ürünün gerçek yüzeyleri — akış, arayüz ve mühendislik kararları burada okunur.
01·Hero · CTA · proof signals
02·Projects · P/D/I case cards
03·Guestbook · Auth.js · Neon
04·Blog · MDX · ISR
architecture.decisions
Problem → karar → etki
problem
Çözülen problem
Klasik portfolyo siteleri çoğu zaman statik vitrin gibi kalır; işe alım tarafı adayın auth, veri modeli, güvenlik, test, observability ve deploy disipliniyle nasıl düşündüğünü göremez.
decision
Mühendislik kararı
Sadece animasyonlu bir landing page yerine ürün davranışı taşıyan bir mimari seçildi: App Router + Server Components, typed MDX pipeline, Auth.js, Drizzle/Neon, Redis rate limit, Server Actions, Playwright E2E ve structured logging aynı sistemde birleştirildi.
impact
Kanıtlanan etki
Portfolyo; problem/decision/impact şablonu, CI kalite kapısı, E2E smoke testleri ve production servis planıyla 'ne yaptım' sorusundan 'nasıl mühendislik yaptım' sorusuna cevap veren deploy-ready kanıta dönüştü.
Bu proje bir tema çalışması değil; gerçek bir ürün omurgasını küçük ama üretim gerçekliğine yakın bir ölçekte taşıyan mühendislik sistemi.
Mimari yaklaşım
- UI katmanı: Next.js App Router, server-first bileşenler, seçili yerlerde istemci animasyonları
- İçerik katmanı: MDX + Zod şema doğrulaması + slug bazlı güvenli derleme
- Kimlik: Auth.js (GitHub OAuth) ile guestbook giriş/rol temelli moderasyon
- Veri: Neon PostgreSQL + Drizzle ORM şema ve sorgu yönetimi
- Cache/limit: Upstash Redis ile görüntülenme sayacı ve API rate limit
- İletişim: Server Action + anti-spam guard + Resend entegrasyonu
Mühendislik kararları
-
Server-first önceliği Statik/yarı-statik bölümler server component olarak tutuldu. Böylece istemci JS yükü kontrol altında kaldı.
-
Fail-safe davranış Redis veya e-posta servisi yoksa uygulama tamamen kırılmak yerine kademeli olarak davranıyor; kritik akışlarda güvenlik önceliği korunuyor.
-
İçerik sözleşmesi Proje frontmatter alanları (
problem,decision,impact,status) zorunlu düşünme şablonu gibi kullanıldı; kartlar teknik hikaye anlatır hale geldi.
Ölçülebilir çıktılar
- Tamamlanan kalite kapısı:
lint,build, env/db/assets kontrolleri - Error/loading/not-found ve OG katmanları ile daha üretim dostu UX
- Guestbook ve iletişim akışlarında kötüye kullanım riskini azaltan korumalar
Sonraki iterasyon
- Otomatik test kapsamını genişletmek (unit + entegrasyon)
- CI hattına kalite eşiklerini sıkılaştırmak
- Üretimde Redis/Resend gözlemlenebilirliğini artırmak