InkScape Innovators.
60.000 € bütçeli Erasmus+ KA210-VET projesi için tek başıma geliştirdiğim; çok dilli çizgi roman yayınlama, gelişmiş okuma deneyimi, içerik yönetimi, rol bazlı admin paneli ve etkileşim analitiğini tek sistemde birleştiren full-stack web platformu.
Tamamlandı · Erasmus+ KA210-VET
- 01 · Rol
- Sole Full-stack Developer · UI/UX · Database & cloud architecture
- 02 · Platform
- Responsive Web
- 03 · Dönem
- Erasmus+ KA210-VET · Tamamlandı
- 04 · Durum
- Tamamlandı · Erasmus+ KA210-VET
Proje bağlamı
InkScape Innovators, Türkiye, Yunanistan ve Portekiz'den mesleki eğitim öğrencilerini sürdürülebilirlik, green skills, dijital hikâye anlatımı ve yapay zekâ destekli yaratıcı üretim etrafında buluşturan 60.000 € bütçeli bir Erasmus+ KA210-VET projesi için geliştirildi. Platform; proje ve ortaklarını tanıtan çok dilli kurumsal landing page, öğrencilerin ürettiği çizgi romanların yayınlandığı dijital kütüphane, detaylı comic sayfaları, gelişmiş okuma deneyimi ve kapsamlı bir içerik yönetim sistemi sunuyor. Uygulamanın tasarımından frontend ve backend mimarisine, veritabanı modellemesinden authentication, AWS S3 medya yönetimi, analytics ve admin paneline kadar tüm yazılım geliştirme sürecini tek başıma üstlendim.
Temel problem
Temel zorluk, klasik bir içerik sitesi yerine hem son kullanıcılar için modern ve akıcı bir çizgi roman okuma ürünü hem de proje ekibinin teknik bilgi gerektirmeden içerik yönetebileceği güçlü bir CMS geliştirmekti. Çizgi romanların chapter ve page hiyerarşisiyle yönetilmesi, büyük görsellerin güvenli biçimde depolanması, çoklu dil desteği, rol bazlı yönetim, anonim kullanıcı etkileşimlerinin takip edilmesi ve masaüstü ile mobil cihazlarda farklı okuma tercihlerini destekleyen esnek bir reader deneyiminin aynı uygulama içerisinde birlikte çalışması gerekiyordu.
Geliştirdiklerim
- 01
Next.js, React, TypeScript ve Tailwind CSS kullanarak public siteyi, çizgi roman platformunu, comic reader'ı ve admin panelini uçtan uca geliştirdim.
- 02
İngilizce, Türkçe, Yunanca ve Portekizce için next-intl tabanlı locale routing ve çeviri altyapısını kurarak landing page, yönetim ekranları ve kullanıcı deneyimini çok dilli hale getirdim.
- 03
Comic, Chapter, ChapterPage, Category, User, ReadLog, LikeLog ve Message modellerini Prisma ile tasarlayarak PostgreSQL üzerinde ilişkisel veri mimarisini oluşturdum.
- 04
Supabase Auth kullanarak ADMIN ve SUPER_ADMIN rollerine sahip authentication ve authorization sistemini geliştirdim; middleware ve server-side permission kontrolleriyle yönetim alanlarını korudum.
- 05
Comic ekleme ve düzenleme için iki aşamalı bir CMS akışı geliştirdim; genel bilgiler, kategoriler, kapak görseli, chapter'lar ve sayfalar tek bir yönetim deneyiminden kontrol edilebiliyor.
- 06
Chapter ve comic sayfalarının drag-and-drop ile sıralanmasını, list/grid görünümlerini ve düzenleme sırasında kaldırılan medya dosyalarının temizlenmesini sağlayan içerik yönetimi akışlarını geliştirdim.
- 07
AWS S3 entegrasyonunda kısa süreli presigned upload URL'leri kullanarak kapak, chapter page ve avatar dosyalarının güvenli biçimde doğrudan object storage'a yüklenmesini sağladım.
- 08
Tekli, çiftli ve üçlü sayfa görünümü; dikey/yatay okuma; click/scroll navigation; LTR/RTL yönü; zoom; fullscreen; light/dark/sepia tema; grayscale, brightness, page spacing ve auto-scroll gibi ayarlara sahip kapsamlı bir comic reader geliştirdim.
- 09
Okuyucunun comic, chapter ve sayfa ilerlemesini cihaz tarafında saklayan; sunucu tarafında anonim hashed visitor fingerprint ile chapter bazlı ilerleme ve etkileşim verisi tutan Continue Reading sistemini geliştirdim.
- 10
Aynı anonim ziyaretçi fingerprint'ini kullanan toggle tabanlı like sistemi geliştirerek kullanıcı hesabı gerektirmeden beğeni durumunun korunmasını ve toplam beğeni sayılarının hesaplanmasını sağladım.
- 11
Başlık, açıklama, yazar ve kategori üzerinden çalışan arama sistemi ile önce ortak kategorilere, ardından aynı ülkeye göre içerik seçen recommendation akışını geliştirdim.
- 12
Featured, Popular ve Newest içerik akışlarını oluşturdum; popüler çizgi romanları okuma verisine göre sıralayan ve kategori tabanlı keşfi destekleyen public comic experience geliştirdim.
- 13
Toplam okuma ve beğeni sayıları, yayınlanan ve taslak çizgi romanlar, günlük engagement grafikleri, cihaz dağılımı, en çok okunan içerikler, ülkelere göre okuyucular ve recent activity verilerini gösteren admin analytics dashboard'u geliştirdim.
- 14
Landing page'deki iletişim formunu veritabanına bağlayarak gelen mesajların admin panelinde inbox benzeri bir arayüzden aranması, filtrelenmesi ve read/unread olarak yönetilmesini sağladım.
- 15
SUPER_ADMIN kullanıcılarının yeni admin oluşturabildiği ve yönetebildiği kullanıcı yönetimi akışını; login, logout, profil güncelleme ve password reset süreçlerini geliştirdim.
- 16
Authentication ve password reset işlemlerinde IP bazlı rate limiting ekleyerek kötüye kullanım ve aşırı istek senaryolarına karşı ek koruma sağladım.
Teknik yaklaşım
Uygulama Next.js App Router, React, TypeScript ve Tailwind CSS üzerine kuruldu. Public kullanıcı deneyimi, çizgi roman keşif sayfaları ve reader aynı uygulama içerisinde çalışırken yönetim alanları locale-aware route yapısı altında ADMIN ve SUPER_ADMIN rolleriyle ayrılıyor. Authentication Supabase Auth üzerinden yürütülüyor; uygulama verileri Prisma ORM ve PostgreSQL ile yönetiliyor. Comic verisi Comic → Chapter → ChapterPage hiyerarşisinde modellenirken kategoriler many-to-many ilişkisiyle bağlanıyor. Büyük medya dosyaları PostgreSQL içerisinde tutulmak yerine AWS S3'e yükleniyor; backend yalnızca kısa süreli presigned upload URL'leri üretiyor. Client-side veri yönetiminde TanStack Query kullanılıyor. Anonymous engagement katmanında IP ve User-Agent bilgisinden SHA-256 ile oluşturulan, ham IP adresini saklamayan bir visitor fingerprint kullanılıyor; ReadLog ve LikeLog kayıtları comic ile bu anonim session kimliğinin birleşimi üzerinden tutuluyor. Sayfa seviyesindeki reading progress localStorage'da, server tarafındaki chapter ilerlemesi ise veritabanında saklanıyor. Analytics katmanı bu ReadLog ve LikeLog verilerini toplam engagement, günlük trendler, cihaz türleri, ülke dağılımı, en çok okunan içerikler ve recent activity görünümlerine dönüştürüyor.
Sistem yapısı
- 01
Frontend
Next.js · React · TypeScript · Tailwind CSS - 02
Data
Prisma · PostgreSQL · Supabase - 03
Authentication
Supabase Auth · ADMIN / SUPER_ADMIN - 04
Media
AWS S3 · Presigned Upload URLs - 05
State & Fetching
TanStack Query · Server Actions - 06
Internationalization
next-intl · EN / TR / EL / PT - 07
Engagement
Reading Progress · Likes · Anonymous Fingerprint - 08
Analytics
Reads · Likes · Devices · Countries · Activity
Mevcut durum
Platform, Erasmus+ KA210-VET projesinin dijital yayın ve içerik yönetimi altyapısı olarak tamamlandı ve canlı demo üzerinden erişilebiliyor. Public tarafta proje tanıtımı, çizgi roman kütüphanesi, featured/popular/newest içerikler, kategoriler, arama, comic detay sayfaları, recommendation ve gelişmiş reader deneyimi bulunuyor. Yönetim tarafında comics, chapters, pages, categories, kullanıcılar, iletişim mesajları ve engagement analytics tek panelden yönetilebiliyor. Uygulama dört dili destekliyor; kimlik doğrulama Supabase Auth, ilişkisel veri katmanı Prisma/PostgreSQL ve medya depolama AWS S3 üzerinde çalışıyor.