Web & Full Stack
Açık Kaynak

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

Kaynak Kodunu İncele
TypeScriptSQLHTMLCSSNext.jsReactTailwind CSSPostgreSQLZustandHeadless UIHeroicons

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.

Teknoloji Yığını

TypeScriptSQLHTMLCSSNext.jsReactTailwind CSSPostgreSQLZustandHeadless UIHeroicons

Sistem Metrikleri

▹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

Bunu Neden İnşa Ettim?

"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

  • 01.İstemci ve sunucu arasındaki veri kontratı mutasyonlarını (API contract mutations) izole eden Adapter pattern entegrasyonu
  • 02.Donanım ivmeli, klavye kısayolu (⌘K) destekli ve debounced asenkron arama motoru (SearchModal)
  • 03.Bü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)
  • 04.React Hydration uyumsuzluklarını (mismatch) engellemek için `requestAnimationFrame` tabanlı render erteleme algoritması
  • 05.Headless UI kullanılarak geliştirilen erişilebilir (a11y) ve DOM portal tabanlı asenkron sepet modülü (CartSlideOver)
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.