İçeriğe geç
Tüm projeler
Web & Full StackAçık kaynak

MangaSokağı: Yüksek Performanslı Next.js & PostgreSQL E-Ticaret Platformu

Katı PostgreSQL veri bütünlüğü kısıtlamalarını, reaktif bir Next.js ön yüzü ve Zustand state yönetimi ile birleştiren ayrıştırılmış (decoupled) e-ticaret mimarisi.

Kaynak kodu

Teknoloji yığını

Çatılar & kütüphaneler

Performans & metrikler

  • Arama inputlarındaki API istekleri debounced edilerek (400ms) gereksiz I/O ve ağ bant genişliği tüketimi engellenir
  • Veritabanında küçük ilişkisel tablolar için SMALLSERIAL ve SMALLINT kullanımı, RAM üzerindeki bellek ayak izini (memory footprint) minimize eder
  • Sepet gibi istemci odaklı bileşenlerdeki state güncellemeleri requestAnimationFrame ile paint cycle sonrasına ertelenerek ana iş parçacığı (main-thread) bloklanması önlenir

Neden geliştirdim?

Geleneksel e-ticaret altyapıları (WooCommerce vb.) aşırı şişirilmiş DOM yapıları ve esneklikten uzak veritabanı şemaları dayatır. MangaSokağı'nı, veri bütünlüğünü doğrudan veritabanı seviyesinde çözen ve ön yüzde tamamen özelleştirilmiş, tipe duyarlı (type-safe) bir alışveriş deneyimi sunan özel bir mimari olarak sıfırdan inşa ettim.

Mimari & kararlar

Veri katmanı (persistence layer), PostgreSQL üzerinde çalışır. Sentetik UNSIGNED tipler yerine CHECK kısıtlamaları, özel ENUM tipleri (manga_badge) ve updated_at döngülerini otomatize eden TRIGGER fonksiyonları ile veri bütünlüğü native olarak sağlanır. Ön yüz, Next.js App Router tabanlıdır ve istemci tarafı (client-side) state yönetimi için Zustand kullanır. Ağ (network) sınırlarında, ham backend DTO'larını sanitize edilmiş UI arayüzlerine dönüştüren katı Adapter pattern'ler (mapVolumeToManga, mapSeriesToMangaDetail) uygulanmıştır.

Temel özellikler

  1. 01İstemci ve sunucu arasındaki veri kontratı mutasyonlarını (API contract mutations) izole eden Adapter pattern entegrasyonu
  2. 02Donanım ivmeli, klavye kısayolu (⌘K) destekli ve debounced asenkron arama motoru (SearchModal)
  3. 03Büyük koleksiyon sorgularını hızlandırmak için is_new_arrival ve is_best_seller flag'leri üzerinde çalışan koşullu PostgreSQL indekslemeleri (Partial Indexing)
  4. 04React Hydration uyumsuzluklarını (mismatch) engellemek için requestAnimationFrame tabanlı render erteleme algoritması
  5. 05Headless UI kullanılarak geliştirilen erişilebilir (a11y) ve DOM portal tabanlı asenkron sepet modülü (CartSlideOver)

Teknik değerlendirme

Bu proje, veri tutarlılığının uygulama katmanına (application layer) bırakılmadan doğrudan veritabanı motoru (PostgreSQL) seviyesinde nasıl çözülmesi gerektiğini gösterir. Ön yüz tarafında ise, state (Zustand) ve UI bileşenleri arasındaki bağlantılar yüksek performansla çalışır. Geliştirilen Adapter pattern, backend şemalarındaki olası değişikliklerin frontend bileşenlerini kırmasını engelleyen kritik bir izolasyon katmanı (isolation layer) görevi görür.