diff --git a/README.md b/README.md index 24ecca5..248f1b6 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,88 @@ -# Mood Tracker MVP +
+ Mood Tracker Logo -Mood Tracker, gunluk ruh hali ve enerji seviyesini kaydedip basit grafiklerle -gorsellestiren minimal bir veri gorsellestirme uygulamasidir. + # Mood Tracker MVP -## Ozellikler + Günlük ruh hali ve enerji seviyesini kaydedip grafiklerle görselleştiren minimal dashboard uygulaması. -- Gunluk tarih, ruh hali ve enerji seviyesi girisi -- Ayni tarih icin mevcut kaydi guncelleme -- Tarayici `localStorage` uzerinde veri saklama -- Mood score ve enerji icin line chart -- Mood kategorileri icin pie chart -- Basit kuralli insight mesajlari -- Mobil uyumlu tek sayfalik dashboard +

+ Next.js + React + TypeScript + Tailwind CSS + Recharts + Framer Motion +

+
-## Teknolojiler +## Proje Özeti -- Next.js -- TypeScript -- Tailwind CSS -- Recharts -- Framer Motion +Mood Tracker MVP, kullanıcının günlük ruh halini ve enerji seviyesini takip etmesi için hazırlanmış tek sayfalık bir veri görselleştirme uygulamasıdır. Uygulama backend kullanmaz; tüm kayıtlar tarayıcıdaki `localStorage` içinde tutulur. + +Bu proje veri görselleştirme dersi için basit ama anlamlı bir örnek sunar: + +- Zaman içindeki mood ve enerji değişimi line chart ile gösterilir. +- Mood kategorilerinin dağılımı pie chart ile gösterilir. +- Son kayıtlar üzerinden basit insight cümleleri üretilir. + +## Ekran Görüntüleri + +
+ Mood Tracker dashboard ekran görüntüsü 1 +
+
+ Mood Tracker dashboard ekran görüntüsü 2 +
+ +## Özellikler + +- Günlük tarih seçimi +- Mood seçimi: Mutlu, Nötr, Üzgün, Sinirli +- Enerji seviyesi seçimi: 1-5 +- Aynı tarih için tekrar kayıt girildiğinde mevcut kaydı güncelleme +- Tarayıcıda kalıcı `localStorage` veri saklama +- Mood score ve enerji için line chart +- Mood kategorileri için pie chart +- Kayıt yokken sade boş durum mesajları +- Basit kurallı insight alanı +- Mobil uyumlu dashboard tasarımı + +## Kullanılan Teknolojiler + +| Teknoloji | Versiyon | Amaç | +| --- | --- | --- | +| Next.js | 15.5.15 | React tabanlı uygulama çatısı | +| React | 19.2.5 | Kullanıcı arayüzü | +| TypeScript | 5.9.3 | Tip güvenliği | +| Tailwind CSS | 3.4.19 | Stil ve responsive tasarım | +| Recharts | 2.15.4 | Line chart ve pie chart | +| Framer Motion | 11.18.2 | Basit giriş animasyonları | ## Kurulum +Projeyi çalıştırmak için Node.js kurulu olmalıdır. + ```bash npm install ``` -## Gelistirme +## Geliştirme Ortamı ```bash npm run dev ``` -Uygulama varsayilan olarak `http://localhost:3000` adresinde calisir. +Uygulama varsayılan olarak şu adreste çalışır: + +```text +http://localhost:3000 +``` + +Windows PowerShell üzerinde `npm` komutu policy hatası verirse şu komut kullanılabilir: + +```bash +npm.cmd run dev +``` ## Production Build @@ -42,30 +91,17 @@ npm run build npm run start ``` -## MVP Kapsami +Windows PowerShell için: -Dahil: - -- Mood secimi -- Enerji seviyesi secimi -- LocalStorage kayit -- Line chart -- Pie chart -- Basit insight - -Dahil degil: - -- Kullanici girisi -- Cloud sync -- Bildirim sistemi -- Sosyal paylasim -- PDF rapor -- AI destekli yorumlama -- Dark mode -- Heatmap +```bash +npm.cmd run build +npm.cmd run start +``` ## Veri Modeli +Uygulamada her mood kaydı aşağıdaki yapıya sahiptir: + ```ts type MoodEntry = { id: string; @@ -75,3 +111,105 @@ type MoodEntry = { energy: 1 | 2 | 3 | 4 | 5; }; ``` + +Mood skor eşleşmesi: + +| Mood | Etiket | Skor | +| --- | --- | --- | +| `happy` | Mutlu | 4 | +| `neutral` | Nötr | 3 | +| `sad` | Üzgün | 2 | +| `angry` | Sinirli | 1 | + +## Uygulama Akışı + +1. Kullanıcı uygulamayı açar. +2. Tarih seçer. +3. Ruh halini seçer. +4. Enerji seviyesini 1-5 arasında belirler. +5. Kaydet butonuna basar. +6. Kayıt `localStorage` içine yazılır. +7. Dashboard grafik ve insight alanlarını otomatik günceller. + +## Grafikler + +### Line Chart + +Line chart zaman içindeki iki değeri birlikte gösterir: + +- Mood score +- Enerji seviyesi + +X ekseninde tarih, Y ekseninde 1-5 aralığındaki değerler bulunur. + +### Pie Chart + +Pie chart tüm kayıtlar içindeki mood kategorisi dağılımını gösterir. Her mood kategorisi farklı renkle temsil edilir. + +## Insight Kuralları + +Insight alanı dış servis veya AI kullanmaz. Basit kurallı analiz üretir: + +- Son 7 kaydın mood ortalaması `>= 3` ise pozitif mesaj gösterilir. +- Son 7 kaydın mood ortalaması `< 3` ise düşük mood mesajı gösterilir. +- Son 7 kaydın enerji ortalaması `< 3` ise düşük enerji mesajı gösterilir. +- En sık görülen mood kategorisi ayrıca belirtilir. + +## MVP Kapsamı + +Dahil olanlar: + +- Mood seçimi +- Enerji seviyesi seçimi +- LocalStorage kayıt +- Aynı tarihli kaydı güncelleme +- Line chart +- Pie chart +- Basit insight +- Responsive tek sayfa arayüz + +Dahil olmayanlar: + +- Kullanıcı girişi +- Supabase veya cloud sync +- Bildirim sistemi +- Sosyal paylaşım +- PDF rapor +- AI destekli yorumlama +- Dark mode +- Heatmap + +## Manuel Test Senaryoları + +- Yeni bir mood kaydı eklenebiliyor. +- Aynı tarihe ikinci kayıt girildiğinde eski kayıt güncelleniyor. +- Sayfa yenilendiğinde kayıtlar kaybolmuyor. +- Line chart kayıt sonrasında mood ve enerji çizgilerini gösteriyor. +- Pie chart mood dağılımını doğru gösteriyor. +- Kayıt yokken grafik alanlarında boş durum mesajları görünüyor. +- Insight alanı kayıt eklendikten sonra metin üretiyor. + +## Proje Yapısı + +```text +. +├── app/ +│ ├── globals.css +│ ├── layout.tsx +│ └── page.tsx +├── assets/ +│ ├── logo.png +│ ├── screen1.png +│ └── screen2.png +├── package.json +├── tailwind.config.ts +├── tsconfig.json +└── README.md +``` + +## Notlar + +- Uygulama backend gerektirmez. +- Veriler sadece kullanılan tarayıcıda saklanır. +- Farklı tarayıcı veya cihazda kayıtlar görünmez. +- Tarayıcı verileri temizlenirse mood kayıtları da silinir.