E-Commerce Taskinnovation

Modern web teknolojileriyle geliştirilmiş, kullanıcı dostu bir e-ticaret platformu. Ürün katalog yönetiminden güvenli ödeme işlemlerine kadar eksiksiz bir alışveriş deneyimi sunuyor.

Neler Yapabilirsiniz?

• 🛍️ Ürün Katalog: Kategorilere göre düzenlenmiş ürünleri keşfedin
• 🛒 Sepet Yönetimi: Ürünlerinizi sepete ekleyin, miktarlarını düzenleyin
• 💳 Güvenli Ödeme: iyzico ile güvenli ödeme altyapısı
• 🌓 Karanlık Mod: Gözlerinizi yormayan koyu tema desteği
• 📱 Responsive Tasarım: Mobil, tablet ve masaüstü uyumlu arayüz

Kullanıcı Senaryoları

Senaryo 1: Alışveriş Yapma

Kullanıcı ana sayfada kategorilere göz atar, ilgisini çeken bir ürün bulur ve sepete ekler. Sepet sayfasında ürün miktarlarını düzenler, ardından güvenli iyzico ödeme sayfasına yönlendirilir. Ödeme sonrası sipariş durumu otomatik güncellenir.

Senaryo 2: Kategori Yönetimi (Admin)

Admin panelinden yeni kategoriler oluşturulabilir, mevcut kategoriler düzenlenebilir. Bir kategori silindiğinde, o kategorideki ürünler otomatik olarak "Kategorisiz" bölümüne taşınır - böylece hiçbir ürün kaybolmaz.

Senaryo 3: Ürün Arama ve Filtreleme

Kullanıcı arama çubuğundan ürün adı yazarak arama yapar, kategori filtresiyle sonuçları daraltır. Sayfalama sistemi sayesinde binlerce ürün arasında rahatça gezinebilir.

Mimari ve Tasarım Kararları

Monorepo Yaklaşımı

Proje tek bir repository içinde frontend ve backend'i barındırıyor. Bu yaklaşım sayesinde:

• Kodun tamamı tek yerden yönetilebiliyor
• API değişiklikleri anında her iki tarafta senkronize edilebiliyor
• Dokümantasyon ve versiyonlama tutarlı kalıyor

Katmanlı Mimari (Backend)

.NET tarafında Clean Architecture prensiplerine uygun katmanlı yapı:

1. API Layer (Presentation): HTTP isteklerini karşılayan, kullanıcı ile etkileşime giren katman
2. Business Layer: İş kurallarının yaşadığı yer - kategori silme kuralları, stok kontrolü gibi
3. Data Access Layer: Veritabanı işlemleri - Entity Framework Core ile MySQL'e bağlantı
4. Core Layer: Tüm katmanların kullandığı ortak modeller, arayüzler

Faydaları: Her katman kendi sorumluluğuna odaklanıyor, test edilebilir kod, değişikliklere açık yapı.

Component-Driven Design (Frontend)

Next.js tarafında Atomic Design prensiplerinden esinlenilmiş yapı:

• Küçük, yeniden kullanılabilir UI bileşenleri (button, input, card)
• Daha karmaşık bileşenler küçüklerden oluşuyor (ProductCard, CartItem)
• Sayfalar bu bileşenleri bir araya getiriyor

Veri Akışı ve State Management

• React Query: Server state yönetimi, otomatik cache, background refresh
• Context API: Global state (sepet, kullanıcı bilgileri)
• Optimistic Updates: Kullanıcı işlemi hemen görür, arka planda senkronize edilir

Güvenlik Stratejisi

• JWT token tabanlı kimlik doğrulama
• Role-based yetkilendirme (User/Admin)
• Ödeme bilgileri sistemde tutulmuyor - PCI-DSS uyumluluğu
• SQL injection önlemi: Parameterized queries (EF Core)
• XSS koruması: React'ın built-in sanitization'ı

Teknik Detaylar (Geliştiriciler İçin)

Teknoloji Stack

Frontend:

• Next.js 14 (React framework) - Server-side rendering ve routing
• TypeScript - Type safety
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Accessible component primitives
• React Query - Server state management
• Zod + React Hook Form - Form validation

Backend:

• .NET 8 Web API - RESTful API
• Entity Framework Core - ORM
• MySQL 8 - Relational database
• FluentValidation - Input validation
• Serilog - Structured logging
• Swagger/OpenAPI - API documentation

Ödeme:

• iyzico Sandbox - Turkish payment gateway
• Pay with iyzico (PWI) - Hosted payment page

API Design

Versioning: Tüm endpoint'ler /api/v1/ prefix'i ile başlar - gelecekteki değişiklikler için hazır yapı.

Response Standardization: Her API yanıtı aynı formatta:

{
  "isSuccessful": true,
  "statusCode": 200,
  "data": { /* actual data */ },
  "errors": [],
  "message": "Success",
  "traceId": "abc-123"
}

Pagination: Listeleme endpoint'leri sayfalama destekli:

{
  "items": [...],
  "currentPage": 1,
  "totalPages": 10,
  "hasNext": true,
  "hasPrevious": false
}

Özel İş Kuralları

Kategori Silme Mekanizması: Bir kategori silinmek istendiğinde iki senaryo var:

1. Kategoride ürün yoksa → Direkt silinir
2. Kategoride ürünler varsa →
   • force=false ise hata döner: "Bu kategoriye ait ürünler var"
   • force=true ise ürünler "Kategorisiz"e taşınır ve pasif yapılır, kategori silinir

Bu yaklaşım veri kaybını önler ve yöneticiye esneklik sağlar.

Ödeme Akışı:

1. Kullanıcı "Ödemeye Geç" butonuna basar
2. Backend iyzico'ya initialize isteği atar
3. iyzico PWI sayfası URL'si döner
4. Kullanıcı iyzico sayfasına yönlendirilir (kart bilgileri bizde tutulmaz)
5. Ödeme sonrası callback URL'e döner
6. Backend ödeme durumunu kontrol eder ve siparişi günceller

Performance Optimizations

• Image Optimization: Next.js Image component ile lazy loading, WebP format
• Code Splitting: Dynamic imports ile route-based code splitting
• Caching Strategy: React Query ile 5 dakika cache, background refetch
• Database Indexing: Sık sorgulanan alanlara index (CategoryId, Price, CreatedAt)
• API Response Time: Ortalama 200ms altında (single query)

Testing & Quality

• Backend: xUnit test framework ile unit ve integration testler
• API Contract: OpenAPI/Swagger dokümantasyonu - her endpoint detaylı açıklanmış
• Validation: İki katmanlı: Frontend (kullanıcı deneyimi) + Backend (güvenlik)
• Error Handling: Global exception handler, structured logging (Serilog)

Accessibility & UX

• WCAG 2.1 AA standardına uygun renk kontrastı
• Keyboard Navigation: Tab ile tüm etkileşimli elementler erişilebilir
• Screen Reader: Semantic HTML ve ARIA labels
• Loading States: Skeleton screens ve spinner'lar
• Error Messages: Kullanıcı dostu, actionable hata mesajları
• Mobile Touch: Min. 44x44px dokunma alanları

Not: Bu proje eğitim ve portfolio amaçlıdır. Sandbox ortamda çalışmaktadır.