Bu uygulama ile yapılacak işlerinizi kolaylıkla takip edebilirsiniz.
ToDo'larınızı ✅ Done ve ❌ Not Yet sekmelerinden takip edebilirsiniz. Yaptığınız Görevi işaretleyip günlük rutinlerinize devam edebilirsiniz.
MongoDB Bağlantısı sayesinde tüm cihazlarınızdan Chrome yardımı ile Görevlerinizi takip edebilirsiniz. Görevlerin yanında bulunan 🖍 (Kalem) ikonuna tılayarak Görevi Düzenleyip Enter buttonu ile kayıt altına alabilirsiniz. 🗑 (Çöp Kutusu) ikonuna tıklayarak da görevi silebilirsiniz.
Sağ üstte bulunan Gece Modu sayesinde karanlık ortamlarda rahatsız etmeden kullanabilirsiniz.
⚡️ Demo
Görevlerin DB ye kayıt edilmesinde MongoDB kullanılmıştır. MongoDB nin kullanılma sebebi hızlı ve kullanım kolaylığıdır. MongoDB ile verilerimize tüm alanlardan anlık olarak erişip üzerinde düzenlemeler yapabilmekteyiz.
Servis Tarafında NextJS'in servisleri kullanılmıştır. Bundaki amaç tüm alanları tek bir yerden yönetip NextJS ekosistemini tam olarak kullanmaktır. Bu sayede verimli bir api ve DB bağlanma sistemi kurulabilmektedir. Express ile yapılabilecek çoğu şey NextJS in servis tarafıyla da yapılabilmektedir.
SSR tarafında NextJS kullanılmıştır. Fetch işlemleri client side da SWR kütüphanesi ile yapılmıştır. Bu sayede sayfa daha hızlı ekrana gelmektedir. Fetch işleminin server tarafında yapılmamasının sebebi SEO açısından önemi olmayan bir uygulama olduğu içindir. Ayrıca MongoDB nin ücretsiz versiyonunu kullandığım için sistem özellikleri yeterince güçlü değildir ve bazen DB sorguları geç gelebilmektedir.
Javascript Framework olarak React kullanılmıştır. Yazım dili olarak da Typescript kullanılmıştır.
Fetch işlemleri için SWR ile birlikte axios kullanılmıştır. Bunun sebebi SWR nin çok tutarlı bir hook oluşudur. Bu hook sayesinde yapılan Fetch işleminde gelen response cache'e alınıp oradan componentlere servis edilebilmektedir. Bu sayede tekrar tekrar sorgu yapılamamktadır. Ayrıca yapılan sorgu sonucunu global bir state gibi tüm componentlere dağıtabilmekteyiz.
CSS tarafında Styled-Components kullanılmıştır. Styled Component ile kompenetlermize kolayca css yazabilmekteyiz. CSS ler komponentin içinde durduğu için daha düzenli bir kod yapısı bulunmaktadır. ayrıca tema özelliği sayesinde gece modu veya kullanıcıya özel temalar oluşturup projelerimizde çeşitlilik sağlayabiliriz. Styled-Components sayesinde kullanılmayan CSS minimuma iner ve tarayıcı uyumsuzluğunu büyük ölçüde çözer. Kendisi build anında diğer tarayıcılara göre düzenlemeler yapar. SSR tarafındada rahatlıkla kullanılabilir.
Gece Modu kullanımında global state olarak local-storage kullanılmıştır. Bir değişiklik olduğunda Styled-Components temada buna uygun değişiklik yapmaktadır.
Animasyon olarak @formkit/auto-animate kullanılmıştır. Silinen görevlere veya eklenen görevlere animasyon eklenmiştir. Çok basit bir kullanımı vardır. Parent Elemana ref ekleyerek tüm componentlerde kullanabilmekteyiz.
