🎬 My Movie Lib - İnteraktif Medya Kitaplığı

📖 Proje Açıklaması

My Movie Lib, Sakarya Üniversitesi Web Teknolojileri dersi kapsamında geliştirilmiş modern bir web uygulamasıdır. Bu proje, sunucu tarafı kod gerektirmeyen, tamamen HTML5, CSS3 ve Modern JavaScript (ES6+) kullanılarak geliştirilmiş bir SPA (Single Page Application) örneğidir. Kullanıcılar, popüler film ve dizileri keşfedebilir, detaylarını inceleyebilir ve favorilerine ekleyebilirler.

🌐 Canlı Demo

Projenin çalışan halini incelemek için: https://sauwebprogramming.github.io/web-tech-project-alperenaydgnn/

✨ Özellikler

🎯 Temel Özellikler

• 📱 Dinamik İçerik: Fetch API kullanılarak JSON dosyasından film verileri çekilir ve dinamik olarak ekrana basılır
• 🔍 Gelişmiş Filtreleme:
  • İsme göre anlık arama
  • Kategoriye göre filtreleme (Film/Dizi)
  • Yapım yılına göre filtreleme (2010-2019, 2000-2009, 1990-1999, 1990 Öncesi)
  • Tüm filtreler birlikte çalışarak kombinasyonlu arama imkanı
• 🎭 Detay Modalı: Sayfa yenilenmeden açılan pop-up pencere ile film detaylarını görüntüleme (oyuncular, açıklama, puan vb.)
• ❤️ Favori Sistemi: localStorage kullanılarak tarayıcı kapansa bile saklanan favori listesi
• 📱 Responsive Tasarım:
  • Mobil cihazlarda 1 sütun
  • Tablet cihazlarda 2 sütun
  • Masaüstü cihazlarda 4 sütun
  • CSS Grid ve Flexbox ile modern layout yapısı

🎁 Bonus Özellik

• 📲 PWA (Progressive Web App) Desteği:
  • Uygulama telefona kurulabilir
  • Çevrimdışı (offline) çalışabilir
  • Service Worker ile cache yönetimi
  • Manifest.json ile native app deneyimi

🛠️ Kullanılan Teknolojiler

• HTML5: Semantic etiketler, modern yapı
• CSS3:
  • CSS Grid (Responsive layout)
  • Flexbox (Esnek düzenler)
  • CSS Variables (Renk yönetimi)
  • Modern animasyonlar ve geçişler
• JavaScript (ES6+):
  • Arrow Functions
  • Async/Await
  • Fetch API
  • LocalStorage API
  • Event Delegation
  • DOM Manipulation
• PWA Teknolojileri:
  • Service Worker
  • Web App Manifest
  • Cache API
• Git: Versiyon kontrolü

📁 Proje Yapısı

web-tech-project-alperenaydgnn/
│
├── index.html          # Ana HTML dosyası
├── style.css          # Tüm CSS stilleri
├── script.js           # JavaScript mantığı
├── movies.json         # Film verileri (12 adet)
├── manifest.json       # PWA manifest dosyası
├── service-worker.js   # Service Worker (PWA)
└── README.md           # Proje dokümantasyonu

🚀 Kurulum

Gereksinimler

• Modern bir web tarayıcısı (Chrome, Firefox, Edge, Safari)
• HTTP sunucusu (Python, Node.js, PHP veya VS Code Live Server)

Adımlar

1. Projeyi klonlayın:

   git clone https://github.com/kullaniciadi/web-tech-project-alperenaydgnn.git

2. Proje dizinine gidin:

   cd web-tech-project-alperenaydgnn

3. HTTP sunucusu başlatın:

   Python ile:

   python -m http.server 8000

   Node.js ile:

   npx http-server -p 8000

   PHP ile:

   php -S localhost:8000

4. Tarayıcıda açın:

   http://localhost:8000
   

📱 PWA Kurulumu

1. Tarayıcıda uygulamayı açın
2. Chrome/Edge: Adres çubuğundaki "Ana ekrana ekle" ikonuna tıklayın
3. Mobil: Tarayıcı menüsünden "Ana ekrana ekle" seçeneğini kullanın
4. Uygulama artık cihazınızda bir uygulama gibi çalışacaktır

🎨 Ekran Görüntüleri

(İsteğe bağlı: Ekran görüntüleri eklenebilir)

👨‍💻 Geliştirici

Alperen Aydoğan
Sakarya Üniversitesi - Web Teknolojileri Dersi

📝 Lisans

Bu proje eğitim amaçlı geliştirilmiştir.

🙏 Teşekkürler

• Sakarya Üniversitesi Web Teknolojileri dersi öğretim üyelerine
• Tüm açık kaynak topluluğuna

---

⭐ Bu projeyi beğendiyseniz yıldız vermeyi unutmayın!