✅ CineScope, film severlerin en güncel ve popüler filmleri keşfetmesini, detaylı incelemesini ve kişisel watchlist oluşturmasını sağlayan modern, hızlı ve kullanıcı dostu bir film keşif platformudur. ✅ Türkiye ve global kullanıcıların sinema deneyimini dijitalde zenginleştirmeyi hedefler.
✅ Sinema tutkunu kullanıcılar ✅ Film öneri arayanlar ✅ Popüler ve vizyondaki filmleri takip etmek isteyenler ✅ Kendi favori filmlerini yönetmek isteyenler ✅ React, TypeScript ve modern frontend teknolojilerine ilgi duyan geliştiriciler
✅ Güncel popüler ve vizyondaki filmleri keşfetmek ✅ Film detaylarını incelemek (oyuncular, özet, fragmanlar vb.) ✅ Kişisel izleme listesi oluşturup yönetmek (Watchlist) ✅ Hızlı ve sezgisel arama yaparak filmlere erişmek ✅ Responsive tasarım ile hem desktop hem mobil cihazlarda kullanım
✅ Popüler filmler ✅ Vizyondaki filmler ✅ Yakında çıkacak filmler ✅ Görsel açıdan zengin, kaydırmalı içeriklerle kolayca film keşfi
| Teknoloji | Açıklama |
|---|---|
| React 19.1.0 | Modern UI oluşturmak için component tabanlı, güçlü ve esnek yapı |
| Redux Toolkit 2.8.2 | Global state yönetimi ve kolay yapılandırma |
| TailwindCSS 4.1.10 | Utility-first, hızlı ve özelleştirilebilir CSS framework |
| Vite | Hızlı geliştirme ortamı ve build aracı |
| TypeScript | Statik tip denetimiyle kod kalitesini artırır |
| RTK Query | API çağrılarını kolay ve performanslı yönetim |
| React Router Dom | Sayfalar arası geçişleri yönetmek için |
| React Icons | Modern ve geniş ikon kütüphanesi |
| React Player | Video ve film fragmanlarını oynatmak için |
| Splide.js | Kaydırmalı (carousel) film listeleri için |
| Millify | Sayısal değerleri okunabilir kısa biçime çevirmek için |
🌟 React (Functional Components + Hooks) 🌟 TypeScript 🌟 Redux Toolkit + RTK Query 🌟 TailwindCSS 🌟 Axios 🌟 React Router Dom 🌟 React Icons 🌟 React Player 🌟 Splide.js (Carousel ve video eklentileri) 🌟 Millify
🎞️ Popüler, vizyondaki ve yakında çıkacak film listeleri 🔍 Hızlı ve detaylı film arama özelliği 🎥 Fragman ve video oynatma 📋 Kullanıcıların favori filmlerini ekleyebildiği Watchlist yönetimi 🧩 Component bazlı temiz ve yeniden kullanılabilir yapı ⚡ RTK Query ile optimize edilmiş API çağrıları 📱 Tam responsive ve mobil uyumlu tasarım 🔄 Splide Carousel ile kaydırmalı film görünümleri ⏳ Yüklenme ve hata durumları için Loader ve Error componentleri 💅 TailwindCSS ile modern ve sade tasarım 📜 TypeScript ile tip güvenliği ve kod kalitesi
| Klasör / Dosya | Açıklama |
|---|---|
| ├─ src/ | Uygulamanın kaynak kodlarının bulunduğu ana klasör |
| ├─ components/ | UI bileşenleri (Button, Header, Footer, Loader, SearchBar, WatchList vb.) |
| ├─ hooks/ | Projede özel yazılmış React hook'ları |
| ├─ pages/ | Sayfa bileşenleri (Home, Detail, SearchPage, WatchList vb.) |
| ├─ redux/ | Redux Toolkit store, slice ve API servislerinin tanımlandığı klasör |
| ├─ api/ | RTK Query ile API çağrıları ve endpoint tanımları |
| ├─ types/ | Proje genelinde kullanılan TypeScript tip tanımlamaları |
| ├─ assets/ | Resim, ikon, font gibi medya dosyaları |
| ├─ styles/ | Global CSS / Tailwind konfigürasyon dosyaları |
| ├─ utils/ | Yardımcı fonksiyonlar ve genel utiliteler |
| ├─ App.tsx | Uygulamanın ana React bileşeni, sayfa rotalarının yönetimi |
| ├─ main.tsx | React uygulamasını başlatan giriş noktası |
| ├─ vite.config.ts | Vite geliştirme ortamı ayarları |
| ├─ public/ | Statik dosyaların (favicon, statik resimler vb.) bulunduğu klasör |
| ├─ favicon.ico | Tarayıcı sekmesinde görünen simge |
| ├─ index.html | Uygulamanın ana HTML dosyası, React bu dosyada mount edilir |
| ├─ logo.png | Uygulamanın logosu (Header’da kullanılıyor) |
✅ Mobilden masaüstüne tüm cihazlarda kusursuz görünüm sağlar.
✅ Detaylı film arama ve arama sonuçlarını listeleme imkanı sunar.
✅ Film hakkında özet, puan, yayın tarihi gibi bilgiler içerir. ✅ Responsive tasarıma uyumludur.
✅ Redux kullanarak kullanıcıların favori filmlerini kaydetmelerine olanak verir.
✅ Header’da ve mobilde farklı arama UI’ları kullanılır.
✅ Scroll takibi ile arama çubuğunun gizlenmesi/gösterilmesi sağlanır.
✅ TMDb API’den canlı veri çekme ve yönetme. ✅ RTK Query ile performanslı API çağrıları.
✅ Hatalı aramalarda ve veri çekme sorunlarında kullanıcı dostu mesajlar. ✅ Yükleme sırasında kullanıcıyı bilgilendiren animasyonlar.
✅ Popüler, vizyondaki ve yakında çıkacak filmleri sekmeler halinde gösterir. ✅ Her film kartı film posteri, başlık ve küçük bilgiler içerir. ✅ Splide slider ile akıcı kaydırma deneyimi sunar.
✅ Seçilen filmin detaylı özet bilgisi, puan, çıkış tarihi, türler ve dil gibi meta veriler.
✅ Kullanıcı arama yapabilir, sorgu URL parametresi ile sonuçları listeler. ✅ Arama sonuçları grid yapısında, tıklanabilir film kartları. ✅ Boş sorgu, yüklenme ve hata durumları için bilgilendirme.
✅ Redux Toolkit ile global state üzerinden yönetilir. ✅ Favori filmler eklenip çıkarılabilir. ✅ Düzenlenebilir, temiz UI.
✅ Mobil cihazlarda büyüteç ikonuna basıldığında /search sayfasına yönlendirme. ✅ Header’da masaüstüne özel arama çubuğu, mobilde sadece ikon gösterilir. ✅ Arama sayfasında tam ekran arama input’u yer alır.
✅ useWindowWidth: Pencere genişliğini izler, responsive davranışları yönetmek için. ✅ useScrollDirection: Scroll yukarı mı aşağı mı takip ederek header arama çubuğunun gizlenmesini sağlar.
🌟 TailwindCSS ile modüler ve temiz tasarım. 🌟 Scroll ile header arama alanının gizlenip gösterilmesi. 🌟 Mobil ve masaüstü için optimize edilmiş arama deneyimi. 🌟 Film kartlarında hover efektleri ve görsel detaylar. 🌟 Responsive grid yapısı ile farklı cihazlarda düzenli listeleme.
✅ AdButton: Genel amaçlı buton bileşeni ✅ DesktopSearch, MobileSearch: Farklı cihazlar için arama komponentleri ✅ Error, Loader: Hata ve yüklenme durumları için bileşenler ✅ Footer, Header: Sayfa alt ve üst bileşenleri ✅ SearchBar, SearchButton: Arama giriş ve butonları ✅ Watchlist: Favori film yönetim sayfası ✅ Banner, ContentList, VideoList, MovieList, Hero: Görsel ve içerik sunum bileşenleri
bash ,Kopyala ,Düzenle
git clone https://github.com/kullaniciAdi/cinescope.git
cd cinescope
npm install
npm run dev
http://localhost:5173/ aç: 📡 API Bilgisi Film verileri ve detaylar TMDb (The Movie Database) API üzerinden çekilmektedir. API anahtarı .env dosyasına eklenmiştir. RTK Query ile performanslı çağrılar yapılır.
MIT License © 2025 Esra Akgündoğdu
Daha fazla bilgi için benimle iletişime geçebilirsiniz: akgundogduesr@gmail.com
VERCEL: https://cine-scope-jmra.vercel.app/
CineScope.mp4
CineScope ile sinema dünyasını parmaklarınızın ucuna taşıyın! 🎥🍿