Skip to content
All projects
Web & Full StackPrivate

MangaSokağı: High-Performance Next.js & PostgreSQL E-Commerce Platform

A decoupled e-commerce architecture combining strict PostgreSQL data integrity constraints with a highly reactive Next.js frontend driven by Zustand state management.

Source code

Tech stack

Performance & metrics

  • API request throughput on search inputs is strictly debounced (400ms), eliminating unnecessary I/O and network bandwidth consumption
  • Memory footprint allocation is minimized at the schema level by utilizing SMALLSERIAL and SMALLINT for constrained relational tables
  • Client-side state mutations in components like the Cart are deferred post-paint using requestAnimationFrame, strictly preventing main-thread locking

Why I built it

Mainstream e-commerce architectures (e.g., WooCommerce) enforce bloated DOM structures and inflexible database schemas. I engineered MangaSokağı from scratch to establish a decoupled architecture that enforces data integrity natively at the database level while delivering a fully customized, type-safe shopping experience on the frontend.

Architecture & decisions

The persistence layer runs on PostgreSQL. Data integrity is enforced natively via explicit CHECK constraints (bypassing the lack of synthetic UNSIGNED types), custom ENUM types (manga_badge), and TRIGGER functions automating updated_at lifecycles. The frontend is built on the Next.js App Router, leveraging Zustand for decoupled client-side state management. The network boundary strictly implements the Adapter pattern (mapVolumeToManga, mapSeriesToMangaDetail) to translate raw backend DTOs into sanitized UI interfaces.

Key features

  1. 01Strict Adapter pattern integration to isolate the frontend from backend API contract mutations
  2. 02Hardware-accelerated, hotkey-driven (⌘K), and debounced asynchronous search engine (SearchModal)
  3. 03Conditional PostgreSQL indexing (Partial Indexing) on is_new_arrival and is_best_seller flags to heavily optimize queries for specific catalogs
  4. 04Active mitigation of React Hydration mismatches via a requestAnimationFrame-based render deferral algorithm
  5. 05Accessible (a11y), DOM-portal-based asynchronous cart module (CartSlideOver) utilizing Headless UI

Technical review

This project demonstrates how strict data consistency should be enforced at the database engine level (PostgreSQL) rather than relying on application-layer logic. On the frontend, connections between state (Zustand) and UI components execute with high performance. The implemented Adapter pattern acts as a critical isolation layer, ensuring that schema changes in the backend do not fracture the React component tree.