SETUP_GUIDE.md

FinansApp Web - Setup Guide

✅ Tamamlanan Aşama 1: Proje Kurulumu

Kurulumlar

• ✅ React 18 + TypeScript + Vite
• ✅ Tailwind CSS v3
• ✅ shadcn/ui base components (Button, Card, Input, Label)
• ✅ Supabase client setup
• ✅ React Router v6
• ✅ Recharts (chart library)
• ✅ React Hook Form + Zod (form validation)
• ✅ date-fns (date utilities)
• ✅ Lucide React (icons)

Oluşturulan Dosyalar

Configuration Files

• tailwind.config.js - Tailwind CSS configuration
• postcss.config.js - PostCSS configuration
• tsconfig.json - TypeScript configuration (with path aliases)
• vite.config.ts - Vite configuration
• .env.example - Environment variables template
• .gitignore - Git ignore rules

Source Files

• src/types/index.ts - TypeScript type definitions (Card, Transaction, Statement, etc.)
• src/lib/supabase.ts - Supabase client and database types
• src/lib/utils.ts - Utility functions (formatCurrency, formatDate, etc.)
• src/components/ui/ - Base UI components (Button, Card, Input, Label)
• src/index.css - Global styles with Tailwind
• src/App.tsx - Main app component (status page)

Database

• supabase/schema.sql - Complete database schema with RLS policies

Documentation

• README.md - Comprehensive project documentation
• SETUP_GUIDE.md - This file

Folder Structure

finansapp-web/
├── src/
│   ├── components/
│   │   └── ui/              ✅ Base UI components
│   ├── pages/               📁 (Empty - Aşama 2)
│   ├── lib/
│   │   ├── supabase.ts     ✅ Supabase client
│   │   └── utils.ts        ✅ Utility functions
│   ├── hooks/               📁 (Empty - Custom hooks)
│   ├── contexts/            📁 (Empty - React contexts)
│   ├── types/
│   │   └── index.ts        ✅ TypeScript types
│   ├── App.tsx              ✅ Main app
│   ├── main.tsx             ✅ Entry point
│   └── index.css            ✅ Global styles
├── supabase/
│   ├── schema.sql           ✅ Database schema
│   └── functions/           📁 (Empty - Edge functions)
└── public/                  📁 Static assets

---

🚀 Şimdi Ne Yapmalısınız?

1. Supabase Projesi Oluşturun

1. supabase.com adresine gidin
2. "Start your project" tıklayın
3. Yeni proje oluşturun:
   • Organization seçin veya yeni oluşturun
   • Project Name: finansapp (veya istediğiniz isim)
   • Database Password: Güçlü bir şifre oluşturun (kaydedin!)
   • Region: Europe (Frankfurt) - Türkiye'ye en yakın
   • Pricing Plan: Free tier seçin

2. Database Schema'yı Kurun

1. Supabase Dashboard'da SQL Editor bölümüne gidin
2. "New query" tıklayın
3. supabase/schema.sql dosyasının içeriğini kopyalayın
4. SQL Editor'e yapıştırın
5. "Run" butonuna basın
6. Başarılı olduğunu doğrulamak için:
   • Sol menüden Table Editor'e gidin
   • profiles, cards, statements, transactions, categories, insights tablolarını görmeli

3. Storage Bucket Oluşturun

1. Supabase Dashboard'da Storage bölümüne gidin
2. "Create a new bucket" tıklayın
3. Bucket adı: statements
4. Public bucket: KAPALI (private tutun)
5. "Create bucket" tıklayın
6. Bucket'a tıklayın ve Policies sekmesine gidin
7. Şu 3 policy ekleyin:

Policy 1: Upload

-- Name: Users can upload own PDFs
-- Target: INSERT
-- Policy:
(bucket_id = 'statements' AND auth.uid()::text = (storage.foldername(name))[1])

Policy 2: View

-- Name: Users can view own PDFs
-- Target: SELECT
-- Policy:
(bucket_id = 'statements' AND auth.uid()::text = (storage.foldername(name))[1])

Policy 3: Delete

-- Name: Users can delete own PDFs
-- Target: DELETE
-- Policy:
(bucket_id = 'statements' AND auth.uid()::text = (storage.foldername(name))[1])

4. Authentication Ayarları

1. Supabase Dashboard'da Authentication > Providers gidin
2. Email provider'ın etkin olduğundan emin olun
3. Email Templates sekmesine gidin
4. İsterseniz email template'lerini Türkçeleştirebilirsiniz

5. API Keys'leri Alın

1. Supabase Dashboard'da Settings > API gidin
2. Şu bilgileri kopyalayın:
   • Project URL (örn: https://abcdefgh.supabase.co)
   • anon public key (başında eyJ... ile başlayan uzun key)

6. Environment Variables Oluşturun

1. Proje klasöründe .env dosyası oluşturun:

# Windows
copy .env.example .env

# macOS / Linux
cp .env.example .env

2. .env dosyasını açın ve değerleri girin:

VITE_SUPABASE_URL=https://abcdefgh.supabase.co
VITE_SUPABASE_ANON_KEY=eyJ...uzun_key_buraya

7. Projeyi Çalıştırın

Development server zaten çalışıyor: http://localhost:5174

Tarayıcınızda açın ve status sayfasını görmelisiniz! ✅

---

📋 Sıradaki Aşama: Authentication (Aşama 2)

Aşama 1 tamamlandı! ✅ Şimdi Aşama 2'ye geçebiliriz:

Aşama 2: Authentication ve Onboarding (2 gün)

Geliştirilecekler:

• Login sayfası (email/password)
• Register sayfası
• Forgot password
• Email verification handling
• Protected routes (AuthContext)
• Onboarding flow (3 adım: karşılama, API key setup, ilk kart)
• User profile page

Kullanılacak Componentler:

• Login/Register forms (React Hook Form + Zod)
• Onboarding stepper
• Settings page (profile, API keys)

---

🎯 Tüm Aşamalar Özeti

• ✅ Aşama 1: Proje Kurulumu (TAMAMLANDI - 1 gün)
• 🔄 Aşama 2: Authentication ve Onboarding (Sırada - 2 gün)
• ⏳ Aşama 3: Core Layout ve Navigation (1-2 gün)
• ⏳ Aşama 4: Cards Management (1 gün)
• ⏳ Aşama 5: PDF Upload ve Statement Parsing (2-3 gün)
• ⏳ Aşama 6: Transactions Management (2 gün)
• ⏳ Aşama 7: Dashboard ve Charts (2-3 gün)
• ⏳ Aşama 8: Comparison View (1-2 gün)
• ⏳ Aşama 9: AI Insights (1-2 gün)
• ⏳ Aşama 10: Polish ve Deployment (2 gün)

Toplam Tahmini Süre: ~3-4 hafta

---

🆘 Sorun Giderme

Port 5173 veya 5174 kullanımda hatası

# Windows'ta portu kullanan process'i bul
netstat -ano | findstr :5173

# Process'i sonlandır (PID'yi yukarıdaki komuttan alın)
taskkill /PID <pid_numarası> /F

Tailwind CSS çalışmıyor

Projenizde Tailwind CSS v3.4.0 kurulu olmalı (v4 değil!). Kontrol:

npm list tailwindcss

TypeScript import hatası

Path alias'lar doğru kurulu. @/ ile import yapabilirsiniz:

import { Button } from '@/components/ui/button'
import { supabase } from '@/lib/supabase'

---

📞 İletişim

Herhangi bir sorunuz veya yardıma ihtiyacınız varsa, sorabilirsiniz!

Aşama 2'ye başlamak için hazır olduğunuzda bana haber verin! 🚀