Lurneo web uygulamasının renkli Learn English with YouTube landing sayfası
İngilizce pratiğini ders kataloğundan değil, kullanıcının zaten izlemek istediği videodan başlatan ürün anlatısı.

İzlenen videoyu öğrenme materyaline dönüştürmek

Lurneo, İngilizce öğrenmek isteyen birinin içerik seçimi ile ders çalışma motivasyonu arasındaki boşluktan doğdu. Kullanıcıların çoğu YouTube’da zaten röportaj, fragman, vlog, inceleme veya eğlence içeriği izliyor; fakat bu içerik durdurulup tekrar edilebilen, kelimeleri kaydedilebilen ve sonrasında ölçülebilen bir öğrenme oturumuna dönüşmüyor. Lurneo’nun temel fikri bu davranışı değiştirmeden öğrenme katmanı eklemekti.

Kullanıcı desteklenen bir YouTube bağlantısını yapıştırıyor. Sistem İngilizce altyazıyı alıyor, zaman kodlarına göre normalize ediyor, Türkçe karşılıklarla eşliyor ve videoyu çift dilli bir çalışma yüzeyine dönüştürüyor. Kullanıcı izlerken bir kelime veya ifadeyi seçebiliyor, anlamını bağlam içinde görebiliyor, o video anıyla birlikte kaydedebiliyor, kısa shadowing tekrarları yapabiliyor ve izleme tamamlandığında kendisine özel tutorial ve quiz akışına geçebiliyor.

Lurneo Videos çalışma alanında video kartları ve YouTube linki ekleme diyaloğu
Video kütüphanesi hem hazırlanmış dersleri hem de kullanıcının eklediği desteklenen bağlantıları aynı çalışma alanında topluyor.

Video içe aktarma hattı: bir URL’den ders oturumuna

Video ekleme akışını basit bir iframe alanı olarak tasarlamadım. API önce URL’yi güvenli biçimde ayrıştırıyor, geçerli YouTube kimliğini çıkarıyor ve aynı kullanıcı için daha önce hazırlanmış bir sonuç varsa cache’den dönüyor. Yeni bir istekse eşzamanlı iki importun aynı kaydı üretmesini engelleyen bir claim/lease mekanizması açıyor. Ardından videonun erişilebilir, embed edilebilir, 45 dakikadan kısa ve kullanılabilir İngilizce altyazıya sahip olup olmadığını kontrol ediyor.

Sistem doğrudan İngilizce veya bölgesel `en-*` altyazı kanalını seçiyor; varsa Türkçe altyazıyı zaman kodlarına göre eşliyor, yoksa segmentleri kontrollü parçalar halinde çeviri hattından geçiriyor. Sonuçlar `subtitle_segments` tablosuna İngilizce metin, Türkçe karşılık, başlangıç ve süre bilgisiyle kaydediliyor. Video ve öğrenme oturumu ancak bu işlemler tutarlı biçimde tamamlandıktan sonra hazır kabul ediliyor; yarım kalan claim temizlenerek kullanıcının bozuk bir ders kaydıyla baş başa kalması engelleniyor.

Telif ve platform sınırı ürün mimarisinin parçası

Lurneo “internetteki her videoyu indirip yeniden yayınlayan” bir sistem değil. Mevcut ürün yalnızca herkese açık, embed edilebilir ve uygun İngilizce altyazısı bulunan desteklenen YouTube videolarını kabul ediyor. Video akışı resmi YouTube oynatıcısında kalıyor; uygulama ses veya görüntüyü indirmiyor ve altyazısız içeriği gizlice transkribe etmiyor. Bu nedenle kullanıcı deneyiminde `studyable`, `watch only`, `needs subtitles` ve `blocked` gibi farklı hazır olma durumları bulunuyor.

Bu sınır bir eksiklik değil, ürün güvenilirliğinin parçası. Tüketici aboneliği veya bir platform sayfasına erişebilmek, o içeriği başka bir uygulamada yeniden oynatma ve işleme hakkı vermiyor. Lurneo’da medya kaynağı ile öğrenme verisini ayırdım: oynatma sağlayıcıda kalırken kullanıcıya ait ilerleme, seçilen kelimeler, quiz sonuçları ve öğrenme paketleri Lurneo’nun veri modelinde yönetiliyor.

Lurneo mobil öğrenme ekranında YouTube videosu, İngilizce ve Türkçe senkron altyazı ile çalışma aksiyonları
İzleme yüzeyi: video, aktif İngilizce/Türkçe altyazı, kelime kaydetme ve quiz/shadowing aksiyonları aynı bağlamda.

Senkron öğrenme çalışma alanı

Öğrenme ekranının merkezinde YouTube IFrame API ile kontrol edilen oynatıcı ve zaman kodlu altyazı motoru bulunuyor. Oynatıcı ilerledikçe aktif segment hesaplanıyor; İngilizce ve Türkçe cümle video üzerinde birlikte gösteriliyor ve tam transkriptte ilgili satır vurgulanıyor. Kullanıcı zaman etiketine dokunarak belirli ana geri dönebiliyor. Böylece altyazı yalnızca okunacak metin değil, videoda gezinme ve tekrar etme aracı haline geliyor.

İngilizce cümlede seçilen bir kelime veya ifade anlam servisine gönderiliyor. Açıklama, Türkçe anlam ve orijinal bağlam kullanıcıya gösteriliyor; kaydedildiğinde ifade `saved_items` kaydına video, altyazı segmenti ve milisaniye hassasiyetindeki kaynak anıyla birlikte yazılıyor. “Save phrases”, “Start quiz” ve kısa shadowing aksiyonları ayrı modlar gibi görünse de aynı öğrenme oturumunun verisini kullanıyor. Tasarım hedefim videoyu, transkripti ve çalışma araçlarını birbirinden koparmadan tek odaklı bir yüzeyde tutmaktı.

Lurneo Words alanında farklı videolardan kaydedilmiş renkli ifade kartları
Kelime listesi değil, kaynak videosu ve tam anıyla geri çağrılabilen kişisel ifade hafızası.

İzle → çalış → quiz → tekrar döngüsü

Lurneo’daki ilerleme yalnızca yüzde göstergesi değil, açık bir oturum state machine’i. Yeni bir ders `watch` aşamasında başlıyor; video tamamlandığında `tutorial_ready`, öğrenme paketi açıldığında `tutorial`, çalışma bittiğinde `quiz_ready` ve quiz sonuçlandığında `complete` durumuna geçiyor. İlerleme güncellemeleri geriye düşmüyor; istemciden gelen izleme süresi mevcut değerden küçükse sistem daha eski verinin ilerlemeyi silmesine izin vermiyor.

Kullanıcının CEFR seviyesi, zaman kodlu transkript ve o videodan kaydettiği ifadeler Groq destekli öğrenme paketi üretiminde birlikte kullanılıyor. Üretilen yapı bir özet, bağlam içi kelime kartları, kısa çalışma bölümleri ve dört soruluk quiz içeriyor. Hazır katalog dersleri önceden hesaplanarak runtime maliyeti azaltılıyor; kullanıcının yapıştırdığı yeni bağlantılar ise talep anında hazırlanıyor. Aynı paketin iki kez üretilmesini engelleyen generation lease’i ve hazır sonucu yeniden kullanan cache davranışı, AI katmanını ürünün güvenilir bir parçası haline getiriyor.

Lurneo bağlam içi phrase quiz ekranında soru, seçenekler, ipucu ve ilerleme adımları
Quiz, bağımsız ezber soruları yerine videoda duyulan gerçek ifadeyi ve çevresindeki bağlamı tekrar kullanıyor.

Kişisel veri modeli ve güvenli pilot altyapısı

Backend’i Supabase Auth ve PostgreSQL üzerinde kurdum. Google ile giriş yapan her kullanıcı kendi profil, video, altyazı segmenti, öğrenme oturumu, kaydedilmiş ifade, öğrenme paketi ve quiz denemelerine sahip. Row Level Security politikaları yalnızca doğrudan `user_id` kolonunu değil; subtitle ve learning pack gibi dolaylı ilişkilerde videonun veya oturumun sahibini de doğruluyor. Anon ve public roller için tablo erişimleri kapalı, authenticated kullanıcıya ise yalnızca kendi ilişkileri üzerinde işlem izni veriliyor.

Quiz tamamlamayı transaction benzeri tek bir PostgreSQL fonksiyonunda ele aldım: oturumun doğru aşamada olduğunu, kullanıcı sahipliğini ve daha önce sonuç yazılmadığını kontrol ediyor; denemeyi kaydedip oturumu `complete` durumuna aynı sözleşme içinde geçiriyor. Import, materyal üretimi ve progress API’lerinde body doğrulaması, UUID ve URL kontrolleri, süre sınırı, provider timeout’ları, quota hataları ve temizlenebilir retry davranışları ayrı ayrı yönetiliyor.

Görsel sistem: ders uygulaması değil, canlı bir öğrenme işletim sistemi

Lurneo’nun arayüzünü klasik e-learning panellerindeki gri sidebar, rozet kalabalığı ve kurumsal kart estetiğinden uzaklaştırdım. Landing tarafında büyük sıkıştırılmış tipografi, yeşil işaretler, poster kompozisyonu ve turuncu–mor–mavi dikey program şeritleri kullanılıyor. Ürün içinde ise Home yeşil, Videos turuncu, Study mor ve Words mavi bir çalışma modu olarak ayrılıyor. Kalın konturlar, hafif eğilen kartlar, büyük başlıklar ve aşağıda duran dock navigasyonu uygulamaya oyunlu ama çocukça olmayan bir ritim veriyor.

Masaüstünde tek büyük yuvarlatılmış çalışma yüzeyi ve alttaki dock korunurken mobilde aynı modlar küçük ekranın doğal dikey akışına dönüşüyor. Kart yükseklikleri içeriğe göre değişiyor, kelime kartları anlam yüzüne dönebiliyor ve aktif video/transkript davranışı dokunmayla çalışıyor. Route değişiklikleri ve kart girişleri GSAP tabanlı merkezi hareket katmanından yönetiliyor; `prefers-reduced-motion` ve route cleanup davranışları animasyonun navigasyonla çakışmasını önlüyor.

Web uygulamasından kurulabilir öğrenme aracına

Lurneo’yu Next.js 16 ve React 19 üzerinde, landing, Google giriş, Home, Videos, Study, Words, profil ve lisans rotalarıyla geliştirdim. Uygulama manifest, Apple icon ve maskable PWA ikonlarıyla telefona veya tablete bağımsız uygulama gibi kurulabiliyor. Responsive ürün anatomisi özellikle tablet/PWA kullanımını destekliyor; kullanıcı videoyu izlerken transkript ve tekrar araçlarına tarayıcı sekmesi hissi olmadan ulaşabiliyor.

Canlı sürüm Vercel üzerinde çalışıyor. Ürünün kaynak kodu, Supabase migrationları, katalog üretim/doğrulama araçları ve kapsamlı Node testleri aynı projede tutuluyor. Portfolyo anlatısını hazırlarken canlı landing’i, mevcut çalışma ağacını, video import ve öğrenme paketi API’lerini, veri politikalarını, oturum modelini ve gerçek ürün ekranlarını yeniden doğruladım. Lurneo benim için içerik tüketimi, dil öğrenme pedagojisi, AI üretimi, medya platformu sınırları ve güçlü bir consumer ürün kimliğinin tek sistemde birleştiği bir çalışma oldu.

Projeler için müsait