Fenci Habibe

Watchly, sinemaseverlerin film ve dizileri keşfetmesini, kişisel izleme listeleri oluşturmasını, sezon ve bölüm bazlı ilerleme kaydetmesini sağlayan yeni nesil bir takip platformudur. iOS mobil uygulamasıyla gerçek zamanlı senkronize çalışan web sürümü; arama motoru optimizasyonu odaklı vitrin sayfaları, zengin detay içerikleri ve üyelere özel modern bir kullanıcı portalı sunar.

Proje Genel Bakışı ve Vizyon

Fenci Habibe, fen bilimleri eğitimini geleneksel sınıf sınırlarının ötesine taşıyarak dijital dünyada interaktif, ilgi çekici ve erişilebilir kılmak amacıyla hayata geçirilmiş yeni nesil bir eğitim ve içerik yönetim platformudur. 5, 6, 7 ve 8. sınıf (LGS) düzeyindeki öğrencilere bilimi sevdirmeyi, mantıksal kavrayışı pekiştirmeyi ve sınav hazırlık süreçlerini eğlenceli hale getirmeyi hedefler.

Platform, bir yandan öğrencilere zenginleştirilmiş bilim makaleleri, interaktif deneme sınavları, günlük soru meydan okumaları ve kişisel gelişim takibi sunarken; diğer yandan eğitimciye yapay zekâ entegrasyonu, zengin metin düzenleyicisi, kapsamlı moderasyon araçları ve detaylı ziyaretçi analitiği sağlayan uçtan uca modern bir dijital çalışma alanı oluşturur.

Mimari Yaklaşım ve Mühendislik Tasarımı

Projenin teknik omurgası, kurumsal ölçekteki modern web standartlarını sıfır altyapı maliyeti (Zero-Cost Infrastructure) prensibiyle buluşturacak şekilde kurgulanmıştır:

• Full-Stack Serverless Mimari: Uygulama, Next.js App Router üzerinde React 19 ve TypeScript ile geliştirilmiş olup Vercel üzerinde sunucusuz (serverless) olarak çalışmaktadır.
• Veritabanı ve ORM Entegrasyonu: Yüksek eşzamanlılık ve ölçeklenebilirlik için Serverless PostgreSQL (NeonDB) tercih edilmiş, veritabanı modellemesi ve migration süreçleri en güncel Prisma ORM ve PostgreSQL sürücü adaptörü (@prisma/adapter-pg) kullanılarak tip güvenli (type-safe) biçimde yapılandırılmıştır.
• Medya Pipeline'ı: Yüklenen görseller ve blog içi videolar, doğrudan istemciden imzalı token'lar (Signed Uploads) aracılığıyla Cloudinary CDN ağına iletilmekte; otomatik format dönüşümü (WebP/AVIF), dinamik boyutlandırma ve video akış optimizasyonları sunucuya ek yük bindirmeden yönetilmektedir.

Öne Çıkan Modüller ve Fonksiyonel Özellikler

1. Üretken Yapay Zekâ (Generative AI) Destekli İçerik Üretimi

İçerik üretim sürecini hızlandırmak ve pedagojik olarak etkileyici materyaller üretmek amacıyla Hugging Face Inference API üzerinden son teknoloji FLUX.1-schnell görüntü modeli sisteme entegre edilmiştir.

• Blog yazarları, yönetim panelinden yazı konusunu girdiklerinde tek bir tıklamayla ilgili konsepti temsil eden 16:9 formatında, metinsiz ve 3D eğitsel render kalitesinde kapak görselleri üretebilmektedir.
• Üretilen görseller arka planda otomatik olarak Cloudinary CDN'e aktarılarak kalıcı hale getirilir ve optimize edilir.

2. Kapsamlı İnteraktif Sınav & Quiz Motoru

Öğrencilerin kazanımlarını pekiştirmesi için geliştirilen modül, klasik çoktan seçmeli testlerin ötesine geçer:

• Kademeli Filtreleme: Sınıf seviyesi (5-8. sınıf), ünite ve pedagojik zorluk derecesine (Temel, Kazanım, Yeni Nesil LGS) göre dinamik filtreleme.
• Gerçekçi Sınav Deneyimi: Soru bazlı süre sayacı, görsel destekli soru yapıları ve dikkat dağıtmayan modern kullanıcı arayüzü.
• Anlık Analiz ve Çözüm Rehberi: Sınav bitiminde net, doğru, yanlış ve harcanan süre dökümü; her soru için Habibe Öğretmen’in pedagojik çözüm açıklamaları ve eksik kazanımlara yönelik geri bildirimler.

3. Öğrenci Portalı ve Kişisel Gelişim

NextAuth.js v5 tabanlı kimlik doğrulama altyapısı sayesinde (Google OAuth ve E-posta/Şifre seçenekleriyle) öğrenciler kendi panellerine erişebilir:

• Çözülen tüm denemelerin geçmişi, başarı yüzdeleri ve zaman içerisindeki akademik gelişim grafiği takip edilebilir.
• Rol bazlı erişim denetimi (RBAC) ile STUDENT, EDITOR ve ADMIN rolleri veri tabanı seviyesinde katı kurallarla ayrıştırılmıştır.

4. Günlük Bilim Köşesi ve Mikro-Öğrenme Araçları

• Günün Sorusu: Her güne özel olarak planlanabilen, öğrencilerin siteyi düzenli ziyaret etme alışkanlığını artıran interaktif tekil soru modülü.
• Günün Doğa & Fen Sırları ("Biliyor Muydunuz?"): Biyoloji, astronomi, kimya ve fizik alanlarında şaşırtıcı bilimsel gerçekleri sunan, kullanıcıların beğeni bırakabildiği mikro-içerik alanı.

5. Headless CMS ve Gelişmiş Editör Deneyimi

Admin paneli, üçüncü parti bir içerik yönetim sistemine bağımlı kalmaksızın tamamen projeye özel geliştirilmiştir:

• Tiptap Zengin Metin Düzenleyici: İçerik içine doğrudan görsel, 50 MB'a kadar yerel video ve YouTube bağlantıları gömebilen modüler editör.
• Yayın Yaşam Döngüsü & Versiyonlama: Taslak (Draft), yayında (Published) ve zamanlanmış (Scheduled) yayın durumları; yapılan her değişikliğin kaybolmasını önleyen PostRevision geçmiş kaydı mimarisi.
• Topluluk Moderasyonu: Ziyaretçi Defteri ve blog yorumları için rol etiketli (Öğrenci, Veli, Öğretmen, Mezun), küfür/spam korumalı, onay/red durumlu ve admin yanıtı destekli moderasyon mekanizması.

6. Gerçek Zamanlı Trafik ve Ziyaretçi Analitiği

Platform, gizlilik odaklı ve harici çerez gerektirmeyen dahili bir analitik motoruna sahiptir:

• Ziyaret edilen sayfalar, referans kaynakları, cihaz dağılımları (Mobil, Tablet, Masaüstü) veritabanında asenkron olarak toplanır.
• Admin panelinde Recharts kullanılarak görselleştirilen zaman serisi grafikleriyle sitenin büyüme trendi izlenir.

SEO, Performans ve Kullanıcı Deneyimi (UI/UX)

• Arama Motoru Optimizasyonu (SEO): Next.js Metadata API ile her sayfa ve blog yazısı için dinamik meta etiketleri, Open Graph kartları ve otomatik Twitter önizlemeleri üretilir. Article ve Quiz şemaları için Schema.org JSON-LD yapılandırılmış verileri uygulanmıştır. Dinamik sitemap.xml ve robots.txt otomasyonu mevcuttur.
• Yüksek Performans: Görseller Next.js Image bileşeniyle sizes ve priority nitelikleri optimize edilerek sunulur; Incremental Static Regeneration (ISR) ve Server Components (RSC) sayesinde mükemmel Core Web Vitals (LCP, CLS, INP) skorları elde edilir.
• Tasarım Dili: Doğa, bilim ve ferahlığı yansıtan zümrüt yeşili/teal renk paleti; modern mikro animasyonlar, mobil öncelikli responsive ızgara sistemleri ve Tailwind CSS v4'ün en yeni özellikleriyle harmanlanmıştır.

Teknoloji Yığını Özeti

• Önyüz: Next.js (App Router), React 19, TypeScript, Tailwind CSS v4, Lucide React, Recharts
• Arkayüz & Veritabanı: Serverless PostgreSQL (NeonDB), Prisma ORM 7, Node.js
• Kimlik Doğrulama & Güvenlik: NextAuth.js v5 (Auth.js), Bcrypt.js, Zod
• Yapay Zekâ: Hugging Face Inference API (FLUX.1-schnell Modeli)
• Medya & CDN: Cloudinary API, Next-Cloudinary
• İletişim & Bildirimler: Resend E-posta API
• İçerik Editörü: Tiptap Headless Framework