Film Review

Film Review Movie, Next.js ile yazdığım bir film ve dizi keşif ve inceleme uygulaması. İçinde filmler, diziler ve ünlüler için liste ve detay sayfaları, bir blog, topluluk ve profil ekranları, bir de içeriği yöneten bir admin paneli var. Arayüz Türkçe ile İngilizce arasında geçiş yapıyor, dil seçimin cookie'de tutuluyor. Portfolyo ve demo amaçlı bir proje; topluluk ve profil bölümlerinin bir kısmı simülasyon.

Çalıştırmak için bir API anahtarına ihtiyacın yok: içerik yerel JSON dosyalarından okunuyor. Bir TMDB API anahtarı verirsen bu kayıtların yanına canlı TMDB verisi de geliyor.

Kartlarla oynamak

Projenin en sevdiğim kısmı poster kartları. 3D kartlar imlecini takip ederek eğiliyor; üzerlerinde bir ışık yansıması ve derinlikte yüzen rozetler var. Karttaki döndürme düğmesine bastığında kart 180° dönüyor ve arka yüzünde yönetmen, süre, özet ve detay sayfasına giden bir bağlantı çıkıyor. Bunların hepsi dokunmatik cihazlarda da çalışıyor. Puanı 8 ve üzeri olan yapımlar "Efsane" kartına dönüşüyor ve imlece tepki veren gökkuşağı renkli bir folyo efekti alıyor.

Ana sayfadaki kaydırıcı bir 3D coverflow: kartlar merkeze uzaklıklarına göre dönüyor, ortadaki posterin renkleri de arka plana yayılıyor. Ne izleyeceğine karar veremiyorsan başlıktaki zar düğmesine ("Bana sürpriz yap") bas; bir 3D kartı yavaşlayarak döndürüyor ve rastgele bir filmde durduruyor. Bütün animasyonlar prefers-reduced-motion tercihine uyuyor.

Bir yapımı kartından ya da detay sayfasından izleme listene ekleyip 10 yıldız üzerinden puanlayabilirsin. /watchlist sayfası bunları film ve dizi filtresiyle listeliyor. Liste localStorage'da tutuluyor ve açık sekmeler arasında eşzamanlı kalıyor. Detay sayfalarında site içinde oynayan bir fragman (YouTube nocookie), Web Share ya da panoya kopyalama ile çalışan bir paylaş düğmesi ve türü benzeyen yapımlardan seçilen bir "Benzer filmler / diziler" bölümü var.

JSON dosyaları ve TMDB

Veri katmanı, data/ klasöründeki beş JSON dosyasından ibaret: filmler, diziler, ünlüler, blog yazıları ve kullanıcı. Admin panelinde yaptığın işlemler bu dosyaları doğrudan güncelliyor. Docker'da data/ klasörü container'a bağlandığı için bu değişiklikler kalıcı oluyor.

TMDB tanımlıysa yerel kayıtlar TMDB verisiyle yan yana gösteriliyor. İkisini slug'larından ayırıyorum: /movies/interstellar gibi slug'lar yerel kayıtlara ait; TMDB'den gelen yapımlar ise tmdb-movie-... biçiminde bir slug alıyor ya da TMDB katalog bölümünden açılıyor. Anahtar yoksa uygulama yerel ve örnek verilerle çalışmaya devam ediyor. TMDB'nin kullanım bildirimi de uygulamanın içinde duruyor.

Admin oturumu

Admin girişi POST /api/admin/login ucundan yapılıyor. Giriş başarılıysa bir admin_session cookie'si oluşuyor; değeri HMAC-SHA256 ile imzalanmış, süresi olan bir jeton. Bu yüzden elle yazılan ya da değiştirilen cookie'ler reddediliyor. Şifreyi sabit zamanda karşılaştırıyorum; aynı IP'den 10 dakika içinde 8 hatalı deneme gelirse istek 429 ile geri dönüyor. /admin/* ve /api/admin/* rotalarını Next.js'in proxy katmanı koruyor. Admin şifresi değiştiğinde de eski oturumların hepsi geçersiz oluyor.

Projede Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4 ve GSAP kullandım.