🚀 MERN Stack Real-Time Chat & Dashboard

Tam donanımlı, gerçek zamanlı ve modern arayüzlü bir Full Stack İletişim Platformu

Bu proje, MongoDB, Express.js, React ve Node.js (MERN) teknolojileriyle inşa edilmiş, kapsamlı bir anlık mesajlaşma ve yönetim uygulamasıdır. Kullanıcılara WhatsApp veya Telegram benzeri akıcı bir deneyim sunarken, arka planda güvenliği ve hızı ön planda tutan mimariler barındırır.

---

✨ Öne Çıkan Özellikler

💬 Anlık Mesajlaşma (Real-Time Chat)

• Kesintisiz İletişim: Socket.io entegrasyonu sayesinde gecikmesiz (real-time) mesaj iletimi.
• Odalar ve Özel Mesajlar: Genel sohbet odalarına (Genel, Teknoloji vb.) katılabilme veya doğrudan birebir (Private) mesajlaşma.
• Kapsamlı Mesaj İşlemleri: Gönderilen mesajları tıpkı popüler uygulamalardaki gibi anında Düzenleme (Edit) ve Silme (Delete).
• Akıllı Yazıyor Bildirimi: Karşı tarafın mesaj yazdığını gösteren dinamik "Yazıyor..." efekti.
• Çoklu Medya Paylaşımı: Mesajların yanında resim, doküman veya arşiv (zip/rar) dosyaları gönderebilme altyapısı (Cloudinary & Multer Entegrasyonu).

📱 Gelişmiş Mobil Deneyim (PWA & Responsiveness)

• PWA (Progressive Web App): Uygulama, cihaz ayrımı gözetmeksizin tarayıcıdan cihaza yüklenebilir (Installable). Safari (iOS) özel yönlendirmeleri ve Android için tam destek eklidir.
• Mobile Bottom Navigation: Sadece mobilde görünen, Glassmorphism efektli şık bir mobil navigasyon menüsü harika bir UX sağlar.
• Pürüzsüz Deneyim: Tamamen cihaz boyutlarına duyarlı "Mobile-First" yaklaşımı. iOS Safari "çentik (notch)" ve adres çubuğu çakışmalarına karşı safe-area-inset ve 100dvh optimizasyonları yapılmıştır.

🎨 Modern UI ve UX Mimari (Code Splitting)

• Yüksek Performans: React tarafında uygulanan React.lazy ve Suspense özellikleri (Code Splitting) devasa paket boyutlarını böler; ilk açılış hızını zirveye taşır.
• Premium Temalar: Soft "Mor ve Turuncu" gradient paletleriyle harmanlanmış Göz Yormayan Karanlık Mod (Dark Mode) / Aydınlık Mod (Light Mode) seçenekleri.
• Etkileşimli UI: Hover animasyonları, gelişmiş "Toast" bildirimleri, ve hiç mesajlaşılmamış sayfalardaki (Empty State) özel grafik tasarımları ile zengin bir deneyim.

🛡️ İleri Düzey Güvenlik (Security First)

• JWT & Refresh Token: Kullanıcıların hesaplarına erişimi en güvenli şekilde yönetmek için kısa ömürlü ve uzun ömürlü token yapıları.
• İki Aşamalı Doğrulama (2FA): Google Authenticator (veya Authy) üzerinden taranabilen QR Kod ile ek güvenlik katmanı.
• Email Doğrulama & Şifre Yenileme: Kayıt sonrası e-posta aktivasyonu ve şifresini unutan kullanıcılar için tek seferlik güvenli link (Nodemailer) gönderimi. Serverless ortamında (Vercel vb.) kesintisiz çalışma optimizasyonu.
• Gelişmiş Önlemler: API istek sınırlaması (Rate Limiter), güvenlik başlıkları (Helmet) ve CORS koruması.

📊 Rol Tabanlı Yönetim (Admin Dashboard)

• Uygulama içerisindeki herkes yönetici değildir. Admin ve Moderator rolleri için özel yönetim panelleri mevcuttur.
• Yöneticiler uygulama içindeki kullanıcı sayısını, rollerini yönetebilir; gerektiğinde sorunlu hesapları engelleyebilir (ban) veya hesapları silebilir.

---

🛠️ Mimari & Teknoloji Yığını (Tech Stack)

Frontend (Kullanıcı Arayüzü)

• React (Hooks Context API, Suspense, Lazy Routing)
• Socket.io-Client (Canlı veri akışı)
• React-Router-Dom (SPA yönlendirmeleri)
• Axois (HTTP istekleri)
• Framer Motion (Akıcı animasyonlar)
• Vanilla CSS (Özel, yalın ve modern tasarım)

Backend (Sunucu & API)

• Node.js & Express.js (RESTful API)
• MongoDB & Mongoose (NoSQL Veri Yönetimi)
• Socket.io (WebSocket Yönetimi)
• Redis (Yüksek performans için Caching & Session Store)
• JSON Web Token, Bcrypt.js (Kriptografi & Auth)
• Nodemailer (SMTP E-Posta entegrasyonu)
• Multer & Cloudinary (Dosya / Avatar yükleme bulut servisi)

---

🚀 Kurulum (Local Development)

Projeyi kendi bilgisayarınızda (localhost) çalıştırmak için aşağıdaki adımları sırasıyla uygulayın.

1️⃣ Ön Gereksinimler

Sisteminize aşağıdaki servislerin kurulu olduğundan emin olun:

• Node.js (v16 veya üzeri tavsiye edilir)
• MongoDB (Local veya Atlas bulut kümesi)
• Redis (Opsiyonel ama önerilir. Çalıştırmak için redis-server başlatılmalı veya .env üzerinden kapatılmalıdır.)

2️⃣ Repoyu Klonlama ve Kurulum

# Projeyi bilgisayarınıza klonlayın
git clone https://github.com/KULLANICI_ADINIZ/mernapp.git

# Proje dizinine girin
cd mernapp

Bağımlılıkların (Dependencies) yüklenmesi:

# Backend (Sunucu) klasöründeki paketleri yükleyin
cd backend
npm install

# İkinci bir terminal açarak Frontend klasöründeki paketleri yükleyin
cd ../frontend
npm install

3️⃣ Çevre Değişkenlerinin Ayarlanması (.env)

backend/ dizininin içine .env adında bir dosya oluşturup aşağıdaki yapılandırma anahtarlarını kendi bilgilerinizle doldurun:

# ⚙️ Temel Ayarlar
PORT=5000
NODE_ENV=development

# 🗄️ Veritabanı ve Önbellek
MONGO_URI=mongodb://127.0.0.1:27017/mernapp
REDIS_URL=redis://127.0.0.1:6379

# 🔐 Güvenlik Şifrelemeleri
JWT_SECRET=your_super_secret_jwt_key
JWT_REFRESH_SECRET=your_super_secret_refresh_key

# 📧 Mail Hizmeti Ayarları (Gmail vb.)
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_app_password

# ☁️ Cloudinary (Medya Yükleme)
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# 🌐 İzin Verilen Kaynaklar (CORS)
FRONTEND_URL=http://localhost:3000

Not: Eğer Frontend'in API'yi bulmasını yapılandırmak istiyorsanız frontend/ klasörü altına frontend/.env dosyası koyabilirsiniz:

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_SOCKET_URL=http://localhost:5000

4️⃣ Uygulamayı Çalıştırma

Tüm ayarlar bittikten sonra iki farklı terminal sekmesinden projeyi başlatabilirsiniz.

# Terminal 1: Backend API ve Socket dinleyicisini Başlat
cd backend
npm start
# (Eğer nodemon yüklüyse dev komutunu çalıştırabilirsiniz: npm run dev)

# Terminal 2: React Arayüzünü Başlat
cd frontend
npm start

Uygulamanız varsayılan olarak http://localhost:5173 (Frontend) ve http://localhost:5000 (Backend) adreslerinde hizmet vermeye başlayacaktır.

---

🛠️ İlk Adımlar & Geliştirici Rehberi

Proje üzerinde çalışmaya başlamak için demo hesaplar güvenlik ve profesyonellik gerekçesiyle kaldırılmıştır. Kendi test ortamınızı kurmak için şu adımları izleyin:

1️⃣ İlk Admin Hesabını Oluşturma

Uygulamada varsayılan bir admin bulunmaz. İlk admini şu şekilde tanımlayabilirsiniz:

1. Frontend arayüzünden (/register) yeni bir hesap oluşturun.
2. MongoDB veritabanınıza bağlanın (Compass veya Shell kullanarak).
3. users koleksiyonunda yeni oluşturduğunuz kaydı bulun.
4. role alanını "user" yerine "admin" (veya yetkili başka bir rol) olarak güncelleyin.
5. Artık bu hesapla giriş yaparak Yönetici Paneli'ne erişebilirsiniz.

2️⃣ Test Senaryoları & Yol Haritası

Projeyi keşfetmek için şu özellikleri test ederek başlayabilirsiniz:

• Anlık Mesajlaşma: İki farklı tarayıcıdan farklı hesaplarla girerek Socket.io tabanlı sohbeti deneyimleyin.
• Profil Yönetimi: Avatar yükleme (Cloudinary) ve 2FA (İki Faktörlü Doğrulama) özelliklerini aktif edin.
• Yönetim Paneli: Diğer kullanıcıları yönetme, banlama ve istatistikleri inceleme süreçlerini kontrol edin.
• PWA Desteği: Tarayıcınızın "Yükle" (Install) özelliğini kullanarak uygulamanın mobil uyumlu yapısını test edin.

---

📂 Proje Dizin Yapısı

Projenin temel mimari dizini aşağıdakine benzer bir pattern kullanır:

/
├── backend/                  # REST API ve Websocket İşlemleri
│   ├── config/               # DB ve Redis bağlantı konfigürasyonları
│   ├── controllers/          # İsteklerin işlendiği fonksiyonlar (Auth, Chat)
│   ├── middleware/           # Kimlik doğrulama, Hata yakalayıcı ve Yükleme ara katmanları
│   ├── models/               # Mongoose şemaları (User, Message, Room vb.)
│   ├── routes/               # API Yönlendiricileri (Endpoints)
│   ├── utils/                # E-posta gönderme, Cloudinary şablon yardımcıları
│   └── server.js             # Sunucunun başlatıldığı ana dosya
│
├── frontend/                 # Kullanıcı Etkileşim Yüzeyi
│   ├── src/
│   │   ├── components/       # Tekrar kullanılabilir, modüler arayüz bileşenleri
│   │   ├── context/          # State Yönetimi (AuthContext, ChatContext vb.)
│   │   ├── pages/            # Ana Modüller (Dashboard, Chat Mimarisi, Profil)
│   │   ├── utils/            # Axios API istek yardımcıları
│   │   ├── App.jsx           # Projenin Köklü Yönlendiricisi (Router)
│   │   └── styles.css        # Zenginleştirilmiş, temaya özel Vanilla Cascade yapısı

---

Tasarımsal İyileştirmeler ve Geliştirmeler ile sürekli güncellenmektedir.

---

Son Guncellemeler (2026-03-06)

Bu surumde projeye hem backend guvenligi hem de UX/UI deneyimi acisindan kapsamli iyilestirmeler eklendi.

Backend Iyilestirmeleri

• Ortak dogrulama yardimcilari eklendi: backend/utils/validators.js
• Kullanici listesi ve arama endpointlerinde:
  • Guvenli regex kullanimi
  • Pagination ve sort whitelist
  • ID/email/name dogrulama iyilestirmeleri
• Chat katmaninda:
  • Private odalara erisim kontrolu sertlestirildi
  • Mesaj cursor/pagination dogrulamasi eklendi
  • Oda olusturma kurallari ve mesaj/file validation guclendirildi
• Auth tarafinda:
  • Email normalize/sanitize
  • 2FA kod format dogrulamasi
  • Refresh cookie ayarlari ortam bazli guvenli hale getirildi
• Notification endpointlerinde ID ve pagination dogrulamalari eklendi
• Socket.io katmaninda private oda izin kontrolleri eklendi (join/typing/message akislarinda)

Frontend UX/UI Iyilestirmeleri

• Chat sayfasi gelistirildi:
  • Sohbet listesi ve mesajlar icin yukleniyor/hata/tekrar dene durumlari
  • Son acilan odanin hatirlanmasi
  • Mesaj kutusunda auto-resize
  • Dosya boyutu/tip dogrulama (kullanici geri bildirimi ile)
• Login sayfasi gelistirildi:
  • Sifre goster/gizle
  • 2FA girisinde numeric input deneyimi
  • Daha net istemci tarafi form dogrulamalari
• Bildirim altyapisi guclendirildi:
  • Notification socket baglantisi auth durumuna baglandi
  • Socket URL ve API URL uyumlulugu iyilestirildi
  • Dropdown erisilebilirlik/klavye davranislari duzeltildi
• Stil tarafinda chat hata-bilgi durumlari ve login sifre toggle bileşeni icin yeni CSS yardimcilari eklendi

Dogrulama

• Frontend build: npm.cmd run build basarili
• Backend test: npm.cmd test -- --runInBand basarili