Kadın Çorap & Hosiery E-Commerce Platformu
Modern, minimal ve premium bir alışveriş deneyimi.
Narla Fashion; kadın çorapları, hosiery, seamless ürünler ve basic koleksiyonlara odaklanan modern bir Next.js 16 e-ticaret platformudur. Marka kimliği: zarafet, minimalizm, ten tonları, doğal renk paleti ve modern tasarım.
💎 Premium UI tasarımı – Narla Rose & Beige marka renkleri
⚡ Next.js 16 + React 19 ile ultra hızlı performans
🔥 Firebase Auth / Firestore ile kullanıcı & sepet yönetimi
🛒 Gerçek zamanlı sepet – wishlist – ürün varyant sistemleri
🎨 TailwindCSS 4 + MUI birleşik tasarım altyapısı
🎥 Hero Slider + Category Slider (Swiper.js)
🎬 Framer Motion ile animasyonlu ürün kartları
🧦 Renk varyantlı ürün kartları (nude, mocha, espresso tonları)
🍞 React-Hot-Toast & Toastify bildirim sistemi
🗂️ Zustand store ile global state
📅 Gelişmiş ürün filtreleme & sıralama sistemi
📩 EmailJS ile iletişim & form altyapısı
✔ Ten çorapları (Nude Light – Nude Medium – Deep) ✔ Opak çoraplar (Black, Graphite) ✔ Soket / külotlu çoraplar ✔ Trend koleksiyonlar ✔ Seamless ürünler ✔ Renk varyantlı ürün kartları ✔ Kombin önerileri
| Teknoloji | Açıklama |
|---|---|
| Next.js 16 | Modern e-ticaret altyapısı |
| React 19 | UI Framework |
| TailwindCSS 4 | Stil motoru |
| Firebase | Auth + Veritabanı |
| Zustand | State management |
| Swiper.js | Slider sistemi |
| Framer Motion | Animasyon |
| MUI | UI component library |
| EmailJS | E-mail gönderimi |
| Lucide Icons | Modern ikon seti |
🖼️ DEMO: narla-fashion.vercel.app
11.mp4
10.mp4
10.mp4
9.mp4
7.mp4
6.mp4
5.mp4
4.mp4
3.mp4
2.mp4
1.mp4
0.mp4
1.Next.js 16
Hızlı routing, SEO ve performans için ana framework.
App Router, dynamic routes, server components gibi modern özellikler kullanıldı.
Ürün detay sayfaları (/product/[slug]) ve shop sayfaları Next.js routing ile çalışıyor.
2.React 19
Komponent mimarisi ve UI oluşturmak için ana framework.
useState, useEffect, useTransition, modern React özellikleri kullanıldı.
3.TailwindCSS 4
Narla'nın Rose/Beige/Black renk paletini hızlı ve düzenli şekilde uygulamak için.
Tüm responsive tasarım Tailwind ile yapıldı:
HeroSlider, ProductCard, ProductDetails, FilterPanel, Login/Register sayfaları vs.
4.Zustand (v5)
⚡ Sepet yönetimi, favoriler, seçili varyantlar, anlık state işlemleri için kullanıldı.
Nerede kullanıyorsun?
🛒 Cart: Ürün sepete ekleme, miktar artırma/azaltma
🤍 Wishlist: Kalp ikonuna basınca istek listesine ekleme
🎨 Color/Size Selector: Ürün rengi-seçimi state’leri
🔄 Ürün tavsiyelerinde filtreleme, geçici state işlemleri
React Context’ten daha hafif ve hızlı olduğu için tercih edildi.
5.Firebase 12 (Auth + Firestore + Storage) 🔐 Firebase Authentication
Kullanıcı giriş/kayıt sistemi:
Email/Password signup
Login
Logout
Profil güncelleme
Hesaba yönlendirme (AccountPage)
6.📦 Firestore Database
Sepet bilgilerini kullanıcıya özel kaydetme
Sipariş/checkout adımlarında veri işleme
Kullanıcı verilerini saklama
7.🖼️ Firebase Storage
Profil fotoğrafı yükleme (Account Settings)
Ürün görselleri (istersen Storage’a taşıyabilirsin)
8.EmailJS
✉️ Contact form / iletişim / support formu için e-mail gönderme
Nerede?
İletişim formu
Support / bize ulaşın alanı
Kullanıcı mesajlarını direkt e-mail içine düşürme
Kullanım mantığı:
Form submit → EmailJS → “Message sent successfully” toast → Mail kutuna düşer.
Sunucu gerektirmediği için Next.js ile çok hızlı entegre olur.
9.React-Hot-Toast
🔔 Başarılı / hata / uyarı bildirimleri için
Nerelerde kullanıldı?
Sepete ürün ekleyince
Favoriye ekleyince
Login başarılı / başarısız
Register hataları
Form gönderimi başarı mesajı
Stokta yok / varyant seçilmedi uyarısı
10.React-Toastify
Aynı şekilde bildirim altyapısı ama:
Daha büyük tasarımlar ve panel tipi uyarılar için.
Özellikle:
Login/Register sayfalarında
Uzun hatalar için (örn: yanlış şifre – validation hatası)
11.Framer Motion
🎬 Animasyonlar için
Nerede?
Ürün kartı hover animasyonu
Ürün detayında görsel geçişleri
Slider içinde fade-in
Navbar açılma/kapanma
Filtre paneli animasyonu
UI’yı premium hale getiriyor.
12.Swiper.js
🎡 Slider sistemi
Kullanım alanları:
HeroSlider (ana sayfa)
CategorySlider (shop sayfası üstü)
RecommendedSlider (ürün detay altı öneri)
Touch destekli, responsive bir slider.
13.MUI (Material UI)
📅 MUI Date-Pickers, Form öğeleri ve modal/tarih seçme için kullanıldı.
Nerede?
Tarih seçme alanları (kullanıcı hesap ayarları / doğum günü vs)
Bazı Input / Select bileşenleri (daha profesyonel görünmesi için)
14.Lucide-React
🖼 İkon seti olarak:
Kalp (wishlist)
Sepet ikonu
Filtre, sort ikonları
User icon, logout icon
Ok yönlendirmeler
Temiz ve modern görünüm.
15.React Datepicker
📅 Alternatif tarih seçimi (MUI yanında hafif çözümler için)
Örn:
Filtre panelinde ürün tarihine göre sıralama gibi
16.@emotion/react + @emotion/styled
MUI’nin stil altyapısıdır. Tailwind’in yanında MUI component’leri özelleştirmek için gerekli.
Örneğin:
MUI Datepicker teması
MUI Button stil override
Modal stilleri
17.Dayjs
🕒 Basit tarih formatlama:
Üye olma tarihi
Sipariş tarihi
Ürün eklenme tarihi
19.date-fns
Benzer şekilde:
Tarih farkı hesaplama
Formatlama
Filtreleme için tarih karşılaştırma
20.clsx
Tailwind class’larını dinamik olarak birleştirmek için.
Örneğin:
Renk varyantı seçiliyse class değişimi
Aktif buton stilleri
Dropdown açık/kapalı durumları
🏬 1) Ana Sayfa (Home Page) Kullanılan kütüphaneler
Swiper.js (Hero Slider)
Framer Motion (Fade/slide animasyonları)
TailwindCSS (Responsive yapı)
Lucide Icons (Ok, yönlendirme ikonları)
Teknik İşlevler
Hero slider otomatik geçişli (Swiper)
Alt kategoriler / mini collection slider
Popüler ürünler section (ProductCard bileşeni ile)
Responsive grid yapısı
Ana sayfaya özel preload optimizasyonu (Next/Image cache)
🛍 2) Shop Sayfası Kullanılan kütüphaneler
Zustand (Filtrelenmiş ürün state’i)
Swiper.js (Category Slider)
clsx (Dynamic class)
Framer Motion (Grid geçiş animasyonu)
React Hot Toast (Filtreleme uyarıları)
Teknik İşlevler
Tüm ürünlerin listelendiği page
Filtre paneli (renk, beden, fiyat)
Sıralama menüsü (price asc/desc, latest)
Kategori slider (nude, mocha, black vs.)
Ürün kartına tıklayınca → dynamic route → Product Detail
Responsive grid (2–3–4 kolon)
🧦 3) Ürün Detay Sayfası (Product Detail) Kullanılan kütüphaneler
Zustand → Sepet & wishlist yönetimi
Framer Motion → Görsel animasyonları
React Hot Toast → "Sepete eklendi"
clsx → Aktif renk/beden butonu
Swiper.js → Alternatif görüntüler (opsiyonel)
Firebase Firestore → Kullanıcının sepetine veri kaydı
Teknik İşlevler
Renk varyantı seçimi
Beden seçimi
Price / Description alanları
“Add to Cart” → Zustand store + Firestore sync
“Add to Wishlist” → Kalp ikonu → Zustand store
Önerilen ürünler (RecommendedSlider)
Bu sayfa tamamen e-ticaret davranışına göre özel yazıldı.
🛒 4) Sepet Sayfası (Cart Page) Kullanılan kütüphaneler
Zustand → Sepet state yönetimi
Firebase Firestore → Login’li kullanıcıya özel cart sync
React Hot Toast → Kaldırıldı / başarı / hata
clsx → Dinamik class (aktif + pasif buton)
Next/Image → Lazy-loaded ürün görselleri
Teknik İşlevler
Miktar artır / azalt
Ürün silme
Toplam fiyat hesaplama
Firestore’a senkronize cart
Login değilse → “Hesabına giriş yap” yönlendirmesi
Checkout butonu
Sepet mantığı tamamen gerçek e-ticaret yapısında tasarlandı.
❤️ 5) Wishlist (İstek Listesi) Kullanılan kütüphaneler
Zustand → Favoriler store
React Hot Toast → Ekle / çıkar
Firebase Firestore (Opsiyonel) → Kullanıcıya özel wishlist
Framer Motion → Fade/slide geçişler
Teknik İşlevler
Ürün kartındaki kalp → wishlist’e ekleme
Boş liste → Empty state UI
Favoriden kaldırma
ProductCard ile bütünleşmiş
👤 6) Hesap Sayfası (Account Page) Kullanılan kütüphaneler
Firebase Auth → kullanıcı oturumu
Firebase Firestore → kullanıcı bilgileri
Firebase Storage → profil foto yükleme
React Hot Toast → Profil güncelleme mesajı
Next.js Client Components → gerçek zamanlı UI
TailwindCSS → profil layout
Teknik İşlevler
Kullanıcı adı, e-mail gibi bilgileri gösterme
Profil fotoğrafı değiştirme
Logout
Sipariş geçmişi (istersen ekleriz)
Arka plan fotoğrafı full-screen davranışı
Login değilse → otomatik yönlendirme /
🔐 7) Login / Register Sayfası Kullanılan kütüphaneler
Firebase Auth → Signup / Login / Reset
React-Hot-Toast → Başarı / hata bildirimleri
React-Toastify → Büyük panel uyarılar
TailwindCSS → Form UI
Framer Motion → Form fade-in animasyonu
Teknik İşlevler
Email + password ile login
Şifre validation (minimum length)
Reset password (istersen eklerim)
Kayıt başarılı → otomatik yönlendirme: /account
📩 8) İletişim / Bize Ulaşın (EmailJS Entegrasyonu) Kullanılan kütüphaneler
EmailJS
React Hot Toast
TailwindCSS
Framer Motion (opsiyonel)
Teknik İşlevler
Form submit → EmailJS → mail kutuna düşen mesaj
Success / error toast
Otomatik form reset
Name, email, message alanları
EmailJS API kullanılma sebebi:
Backend gerekmeden mail atma
Next.js projelerinde kolay entegrasyon
Güvenli public key yapısı
🎨 9) Renk – Beden – Varyant Sistemleri Kullanılan kütüphaneler
clsx → aktif varyant highlight
Zustand → seçili varyant state
Framer Motion → küçük animasyonlar
Teknik İşlevler
NudeLight, NudeMedium, NudeDeep, Mocha, Espresso, Black gibi varyantlar
Beden seçenekleri (S–M–L–XL)
Bir varyant seçilmeden sepete eklemeye izin vermeme
Seçili butonu renklendirme
🖼️ 10) Görseller & Media Yönetimi Kullanılan kütüphaneler
Next/Image → optimizasyon
Firebase Storage (opsiyonel)
Teknik Özellikler
Görseller lazy-loading
Responsive breakpoints
WebP otomatik dönüşüm
Placeholder blur
🧮 11) Global Store (Zustand) – Teknik Mimarisi Store’da tutulan veriler:
cart → sepetteki ürünler
wishlist → istek listesi
selectedColor → seçili renk
selectedSize → seçili beden
quantity → ürün adedi
filterOptions → shop filtre state’i
sortOption → fiyat, yenilik gibi sıralama
Store neden Zustand ile yapıldı?
Redux kadar ağır değil
Context’ten daha hızlı
Çoklu component’te paylaşılan state (cart/wishlist) için en iyi çözüm
📍 12) Routing & Dynamic Routes (Next.js) Teknik Yapı
/shop → ürün listesi
/product/[slug] → ürün detayları
/account → kullanıcı hesabı
/wishlist → favoriler
/cart → sepet
/auth/login
/auth/register
Dynamic route sayesinde slug üzerinden ürün detayları çekiliyor.
📘 13) Özet: Narla Fashion Teknik Mimarisi
| Alan | Kullanılan Teknolojiler | Açıklama |
|---|---|---|
| Ürün Kartları | React, Tailwind, Zustand | Renk–beden varyant, animasyon |
| Sepet | Zustand + Firestore | Realtime cart sync |
| Slider | Swiper.js + Framer Motion | Hero & category slider |
| Auth | Firebase | Login/Register/Logout |
| Bildirim | Hot Toast + Toastify | Başarı / hata uyarıları |
| Form | EmailJS | Backend gereksiz |
| Görseller | Next/Image | Optimize medya |
| Rotalar | Next.js | Dynamic routes |
| Profil | Firebase | Storage + Auth |
| Shop | Zustand + Filters | Filtre & sort sistemi |
🎞 1) HeroSlider Component Kullanılan kütüphaneler
Swiper.js
Next/Image
Framer Motion (opsiyonel fade-in)
Teknik işlev
Ana sayfa üstündeki büyük slider
Otomatik animasyon & loop
Touch destekli
Responsive image scaling
Props / Data Flow
Slide verileri /data/slider.ts dosyasından alınıyor
Her slide’da title + subtitle + CTA + background image
🗂 2) CategorySlider Component Kullanılan kütüphaneler
Swiper.js
TailwindCSS
clsx
Teknik işlev
Nude / Mocha / Black / Graphite gibi renk kategorilerini kaydırmalı gösterir
Tıklanınca Shop sayfasına filtreli yönlendirme (ör: /shop?color=nude)
🧦 3) ProductCard Component Kullanılan kütüphaneler
Zustand → wishlist & cart işlemleri
Framer Motion → hover animasyonu
React Hot Toast → “sepete eklendi”
Next/Image
Teknik işlev
Ürün fotoğrafı
Renk seçenekleri (mini dots)
Fiyat
İstek listesi butonu (kalp ikonu)
Hover’da hafif büyüme
Tıklayınca /product/[slug] sayfasına gider
Neden önemli?
Bu component, tüm e-ticaret sitenin çekirdeği.
🧦 4) ProductDetails Component Kullanılan kütüphaneler
Zustand → seçili renk, beden, adet, cart yönetimi
Lucide Icons → yönlendirme ikonları
React Hot Toast → bildirimler
Framer Motion → görsel geçiş animasyonu
Teknik işlevler
Renk varyant seçme
Beden seçme
Ürün fotoğrafı
Açıklama / özellikler
“Add to Cart” → store + Firestore
“Add to Wishlist” → kalp ikonundan
Data Flow
products.ts → slug ile ürün bulunur
Component state → seçili varyant
Zustand → sepete ekleme çağrıları
🔄 5) RecommendedSlider Component Kullanılan kütüphaneler
Swiper.js
Framer Motion
ProductCard component
Teknik işlev
Ürün detay sayfasında ilgili ürünleri listeler
Aynı kategori / aynı renk grubu varsa otomatik gösterim
🔍 6) FilterPanel Component Kullanılan kütüphaneler
Zustand → aktif filtreler
clsx → aktif buton renkleri
TailwindCSS → UI
Framer Motion → açılma kapanma animasyonu
Teknik işlev
Renk filtresi
Beden filtresi
Fiyat aralığı
“Filtreleri temizle” butonu
Data Flow
Kullanıcı seçimleri Zustand’a aktarılır
Shop page bu state’i okuyarak ürünleri filtreler
Fiyat küçükten büyüğe
Fiyat büyükten küçüğe
Yeni gelen ürünler (isLatest)
Kullanım
onSortChange() aracılığıyla Shop sayfasındaki product state’ini değiştirir.
🧺 8) CartItem Component Kullanılan kütüphaneler
Zustand → cart state
Lucide Icons → artı/eksi ikonları
React Hot Toast → ürün silme
Teknik işlevler
Miktar artır / azalt
Ürün silme
Alt toplam hesaplama
Varyantları gösterme (renk + beden)
🛒 9) CartPage Component İşlevler
CartItem listesini gösterir
Total price hesaplama
Sepet boşsa → empty state UI
Checkout butonu
Login değilse → login sayfasına yönlendirme
❤️ 10) WishlistItem Component İşlev
Favorilere eklenen ürünleri listeler
Ürünü favoriden kaldırır
Ürün detayına gider
ProductCard ile aynı UI sistemine entegre
❤️ 11) WishlistPage Component İşlevler
Tüm wishlist ürünlerini gösterir
Boşsa → “Henüz favori eklemedin” ekranı
Tıklayınca → ürün detay
👤 12) AccountMenu Component Kullanım alanı
AccountPage içinde küçük grid kutuları (Siparişlerim / Profil Bilgileri / Çıkış Yap vb.)
Teknik işlev
Firebase Auth → logout
UI yönlendirmeleri
Tailwind ile grid responsive yapı
📄 13) AccountPage Component Teknik yapılar
Firebase Auth → kullanıcıyı çekme
Login değilse → redirect('/')
Kullanıcı adı, mail gösterimi
Profil fotoğrafı
Firebase Storage → resim yükleme (opsiyonel)
Logout
🔐 14) LoginForm / RegisterForm Components Kullanılan teknolojiler
Firebase Auth
React Hot Toast
React Toastify (panel alert)
TailwindCSS
Teknik işlevler
Email + şifre giriş
Validation
İşlem başarılı → redirect('/account')
Hatalar → toast
📩 15) ContactForm Component (EmailJS) Teknik işlev
Name, email, message alır
EmailJS service → mail gönderir
Başarılı olursa → success toast
Form resetlenir
Backend gerektirmez
🎨 16) ColorSelector Component İşlev
Nude–Mocha–Espresso–Black varyantları gösterir
Seçili olanı highlight eder
Zustand’a setSelectedColor() gönderir
Kütüphaneler
Zustand
clsx
TailwindCSS
📏 17) SizeSelector Component İşlev
S / M / L / XL bedenleri gösterir
Seçili beden → highlight
Seçilmeden sepete izin vermez
🖼 18) ImageGallery Component Teknik işlev
Product detail içindeki ürün görseli geçişleri
Thumbnail → large image değişimi
Motion ile fade geçiş
Next/Image ile optimizasyon
🎛 19) Navbar Component Kütüphaneler
Lucide Icons
Zustand (cart count)
TailwindCSS
Teknik işlev
Logo + kategori linkleri
Mobil menü (hamburger)
Sepet ikonu → adet gösterimi
Account linki (giriş yapınca avatar)
🎚 20) Footer Component Teknik işlev
Marka bilgisi
Koleksiyon linkleri
Sosyal medya ikonları
Newsletter alanı (istersen EmailJS bağlarız)
⛓ 21) Layout Components (RootLayout, ShopLayout vs.) Teknik işlev
AuthProvider
Global CSS
Background image yönetimi
Toast container (React Hot Toast)
Global navbar + footer
📦 22) Data Components (products.ts, colors.ts, categories.ts) Teknik işlev
Tüm ürün verileri burada tutulur
Renk paleti / hex kodları
Kategori listesini slider’a verir
🧮 23) Utils Functions İşlevler
Price calculation
Slug oluşturma
String normalize
Firestore fetch/save helpers
Filter & sort helpers
📚 24) Hooklar (Varsa: useCart, useWishlist, useAuth)
Projeyi temiz tutmak için logic bileşenlerden ayrı tutulur.
Önerilere açığım! Yeni özellikler veya iyileştirmeler için issue/pull request gönderebilirsin.
Proje hakkında sorularınız varsa, lütfen benimle iletişime geçin.. E-posta: akgundogduesr@gmail.com