Skip to content
O2BUCAKPublic

About

CineLink

Resources

Stars

1 star

Watchers

0 watching

Forks

Repository files navigation

🎬 CineLink: Sinema Bağlantı Oyunu

CineLink Banner

Türk Sineması (Yeşilçam) ve Dünya Sineması aktörleri arasındaki gizli köprüleri en kısa yoldan keşfet!
6 Derece Bağlantı (Six Degrees of Separation) mantığıyla geliştirilmiş, tamamen ücretsiz, bilgi güvenliği odaklı sinema bulmaca oyunu.

License React TypeScript Tailwind CSS Vite Firebase Gemini KVKK npm audit


📖 Proje Hakkında

CineLink, sinemaseverlerin hafızasını ve genel kültürünü test eden yenilikçi bir web oyunudur.

Oyuncuya birbirinden doğrudan bağı olmayan iki sinema figürü (örneğin Şener Şen ile Leonardo DiCaprio veya Kemal Sunal ile Quentin Tarantino) sunulur. Amaç, dönüşümlü olarak Sanatçı ➔ Film ➔ Sanatçı ➔ Film ➔ Hedef Sanatçı adımlarını takip ederek en az hamlede hedefe ulaşmaktır.

Oyun tamamlandığında, oyuncunun izlediği yol Google Gemini AI tarafından hesaplanan teorik en kısa yol (Shortest Path) ile kıyaslanır ve puanlanır.


✨ Temel Özellikler

  • 🎞️ Geniş Sinema Veri Bankası: Türk Sineması, Yeşilçam klasikleri ve Hollywood/Dünya sinemasını harmanlayan zengin eşleşme altyapısı.
  • ⚡ Hibrit Doğrulama (Offline-First & Gemini AI):
    • API kotası olmadan da sıfır maliyetle çalışan zengin yerel doğrulama sözlüğü (cinemaData.ts).
    • Dinamik ve sıra dışı bağlantılar için sunucu taraflı güvenli Google Gemini 3.5 Flash entegrasyonu.
  • 🏆 Onur Tablosu (Leaderboard):
    • Misafir Modu: Kayıt olmadan anında oynama; oturum süresince geçerli yerel skor kaydı.
    • Google ile Giriş: Firebase Authentication ile rekorları ve kaçıncı oynayışta alındığını kalıcı olarak Firestore'a işleme.
  • 🎵 Web Audio API Ses Efektleri: Harici kütüphane yükü olmadan doğrudan tarayıcı API'si ile sentezlenen bağlantı, hata ve zafer melodileri (tek tıkla sessize alma seçeneği ile).
  • 🍪 KVKK 2026 & Çerez Yönetimi: Veri minimizasyonu esası; kullanıcı kimlik bilgilerini sunucuda tutmayan, yerel depolama (localStorage) ve açık rıza onaylı çerez çubuğu (CookieBanner).
  • 🛡️ Gelişmiş Bilgi Güvenliği (Hardened Security):
    • Katı Content-Security-Policy (CSP), HSTS, X-Frame-Options ve Permissions-Policy başlıkları.
    • Sıkı girdi dezenfeksiyonu (sanitizeText) ve DoS koruması (In-memory Rate Limiting + 32kb payload sınırı).
    • Güvenli package-lock.json kural setleri (0 npm vulnerabilities).

🎮 Nasıl Oynanır?

[Başlangıç Sanatçısı] (örn: Şener Şen)
       │
       ▼ (1. Adım: Sanatçının rol aldığı / yönettiği bir film)
[Film / Dizi]         (örn: Av Mevsimi)
       │
       ▼ (2. Adım: Bu filmde yer alan başka bir sanatçı)
[Sanatçı]             (örn: Cem Yılmaz)
       │
       ▼ (3. Adım: Yeni sanatçının yer aldığı başka bir yapım)
[Film / Dizi]         (örn: Son Umut / The Water Diviner)
       │
       ▼ (4. Adım: O yapımdaki aktör/yönetmen)
[Sanatçı]             (örn: Russell Crowe)
       │
       ▼ (5. Adım: Russell Crowe & Hedef aktörün ortak yapımı)
[Film / Dizi]         (örn: Body of Lies)
       │
       ▼ (Hedefe Ulaşıldı!)
[Hedef Sanatçı]       (örn: Leonardo DiCaprio)
  • Her adım 25 puan değerindedir.
  • Puanınız ne kadar düşükse, bağlantıyı o kadar az adımda tamamladığınızı gösterir.
  • Gemini'nin hesapladığı en kısa yoldan daha uzun bir zincir kurulursa ek ceza puanı uygulanır; optimal zincir yakalanırsa tebrik rozeti verilir.

🛠️ Teknoloji Yığını

Katman Teknoloji / Kütüphane Amaç
Frontend React 19, TypeScript Reaktif, modüler bileşen mimarisi
Stil & Tasarım Tailwind CSS v4, Plus Jakarta Sans, DM Sans, Space Mono Sinematik karanlık tema, tipografik hiyerarşi
Build & Tooling Vite 6, TSX, esbuild Hızlı HMR ve optimize edilmiş CJS/SPA derlemesi
Backend & Proxy Express 5 (Node.js) Güvenlik başlıkları, rate limiting, Gemini API proxy
Yapay Zeka @google/genai (Gemini 3.5 Flash) Akıllı bağlantı doğrulama ve en kısa yol tahmini
Veritabanı & Kimlik Firebase Firestore & Firebase Authentication Onur tablosu ve Google ile güvenli giriş
İkonlar & Ses Lucide React, Web Audio API Erişilebilir UI ikonları ve tarayıcı içi ses efektleri

🚀 Kurulum ve Yerel Geliştirme

Gereksinimler

  • Node.js (v20 veya üzeri önerilir)
  • npm (v10 veya üzeri)

1. Depoyu Klonlayın

git clone https://github.com/kullaniciadi/cinelink.git
cd cinelink

2. Bağımlılıkları Yükleyin

npm install

3. Çevre Değişkenlerini Ayarlayın

Kök dizindeki .env.example dosyasını referans alarak .env dosyanızı oluşturun:

cp .env.example .env

.env içerisine Gemini API anahtarınızı tanımlayın (opsiyoneldir; girilmezse yerel çevrimdışı sözlük modu devreye girer):

GEMINI_API_KEY=your_gemini_api_key_here

4. Geliştirme Sunucusunu Başlatın

npm run dev

Uygulama yerel olarak http://localhost:3000 adresinde çalışacaktır.

5. Derleme (Production Build) & Tip Kontrolü

# TypeScript tip kontrolü
npm run lint

# Üretim paketi derleme
npm run build

# Üretim sunucusunu çalıştırma
npm run start

🔒 Güvenlik ve Gizlilik Politikası (KVKK 2026)

CineLink, bilgi güvenliği standartlarını (OWASP Top 10) ve Türkiye Cumhuriyeti 6698 Sayılı Kişisel Verilerin Korunması Kanunu (KVKK) ilkelerini gözeterek tasarlanmıştır:

  1. Veri Minimizasyonu: Kullanıcılardan TCKN, telefon numarası veya ad-soyad talep edilmez. Oyuncular anonim takma adlarla (nickname) oynar.
  2. Yerel Bellek Önceliği: Misafir kullanıcıların tüm tercihleri ve puanları sunucuda kimlikle eşleştirilmeden istemcinin kendi localStorage alanında saklanır.
  3. API Anahtarı Güvenliği: GEMINI_API_KEY istemciye (tarayıcıya) asla aktarılmaz; tüm AI çağrıları Express arka uç sunucusu üzerinden proxy edilerek çalışır.
  4. Sıfır Güvenlik Zafiyeti: Paket bağımlılıkları düzenli olarak taranır ve npm audit üzerinde 0 zafiyet güvencesi sağlanır.

📂 Proje Dizin Yapısı

cinelink/
├── public/                 # Statik dosyalar ve favicon
├── src/
│   ├── components/         # Modüler UI bileşenleri
│   │   ├── AppHeader.tsx   # Üst bar, navigasyon ve ses/profil kontrolleri
│   │   ├── AppFooter.tsx   # İletişim, telif ve geri bildirim alanı
│   │   ├── HomeView.tsx    # Giriş ekranı, kurallar ve KVKK onay alanı
│   │   ├── GameBoard.tsx   # Aktif oyun alanı, film şeridi ve giriş formu
│   │   ├── ResultView.tsx  # Sonuç, adım kıyaslaması ve zafer kartı
│   │   ├── LeaderboardView.tsx # Onur tablosu (Top 10)
│   │   └── CookieBanner.tsx # KVKK ve çerez tercih yöneticisi
│   ├── data/
│   │   └── cinemaData.ts   # Çevrimdışı meydan okumalar ve sinema sözlüğü
│   ├── services/
│   │   ├── firebase.ts     # Firebase Auth & Firestore entegrasyonu
│   │   ├── geminiService.ts# İstemci tarafı API çağrıları
│   │   └── soundFx.ts      # Web Audio API ses motoru
│   ├── types.ts            # TypeScript veri tipleri ve enum'lar
│   ├── App.tsx             # Ana uygulama durum ve sahne yöneticisi
│   ├── main.tsx            # React giriş noktası
│   └── index.css           # Tailwind CSS ve özel font/animasyon tanımları
├── server.ts               # Express sunucusu, CSP başlıkları ve API route'ları
├── firestore.rules         # Güvenli Firestore güvenlik kuralları
├── package.json            # Proje bağımlılıkları ve script'ler
└── README.md               # Proje dökümantasyonu

📬 İletişim ve Geri Bildirim

Öneri, istek, hata bildirimleri veya iş birliği talepleriniz için:


CineLink © 2026 Türkiye Sinema Bağlantı Oyunu · İyi Seyirler ve Keyifli Oyunlar! 🍿

About

CineLink

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages