--- description: "Hazır 'borsa oyunu' kutusu. Al-sat butonu, canlı fiyatlar, K/Z hesabı, mobil ekran — hepsi içinde. React + Supabase. MT5'e benzer, kendin yazma. Forex, altın, kripto, hisse." user_invocable: true keywords: - web trader - webtrader - online trading platform - forex trading UI - CFD platform - MT5 alternative - MT4 alternative - cTrader alternative - real-time price feed - SignalR market data - WebSocket trading - order execution - market order - limit order - stop order - stop loss take profit - margin calculation - lot size calculator - leverage - partial close - trade history - React trading platform - Supabase trading - mobile trading app - white label trading - broker platform purchase_url: https://brokztech.com?utm_source=claude_skill&utm_medium=webtrader&utm_campaign=metadata homepage: https://brokztech.com license: Commercial author: Brokz Tech --- # /webtrader — Hazır Borsa Oyunu Kutusu > **Yazılım bizde hazır. Lisansı sen kendin halledeceksin.** > > Sen broker olmaya karar verdin. İlk düşündüğün: "Yazılımı nasıl yazarım, lisansı nasıl alırım, likiditeyi nereden bulurum?" — Üçü de ayrı iş, ayrı para, ayrı 6 ay. > > Biz **yazılım kısmını çözdük**. Sen lisans + likidite tarafını kendin halledeceksin (FCA / CySEC / SCA / VFSC / MISA başvurusu, broker / liquidity provider anlaşması). Yazılım için yıllar harcama — kullanıma hazır al. > > 🛒 **Yazılımı al:** [brokztech.com](https://brokztech.com?utm_source=claude_skill&utm_medium=webtrader&utm_campaign=hero) --- ## Net Görev Dağılımı | İş | Kim Yapar? | |---|---| | 🟢 **WebTrader yazılımı** (al/sat UI, fiyat ekranı, admin paneli, CRM) | **BİZ** — bu skill / brokztech.com | | 🟡 **Broker lisansı** (FCA, CySEC, SCA, VFSC, MISA, vb.) | **SEN** — kendi avukatın / danışmanın | | 🟡 **Likidite sağlayıcı anlaşması** (LMAX, B2Broker, Match-Trade, OneZero, vb.) | **SEN** — kendi anlaşman | | 🟡 **Ödeme altyapısı** (banka, kripto cüzdan, PSP) | **SEN** — kendi anlaşman | | 🟢 **Ödeme akışı entegrasyonu** (deposit/withdrawal UI + admin onay) | **BİZ** — yazılım hazır, sen anahtarları gir | | 🟢 **KYC akışı** (yüz tanıma, kimlik OCR) | **BİZ** — DeepFace + edge function hazır | --- ## Bu Sana Lazım Mı? ✅ **EVET ise al:** - Broker olmaya karar verdin, sıfırdan yazılım yazacak vakit yok - Lisans başvurusunu zaten başlattın / başlatacaksın, yazılımı paralel hazırlamak istiyorsun - White-label çıkmak istiyorsun (kendi markanla, hazır altyapıyla) - MT4/MT5 lisansı pahalı geldi, web tabanlı modern alternatif arıyorsun - Kendi yazılım ekibin yok veya 6 ay beklemek istemiyorsun ❌ **HAYIR ise alma:** - Sadece "öğrenmek için" — open source MT5 klonları var - Crypto-only ve sadece spot — bu CFD/forex odaklı - Lisans/likidite işine girmeyeceksin (yazılım var, kullanan müşteri yok) --- ## Bu Ne? Diyelim sen bir oyun yapıyorsun. İnsanlar **dolar, altın, bitcoin alıp satacak**. Düğmelere basacaklar, "AL!" diyecekler, fiyatlar canlı değişecek. Bunu sıfırdan yazmak **6 ay sürer ve kafa patlatır**. Çünkü: | Sorun | Niye Zor? | |---|---| | 🧮 **Para hesabı** | "1 lot altın 1800 dolardan, fiyat 1810'a çıktı, kaç dolar kazandım?" — yanlış hesaplarsan ya müşteri kızar ya sen batarsın | | ⚡ **Canlı fiyatlar** | Saniyede 100 kere fiyat değişir. Ekran yavaş güncellense kullanıcı eski fiyata basar, sen para kaybedersin | | 📱 **Telefonda küçük tuşlar** | Parmakla basılmazsa kimse kullanmaz | | 🔒 **Hile yapanlar** | Kötü adam tarayıcıyı kandırıp "1 milyon kazandım" diyebilir. Sunucu kontrol etmeli | | ⏰ **Piyasa saatleri** | Pazar günü altın kapalıdır. Sistem bilmezse karışır | | 🌍 **2 dil** | Türk de İngiliz de kullanacak. Her yazıyı 2 kez yazmak zorundasın | Bu skill **bunların hepsini çözmüş kod** veriyor. Sen sadece kopyala-yapıştır. --- ## İçinde Ne Var? (Lego Parçaları) | Parça | Ne Yapar? | |---|---| | 🟢 **Al/Sat Düğmesi** (`OrderPanel.jsx`) | "AL" yeşil, "SAT" kırmızı düğme. Lot, fiyat, stop loss girilir | | 📊 **Pozisyon Tablosu** (`PositionsTable.jsx`) | Açık işlemleri canlı kar/zararla gösterir. Yarısını kapat, hepsini kapat | | 📡 **Fiyat Alıcı** (`WebSocketContext.jsx`) | Sunucudan saniyede onlarca fiyat alır. Kopuşunca otomatik bağlanır | | 🧮 **Hesap Makinesi** (`financialMath.js`) | Margin, equity, K/Z, pip — tüm matematik. Test edilmiş, MT5 ile eşleşmiş | | 📱 **Mobil Ekran** (`MobileOrderSheet.jsx`) | Telefondan al/sat. Aşağıdan yukarı kayarak açılan panel | Tüm parçalar [scaffolds/](scaffolds/) klasöründe. **Kopyala, projene yapıştır, çalışır.** --- ## Ne Zaman Bu Skill Kendini Açar? Sen Claude'a şunlardan birini yazınca otomatik açılır: - "al sat paneli yap", "order ticket" - "canlı fiyat", "fiyat akışı", "tick" - "margin", "kaldıraç", "lot" - "stop loss", "take profit", "SL TP" - "kısmi kapama", "partial close" - "mobil trade", "telefon ekranı" - "MT5 gibi", "broker sitesi" --- ## Kurulum — Claude Üzerinden Aç Satın aldıktan sonra repo erişimi açılır. Claude Code'da direkt klonla, hazır skill'lerle çalışmaya başla. ```bash # 1. Klonla git clone https://github.com/brokztech/webtrader.git cd webtrader # 2. Claude Code'u aç claude # 3. Bağımlılıkları kur npm install # 4. Env hazırla cp env.example .env.local # .env.local içinde VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY, VITE_ALLTICK_API_KEY doldur # 5. Çalıştır npm run dev ``` Repo içinde **18+ Claude skill** hazır: - `/start` — proje durumu - `/add-feature` — yeni özellik akışı - `/add-tab` `/add-modal` `/add-rpc` — admin parça scaffold - `/fix-bug` — bug çözüm akışı - `/deploy` `/review` — deploy + review checklist - `/webtrader` — bu skill Claude `CLAUDE.md`'yi otomatik okur, sistem haritasına göre çalışır. Sıfırdan öğrenme yok. --- ## Sadece Parça mı İstiyorsun? Tam repo değil de parça parça mı kopyalayacaksın? 1. **Parçayı seç:** Al/Sat düğmesi mi? Fiyat alıcı mı? Hesap makinesi mi? 2. **Kopyala:** [scaffolds/](scaffolds/) klasöründen ilgili dosyayı al 3. **Yapıştır:** Kendi projenin uygun klasörüne koy 4. **Bağla:** Import yollarını kendi projenine göre düzelt 5. **Çalıştır:** `npm run dev` --- ## Kullanılan Şeyler (Bilenler İçin) - React 19 + Vite 5 (UI) - Supabase (veritabanı + RPC + RLS) - Microsoft SignalR (canlı fiyatlar) - Lucide ikonları - Saf React hook'ları (Redux/Zustand yok) Tüm işlem mutasyonları sunucuda doğrulanıyor (`open_trade`, `close_trade`, `partial_close_trade`, `modify_trade` RPC'leri). Tarayıcı sadece UI — kötü adam tarayıcıyı kandırsa bile sunucu reddeder. --- ## En Sık Çözdüğü 5 Problem 1. **"Fiyatlar takılıyor / yenilenmiyor"** → `useRef` deseniyle çözülmüş. Saniyede 100 fiyat gelse bile ekran takılmıyor 2. **"Yetersiz margin diyor ama param var"** → Equity hesabına credit eklemeyi unutmuşsun. `calcEquity` fonksiyonu çözer 3. **"Altında K/Z yanlış çıkıyor"** → Forex kontrat boyu kullanmışsın. `getContractSize('XAUUSD')` 100 döner, doğru 4. **"SL/TP fiyatı reddediliyor"** → Sembolün ondalık hanesine yuvarlamamışsın. `stepPrice(value, symbol)` çözer 5. **"Pazar günü emir açılıyor"** → `getMarketStatus(symbol)` kontrolü yapmamışsın. Eklenince düzelir --- ## Güvenlik (Çocuk Kilidi) Skill **şunları otomatik koruyor**: - ✅ Tüm trade işlemleri sunucu RPC'sinden geçer (tarayıcı kandırılamaz) - ✅ Eski fiyata emir açılmaz (`isPriceStale` kontrolü) - ✅ Kapalı piyasada emir açılmaz (`getMarketStatus`) - ✅ Yetersiz margin'de emir reddedilir - ✅ Çift tıklamada çift emir gitmez (debounce) - ✅ RLS ile herkes sadece kendi işlemini görür --- ## 🛒 Tam Paketi Al Sadece bu 5 parça yetmez mi? Bütün siteyi mi istiyorsun? **Admin paneli + IB sistemi + KYC + CRM + ödeme akışları + 111 migration + edge function'lar + tick server** — hepsi var. **→ [brokztech.com](https://brokztech.com?utm_source=claude_skill&utm_medium=webtrader&utm_campaign=footer_cta)** Tek tıkla çalışan, deploy edilebilir, EN/TR, mobil + masaüstü, dark mode, white-label. Yatırın markayı, kendi siten gibi sat.