Bu proje, React, Vite ve Material UI kullanılarak geliştirilmiş, Google Gemini API'sine bağlanan, modern ve tamamen duyarlı bir AI chatbot arayüzüdür. Proje, hem modern frontend teknolojilerini etkili bir şekilde kullanmayı göstermek hem de React'in fonksiyonel bileşenleri, state yönetimi ve hook'ları gibi temel konseptlerini pratik bir uygulama üzerinde sergilemek amacıyla oluşturulmuştur.
- Modern ve Sezgisel Arayüz: ** Google'ın Material Design prensiplerine uygun, temiz ve kullanıcı dostu bir sohbet arayüzü.
- Tamamen Duyarlı (Fully Responsive): ** Mobil, tablet ve masaüstü cihazlarda kusursuz bir kullanıcı deneyimi sunar.
- Gerçek Zamanlı API Entegrasyonu: Google Gemini API'si ile anlık ve akıcı bir sohbet deneyimi.
- "Thinking..." Göstergesi: Botun cevap hazırladığı sırada kullanıcıya görsel geri bildirim sunarak bekleme süresini anlamlandırır.
- Öneri Çipleri (Suggestion Chips): Kullanıcılara sohbete başlamaları için "Yemek tarifi ver" gibi tıklanabilir öneriler sunar.
- Sohbet Yönetimi: Tek tıkla sohbet geçmişini temizleme özelliği.
- Tam Ekran Modu: Daha odaklanmış bir sohbet deneyimi için pencereyi tam ekran yapma seçeneği.
- Yumuşak Geçişler ve Animasyonlar: Sohbet penceresinin açılıp kapanması ve ikon değişimleri için akıcı animasyonlar.
- Otomatik Kaydırma: Yeni bir mesaj geldiğinde sohbet alanını otomatik olarak en alta kaydırır.
| Kategori | Teknoloji | Açıklama |
|---|---|---|
| Frontend |  |
Güçlü ve esnek kullanıcı arayüzleri oluşturmak için. |
 |
Işık hızında bir geliştirme ve derleme deneyimi için. | |
| Stil |  |
Kapsamlı ve özelleştirilebilir bileşenler ile profesyonel bir tasarım. |
| API | Google Gemini | Akıllı ve doğal dil işleme yetenekleri için. |
| İkonlar |  |
Popüler ikon setlerini tek bir pakette birleştirmek için. |
| Ortam |  |
Paket yönetimi ve proje script'leri için. |
Projeyi yerel makinenizde çalıştırmak için aşağıdaki adımları izleyin:
-
Projeyi Klonlayın:
git clone [https://github.com/EnderKaran/AI-Chatbot-Project.git](https://github.com/EnderKaran/AI-Chatbot-Project.git)
-
Proje Dizinine Girin:
cd AI-Chatbot-Project -
Gerekli Paketleri Yükleyin:
npm install
-
Geliştirme Sunucusunu Başlatın:
npm run dev
Bu komuttan sonra, projeniz varsayılan olarak
http://localhost:5173/adresinde çalışmaya başlayacaktır.
Proje, yeniden kullanılabilir ve yönetilebilir bileşenler oluşturma prensibiyle yapılandırılmıştır.
/
├── public/ # Favicon gibi statik dosyalar
├── src/
│ ├── components/ # Tüm React bileşenleri
│ │ ├── ChatbotIcon.jsx
│ │ ├── ChatForm.jsx
│ │ ├── ChatMessage.jsx
│ │ └── SuggestionChips.jsx
│ ├── App.jsx # Ana uygulama bileşeni, tüm mantığı ve bileşenleri birleştirir
│ ├── index.css # Global CSS ve mesaj baloncukları için özel stiller
│ └── main.jsx # React uygulamasının başlangıç noktası
├── .env # API anahtarı gibi gizli bilgileri saklar (Git'e gönderilmez)
├── index.html # Ana HTML dosyası
├── package.json # Proje bağımlılıkları ve script'ler
├── vite.config.js # Vite yapılandırma dosyası
└── README.md # Bu dosya
[Ender Karan]
- GitHub:
(https://github.com/EnderKaran) - LinkedIn:
(https://www.linkedin.com/in/ender-karan-52303b187)
Proje ile ilgili herhangi bir soru veya geri bildirim için bana ulaşmaktan çekinmeyin!