Yazı
Xworen: Xworal Ürün ve Fiyat Karşılaştırma Platformunu Nasıl Geliştirdim
Next.js, TypeScript, SQLite ve doğrulanmış mağaza verileriyle geliştirdiğim Xworal’ın ürün fikrini, teknik mimarisini ve güven odaklı yaklaşımını anlatıyorum.
Xworen.online üzerinde yayınlanan Xworal’ı geliştirirken hedefim, klasik bir fiyat listesi oluşturmak değildi. Kullanıcının onlarca sekme açmadan ürünleri gerçekten karşılaştırabildiği, verinin kaynağını anlayabildiği ve fiyat değişimini takip edebildiği bir karar platformu kurmak istedim.
Fikir nasıl ortaya çıktı?
Yeni bir telefon veya teknoloji ürünü ararken farklı sitelerde tekrar eden bir sorun görüyordum: Bir yerde fiyat vardı ama özellikler eksikti; başka bir yerde ayrıntılı teknik bilgi vardı ama mağaza teklifi güncel değildi. Karşılaştırma sayfaları ise çoğu zaman gerçek farkları açıklamak yerine uzun tablolar gösteriyordu. Kullanıcı daha fazla bilgi görüyor, fakat karar vermesi kolaylaşmıyordu.
Bu gözlem, Xworal’ın temel ürün sorusunu oluşturdu: Bir karşılaştırma ekranı kullanıcıya yalnızca veriyi değil, verinin ne anlama geldiğini de gösterebilir mi?
Güven merkezli ürün yaklaşımı
Fiyat karşılaştırma ürünlerinde en kritik konu veri güveni. Bu nedenle fiyat ve teknik özelliklerde “boşluğu doldurmak” yerine, doğrulanmayan alanı eksik bırakmayı tercih eden bir sistem kurguladım. Mağaza teklifleri zaman damgası, kaynak ve doğrulama seviyesiyle birlikte ele alınıyor. Kullanıcı mağazaya yönlendirildiğinde farklı bir fiyat görürse bunu bildirebiliyor.
Ürün puanı ile fiyatı da birbirinden ayırdım. Bir cihazın pahalı olması teknik olarak daha güçlü olduğu anlamına gelebilir, ancak fiyat avantajı ayrı bir karar katmanı. Bu ayrım sayesinde sponsor etkisi veya kampanya fiyatı teknik kalite değerlendirmesini bozmuyor.
Karşılaştırma laboratuvarı
Karşılaştırma ekranında işlemci, grafik gücü, bellek, batarya, ekran ve kamera için ortak bir güç haritası bulunuyor. Kullanıcı oyun, kamera, günlük kullanım veya pil ömrü gibi senaryolara geçtiğinde ağırlıklar değişiyor. Eksik teknik alanlar puanlamaya dahil edilmiyor ve “doğrulanıyor” olarak gösteriliyor.
Bu yaklaşım, “hangi ürün daha iyi?” sorusunu tek bir genel puana indirgemek yerine “benim kullanımım için hangi ürün daha dengeli?” sorusuna yaklaştırıyor.
Teknik temel
Projeyi Next.js 16, React 19 ve TypeScript ile geliştirdim. Veriler yerel SQLite üzerinde tutuluyor ve Drizzle ORM ile yönetiliyor. Bu yapı; ürün, varyant, fiyat teklifi, fiyat geçmişi, kullanıcı hesabı, favori ve alarm kayıtlarını aynı modelde birleştirmeyi kolaylaştırdı.
Görseller Sharp ile belirli bir tuvale sığdırılıp WebP olarak işleniyor. Bu sayede farklı kaynaklardan gelen ürün görselleri katalogda daha tutarlı görünüyor ve sayfa yükü kontrol altında tutuluyor. Arayüz animasyonlarında Motion, daha karmaşık geçişlerde ise sınırlı biçimde GSAP kullanılıyor; hareket azaltma tercihi korunuyor.
Yapay zekâ ne yapıyor, ne yapmıyor?
Yapay zekâ katalog adaylarını sıralama, metin taslaklarını destekleme ve operasyon kuyruğunu önceliklendirme gibi alanlarda yardımcı oluyor. Ancak fiyat veya teknik özellik üretmiyor. Gerçek mağaza verisi bulunmadığında sistem bunu uydurmak yerine bekletiyor veya eksik olarak işaretliyor.
Kullanıcı hesapları ve kişisel takip
Kullanıcılar favori ürünlerini saklayabiliyor, hedef fiyat veya düşüş oranı belirleyerek alarm oluşturabiliyor ve karşılaştırmalarına farklı cihazlardan devam edebiliyor. Hesap deneyimini ürün kataloğundan ayrı bir alan gibi değil, karar sürecinin doğal devamı olarak tasarladım.
Yönetim paneli ve veri sağlığı
Katalog büyüdükçe yalnızca ürün eklemek yeterli olmuyor; verinin ne kadarının güncel, doğrulanmış veya eksik olduğunu da izlemek gerekiyor. Yönetim panelinde katalog durumu, fiyat teklifleri, otomasyon koşuları ve veri zenginliği için ayrı görünürlük alanları bulunuyor. Böylece sistemin yalnızca çalışıp çalışmadığı değil, ürettiği verinin kalitesi de takip ediliyor.
Yayın sürecinde öğrendiğim önemli ders
Modern web uygulamalarında HTML ile ona ait statik dosyaların aynı derlemeden gelmesi kritik. Xworal’ın üretim akışına, oluşturulan sayfalardaki CSS ve JavaScript referanslarının derleme klasöründe gerçekten bulunduğunu doğrulayan bir kontrol ekledim. Bu adım, eski HTML ile yeni statik dosyaların karıştığı yayın hatalarını engellemeye yardımcı oluyor.
Sıradaki adımlar
Platformun veri kapsamını genişletmek, daha fazla kategori için karşılaştırma şemaları oluşturmak ve kullanıcıya kararının nedenini daha iyi açıklayan modeller geliştirmek ana hedefler arasında. Bunu yaparken temel ilke değişmeyecek: daha fazla veri değil, daha anlaşılır ve doğrulanabilir veri.
Xworal benim için yalnızca teknik bir proje değil; ürün stratejisi, kullanıcı deneyimi, veri modelleme, otomasyon ve üretim operasyonunu aynı hedefte buluşturan kapsamlı bir öğrenme alanı oldu.
KULLANILAN TEKNOLOJİLER


