Ana içeriğe geç

Projelere dön

02 / 04

Voltora Elektronik

Elektronik bileşenler için React, TypeScript ve Tailwind CSS ile kurulmuş e-ticaret arayüzü. Ürün keşfi, filtreleme, favoriler, sepet ve hesap ekranlarını mock veriyle çalışan kapsamlı bir frontend sistemi olarak kapsıyor.

Voltora Elektronik tanıtım görseli: solda proje başlığı, kısa açıklama ve ürün kataloğu, tedarik, sipariş yönetimi ile teknik destek başlıklarını taşıyan dört simge; ortada Voltora logolu yonga bulunan devre kartı; sağda mağaza giriş ekranını gösteren tablet ve kategori listesini gösteren telefon.

Proje özeti

Durum
Tamamlandı
Rol
Frontend geliştirme, kullanıcı deneyimi, tasarım sistemi ve etkileşim tasarımı
Teknolojiler
React · TypeScript · Tailwind CSS · Vite

Genel Bakış

Teknik ürünleri erişilebilir bir alışveriş deneyimine dönüştürmek.

Bağlam
Elektronik bileşenler ve gömülü sistem ürünleri için tasarlanan, teknik ürün bilgisini, ürün keşfini ve alışveriş arayüzlerini tek bir tasarım sistemi altında birleştiren frontend e-ticaret deneyimi.
Hedef
Bir backend bağlanmadan önce ürün modelini, filtre sistemini ve alışveriş durumlarını uçtan uca çalışan bir arayüz olarak kurmak.
Norvane’in rolü
Frontend geliştirme, kullanıcı deneyimi, tasarım sistemi ve etkileşim tasarımı

İhtiyaç

Elektronik bileşenlerde kullanıcıların yalnız ürün görseline ve fiyata değil; kategori, teknik özellik, stok durumu ve uyumluluk gibi bilgilere de erişmesi gerekir.

Voltora’nın temel tasarım problemi, bu teknik yoğunluğu klasik bir katalog karmaşasına dönüştürmeden sunmak ve alışveriş arayüzünü maker, öğrenci ve gömülü sistem geliştiricileri için kolay taranabilir hâlde tutmaktı.

  1. Teknik bilgi yoğunluğuÜrün adı, açıklama, teknik özellik, stok, fiyat ve kategori bilgisini dengeli bir hiyerarşide sunmak.
  2. Geniş ürün çeşitliliğiGeliştirme kartları, sensörler, güç modülleri, robotik parçalar ve kablolar arasında hızlı keşif sağlamak.
  3. Farklı kullanıcı niyetleriBelirli bir parçayı arayan kullanıcı ile projesine nereden başlayacağını bilmeyen kullanıcıyı aynı sistemde desteklemek.
  4. Bütünlüklü alışveriş akışıKeşif, favori, sepet ve hesap ekranlarını tutarlı tek bir component diliyle bağlamak.

Çözüm

Voltora’nın görsel sistemi siyah navigasyon yüzeyleri, açık içerik alanları ve kontrollü mint vurgular üzerine kuruludur. Mint ana yüzey olarak değil; birincil aksiyon, odak, kenarlık ve aktif durum vurgusu olarak kullanılır.

Bu yaklaşım elektronik laboratuvar karakterini korurken arayüzün neon veya oyun temalı görünmesini engeller. Ürün kartları, filtreler, drawer’lar, modal yüzeyler ve input’lar ortak bir component dili üzerinden ilerler.

  • İki durumlu navigasyon

    Sidebar, kategori erişimini sürekli görünür tutarken içerik genişliğini korumak için daraltılmış ve genişletilmiş olarak çalışır. Ana sayfa görselinde genişletilmiş, ürün listesinde daraltılmış hâli görülüyor.

  • Soyut ürün görselleri

    Gerçek ürün fotoğrafı yerine kategoriye göre üretilen soyut kart görselleri kullanılıyor; bu, fotoğraf tedarik etmeden tutarlı bir teknik vitrin sağlıyor.

  • Durum odaklı bileşenler

    Stokta, düşük stok, stokta yok, indirim, çok satan ve yeni gibi ürün durumları kart sisteminin içine yerleşik olarak tasarlandı.

Yerleşim katmanı

  1. App / Router
  2. Sidebar
  3. Topbar ve arama
  4. İçerik alanı
  5. Footer

Ticaret katmanı

  1. Ürün kartı
  2. Ürün listesi ve filtreler
  3. Favoriler
  4. Sepet
  5. Sipariş özeti

Temel katman

  1. TypeScript tip modelleri
  2. Mock veri modülleri
  3. Hook’lar
  4. UI bileşenleri

Tasarım token’ları

  • Siyah#000000
  • Mint#CFFFE2
  • Yumuşak mint#A2D5C6
  • Koyu yüzey#111111
  • Açık zemin#F6F6F6

Özellikler

Filtre, arama ve görünüm seçeneklerini tek keşif sisteminde toplamak.

Ürün listeleme deneyimi, kullanıcıların elektronik bileşenleri arama, filtreleme ve sıralama yoluyla daraltmasını sağlar. Kategori, müsaitlik ve fiyat aralığı filtreleri aynı filtre modelinde ele alınır; grid ve liste görünümleri farklı bilgi yoğunluğu tercihlerine uyum sağlar.

Ekranın üstündeki uyarı bandı, kataloğun şu anda önizleme verisiyle çalıştığını ve canlı katalog için Firestore bağlantısının gerektiğini uygulamanın kendi arayüzünde belirtir.

  • Ürün araması
  • Kategori filtresi
  • Müsaitlik filtresi
  • Fiyat aralığı
  • Sıralama
  • Grid ve liste görünümü
Voltora ürün listeleme sayfası: daraltılmış ikon navigasyonu, önizleme verisi uyarı bandı, kategori, müsaitlik ve fiyat filtreleri ile puan, teknik etiket ve fiyat bilgisi taşıyan ürün kartları.
Arama, filtreleme, sıralama ve görünüm kontrollerini birleştiren ürün keşif ekranı.

Aramayı klavyeyle erişilebilen bir komut yüzeyine taşımak.

Arama alanı bir komut paleti olarak açılır: öne çıkan ürünler fiyatlarıyla listelenir, kategoriler kısayol olarak sunulur ve panelin altında yön tuşları, Enter ve Esc davranışları açıkça belirtilir.

Bu, teknik ürün adlarını zaten bilen bir kullanıcının menü gezmeden doğrudan ürüne ulaşmasını sağlar — mağaza deneyiminde alışılmadık, geliştirici araçlarında tanıdık bir kalıp.

  • ⌘K ile açılan arama
  • Öne çıkan ürün kısayolları
  • Kategori kısayolları
  • Klavyeyle gezinme ve Esc ile kapanma
Voltora arama komut paleti: fiyatlarıyla öne çıkan ürünler, kategori kısayolları ve panelin altında yön tuşu, Enter ile Esc kullanımını açıklayan satır.
Ürünlere ve kategorilere klavyeyle ulaşmayı sağlayan komut paleti.

Ürün seçimini favoriler ve okunabilir bir sipariş özetine bağlamak.

Favoriler ekranı, kullanıcının ilgilendiği ürünleri sepetten bağımsız olarak toplamasını sağlar. Sepet arayüzü ise seçilen ürünleri SKU’ları, miktar kontrolleri ve ara toplam, indirim, kargo ile vergiyi ayıran bir sipariş özetiyle bir araya getirir.

Sepetin üstündeki üç aşamalı gösterge akışın devamını (sepet, ödeme, onay) görünür kılar. Bu akışların tamamı mevcut sürümde frontend davranışıdır: gerçek sipariş oluşturulmaz, gerçek ödeme alınmaz.

  • Favori listesi ve sepete taşıma
  • SKU ve miktar kontrolleri
  • Ara toplam, indirim, kargo ve vergi ayrımı
  • Promosyon kodu alanı
  • Önerilen ürünler
  • Üç aşamalı akış göstergesi
Voltora favoriler sayfası: kaydedilmiş dört ürünün kategori, ad, fiyat ve sepete ekleme aksiyonlarıyla listelendiği kartlar ve altında mağaza alt bilgisi.
İlgilenilen ürünleri sepetten bağımsız toplayan favoriler ekranı.
Voltora sepet sayfası: sepet, ödeme ve onay aşamalarını gösteren üç adımlı gösterge, SKU ve miktar kontrollü ürün satırları ve ara toplam, indirim, kargo ile vergiyi ayıran sipariş özeti.
Ürün seçimini okunabilir bir sipariş özetine dönüştüren mock sepet arayüzü.

Hesap ekranlarını aynı tasarım sistemi içinde tamamlamak.

Giriş ve kayıt ekranları, koyu bir anlatı paneli ile açık bir form panelini yan yana koyan ortak bir düzen kullanır. Form tarafında zorunlu alan işaretleri, şifre görünürlüğü ve parola kuralları arayüz seviyesinde ele alınır.

Sosyal giriş düğmelerinin altındaki “Social login will be connected later.” satırı uygulamanın kendi ifadesidir: bu butonlar şu anda bağlı bir sağlayıcıya gitmez.

  • Giriş ve kayıt akışı
  • Şifre görünürlüğü ve kuralları
  • Şartların kabulü
  • Bağlanmayı bekleyen sosyal giriş
Voltora giriş ekranı: solda anlatı ve avantajları taşıyan koyu panel, sağda e-posta, şifre, beni hatırla alanları ile Google ve GitHub düğmelerinin altında sosyal girişin sonradan bağlanacağını belirten not.
Anlatı paneli ile form panelini yan yana koyan giriş ekranı.
Voltora kayıt ekranı: ad soyad, e-posta, en az altı karakterlik şifre ve şifre tekrarı alanları, kullanım şartlarının kabulü ve hesap oluşturma düğmesi.
Giriş ekranıyla aynı düzeni paylaşan hesap oluşturma akışı.

Arayüz

Voltora ana sayfası: solda genişletilmiş kategori navigasyonu, ürün tanıtım alanı ve teknik özellikleriyle öne çıkan bir geliştirme kartı modülü.
Elektronik ürün keşfini ve mağaza kimliğini bir araya getiren ana yüzey.

Teknik Yapı

Ürün, sepet ve kullanıcı modelleri TypeScript tipleriyle tanımlanır; mevcut veriler mock modüllerden gelir ve hook’lar ilgili davranışları arayüz seviyesinde karşılar.

Arayüz
React · TypeScript · Tailwind CSS
Uygulama
React Router DOM · Framer Motion · Lucide React
Geliştirme
Vite
Planlanan bulut katmanı
Firebase Authentication · Cloud Firestore · Firebase Storage

Sonuç

Voltora; ana mağaza deneyiminden ürün keşfine, favorilerden sepete ve hesap ekranlarına kadar geniş bir e-ticaret arayüzünü ortak bir component ve tasarım sistemi altında birleştirir.

Proje, gerçek bir backend bağlanmadan önce ürün modelinin, filtre sisteminin, responsive düzenin ve farklı alışveriş durumlarının frontend seviyesinde nasıl kurulabileceğini gösteren bir arayüz mühendisliği çalışmasıdır.

Mevcut kapsam ve sonraki geliştirme alanları

  • Ürün verileri mock veri kaynaklarından gelir; uygulamanın kendi arayüzü bunu bir önizleme uyarısıyla belirtir.
  • Sepet, favori ve kullanıcı akışları frontend davranışlarıdır.
  • Firebase bağlantısı henüz aktif değildir; sonraki geliştirme aşaması olarak planlanmıştır.
  • Gerçek kullanıcı hesabı oluşturulmaz, gerçek sipariş veya ödeme işlemi yapılmaz.
  • Sosyal giriş sağlayıcıları henüz bağlanmamıştır.
  • Ürün kartlarındaki puan ve değerlendirme sayıları mock verilerdir; gerçek müşteri değerlendirmesi değildir.
  • Yönetim paneli mevcut kapsamda bulunmamaktadır.

İlgili içgörüler

Sonraki proje

Burhen Halı Yıkama CRM

React ve Flask ile geliştirilen full-stack CRM ve işletme otomasyonu. Müşteri kayıtlarını, m² bazlı fiyatlandırmayı, altı aşamalı sipariş takibini, tahsilat ve kalan bakiye yönetimini, personel yetkilerini ve PDF irsaliye üretimini tek operasyon merkezinde birleştiriyor.

Projeyi İncele

Benzer bir dijital ürün üzerinde mi çalışıyorsunuz?

İhtiyacı, mevcut durumu ve hedeflerinizi paylaşın. Uygun başlangıç noktasını birlikte değerlendirelim.

Projenizi Anlatın