Frontend Geliştirici Senaryo Bazlı Mülakat Soruları

1

Bir e-ticaret sitesinde ürün filtreleme bileşeni tasarlayın. Kullanıcılar fiyat, kategori ve markaya göre filtreleme yapabilmeli.

State management ile filtre değerleri tutulur, filtre değiştiğinde ürün listesi yeniden render edilir. Debounce kullanılarak performans optimize edilir.

2

Kullanıcı giriş formunda şifre strength indicator (güç göstergesi) nasıl implemente edersiniz?

Şifre uzunluğu, büyük/küçük harf, rakam ve özel karakter kontrolü yapılır. Her kriter karşılandığında güç seviyesi artar ve progress bar güncellenir.

3

Büyük bir veri tablosunda (10.000+ satır) sanallaştırma (virtualization) nasıl uygularsınız?

React Window veya React Virtuoso gibi kütüphaneler kullanılarak sadece görünür alanaki satırlar render edilir. Scroll pozisyonuna göre görünür satır aralığı hesaplanır.

4

Bir dashboard uygulamasında grafiklerin responsive olmasını nasıl sağlarsınız?

SVG tabanlı grafik kütüphaneleri (D3.js, Chart.js) kullanılır. Container genişliğine göre grafik yeniden boyutlandırılır ve ResizeObserver ile dinamik güncelleme yapılır.

5

Kullanıcıyı otomatik çıkış (timeout) yapan bir mekanizma nasıl tasarlar mısınız?

Her kullanıcı etkileşiminde timer sıfırlanır. Belirli süre inactive kalındığında API çağrısı yapılarak oturum sonlandırılır ve kullanıcı login sayfasına yönlendirilir.

6

Çoklu dil desteği olan bir web sitesini nasıl implemente edersiniz?

i18next gibi kütüphaneler kullanılarak çeviri dosyaları yönetilir. Dil tercihleri localStorage'da saklanır ve URL parametresi ile desteklenir. RTL diller için CSS uyumu sağlanır.

7

Bir fotoğraf galerisinde lazy loading ve infinite scroll nasıl uygulanır?

Intersection Observer API ile görünüme giren resimler yüklenir. Scroll sonuna yaklaşıldığında yeni sayfa verisi API'den çekilir ve mevcut listeye eklenir.

8

Gerçek zamanlı mesajlaşma uygulamasında WebSocket bağlantısı nasıl yönetilir?

WebSocket bağlantısı kurulur, bağlantı kesilirse otomatik reconnect mekanizması çalışır. Mesajlar state'de tutulur ve yeni mesaj geldiğinde UI güncellenir.

9

Form doğrulama (validation) kütüphanesi yazmanız gerekse, nasıl bir mimari kurarsınız?

Declarative rule tanımı yapılır (required, minLength, pattern). Her alan için validation fonksiyonları çalışır, hatalar state'de tutulur ve UI'da gösterilir. Server-side validation da mutlaka yapılır.

10

Dark mode / Light mode geçişini nasıl implemente edersiniz?

CSS custom properties (değişkenler) ile tema renkleri tanımlanır. Tema tercihi localStorage'da saklanır, body'ye class eklenerek CSS değişkenleri güncellenir. prefers-color-scheme media query ile sistem tercihi de desteklenir.