Startup'ta Frontend Developer Olarak Frontend Mimarisi Nasıl Kurulur?

Bir startup'ta frontend developer olarak çalışmak, sadece kod yazmaktan çok daha fazlasını gerektirir. Ürün kararları, teknik mimari, kullanıcı deneyimi ve büyüme stratejisi birbirine bağlıdır. Palo Alto merkezli Let Wash'ta frontend developer olarak tam da bu kesişim noktasında çalışıyorum.

Let Wash'ın web tabanlı SaaS panelini sıfırdan kurguluyorum: Root, Carwash Owner, Carwash Admin ve Washer rolleri için ayrı yetkilendirme, dashboard ve operasyon akışları. Bu yazıda, startup ortamında bu çok rollü SaaS frontend mimarisini nasıl kurduğumu paylaşıyorum.

İlk Günler: Hız mı, Kalite mi?

Startup'larda en sık duyulan cevap "hız" olur. Ama hız, teknik borç biriktirerek sağlanırsa 3 ay sonra her feature 3 kat uzun sürer. Let Wash'ta şu dengeyi hedefledim:

• MVP için hızlı iterasyon: Temel akışları çalışır hale getir
• Mimari için sağlam temel: Sonradan değiştirmesi pahalı olacak kararları baştan doğru al
• Teknik borç takibi: Bilinçli olarak alınan borçları dokümante et

Teknoloji Seçimi: Neden Vite + React?

Çok rollü bir SaaS paneli; her rolün farklı ekran, yetki ve veri ihtiyacı olduğu anlamına gelir. Let Wash web frontend'inde şu stack'i kullanıyorum:

Next.js yerine Vite tercih etmemin sebebi net: Let Wash web tarafı, giriş yapmış kullanıcıların kullandığı role-based bir SaaS uygulaması. SSR/SSG ihtiyacım marketing sitesine göre daha düşük; bunun yerine hızlı geliştirme döngüsü, type-safe routing ve modüler SPA mimarisi öncelikliydi.

TanStack Router ile Role-Based Routing

TanStack Router, route tanımlarını TypeScript ile birleştirir. Her rol kendi route tree'sine ve yetki sınırına sahip:

• Root: Platform geneli yönetim, işletme ve kullanıcı denetimi
• Carwash Owner: İşletme sahipliği, gelir, paket ve ödeme ayarları
• Carwash Admin: Günlük operasyon, rezervasyon ve ekip yönetimi
• Washer: Atanan işler, durum güncellemeleri ve saha operasyonları

Route-level code splitting ile her rol kendi bundle'ını yükler. Yetkisiz route erişimi hem router hem de API katmanında engellenir.

TanStack Query + Zustand: State Ayrımı

ÇokNet'teki deneyimimden öğrendiğim pattern'i Let Wash'ta da uyguladım:

• TanStack Query: API verileri — işletme listesi, rezervasyonlar, gelir raporları, operasyon kuyrukları
• Zustand: UI state — modal, filtre, sidebar, geçici form durumları

Bu ayrım, gereksiz re-render'ları azaltır ve veri akışını öngörülebilir kılar.

Stripe Connect Entegrasyonu

İşletmelerin online ödeme alabilmesi için Stripe Connect kullanıyorum. Frontend tarafında @stripe/react-connect-js ile onboarding ve payout dashboard'larını embed ettim. Ödeme akışları hassas olduğu için form validasyonunda Zod şemaları ve React Hook Form ile sıkı tip kontrolü uyguladım.

Form ve Validasyon Katmanı

Rezervasyon yönetimi, işletme kaydı ve rol atamaları gibi kritik akışlarda:

• React Hook Form ile performanslı form yönetimi
• Zod ile runtime + compile-time validasyon
• @hookform/resolvers ile ikisini birleştirme

Bu üçlü, startup hızında bile form bug'larını erken yakalamamı sağlıyor.

i18n ve Production Monitoring

ABD pazarında çok dilli destek için i18next kullanıyorum. Production'da Sentry ile frontend hatalarını izliyorum — startup'ta kullanıcı sayısı az olsa bile, ödeme veya rezervasyon akışındaki bir hata kritik.

Test tarafında Vitest ve Testing Library ile component testleri yazıyoruz. Her PR'da tsc -b typecheck ve ESLint çalışıyor.

Çok Rollü SaaS Mimarisi

Let Wash web SaaS'ında dört ana rol var. Her birinin ekranları, yetkileri ve iş akışları birbirinden ayrı:

1. Root

• Platform genelinde işletme ve kullanıcı yönetimi
• Sistem ayarları ve operasyonel denetim
• Üst düzey raporlama ve müdahale ekranları

2. Carwash Owner

• İşletme profili ve ödeme altyapısı (Stripe Connect onboarding)
• Paket, üyelik ve fiyatlandırma yönetimi
• Gelir ve performans analitiği

3. Carwash Admin

• Günlük rezervasyon ve operasyon yönetimi
• Ekip ve washer atamaları
• İşletme içi süreçlerin koordinasyonu

4. Washer

• Kendisine atanan yıkama işleri
• Durum güncellemeleri ve saha operasyon akışları
• Sadeleştirilmiş, mobil uyumlu arayüz

Tüm roller için ortak bir UI component library (CVA + Tailwind) kullanıyorum; rol bazlı layout ve navigasyon katmanı üzerine inşa ediliyor.

Component Mimarisi

Startup'ta over-engineering yapmak tehlikelidir. Şu yapıyı benimsedim:

src/
  components/ui/       → Button, Input, Card
  features/            → ReservationManager, StripeOnboarding
  routes/              → TanStack Router role modules
  hooks/               → useReservations, useBusinesses
  stores/              → Zustand stores

Atomic Design'ın tamamını uygulamak yerine, ihtiyaç duydukça extract etmek daha pragmatik.

TypeScript: Baştan mı, Sonra mı?

Cevap: baştan. Startup'ta bile TypeScript kullanmak, refactoring maliyetini düşürür. API response tipleri, form validasyonları ve component prop'ları için tip güvenliği, proje büyüdükçe daha da değerli hale gelir.

Palo Alto Startup Ekosistemi

Silicon Valley'de bir startup'ta çalışmak, Türkiye'deki deneyimimden farklı dinamiklere sahip. Hızlı iterasyon, product-market fit arayışı ve pivot kararları günlük gerçeklik. Frontend developer olarak bu süreçte:

• Ürün kararlarına teknik perspektiften katkı sağlamak
• Prototipleri hızlıca çalışır hale getirmek
• Kullanıcı feedback'lerini hızlı iterate etmek

gibi sorumluluklar üstleniyorum.

Frontend Developer Olarak Öğrendiklerim

1. Mükemmel kod, çalışan üründen önce gelmez — ama çalışan ürün, sürdürülemez kodla da uzun ömürlü olmaz.
2. Kullanıcı feedback'i > varsayımlar: Build et, ölç, öğren.
3. Teknik borç bilinçli alınır: Her shortcut teknik borç değildir; hangisinin ödeneceğini bilmek önemli.
4. Doğru araç seçimi stack tartışmasından önemli: Next.js her proje için şart değil; Vite + TanStack ekosistemi dashboard ağırlıklı ürünlerde çok verimli.

Sonuç

Startup'ta frontend developer olarak çalışmak, hem teknik hem de ürün becerilerini geliştiren benzersiz bir deneyim. Let Wash'ta Root'tan Washer'a uzanan çok rollü SaaS panelinin frontend mimarisini Vite, TanStack Router, React Query ve Stripe Connect ile kurarken, önceki projelerimde (Qulak, ÇokNet, DNSSense) edindiğim deneyimler bu yolculuğa güçlü bir temel sağlıyor.

Sadece UI implement etmek yerine, ürün kararlarına teknik perspektiften katkı sağlayan bir frontend developer olmak kariyer açısından da farklı bir perspektif kazandırıyor.