Animasyonlu Todo ve Not Uygulaması
Yazılım geliştirme yolculuğumun erken dönemlerinde inşa ettiğim bu proje, sadece standart bir CRUD (Oluştur, Oku, Güncelle, Sil) uygulaması olmanın ötesine geçerek; kullanıcı deneyimini (UX) ve mikro-etkileşimleri merkeze alan bir çalışmadır. React'in durum yönetimi (state management) gücünü, Tailwind CSS'in esnek stillendirme yetenekleriyle ve Anime.js'in akıcı animasyonlarıyla birleştirerek sıradan bir görev yöneticisini dinamik ve eğlenceli bir arayüze dönüştürdüm.
🚀 Öne Çıkan Özellikler
- Kategorize Edilmiş İçerik Yönetimi: Kullanıcılar kısa vadeli "Görevler" (Tasks) ve daha uzun metinli "Notlar" (Notes) olmak üzere iki farklı veri tipini bağımsız olarak yönetebilirler.
- Animasyonlu Zengin Editör (Rich Editor): Sisteme yeni bir kayıt eklenmek istendiğinde sayfayı değiştirmek veya kaba bir form göstermek yerine, Anime.js desteğiyle ekrana pürüzsüz bir şekilde (fade-in & slide-up) gelen zengin bir giriş kutucuğu tasarlanmıştır.
- Dinamik Görev Tamamlama (Strike-through): Kullanıcı bir görevi tamamladığında standart bir HTML onay kutusu (checkbox) yerine, dinamik bir Switch (Aç/Kapat) bileşeni devreye girer. Switch aktif edildiğinde Anime.js, metnin üzerini şık bir çizilme animasyonu ile eşzamanlı olarak çizer ve kullanıcıya tatmin edici bir görsel geri bildirim sunar.
🛠️ Mimari ve Teknolojiler
- React.js: Görevlerin, notların ve arayüz durumlarının (modal açık/kapalı, switch aktif/pasif) yönetimi için kullanıldı. Bileşen (component) bazlı yapı sayesinde animasyon tetikleyicileri modüler hale getirildi.
- Tailwind CSS: Hızlı, duyarlı (responsive) ve modern bir arayüz tasarımı için kullanıldı.
- Anime.js: Uygulamaya ruh katan mikro-etkileşimler için DOM elementlerinin CSS özelliklerini (transform, opacity, width) zamana bağlı fonksiyonlarla manipüle etmek amacıyla projeye entegre edildi.
💡 Projeden Çıkarımlarım
Bu proje, kodlama kariyerimin başlarında bana sadece veri tutmayı değil, aynı zamanda asenkron görsel geri bildirimlerin bir uygulamanın hissiyatını ne kadar değiştirebileceğini öğretti. Bugün inşa ettiğim büyük ölçekli SaaS ve B2B platformlarındaki kusursuz kullanıcı deneyimi (UX) kurgularımın temelleri, detaylara önem verdiğim bu ve benzeri erken dönem projelerimde atılmıştır.
