Kullanıcı deneyimi ve arayüz tasarımı çalışmalarım ile frontend geliştirme sürecinde ürettiğim projeler.
Gerçek ürün ihtiyaçları doğrultusunda kullanıcı akışları, arayüz sistemleri ve farklı platform deneyimleri üzerine yürüttüğüm çalışmalar.
HasarLink
Farklı sigorta şirketlerine göre değişen hasar bildirim süreçlerini tek ve yönetilebilir bir akışta birleştiren mobil ve web ürün deneyimi.
Zayfix QRakter
Kaza öncesi hazırlıktan dijital kaza tespit tutanağına ve kaza sonrası takibe kadar araç kullanıcılarının temel ihtiyaçlarını tek mobil deneyimde birleştiren UI/UX çalışması.
Acunmedya Akademi eğitim sürecinde modern frontend teknolojilerini uygulayarak geliştirdiğim bireysel ve ekip projeleri.
Product Feedback App
Acunmedya Akademi'deki kamp sürecinde ekibimizle birlikte Product Feedback App projesini tamamladık. Bu projede GIT versiyon kontrol sistemini etkin bir şekilde kullanarak iş birliği yaptık. Kullanıcılar yorumlara yanıt verebilir, yeni yorum ekleyebilir, düzenleyebilir ve silebilir. Yorumları etiketlere göre sınıflandırarak filtreleme imkanı sağladık ve en çok/beğenilen veya yorum alan içerikleri sıralayabilecekleri bir menü oluşturduk. Roadmap sayfasında yorumların durumlarını görüntüleyebilmeleri için bir sistem geliştirdik. Hash router ile sayfa geçişlerini sağlarken React Hot Toast ile anlık bildirimler ekledik. Tüm verileri localStorage'e kaydederek veri kaybını önledik. Gelecekte kimlik doğrulama sistemi ekleyerek kullanıcı deneyimini daha da geliştirmeyi planlıyoruz.
Kanban Task Management Web App
Acunmedya Akademi'deki kamp sürecinde İrem Çoban ve Mehmet Akif Küçükyılmaz ile birlikte Kanban Task Management Web App geliştirdik. Kullanıcılar farklı board'lar ve sütunlar oluşturabilir, görev ekleyip düzenleyebilir, farklı sütunlara taşıyabilir ve silebilir. Tüm veriler localStorage’e kaydedilerek veri kaybı önlendi. Responsive tasarım ve karanlık mod desteği ile kullanım deneyimi iyileştirildi. React state yönetimi etkin kullanılarak dinamik bir yapı oluşturuldu ve React Hot Toast ile anlık bildirimler eklendi. Yakında, @dnd-kit kütüphanesi ile sürükle-bırak özelliği ekleyerek etkileşimi daha sezgisel hale getirmeyi planlıyoruz.
Product List with Card
Bu projede kullanıcılar ürünleri sepete ekleyebilir, miktarlarını değiştirebilir ve toplam tutarı anlık olarak görüntüleyebilirler. Sepete bir ürün eklediğinde miktar otomatik artar, toplam tutar ise gerçek zamanlı olarak hesaplanır. Mobil öncelikli tasarımıyla hem masaüstü hem de mobil cihazlarda uyumlu bir deneyim sunar.
Frontend Quiz App
Frontend Quiz App HTML, CSS, JavaScript ve Accessibility kategorilerinde 10 soruluk testler sunan interaktif bir quiz uygulamasıdır. Kullanıcılar bu dört kategori arasından birini seçerek soruları çözmeye başlarlar. Sorulara verilen doğru ve yanlış cevaplar sonuç ekranında kullanıcıya görsel olarak sunulurken yanlış cevap verildiğinde doğru cevap da hemen gösterilir. Uygulama her soru arasında geçiş yapmadan önce kullanıcıya geri bildirim verir böylece öğrenme süreci daha etkileşimli hale gelir. Tema yönetimi, kullanıcıların light ve dark mod arasında geçiş yapabilmesini sağlar ve tema tercihleri localStorage ile korunur.
Dictionary App
Dictionary App kullanıcıların kelimelerin anlamlarına, telaffuzlarına, eş anlamlarına ve örnek cümlelerine kolayca erişmesini sağlayan bir React uygulamasıdır. API ile dinamik kelime verisi çekilir ve kullanıcıların aradıkları kelimeleri hızlıca bulmaları sağlanır. Tema yönetimi ile ışık ve karanlık mod arasında geçiş yapılabilir, tercihler yerel depolama ile korunur. Üç farklı yazı tipi seçeneği sunularak kullanıcı deneyimi zenginleştirilmiştir. Uygulama React'ın modüler yapısı sayesinde daha hızlı ve sürdürülebilir hale getirilmiştir.
Markdown Editor
Markdown Editor kullanıcıların Markdown yazılarını anında önizlemeye dönüştüren bir React uygulamasıdır. Kullanıcılar yeni dosyalar oluşturabilir, var olan dosyaları güncelleyip silebilir ve yapılan değişiklikler localStorage ile korunur. Tema yönetimi ile kullanıcılar ışık ve karanlık mod arasında geçiş yapabilir. Uygulama responsive tasarımı sayesinde mobil öncelikli ve tüm cihazlarda uyumlu bir deneyim sunar. Dosya işlemleri dinamik ve etkileşimli bir şekilde tasarlanarak kullanıcı deneyimi iyileştirilmiştir.
Memory Game
Memory Game oyuncuların kartları eşleştirerek ilerlediği eğlenceli bir oyun uygulamasıdır. Oyunda kartlar başlangıçta karıştırılır ve her yeni oyunda farklı bir düzen sunulur. Seçilen kartlar eşleştiğinde kullanıcıya geri bildirim verilir, tüm kartlar eşleştiğinde oyun sona erer. Ayrıca oyun sırasında zamanlayıcı ve hamle sayacı bulunur. Mobil öncelikli tasarımı ile tüm cihazlarda uyumlu bir deneyim sunar.
Blog Page
Bu projede React ile hash router yapısı kullanarak uygulama yönlendirmelerini yönetiyor ve useContext ile tema değişimini sağlıyorum. API ile POST, PUT ve DELETE işlemleri yaparak veri yönetimi gerçekleştiriyorum. Kullanıcı adı ve şifre kontrolü ile güvenliği sağlıyorum, yalnızca giriş yapan kullanıcılar yazıları düzenleyebilir ve silebilir. Tasarımı kendim yaparak kullanıcı dostu ve modern bir arayüz oluşturuyorum. Proje, güvenli ve işlevsel bir deneyim sunarak API entegrasyonunu başarıyla sağladı.
Rest Countries with API
Bu proje dünya ülkeleriyle ilgili bilgileri dinamik bir şekilde görüntüleyen bir React uygulamasıdır. Kullanıcılar ülkeler arasında arama yapabilir, bölgelere göre filtreleme yaparak istedikleri ülkelere ulaşabilirler. Her ülke için temel ve ek bilgilere detaylı bir şekilde erişim sağlanır. Karanlık mod desteği ile kullanıcı deneyimi kişiselleştirilmiş ve tema tercihi yerel depolama ile korunmuştur. Hash tabanlı yönlendirme ve responsive tasarım ile tüm cihazlarda kullanıcı dostu bir deneyim sunulmuştur.
Post List
Bu projede kullanıcıların farklı postları görüntülemeleri ve her postun yorumlarını dinamik bir şekilde incelemelerini sağladım. Üç farklı API uç noktasından veri çekerek post listesi, post detayları ve post yorumları dinamik olarak sunuluyor. Verileri yönetmek için useState ve prop drilling kullandım. Uygulama hem masaüstü hem de mobil cihazlar için optimize edilmiş, modern CSS teknikleri ile responsive bir tasarıma sahip.
Landing Page
Bu projede Hilal Baran ve Atakan Arıkan ile birlikte ortak bir Git çalışması gerçekleştirdik. Git versiyon kontrol sistemlerini kullanarak projeyi düzenli ve verimli bir şekilde geliştirdik. HTML ve CSS ile Careers, Blog, Pricing, Help & Support, About ve Contact Us sekmelerinden oluşan bir landing page tasarladık. Grup çalışmasının önemini deneyimleyerek frontend becerilerimizi pekiştirdik.
XOX Game
Bu proje klasik XOX oyununu modern bir arayüz ve kullanıcı girişiyle yeniden tasarlayan bir React uygulamasıdır. Kullanıcılar oyun seçimi yaptıktan sonra giriş ekranı ile karşılanır ve X ya da O sembolünü seçerek oyuna başlar. Oyun sırasında kazanma, kaybetme ve beraberlik durumları algılanır, puanlar güncellenir. Her yeni tur başlatıldığında skorlar korunur. Karanlık mod desteği ve responsive tasarımıyla tüm cihazlarda akıcı bir oyun deneyimi sunar. Yerel depolama kullanılarak oyuncu tercihleri korunur, Context API ile global durum yönetimi sağlanır. Kullanıcı dostu tasarımı ve takım çalışmasıyla ortaya çıkan bu proje React ekosisteminin etkin kullanımını gösterir.
Entertainment Web App Next
Entertainment Web App kullanıcıların film ve dizileri keşfedip kendi hesapları üzerinden favorilerine ekleyebildiği bir platformdur. Proje Next.js ile yeniden inşa edilmiş, Supabase kullanılarak kullanıcı kimlik doğrulama ve kişiye özel veri yönetimi eklenmiştir. Her kullanıcı yalnızca kendi “bookmarked” içeriklerini görebilir. Tüm veriler Supabase veritabanından dinamik olarak çekilirken, global durum yönetimi için useContext, sayfa geçişleri için Next.js App Router yapısı kullanılmıştır. Mobil uyumlu tasarımıyla sade ve modern bir kullanıcı deneyimi sunar.