Next.js ve modern web teknolojilerini öğrenmek ve uygulamak amacıyla geliştirdiğim aynı zamanda YZL321 dersi kapsamındaki proje ödevim yerine geçmesi amacıyla geliştirdiğim, hem müşteriler hem de yöneticiler için pratik özellikleri barındıran işlevsel bir e-ticaret projesi.
Bu proje, modern bir e-ticaret sitesinin nasıl çalıştığını baştan sona uygulamalı olarak öğrenmek için geliştirdiğim bir çalışmadır. Ön yüzde sade, anlaşılır ve temiz bir tasarım elde etmeye çalıştım.
Arka planda ise; ürünleri, sepeti, sipariş takibini ve stok durumlarını (örneğin bir sipariş iptal edildiğinde stoğun otomatik geri gelmesi gibi) yönetebilen çalışan bir sistem kurdum. Bunu yaparken Next.js, Prisma ve PostgreSQL gibi güncel teknolojileri kullandım.
Kodu incelerken başka öğrenci arkadaşların veya projeyi inceleyenlerin karmaşıklık yaşamaması için kodların kritik noktalarına tamamen Türkçe olan, neyi neden yaptığımı açıklayan yorum satırları ekledim.
- Kusursuz Arayüz: Modern, mobil uyumlu ve yüksek dönüşüm oranına (conversion-rate) odaklanmış tasarım.
- Ürün Keşfi: Gelişmiş kategori, marka, fiyat ve puan tabanlı filtreleme ile anlık arama motoru.
- Dinamik Sepet: Gerçek zamanlı varyasyon (renk/beden) ve stok kontrolü yapan akıllı sepet sistemi.
- Güvenli Kimlik Doğrulama: Google OAuth veya e-posta/şifre ile güvenli giriş. Kayıt esnasında reCAPTCHA koruması.
- Sipariş Takibi: "Hazırlanıyor", "Kargolandı", "Teslim Edildi" gibi aşamaların anlık izlenebildiği müşteri paneli.
- İade Yönetimi: Teslim sonrası tek tıkla iade talebi oluşturma ve iade iptal süreçleri.
- Ürün Değerlendirmeleri: Yalnızca o ürünü satın alan müşterilerin yorum yapabildiği ve puan verebildiği güvenilir yorum sistemi.
- Kapsamlı İstatistikler: Toplam satış, aktif müşteri, sipariş sayıları ve bekleyen görevlerin anlık takibi.
- Sipariş & İade Yönetimi: Durumu değişen (İptal, İade vb.) siparişlerde stokların otomatik geri yüklenmesi ve müşteriye bilgilendirme maillerinin atılması.
- Detaylı Stok ve Varyasyon Kontrolü: Çoklu resim, beden, renk seçenekleriyle ürün ve stok girişleri.
- Pazarlama Araçları: Alt limitli, yüzdelik veya sabit tutarlı gelişmiş "İndirim Kuponu" motoru.
- Kullanıcı & Yorum Moderatörlüğü: Kötü amaçlı kullanıcıları banlama, uygunsuz değerlendirmeleri reddetme veya onaylama.
Proje, günümüzün en iyi pratikleri (Best Practices) kabul edilen modern teknolojiler üzerinde çalışmaktadır:
| Kategori | Teknoloji | Açıklama |
|---|---|---|
| Framework | Next.js 15 (App Router) | React tabanlı full-stack framework. Server Components ile yüksek performans. |
| Veritabanı | PostgreSQL | Güçlü ve ilişkisel veritabanı altyapısı (Supabase / Neon vb. ile uyumlu). |
| ORM / Veri Erişimi | Prisma | Tip-güvenli (Type-safe) veritabanı sorguları ve şema yönetimi. |
| Tasarım / Stil | Tailwind CSS | Utility-first yaklaşım, özelleştirilmiş tasarım token'ları ve responsive yapı. |
| E-Posta Servisi | Resend | Sipariş onay, kargo, iade ve şifre sıfırlama mailleri için entegre API. |
| Kimlik Doğrulama | Custom Auth | bcryptjs + jose tabanlı JWT sistemi & Google OAuth entegrasyonu. |
Kendinize ait bir kopyasını çalıştırmak oldukça basittir.
- Node.js (v18.x veya üzeri önerilir)
- PostgreSQL Veritabanı (Yerel makinenizde kurulu veya Supabase vb. bir Cloud servisi)
git clone https://github.com/aliakpoyraz/mini-e-ticaret.git
cd mini-e-ticaretnpm installKök dizinde .env isimli bir dosya oluşturun ve aşağıdaki değişkenleri kendi bilgilerinizle doldurun:
# Veritabanı Bağlantısı
DATABASE_URL="postgresql://kullanici:sifre@localhost:5432/eticaretdb"
# Güvenlik & Oturum
JWT_SECRET="cok_gizli_bir_anahtar_belirleyin"
# Bildirimler (Resend)
RESEND_API_KEY="re_..."
# Google OAuth (Opsiyonel)
GOOGLE_CLIENT_ID="izin.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="gizli_anahtar"
# Uygulama URL'i
NEXT_PUBLIC_APP_URL="http://localhost:3000"Veritabanı şemasını oluşturmak ve Prisma Client'ı oluşturmak için aşağıdaki komutları sırasıyla çalıştırın:
npx prisma generate
npx prisma db pushnpm run devUygulamanız başarıyla başlatıldığında tarayıcınızdan http://localhost:3000 adresine giderek siteyi görüntüleyebilirsiniz.
Admin Girişi (Varsayılan):
Hazırlanan ilk başlatma mekanizması ile giriş ekranından admin@store.com / admin123 bilgileriyle oturum açarak tüm yönetim paneline erişebilirsiniz.
- Kapıda Ödemeli siparişler
CREATED(Oluşturuldu), Kredi Kartlı siparişlerPAID(Ödendi) statüsü ile başlar. - Kargodan önce
CANCELLED(İptal) veya ürün geri geldiğindeRETURNED(İade Edildi) statüsüne geçildiğinde; o siparişteki tüm stoklar milisaniyeler içinde sisteme otomatik olarak geri işlenir. - Her statü değişiminde kullanıcıya özel, dinamik hesaplanmış e-posta bilgilendirmeleri gönderilir.
Bu proje geliştirilmeye açık ve portfolyo amaçlı sunulmuştur.
Sevgi ve tasarım odaklı geliştirildi ❤️