Primebase Slider Case

Bu proje, bir mülakat case'i kapsamında hazırlanmış, modern React ekosistemiyle geliştirilmiş bir fotoğraf slider (galeri) uygulamasıdır. Kullanıcı dostu arayüz, çoklu dil desteği, otomatik oynatma, responsive tasarım ve güncel frontend teknolojileriyle öne çıkar.

🚀 Kullanılan Teknolojiler

• React 18 & TypeScript
• Vite (hızlı geliştirme ve build)
• MUI (Material UI): Modern ve erişilebilir arayüz bileşenleri
• React Query: API'den veri çekme ve cache yönetimi
• i18next + react-i18next + i18next-browser-languagedetector: Çoklu dil ve otomatik dil algılama
• ESLint: Kod kalitesi ve tutarlılık

🎯 Özellikler

• Fotoğraf slider (galeri) ve thumbnail önizlemeleri
• Otomatik oynatma (autoplay) ve manuel kontrol
• Otomatik oynatmayı başlat/durdur butonu
• Responsive ve modern tasarım (MUI ile)
• Türkçe ve İngilizce dil desteği, otomatik tarayıcı dili algılama, localStorage ile kalıcı dil seçimi
• Yükleniyor ve hata durumları için kullanıcı dostu mesajlar
• API'den (picsum.photos) dinamik fotoğraf çekme

🗂️ Klasör Yapısı

src/
  components/
    PhotoSlider.tsx         # Ana slider bileşeni
    PhotoSlider.styles.ts   # Slider'a özel stiller (MUI sx ile)
    PhotoCard.tsx           # Tekil fotoğraf kartı
  hooks/
    usePhotos.ts            # Fotoğraf verisini çeken özel hook (React Query)
  services/
    photoApi.ts             # Fotoğraf API servis fonksiyonu
  types/
    photo.ts                # Tip tanımları
  i18n/
    i18n.ts                 # i18next konfigürasyonu
    tr.json                 # Türkçe çeviriler
    en.json                 # İngilizce çeviriler
assets/                     # (Varsa) statik varlıklar
public/
  favicon.ico               # Favicon

🌐 Çoklu Dil Desteği

• Uygulama açılışında tarayıcı dili otomatik algılanır.
• Kullanıcı dilerse sağ üstteki butonla TR/EN arasında geçiş yapabilir.
• Seçilen dil localStorage'da saklanır, sonraki girişte korunur.
• Tüm arayüz metinleri i18n json dosyalarından gelir.

⚡ Kurulum ve Çalıştırma

1. Projeyi klonlayın:

   git clone <repo-url>
   cd primebase-slider-case

2. Bağımlılıkları yükleyin:

   npm install

3. Geliştirme sunucusunu başlatın:

   npm run dev

4. Uygulamayı açın:
   • http://localhost:5173

📝 Geliştirici Notları

• Kodlar tamamen TypeScript ile yazılmıştır.
• MUI'nın sx prop'u ile stiller component bazında ayrıştırılmıştır.
• API'den veri çekme, hata ve loading yönetimi React Query ile yapılır.
• Proje, modern frontend best-practice'lerine uygundur.
• Dilerseniz yeni dil eklemek için sadece src/i18n altına yeni bir json dosyası eklemeniz ve i18n.ts'de tanımlamanız yeterlidir.

---

Her türlü soru ve geri bildirim için iletişime geçebilirsiniz.