Temp Shop

Temp-Shop, Next.js 15, TypeScript ve Tailwind CSS ile yazdığım bir e-ticaret vitrini. Ürünleri ızgara ya da liste görünümünde, sayfa sayfa geziyorsun. Kategori ve alt kategorilerden oluşan bir mega menü ve kampanyalar var; arama penceresi de günün favorilerini, en çok arananları ve otomatik tamamlama önerilerini gösteriyor. Şehir ve ilçeni bir modaldan ya da GPS ile seçebiliyorsun.

Alışveriş tarafında sepet, birden fazla ödeme yöntemi, kayıtlı kartlar ve adresler, sipariş geçmişi ile durum takibi ve favoriler var. Bunların yanında satıcı başvurusu, premium üyelik, iki adımlı doğrulama ve bildirim tercihleri için de ayrı sayfalar yaptım. Bütün sayfalar metadata, Open Graph ve structured data taşıyor; robots.ts ile sitemap.ts de Next.js içinde üretiliyor.

Bence bu vitrinin en ilginç yanı, arka ucun bir ayardan ibaret olması. Aynı arayüz mock veriyle, bir .NET Core API'siyle ya da bir Spring Boot API'siyle çalışabiliyor. Hangi arka ucun kullanılacağını bir ortam değişkeni belirliyor; uygulama çalışırken de Ayarlar sayfasındaki seçiciden, yeniden derlemeye gerek kalmadan değiştirebiliyorsun.

Seçiciden servis katmanına

Arka uç tipi ve iki API'nin adresleri src/store/backend-store.ts içinde, kalıcı bir Zustand store'unda duruyor. Ayarlar sayfasındaki backend-switch.tsx bu store'u güncelliyor, getCurrentApiUrl() da o an aktif olan arka ucun taban adresini döndürüyor. Arka uç değiştiğinde kalıcı oturum, sepet, favori ve kullanıcı ayarları depoları temizleniyor. Böylece bir arka uçta açılan oturum ya da doldurulan sepet öbürüne taşınmıyor.

Servis katmanı (src/services/) her istekte bu store'a bakıyor. Mock moddaysa veriyi mock-data-service.ts'ten döndürüyor, değilse Axios ile aktif arka uca gidiyor. product-service.ts hata durumunda da mock veriye düşüyor; ürün listesi isteği başarısız olursa ekrana mock liste geliyor. Mock veride 200'den fazla ürün, kategori ve yorum var, yani vitrini hiçbir arka uç çalıştırmadan da gezebilirsin.

İki arka uç da tekil controller rotaları (/api/product, /api/order gibi) kullanıyor. Bu yüzden src/config/api.ts içinde tek bir endpoint kümesi tanımlamak yetti: ürün, kategori, alt kategori, yorum, kampanya, sipariş, adres, ödeme yöntemi, favori ve kimlik doğrulama. .NET yönlendirmesi büyük / küçük harfe duyarsız olduğu için aynı küçük harfli küme iki tarafa da uyuyor. Durum yönetiminde Zustand'ı, formlarda React Hook Form ile Zod'u, arayüzde de Radix UI ve shadcn/ui'yi kullandım.

Aynı alan, iki dil

Arka uçları ayrı depolarda yazdım; vitrine HTTP üzerinden bağlanıyorlar.

backend-dotnet .NET 9 ve ASP.NET Core ile yazıldı. Veri katmanında Entity Framework Core ve PostgreSQL, kimlik doğrulamada JWT ve BCrypt, önbellekte Redis kullanıyor. Hız sınırını AspNetCoreRateLimit, loglamayı Serilog üstleniyor; her isteğe de benzersiz bir kimlik veriliyor. Health check'ler, Prometheus metrikleri, Grafana panelleri ve Swagger da hazır. Geliştirme profili SQLite ile açılıyor; başlangıçta EnsureCreated çalıştığı için migration gerekmiyor. Veritabanı boşsa temel kullanıcıları bir seeder yazıyor, EnsureStandardAccountsAsync ise her başlangıçta eksik sabit hesapları idempotent biçimde ekliyor. Admin rolünü AuthService, yapılandırmadaki e-posta listesine bakarak atıyor. Admin paneli destek taleplerini, yorumları ve kullanıcı bildirimlerini ayrı uçlardan okuyor.

backend-spring aynı alanın Spring Boot 3.3.4 ve Java 17 ile yazılmış karşılığı. Yetkilendirmeyi Spring Security ile hem rol tabanlı hem metot seviyesinde yapıyor; JWT için JJWT, IP tabanlı hız sınırı için Bucket4j kullanıyor. Üretimde PostgreSQL 15 ve Flyway migration'larıyla, geliştirmede H2 bellek içi veritabanıyla çalışıyor. Bağlantı havuzu HikariCP, önbellek Redis 7. Nesne eşlemeyi MapStruct, doğrulamayı Bean Validation yapıyor; hatalar tek bir yerde ele alınıyor, dokümantasyonu da SpringDoc OpenAPI üretiyor. dev, prod ve docker profilleri var; Docker Compose uygulamayı PostgreSQL, Redis, Prometheus ve Grafana ile birlikte ayağa kaldırıyor.