🚀 Kullanılan Teknolojiler
- React.js – Bileşen tabanlı yapı
- Tailwind CSS – Utility-first (yardımcı sınıf odaklı) stil framework’ü
- Vite – Hızlı ve hafif geliştirme ve derleme aracı
- Skeleton UI – API verileri gelene kadar gösterilen geçici iskeletler
🌐 Canlı Demo
👉 Netlify: https://stellar-ganache-f796b4.netlify.app
👉 Sandbox: https://kzjckm-5173.csb.app/
🔑 Temel Özellikler
- Skip boyutu seçim arayüzü tamamen yeniden tasarlandı
- Mobil ve masaüstü için duyarlı (responsive) tasarım
- Üzerine gelindiğinde animasyonlu, tıklanınca seçilebilen kartlar
- Mevcut adımı gösteren adım bileşeni (Stepper)
- Skip verileri API üzerinden dinamik olarak çekiliyor
- Veri yüklenirken kullanıcı deneyimini artıran iskelet yükleme ekranları
🎯 Projenin Amacı
- Bu çalışma, “Choose Your Skip Size” sayfasını sıfırdan modern bir arayüzle yeniden tasarlama case’idir. Hedefim; sezgisel seçim akışı, mobil-öncelikli duyarlılık, erişilebilirlik, ve API’den dinamik veri alma (skeleton yükleme durumlarıyla) gibi iyi UX pratiklerini gösterirken, bileşen-tabanlı React mimarisiyle yeniden kullanılabilirlik ve bakım kolaylığı sağlamaktı. İş hedefi olarak, kullanıcıların doğru skip boyutunu daha hızlı ve hatasız seçmesini, böylece dönüşüm ve memnuniyetin artmasını amaçladım.
🧠 Yaklaşımım
✅Temiz ve modern bir kullanıcı deneyimi sunmaya odaklandım.
✅Bakımı kolay, modüler kod yapısı oluşturdum.
✅<SkipCard />, <Stepper /> ve <SkeletonCard /> gibi yeniden kullanılabilir bileşenler tasarladım.
✅Mobil uyumluluğu baştan itibaren gözeterek geliştirme yaptım.
✅Veri, kullanıcı arayüzü ve iş mantığını birbirinden net şekilde ayırdım.
