🎨 WebEdit-r

Yapay Zeka Destekli Görsel HTML Editörü

Sürükle-bırak kolaylığı ve yapay zeka yardımıyla fikirlerinizi muhteşem web sitelerine dönüştürün.

Demo • Özellikler • Kurulum • Kullanım • Katkıda Bulunma

---

✨ Özellikler

🤖 Yapay Zeka Asistanı

• Çoklu Model Desteği: Groq (ücretsiz), Claude, GPT-4, Gemini
• ChatGPT Tarzı Arayüz: Kalıcı konuşma hafızası
• Bağlam Farkındalığı: Siteyi yeniden yapmadan iyileştirmeler
• Profesyonel Çıktı: WordPress/Webflow kalitesinde siteler

🎨 Görsel Editör & 🧰 Gelişmiş Araç Kutusu

• Sürükle & Bırak: Elementleri özgürce taşıyın
• Tıkla Seç: Sezgisel element seçimi
• Canlı Düzenleme: Metinleri çift tıklayarak düzenleyin
• 33+ Component: Butonlar, kartlar, slider'lar, takvimler, grafikler
• 6 Kategori: Temel, Form, Gelişmiş, Medya, Layout, Grafikler

🔌 Profesyonel Eklentiler & ⌨️ Geliştirici Araçları

• SEO Analiz: 100 puanlık skorlama sistemi ve uygulanabilir öneriler
• Form Oluşturucu: Canlı önizlemeli ve XSS-güvenli çıktı
• Monaco Kod Editörü: Tarayıcıda tam özellikli IDE
• Sanal Terminal: git, npm dahil 20+ komut

---

📸 Monaco Editör Kod Düzenleme ve Terminal Ekran görüntüleri

---

🚀 Hızlı Başlangıç

Gereksinimler

• Node.js 16+ ve npm

Kurulum

# Depoyu klonlayın
git clone [https://github.com/alperenklc5/webedit-r.git](https://github.com/alperenklc5/webedit-r.git)
cd webedit-r

# Bağımlılıkları yükleyin
npm install

# Geliştirme sunucusunu başlatın
npm run dev

Tarayıcınızda http://localhost:5173 adresini açın.

---

📖 Kullanım

1. Tema veya AI ile Başlayın
   • Tema Yükle: "Temalar" butonuna tıklayarak 9 hazır temaya göz atın.
   • AI ile Oluştur: AI Asistan'ı açın → "Modern bir portfolyo sitesi oluştur".
   • Boş Başla: Boş kanvas ile başlayın.

2. Component Ekleyin
   • Sol kenar çubuğundaki 🧰 Araç Kutusu sekmesine tıklayın.
   • Kategorilere göz atın: Temel, Form, Gelişmiş, Medya, Layout, Grafikler.
   • Componentleri tıklayın veya kanvasa sürükleyin.
     

3. Elementleri Düzenleyin

   • Seç: Herhangi bir elemente tıklayın.
   • Taşı: Seçili elementi sürükleyin.
   • Metni Düzenle: Metin elementlerine çift tıklayın.
   • Stillendir: Sağ paneli kullanın (renkler, boyut, boşluk, kenarlıklar).
   

4. AI Asistanı Kullanın

   • Araç çubuğundaki 🤖 AI Assistant butonuna tıklayın.
   • İlk kez model seçin (Groq önerilir - ücretsiz).
   • API anahtarı girin (sağlayıcıdan alın).
   • Doğal konuşun: "Bir iletişim formu ekle", "Koyu tema yap", vb.

5. Kaydet & Export

   • Kaydet: 💾 butonuna tıklayın (localStorage'a kaydeder).
   • Export: Temiz HTML dosyası için export butonuna tıklayın.

---

🛠️ Teknoloji Yığını

• Frontend: React 18, Vite
• Editör: Monaco Editor (VS Code)
• AI API'ları: Groq, Anthropic Claude, OpenAI, Google Gemini
• Depolama: LocalStorage (sadece istemci tarafı)

---

🎯 Yol Haritası

v1.1 (Planlanmış)

• Eklemeden önce component önizlemesi
• Gradient & gölge oluşturucular
• Animasyon preset kütüphanesi
• Çoklu sayfa desteği
• İşbirlikli düzenleme

v1.2 (Gelecek)

• WordPress export
• React/Vue component export
• Resim CDN entegrasyonu
• Özel component kütüphanesi
• Sürüm kontrolü

---

🤝 Katkıda Bulunma

Katkılarınızı bekliyoruz! Lütfen önce CONTRIBUTING.md dosyasını okuyun.

---

📝 Lisans

MIT Lisansı - detaylar için LICENSE dosyasına bakın.

---

📧 İletişim

Proje Linki: https://github.com/alperenklc5/webedit-r
Sorunlar: https://github.com/alperenklc5/webedit-r/issues

⭐ Bu projeyi faydalı bulduysanız yıldızlamayı unutmayın!
❤️ Alperen KILIÇ ve AI ile yapıldı