Drag & drop destekli, funel (satış tüneli) oluşturma platformu. Kullanıcılar görsel editörle satış sayfaları tasarlayabilir, akış (workflow) şemaları çizebilir, Admin paneli üzerinden lead'leri, kullanıcıları ve geliri takip edebilir.
Demo amaçlı tek arayüzde Kullanıcı Paneli ve Admin Paneli olarak iki rol barındırır; tüm veriler tarayıcı belleğinde (Context API) tutulur, backend gerektirmez.
- 🧙 Kurulum Sihirbazı (Wizard) — Adım adım funnel kurulumu
- 📊 Genel Bakış Dashboard — Lead, dönüşüm ve gelir metrikleri
- 🎨 Funnel Editör — Sürükle-bırak ile sayfa tasarımı,
@dnd-kitile - 🔀 İş Akışları (Workflows) —
@xyflow/reactile görsel akış şemaları - 📦 Şablonlar — Hazır funnel şablonları
- ⚙️ Ayarlar — Hesap & geliştirici ayarları
- 🎓 Eğitim — Onboarding/Kullanım rehberi
- 📈 Admin Dashboard — Sistem geneli istatistikler
- 👥 Kullanıcı Yönetimi — Listele / detay / askıya alma
- 🎯 Lead Yönetimi — Tüm lead'leri görme
- 📦 Şablon Moderasyonu — Şablon onay/red
- 💰 Gelir Analizi — Recharts ile grafiksel gelir raporu
- 🎛️ Özel bileşen kütüphanesi:
Button,Modal,Toast,Toggle,ProgressBar,MetricCard,Badge - 🌙 Modern, responsive tasarım (Tailwind CSS v4)
- ♻️ Hızlı yeniden derleme için Vite + Rolldown
- 🧪 Vitest + Testing Library ile 17 test
| Kategori | Teknoloji |
|---|---|
| Framework | React 19 |
| Build | Vite 8 + Rolldown |
| Dil | TypeScript 6 |
| Stil | Tailwind CSS 4 |
| Yönlendirme | React Router 7 (HashRouter) |
| Drag & Drop | @dnd-kit/core, @dnd-kit/sortable |
| Akış Editörü | @xyflow/react (React Flow) |
| Grafikler | Recharts 3 |
| İkonlar | lucide-react |
| Test | Vitest 4 + Testing Library + jsdom |
| Lint | OxLint |
# Repoyu klonla
git clone https://github.com/dehoa34-ctrl/funnelpro.git
cd funnelpro
# Bağımlılıkları yükle
npm ci
# Geliştirme sunucusunu başlat
npm run devTarayıcıda aç: http://localhost:5173
- Açılış ekranında Kullanıcı ya da Admin rolü seç
- Kullanıcı rolu ile:
/sihirbaz→ sihirbazı tamamla →/duzenleyiciile funnel tasarımına başla - Admin rolu ile:
/admin→ dashboard üzerinde tüm kullanıcıları ve lead'leri incele
| Yol | Açıklama |
|---|---|
/ |
Rol seçim ekranı |
/sihirbaz |
Kurulum sihirbazı |
/genel-bakis |
Kullanıcı dashboard |
/sablonlar |
Şablon galerisi |
/duzenleyici |
Drag & drop funnel editör |
/is-akislari |
Workflow editör |
/ayarlar |
Hesap ayarları |
/egitim |
Eğitim sayfası |
/admin |
Admin dashboard |
/admin/kullanicilar |
Kullanıcı yönetimi |
/admin/kullanicilar/:id |
Kullanıcı detay |
/admin/leadler |
Lead listesi |
/admin/sablonlar |
Şablon moderasyonu |
/admin/gelir |
Gelir analizi |
/p/:slug |
Yayınlanmis funnel (public sayfa) |
# Testleri çalıştır
npm test
# Production build al
npm run build
# Lint
npm run lint
# Build önizleme
npm run previewfunnelpro/
├── src/
│ ├── components/
│ │ ├── editor/ # Funnel editör parçaları (canvas, toolbox, properties, trash)
│ │ ├── layout/ # Sidebar/admin layout'ları
│ │ ├── ui/ # Yeniden kullanılabilir UI bileşenleri
│ │ └── workflow/ # React Flow node'ları
│ ├── context/ # DemoContext (demo state)
│ ├── hooks/ # useAutoScroll vs.
│ ├── pages/ # Tüm sayfalar (Kullanıcı + Admin)
│ ├── test/ # Vitest test dosyaları
│ └── types/ # TypeScript tipleri
├── public/ # Statik dosyalar
└── ... # Vite, Tailwind, TS konfigleri
- Bu proje demo amaçlıdır — kalıcı veri saklama yapmaz, tüm data Context API üzerinden çalışır.
- Backend bağımsız: tek komutla
npm run devile çalışır. - HashRouter kullanır, bu yüzden statik hosting'e uyumludur.
Bu proje kişisel portfolyo amaçlıdır. Lisans için repo sahibiyle iletişime geçin.
Geliştirici: @canbilgehan · Repo: funnelpro