İç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.

Benzer projeler

Tüm projeler

Web & Full Stack

InkStudio: Framer Motion Destekli Premium Next.js Deneyimi

Üst düzey sanat stüdyoları için geliştirilen; Framer Motion ile donanım hızlandırmalı animasyonlar, URL tabanlı state yönetimi ve yüksek performanslı medya render mimarisi sunan modern bir web uygulaması.

  • TypeScript
  • HTML
  • CSS
  • +7

Web & Full Stack

Fahrettin'in Dinamik Portfolyo ve CMS'i

Hazır şablon kullanılmadan sıfırdan geliştirilmiş, teknoloji bazlı proje filtreleme sistemine, özel animasyonlara ve SEO optimizasyonlu layout yapılarına sahip dinamik, çok dilli kişisel portfolyo.

  • TypeScript
  • JavaScript
  • Next.js
  • +4

Web & Full Stack

Özel

Mavi Bahçem: Decoupled Next.js & PHP CMS Mimarisi

Kesin bir biçimde ayrıştırılmış (decoupled) mimari kullanan, yüksek düzeyde optimize edilmiş ve statik olarak üretilen bir web platformu. Altyapı maliyetlerini en aza indirirken performansı en üst düzeye çıkarmak için özel bir Next.js arayüzünü, güvenli ve hafif bir PHP/MySQL arka ucu ile eşleştirir.

  • TypeScript
  • PHP
  • SQL
  • +7

Benzer bir ihtiyacınız mı var?

Bu tür bir sistemi sizin için de kurabilirim.

Projenizi birkaç cümleyle anlatın; doğru yaklaşımı ve tahmini kapsamı birlikte belirleyelim.

Projenizi anlatınHizmetleri inceleyin