Wisecolt-CI 🚀

Modern CI/CD Platformu - Repository otomasyonu ve test süreçleri için tasarlanmış tam teşekküllü web uygulaması

📋 İçindekiler

• ✨ Özellikler
• 🛠 Teknoloji Yığını
• 📁 Proje Yapısı
• 🚀 Kurulum
• 🎯 Kullanım
• 📚 Dökümantasyon
• 🧪 Geliştirme

✨ Özellikler

🔐 Güvenli Kimlik Yönetimi

• JWT Tabanlı Authentication: Modern ve güvenli token tabanlı kimlik doğrulama
• Korumalı Endpoint'ler: JWT middleware ile korunan API endpoint'leri
• Environment Security: Hassas bilgilerin güvenli .env dosyasında saklanması

📊 Job Yönetim Sistemi

• Repository Otomasyonu: Otomatik git clone/pull işlemleri
• Zaman Tabanlı Çalıştırma: Dakika/saat/gün bazında otomatik test çalıştırma
• Real-time Durum Güncellemesi: Socket.io ile anlık durum takibi
• Test Sonuçları: Başarılı/başarısız sonuçların kaydedilmesi
• Log Akışı: Gerçek zamanlı test loglarının izlenmesi

⚡ Gerçek Zamanlı İletişim

• WebSocket Bağlantısı: Socket.io ile sürekli iletişim
• Sayaç Yayınınlaması: Global sayaç ve işlemler
• Canlı Güncellemeler: Job durumlarının anlık bildirilmesi
• Ping/Pong: Bağlantı kontrolü

🎨 Modern Arayüz

• React 18: Modern bileşen tabanlı UI kütüphanesi
• TypeScript: Tip güvenli geliştirme deneyimi
• Responsive Design: Mobil uyumlu tasarım
• Tema Desteği: Dark/Light moda geçiş imkanı
• Toast Bildirimleri: Kullanıcı bildirim sistemi

🛠 Teknoloji Yığını

Backend Stack

Platform: Node.js 18+
Framework: Express.js
Language: TypeScript
Database: MongoDB
Authentication: JWT
Real-time: Socket.io
Process Manager: Child Process
ODM: Mongoose
Dev Tools: tsx (hot-reload)

Frontend Stack

Platform: React 18
Language: TypeScript
Build Tool: Vite
UI Library: shadcn/ui
Styling: Tailwind CSS
HTTP Client: Axios
Routing: React Router DOM
Icons: Lucide React + Font Awesome
Notifications: Sonner

DevOps

Containerization: Docker
Orchestration: Docker Compose
Hot Reload: Backend (tsx) + Frontend (Vite)
Environment: .env configuration
Development: Bind mounts for live reload

📁 Proje Yapısı

wisecolt-ci/
├── 📁 docs/                        # 📚 Dökümantasyonlar
│   ├── PROJE_DOKUMANTASYONU.md     # Detaylı proje dokümantasyonu
│   └── TEKNIK_ANALIZ_RAPORU.md     # Teknoloji analizi ve öneriler
├── 📁 backend/                      # ⚙️ Backend uygulaması
│   ├── src/
│   │   ├── 📁 config/              # Konfigürasyon yönetimi
│   │   │   └── env.ts
│   │   ├── 📁 middleware/           # Express middleware'leri
│   │   │   └── authMiddleware.ts
│   │   ├── 📁 models/              # MongoDB modelleri
│   │   │   └── job.ts
│   │   ├── 📁 routes/              # API route'ları
│   │   │   ├── auth.ts
│   │   │   └── jobs.ts
│   │   ├── 📁 services/            # İş mantığı katmanı
│   │   │   └── jobService.ts
│   │   └── 📄 index.ts               # Ana sunucu dosyası
│   ├── 📄 package.json
│   ├── 📄 tsconfig.json
│   ├── 🐳 Dockerfile
│   └── 📝 .env.example
├── 📁 frontend/                     # 🎨 Frontend uygulaması
│   ├── src/
│   │   ├── 📁 api/                 # API client katmanı
│   │   │   └── client.ts
│   │   ├── 📁 components/          # UI bileşenleri
│   │   │   ├── 📁 ui/           # shadcn/ui bileşenleri
│   │   │   │   ├── button.tsx
│   │   │   │   ├── card.tsx
│   │   │   │   ├── input.tsx
│   │   │   │   ├── select.tsx
│   │   │   │   └── ...
│   │   │   ├── ProtectedRoute.tsx
│   │   │   ├── DashboardLayout.tsx
│   │   │   └── ThemeToggle.tsx
│   │   ├── 📁 pages/               # Sayfa bileşenleri
│   │   │   ├── HomePage.tsx
│   │   │   ├── JobsPage.tsx
│   │   │   └── JobDetailPage.tsx
│   │   ├── 📁 providers/           # React Context Provider'lar
│   │   │   ├── auth-provider.tsx
│   │   │   ├── socket-provider.tsx
│   │   │   ├── live-provider.tsx
│   │   │   └── theme-provider.tsx
│   │   ├── 📄 App.tsx              # Ana uygulama bileşeni
│   │   └── 📄 main.tsx             # Giriş noktası
│   ├── 📄 package.json
│   ├── 📄 vite.config.ts
│   ├── 🎨 tailwind.config.js
│   ├── 🐳 Dockerfile
│   └── 📝 .env.example
├── 🐳 docker-compose.yml              # 🐳 Konteyner orkestrasyonu
├── 📄 README.md                      # 📋 Proje ana sayfası
├── 📄 .gitignore                    # Git ignore kuralları
└── 📝 .env.example                   # Ortam değişkenleri örneği

🚀 Kurulum

Gereksinimler

• Docker ve Docker Compose
• Git (repository klonlama için)

1. Repository Klonlama

git clone https://github.com/kullanici/wisecolt-ci.git
cd wisecolt-ci

2. Ortam Değişkenlerini Ayarlama

# Backend konfigürasyonu
cp backend/.env.example backend/.env

# Frontend konfigürasyonu
cp frontend/.env.example frontend/.env

# Admin bilgilerini güvenli şekilde girin
# backend/.env dosyasını düzenleyin

3. Servisleri Başlatma

# Tüm servisleri build edip başlatma
docker compose up --build

# Arka planda çalıştırma
docker compose up -d --build

4. Uygulamaya Erişim

• Frontend: http://localhost:5173
• Backend API: http://localhost:4000
• MongoDB: mongodb://localhost:27017
• Health Check: http://localhost:4000/health

🎯 Kullanım

Giriş İşlemi

1. Tarayıcıda http://localhost:5173 adresine gidin
2. Varsayılan giriş bilgileri:
   • Kullanıcı Adı: admin
   • Şifre: supersecret
3. Giriş yap butonuna tıklayın

Job Yönetimi

Yeni Job Oluşturma

1. Dashboard menüsünden Jobs sayfasına gidin
2. Yeni Job butonuna tıklayın
3. Job bilgilerini girin:
   • Job Adı: Tanımlayıcı bir isim
   • Repository URL: GitHub repository adresi
   • Test Komutu: Çalıştırılacak komut (örn: npm test)
   • Kontrol Aralığı: Test sıklığı (dakika/saat/gün)
   • Kontrol Değeri: Sayısal değer
4. Kaydet butonuna tıklayın

Job İzleme

• Jobs Listesi: Tüm job'ların durumunu gösterir
• Real-time Durum: Socket.io ile anlık güncellemeler
• Log Akışı: Test çıktılarını canlı izleme
• Manuel Çalıştırma: Job'u anında tetikleme

Authentication

Token Yönetimi

• Otomatik Login: Başarılı girişte JWT token oluşturulur
• Token Saklama: localStorage'da güvenli saklama
• Otomatik Yenileme: Sayfa yenilemede token kontrolü
• Korumalı Yönlendirme: Token olmadığında login sayfası

📚 Dökümantasyon

📄 Detaylı Dökümantasyonlar

• PROJE_DOKUMANTASYONU.md - Kapsamlı proje dokümantasyonu
• TEKNIK_ANALIZ_RAPORU.md - Teknoloji analizi ve öneriler

📖 API Referansı

• Authentication API'leri: /auth/login, /auth/me
• Job Yönetim API'leri: CRUD operasyonları, manuel çalıştırma
• WebSocket Olayları: Real-time iletişim ve durum güncellemeleri
• Endpoint Detayları: Her endpoint için istek/yanıt formatları

🏗 Mimari Dokümantasyonu

• Backend Mimarisi: Express.js + TypeScript + MongoDB
• Frontend Mimarisi: React 18 + Vite + shadcn/ui
• Socket.io İletişimi: WebSocket olayları ve yönetimi
• Veritabanı Tasarımı: MongoDB schema ve indeksleme

🧪 Geliştirme

Geliştirme Ortamı Kurulumu

# Repository klonlama
git clone https://github.com/kullanici/wisecolt-ci.git
cd wisecolt-ci

# Backend bağımlılıkları
cd backend
npm install

# Frontend bağımlılıkları
cd ../frontend
npm install

# Servisleri başlatma
docker compose up --build

Hot Reload Özellikleri

• Backend: tsx watch src/index.ts - TypeScript derlemesi ve sunucu yeniden başlatma
• Frontend: Vite dev server - Hızlı modül değişiklikleri ve tarayıcı yenilemesi
• Docker Bind Mounts: Kod değişikliklerinin konteynerde anlık yansıması

API Geliştirme

// Yeni route ekleme
import { Router } from 'express';
import { authMiddleware } from '../middleware/authMiddleware';

const router = Router();
router.use(authMiddleware);

router.get('/endpoint', (req, res) => {
  res.json({ message: 'API çalışıyor' });
});

export default router;

Frontend Geliştirme

// Yeni bileşen oluşturma
import React from 'react';

const YeniBilesen = () => {
  return (
    <div className="p-4">
      <h1>Yeni Bileşen</h1>
      <p>Bileşen içeriği</p>
    </div>
  );
};

export default YeniBilesen;

Test Çalıştırma

# Backend testleri
cd backend
npm test

# Frontend testleri
cd frontend
npm test

Kod Standartları

• TypeScript: Strict typing ve interface kullanımı
• ESLint: Kod kalite kontrolü
• Prettier: Kod formatlama
• Git Hooks: Pre-commit validation'ları

🔧 Konfigürasyon

Environment Değişkenleri

# Backend (.env)
PORT=4000                          # Backend sunucu portu
MONGO_URI=mongodb://mongo:27017/wisecoltci  # MongoDB bağlantı adresi
ADMIN_USERNAME=admin                  # Admin kullanıcı adı
ADMIN_PASSWORD=supersecret           # Admin şifresi
JWT_SECRET=gizli-jwt-anahtari      # JWT imzalama anahtarı
CLIENT_ORIGIN=http://localhost:5173    # Frontend adresi (CORS için)

# Frontend (.env)
VITE_API_URL=http://localhost:4000      # Backend API adresi

Port Yapılandırması

Servis	Port	Açıklama
Frontend	5173	Vite dev server
Backend	4000	Express API sunucusu
MongoDB	27017	Veritabanı servisi

🚨 Hata Ayıklama

Common Issues

1. Port Çakışması: Portların kullanımda olup olmadığını kontrol edin
2. MongoDB Bağlantı Hatası: Docker servisinin çalıştığından emin olun
3. CORS Hatası: CLIENT_ORIGIN ayarını kontrol edin
4. JWT Hatası: Token süresi dolmuş olabilir

Log Kontrolü

# Docker konteyner logları
docker compose logs backend
docker compose logs frontend
docker compose logs mongo

# Real-time loglar
# Browser developer tools > Console
# Socket.io events için network tab

Performans Optimizasyonu

• Database İndeksleme: Sık sorgulanan alanlar için indeksler
• Frontend Bundle: Vite build optimizasyonu
• Caching: MongoDB ve Redis cache stratejileri
• Code Splitting: Lazy loading implementasyonu

📈 Vizyon ve Yol Haritası

Mevcut Durum (v1.0)

• ✅ Temel CI/CD platformu
• ✅ Real-time job yönetimi
• ✅ Modern web arayüzü
• ✅ Konteyner orkestrasyonu

Gelecek Planlar

• 🔄 Multi-branch Support: Farklı branch'ler için job yönetimi
• 🔔 Bildirim Sistemi: E-posta ve Slack bildirimleri
• 📊 Dashboard İstatistikleri: Performans ve kullanım metrikleri
• 🛡️ Güvenlik İyileştirmeleri: 2FA ve rate limiting
• 🌐 Multi-cloud Support: AWS, GCP, Azure entegrasyonu
• 📝 Custom Test Commands: Esnek test komutu yapılandırması

E-post Listesi

• 📊 Dashboard İstatistikleri: Job performans grafikleri
• 🔔 Bildirim Kanalları: Slack, Discord, Teams entegrasyonu
• 🔄 Pipeline Integration: GitHub Actions, GitLab CI entegrasyonu
• 🏗️ Template System: Hazır proje şablonları
• 🌐 Cloud Provider Filtreleri: AWS CodeDeploy, Vercel, Netlify

🤝 Katkı ve Destek

Katkıda Bulunma

1. Repository'i Forklayın: GitHub'da fork oluşturun
2. Feature Branch: feature/ozellik-adi formatında branch oluşturun
3. Pull Request: Değişiklikleri ana branch'e gönderin
4. Test: Tüm testlerin geçtiğinden emin olun
5. Dokümantasyon: Değişiklikleri belgelendirin

Hata Bildirimi

• GitHub Issues: github.com/proje/issues
• Feature İstekleri: github.com/proje/discussions
• Soru ve Yardım: Discord veya GitHub Discussions

Lisans

Bu proje MIT lisansı altında dağıtılmaktadır. Detaylı bilgi için LICENSE dosyasını inceleyin.

---

🌟 Teşekkürler

Bu projeye katkı sağlayan tüm geliştiricilere ve açık kaynak kütüphanelerine teşekkür ederiz. Özelliklele:

• React Team - Modern UI kütüphanesi için
• Vite Team - Hızlı build tool için
• shadcn/ui - Modern bileşen kütüphanesi için
• MongoDB Team - Esnek veritabanı için
• Socket.io - Gerçek zamanlı iletişim için

Wisecolt-CI - Repository otomasyonu, basitleştirilmiş! 🚀