ChatRoom UI - SignalR ile Gerçek Zamanlı Chat Uygulaması

Bu proje, .NET Core backend ile geliştirilen ChatRoom API'yi kullanarak gerçek zamanlı bir chat uygulaması sunar. React kütüphanesi ile geliştirilmiş bu frontend uygulaması, kullanıcıların kayıt olmasını, giriş yapmasını, sohbet odalarına katılmasını ve mesajlaşmasını sağlar.

Giriş

Bu frontend uygulaması, React ile yazılmıştır ve backend API ile bağlantı kurarak kullanıcıların oturum açmasını, sohbet odalarına katılmasını ve mesaj göndermesini sağlar. Kullanıcılar, JWT token ile kimlik doğrulaması yaparak API'ye erişir. SignalR kullanılarak gerçek zamanlı mesajlaşma sağlanır.

Teknolojiler

• React: Kullanıcı arayüzü oluşturmak için JavaScript kütüphanesi.
• React Router: Sayfalar arasında geçiş yapmak için.
• Axios: API istekleri yapmak için HTTP istemcisi.
• SignalR Client: SignalR sunucusuna bağlanmak ve gerçek zamanlı iletişim kurmak için.
• Bootstrap: Stil oluşturmak için yardımcı bir frontend framework.
• Font Awesome:: İkonlar için.

Özellikler

• Kullanıcı Kayıt ve Girişi: Kullanıcıların güvenli bir şekilde hesap oluşturmasını ve giriş yapmasını sağlar.
• JWT Token ile Kimlik Doğrulama: Kullanıcının kimlik bilgilerini güvenli bir şekilde saklar ve yönetir.
• Gerçek Zamanlı Chat: SignalR ile anlık mesajlaşma deneyimi sunar.
• Sohbet Odaları: Kullanıcılar mevcut sohbet odalarına katılabilir ve yeni sohbet odaları oluşturabilir.
• Kullanıcıların Çevrimiçi Durumlarını Gösterme: Kullanıcıların çevrimiçi olup olmadığını gösterir.
• Mesaj Geçmişini Görüntüleme: Kullanıcıların geçmiş mesajları görebilmesini sağlar.
• Mesaj Okundu Bilgisi: Mesajların okundu bilgisini gösterir.
• Mobil Uyumlu Tasarım: Farklı ekran boyutlarına uyumlu duyarlı arayüz.
• Hızlı ve Verimli Arayüz: React'in performansı sayesinde hızlı ve akıcı bir kullanıcı deneyimi.

Kurulum

1. Depoyu Klonlayın:

   git clone https://github.com/mevlutayilmaz/chat-room-ui.git

2. Gerekli Paketleri Yükleyin:

   npm install

3. Uygulamayı Çalıştırın:

   npm run dev

Uygulama çalıştırıldıktan sonra tarayıcınızda http://localhost:3000 adresine giderek uygulamayı kullanabilirsiniz.

Kullanım

1. Kayıt Ol/Giriş Yap:
   • Uygulamayı ilk açtığınızda kayıt veya giriş sayfasına yönlendirilirsiniz.
   • Kayıt için gerekli bilgileri girin ve hesap oluşturun.
   • Mevcut bir hesabınız varsa, giriş yapın.
2. Sohbet Odaları:
   • Giriş yaptıktan sonra, mevcut sohbet odalarını görebilirsiniz.
   • İstediğiniz sohbet odasına tıklayarak sohbete katılabilirsiniz.
3. Mesaj Gönderme:
   • Sohbet odasına girdikten sonra, alttaki mesaj kutusuna mesajınızı yazın ve gönderin.
   • Mesajlar anında diğer katılımcılara iletilecektir.
4. Sohbet Odası Oluşturma:

• Yeni bir sohbet odası oluşturabilirsiniz.

5. Çevrimiçi Durum:
   • Sohbet odasındaki kullanıcıların çevrimiçi durumlarını ya da son görülme tarihlerini takip edebilirsiniz.

Ekran Görüntüleri

Login	Signup
Mesaj Bildirimi	Grup Üyeleri
Kullanıcı Aktiflik Durumu	Kullanıcı Son Görülme Tarihi
Direct Chat Oluşturma	Group Chat Oluşturma