refactor: migrate Mood Tracker MVP to Cognis AI-powered life management dashboard with Supabase and modern UI
This commit is contained in:
Poyraz Avsever
@@ -1,215 +1,74 @@
|
|||||||
<div align="center">
|
<div align="center">
|
||||||
<img src="assets/logo.png" alt="Mood Tracker Logo" width="160" />
|
<img src="public/logo/logo.png" alt="Cognis Logo" width="160" />
|
||||||
|
|
||||||
# Mood Tracker MVP
|
# Cognis
|
||||||
|
|
||||||
Günlük ruh hali ve enerji seviyesini kaydedip grafiklerle görselleştiren minimal dashboard uygulaması.
|
AI Destekli Kişisel Yaşam ve Planlama Dashboard'u. Premium ve modern bir deneyim ile günlüklerinizi tutun, görevlerinizi planlayın ve yapay zeka ile sohbet edin.
|
||||||
|
|
||||||
<p>
|
<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="Next.js" src="https://img.shields.io/badge/Next.js-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="React" src="https://img.shields.io/badge/React-19-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="TypeScript" src="https://img.shields.io/badge/TypeScript-5-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="Tailwind CSS" src="https://img.shields.io/badge/Tailwind_CSS-3-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="Supabase" src="https://img.shields.io/badge/Supabase-DB-3ECF8E?style=for-the-badge&logo=supabase&logoColor=white" />
|
||||||
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Proje Özeti
|
## Proje Özeti
|
||||||
|
|
||||||
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.
|
Cognis, kullanıcıların yaşamlarını organize edebilecekleri ve yapay zeka entegrasyonuyla kişisel analizler elde edebilecekleri yeni nesil bir yaşam kontrol panelidir.
|
||||||
|
|
||||||
Bu proje veri görselleştirme dersi için basit ama anlamlı bir örnek sunar:
|
Önceki "Mood Tracker MVP" yapısı temel alınarak; tam kimlik doğrulama (Supabase), premium dark mode arayüzü ve akıllı görev yönetimi ile baştan aşağı modern bir şekilde yeniden geliştirilmiştir.
|
||||||
|
|
||||||
- Zaman içindeki mood ve enerji değişimi line chart ile gösterilir.
|
## Temel Özellikler
|
||||||
- Mood kategorilerinin dağılımı pie chart ile gösterilir.
|
|
||||||
- Son kayıtlar üzerinden basit insight cümleleri üretilir.
|
|
||||||
|
|
||||||
## Ekran Görüntüleri
|
- **Güvenli Kimlik Doğrulama:** Supabase entegrasyonu ile korunan Kayıt Ol / Giriş Yap sistemi.
|
||||||
|
- **Kişiselleştirilmiş Dashboard:** Ruh hali, enerji durumu ve yapay zeka etiketlerini görselleştiren interaktif grafikler (Recharts).
|
||||||
<div align="center">
|
- **Akıllı Günlük (Journal):** Yapay zeka ile günlüklerinizden duygu durumu analizi ve içgörüler çıkarma.
|
||||||
<img src="assets/screen1.png" alt="Mood Tracker dashboard ekran görüntüsü 1" width="820" />
|
- **Görev Yönetimi:** Günlüklerinizden otomatik olarak yapay zeka yardımıyla görevler oluşturabilme.
|
||||||
<br />
|
- **Kişisel AI Asistan:** Hedefleriniz ve duygusal durumunuz hakkında yapay zeka ile konuşabileceğiniz özel sohbet arayüzü.
|
||||||
<br />
|
- **Premium Dark Mode:** Göz yormayan, derin siyah-mor tonlarıyla harmanlanmış şık, modern ve "Glassmorphism" destekli arayüz tasarımı.
|
||||||
<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
|
## Kullanılan Teknolojiler
|
||||||
|
|
||||||
| Teknoloji | Versiyon | Amaç |
|
| Teknoloji | Amaç |
|
||||||
| --- | --- | --- |
|
| --- | --- |
|
||||||
| Next.js | 15.5.15 | React tabanlı uygulama çatısı |
|
| **Next.js 15 (App Router)** | Tam full-stack React framework'ü ve yönlendirme mimarisi |
|
||||||
| React | 19.2.5 | Kullanıcı arayüzü |
|
| **Supabase** | Veritabanı (PostgreSQL), Auth, Row Level Security (RLS) ve Storage (Profil fotoğrafları) |
|
||||||
| TypeScript | 5.9.3 | Tip güvenliği |
|
| **Tailwind CSS & Shadcn UI** | Gelişmiş, esnek stil yönetimi ve modern UI bileşenleri |
|
||||||
| Tailwind CSS | 3.4.19 | Stil ve responsive tasarım |
|
| **Yapay Zeka API'leri** | (Groq / Gemini) AI analizleri, metin özetleme ve kişisel asistan özellikleri |
|
||||||
| Recharts | 2.15.4 | Line chart ve pie chart |
|
| **Dexie.js** | Tarayıcı tarafı hızlı lokal veritabanı önbelleklemesi |
|
||||||
| Framer Motion | 11.18.2 | Basit giriş animasyonları |
|
|
||||||
|
|
||||||
## Kurulum
|
## Kurulum
|
||||||
|
|
||||||
Projeyi çalıştırmak için Node.js kurulu olmalıdır.
|
Projeyi bilgisayarınızda çalıştırmak için Node.js ve pnpm (veya npm) kurulu olmalıdır.
|
||||||
|
|
||||||
|
1. Bağımlılıkları yükleyin:
|
||||||
```bash
|
```bash
|
||||||
npm install
|
pnpm install
|
||||||
```
|
```
|
||||||
|
|
||||||
## Geliştirme Ortamı
|
2. `.env.local` dosyasını oluşturun ve Supabase ile AI anahtarlarınızı girin:
|
||||||
|
```env
|
||||||
|
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
|
||||||
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||||
|
NEXT_PUBLIC_GROQ_API_KEY=your-groq-key
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Geliştirme ortamını başlatın:
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
pnpm dev
|
||||||
```
|
```
|
||||||
|
|
||||||
Uygulama varsayılan olarak şu adreste çalışır:
|
Uygulama `http://localhost:3000` adresinde çalışmaya başlayacaktır.
|
||||||
|
|
||||||
```text
|
## Veritabanı Yapısı (Supabase)
|
||||||
http://localhost:3000
|
|
||||||
```
|
|
||||||
|
|
||||||
Windows PowerShell üzerinde `npm` komutu policy hatası verirse şu komut kullanılabilir:
|
Cognis, veri güvenliği için katı **Row Level Security (RLS)** kuralları kullanır. Kullanıcılar sadece kendi verilerine erişebilir.
|
||||||
|
Ana tablolar:
|
||||||
|
- `profiles`: Kullanıcı ayarları, isim, soyisim ve avatar URL bilgileri.
|
||||||
|
- `journals`: Kullanıcıya ait ruh hali ve enerji metrikli günlük kayıtları.
|
||||||
|
- `tasks`: Kullanıcının manuel olarak eklediği veya AI ile otomatik oluşturulan görevler.
|
||||||
|
- `chats`: AI ile yapılan geçmiş sohbet oturumları.
|
||||||
|
|
||||||
```bash
|
Veritabanını projenize entegre etmek için `supabase/schema.sql` dosyasındaki SQL kodlarını Supabase Dashboard > SQL Editor üzerinden çalıştırmanız yeterlidir.
|
||||||
npm.cmd run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
## Production Build
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run build
|
|
||||||
npm run start
|
|
||||||
```
|
|
||||||
|
|
||||||
Windows PowerShell için:
|
|
||||||
|
|
||||||
```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;
|
|
||||||
date: string;
|
|
||||||
mood: "happy" | "neutral" | "sad" | "angry";
|
|
||||||
mood_score: 4 | 3 | 2 | 1;
|
|
||||||
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