💰 FinansApp Web

Modern, yapay zeka destekli kişisel finans yönetimi uygulaması

Harcamalarınızı takip edin, harcama alışkanlıklarınızı analiz edin ve yapay zeka destekli içgörülerle bilinçli finansal kararlar verin.

---

🎯 Proje Hakkında

Bu proje, Fikret Tozak tarafından geliştirilen macOS uygulaması FinansApp'in web versiyonudur. Orijinal SwiftUI tabanlı macOS uygulaması, React + TypeScript + Supabase teknolojileri kullanılarak web platformuna taşınmıştır.

Orijinal Proje

• Repository: github.com/fikret/FinansApp
• Platform: macOS (SwiftUI)
• Yazar: Fikret Tozak
• Geliştirme: Claude Code ile geliştirilmiştir

Web Versiyonu Farkları

• ✅ Cross-platform: Tüm işletim sistemlerinde çalışır (Windows, macOS, Linux)
• ✅ Web tabanlı: Tarayıcıdan erişilebilir, kurulum gerektirmez
• ✅ Bulut depolama: Supabase ile verileriniz güvende
• ✅ Çoklu cihaz: Tüm cihazlarınızdan erişin
• ✅ Gerçek zamanlı senkronizasyon: Verileriniz otomatik olarak senkronize edilir

---

✨ Özellikler

📊 Akıllı Dashboard

• Gerçek zamanlı harcama görselleştirme ve interaktif grafikler
• Kategori bazlı harcama dağılımı
• Aylık ve yıllık karşılaştırmalar
• Trend analizi ve tahminler

💳 Kart Yönetimi

• Birden fazla kredi/banka kartı desteği
• Karta özel işlem takibi
• Ekstre yükleme ve otomatik ayrıştırma
• Harcama limitleri ve uyarılar

🤖 Yapay Zeka Destekli Özellikler

• Akıllı PDF Ayrıştırma: Banka ekstrelerini yükleyin, yapay zeka otomatik olarak işlemleri çıkarsın
• Harcama İçgörüleri: Harcama alışkanlıklarınıza göre kişiselleştirilmiş öneriler
• Akıllı Kategorizasyon: Makine öğrenimi ile otomatik işlem kategorizasyonu
• OpenAI GPT-4 ve Google Gemini desteği

💰 İşlem Yönetimi

• Kapsamlı işlem takibi
• Gelişmiş arama ve filtreleme
• Özel kategoriler ve etiketler
• Toplu düzenleme ve CSV dışa aktarma

📈 Analitik ve Raporlar

• Ay bazında karşılaştırma
• Kategoriye göre harcama analizi
• Bütçe takibi ve uyarılar
• Dışa aktarılabilir raporlar

🔒 Güvenlik ve Gizlilik

• E-posta/şifre ile güvenli kimlik doğrulama
• Veri izolasyonu için Row-level Security (RLS)
• Şifrelenmiş API anahtarı depolama
• Kullanıcıya özel veri koruması

📸 Ekran Görüntüleri

Yakında eklenecek! Uygulamanızın ekran görüntülerini buraya ekleyin.

[Dashboard] [İşlemler] [Analitik] [Mobil Görünüm]

---

🛠️ Teknoloji Yığını

Frontend

• React 19 with TypeScript
• Vite - Hızlı build aracı
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Güzel UI bileşenleri
• Recharts - Grafik kütüphanesi
• React Router v7 - Routing
• React Hook Form + Zod - Form validasyonu
• Lucide React - İkon kütüphanesi

Backend

• Supabase
  • PostgreSQL Veritabanı
  • Kimlik doğrulama
  • Depolama (PDF dosyaları)
  • Edge Functions (AI ayrıştırma)
  • Row Level Security (RLS)

Deployment

• Frontend: Netlify / Vercel
• Backend: Supabase (managed)

🚀 Kurulum

Gereksinimler

• Node.js 18+
• npm veya yarn
• Supabase hesabı

1. Repository'yi klonlayın

git clone https://github.com/Warhelmet/finansapp-web.git
cd finansapp-web

2. Bağımlılıkları yükleyin

npm install

3. Supabase'i kurun

1. Supabase üzerinde yeni bir proje oluşturun
2. Project Settings > API bölümüne gidin
3. Project URL ve anon key'inizi kopyalayın

4. Environment variables'ları yapılandırın

cp .env.example .env

.env dosyasını düzenleyin ve Supabase bilgilerinizi ekleyin:

VITE_SUPABASE_URL=supabase_project_url
VITE_SUPABASE_ANON_KEY=supabase_anon_key

5. Veritabanı şemasını kurun

supabase/schema.sql dosyasındaki SQL komutlarını Supabase SQL Editor'de çalıştırın:

1. Supabase Dashboard > SQL Editor'e gidin
2. supabase/schema.sql dosyasının içeriğini kopyalayın
3. SQL Editor'e yapıştırın
4. "Run" butonuna tıklayın

6. Geliştirme sunucusunu başlatın

npm run dev

Tarayıcınızda http://localhost:5173 adresini açın.

📁 Proje Yapısı

finansapp-web/
├── src/
│   ├── components/          # Yeniden kullanılabilir bileşenler
│   │   └── ui/             # shadcn/ui bileşenleri
│   ├── pages/              # Sayfa bileşenleri
│   ├── lib/                # Yardımcı araçlar
│   │   ├── supabase.ts    # Supabase client
│   │   └── utils.ts       # Yardımcı fonksiyonlar
│   ├── hooks/              # Custom React hooks
│   ├── contexts/           # React contexts
│   ├── types/              # TypeScript tip tanımlamaları
│   ├── App.tsx             # Ana uygulama bileşeni
│   ├── main.tsx            # Giriş noktası
│   └── index.css           # Global stiller
├── supabase/
│   ├── schema.sql          # Veritabanı şeması
│   └── functions/          # Edge functions
├── public/                 # Statik dosyalar
└── package.json

🗄️ Veritabanı Şeması

Tablolar

• profiles - API anahtarlarıyla kullanıcı profilleri
• cards - Kredi kartları
• statements - Kredi kartı ekstreleri
• transactions - Bireysel işlemler
• categories - İşlem kategorileri
• insights - Yapay zeka tarafından oluşturulan içgörüler

Row Level Security (RLS)

Tüm tablolarda RLS politikaları bulunur ve kullanıcılar yalnızca kendi verilerine erişebilir.

🔐 Kimlik Doğrulama

Uygulama, Supabase Auth ile e-posta/şifre kimlik doğrulaması kullanır:

• Kayıt ol
• Giriş yap
• Şifre sıfırlama
• E-posta doğrulama

🤖 Yapay Zeka Entegrasyonu

Uygulama, PDF ayrıştırma için iki yapay zeka sağlayıcısını destekler:

1. OpenAI GPT-4 - Yüksek doğruluk, daha iyi ayrıştırma
2. Google Gemini - Maliyet etkin alternatif

API anahtarları, kullanıcı profillerinde güvenli bir şekilde saklanır (Supabase'de şifrelenmiş).

🚢 Deployment

Netlify'a Deploy

1. Kodunuzu GitHub'a yükleyin
2. Repository'nizi Netlify'a bağlayın
3. Build ayarlarını yapılandırın:
   • Build komutu: npm run build
   • Publish dizini: dist
4. Netlify dashboard'da environment variables ekleyin
5. Deploy edin!

Supabase Yapılandırması

Supabase zaten barındırılmaktadır - environment variables'larınızın doğru olduğundan emin olun.

📝 Geliştirme Yol Haritası

Faz 1: Kurulum ✅

• Proje başlatma
• Tailwind CSS kurulumu
• Supabase client yapılandırması
• TypeScript tipleri
• Temel UI bileşenleri

Faz 2: Kimlik Doğrulama ✅

• Giriş/Kayıt sayfaları
• Korumalı rotalar
• Kullanıcı profili
• Onboarding akışı

Faz 3: Temel Özellikler ✅

• Kart yönetimi
• Ekstre yükleme
• İşlem listesi
• Grafikli dashboard

Faz 4: Gelişmiş Özellikler ✅

• Yapay zeka içgörüleri
• Ay karşılaştırma
• CSV dışa aktarma
• PDF önizleme

Faz 5: İyileştirmeler ✅

• Mobil optimizasyonu
• PWA desteği
• Performans optimizasyonu
• Test

Gelecek Geliştirmeler

• Çoklu para birimi desteği
• Bütçe planlama araçları
• Tekrarlayan işlem tespiti
• Banka API entegrasyonu
• Karanlık mod
• Bildirimler ve hatırlatıcılar
• Aile/takım hesapları
• Yatırım takibi

🤝 Katkıda Bulunma

Katkılarınızı bekliyoruz! Nasıl yardımcı olabilirsiniz:

1. Repository'yi fork edin
2. Feature branch oluşturun (git checkout -b feature/HarikaOzellik)
3. Değişikliklerinizi commit edin (git commit -m 'Harika özellik eklendi')
4. Branch'inizi push edin (git push origin feature/HarikaOzellik)
5. Pull Request açın

Lütfen şunlara dikkat edin:

• Mevcut kod stilini takip edin
• Net commit mesajları yazın
• Gerektiğinde dokümantasyonu güncelleyin
• Yeni özellikler için test ekleyin

🐛 Hata Bildirimi

Bir hata mı buldunuz? Lütfen şunları içeren bir issue açın:

• Sorunun net açıklaması
• Yeniden üretme adımları
• Beklenen ve gerçekleşen davranış
• Varsa ekran görüntüleri

💬 Destek

• 🐛 Hatalar: GitHub Issues
• 💡 Tartışmalar: GitHub Discussions

📄 Lisans

Bu proje MIT Lisansı ile lisanslanmıştır - detaylar için LICENSE dosyasına bakın.

🙏 Teşekkürler

• Fikret Tozak - Orijinal FinansApp macOS uygulaması için
• shadcn/ui - Güzel ve erişilebilir UI bileşenleri
• Supabase - Backend altyapısı ve kimlik doğrulama
• Recharts - Güçlü grafik kütüphanesi
• Lucide - Güzel ikon seti
• OpenAI & Google Gemini - Yapay zeka destekli özellikler

🔗 İlgili Projeler

• Orijinal macOS Uygulaması: github.com/fikret/FinansApp

⭐ Destek Olun

Bu projeyi faydalı bulduysanız, lütfen GitHub'da bir yıldız ⭐ verin!

---

Web versiyonu adaptasyonu: Warhelmet
Orijinal konsept: Fikret Tozak

❤️ ile geliştirilmiştir