DEMO:TEST
ADMİN_PANEL:
K.adı: admincuzdan
şifre:123456789
ALTYAPI: İNSTAGRAM FACEBOOK TİKTOK BİLDİĞİNİZ vb. altyapı uygulamaları tamamen bu uygulamada kullanılmıştır
PROJE ŞAHSIM TARAFINDAN SORUNSUZ ŞEKİLDE KODLANMIŞTIR TASARLANMIŞTIR MMOTUTKUNLARI AİLESİNE METİN2 PİYASASINA GELSİN.
ADMİN PANEL:
Gerçek Hayattan Örnek:
Dark Mode Nedir?
3.1
Copy
Her kullanıcıya verilen: 10 haneli özel hesap numarası
Örnek: 1234 5678 90
Bu numara ile:
→ Başka Paytürk kullanıcısına para gönderme
→ Para alma
→ Bakiye sorgulama
yapılabilir.
plain
Copy
Senaryo: 1000 TL'lik alışveriş yaptınız, %3 cashback var
→ Anında 30 TL hesabınıza geri yatar
→ Bu para çekilebilir veya harcanabilir
Split Bill (Hesap Bölüşme):
plain
Copy
Senaryo: 4 arkadaş yemek yedi, toplam 800 TL
→ Uygulamadan herkese 200 TL'lik istek gönderilir
→ Onaylayanların parası otomatik çekilir
→ Borç takibi yapılmaz, anında ödenir
Yatırım:
3.2
Bu bölüm normal kullanıcıların değil, şirket çalışanlarının kullandığı alandır.
Copy
Gösterilen Metrikler:
├── Anlık aktif kullanıcı sayısı (örn: 15,420 kişi online)
├── Günlük işlem hacmi (örn: 2.5 Milyon TL)
├── Sistem sağlık durumu (Sunucular çalışıyor mu?)
└── Şüpheli işlem uyarıları (örn: 3 olay beklemede)
plain
Copy
Adım Adım Süreç:
1. Kullanıcı kimlik fotoğrafı yükler
2. Selfie çeker (gerçek kişi olduğunu kanıtlamak için)
3. Admin panelinde "Onay Bekleyenler" listesine düşer
4. Yetkili çalışan inceler:
├── Fotoğraf net mi?
├── Bilgiler tutarlı mı?
├── Sahtecilik şüphesi var mı?
└── ONAYLA veya REDDET
5. Onaylanan kullanıcı limitleri artar (günlük 50.000 TL'ye çıkar)
Copy
Örnek Kampanya Kurulumu:
├── Kampanya Adı: "Ramazan'a Özel %5 Cashback"
├── Geçerlilik: 1 Mart - 30 Mart 2026
├── Kategoriler: Market, Giyim, Restoran
├── Cashback Oranı: %5 (max 100 TL)
└── Hedef Kitle: Tüm kullanıcılar / Sadece premium üyeler
Copy
Şeffaflık için tutulan kayıt:
[13.04.2026 14:30] - Admin Ahmet Yılmaz, Kullanıcı #4521'in limitini 10.000 TL'den 50.000 TL'ye çıkardı.
[13.04.2026 15:15] - Admin Ayşe Kaya, "Bahar Kampanyası"nı yayına aldı.
[13.04.2026 16:00] - Sistem: Otomatik olarak 3 şüpheli hesabı askıya aldı.
plain
Copy
/src (Kaynak Kodlar - Source)
│
├── admincuzdan/ ← YÖNETİM PANELİ (Admin tarafı)
│ ├── Dashboard.tsx → Ana ekran, grafikler, istatistikler
│ ├── UserManagement.tsx → Kullanıcı onaylama, düzenleme
│ ├── TransactionLogs.tsx → Tüm finansal işlemlerin listesi
│ └── SystemSettings.tsx → Kampanyalar, komisyon ayarları
│
├── components/ ← ORTAK BİLEŞENLER (Hem user hem admin kullanır)
│ ├── Layout.tsx → Sayfa çerçevesi (header, footer, menü)
│ ├── Navigation.tsx → Menü sistemi
│ ├── Modal.tsx → Açılır pencere şablonu
│ └── Button.tsx → Standart buton tasarımı
│
├── contexts/ ← GLOBAL DURUM YÖNETİMİ
│ ├── AuthContext.tsx → Giriş yapmış mı? Kullanıcı bilgileri neler?
│ ├── ThemeContext.tsx → Dark mode mu, light mode mu?
│ └── GlobalState.tsx → Uygulama genelinde paylaşılan veriler
│
├── pages/ ← KULLANICI SAYFALARI
│ ├── Home.tsx → Ana sayfa, giriş ekranı
│ ├── Wallet.tsx → Cüzdan bakiyesi, hesap hareketleri
│ ├── Cards.tsx → Kartlarım, yeni kart başvurusu
│ ├── Payments.tsx → Fatura ödeme, oyun pinleri
│ ├── Investments.tsx → Altın, döviz, hisse senedi
│ └── Profile.tsx → Kişisel bilgiler, ayarlar
│
├── services/ ← DIŞ SERVİSLERLE İLETİŞİM
│ ├── firebase.ts → Veritabanı okuma/yazma işlemleri
│ ├── gemini.ts → AI asistan API çağrıları
│ └── pdfGenerator.ts → Dekont PDF'leri oluşturma
│
├── utils/ ← YARDIMCI FONKSİYONLAR
│ ├── logger.ts → Hata ve olay kayıt sistemi
│ ├── formatters.ts → Para formatlama (1000 TL → 1.000,00 TL)
│ └── validators.ts → E-posta, telefon doğrulama kuralları
│
├── firebase.ts ←
Firebase bağlantı ayarları (API anahtarları vb.)
└── index.css ←
Global stil dosyası (Tailwind v4 ayarları)
plain
Copy
Kural Örneği:
- Kullanıcı A, sadece KULLANICI A'nın verilerini okuyabilir
- Adminler, TÜM kullanıcı verilerini okuyabilir ama sadece "admin" rolüyle
- Şifreler asla düz metin olarak saklanmaz (hash'lenir)
plain
Copy
Giriş Akışı:
1. Şifre girilir
2. Telefona SMS kodu gönderilir (veya Authenticator uygulaması)
3. Kod doğru girilirse giriş başarılı
→ Sadece şifre çalınsa bile hesap güvende kalır
plain
Copy
Her finansal hareket için benzersiz kod:
örn: TXN-20260413-78452361-A7B2
Bu kod ile:
→ İşlem takibi yapılır
→ İtiraz durumunda kanıt oluşturulur
→ Müşteri hizmetleri hızlıca müdahale eder
Copy
Yol Haritası:
├── Faz 1 (Mevcut): Temel cüzdan, transfer, ödeme
├── Faz 2 (Yakın): Kripto para entegrasyonu, birikim hesapları
├── Faz 3 (Orta): Kredi ürünleri, taksitli alışveriş
└── Faz 4 (Uzun): Kendi banka lisansı, fiziksel şube ağı
Copy
/* Eski yöntem */
.class-name { color: blue; font-size: 16px; }
/* Tailwind yöntemi */
className="text-blue-500 text-base"
Copy
Koleksiyon (Collection) → Doküman (Document) → Alan (Field)
users (koleksiyon)
└── userId_12345 (doküman)
├── name: "Ahmet Yılmaz"
├── balance: 1500.50
├── accountNumber: "1234567890"
└── transactions (alt koleksiyon)
├── txn_001: { amount: 100, date: ..., type: "incoming" }
└── txn_002: { amount: -50, date: ..., type: "outgoing" }
Copy
// Örnek API kullanımı
const response = await gemini.generate({
prompt: "Kullanıcı 'Ayşe'ye 500 TL gönder' dedi",
context: userContacts // Ayşe'nin hesap numarası buradan bulunur
});
// Dönen: { action: "TRANSFER", recipient: "9876543210", amount: 500 }
Bu açıklama, Paytürk projesinin her seviyeden okuyucu için anlaşılır olmasını amaçlamaktadır. Teknik detaylar geliştiricilere, genel konseptler ise iş analistleri ve proje yöneticilerine yöneliktir.
MOBİL APK ÇEVİRME/////
Copy
# 1. Proje dizinine git
cd /path/to/payturk
# 2. Capacitor paketlerini kur
npm install @capacitor/core @capacitor/cli @capacitor/android
# 3. Capacitor yapılandırmasını oluştur
npx cap init Paytürk com.payturk.app --web-dir dist
# 4. Uygulamayı build et (Vite için)
npm run build
# 5. Android platformunu ekle
npx cap add android
# 6. Android Studio'da aç
npx cap open android
Copy
# 1. Cordova paketlerini kur
npm install -g cordova
# 2. Cordova projesi oluştur
cordova create payturk-mobile com.payturk.app Paytürk
# 3. Android platformu ekle
cd payturk-mobile
cordova platform add android
# 4. Web build dosyalarını kopyala
npm run build # Önce Vite build al
cp -r dist/* www/
# 5. APK build al
cordova build android --release
bash
Copy
# Expo projesi oluştur
npx create-expo-app payturk-native
# Mevcut komponentleri adapte et
# (Bu yöntem daha uzun sürer, çünkü web kodlarını native'e çevirmek gerekir)
APPLE ÇEVİRME YAYINLAMA:
Paytürk projesini iOS (Apple) için build almak istiyorsun. iOS build almak Android'den biraz daha karmaşık çünkü Apple'ın katı kuralları ve Xcode gereksinimi var.
Copy
# 1. Proje dizinine git (zaten oradaysan)
cd /path/to/payturk
# 2. iOS platformunu ekle (Android'i zaten eklemiştin)
npx cap add ios
# 3. Web build al (her değişiklikten sonra)
npm run build
# 4. iOS projesini senkronize et
npx cap sync ios
# 5. Xcode'da aç
npx cap open ios
plain
Copy
1. Sol taraftan "App" (Paytürk) seç
2. Signing & Capabilities sekmesine git
3. Team seç (Apple ID'ni ekle)
4. Bundle Identifier: com.payturk.app
5. Deployment Target: iOS 14.0 (minimum)
Copy
# Komut satırından direkt çalıştır
npx cap run ios
Veya Xcode'da:
plain
Copy
1. Xcode → Window → Devices and Simulators
2. iPhone'un görünmesini bekle (Güven uyarısına telefondan izin ver)
3. Üst bar'dan iPhone'unu seç
4. Cmd + R ile çalıştır
Copy
Xcode'da:
1. Product → Scheme → Edit Scheme
2. Build Configuration: Release yap
3. Product → Archive
4. Organizer penceresi açılır
5. Distribute App → App Store Connect → Upload
Copy
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.payturk.app',
appName: 'Paytürk',
webDir: 'dist',
ios: {
contentInset: 'always',
scrollEnabled: true,
allowsLinkPreview: false, // Güvenlik için
backgroundColor: '#000000', // Dark mode uyumlu
},
plugins: {
// Firebase için gerekli
PushNotifications: {
presentationOptions: ['badge', 'sound', 'alert'],
},
},
};
export default config;
Copy
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" ...>
<plist version="1.0">
<dict>
<!-- Temel ayarlar -->
<key>CFBundleName</key>
<string>Paytürk</string>
<key>CFBundleDisplayName</key>
<string>Paytürk</string>
<!-- Güvenlik izinleri (Kamera, Fotoğraf, vb.) -->
<key>NSCameraUsageDescription</key>
<string>QR kod ile ödeme yapmak için kamera erişimi gerekli</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Profil fotoğrafı yüklemek için galeri erişimi</string>
<key>NSFaceIDUsageDescription</key>
<string>Güvenli giriş için Face ID kullanılır</string>
<!-- Firebase ve network -->
<key>FirebaseAppDelegateProxyEnabled</key>
<false/>
<!-- Dark mode varsayılan -->
<key>UIUserInterfaceStyle</key>
<string>Dark</string>
<!-- Yatay/dikey orientasyon -->
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
</array>
</dict>
</plist>
bash
Copy
# Komut satırından upload (CI/CD için)
xcrun altool --upload-app -f Paytürk.ipa -t ios -u [email protected] -p app-specific-password
Copy
import UIKit
import Capacitor
import FirebaseCore // Firebase için ekle
@UIApplicationMain
class AppDelegate: CAPAppDelegate {
override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Firebase başlat
FirebaseApp.configure()
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
Table
Copy
# Expo projesinde
eas build --platform ios
# Apple ID ve şifre gir, gerisini Expo halleder
Copy
Çözüm: Xcode → Preferences → Accounts → Apple ID ekle
→ Download Manual Profiles
Copy
cd ios/App
pod install --repo-update
Copy
Xcode → Project → Build Settings → Framework Search Paths
→ $(inherited) ekle
Hangi aşamadasın? Mac'in var mı yoksa alternatif çözüm mü arıyorsun? Firebase entegrasyonunda takılırsan GoogleService-Info.plist kısmına dikkat et, en sık yapılan hata orası.
WEB SİTESİ İÇİN BUİLD ÇEVİRME
bash
Copy
# 1. Vercel CLI kur
npm install -g vercel
# 2. Proje dizinine git
cd /path/to/payturk
# 3. Build al ve deploy et
vercel
# İlk kurulumda sorular:
# ? Set up and deploy? [Y/n] → Y
# ? Which scope? [senin-kullanici-adin] → Enter
# ? Link to existing project? [y/N] → N (yeni proje)
# ? What's your project name? [payturk] → Enter
Otomatik Deploy: GitHub'a push yaptığında otomatik güncellenir.
Özel Domain:
bash
Copy
# 1. Önce build al
npm run build
# 2. dist klasörünü zip'le
# 3. netlify.com'a git → Drag and drop ile yükle
Veya CLI ile:
bash
Copy
npm install -g netlify-cli
netlify deploy --prod --dir=dist
Copy
# 1. vite.config.ts güncelle
cat > vite.config.ts << 'EOF'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: '/payturk/', // Repo adınla aynı olmalı
build: {
outDir: 'dist'
}
})
EOF
# 2. Build al
npm run build
# 3. gh-pages paketi kur
npm install --save-dev gh-pages
# 4. package.json'a ekle
npm pkg set scripts.deploy="gh-pages -d dist"
# 5. Deploy et
npm run deploy
Site adresin:
bash
Copy
# 1. Firebase CLI kur
npm install -g firebase-tools
# 2. Login ol
firebase login
# 3. Hosting'i başlat
firebase init hosting
# Sorular:
# ? What do you want to use as your public directory? dist
# ? Configure as a single-page app? Yes
# ? Set up automatic builds? No (isteğe bağlı)
# 4. Deploy
firebase deploy
# URL:
Özel Domain: Firebase Console → Hosting → Custom Domain → payturk.com.tr ekle
bash
Copy
# 1. Build al
npm run build
# 2. AWS CLI ile S3 bucket'a yükle
aws s3 sync dist/ s3://payturk-bucket --delete
# 3. CloudFront cache invalidation
aws cloudfront create-invalidation --distribution-id XXXXX --paths "/*"
Copy
npm run dev
#
Copy
npm run build
Copy
npm run preview
# Build'ı local'de test et, hata var mı gör
Copy
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
// Production build ayarları
build: {
outDir: 'dist',
sourcemap: false, // Güvenlik için sourcemap kapalı
minify: 'terser', // Kod sıkıştırma
rollupOptions: {
output: {
manualChunks: {
// Büyük kütüphaneleri ayır (performans)
'react-vendor': ['react', 'react-dom'],
'firebase-vendor': ['firebase/app', 'firebase/auth', 'firebase/firestore'],
'charts-vendor': ['recharts'],
}
}
}
},
// API proxy (geliştirme için)
server: {
proxy: {
'/api': {
target: '
changeOrigin: true
}
}
}
})
Copy
# .env.development (Geliştirme)
VITE_FIREBASE_API_KEY=dev-key-here
VITE_GEMINI_API_KEY=dev-gemini-key
VITE_API_URL=
# .env.production (Canlı)
VITE_FIREBASE_API_KEY=prod-key-here
VITE_GEMINI_API_KEY=prod-gemini-key
VITE_API_URL=
Kullanım: import.meta.env.VITE_FIREBASE_API_KEY
Copy
Type Name Value TTL
A @ 76.76.21.21 (Vercel) Auto
CNAME www cname.vercel-dns.com. Auto
TXT _vercel vc-domain-verify=... Auto
yaml
Copy
name: Deploy to Production
on:
push:
branches: [ main ]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
env:
VITE_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
VITE_GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}
# Vercel'e deploy
- name: Deploy to Vercel
uses: vercel/action-deploy@v1
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
# Alternatif: Firebase'e deploy
# - name: Deploy to Firebase
# uses: w9jds/firebase-action@master
# with:
# args: deploy --only hosting
# env:
# GCP_SA_KEY: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
GitHub Secrets Ekleme:
Copy
npm run build hatasız tamamlandı mı?
dist klasöründe index.html var mı?
Firebase API anahtarları production için doğru mu?
Gemini API limitleri yeterli mi?
Özel domain DNS ayarları yapıldı mı?
HTTPS (SSL sertifikası) aktif mi?
Mobil görünüm test edildi mi?
Dark mode düzgün çalışıyor mu?
Hangi platformu kullanmak istiyorsun? Domain'in var mı yoksa .web.app / .vercel.app ile mi başlayacaksın? Firebase kullandığın için Firebase Hosting mantıklı olabilir, tek yerden yönetirsin.
İNDİRME LİNKİ
virustotal
Linkleri görebilmek için
giriş yap veya kayıt ol.
(KAYIT OLURKEN RASTGELE BİLGİLER YAZIN RASTGELE RESİMLER YÜKLEYİN TEST GİRİŞ KAYIT TEST NFC İŞLEMİNDE KAYIT VE ONAYI YAPINADMİN_PANEL:
Linkleri görebilmek için
giriş yap veya kayıt ol.
K.adı: admincuzdan
şifre:123456789
ALTYAPI: İNSTAGRAM FACEBOOK TİKTOK BİLDİĞİNİZ vb. altyapı uygulamaları tamamen bu uygulamada kullanılmıştır
PROJE ŞAHSIM TARAFINDAN SORUNSUZ ŞEKİLDE KODLANMIŞTIR TASARLANMIŞTIR MMOTUTKUNLARI AİLESİNE METİN2 PİYASASINA GELSİN.
ADMİN PANEL:
Paytürk - Detaylı Proje Analizi ve Açıklaması
Bu doküman, Paytürk dijital finans platformunun her yönüyle detaylı ve anlaşılır bir şekilde açıklanmasıdır. Teknik bilgisi olmayan birinin bile projeyi tam olarak kavraması hedeflenmiştir.1. PROJE NEDİR? (Temel Kavram)
1.1 Paytürk'ün Tanımı
Paytürk, bir dijital cüzdan (e-wallet) uygulamasıdır. Düşünün ki, fiziksel cüzdanınızdaki nakit para ve banka kartlarınızın tamamını telefonunuza taşıyan bir sistem.Gerçek Hayattan Örnek:
- Papara, Paycell veya Wise gibi uygulamaları duymuşsunuzdur. Paytürk de bunlara benzer, Türkiye odaklı bir dijital bankacılık alternatifidir.
1.2 Slogan Analizi: "Finansın Dijital Hali"
Bu slogan şu mesajı verir:- Geleneksel bankacılığın karmaşık süreçlerini (şube beklemesi, evrak işlemleri) ortadan kaldırır
- Her şey telefon üzerinden, anında ve 7/24 yapılabilir
- Tamamen dijital bir deneyim sunar
2. TEKNİK ALTYAPI (Nasıl Çalışır?)
Projeyi anlamak için önce kullanılan teknolojileri basitçe açıklayalım:2.1 Frontend (Kullanıcının Gördüğü Yüz)
Table| Teknoloji | Açıklama | Gerçek Hayat Karşılığı |
|---|---|---|
| TypeScript | JavaScript'in "güvenli" hali | Yazılımın hata yapma olasılığını azaltan bir dil |
| React 19 | Facebook'un geliştirdiği arayüz kütüphanesi | Instagram, Facebook'ın altyapısı |
| Vite | Kodu derleme (hazırlama) aracı | Normalde 10 saniye süren işlemi 1 saniyede yapar |
| Tailwind CSS v4 | Tasarım/stil kütüphanesi | Önceden hazır tasarlanmış butonlar, renkler, yazı tipleri |
| Motion | Animasyon kütüphanesi | Sayfa geçişlerindeki yumuşak hareketler |
| Recharts | Grafik çizim aracı | Harcama raporlarını pasta grafik olarak gösterir |
| Lucide React | İkon kütüphanesi | Uygulamadaki bütün simgeler (ev simgesi, cüzdan simgesi vb.) |
- Beyaz arka plan yerine koyu renk (siyah/lacivert) teması kullanılır
- Gece kullanımında göz yormaz
- Modern ve "premium" bir his verir
2.2 Backend (Arka Planda Çalışan Sistem)
Table| Teknoloji | Açıklama | Görevi |
|---|---|---|
| Firebase Firestore | Google'ın veritabanı hizmeti | Kullanıcı bilgileri, bakiyeler, işlem kayıtları burada saklanır |
| Firebase Auth | Google'ın giriş sistemi | "Google ile Giriş Yap", e-posta/şifre doğrulaması |
| Google Gemini API | Yapay zeka servisi | Sesli komutları anlayıp işlem yapar |
| Express.js | Sunucu framework'ü | API'lerin (veri alışverişi noktalarının) yönetimi |
| html2canvas & jspdf | PDF oluşturma araçları | Dekontları PDF olarak indirmeyi sağlar |
3. ÖZELLİKLERİN DETAYLI AÇIKLAMASI
3.1 
Kullanıcı Özellikleri
Paytürk Cüzdan (Temel Hesap)
plainCopy
Her kullanıcıya verilen: 10 haneli özel hesap numarası
Örnek: 1234 5678 90
Bu numara ile:
→ Başka Paytürk kullanıcısına para gönderme
→ Para alma
→ Bakiye sorgulama
yapılabilir.
7/24 Para Transferi
- Paytürk'ten Paytürk'e: Saniyeler içinde, ücretsiz
- Banka hesaplarına: Havale/EFT/FAST ile (normal bankacılık süreçleri)
Para Yatırma/Çekme Seçenekleri
Table| Yöntem | Nasıl Çalışır? |
|---|---|
| Banka Havalesi | IBAN'a para gönderir gibi Paytürk hesabınıza gönderirsiniz |
| Kart ile Yükleme | Kredi kartı bilgilerini girerek anında bakiye yükleme |
| ATM'den QR Kod | ATM'ye gitmeden, telefondaki QR kodu ATM'ye okutarak işlem |
Paytürk Kart Dünyası
Fiziksel Kart:- Gerçek plastik kart (POS cihazlarında kullanılabilir)
- İnternet alışverişine açık/kapalı yapılabilir
- Temassız ödeme (PayPass) ayarlanabilir
- Sadece internet için kullanılan kart numarası
- Her alışverişte farklı numara oluşturulabilir (güvenlik için)
- Netflix, Spotify gibi düzenli ödemelerin otomatik takibi
- İstenirse tek tuşla iptal edilebilir
Ödeme Servisleri
Table| Hizmet | Detay |
|---|---|
| Fatura Ödemeleri | Elektrik, su, doğalgaz, internet, telefon faturaları |
| İstanbulkart | Toplu taşıma kartına online bakiye yükleme |
| Oyun Pinleri | Steam, PUBG, League of Legends vb. için oyun kodu satın alma |
| Hediye Kartları | Amazon, Trendyol vb. platformlara özel hediye çekleri |
| Bağış | Dernek ve vakıflara online bağış yapma |
| Sigorta | Kasko, DASK, sağlık sigortası prim ödemeleri |
Akıllı Finansal Araçlar
Cashback (Nakit İade):plain
Copy
Senaryo: 1000 TL'lik alışveriş yaptınız, %3 cashback var
→ Anında 30 TL hesabınıza geri yatar
→ Bu para çekilebilir veya harcanabilir
Split Bill (Hesap Bölüşme):
plain
Copy
Senaryo: 4 arkadaş yemek yedi, toplam 800 TL
→ Uygulamadan herkese 200 TL'lik istek gönderilir
→ Onaylayanların parası otomatik çekilir
→ Borç takibi yapılmaz, anında ödenir
Yatırım:
- Altın: Gram altın alım/satım
- Döviz: Dolar, Euro, Sterlin takibi ve işlemleri
- Hisse Senedi: Borsa İstanbul entegrasyonu ile hisse alım/satım
Paytürk AI Asistan (Yapay Zeka)
Sesli Komut Örnekleri:- "Ayşe'ye 500 TL gönder" → Sistem kişiyi bulur, onay ister, gönderir
- "Bu ay ne kadar harcadım?" → Harcama analizi raporu oluşturur
- "En çok hangi kategoriye para harcadım?" → Grafiklerle gösterir
3.2 
Admin Paneli (Yönetim Sistemi)
Bu bölüm normal kullanıcıların değil, şirket çalışanlarının kullandığı alandır.Dashboard (Genel Bakış Ekranı)
plainCopy
Gösterilen Metrikler:
├── Anlık aktif kullanıcı sayısı (örn: 15,420 kişi online)
├── Günlük işlem hacmi (örn: 2.5 Milyon TL)
├── Sistem sağlık durumu (Sunucular çalışıyor mu?)
└── Şüpheli işlem uyarıları (örn: 3 olay beklemede)
Kullanıcı Denetimi (KYC)
KYC Nedir? "Know Your Customer" - Müşterini Tanıplain
Copy
Adım Adım Süreç:
1. Kullanıcı kimlik fotoğrafı yükler
2. Selfie çeker (gerçek kişi olduğunu kanıtlamak için)
3. Admin panelinde "Onay Bekleyenler" listesine düşer
4. Yetkili çalışan inceler:
├── Fotoğraf net mi?
├── Bilgiler tutarlı mı?
├── Sahtecilik şüphesi var mı?
└── ONAYLA veya REDDET
5. Onaylanan kullanıcı limitleri artar (günlük 50.000 TL'ye çıkar)
Finansal Takip
- Tüm işlemlerin logu: Kim, ne zaman, kime, ne kadar para göndermiş
- Birden fazla başarısız şifre denemesi
- Olağan dışı büyük tutarlı işlemler
- Farklı ülkeden giriş denemeleri
- Otomatik blokaj: Riskli işlemler anında durdurulur
Kampanya Yönetimi
plainCopy
Örnek Kampanya Kurulumu:
├── Kampanya Adı: "Ramazan'a Özel %5 Cashback"
├── Geçerlilik: 1 Mart - 30 Mart 2026
├── Kategoriler: Market, Giyim, Restoran
├── Cashback Oranı: %5 (max 100 TL)
└── Hedef Kitle: Tüm kullanıcılar / Sadece premium üyeler
Sistem Ayarları
- Dinamik komisyon oranları: İşlem başına alınan ücreti anlık değiştirme
- Bakım modu: Sistem güncellemesi için "Site bakımda" sayfası açma
- Yardım Merkezi: SSS (Sıkça Sorulan Sorular) içeriklerini düzenleme
Audit Logs (Denetim Kayıtları)
plainCopy
Şeffaflık için tutulan kayıt:
[13.04.2026 14:30] - Admin Ahmet Yılmaz, Kullanıcı #4521'in limitini 10.000 TL'den 50.000 TL'ye çıkardı.
[13.04.2026 15:15] - Admin Ayşe Kaya, "Bahar Kampanyası"nı yayına aldı.
[13.04.2026 16:00] - Sistem: Otomatik olarak 3 şüpheli hesabı askıya aldı.
4. DOSYA YAPISI (Kod Nerede Duruyor?)
Projedeki klasörlerin mantıksal düzeni:plain
Copy
/src (Kaynak Kodlar - Source)
│
├── admincuzdan/ ← YÖNETİM PANELİ (Admin tarafı)
│ ├── Dashboard.tsx → Ana ekran, grafikler, istatistikler
│ ├── UserManagement.tsx → Kullanıcı onaylama, düzenleme
│ ├── TransactionLogs.tsx → Tüm finansal işlemlerin listesi
│ └── SystemSettings.tsx → Kampanyalar, komisyon ayarları
│
├── components/ ← ORTAK BİLEŞENLER (Hem user hem admin kullanır)
│ ├── Layout.tsx → Sayfa çerçevesi (header, footer, menü)
│ ├── Navigation.tsx → Menü sistemi
│ ├── Modal.tsx → Açılır pencere şablonu
│ └── Button.tsx → Standart buton tasarımı
│
├── contexts/ ← GLOBAL DURUM YÖNETİMİ
│ ├── AuthContext.tsx → Giriş yapmış mı? Kullanıcı bilgileri neler?
│ ├── ThemeContext.tsx → Dark mode mu, light mode mu?
│ └── GlobalState.tsx → Uygulama genelinde paylaşılan veriler
│
├── pages/ ← KULLANICI SAYFALARI
│ ├── Home.tsx → Ana sayfa, giriş ekranı
│ ├── Wallet.tsx → Cüzdan bakiyesi, hesap hareketleri
│ ├── Cards.tsx → Kartlarım, yeni kart başvurusu
│ ├── Payments.tsx → Fatura ödeme, oyun pinleri
│ ├── Investments.tsx → Altın, döviz, hisse senedi
│ └── Profile.tsx → Kişisel bilgiler, ayarlar
│
├── services/ ← DIŞ SERVİSLERLE İLETİŞİM
│ ├── firebase.ts → Veritabanı okuma/yazma işlemleri
│ ├── gemini.ts → AI asistan API çağrıları
│ └── pdfGenerator.ts → Dekont PDF'leri oluşturma
│
├── utils/ ← YARDIMCI FONKSİYONLAR
│ ├── logger.ts → Hata ve olay kayıt sistemi
│ ├── formatters.ts → Para formatlama (1000 TL → 1.000,00 TL)
│ └── validators.ts → E-posta, telefon doğrulama kuralları
│
├── firebase.ts ←
Firebase bağlantı ayarları (API anahtarları vb.)└── index.css ←
Global stil dosyası (Tailwind v4 ayarları)5. GÜVENLİK ALTYAPISI (Nasıl Korunuyor?)
5.1 Veri Güvenliği
Firestore Security Rules:plain
Copy
Kural Örneği:
- Kullanıcı A, sadece KULLANICI A'nın verilerini okuyabilir
- Adminler, TÜM kullanıcı verilerini okuyabilir ama sadece "admin" rolüyle
- Şifreler asla düz metin olarak saklanmaz (hash'lenir)
5.2 Kimlik Doğrulama
Çok Faktörlü Doğrulama (2FA):plain
Copy
Giriş Akışı:
1. Şifre girilir
2. Telefona SMS kodu gönderilir (veya Authenticator uygulaması)
3. Kod doğru girilirse giriş başarılı
→ Sadece şifre çalınsa bile hesap güvende kalır
5.3 İşlem Güvenliği
İşlem Kimliği (Transaction ID):plain
Copy
Her finansal hareket için benzersiz kod:
örn: TXN-20260413-78452361-A7B2
Bu kod ile:
→ İşlem takibi yapılır
→ İtiraz durumunda kanıt oluşturulur
→ Müşteri hizmetleri hızlıca müdahale eder
5.4 KVKK ve Gizlilik
Türkiye'de yasal zorunluluk:- Kullanıcı verileri Türkiye'deki sunucularda saklanır
- Kullanıcı istediğinde verileri silebilir (unutma hakkı)
- Veri ihlali durumunda 72 saat içinde kuruma bildirim yapılır
- Açık izin alınmadan veri pazarlanamaz
6. PROJE VİZYONU VE FARKLILIĞI
6.1 Neden Paytürk?
Table| Rakip | Paytürk Farkı |
|---|---|
| Papara | Daha modern arayüz, gelişmiş AI asistan |
| Paycell | Daha geniş yatırım seçenekleri (hisse senedi) |
| Wise | Yerel fatura ödeme entegrasyonu (İSKİ, İGDAŞ vb.) |
| Geleneksel Banka | Şubesiz, hızlı, düşük maliyetli |
6.2 Hedef Kitle
- Genç Profesyoneller (25-35 yaş): Teknolojiye yatkın, banka şubesi kullanmak istemeyen
- Freelancerlar: Uluslararası ödeme alan, döviz işlemi sık yapan
- Öğrenciler: Düşük maliyetli, kolay kullanımlı bankacılık arayan
- Küçük İşletmeler: POS cihazı maliyeti olmadan ödeme almak isteyen esnaf
6.3 Gelecek Vizyonu
plainCopy
Yol Haritası:
├── Faz 1 (Mevcut): Temel cüzdan, transfer, ödeme
├── Faz 2 (Yakın): Kripto para entegrasyonu, birikim hesapları
├── Faz 3 (Orta): Kredi ürünleri, taksitli alışveriş
└── Faz 4 (Uzun): Kendi banka lisansı, fiziksel şube ağı
7. ÖZET: PROJEYİ TEK CÜMLELERLE ANLATMAK
Table| Soru | Cevap |
|---|---|
| Bu proje ne? | Türkiye'de kullanılacak, telefondan çalışan dijital cüzdan |
| Kim kullanacak? | Banka şubesine gitmek istemeyen, hızlı işlem yapan herkes |
| Nasıl çalışacak? | React ile yazılmış uygulama, Firebase veritabanı kullanacak |
| Ne kadar güvenli? | Banka standartlarında, 2FA, şifreleme, KVKK uyumlu |
| Farkı ne? | AI asistan, 7/24 transfer, yerel ödeme entegrasyonları |
8. TEKNİK DETAYLAR (Geliştiriciler İçin)
8.1 React 19 ve Vite Kombinasyonu
- Hız: Geleneksel derlemeye göre 10x daha hızlı geliştirme
- Hot Reload: Kod değiştiğinde sayfa anında yenilenir (state kaybolmaz)
- TypeScript: Derleme aşamasında hata yakalama, runtime hatalarını minimize etme
8.2 Tailwind CSS v4 Yenilikleri
cssCopy
/* Eski yöntem */
.class-name { color: blue; font-size: 16px; }
/* Tailwind yöntemi */
className="text-blue-500 text-base"
- Utility-first: Her stil için özel class yazmaya gerek yok
- Dark mode: dark:bg-gray-900 gibi prefix'lerle otomatik tema desteği
8.3 Firebase Firestore Yapısı
plainCopy
Koleksiyon (Collection) → Doküman (Document) → Alan (Field)
users (koleksiyon)
└── userId_12345 (doküman)
├── name: "Ahmet Yılmaz"
├── balance: 1500.50
├── accountNumber: "1234567890"
└── transactions (alt koleksiyon)
├── txn_001: { amount: 100, date: ..., type: "incoming" }
└── txn_002: { amount: -50, date: ..., type: "outgoing" }
8.4 Google Gemini Entegrasyonu
JavaScriptCopy
// Örnek API kullanımı
const response = await gemini.generate({
prompt: "Kullanıcı 'Ayşe'ye 500 TL gönder' dedi",
context: userContacts // Ayşe'nin hesap numarası buradan bulunur
});
// Dönen: { action: "TRANSFER", recipient: "9876543210", amount: 500 }
Bu açıklama, Paytürk projesinin her seviyeden okuyucu için anlaşılır olmasını amaçlamaktadır. Teknik detaylar geliştiricilere, genel konseptler ise iş analistleri ve proje yöneticilerine yöneliktir.
MOBİL APK ÇEVİRME/////
Yöntem 1: Capacitor ile Dönüştürme (Önerilen)
Capacitor, React web uygulamalarını native mobil uygulamalara çeviren en modern araçtır.Adım Adım Kurulum
bashCopy
# 1. Proje dizinine git
cd /path/to/payturk
# 2. Capacitor paketlerini kur
npm install @capacitor/core @capacitor/cli @capacitor/android
# 3. Capacitor yapılandırmasını oluştur
npx cap init Paytürk com.payturk.app --web-dir dist
# 4. Uygulamayı build et (Vite için)
npm run build
# 5. Android platformunu ekle
npx cap add android
# 6. Android Studio'da aç
npx cap open android
APK Build Alma (Android Studio'dan)
- Android Studioaçıldıktan sonra:
- Build → Generate Signed Bundle / APK...
- APK seçeneğini seç
- Keystore oluştur (ilk kez yapıyorsan):
plain
Copy
Key store path: payturk.keystore
Password: güçlü bir şifre
Key alias: payturk
Validity: 25 yıl
- Release modunu seç
- Finish'e tıkla → APK oluşur (android/app/release/app-release.apk)
Yöntem 2: Cordova ile Dönüştürme (Klasik)
bashCopy
# 1. Cordova paketlerini kur
npm install -g cordova
# 2. Cordova projesi oluştur
cordova create payturk-mobile com.payturk.app Paytürk
# 3. Android platformu ekle
cd payturk-mobile
cordova platform add android
# 4. Web build dosyalarını kopyala
npm run build # Önce Vite build al
cp -r dist/* www/
# 5. APK build al
cordova build android --release
Yöntem 3: Expo ile (Eğer React Native'e geçiş düşünürsen)
Mevcut React kodunu tamamen React Native'e çevirmek istersen:bash
Copy
# Expo projesi oluştur
npx create-expo-app payturk-native
# Mevcut komponentleri adapte et
# (Bu yöntem daha uzun sürer, çünkü web kodlarını native'e çevirmek gerekir)
APPLE ÇEVİRME YAYINLAMA:
Paytürk projesini iOS (Apple) için build almak istiyorsun. iOS build almak Android'den biraz daha karmaşık çünkü Apple'ın katı kuralları ve Xcode gereksinimi var.
Gereksinimler (Zorunlu)
Table| Gereksinim | Açıklama |
|---|---|
| macOS | Windows/Linux'da iOS build alamazsın, fiziksel Mac veya Mac sanal makinesi gerekli |
| Xcode | App Store'dan ücretsiz indirilir (15GB+) |
| Apple Developer | App Store'a yüklemek için $99/yıl ücretli hesap |
| iOS Cihaz (opsiyonel) | Test için iPhone/iPad veya simülator yeterli |
Yöntem 1: Capacitor ile iOS Build (Önerilen)
Capacitor zaten Android kurulumunda yaptığın işlemlerin aynısını iOS için de yapar.Adım Adım Kurulum
bashCopy
# 1. Proje dizinine git (zaten oradaysan)
cd /path/to/payturk
# 2. iOS platformunu ekle (Android'i zaten eklemiştin)
npx cap add ios
# 3. Web build al (her değişiklikten sonra)
npm run build
# 4. iOS projesini senkronize et
npx cap sync ios
# 5. Xcode'da aç
npx cap open ios
Xcode'da Yapılacaklar
Xcode açıldığında:plain
Copy
1. Sol taraftan "App" (Paytürk) seç
2. Signing & Capabilities sekmesine git
3. Team seç (Apple ID'ni ekle)
4. Bundle Identifier: com.payturk.app
5. Deployment Target: iOS 14.0 (minimum)
Xcode Build Alma
Simülatörde Test (Ücretsiz)
bashCopy
# Komut satırından direkt çalıştır
npx cap run ios
Veya Xcode'da:
- Üstteki cihaz seçiciden iPhone 15 Pro (veya herhangi simülatör) seç
- Cmd + R tuşuna bas veya
(Play) butonuna tıkla
Gerçek Cihazda Test
iPhone'unu USB ile Mac'e bağla:plain
Copy
1. Xcode → Window → Devices and Simulators
2. iPhone'un görünmesini bekle (Güven uyarısına telefondan izin ver)
3. Üst bar'dan iPhone'unu seç
4. Cmd + R ile çalıştır
Archive (App Store için IPA)
plainCopy
Xcode'da:
1. Product → Scheme → Edit Scheme
2. Build Configuration: Release yap
3. Product → Archive
4. Organizer penceresi açılır
5. Distribute App → App Store Connect → Upload
Önemli iOS Yapılandırmaları
capacitor.config.ts Güncelleme
TypeScriptCopy
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.payturk.app',
appName: 'Paytürk',
webDir: 'dist',
ios: {
contentInset: 'always',
scrollEnabled: true,
allowsLinkPreview: false, // Güvenlik için
backgroundColor: '#000000', // Dark mode uyumlu
},
plugins: {
// Firebase için gerekli
PushNotifications: {
presentationOptions: ['badge', 'sound', 'alert'],
},
},
};
export default config;
ios/App/App/Info.plist Düzenlemeleri
xmlCopy
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" ...>
<plist version="1.0">
<dict>
<!-- Temel ayarlar -->
<key>CFBundleName</key>
<string>Paytürk</string>
<key>CFBundleDisplayName</key>
<string>Paytürk</string>
<!-- Güvenlik izinleri (Kamera, Fotoğraf, vb.) -->
<key>NSCameraUsageDescription</key>
<string>QR kod ile ödeme yapmak için kamera erişimi gerekli</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Profil fotoğrafı yüklemek için galeri erişimi</string>
<key>NSFaceIDUsageDescription</key>
<string>Güvenli giriş için Face ID kullanılır</string>
<!-- Firebase ve network -->
<key>FirebaseAppDelegateProxyEnabled</key>
<false/>
<!-- Dark mode varsayılan -->
<key>UIUserInterfaceStyle</key>
<string>Dark</string>
<!-- Yatay/dikey orientasyon -->
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
</array>
</dict>
</plist>
App Store Yayımlama Adımları
1. App Store Connect Hesabı
Linkleri görebilmek için
giriş yap veya kayıt ol.
'de:- Yeni App oluştur
- Bundle ID: com.payturk.app
- İsim: Paytürk (benzersiz olmalı, alınmışsa değiştir)
2. Gerekli Görseller
Table| Boyut | Amaç |
|---|---|
| 1024×1024 | App Store ikonu |
| 6.5" ekran (iPhone 14 Pro Max) | Ekran görüntüleri (3-5 adet) |
| 5.5" ekran (iPhone 8 Plus) | Ekran görüntüleri |
| iPad Pro (12.9") | Tablet ekran görüntüleri |
3. Yükleme (Upload)
Xcode Organizer'dan veya altool ile:bash
Copy
# Komut satırından upload (CI/CD için)
xcrun altool --upload-app -f Paytürk.ipa -t ios -u [email protected] -p app-specific-password
Firebase iOS Entegrasyonu
GoogleService-Info.plist Ekleme
- Firebase Console → Proje Ayarları → iOS uygulaması ekle
- Bundle ID: com.payturk.app gir
- İndirilen GoogleService-Info.plist dosyasını:
plain
Copy
ios/App/App/GoogleService-Info.plist
olarak kopyala
AppDelegate.swift Güncelleme
swiftCopy
import UIKit
import Capacitor
import FirebaseCore // Firebase için ekle
@UIApplicationMain
class AppDelegate: CAPAppDelegate {
override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Firebase başlat
FirebaseApp.configure()
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
Alternatif: Mac Olmadan iOS Build (Sınırlı)
Eğer Mac'in yoksa:Table
| Yöntem | Açıklama | Sınırlama |
|---|---|---|
| MacStadium | Bulut Mac kiralama | $99/ay, yavaş |
| GitHub Actions + Mac Runner | CI/CD | Sadece build, test için cihaz gerekli |
| Expo EAS Build | Expo'nun cloud build servisi | React Native projesi olmalı |
Expo EAS Build (Eğer React Native'e geçersen)
bashCopy
# Expo projesinde
eas build --platform ios
# Apple ID ve şifre gir, gerisini Expo halleder
Karşılaşabileceğin Hatalar
"Signing Certificate" Hatası
plainCopy
Çözüm: Xcode → Preferences → Accounts → Apple ID ekle
→ Download Manual Profiles
"CocoaPods" Hatası
bashCopy
cd ios/App
pod install --repo-update
"Firebase SDK" Bulunamadı
plainCopy
Xcode → Project → Build Settings → Framework Search Paths
→ $(inherited) ekle
Özet Komutlar
Table| İşlem | Komut |
|---|---|
| iOS platform ekle | npx cap add ios |
| Sync et | npx cap sync ios |
| Xcode aç | npx cap open ios |
| Simülatörde çalıştır | npx cap run ios |
| Live reload (geliştirme) | npm run build -- --watch + npx cap copy ios |
Hangi aşamadasın? Mac'in var mı yoksa alternatif çözüm mü arıyorsun? Firebase entegrasyonunda takılırsan GoogleService-Info.plist kısmına dikkat et, en sık yapılan hata orası.
WEB SİTESİ İÇİN BUİLD ÇEVİRME
Hızlı Başlangıç: Ücretsiz Seçenekler
1. Vercel (En Kolay - Önerilen)
Vercel, React projeleri için en optimize platformdur. GitHub entegrasyonu ile otomatik deploy yapar.bash
Copy
# 1. Vercel CLI kur
npm install -g vercel
# 2. Proje dizinine git
cd /path/to/payturk
# 3. Build al ve deploy et
vercel
# İlk kurulumda sorular:
# ? Set up and deploy? [Y/n] → Y
# ? Which scope? [senin-kullanici-adin] → Enter
# ? Link to existing project? [y/N] → N (yeni proje)
# ? What's your project name? [payturk] → Enter
Otomatik Deploy: GitHub'a push yaptığında otomatik güncellenir.
Özel Domain:
- Vercel Dashboard → Project Settings → Domains
- payturk.com.tr ekle, DNS ayarlarını yap
2. Netlify (Sürükle-Bırak ile En Basit)
Build almadan direkt dosya yükleme seçeneği var.bash
Copy
# 1. Önce build al
npm run build
# 2. dist klasörünü zip'le
# 3. netlify.com'a git → Drag and drop ile yükle
Veya CLI ile:
bash
Copy
npm install -g netlify-cli
netlify deploy --prod --dir=dist
3. GitHub Pages (Tamamen Ücretsiz)
bashCopy
# 1. vite.config.ts güncelle
cat > vite.config.ts << 'EOF'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: '/payturk/', // Repo adınla aynı olmalı
build: {
outDir: 'dist'
}
})
EOF
# 2. Build al
npm run build
# 3. gh-pages paketi kur
npm install --save-dev gh-pages
# 4. package.json'a ekle
npm pkg set scripts.deploy="gh-pages -d dist"
# 5. Deploy et
npm run deploy
Site adresin:
Linkleri görebilmek için
giriş yap veya kayıt ol.
Profesyonel/Ücretli Seçenekler
4. Firebase Hosting (Google Altyapısı)
Paytürk zaten Firebase kullanıyor, hosting de eklenebilir.bash
Copy
# 1. Firebase CLI kur
npm install -g firebase-tools
# 2. Login ol
firebase login
# 3. Hosting'i başlat
firebase init hosting
# Sorular:
# ? What do you want to use as your public directory? dist
# ? Configure as a single-page app? Yes
# ? Set up automatic builds? No (isteğe bağlı)
# 4. Deploy
firebase deploy
# URL:
Linkleri görebilmek için
giriş yap veya kayıt ol.
veya
Linkleri görebilmek için
giriş yap veya kayıt ol.
Özel Domain: Firebase Console → Hosting → Custom Domain → payturk.com.tr ekle
5. AWS S3 + CloudFront (Ölçeklenebilir)
Büyük ölçekli projeler için:bash
Copy
# 1. Build al
npm run build
# 2. AWS CLI ile S3 bucket'a yükle
aws s3 sync dist/ s3://payturk-bucket --delete
# 3. CloudFront cache invalidation
aws cloudfront create-invalidation --distribution-id XXXXX --paths "/*"
Build Alma Komutları
Geliştirme (Local Test)
bashCopy
npm run dev
#
Linkleri görebilmek için
giriş yap veya kayıt ol.
Production Build
bashCopy
npm run build
Build Sonrası Preview (Test)
bashCopy
npm run preview
# Build'ı local'de test et, hata var mı gör
Önemli Yapılandırmalar
vite.config.ts (Production Ayarları)
TypeScriptCopy
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
// Production build ayarları
build: {
outDir: 'dist',
sourcemap: false, // Güvenlik için sourcemap kapalı
minify: 'terser', // Kod sıkıştırma
rollupOptions: {
output: {
manualChunks: {
// Büyük kütüphaneleri ayır (performans)
'react-vendor': ['react', 'react-dom'],
'firebase-vendor': ['firebase/app', 'firebase/auth', 'firebase/firestore'],
'charts-vendor': ['recharts'],
}
}
}
},
// API proxy (geliştirme için)
server: {
proxy: {
'/api': {
target: '
Linkleri görebilmek için
giriş yap veya kayıt ol.
',changeOrigin: true
}
}
}
})
Environment Variables (.env Dosyaları)
bashCopy
# .env.development (Geliştirme)
VITE_FIREBASE_API_KEY=dev-key-here
VITE_GEMINI_API_KEY=dev-gemini-key
VITE_API_URL=
Linkleri görebilmek için
giriş yap veya kayıt ol.
# .env.production (Canlı)
VITE_FIREBASE_API_KEY=prod-key-here
VITE_GEMINI_API_KEY=prod-gemini-key
VITE_API_URL=
Linkleri görebilmek için
giriş yap veya kayıt ol.
Kullanım: import.meta.env.VITE_FIREBASE_API_KEY
Domain ve SSL (HTTPS)
Özel Domain Bağlama (Tüm Platformlar)
Table| Platform | Adım |
|---|---|
| Vercel | Dashboard → Domains → Add → DNS A/TXT kaydı ekle |
| Netlify | Domain settings → Add custom domain → CNAME kaydı |
| Firebase | Hosting → Custom Domain → Follow DNS steps |
| Cloudflare | DNS → CNAME → Proxy status: DNS only (önce) → Full (sonra) |
DNS Ayarları Örneği (payturk.com.tr için)
plainCopy
Type Name Value TTL
A @ 76.76.21.21 (Vercel) Auto
CNAME www cname.vercel-dns.com. Auto
TXT _vercel vc-domain-verify=... Auto
CI/CD: Otomatik Deploy (GitHub Actions)
.github/workflows/deploy.yml dosyası oluştur:yaml
Copy
name: Deploy to Production
on:
push:
branches: [ main ]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
env:
VITE_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
VITE_GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}
# Vercel'e deploy
- name: Deploy to Vercel
uses: vercel/action-deploy@v1
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
# Alternatif: Firebase'e deploy
# - name: Deploy to Firebase
# uses: w9jds/firebase-action@master
# with:
# args: deploy --only hosting
# env:
# GCP_SA_KEY: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
GitHub Secrets Ekleme:
- Repo → Settings → Secrets and variables → Actions → New repository secret
Build Sonrası Kontrol Listesi
plainCopy
npm run build hatasız tamamlandı mı? dist klasöründe index.html var mı? Firebase API anahtarları production için doğru mu? Gemini API limitleri yeterli mi? Özel domain DNS ayarları yapıldı mı? HTTPS (SSL sertifikası) aktif mi? Mobil görünüm test edildi mi? Dark mode düzgün çalışıyor mu?Hızlı Karşılaştırma
Table| Platform | Fiyat | Kurulum | Özel Domain | En İyi |
|---|---|---|---|---|
| Vercel | Ücretsiz | 1 dk | | React projeleri |
| Netlify | Ücretsiz | Sürükle-bırak | | Statik siteler |
| Firebase | Ücretsiz (1GB) | 5 dk | | Firebase kullananlar |
| GitHub Pages | Ücretsiz | 10 dk | | Açık kaynak projeler |
| AWS S3 | ~$1/ay | 30 dk | | Kurumsal projeler |
Hangi platformu kullanmak istiyorsun? Domain'in var mı yoksa .web.app / .vercel.app ile mi başlayacaksın? Firebase kullandığın için Firebase Hosting mantıklı olabilir, tek yerden yönetirsin.
İNDİRME LİNKİ
Linkleri görebilmek için
giriş yap veya kayıt ol.
virustotal
Linkleri görebilmek için
giriş yap veya kayıt ol.
En son bir moderatör tarafından düzenlenmiş:
