Skip to content

README.md

Latest commit

 

History

History
337 lines (247 loc) · 10.1 KB

README.md

File metadata and controls

337 lines (247 loc) · 10.1 KB

💰 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.

React TypeScript Tailwind CSS Supabase

🎯 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

📄 Lisans

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

🙏 Teşekkürler

🔗 İlgili Projeler

⭐ 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