Update README.md to enhance project overview and add technology badges

2026-04-27 23:49:39 +03:00
parent 28b4e43528
commit 6e19d0dbaf
1 changed files with 177 additions and 39 deletions
@@ -1,39 +1,88 @@
-# Mood Tracker MVP
+<div align="center">
+  <img src="assets/logo.png" alt="Mood Tracker Logo" width="160" />

-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
+  <p>
+    <img alt="Next.js" src="https://img.shields.io/badge/Next.js-15.5.15-111827?style=for-the-badge&logo=nextdotjs" />
+    <img alt="React" src="https://img.shields.io/badge/React-19.2.5-149eca?style=for-the-badge&logo=react&logoColor=white" />
+    <img alt="TypeScript" src="https://img.shields.io/badge/TypeScript-5.9.3-3178c6?style=for-the-badge&logo=typescript&logoColor=white" />
+    <img alt="Tailwind CSS" src="https://img.shields.io/badge/Tailwind_CSS-3.4.19-38bdf8?style=for-the-badge&logo=tailwindcss&logoColor=white" />
+    <img alt="Recharts" src="https://img.shields.io/badge/Recharts-2.15.4-d8644a?style=for-the-badge" />
+    <img alt="Framer Motion" src="https://img.shields.io/badge/Framer_Motion-11.18.2-0055ff?style=for-the-badge&logo=framer&logoColor=white" />
+  </p>
+</div>

-## 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
+
+<div align="center">
+  <img src="assets/screen1.png" alt="Mood Tracker dashboard ekran görüntüsü 1" width="820" />
+  <br />
+  <br />
+  <img src="assets/screen2.png" alt="Mood Tracker dashboard ekran görüntüsü 2" width="820" />
+</div>
+
+## Ö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.