NextGen Browser 🚀

NextGen Browser, Electron, React, ve TypeScript kullanılarak geliştirilmiş, modern ve yapay zeka odaklı özelliklere sahip bir web tarayıcısıdır. Kullanıcı deneyimini ön planda tutan tasarımı ve gelişmiş özellikleriyle modern bir internet deneyimi sunar.

---

✨ Temel Özellikler

🛡️ Gelişmiş Güvenlik ve Gizlilik

• Dahili Reklam Engelleyici (AdBlocker): Popüler reklam ve takipçi domainlerini otomatik olarak engeller.
• Gizli Mod: Tarama geçmişini ve çerezleri kaydetmeden gezinti imkanı.
• Güvenlik Kalkanı: Web sitelerindeki güvenlik durumlarını takip eder.

📑 Üstün Sekme Yönetimi

• Sekme Gruplama: Benzer sekmeleri gruplayarak karmaşıklığı azaltın.
• Bölünmüş Ekran (Split View): Aynı pencerede iki farklı web sitesini yan yana görüntüleyin.
• Dikey Sekme Çubuğu: Modern ve yer kazandıran sekme tasarımı.

🛠️ Gelişmiş Araçlar

• Şifre Yöneticisi: Giriş bilgilerinizi güvenli bir şekilde saklayın.
• Yer İşaretleri (Bookmarks): Favori sitelerinizi klasörlerle organize edin.
• Ekran Görüntüsü Aracı: Web sayfalarının anlık görüntülerini alıp kaydedin.
• İndirme Yöneticisi: İndirme işlemlerini gerçek zamanlı takip edin.
• Görev Yöneticisi: CPU ve bellek kullanımını izleyin.

🎨 Modern Kullanıcı Deneyimi

• Kişiselleştirilebilir Dashboard: Saat, yapılacaklar listesi (To-do) ve favori sitelerle dolu modern bir ana sayfa.
• Glassmorphism Tasarımı: Tailwind CSS ve Framer Motion ile güçlendirilmiş şık ve akıcı arayüz.
• Çerçevesiz Pencere: macOS tarzı özel pencere kontrolleri.

---

🛠️ Kullanılan Teknolojiler

• Framework: Electron (Masaüstü Uygulama Geliştirme)
• Frontend: React + TypeScript
• Build Tool: electron-vite
• Styling: Tailwind CSS + PostCSS
• Animations: Framer Motion
• Icons: Lucide React
• Utility: clsx, tailwind-merge

---

📂 Proje Yapısı

nextgen-browser/
├── src/
│   ├── main/          # Electron ana süreç (pencere yönetimi, IPC, AdBlocker)
│   ├── preload/       # Güvenli IPC iletişimi için preload scriptleri
│   └── renderer/      # React frontend uygulaması (UI/UX)
│       └── src/
│           ├── App.tsx       # Ana uygulama bileşeni ve mantığı
│           └── main.tsx      # React giriş noktası
├── out/               # Derlenmiş dosyalar (Build sonrası)
├── electron.vite.config.ts  # Vite ve Electron yapılandırması
├── tailwind.config.js # Tailwind CSS konfigürasyonu
└── package.json       # Bağımlılıklar ve scriptler

---

🚀 Başlangıç

Projeyi yerel makinenizde çalıştırmak için şu adımları izleyin:

1. Bağımlılıkları Yükleyin:

   npm install

2. Geliştirme Modunda Çalıştırın:

   npm run dev

3. Uygulamayı Derleyin (Build):

   # Windows için
   npm run build:win
   
   # Mac için
   npm run build:mac
   
   # Linux için
   npm run build:linux

---

📝 Analiz Notları

• Modülerlik: Proje, Electron'un ana ve renderer süreçlerini net bir şekilde ayırarak electron-vite mimarisini takip eder.
• Performans: Sekme yönetimi için <webview> etiketi kullanılarak ana uygulamanın performansı korunmuştur.
• Genişletilebilirlik: Şifre yöneticisi ve yer işaretleri gibi sistemler modüler interface yapılarıyla (e.g., Tab, Bookmark, PasswordEntry) kurgulanmıştır.
• UI Gelişmişliği: Tailwind ve Framer Motion kullanımı, modern bir tarayıcıdan beklenen akıcılığı sağlar.

---

Geliştiren: Burak Behlül