JS Case APP - TaskBoard

⏳ 4 gün sürelik bir case çalışmasıdır.

Gerçek zamanlı takım çalışması ve görev yönetim platformu

TaskBoard, ekiplerin projelerini ve görevlerini birlikte yönetmesini sağlayan, gerçek zamanlı güncellemeler sunan modern bir web uygulamasıdır.

---

İçindekiler

• Özellikler
• Yetkilendirme Sistemi
• Canlı Güncellemeler
• Örnek İstek Akışı
• Teknolojiler
• Kurulum
• Lisans

---

Özellikler

• 🔐 Kimlik Doğrulama: Email tabanlı OTP doğrulama, JWT (access & refresh) token yapısı ve çoklu cihaz oturum kontrolü
• 👥 Takım Yönetimi: Takım oluşturma ve düzenleme, davet linki ile üye ekleme, rol bazlı yetkilendirme (Admin / Member)
• 📊 Proje Yönetimi: Proje oluşturma ve güncelleme, proje üyeleri ve rollerini güncelleme, proje durumuna yönelik temel istatistikler
• ✅ Görev Yönetimi: Görev oluşturma ve düzenleme, çoklu kullanıcı atama
• 💬 Yorumlar ve İletişim: Görevler üzerinde yorum yapma, gerçek zamanlı güncellemeler
• 🔔 Bildirim Sistemi: WebSocket üzerinden anlık bildirimler, bildirim merkezi ve okundu olarak işaretleme
• 🎨 UI/UX: Karanlık & aydınlık tema desteği, tamamen responsive tasarım (mobil / tablet / desktop), gerçek zamanlı veri güncellemeleri

---

Yetkilendirme Sistemi

Uygulama Yetki Matrisi

TaskBoard'da 3 seviyeli rol tabanlı yetkilendirme (RBAC):

İşlem	Takım Admini	Proje Admini	Proje Üyesi	Takım Üyesi (Projesiz)
TAKIM YÖNETİMİ
Takım bilgilerini güncelleme	✅	❌	❌	❌
Davet linki yenileme	✅	❌	❌	❌
Üye davet etme/rol değiştirme	✅	❌	❌	❌
PROJE YÖNETİMİ
Proje görüntüleme	✅	✅	✅	✅
Proje oluşturma	✅	❌	❌	❌
Proje düzenleme	✅ (tümü)	✅ (kendi)	❌	❌
GÖREV YÖNETİMİ
Görevleri görüntüleme	✅	✅	✅	✅
Görev oluşturma	✅	✅ (proje içi)	❌	❌
Görev düzenleme	✅	✅ (proje içi)	❌	❌
İLETİŞİM
Yorum görüntüleme	✅	✅	✅	✅
Yorum yapma	✅	✅ (proje içi)	✅ (atandığı)	❌
KİŞİSEL
Profil güncelleme	✅	✅	✅	✅
Oturum yönetimi	✅	✅	✅	✅

---

Canlı Güncellemeler

TaskBoard, Socket.io kullanarak gerçek zamanlı güncellemeler sağlar. Aşağıdaki olaylar canlı olarak dinlenir:

Takım Güncellemeleri

• Yeni üye ekleme
• Üye rol değişikliği
• Takım adı güncelleme

Proje Güncellemeleri

• Yeni proje oluşturma
• Proje bilgileri güncelleme

Görev Güncellemeleri

• Yeni görev oluşturma
• Görev bilgileri güncelleme

İletişim

• Göreve yorum ekleme

Bildirimler

• Yeni bildirim geldiğinde anlık iletim

---

Örnek İstek Akışı

Görev Oluşturma Akışı

Bir kullanıcı yeni görev oluşturduğunda sistemde minimum şu işlemler olur:

Client (React)
  ├─ Form Validation
  └─ POST /api/tasks
      ↓
API Container (Express)
  ├─ Rate Limiting (Redis Cache)
  ├─ JWT Token Doğrulama + Session Kontrolü
  ├─ RBAC Kontrolü: Kullanıcı Yetkisi
  ├─ Ajv Schema Validation
  ├─ MongoDB: Task.create() → Yeni task kaydedilir
  ├─ Socket.io emit → Proje odasındaki tüm kullanıcılara
  │   └─ Event: "task:created" → Frontend'de canlı güncelleme
  ├─ RabbitMQ: publishEvent("task.created") → event queue'ya gönderilir
  └─ Response 201: { task } → Client'a başarılı sonuç döner
      ↓
RabbitMQ (Message Queue)
  └─ Event "task.created" queue'da bekler
      ↓
Worker Container (Background)
  ├─ Event'i consume eder
  ├─ Her assignee için bildirim oluşturulur → MongoDB
  ├─ Redis Pub/Sub: PUBLISH socket:events → tüm API instance'larına bildirim
  └─ Gerekliyse email gönderme (EMAIL_MODE=resend ise Resend API'ye istek)
      ↓
Redis Pub/Sub
  └─ Tüm API container'larına event dağıtır
      ↓
API Container(s) - Socket.io
  └─ Redis'ten event alır ve kullanıcı room'larına bildirimi emit eder
      ↓
Client (React)
  └─ Socket event'leri yakalanır ve gerekli işlemler yapılır

Kimlik Doğrulama Mini Akışı

1. SIGNUP / LOGIN
   ├─► POST /api/auth/signup
   │   └─► Email + Password → OTP gönderilir
   │
   └─► POST /api/auth/login
       └─► Email + Password → OTP gönderilir

2. OTP VERIFICATION
   └─► POST /api/auth/verify-otp
       ├─► OTP doğrulanır
       ├─► Session oluşturulur (MongoDB)
       ├─► Access Token (1 saat)
       └─► Refresh Token (7 gün, httpOnly cookie)

3. AUTHENTICATED REQUESTS
   └─► Authorization: Bearer <access_token>
       └─► Middleware: authenticate()
           ├─► Token verify edilir
           ├─► Session kontrolü (valid mi?)
           └─► req.user ve req.session set edilir

4. TOKEN REFRESH
   └─► POST /api/auth/refresh
       ├─► Refresh token (cookie'den)
       ├─► Session kontrolü
       └─► Yeni Access Token döner

5. LOGOUT
   └─► POST /api/auth/logout
       ├─► Session revoke edilir
       └─► Cookie temizlenir

---

Teknolojiler

Stack

Frontend:
React 19, Vite, React Router, TanStack Query, Zustand, Radix UI, Shadcn UI, Tailwind CSS, Lucide Icons

Backend:
Node.js 24, Express 5, Socket.io, Mongoose, JWT, Ajv, Pino, Bcrypt

Infrastructure:
MongoDB 8.2, Redis 8.0, RabbitMQ 4, Nginx, Docker, pnpm

---

Kurulum

Geliştirme Ortamı

# 1. Bağımlılıkları yükle
pnpm install

# 2. Sadece infrastructure başlat
docker-compose up -d mongo redis rabbitmq

# 3. .env dosyaları oluştur
.env
apps/api/.env
apps/worker/.env
apps/web/.env

# 4. Servisleri başlat (ayrı terminaller)
pnpm dev:api      # Terminal 1
pnpm dev:worker   # Terminal 2
pnpm dev:web      # Terminal 3

Production Deployment

# 1. .env dosyalarını oluştur ve değerleri güncelle (api & worker & web)
cp .env.example .env

# 2. Docker Compose ile build & start
docker-compose up -d --build

# 3. Health check
docker-compose ps

---

Lisans

Copyright © 2026 Erkan Pulat. All Rights Reserved.

---