poyrazavsever/neta
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate Mood Tracker MVP to Cognis AI-powered life management dashboard with Supabase and modern UI

Browse Source
This commit is contained in:
Poyraz Avsever
2026-05-07 11:40:54 +03:00
parent a958d6cbb8
commit 7cf8321d27
1 changed files with 44 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+44 -185
View File
@@ -1,215 +1,74 @@
<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>
<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" />
<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-149eca?style=for-the-badge&logo=react&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-38bdf8?style=for-the-badge&logo=tailwindcss&logoColor=white" />
<img alt="Supabase" src="https://img.shields.io/badge/Supabase-DB-3ECF8E?style=for-the-badge&logo=supabase&logoColor=white" />
</p>
</div>
## 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.
- Mood kategorilerinin dağılımı pie chart ile gösterilir.
- Son kayıtlar üzerinden basit insight cümleleri üretilir.
## Temel Özellikler
## 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ı
- **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).
- **Akıllı Günlük (Journal):** Yapay zeka ile günlüklerinizden duygu durumu analizi ve içgörüler çıkarma.
- **Görev Yönetimi:** Günlüklerinizden otomatik olarak yapay zeka yardımıyla görevler oluşturabilme.
- **Kişisel AI Asistan:** Hedefleriniz ve duygusal durumunuz hakkında yapay zeka ile konuşabileceğiniz özel sohbet arayüzü.
- **Premium Dark Mode:** Göz yormayan, derin siyah-mor tonlarıyla harmanlanmış şık, modern ve "Glassmorphism" destekli arayüz 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ı |
| Teknoloji | Amaç |
| --- | --- |
| **Next.js 15 (App Router)** | Tam full-stack React framework'ü ve yönlendirme mimarisi |
| **Supabase** | Veritabanı (PostgreSQL), Auth, Row Level Security (RLS) ve Storage (Profil fotoğrafları) |
| **Tailwind CSS & Shadcn UI** | Gelişmiş, esnek stil yönetimi ve modern UI bileşenleri |
| **Yapay Zeka API'leri** | (Groq / Gemini) AI analizleri, metin özetleme ve kişisel asistan özellikleri |
| **Dexie.js** | Tarayıcı tarafı hızlı lokal veritabanı önbelleklemesi |
## 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
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
npm run dev
pnpm dev
```
Uygulama varsayılan olarak şu adreste çalışır:
Uygulama `http://localhost:3000` adresinde çalışmaya başlayacaktır.
```text
http://localhost:3000
```
## Veritabanı Yapısı (Supabase)
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
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.
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.