Update README.md to enhance project overview and add technology badges
This commit is contained in:
Poyraz Avsever
@@ -1,39 +1,88 @@
|
|||||||
|
<div align="center">
|
||||||
|
<img src="assets/logo.png" alt="Mood Tracker Logo" width="160" />
|
||||||
|
|
||||||
# Mood Tracker MVP
|
# Mood Tracker MVP
|
||||||
|
|
||||||
Mood Tracker, gunluk ruh hali ve enerji seviyesini kaydedip basit grafiklerle
|
Günlük ruh hali ve enerji seviyesini kaydedip grafiklerle görselleştiren minimal dashboard uygulaması.
|
||||||
gorsellestiren minimal bir veri gorsellestirme uygulamasidir.
|
|
||||||
|
|
||||||
## Ozellikler
|
<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>
|
||||||
|
|
||||||
- Gunluk tarih, ruh hali ve enerji seviyesi girisi
|
## Proje Özeti
|
||||||
- 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
|
|
||||||
|
|
||||||
## Teknolojiler
|
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.
|
||||||
|
|
||||||
- Next.js
|
Bu proje veri görselleştirme dersi için basit ama anlamlı bir örnek sunar:
|
||||||
- TypeScript
|
|
||||||
- Tailwind CSS
|
- Zaman içindeki mood ve enerji değişimi line chart ile gösterilir.
|
||||||
- Recharts
|
- Mood kategorilerinin dağılımı pie chart ile gösterilir.
|
||||||
- Framer Motion
|
- 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
|
## Kurulum
|
||||||
|
|
||||||
|
Projeyi çalıştırmak için Node.js kurulu olmalıdır.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
## Gelistirme
|
## Geliştirme Ortamı
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
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
|
## Production Build
|
||||||
|
|
||||||
@@ -42,30 +91,17 @@ npm run build
|
|||||||
npm run start
|
npm run start
|
||||||
```
|
```
|
||||||
|
|
||||||
## MVP Kapsami
|
Windows PowerShell için:
|
||||||
|
|
||||||
Dahil:
|
```bash
|
||||||
|
npm.cmd run build
|
||||||
- Mood secimi
|
npm.cmd run start
|
||||||
- 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
|
|
||||||
|
|
||||||
## Veri Modeli
|
## Veri Modeli
|
||||||
|
|
||||||
|
Uygulamada her mood kaydı aşağıdaki yapıya sahiptir:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
type MoodEntry = {
|
type MoodEntry = {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -75,3 +111,105 @@ type MoodEntry = {
|
|||||||
energy: 1 | 2 | 3 | 4 | 5;
|
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.
|
||||||
|
|||||||
Reference in New Issue
Block a user