İnteraktif Medya Kitaplığı (SPA)

Bu proje, ISE-201 Web Teknolojileri dersi kapsamında geliştirilmiş bir Single Page Application (SPA) örneğidir. Uygulama, film/dizi/kitap gibi medya içeriklerini bir JSON dosyasından fetch ile okuyarak modern bir arayüzde listelemeyi, filtrelemeyi ve detaylarını göstermeyi amaçlar.

Özellikler

• 🎬 Liste / Grid Görünümü: Tüm medyalar kartlar halinde gösterilir.
• 🔍 Arama: Başlığa göre anlık arama (input event ile).
• 🏷️ Filtreleme:
  • Türe göre (film / dizi / kitap)
  • Yıla göre (2000+, 2010+, 2020+)
• 📄 Detay Görünümü:
  • Ayrı bir HTML sayfası olmadan, JS ile dinamik olarak oluşturulur (SPA mantığı).
  • Özet, tür, yıl, puan ve oyuncu/yazar bilgileri gösterilir.
• ⭐ Favorilerim:
  • Kullanıcı medyaları “Favorilere Ekle” butonu ile işaretler.
  • Favoriler localStorage ile tarayıcıda saklanır.
  • “Favorilerim” sekmesinde sadece favoriler listelenir.

Kullanılan Teknolojiler

• HTML5 (semantic etiketler: header, main, section, article, nav vb.)
• CSS3
  • Flexbox & Grid ile responsive tasarım
  • Mobil ekranlar için media query
• Modern JavaScript (ES6+)
  • const ve let
  • Arrow functions
  • async/await ile fetch() kullanımı
• Veri Yönetimi
  • data/media.json dosyasından JSON veri okuma (fetch)
  • localStorage ile favori medya ID’lerinin saklanması

Proje Yapısı

.
├── index.html
├── styles.css
├── app.js
├── data
│   └── media.json
└── img
    ├── inception.jpg
    ├── breaking-bad.jpg
    └── ...

## Canlı Demo

Uygulamanın GitHub Pages üzerinden çalışan canlı hali:  
https://sauwebprogramming.github.io/web-tech-project-feyza-ozdn/