Vue.js 3 ile geliştirilmiş modern, kullanıcı dostu görev yönetimi uygulaması.
- ✅ Görev Yönetimi - Görev ekleme, düzenleme ve silme
- 🎨 Öncelik Seviyeleri - Düşük, Orta ve Yüksek öncelik desteği
- 📅 Tarih Takibi - Bitiş tarihi belirleme ve gecikme uyarıları
- 🔍 Akıllı Filtreleme - Tümü, Aktif ve Tamamlanan görevleri filtrele
- 📊 Detaylı İstatistikler - Gerçek zamanlı ilerleme takibi
- 💾 Yerel Veri Saklama - Local Storage ile kalıcı veri
- 🌙 Karanlık Mod - Göz dostu aydınlık/karanlık tema
- 📱 Responsive Tasarım - Mobil, tablet ve masaüstü uyumlu
- 🎭 Animasyonlar - Yumuşak geçişler ve kullanıcı deneyimi
- Node.js 16.x veya üzeri
- npm veya yarn
# 1. Projeyi klonla
git clone https://github.com/ardaolguninsider/vue-todo-app.git
# 2. Proje dizinine gir
cd vue-todo-app
# 3. Bağımlılıkları yükle
npm install
# 4. Geliştirme sunucusunu başlat
npm run dev# Production build oluştur
npm run build
# Build'i önizle
npm run preview- Vue.js 3 - Composition API ile modern JavaScript framework
- Pinia - Vue.js için resmi state management
- Vue Router - SPA routing
- Vite - Hızlı build tool
- CSS3 - Custom animations ve gradients
- Flexbox & Grid - Modern layout sistem
- Responsive Design - Mobile-first yaklaşım
- Local Storage API - Tarayıcı tabanlı veri saklama
vue-todo-app/
├── src/
│ ├── assets/ # Statik dosyalar (CSS, resimler)
│ ├── components/ # Yeniden kullanılabilir bileşenler
│ │ ├── TodoForm.vue # Görev ekleme formu
│ │ ├── TodoItem.vue # Tekil görev kartı
│ │ └── TodoList.vue # Görev listesi
│ ├── router/ # Vue Router yapılandırması
│ │ └── index.js
│ ├── stores/ # Pinia store'lar
│ │ └── todoStore.js # Todo state yönetimi
│ ├── views/ # Sayfa component'leri
│ │ └── HomeView.vue
│ ├── App.vue # Ana component
│ └── main.js # Uygulama giriş noktası
├── public/ # Public assets
├── index.html # HTML template
├── package.json # Proje bağımlılıkları
└── vite.config.js # Vite yapılandırması
- Her görev için başlık, açıklama, öncelik ve tarih
- Görevleri düzenleme ve silme
- Checkbox ile hızlı tamamlama
- Tümü: Tüm görevleri göster
- Aktif: Sadece tamamlanmamış görevler
- Tamamlanan: Tamamlanmış görevler
- Toplam görev sayısı
- Aktif görev sayısı
- Tamamlanan görev sayısı
- Tamamlanma yüzdesi ile görsel ilerleme çubuğu
- Toggle butonu ile kolay geçiş
- Tercih local storage'da saklanır
- Tüm component'lerde uyumlu tema
Bu proje aşağıdaki Vue.js kavramlarını içerir:
- ✅ Composition API -
setup(),ref(),computed() - ✅ Component Architecture - Props ve Events
- ✅ State Management - Pinia store kullanımı
- ✅ Reactivity - Reactive data ve computed properties
- ✅ Directives - v-if, v-for, v-model, v-bind
- ✅ Event Handling - @click, @submit, @change
- ✅ Lifecycle Hooks - onMounted
- ✅ Form Handling - Input validation
- ✅ Local Storage - Veri persistance
- ✅ CSS Scoped Styles - Component-level styling
- ✅ Transitions - Vue transition system
- Bu repo'yu fork edin
- Feature branch oluşturun (
git checkout -b feature/yeniOzellik) - Değişikliklerinizi commit edin (
git commit -m 'feat: Yeni özellik eklendi') - Branch'inizi push edin (
git push origin feature/yeniOzellik) - Pull Request oluşturun
Bu projede Conventional Commits standardı kullanılır:
feat:- Yeni özellikfix:- Bug düzeltmesidocs:- Dokümantasyon değişikliğistyle:- Kod formatı (logic değişikliği yok)refactor:- Code refactoringtest:- Test ekleme/düzeltmechore:- Build process veya yardımcı araçlar
Şu anda bilinen bir sorun bulunmamaktadır.
- Kategori sistemi ekleme
- Görev arama özelliği
- Drag & drop ile görev sıralaması
- Toast bildirimleri
- Görev tekrarlama seçeneği
- Görev paylaşma özelliği
- Backend entegrasyonu
Bu proje MIT Lisansı altında lisanslanmıştır.
Arda Olgun
- GitHub: @ardaolguninsider
Projeyi beğendiyseniz yıldız vermeyi unutmayın! ⭐
Not: Bu proje Vue.js öğrenmek amacıyla geliştirilmiştir.