Lumina Skin Storefront

Svelte + Vite + Tailwind ile sıfırdan inşa edilmiş skincare storefront demosu. Ürün listeleme, modal ürün detayı, sepet, checkout, sipariş takibi, profil ve istek listesi — tamamen tarayıcı tarafında, localStorage ile sürekli kalıcılık.

▸ Live demo · ▸ Portfolyo · ▸ Diğer demolar

Genel bakış

Lumina, tek dosyalı bir HTML tasarımının modern bileşen tabanlı Svelte 5 yapısına taşınmış halidir. Görsel kimlik korunurken durum yönetimi Svelte reaktivitesine yeniden yazıldı; sepet, kullanıcı oturumu ve istek listesi localStorage ile sürekli kalıcılık sağlar. Backend gerektirmez — gerçek bir e-ticarete bağlamak isteyen ekipler için Rust/Axum tabanlı bir API katmanı eklenebilir.

Özellikler

• Ürün vitrini — kategori filtreleri, ana sayfa öne çıkanlar
• Ürün modal — quick-view, beden/renk seçimi, sepete ekleme
• Sepet paneli — slide-out, miktar düzenleme, alt toplam
• Checkout akışı — adres + kart formu, sipariş özeti
• Sipariş takibi — durum aşamaları (hazırlanıyor → kargo → teslim)
• Hakkımızda — marka hikayesi sayfası
• Profil + giriş — modal authentication, oturum kalıcılığı
• İstek listesi — wishlist, ürün toggle ile heart icon

Tech stack

Ekran görüntüleri

Hızlı başlangıç

git clone https://github.com/Lavescar-dev/e-commerce.git
cd e-commerce/lumina-svelte

npm install
npm run dev          # → http://localhost:5173

Build:

npm run build        # → dist/
npm run preview      # built bundle önizleme

Yapı

e-commerce/
└── lumina-svelte/        # Vite + Svelte workspace (canonical)
    ├── src/
    ├── public/
    └── package.json

Backend ekleme

Mevcut sürüm tamamen browser-only çalışır. Gerçek bir e-ticarete bağlamak için:

• Auth — Argon2 + session token (örn. Rust/Axum, bkz. vekalet)
• Sepet/sipariş — server-side persistence (PostgreSQL + Prisma veya Rust/sqlx)
• Ödeme — iyzico, Stripe Türkiye, PayTR

localStorage katmanı src/stores/ içinde izole; aynı arayüzü implement eden bir HTTP istemcisi yazıp swap edilebilir.

Deploy

Cloudflare Pages için doğrudan repo bağlanır:

License

MIT © 2026 Lavescar

Ürün görselleri Unsplash'tan demo amaçlı yüklenir.

_{Built by Lavescar · Portfolyo · [email protected]}