Webtrader

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